创建文章添加接口

src/api/modules/article.js

@@ -5,5 +5,9 @@ export default {
     INTERFACE_GET_ARTICLE_LIST: 'admin/materials',
     // 删除文章
     INTERFACE_POST_ARTICLE_DELETE: '',
+    // 文章分类父级
+    INTERFACE_GET_CATEGORIES: "categories",
+    // 文章分类子集
+    INTERFACE_GET_CATEGORIES_CATEGROYID: "categories/{categoryId}",
   }
 };

src/views/articleManagement/articleCreate.vue

@@ -6,15 +6,15 @@
     <div>
       <a-form
         :form="form"
-        :label-col="{ span: 5 }"
-        :wrapper-col="{ span: 12 }"
-        @submit="submit"
+        :label-col="{ span: 10 }"
+        :wrapper-col="{ span: 5 }"
+        @submit="handleSubmit"
       >
         <a-form-item label="文章分类">
           <!-- 文章分类父类 -->
           <a-select
             v-decorator="[
-              'articalClassParent',
+              'articalParentClass',
               {
                 rules: [{ required: true, message: '请选择文章分类父类' }],
               },
@@ -22,17 +22,18 @@
             @change="articleClassParentChange"
           >
             <a-select-option
-              v-for="(item, index) in articalClassParentArr"
+              v-for="(item, index) in articalParentClassArr"
               :key="index"
-              :value="articalClassParentArr[index]"
             >
-              {{ articalClassParentArr[index] }}
+              {{ articalParentClassArr[index].name }}
             </a-select-option>
           </a-select>
+        </a-form-item>
+        <a-form-item label="文章子类">
           <!-- 文章分类子类 -->
           <a-select
             v-decorator="[
-              'articalClassChild',
+              'articalChildClass',
               {
                 rules: [{ required: true, message: '请选择文章分类子类' }],
               },
@@ -40,11 +41,10 @@
             @change="articleClassChildChange"
           >
             <a-select-option
-              v-for="(item, index) in articalClassChildArr"
+              v-for="(item, index) in articalChildClassArr"
               :key="index"
-              :value="articalClassChildArr[index]"
             >
-              {{ articalClassChildArr[index] }}
+              {{ articalChildClassArr[index].name }}
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -57,14 +57,13 @@
                 rules: [{ required: true, message: '请选择工种' }],
               },
             ]"
-            @change="articleClassParentChange"
+            @change="engineerTypeChange"
           >
             <a-select-option
               v-for="(item, index) in engineerTypeArray"
               :key="index"
-              :value="engineerTypeArray[index]"
             >
-              {{ engineerTypeArray[index] }}
+              {{ engineerTypeArray[index].name }}
             </a-select-option>
           </a-select>
         </a-form-item>
@@ -73,9 +72,9 @@
           <a-date-picker @change="learnDateChoose" />
         </a-form-item>
 
-        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+        <a-form-item :wrapper-col="{ span: 20, offset: 10 }">
           <a-button type="primary" html-type="submit"> 提交 </a-button>
-          <a-button :style="{ marginLeft: '8px' }" @click="preview">
+          <a-button :style="{ marginLeft: '160px' }" @click="preview">
             预览
           </a-button>
         </a-form-item>
@@ -96,6 +95,7 @@
 </template>
 
 <script>
+import { pathParams } from "@/filters";
 export default {
   name: "articleCreate",
   props: {},
@@ -109,12 +109,12 @@ export default {
       content: "输入内容",
       //   展示预览
       previewVisible: false,
-      form: this.$form.createForm(this, { name: "coordinated" }),
-      articalClassParentArr: ["实践", "党建"],
-      articalClassChildArr: ["实践1", "实践2", "实践3", "实践4"],
-      engineerTypeArray: ["桥梁工", "桥隧工", "线路工"],
-      articalClassParent: "",
-      articalClassChild: "",
+      form: this.$form.createForm(this, { name: "articleCreate" }),
+      articalParentClassArr: [],
+      articalChildClassArr: [],
+      engineerTypeArray: [],
+      articalParentClass: {},
+      articalChildClass: {},
       engineerType: "",
       learnDate: ""
     };
@@ -128,40 +128,100 @@ export default {
   computed: {},
   methods: {
     //初始化数据
-    initDataFun() {},
-    // 提交表单
-    submit() {
-      console.log(this.content);
+    initDataFun() {
+      this.getArticalParentClass();
+      this.getEngineersWork();
     },
-    // 预览
-    preview() {
-      this.previewVisible = true;
+    // 查询文章分类父级
+    getArticalParentClass() {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_CATEGORIES)
+        .then(res => {
+          this.articalParentClassArr = res.data;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
-    // 关闭预览
-    closepreview() {
-      this.previewVisible = false;
+    // 查询文章分类子集
+    getArticalChildClass() {
+      let pathParamsData = { categoryId: "" };
+      this.$_http
+        .get(
+          pathParams(
+            this.$_API.INTERFACE_GET_CATEGORIES_CATEGROYID,
+            pathParamsData
+          )
+        )
+        .then(res => {
+          this.articalChildClassArr = res.data;
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
     },
+    // 查询工作类别
+    getEngineersWork() {
+      this.$_http
+        .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
+        .then(res => {
+          this.engineerTypeArray = res.data;
+        });
+    },
+
     // 文章分类父类变化
     articleClassParentChange(value) {
+      this.articalParentClass = this.articalParentClassArr[value];
+
+      // 获取子类的值
+      this.getArticalChildClass();
+      // 子类选项清空
+      this.articalChildClassArr = [];
       this.form.setFieldsValue({
-        articalClassParent: value
+        articalChildClass: ""
       });
     },
     // 文章分类子类变化
     articleClassChildChange(value) {
-      this.form.setFieldsValue({
-        articalClassChild: value
-      });
+      this.articalChildClass = this.articalChildClassArr[value];
     },
     // 工种变化
     engineerTypeChange(value) {
-      this.form.setFieldsValue({
-        engineerType: value
-      });
+      this.engineerType = this.engineerTypeArray[value];
     },
     // 必学日期选择
     learnDateChoose(date, dateString) {
       this.learnDate = dateString;
+    },
+    // 提交表单
+    handleSubmit(e) {
+      e.preventDefault();
+
+      this.form.setFieldsValue({
+        articalParentClass: this.articalParentClass.name
+      });
+      this.form.setFieldsValue({
+        articalChildClass: this.articalChildClass.name
+      });
+      this.form.setFieldsValue({
+        engineerType: this.engineerType.name
+      });
+      
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log("Received values of form: ", values);
+        }
+      });
+    },
+    // 预览
+    preview() {
+      this.previewVisible = true;
+    },
+    // 关闭预览
+    closepreview() {
+      this.previewVisible = false;
     }
   }
 };