From 0d9c268cdfbe7522dc2f9b5b3eb2ba81bb7be891 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com>
Date: Fri, 16 Jul 2021 15:32:14 +0800
Subject: [PATCH] =?UTF-8?q?card=E4=B8=8A=E8=BE=B9=E7=9A=84=E8=BE=B9?=
 =?UTF-8?q?=E8=B7=9D=E5=8F=8A=E6=A0=87=E9=A2=98=E6=96=87=E5=AD=97=E9=A2=9C?=
 =?UTF-8?q?=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/front/unscramble/index.vue | 290 ++++++++++++++++++++++++++-
 src/views/policy/library/index.vue   |  11 +-
 src/views/policy/tag/index.vue       | 213 +++++++++++---------
 3 files changed, 414 insertions(+), 100 deletions(-)

diff --git a/src/views/front/unscramble/index.vue b/src/views/front/unscramble/index.vue
index b0d1df6..32e4fbb 100644
--- a/src/views/front/unscramble/index.vue
+++ b/src/views/front/unscramble/index.vue
@@ -1,5 +1,291 @@
 <template>
-  <div>
-    解读
+  <div class="app-container">
+    <el-card shadow="never">
+      <div>
+        <i class="el-icon-search"></i>
+        <span>筛选搜索</span>
+        <div style="float:right">
+          <el-button type="primary" @click="handleSearchList" size="small">
+            查询
+          </el-button>
+        </div>
+      </div>
+      <div style="margin-top: 15px">
+        <el-form
+          size="small"
+          :model="queryParams"
+          ref="queryForm"
+          :inline="true"
+          @submit.native.prevent
+        >
+          <el-form-item label="政策标题">
+            <el-input v-model="queryParams.title" placeholder="请输入" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-card>
+    <el-card class="operate-container" shadow="never">
+      <i class="el-icon-tickets"></i>
+      <span>数据列表</span>
+      <el-button class="btn-add" @click="handleAdd" size="mini">
+        添加分类
+      </el-button>
+    </el-card>
+    <el-table style="width: 100%" class="table-container" :data="categoryList">
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+      ></el-table-column>
+      <el-table-column
+        label="标签分类"
+        prop="name"
+        align="center"
+      ></el-table-column>
+      <el-table-column label="标签" align="center">
+        <template slot-scope="scope">
+          <el-button
+            plain
+            :disabled="scope.row.name == '类型' ? true : false"
+            size="mini"
+            @click="handleAddTag(scope.row.id)"
+            >添加标签</el-button
+          >
+          <el-button plain size="mini" @click="handleLook(scope.row.id)"
+            >查看标签</el-button
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button
+            @click="editDialog(scope.row)"
+            type="text"
+            size="small"
+            :disabled="scope.row.name == '类型' ? true : false"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.row.id)"
+            :disabled="scope.row.name == '类型' ? true : false"
+            type="text"
+            size="small"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 添加修改 -->
+    <el-dialog :title="str" :visible.sync="addDialog" width="500px">
+      <el-form :model="form" ref="form" :rules="rules" @submit.native.prevent>
+        <el-form-item label="名称" prop="name" label-width="80px">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="addDialog = false">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- 查看可删除 -->
+    <el-dialog title="查看标签" :visible.sync="lookDialog" width="300px">
+      <div v-for="(tag, index) in tagList" :key="tag.id">
+        <el-input
+          style="margin-top:10px;"
+          v-if="editable[index]"
+          v-model="tag.name"
+          :ref="'editableInput' + index"
+          size="small"
+          placeholder="请输入标签信息"
+          @keyup.enter.native="handleEditableInputConfirm(tag, index)"
+          @change="handleEditableInputConfirm(tag, index)"
+          @blur="handleEditableInputBlur(tag, index)"
+          show-word-limit
+        ></el-input>
+        <div v-else>
+          <span style="margin-right:10px">{{ index + 1 }}</span>
+          <el-tag
+            style="margin-top:10px;"
+            @click="showEditTagInput(index)"
+            closable
+            @close="handleClose(tag.id, index)"
+            >{{ tag.name }}</el-tag
+          >
+        </div>
+      </div>
+      <!-- <el-tag
+        v-for="(tag,index) in tagList"
+        :key="tag.id"
+        closable
+        @click="showEditTagInput(index)"
+        @close="closeTag(tag, index)"
+        >
+        {{tag.name}}
+      </el-tag> -->
+      <!-- <div slot="footer" class="dialog-footer">
+        <el-button @click="lookDialog = false">取 消</el-button>
+        <el-button type="primary" @click="handleTag">确 定</el-button>
+      </div> -->
+    </el-dialog>
   </div>
 </template>
+<script>
+import {
+  getCategory,
+  addCategory,
+  addLabel,
+  getLabel,
+  update,
+  del
+} from '@/api/policy/tag';
+export default {
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 100
+      },
+      // total:0,
+      categoryList: [],
+      form: {
+        name: ''
+      },
+      addDialog: false,
+      lookDialog: false,
+      tagList: [],
+      // 当前行
+      rowId: null,
+      // 弹出层标题
+      str: '',
+      // 表单校验
+      rules: {
+        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
+      },
+      editable: []
+    };
+  },
+  methods: {
+    getList() {
+      getCategory(this.queryParams).then(({ data }) => {
+        this.categoryList = data.list;
+        // this.total = data.total
+      });
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.addDialog = true;
+      this.str = '添加标签分类';
+    },
+    handleAddTag(id) {
+      this.handleAdd();
+      this.str = '添加标签';
+      this.rowId = id;
+    },
+    /** 表单重置 */
+    reset() {
+      this.form = {
+        name: ''
+      };
+      this.resetForm('form');
+    },
+    /** 提交表单 */
+    submitForm() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          if (this.str === '添加标签分类') {
+            addCategory(this.form).then(({ message }) => {
+              this.msgSuccess(message);
+              this.addDialog = false;
+              this.getList();
+            });
+          } else if (this.str === '添加标签') {
+            addLabel(Object.assign({}, { id: this.rowId }, this.form)).then(
+              ({ message }) => {
+                this.msgSuccess(message);
+                this.addDialog = false;
+                this.getList();
+              }
+            );
+          } else {
+            update(this.form).then(({ message }) => {
+              this.msgSuccess(message);
+              this.addDialog = false;
+              this.getList();
+            });
+            // addLabel(Object.assign({},{id:this.rowId},this.form)).then(({message}) => {
+            //   this.msgSuccess(message);
+            //   this.addDialog = false;
+            //   this.getList();
+            // });
+          }
+        }
+      });
+    },
+    /** 查看标签 */
+    handleLook(id) {
+      this.lookDialog = true;
+      getLabel(Object.assign({}, { id }, this.queryParams)).then(({ data }) => {
+        this.tagList = data.list;
+      });
+    },
+    // 编辑 input发生改变
+    handleEditableInputConfirm(item, index) {
+      if (item.name) {
+        // 把当前修改的发送
+        update(item).then(res => {
+          this.$set(this.editable, index, false);
+        });
+      } else {
+        this.$message({ message: '请输入标签信息', type: 'info' });
+      }
+    },
+    //编辑 input失去焦点
+    handleEditableInputBlur(item, index) {
+      this.handleEditableInputConfirm(item, index);
+    },
+    // 编辑 input显示
+    showEditTagInput(index) {
+      this.$set(this.editable, index, true);
+      this.$nextTick(_ => {
+        let editableInput = 'editableInput' + index;
+        this.$refs[editableInput][0].$refs.input.focus();
+      });
+    },
+    handleClose(id, i) {
+      del({ id }).then(res => {
+        this.tagList.splice(i, 1);
+      });
+      // this.tagList.splice(this.tagList.indexOf(id), 1);
+    },
+    editDialog(row) {
+      this.form = Object.assign({}, row);
+      this.addDialog = true;
+      this.str = '修改标签分类';
+    },
+    /** 删除按钮操作 */
+    handleDelete(id) {
+      this.$confirm('确认删除该分类?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(function() {
+          return del({ id });
+        })
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    }
+  },
+  created() {
+    this.getList();
+  }
+};
+</script>
+<style lang="scss" scoped>
+// .el-tag + .el-tag {
+//   margin-left: 10px;
+// }
+</style>
diff --git a/src/views/policy/library/index.vue b/src/views/policy/library/index.vue
index 9ba4727..f4ec02e 100644
--- a/src/views/policy/library/index.vue
+++ b/src/views/policy/library/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-card class="operate-container" shadow="never">
+    <el-card shadow="never">
       <div>
         <i class="el-icon-search"></i>
         <span>筛选搜索</span>
@@ -22,7 +22,6 @@
               v-model="queryParams.title"
               placeholder="请输入"
               clearable
-              @keyup.enter.native="handleQuery"
             />
           </el-form-item>
           <el-form-item label="产出">
@@ -102,7 +101,13 @@
           }}
         </template>
       </el-table-column>
-      <el-table-column label="政策标题" align="center" prop="title" />
+      <el-table-column label="政策标题" align="center" prop="title">
+        <template slot-scope="scope">
+          <el-link type="primary" :underline="false">{{
+            scope.row.title
+          }}</el-link>
+        </template>
+      </el-table-column>
       <el-table-column label="级别" align="center" prop="level" width="150">
         <template slot-scope="scope">
           <span v-if="scope.row.level == 1">省级</span>
diff --git a/src/views/policy/tag/index.vue b/src/views/policy/tag/index.vue
index 2688ce7..9067742 100644
--- a/src/views/policy/tag/index.vue
+++ b/src/views/policy/tag/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-card class="operate-container" shadow="never">
+    <el-card shadow="never">
       <i class="el-icon-tickets"></i>
       <span>数据列表</span>
       <el-button class="btn-add" @click="handleAdd" size="mini">
@@ -8,28 +8,42 @@
       </el-button>
     </el-card>
     <el-table style="width: 100%" class="table-container" :data="categoryList">
-      <el-table-column label="序号" align="center" type="index"></el-table-column>
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+      ></el-table-column>
       <el-table-column
         label="标签分类"
         prop="name"
         align="center"
       ></el-table-column>
-      <el-table-column
-        label="标签"
-        align="center"
-      >
-      <template slot-scope="scope">
-         <el-button plain :disabled="scope.row.name=='类型'?true:false" size="mini" @click="handleAddTag(scope.row.id)">添加标签</el-button>
-         <el-button plain size="mini" @click="handleLook(scope.row.id)">查看标签</el-button>
-      </template>
+      <el-table-column label="标签" align="center">
+        <template slot-scope="scope">
+          <el-button
+            plain
+            :disabled="scope.row.name == '类型' ? true : false"
+            size="mini"
+            @click="handleAddTag(scope.row.id)"
+            >添加标签</el-button
+          >
+          <el-button plain size="mini" @click="handleLook(scope.row.id)"
+            >查看标签</el-button
+          >
+        </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button @click="editDialog(scope.row)" type="text" size="small" :disabled="scope.row.name=='类型'?true:false"
+          <el-button
+            @click="editDialog(scope.row)"
+            type="text"
+            size="small"
+            :disabled="scope.row.name == '类型' ? true : false"
             >编辑</el-button
           >
           <el-button
-            @click="handleDelete(scope.row.id)" :disabled="scope.row.name=='类型'?true:false"
+            @click="handleDelete(scope.row.id)"
+            :disabled="scope.row.name == '类型' ? true : false"
             type="text"
             size="small"
             >删除</el-button
@@ -52,20 +66,20 @@
     <!-- 查看可删除 -->
     <el-dialog title="查看标签" :visible.sync="lookDialog" width="300px">
       <div v-for="(tag, index) in tagList" :key="tag.id">
-          <el-input
-            style="margin-top:10px;"
-            v-if="editable[index]"
-            v-model="tag.name"
-            :ref="'editableInput' + index"
-            size="small"
-            placeholder="请输入标签信息"
-            @keyup.enter.native="handleEditableInputConfirm(tag, index)"
-            @change="handleEditableInputConfirm(tag, index)"
-            @blur="handleEditableInputBlur(tag, index)"
-            show-word-limit
-          ></el-input>
-          <div v-else>
-            <span style="margin-right:10px">{{index+1}}</span>
+        <el-input
+          style="margin-top:10px;"
+          v-if="editable[index]"
+          v-model="tag.name"
+          :ref="'editableInput' + index"
+          size="small"
+          placeholder="请输入标签信息"
+          @keyup.enter.native="handleEditableInputConfirm(tag, index)"
+          @change="handleEditableInputConfirm(tag, index)"
+          @blur="handleEditableInputBlur(tag, index)"
+          show-word-limit
+        ></el-input>
+        <div v-else>
+          <span style="margin-right:10px">{{ index + 1 }}</span>
           <el-tag
             style="margin-top:10px;"
             @click="showEditTagInput(index)"
@@ -73,8 +87,8 @@
             @close="handleClose(tag.id, index)"
             >{{ tag.name }}</el-tag
           >
-          </div>
         </div>
+      </div>
       <!-- <el-tag
         v-for="(tag,index) in tagList"
         :key="tag.id"
@@ -92,7 +106,14 @@
   </div>
 </template>
 <script>
-import { getCategory,addCategory,addLabel,getLabel,update,del } from '@/api/policy/tag';
+import {
+  getCategory,
+  addCategory,
+  addLabel,
+  getLabel,
+  update,
+  del
+} from '@/api/policy/tag';
 export default {
   data() {
     return {
@@ -101,30 +122,28 @@ export default {
         pageSize: 100
       },
       // total:0,
-      categoryList:[],
+      categoryList: [],
       form: {
-          name: '',
-        },
+        name: ''
+      },
       addDialog: false,
-      lookDialog:false,
-      tagList:[],
+      lookDialog: false,
+      tagList: [],
       // 当前行
-      rowId:null,
+      rowId: null,
       // 弹出层标题
-      str: "",
+      str: '',
       // 表单校验
       rules: {
-        name: [
-          { required: true, message: "名称不能为空", trigger: "blur" }
-        ]
+        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
       },
-      editable: [],
+      editable: []
     };
   },
-  methods:{
-    getList(){
-      getCategory(this.queryParams).then(({data}) => {
-        this.categoryList = data.list
+  methods: {
+    getList() {
+      getCategory(this.queryParams).then(({ data }) => {
+        this.categoryList = data.list;
         // this.total = data.total
       });
     },
@@ -132,42 +151,44 @@ export default {
     handleAdd() {
       this.reset();
       this.addDialog = true;
-      this.str = "添加标签分类";
+      this.str = '添加标签分类';
     },
-    handleAddTag(id){
-      this.handleAdd()
-      this.str = "添加标签";
-      this.rowId = id
+    handleAddTag(id) {
+      this.handleAdd();
+      this.str = '添加标签';
+      this.rowId = id;
     },
     /** 表单重置 */
     reset() {
       this.form = {
-         name: '',
+        name: ''
       };
-      this.resetForm("form");
+      this.resetForm('form');
     },
     /** 提交表单 */
-    submitForm(){
-      this.$refs["form"].validate(valid => {
+    submitForm() {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.str === '添加标签分类') {
-            addCategory(this.form).then(({message}) => {
+            addCategory(this.form).then(({ message }) => {
               this.msgSuccess(message);
               this.addDialog = false;
               this.getList();
             });
-          } else if((this.str === '添加标签')) {
-            addLabel(Object.assign({},{id:this.rowId},this.form)).then(({message}) => {
+          } else if (this.str === '添加标签') {
+            addLabel(Object.assign({}, { id: this.rowId }, this.form)).then(
+              ({ message }) => {
+                this.msgSuccess(message);
+                this.addDialog = false;
+                this.getList();
+              }
+            );
+          } else {
+            update(this.form).then(({ message }) => {
               this.msgSuccess(message);
               this.addDialog = false;
               this.getList();
             });
-          }else{
-            update(this.form).then(({message})=>{
-              this.msgSuccess(message);
-              this.addDialog = false;
-              this.getList()
-            })
             // addLabel(Object.assign({},{id:this.rowId},this.form)).then(({message}) => {
             //   this.msgSuccess(message);
             //   this.addDialog = false;
@@ -178,67 +199,69 @@ export default {
       });
     },
     /** 查看标签 */
-    handleLook(id){
-      this.lookDialog = true
-      getLabel(Object.assign({},{id},this.queryParams)).then(({data})=>{
-        this.tagList = data.list
-      })
+    handleLook(id) {
+      this.lookDialog = true;
+      getLabel(Object.assign({}, { id }, this.queryParams)).then(({ data }) => {
+        this.tagList = data.list;
+      });
     },
     // 编辑 input发生改变
-    handleEditableInputConfirm(item, index){
+    handleEditableInputConfirm(item, index) {
       if (item.name) {
         // 把当前修改的发送
-        update(item).then(res=>{
+        update(item).then(res => {
           this.$set(this.editable, index, false);
-        })
+        });
       } else {
-        this.$message({ message: "请输入标签信息", type: "info" });
+        this.$message({ message: '请输入标签信息', type: 'info' });
       }
     },
     //编辑 input失去焦点
-    handleEditableInputBlur(item, index){
-      this.handleEditableInputConfirm(item, index)
+    handleEditableInputBlur(item, index) {
+      this.handleEditableInputConfirm(item, index);
     },
     // 编辑 input显示
-    showEditTagInput(index){
+    showEditTagInput(index) {
       this.$set(this.editable, index, true);
-      this.$nextTick((_) => {
-        let editableInput = "editableInput" + index;
+      this.$nextTick(_ => {
+        let editableInput = 'editableInput' + index;
         this.$refs[editableInput][0].$refs.input.focus();
       });
     },
-    handleClose(id,i){
-      del({id}).then(res=>{
-        this.tagList.splice(i,1);
-      })
+    handleClose(id, i) {
+      del({ id }).then(res => {
+        this.tagList.splice(i, 1);
+      });
       // this.tagList.splice(this.tagList.indexOf(id), 1);
     },
-    editDialog(row){
+    editDialog(row) {
       this.form = Object.assign({}, row);
       this.addDialog = true;
-      this.str = "修改标签分类";
+      this.str = '修改标签分类';
     },
     /** 删除按钮操作 */
     handleDelete(id) {
-      this.$confirm('确认删除该分类?', "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return del({id});
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
+      this.$confirm('确认删除该分类?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(function() {
+          return del({ id });
         })
-    },
+        .then(() => {
+          this.getList();
+          this.msgSuccess('删除成功');
+        });
+    }
   },
   created() {
-    this.getList()
+    this.getList();
   }
 };
 </script>
 <style lang="scss" scoped>
-  // .el-tag + .el-tag {
-  //   margin-left: 10px;
-  // }
+// .el-tag + .el-tag {
+//   margin-left: 10px;
+// }
 </style>