模板标签增删查操作

src/api/list.js

@@ -180,3 +180,11 @@ export function PageQueryMyMessage(data) {
 export function PageQueryTemplateListAdmin(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=page_query-PageQueryTemplateList_Admin`, data);
 }
+
+/**
+ * @description 查询标签列表（模板常用标签）
+ * @param {object} data
+ */
+export function QueryLabelList(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=template_manager-QueryLabelList`, data);
+}

src/api/template.js

@@ -69,3 +69,8 @@ export function TemplateAuditOperate(data) {
 export function TemplateRequestOperate(data) {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=template_manager-TemplateRequestOperate`, data);
 }
+
+// 删除标签（模板常用标签）
+export function DeleteTemplateLabel(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=template_manager-DeleteLabel`, data);
+}

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -1676,8 +1676,8 @@ export default {
       handler(val) {
         if (val) {
           // 如果有宽度为0且有内容的列，则行宽最小为撑满
-          if (this.rowWidth < this.width - 48) {
-            this.rowWidth = this.width - 48;
+          if (this.rowWidth < this.width - 2) {
+            this.rowWidth = this.width - 2;
           }
         }
       },
@@ -1713,8 +1713,8 @@ export default {
       });
       this.rowWidth += 132;
       // 如果有宽度为0且有内容的列，则行宽最小为撑满
-      if (this.rowWidth < this.width - 48) {
-        this.rowWidth = this.width - 48;
+      if (this.rowWidth < this.width - 2) {
+        this.rowWidth = this.width - 2;
       }
     },
     palyAudio(url, sIndex) {
@@ -2084,7 +2084,8 @@ export default {
 
     .NPC-word-list {
       overflow: auto;
-      background: #f7f7f7;
+
+      // background: #f7f7f7;
 
       .NPC-word-tab-common,
       .collocation,
@@ -2101,8 +2102,9 @@ export default {
       }
 
       > .NPC-word-tr {
-        margin-bottom: 8px;
-        background: #fff;
+        // margin-bottom: 8px;
+
+        // background: #fff;
         border-radius: 8px;
 
         .NPC-word-row {
@@ -2147,7 +2149,7 @@ export default {
   }
 
   .NPC-word-list {
-    padding: 20px 24px;
+    padding: 10px 0;
     border: 1px solid rgba(0, 0, 0, 10%);
     border-radius: 4px;
   }

src/views/personal_workbench/edit_task/preview/CreateCoursewareAsTemplate.vue

@@ -27,7 +27,7 @@
       <div class="form-item">
         <label for="label">标签</label>
         <div class="form-item-container label-list">
-          <el-tag v-for="tag in form.label_list" :key="tag" size="medium" closable @close="handleTagClose(tag)">
+          <!-- <el-tag v-for="tag in form.label_list" :key="tag" size="medium" closable @close="handleTagClose(tag)">
             {{ tag }}
           </el-tag>
 
@@ -40,7 +40,22 @@
             @keyup.enter.native="handleInputConfirm"
             @blur="handleInputConfirm"
           />
-          <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
+          <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button> -->
+          <el-select
+            v-model="form.label_list"
+            multiple
+            filterable
+            allow-create
+            default-first-option
+            placeholder="请选择或输入模板标签"
+          >
+            <el-option v-for="(item, index) in options" :key="item.id" :label="item.name" :value="item.name">
+              <span style="float: left">{{ item.name }}</span>
+              <span style="float: right; font-size: 12px; color: #8492a6" @click.stop="handleDeleteLabel(item, index)"
+                >删除</span
+              >
+            </el-option>
+          </el-select>
         </div>
       </div>
       <div class="form-item">
@@ -59,6 +74,8 @@
 </template>
 
 <script>
+import { QueryLabelList } from '@/api/list.js';
+import { DeleteTemplateLabel } from '@/api/template';
 export default {
   name: 'CreateCoursewareAsTemplate',
   props: {
@@ -87,6 +104,7 @@ export default {
         { label: '本课', value: 1 },
         { label: '本书', value: 3 },
       ],
+      options: [],
     };
   },
   computed: {
@@ -96,7 +114,10 @@ export default {
   },
   watch: {
     visible(newVal) {
-      if (newVal) return;
+      if (newVal) {
+        this.queryLabelList();
+        return;
+      }
       this.form = {
         name: '',
         label_list: [],
@@ -154,6 +175,31 @@ export default {
       this.inputVisible = false;
       this.inputValue = '';
     },
+    // 查询标签列表
+    queryLabelList() {
+      QueryLabelList({ name: '' }).then((res) => {
+        if (res.status === 1) {
+          this.options = res.label_list;
+        }
+      });
+    },
+    // 删除标签
+    handleDeleteLabel(item, index) {
+      this.$confirm('确定要删除此条标签吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          DeleteTemplateLabel({ id: item.id }).then((res) => {
+            if (res.status === 1) {
+              this.$message.success('删除成功!');
+              this.options.splice(index, 1);
+            }
+          });
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>

src/views/personal_workbench/template_list/index.vue

@@ -32,7 +32,7 @@
         />
         <el-table-column prop="sn" width="140" label="编号" align="center" header-align="center" />
         <el-table-column prop="name" min-width="140" label="名称" align="center" header-align="center" />
-        <el-table-column prop="label_list" label="标签" align="center" header-align="center"
+        <el-table-column prop="label_list" min-width="140" label="标签" align="center" header-align="center"
           ><template slot-scope="{ row }">
             {{ row.label_list.join('、') }}
           </template>
@@ -105,7 +105,12 @@
             default-first-option
             placeholder="请选择或输入模板标签"
           >
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            <el-option v-for="(item, index) in options" :key="item.id" :label="item.name" :value="item.name">
+              <span style="float: left">{{ item.name }}</span>
+              <span style="float: right; font-size: 12px; color: #8492a6" @click.stop="handleDeleteLabel(item, index)"
+                >删除</span
+              >
+            </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="模板描述" prop="memo">
@@ -124,7 +129,7 @@
 import MenuPage from '../common/menu.vue';
 import PaginationPage from '@/components/PaginationPage.vue';
 
-import { PageQueryTemplateListPersonal } from '@/api/list.js';
+import { PageQueryTemplateListPersonal, QueryLabelList } from '@/api/list.js';
 import {
   CreateTemplatePersonal,
   UpdateTemplateShareStatus,
@@ -132,6 +137,7 @@ import {
   GetTemplateInfo,
   TemplateAuditOperate,
   TemplateRequestOperate,
+  DeleteTemplateLabel,
 } from '@/api/template';
 
 export default {
@@ -188,16 +194,7 @@ export default {
       },
       visible: false,
       loading: false,
-      options: [
-        {
-          label: '小学',
-          value: '小学',
-        },
-        {
-          label: '阅读',
-          value: '阅读',
-        },
-      ],
+      options: [],
       operate_button: {
         1: '申请机构共享',
         3: '申请发布',
@@ -208,6 +205,9 @@ export default {
       },
     };
   },
+  created() {
+    this.queryLabelList();
+  },
   mounted() {
     this.tableHeight =
       document.getElementsByClassName('app-container')[0].clientHeight -
@@ -216,6 +216,14 @@ export default {
       10;
   },
   methods: {
+    // 查询标签列表
+    queryLabelList() {
+      QueryLabelList({ name: '' }).then((res) => {
+        if (res.status === 1) {
+          this.options = res.label_list;
+        }
+      });
+    },
     queryTemplateList(data) {
       this.form.page_capacity = data.page_capacity;
       this.form.cur_page = data.cur_page;
@@ -250,6 +258,7 @@ export default {
             };
 
             this.queryList();
+            this.queryLabelList();
           }
         })
         .catch(() => {
@@ -328,6 +337,23 @@ export default {
         }
       });
     },
+    // 删除标签
+    handleDeleteLabel(item, index) {
+      this.$confirm('确定要删除此条标签吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          DeleteTemplateLabel({ id: item.id }).then((res) => {
+            if (res.status === 1) {
+              this.$message.success('删除成功!');
+              this.options.splice(index, 1);
+            }
+          });
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>

src/views/personal_workbench/template_list_admin/index.vue

@@ -34,7 +34,7 @@
         />
         <el-table-column prop="sn" width="140" label="编号" align="center" header-align="center" />
         <el-table-column prop="name" min-width="140" label="名称" align="center" header-align="center" />
-        <el-table-column prop="label_list" label="标签" align="center" header-align="center">
+        <el-table-column prop="label_list" min-width="140" label="标签" align="center" header-align="center">
           <template slot-scope="{ row }">
             {{ row.label_list.join('、') }}
           </template>

src/views/personal_workbench/template_list_manager/index.vue

@@ -34,7 +34,7 @@
         />
         <el-table-column prop="sn" width="140" label="编号" align="center" header-align="center" />
         <el-table-column prop="name" min-width="140" label="名称" align="center" header-align="center" />
-        <el-table-column prop="label_list" label="标签" align="center" header-align="center">
+        <el-table-column prop="label_list" min-width="140" label="标签" align="center" header-align="center">
           <template slot-scope="{ row }">
             {{ row.label_list.join('、') }}
           </template>

src/views/personal_workbench/template_list_org/index.vue

@@ -30,7 +30,7 @@
         />
         <el-table-column prop="sn" width="140" label="编号" align="center" header-align="center" />
         <el-table-column prop="name" min-width="140" label="名称" align="center" header-align="center" />
-        <el-table-column prop="label_list" label="标签" align="center" header-align="center"
+        <el-table-column prop="label_list" min-width="140" label="标签" align="center" header-align="center"
           ><template slot-scope="{ row }">
             {{ row.label_list.join('、') }}
           </template>
@@ -93,7 +93,12 @@
             default-first-option
             placeholder="请选择或输入模板标签"
           >
-            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            <el-option v-for="(item, index) in options" :key="item.id" :label="item.name" :value="item.name">
+              <span style="float: left">{{ item.name }}</span>
+              <span style="float: right; font-size: 12px; color: #8492a6" @click.stop="handleDeleteLabel(item, index)"
+                >删除</span
+              >
+            </el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="模板描述" prop="memo">
@@ -111,13 +116,14 @@
 <script>
 import PaginationPage from '@/components/PaginationPage.vue';
 
-import { PageQueryTemplateListOrg } from '@/api/list.js';
+import { PageQueryTemplateListOrg, QueryLabelList } from '@/api/list.js';
 import {
   CreateTemplateOrg,
   UpdateTemplateStatus,
   DeleteTemplate,
   TemplateAuditOperate,
   TemplateRequestOperate,
+  DeleteTemplateLabel,
 } from '@/api/template';
 
 export default {
@@ -173,16 +179,7 @@ export default {
       },
       visible: false,
       loading: false,
-      options: [
-        {
-          label: '小学',
-          value: '小学',
-        },
-        {
-          label: '阅读',
-          value: '阅读',
-        },
-      ],
+      options: [],
       operate_button: {
         1: '申请机构共享',
         3: '申请发布',
@@ -193,6 +190,9 @@ export default {
       },
     };
   },
+  created() {
+    this.queryLabelList();
+  },
   mounted() {
     this.tableHeight =
       document.getElementsByClassName('app-container')[0].clientHeight -
@@ -201,6 +201,14 @@ export default {
       10;
   },
   methods: {
+    // 查询标签列表
+    queryLabelList() {
+      QueryLabelList({ name: '' }).then((res) => {
+        if (res.status === 1) {
+          this.options = res.label_list;
+        }
+      });
+    },
     queryTemplateList(data) {
       this.form.page_capacity = data.page_capacity;
       this.form.cur_page = data.cur_page;
@@ -235,6 +243,7 @@ export default {
             };
 
             this.queryList();
+            this.queryLabelList();
           }
         })
         .catch(() => {
@@ -319,6 +328,23 @@ export default {
         }
       });
     },
+    // 删除标签
+    handleDeleteLabel(item, index) {
+      this.$confirm('确定要删除此条标签吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          DeleteTemplateLabel({ id: item.id }).then((res) => {
+            if (res.status === 1) {
+              this.$message.success('删除成功!');
+              this.options.splice(index, 1);
+            }
+          });
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>