专题修改

src/views/article/subject/article.vue

@@ -1,33 +1,38 @@
 <template>
   <div class="app-container">
+    <el-card class="box-card">
       <el-form
         ref="queryForm"
         :model="listQuery"
         :inline="true"
         label-width="68px"
       >
-      <el-form-item label="专题" prop="special_id">
-        <el-select
-          v-model="listQuery.special_id"
-          placeholder="专题"
+      </el-form>
+      <el-row :gutter="24">
+        <el-col :span="3">
+          <el-tree
+            style="width: 100%"
+            :data="subject"
+            highlight-current
+            :props="defaultProps"
+            @node-click="handleNodeClick"
+          ></el-tree>
+        </el-col>
+        <el-col :span="21">
+          <el-form>
+            <el-form-item label="文章标题" prop="title">
+              <el-input
+                v-model="article_title"
+                placeholder="请输入文章标题"
                 clearable
                 size="small"
                 style="width: 160px"
-        >
-          <el-option
-            v-for="dict in subject"
-            :key="dict.special_id"
-            :label="dict.title"
-            :value="dict.special_id"
               />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
               <el-button
+                style="margin-left: 5px"
+                class="filter-item el-button el-button--primary el-button--mini"
                 type="primary"
-          icon="el-icon-search"
-          size="mini"
-          @click="getList"
+                icon="el-icon-edit"
                 >搜索</el-button
               >
             </el-form-item>
@@ -38,7 +43,7 @@
               type="primary"
               icon="el-icon-edit"
               @click="handleCreate"
-        >添加文章</el-button
+              >关联文章</el-button
             >
           </div>
           <el-table
@@ -86,11 +91,13 @@
                   type="text"
                   icon="el-icon-delete"
                   @click="handleDelete(scope.row)"
-            >删除</el-button
+                  >解绑</el-button
                 >
               </template>
             </el-table-column>
           </el-table>
+        </el-col>
+      </el-row>
 
       <pagination
         v-show="total > 0"
@@ -116,16 +123,9 @@
             label-width="70px"
             style
           >
-          <el-form-item label="专题">
-            <el-select v-model="temp.special_id" placeholder="选择专题">
-              <el-option
-                v-for="(item, index) in subject"
-                :key="index"
-                :label="item.title"
-                :value="item.special_id"
-              ></el-option>
-            </el-select>
-          </el-form-item>
+            <el-form-item label="专题"
+              ><div>{{ special_title }}</div></el-form-item
+            >
             <el-form-item label="关联文章">
               <el-select
                 v-model="temp.article_id"
@@ -153,6 +153,7 @@
           </div>
         </div>
       </el-drawer>
+    </el-card>
   </div>
 </template>
 
@@ -183,7 +184,6 @@ export default {
         special_id: undefined,
       },
       subject: [],
-      uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
       temp: {
         id: undefined,
         special_id: undefined,
@@ -195,15 +195,11 @@ export default {
         update: "编辑",
         create: "添加",
       },
-      rules: {
-        // title: [
-        //   { required: true, message: "title is required", trigger: "blur" },
-        // ],
-      },
-      downloadLoading: false,
+      defaultProps: {},
       searchArticleLoading: false,
       articles: [],
-      validation: true,
+      special_title: "",
+      article_title: "",
     };
   },
   created() {
@@ -221,10 +217,26 @@ export default {
     },
   },
   methods: {
+    // 点击树形结构
+    handleNodeClick(data) {
+      this.listQuery.special_id = data.id;
+      this.defaultProps = data;
+      this.getList();
+    },
+    // 获取专题列表
     getSubjectList() {
       this.listLoading = true;
       listSubject(this.listQuery).then((response) => {
-        this.subject = response.data;
+        response.data.forEach((i) => {
+          this.subject.push({
+            label: i.title,
+            id: i.special_id,
+          });
+        });
+        this.subject.unshift({
+          label: "全部",
+          id: "",
+        });
       });
     },
     getList() {
@@ -236,7 +248,7 @@ export default {
         // Just to simulate the time of the request
         setTimeout(() => {
           this.listLoading = false;
-        }, 1.5 * 1000);
+        }, 600);
       });
     },
     handleFilter() {
@@ -260,12 +272,19 @@ export default {
     submitForm() {
       if (this.dialogStatus == "create") {
         this.createData();
-      } else if (this.dialogStatus == "update") {
-        this.updateData();
       }
     },
     handleCreate() {
+      if (!this.defaultProps.id) {
+        this.$message({
+          message: "请选择专题(全部除外)",
+          type: "warning",
+        });
+        return;
+      }
       this.resetTemp();
+      this.temp.special_id = this.defaultProps.id;
+      this.special_title = this.defaultProps.label;
       this.dialogStatus = "create";
       this.dialogFormVisible = true;
     },
@@ -285,7 +304,7 @@ export default {
       // })
     },
     async handleDelete({ article_title, article_id, special_id }) {
-      let confirm = this.$confirm(
+      let confirm = await this.$confirm(
         '是否确认删除名称为"' + article_title + '"的数据项?',
         "警告",
         {
@@ -294,7 +313,6 @@ export default {
           type: "warning",
         }
       );
-      console.log(1);
       let r = await delSubjectArticle({ article_id, special_id });
       if (r.code === 200) {
         this.$message({
@@ -341,6 +359,8 @@ export default {
 </script>
 <style lang="scss" scoped>
 .app-container {
+  width: 100%;
+  padding: 20px;
   .filter-container {
     margin-left: 5px;
     margin-bottom: 6px;