From 5597e72effccbdc0a5501549df19d3e14881aa88 Mon Sep 17 00:00:00 2001
From: pzy <yyy961002@163.com>
Date: Fri, 25 Feb 2022 10:56:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=93=E9=A2=98=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/article/subject/article.vue | 344 ++++++++++++++------------
 1 file changed, 182 insertions(+), 162 deletions(-)

diff --git a/src/views/article/subject/article.vue b/src/views/article/subject/article.vue
index 2b31234..fcc692e 100644
--- a/src/views/article/subject/article.vue
+++ b/src/views/article/subject/article.vue
@@ -1,158 +1,159 @@
 <template>
   <div class="app-container">
-    <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="专题"
-          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
-          type="primary"
-          icon="el-icon-search"
-          size="mini"
-          @click="getList"
-          >搜索</el-button
-        >
-      </el-form-item>
-    </el-form>
-    <div class="filter-container">
-      <el-button
-        class="filter-item el-button el-button--primary el-button--mini"
-        type="primary"
-        icon="el-icon-edit"
-        @click="handleCreate"
-        >添加文章</el-button
+    <el-card class="box-card">
+      <el-form
+        ref="queryForm"
+        :model="listQuery"
+        :inline="true"
+        label-width="68px"
       >
-    </div>
-    <el-table
-      :key="tableKey"
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%"
-    >
-      <el-table-column label="ID" prop="id" align="center">
-        <template slot-scope="{ row }">
-          <span>{{ row.id }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="专题" align="center">
-        <template slot-scope="{ row }">
-          <span>{{ row.special_id | getSubjectName(subject) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="标题" align="center">
-        <template slot-scope="{ row }">
-          <span>{{ row.article_title }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="封面图" align="center">
-        <template slot-scope="{ row }">
-          <img :src="row.img" height="100" />
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center">
-        <template slot-scope="{ row }">
-          <span>{{ row.create_time }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        class-name="small-padding fixed-width"
-      >
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            >删除</el-button
+      </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-button
+                style="margin-left: 5px"
+                class="filter-item el-button el-button--primary el-button--mini"
+                type="primary"
+                icon="el-icon-edit"
+                >搜索</el-button
+              >
+            </el-form-item>
+          </el-form>
+          <div class="filter-container">
+            <el-button
+              class="filter-item el-button el-button--primary el-button--mini"
+              type="primary"
+              icon="el-icon-edit"
+              @click="handleCreate"
+              >关联文章</el-button
+            >
+          </div>
+          <el-table
+            :key="tableKey"
+            v-loading="listLoading"
+            :data="list"
+            border
+            fit
+            highlight-current-row
+            style="width: 100%"
           >
-        </template>
-      </el-table-column>
-    </el-table>
+            <el-table-column label="ID" prop="id" align="center">
+              <template slot-scope="{ row }">
+                <span>{{ row.id }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="专题" align="center">
+              <template slot-scope="{ row }">
+                <span>{{ row.special_id | getSubjectName(subject) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="标题" align="center">
+              <template slot-scope="{ row }">
+                <span>{{ row.article_title }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="封面图" align="center">
+              <template slot-scope="{ row }">
+                <img :src="row.img" height="100" />
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center">
+              <template slot-scope="{ row }">
+                <span>{{ row.create_time }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="操作"
+              align="center"
+              class-name="small-padding fixed-width"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  >解绑</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+      </el-row>
 
-    <pagination
-      v-show="total > 0"
-      :total="total"
-      :page.sync="listQuery.page"
-      :limit.sync="listQuery.limit"
-      @pagination="getList"
-    />
-    <!-- 添加或修改分类对话框 -->
-    <el-drawer
-      ref="drawer"
-      :title="textMap[dialogStatus]"
-      :visible.sync="dialogFormVisible"
-      direction="rtl"
-      custom-class="drawer"
-      size="950px"
-    >
-      <div class="drawer__content">
-        <el-form
-          ref="dataForm"
-          :model="temp"
-          label-position="left"
-          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="关联文章">
-            <el-select
-              v-model="temp.article_id"
-              remote
-              :loading="searchArticleLoading"
-              :remote-method="remoteMethod"
-              reserve-keyword
-              placeholder="请输入关键字搜索"
-              filterable
-              :clearable="true"
-              @change="handleSelectBranch"
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="listQuery.page"
+        :limit.sync="listQuery.limit"
+        @pagination="getList"
+      />
+      <!-- 添加或修改分类对话框 -->
+      <el-drawer
+        ref="drawer"
+        :title="textMap[dialogStatus]"
+        :visible.sync="dialogFormVisible"
+        direction="rtl"
+        custom-class="drawer"
+        size="950px"
+      >
+        <div class="drawer__content">
+          <el-form
+            ref="dataForm"
+            :model="temp"
+            label-position="left"
+            label-width="70px"
+            style
+          >
+            <el-form-item label="专题"
+              ><div>{{ special_title }}</div></el-form-item
             >
-              <el-option
-                v-for="(item, index) in articles"
-                :key="index"
-                :label="item.title"
-                :value="item.article_id"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-        </el-form>
-        <div class="drawer__footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="dialogFormVisible = false">取 消</el-button>
+            <el-form-item label="关联文章">
+              <el-select
+                v-model="temp.article_id"
+                remote
+                :loading="searchArticleLoading"
+                :remote-method="remoteMethod"
+                reserve-keyword
+                placeholder="请输入关键字搜索"
+                filterable
+                :clearable="true"
+                @change="handleSelectBranch"
+              >
+                <el-option
+                  v-for="(item, index) in articles"
+                  :key="index"
+                  :label="item.title"
+                  :value="item.article_id"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
+          <div class="drawer__footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="dialogFormVisible = false">取 消</el-button>
+          </div>
         </div>
-      </div>
-    </el-drawer>
+      </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;