添加文章表单

src/views/articleManagement/articleCreate.vue

@@ -4,21 +4,91 @@
       <TinymceEditor v-model="content"></TinymceEditor>
     </div>
     <div>
-      <a-button type="primary" html-type="submit" @click="submit">
-        提交
-      </a-button>
-      <a-button type="primary" html-type="submit" @click="preview">
-        预览
-      </a-button>
+      <a-form
+        :form="form"
+        :label-col="{ span: 5 }"
+        :wrapper-col="{ span: 12 }"
+        @submit="submit"
+      >
+        <a-form-item label="文章分类">
+          <!-- 文章分类父类 -->
+          <a-select
+            v-decorator="[
+              'articalClassParent',
+              {
+                rules: [{ required: true, message: '请选择文章分类父类' }],
+              },
+            ]"
+            @change="articleClassParentChange"
+          >
+            <a-select-option
+              v-for="(item, index) in articalClassParentArr"
+              :key="index"
+              :value="articalClassParentArr[index]"
+            >
+              {{ articalClassParentArr[index] }}
+            </a-select-option>
+          </a-select>
+          <!-- 文章分类子类 -->
+          <a-select
+            v-decorator="[
+              'articalClassChild',
+              {
+                rules: [{ required: true, message: '请选择文章分类子类' }],
+              },
+            ]"
+            @change="articleClassChildChange"
+          >
+            <a-select-option
+              v-for="(item, index) in articalClassChildArr"
+              :key="index"
+              :value="articalClassChildArr[index]"
+            >
+              {{ articalClassChildArr[index] }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item label="工作类别">
+          <a-select
+            v-decorator="[
+              'engineerType',
+              {
+                rules: [{ required: true, message: '请选择工种' }],
+              },
+            ]"
+            @change="articleClassParentChange"
+          >
+            <a-select-option
+              v-for="(item, index) in engineerTypeArray"
+              :key="index"
+              :value="engineerTypeArray[index]"
+            >
+              {{ engineerTypeArray[index] }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item label="必学日期:">
+          <a-date-picker @change="learnDateChoose" />
+        </a-form-item>
+
+        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+          <a-button type="primary" html-type="submit"> 提交 </a-button>
+          <a-button :style="{ marginLeft: '8px' }" @click="preview">
+            预览
+          </a-button>
+        </a-form-item>
+      </a-form>
     </div>
     <!-- 预览弹出框 -->
     <a-drawer
       title=""
-      placement="top"
+      placement="left"
       :closable="true"
       :visible="previewVisible"
-      @close="onClose"
-      height="100%"
+      @close="closepreview"
+      width="30%"
     >
       <p v-html="content">{{ content }}</p>
     </a-drawer>
@@ -37,7 +107,16 @@ export default {
   data() {
     return {
       content: "输入内容",
-      previewVisible: false
+      //   展示预览
+      previewVisible: false,
+      form: this.$form.createForm(this, { name: "coordinated" }),
+      articalClassParentArr: ["实践", "党建"],
+      articalClassChildArr: ["实践1", "实践2", "实践3", "实践4"],
+      engineerTypeArray: ["桥梁工", "桥隧工", "线路工"],
+      articalClassParent: "",
+      articalClassChild: "",
+      engineerType: "",
+      learnDate: ""
     };
   },
   created() {
@@ -50,14 +129,39 @@ export default {
   methods: {
     //初始化数据
     initDataFun() {},
+    // 提交表单
     submit() {
       console.log(this.content);
     },
+    // 预览
     preview() {
       this.previewVisible = true;
     },
-    onClose() {
+    // 关闭预览
+    closepreview() {
       this.previewVisible = false;
+    },
+    // 文章分类父类变化
+    articleClassParentChange(value) {
+      this.form.setFieldsValue({
+        articalClassParent: value
+      });
+    },
+    // 文章分类子类变化
+    articleClassChildChange(value) {
+      this.form.setFieldsValue({
+        articalClassChild: value
+      });
+    },
+    // 工种变化
+    engineerTypeChange(value) {
+      this.form.setFieldsValue({
+        engineerType: value
+      });
+    },
+    // 必学日期选择
+    learnDateChoose(date, dateString) {
+      this.learnDate = dateString;
     }
   }
 };
@@ -65,4 +169,8 @@ export default {
 
 <style lang="less"></style>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.app-container {
+  overflow: auto;
+}
+</style>