标签选择

src/components/customer/label-group.vue

-<style lang="scss">
-
-
+<style scoped>
+  .q-pt-none .unchecked {
+    margin-right: 10px;
+    margin-top: 5px;
+    cursor: pointer;
+    padding: 0 10px;
+    font-size: 14px;
+    font-weight: 400;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 4px;
+    background: #f6f6f6;
+  }
 
+  .q-pt-none .select {
+    color: #3c66ee;
+    background-color: #edf2fd;
+  }
 </style>
 <template>
   <div class="labelgroup">
@@ -12,9 +26,22 @@
         </q-card-section>
 
         <q-card-section class="q-pt-none">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet
-          porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro
-          labore.
+          <div style='max-height: 378px;overflow-y: auto;border-bottom: 1px solid #d7d7d7;'>
+            <div v-for="(x,y) in LableList" :key="y" style='padding-bottom: 15px;'>
+              <div style="color: #606266;font-size: 14px;font-weight: 700;">{{x.Name}}</div>
+              <div style="display: flex;flex-wrap: wrap;">
+                <div v-for='(item,index) in x.ChildList' :key='index' class="unchecked"
+                  :class="{ 'select': item.chek == true }" @click='changechek(y,index)'>{{item.Name}}</div>
+              </div>
+            </div>
+          </div>
+          <div style="display: flex;flex-wrap: wrap;max-height: 110px;overflow-y: auto;margin: 10px 0;">
+
+            <q-chip v-for="(tag,tagindex) in selectList" :key="tagindex" removable @remove="getclose(tag,tagindex)"
+            color="orange" text-color="white" size='sm'>
+              {{tag.Name}}
+            </q-chip>
+          </div>
         </q-card-section>
         <q-card-actions align="right" class="bg-white">
           <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="goclose" />
@@ -40,15 +67,43 @@
     setup(props, ctx) {
       let selectList = ref(props.list)
       let LableList = ref([])
-      const goclose = () => {
+      const goclose = () => {//关闭弹窗
         ctx.emit('close')
       }
-      const determine = () => {
+      const determine = () => {//确定并返回数据
         ctx.emit('submit', selectList.value)
       }
+      const getclose = (tag, index) => {
+        let Id = tag.Id
+        for (let i = 0; i < LableList.value.length; i++) {
+          let ChildList = LableList.value[i].ChildList
+          if (ChildList.length > 0) {
+            for (let j = 0; j < ChildList.length; j++) {
+              if (Id == ChildList[j].Id) {
+                LableList.value[i].ChildList[j].chek = false
+                selectList.value.splice(index, 1)
+                return
+              }
+            }
+          }
+        }
+      }
+      const changechek = (y, index) => {
+        LableList.value[y].ChildList[index].chek = !LableList.value[y].ChildList[index].chek;
+        selectList.value = [];
+        LableList.value.forEach(x => {
+          if (x.ChildList.length > 0) {
+            x.ChildList.forEach(j => {
+              if (j.chek == true) {
+                selectList.value.push(j)
+              }
+            })
+          }
+
+        })
+      }
       const getLabelList = () => {
         customerService.getLabelList({}).then((res) => {
-          console.log(res)
           if (res.data.Code == 1) {
             LableList.value = res.data.Data
             LableList.value.forEach(x => {
@@ -72,12 +127,16 @@
         getLabelList()
       })
 
+
       return {
         alert: ref(true),
         goclose,
         determine,
         selectList,
-        getLabelList
+        getLabelList,
+        LableList,
+        changechek,
+        getclose
       }
     }
 

src/components/customer/request-group.vue

@@ -55,6 +55,12 @@
         background: #333 !important;
         color: #fff !important;
     }
+     .tag-select-input {
+        padding: 4px 10px;
+        border-radius: 5px;
+        background-color: #f6f6f6;
+        font-size: 14px;
+    }
 </style>
 <template>
     <div class="requestgroup">