添加文章编辑

src/api/modules/article.js

@@ -10,6 +10,10 @@ export default {
     // 文章分类子集
     INTERFACE_GET_CATEGORIES_CATEGROYID: "categories/{categoryId}",
     // 新建文章
-    INTERFACE_POST_ADMIN_MATERIALS: "admin/materials"
+    INTERFACE_POST_ADMIN_MATERIALS: "admin/materials",
+    // 更新文章
+    INTERFACE_PUT_ADMIN_MATERIALS: "admin/materials/{materialId}",
+    // 获取文章
+    INTERFACE_GET_MATERIALS: "materials/{materialId}",
   }
 };

src/plugins/modules/axios.js

@@ -10,6 +10,7 @@ import { triggerEvent } from "@/utils/events";
 
 // 完整配置参考:  https://github.com/axios/axios#request-config
 axios.defaults.headers.post["Content-Type"] = "application/json;charset=utf-8";
+axios.defaults.headers.put["Content-Type"] = "application/json;charset=utf-8";
 axios.defaults.headers.delete["Content-Type"] = "application/json;charset=utf-8";
 
 let config = {

src/router/menu.js

@@ -24,11 +24,12 @@ export default [
       {
         path: '/articleManagement/list',
         meta: { title: '文章列表' },
-      },
-      {
-        path: '/articleManagement/create',
-        meta: { title: '新建文章' },
       }
+    //   ,
+    //   {
+    //     path: '/articleManagement/create',
+    //     meta: { title: '新建文章' },
+    //   }
     ],
   },
   {

src/views/articleManagement/articleCreate.vue

@@ -35,13 +35,13 @@
               ]"
             />
           </a-form-item>
-          <a-form-item label="文章分类">
+          <a-form-item label="文章分类" v-if="optionType == 'create'">
             <!-- 文章分类父类 -->
             <a-select
               v-decorator="[
                 'articleParentClass',
                 {
-                  rules: [{ required: true, message: '请选择文章分类父类' }],
+                  rules: [{ required: optionType == 'create', message: '请选择文章分类父类' }],
                 },
               ]"
               @change="articleClassParentChange"
@@ -53,13 +53,13 @@
               >
             </a-select>
           </a-form-item>
-          <a-form-item label="文章子类">
+          <a-form-item label="文章子类"  v-if="optionType == 'create'">
             <!-- 文章分类子类 -->
             <a-select
               v-decorator="[
                 'articleChildClass',
                 {
-                  rules: [{ required: true, message: '请选择文章分类子类' }],
+                  rules: [{ required: optionType == 'create', message: '请选择文章分类子类' }],
                 },
               ]"
               :disabled="!articleParentClass || !articleParentClass.id"
@@ -152,6 +152,7 @@ export default {
       articleChildClass: {},
       engineerType: '',
       learnDate: '',
+      optionType:''
     };
   },
   created() {
@@ -163,9 +164,18 @@ export default {
   computed: {},
   methods: {
     //初始化数据
-    initDataFun() {
-      this.getArticleParentClass();
-      this.getEngineersWork();
+   async initDataFun() {
+     await this.getArticleParentClass();
+     await this.getEngineersWork();
+      let type = this.$route.query.type;
+      this.optionType = type;
+      // 判断是新增文章还是编辑文章
+      if('edit' === type) {
+        console.log("---edit---");
+        await this.getArticleContent();       
+      }else if('create'===type) {
+        console.log("---create---");
+      }
     },
     // 查询文章分类父级
     getArticleParentClass() {
@@ -204,8 +214,8 @@ export default {
         });
     },
     // 查询工作类别
-    getEngineersWork() {
-      this.$_http
+    async getEngineersWork() {
+      await this.$_http
         .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
         .then((res) => {
           this.engineerTypeArray = [{ name: '不限', id: '' }, ...res.data];
@@ -229,8 +239,8 @@ export default {
       this.articleChildClass = this.articleChildClassArr[value];
     },
     // 工种变化
-    engineerTypeChange(value) {
-      this.engineerType = this.engineerTypeArray[value];
+    engineerTypeChange(index) {
+      this.engineerType = this.engineerTypeArray[index];
     },
     // 必学日期选择
     learnDateChoose(date, dateString) {
@@ -239,10 +249,64 @@ export default {
     handleSubmitBtnFun() {
       document.getElementById('articleCreateSubmit').click();
     },
+    // 查询文章内容
+    getArticleContent() {
+      let pathParamsData = { materialId: this.$route.query.id };
+      this.$_http
+        .get(
+          formatePathParams(
+            this.$_API.INTERFACE_GET_MATERIALS,
+            pathParamsData
+          )
+        )
+        .then((res) => {
+          console.log("----" + JSON.stringify(res));
+          this.initEditArticleForm(res.data);
+          this.loading = false;
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    initEditArticleForm(item){
+      console.log('--------'+JSON.stringify(item));
+    //   文章标题
+      this.form.setFieldsValue({
+        name: item.name,
+      });
+    //   文章描述
+      let description = item.description==null?"":item.description
+      this.form.setFieldsValue({
+        description: description,
+      });
+    //   选中工种
+      if(item.engineerTypes.length !== 0){
+        let engineerId = item.engineerTypes[0];
+        for(let i = 0;i<this.engineerTypeArray.length;i++){
+            let element = this.engineerTypeArray[i];
+            if(element.id === engineerId){
+                this.engineerTypeChange(i);
+            }
+        }
+      }
+      let learnDate = item.tags.length===0?"":item.tags[0];
+    // 必学日期
+      this.learnDateChoose(null,learnDate );
+      // 文章内容
+      this.content = item.contents;
+    },
     // 提交表单
     handleSubmit(e) {
       e.preventDefault();
-
+      if('create'===this.optionType){
+          console.log("创建文章");
+          this.createArtical();
+      }else if('edit'===this.optionType){
+          console.log("更新文章");
+          this.updateArtical();
+      }
+    },
+    createArtical(){
       this.form.setFieldsValue({
         articleParentClass: this.articleParentClass.name,
       });
@@ -252,7 +316,6 @@ export default {
       this.form.setFieldsValue({
         engineerType: this.engineerType.name,
       });
-
       this.form.validateFields((err, values) => {
         if (!err) {
           // 新建文章
@@ -287,6 +350,43 @@ export default {
         }
       });
     },
+    updateArtical(){
+      let pathParamsData = { materialId: this.$route.query.id };
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          // 更新文章
+          let that = this;
+          that.$confirm({
+            title: '更新文章',
+            content: `确认更新文章吗？`,
+            okText: '确认',
+            cancelText: '取消',
+            onOk() {
+              that.loading = true;
+              let params = { categoryid: that.articleChildClass.id };
+              let bodyParams = {
+                id: that.$route.query.id,
+                name: values.name,
+                description: values.description,
+                type: 'ARTICLE',
+                contents: that.content,
+                tages: [that.learnDate],
+                engineerTypes: [that.engineerType.id],
+                links: [],
+              };
+              that.$_http
+                .put(formatePathParams(that.$_API.INTERFACE_PUT_ADMIN_MATERIALS,pathParamsData), bodyParams, {
+                  params,
+                })
+                .then(() => {
+                  that.$message.success('更新文章成功');
+                });
+            },
+            onCancel() {},
+          });
+        }
+      });
+    },
     // 预览
     preview() {
       this.previewVisible = true;

src/views/articleManagement/articleList.vue

@@ -50,6 +50,7 @@
                 >{{ item.name }}</a-select-option
               >
             </a-select>
+            <a-button type="primary" @click="handleAddArticleItem()">添加文章</a-button>
           </div>
         </div>
       </div>
@@ -99,9 +100,10 @@
               </div>
             </div>
             <div class="article-list-item-info-right">
-              <a-button type="danger" @click="handleDeleteArticleItem(item)"
-                >删除文章</a-button
-              >
+                <div class="article-option-button-box">
+                    <a-button type="primary" @click="handleEditArticleItem(item)">编辑</a-button>
+                    <a-button type="danger" @click="handleDeleteArticleItem(item)">删除</a-button>
+                </div>
             </div>
           </div>
         </div>
@@ -311,6 +313,20 @@ export default {
         onCancel() {},
       });
     },
+    // 操作：编辑文章
+    handleEditArticleItem(item){
+        this.$router.push({
+        path: '/articleManagement/create',
+        query: { id: item.id,type:"edit" }
+      });
+    },
+     // 操作：编辑文章
+    handleAddArticleItem(){
+        this.$router.push({
+        path: '/articleManagement/create',
+        query: { id: "",type:"create" }
+      });
+    },
     // 操作：切换页码
     onChangePagesize() {
       this.getArticleListFun(); // 查询：文章列表数据
@@ -371,6 +387,13 @@ export default {
           margin-left: 10px;
         }
       }
+    .article-list-item-info-right{
+        .article-option-button-box{
+          width:150px;
+          display: flex;
+          justify-content: space-between;
+        }
+      }
     }
   }
   .articleArticleType {