feat：添加模板标签

src/views/ProjectManage/api.js

@@ -123,7 +123,7 @@ export function setSurveyStatus(params) {
 export function getTagsList(params) {
   return request({
     method: "GET",
-    url: '/console/survey_tags',
+    url: `/console/survey_tags`,
     params,
   });
 }

src/views/ProjectManage/components/ScreenBox.vue

@@ -30,7 +30,35 @@
           :key="item.id"
         >
           <div style="display: flex; justify-content: space-between">
-            <span :style="countColor(item.color)" :title="item.title">{{ item.title }}</span>
+            <span :style="countColor(item.color)" :title="item.title">{{
+              item.title
+            }}</span>
+          </div>
+        </a-select-option>
+        <!-- <a-select-option v-for="item in tagsList" :key="item.id">
+          {{ item.title }}
+        </a-select-option> -->
+      </a-select>
+    </a-form-item>
+    <a-form-item label="模板标签">
+      <a-select
+        mode="multiple"
+        v-model:value="ruleForm.templateTags"
+        placeholder="选择问卷标签"
+        :filter-option="false"
+        :not-found-content="fetching ? undefined : null"
+        @search="fetchUser"
+      >
+        <a-select-option
+          :value="item.id"
+          :label="item.title"
+          v-for="item in templateTagsList"
+          :key="item.id"
+        >
+          <div style="display: flex; justify-content: space-between">
+            <span :style="countColor(item.color)" :title="item.title">{{
+              item.title
+            }}</span>
           </div>
         </a-select-option>
         <!-- <a-select-option v-for="item in tagsList" :key="item.id">
@@ -57,27 +85,38 @@
       </a-select>
     </a-form-item>
     <a-form-item label="创建时间">
-      <a-range-picker v-model:value="ruleForm.created_at" @change="handleCreated"/>
+      <a-range-picker
+        v-model:value="ruleForm.created_at"
+        @change="handleCreated"
+      />
     </a-form-item>
     <a-form-item label="编辑时间">
-      <a-range-picker v-model:value="ruleForm.updated_at" @change="handleUpdated"/>
+      <a-range-picker
+        v-model:value="ruleForm.updated_at"
+        @change="handleUpdated"
+      />
     </a-form-item>
     <a-form-item class="button" style="text-align: right">
-      <a-button style="margin-right:12px" type="cancel" @click="$emit('cancel')">取消</a-button>
+      <a-button
+        style="margin-right: 12px"
+        type="cancel"
+        @click="$emit('cancel')"
+        >取消</a-button
+      >
       <a-button type="primary" @click="onSubmit">确定</a-button>
     </a-form-item>
   </a-form>
 </template>
 <script>
-import { defineComponent, reactive, ref, onBeforeMount } from 'vue';
-import { debounce } from 'lodash-es';
-import { getUserList, getTagsList } from '../api';
+import { defineComponent, reactive, ref, onBeforeMount } from "vue";
+import { debounce } from "lodash-es";
+import { getUserList, getTagsList } from "../api";
 
 const statusOptions = [
-  { label: '编辑中', value: 0 },
-  { label: '发布中', value: 1 },
-  { label: '已结束', value: 2 },
-]
+  { label: "编辑中", value: 0 },
+  { label: "发布中", value: 1 },
+  { label: "已结束", value: 2 },
+];
 export default defineComponent({
   props: {
     info: {
@@ -90,23 +129,25 @@ export default defineComponent({
     const ruleForm = reactive({
       status: [0],
       owner_id: undefined,
-      created_at: '',
-      updated_at: '',
+      created_at: "",
+      updated_at: "",
       tags: [],
+      templateTags: [],
     });
     let lastFetchId = 0;
     const fetching = ref(false);
-    const userList = ref([])
-    const tagsList = ref([])
+    const userList = ref([]);
+    const tagsList = ref([]);
+    const templateTagsList = ref([]);
     const handleCreated = (value, dateString) => {
-      console.log('dateString', dateString)
+      console.log("dateString", dateString);
       ruleForm.created_at = dateString;
     };
     const handleUpdated = (value, dateString) => {
       ruleForm.updated_at = dateString;
     };
     /** 搜索用户防抖 */
-    const fetchUser = debounce(value => {
+    const fetchUser = debounce((value) => {
       lastFetchId += 1;
       userList.value = [];
       fetching.value = true;
@@ -114,148 +155,178 @@ export default defineComponent({
       getUsers(value);
     }, 500);
     /** 获取用户列表 */
-    const getUsers = async (val)=> {
+    const getUsers = async (val) => {
       try {
-        const { data } = await getUserList({nickname: val || ''});
+        const { data } = await getUserList({ nickname: val || "" });
         const fetchId = lastFetchId;
         if (fetchId !== lastFetchId) {
-            return;
+          return;
         }
         userList.value = data;
-      } catch(error) {
+      } catch (error) {
         context.message.error(
           error.data?.message || error.message || "服务器错误"
         );
       }
-    }
+    };
     /** 获取项目标签列表 */
-    const getTagList = async (val)=> {
+    const getTagList = async () => {
       try {
         const { data } = await getTagsList();
         console.log(data);
-         const fetchId = lastFetchId;
+        const fetchId = lastFetchId;
         if (fetchId !== lastFetchId) {
-            return;
+          return;
         }
         tagsList.value = data;
-      } catch(error) {
+      } catch (error) {
         context.message.error(
           error.data?.message || error.message || "服务器错误"
         );
       }
-    }
+    };
+    /** 获取项目标签列表 */
+    const getTemplateTagList = async () => {
+      try {
+        const { data } = await getTagsList({
+          type: 2
+        });
+        console.log(data);
+        const fetchId = lastFetchId;
+        if (fetchId !== lastFetchId) {
+          return;
+        }
+        templateTagsList.value = data;
+      } catch (error) {
+        context.message.error(
+          error.data?.message || error.message || "服务器错误"
+        );
+      }
+    };
     // 标签颜色
     const countColor = (value) => {
-      let style = {}
+      let style = {};
       switch (value) {
-          case 1:
-            style = {
-              'color' : '#4DB8FA',
-              'border' : '1px solid #4DB8FA',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-            break;
-          case 2:
-            style = {
-              'color' : '#0CC126',
-              // 'border-color' : '#0CC126',
-              'border' : '1px solid #0CC126',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-            break;
-          case 3:
-            style = {
-              'color' : '#FF8800',
-              // 'border-color' : '#FF8800',
-              'border' : '1px solid #FF8800',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-            break;
-          case 4:
-            style = {
-              'color' : '#FF374F',
-              // 'border-color' : '#FF374F',
-              'border' : '1px solid #FF374F',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-            break;
-          case 5:
-            style = {
-              'color' : '#1C6FFF',
-              // 'border-color' : '#1C6FFF',
-              'border' : '1px solid #1C6FFF',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-            break;
-          case 6:
-            style = {
-              'color' : '#11AEA7',
-              // 'border-color' : '#11AEA7',
-              'border' : '1px solid #11AEA7',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-            break;
-          case 7:
-            style = {
-              'color' : '#25D8C8',
-              // 'border-color' : '#25D8C8',
-              'border' : '1px solid #25D8C8',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-            break;
-          case 8:
-            style = {
-              'color' : '#FECB0D',
-              // 'border-color' : '#FECB0D',
-              'border' : '1px solid #FECB0D',
-              'padding': '0 5px',
-              'border-radius': '4px',
-              'line-height': '20px',
-            }
-          //   break;
-          // case 9:
-          //   style = {
-          //     'color' : '4DB8FA',
-          //     'border-color' : '4DB8FA',
-          //   }
-      } 
-      return style
-    }
+        case 1:
+          style = {
+            color: "#4DB8FA",
+            border: "1px solid #4DB8FA",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+          break;
+        case 2:
+          style = {
+            color: "#0CC126",
+            // 'border-color' : '#0CC126',
+            border: "1px solid #0CC126",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+          break;
+        case 3:
+          style = {
+            color: "#FF8800",
+            // 'border-color' : '#FF8800',
+            border: "1px solid #FF8800",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+          break;
+        case 4:
+          style = {
+            color: "#FF374F",
+            // 'border-color' : '#FF374F',
+            border: "1px solid #FF374F",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+          break;
+        case 5:
+          style = {
+            color: "#1C6FFF",
+            // 'border-color' : '#1C6FFF',
+            border: "1px solid #1C6FFF",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+          break;
+        case 6:
+          style = {
+            color: "#11AEA7",
+            // 'border-color' : '#11AEA7',
+            border: "1px solid #11AEA7",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+          break;
+        case 7:
+          style = {
+            color: "#25D8C8",
+            // 'border-color' : '#25D8C8',
+            border: "1px solid #25D8C8",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+          break;
+        case 8:
+          style = {
+            color: "#FECB0D",
+            // 'border-color' : '#FECB0D',
+            border: "1px solid #FECB0D",
+            padding: "0 5px",
+            "border-radius": "4px",
+            "line-height": "20px",
+          };
+        //   break;
+        // case 9:
+        //   style = {
+        //     'color' : '4DB8FA',
+        //     'border-color' : '4DB8FA',
+        //   }
+      }
+      return style;
+    };
     /** 提交筛选条件 */
     const onSubmit = () => {
-      formRef.value.validate().then(() => {
+      formRef.value
+        .validate()
+        .then(() => {
           const params = {
-            owner_id: ruleForm.owner_id ? (ruleForm.owner_id.map(e=> e.key)).join(',') : '',
-            status: ruleForm.status ? ruleForm.status.join(',') : '',
-            created_at: ruleForm.created_at ? ruleForm.created_at.join(',') : '',
-            updated_at: ruleForm.updated_at ? ruleForm.updated_at.join(',') : '',
-            tags: ruleForm.tags ? ruleForm.tags.join(',') : '',
-          }
-          console.log('values', params);
-          context.emit('update', params)
+            owner_id: ruleForm.owner_id
+              ? ruleForm.owner_id.map((e) => e.key).join(",")
+              : "",
+            status: ruleForm.status ? ruleForm.status.join(",") : "",
+            created_at: ruleForm.created_at
+              ? ruleForm.created_at.join(",")
+              : "",
+            updated_at: ruleForm.updated_at
+              ? ruleForm.updated_at.join(",")
+              : "",
+            tags: ruleForm.tags ? ruleForm.tags.join(",") : "",
+            templates_tags: ruleForm.templateTags
+              ? ruleForm.templateTags.join(",")
+              : "",
+          };
+          console.log("values", params);
+          context.emit("update", params);
         })
         .catch((error) => {
-          console.log('error', error);
+          console.log("error", error);
         });
     };
-    onBeforeMount(()=> {
+    onBeforeMount(() => {
       getUsers();
       getTagList();
-    })
+      getTemplateTagList();
+    });
     return {
       formRef,
       ruleForm,
@@ -264,13 +335,14 @@ export default defineComponent({
       handleCreated,
       handleUpdated,
       statusOptions,
-      labelCol: { style: { width: '150px' } },
+      labelCol: { style: { width: "150px" } },
       wrapperCol: { span: 14 },
       userList,
       fetching,
       tagsList,
+      templateTagsList,
       countColor,
-    }
+    };
   },
-})
+});
 </script>

src/views/ProjectManage/fragment/TableList.vue

@@ -109,11 +109,47 @@
           <!-- </div> -->
         </div>
       </template>
+      <template #templateTag="{ record }">
+        <div
+          v-for="item in record.template_tags"
+          :key="item.id"
+          style="display: inline-block"
+        >
+          <!-- <div v-for="it in record.tag" :key="it.id" style="display:inline-block;"> -->
+          <a-tooltip
+            v-if="record.template_tags.length > 2"
+            placement="right"
+            :title="record.titles"
+          >
+            <div style="display: flex; flex-direction: row">
+              <div
+                :title="item.title"
+                :style="countColor(item.color)"
+                class="tagStyle"
+              >
+                {{ item.title }}
+              </div>
+              <div class="tagOmit" v-if="record.template_tags.length == 1">...</div>
+            </div>
+          </a-tooltip>
+          <div
+            v-else
+            :title="item.title"
+            :style="countColor(item.color)"
+            class="tagStyle"
+          >
+            {{ item.title }}
+          </div>
+          <!-- </div> -->
+        </div>
+      </template>
       <template #titles="{ record }">
         <a-tooltip placement="right" :title="record.remarks || ''">
           <div>
             <span>{{ record.project_name }}</span>
-            <span class="table-sell" v-if="record.template_tag">#{{ record.template_tag }}</span>
+            <span class="table-sell" v-if="record.template_tag"
+              >#{{ record.template_tag }}</span
+            >
           </div>
         </a-tooltip>
       </template>
@@ -272,7 +308,17 @@ const columns = [
     dataIndex: "tag[0].title",
     align: "center",
     slots: {
-      customRender: "tag",
+      customRender: "templateTag",
+    },
+    width: 200,
+  },
+  {
+    title: "模板标签",
+    key: "template_tags[0].title",
+    dataIndex: "template_tags[0].title",
+    align: "center",
+    slots: {
+      customRender: "templateTag",
     },
     width: 200,
   },
@@ -833,7 +879,7 @@ export default defineComponent({
 .ant-table-title {
   padding: 0 !important;
 }
-.table-sell{
+.table-sell {
   color: $yili-default-color;
   word-break: keep-all;
 }