1

src/api/customer.ts

@@ -176,6 +176,36 @@ class customerService {
       data
     })
   }
+    // 获取客户标签/分组 列表
+    static async getWeChatLableList(data: any): Promise<HttpResponse> {
+      return Axios('/QYWeChat/GetWeChatLableList', {
+        method: 'post',
+        responseType: 'json',
+        data
+      })
+    }
+  // 新增修改分组/标签
+  static async setWeChatLable(data: {
+    Id:number,
+    ParentId:number,
+    Name:string,
+    Sort:string,
+    ChildList:Array<{Name:string, Sort:string}>
+  }): Promise<HttpResponse> {
+    return Axios('/QYWeChat/SetWeChatLable', {
+      method: 'post',
+      responseType: 'json',
+      data
+    })
+  }
+  // 新增修改分组/标签
+  static async delWeChatLable(data: {LableId:number}): Promise<HttpResponse> {
+    return Axios('/QYWeChat/DelWeChatLable', {
+      method: 'post',
+      responseType: 'json',
+      data
+    })
+  }
 }
 
 export default customerService

src/pages/customer/components/customerlabel.vue

 <template>
-  <div >
-    标签
+  <div class="customerlabel row">
+    <div class="col-5 customer-category-content">
+      <div class="row header-box">
+        <div style="font-weight: 700;">标签分组</div>
+        <q-btn
+          color="accent"
+          size="sm"
+          class="q-mr-md"
+          icon="add"
+          label="新增分組"
+          @click="EditCategory()"
+        ></q-btn>
+      </div>
+      <div class="category-header">
+        <div style="width: 60px;">ID</div>
+        <div style="flex:1;text-align: center;">分組名称</div>
+        <div class="w90" style="width: 110px;">操作</div>
+      </div>
+      <div class="category-list">
+        <ul>
+          <span v-for="(x,y) in data.dataList" :key="y">
+            <li @click="getSelectlist(x,y)">
+              <div class="category-item" :class="{ 'Selectstyle': data.SelectID == x.Id }">
+                <div style="width: 60px;">{{ x.Id }}</div>
+                <div style="display: flex;">{{ x.Name }}</div>
+                <div class="w90" style="width: 110px;display: flex;">
+                  <q-btn flat icon="edit" class="icons" @click="getSelectlist(x,y), getParent(x, 1)" />
+                  <q-btn
+                    flat
+                    icon="delete"
+                    class="icons"
+                    @click="getSelectlist(x,y), goDetailed(x.Id)"
+                  />
+                </div>
+              </div>
+            </li>
+          </span>
+          <div
+            v-if="data.dataList && data.dataList.length == 0"
+            style="width: 100%;height: 50px;line-height: 50px;text-align: center;"
+          >暂无数据</div>
+        </ul>
+      </div>
+    </div>
+
+    <div class="col-7 customer-category-content" style="padding-left: 15px;">
+      <div class="row header-box">
+        <div style="font-weight: 700;">
+          标签分组：
+          <span style="color: #606266;">{{ data.groupName }}</span>
+        </div>
+        <q-btn
+          color="accent"
+          size="sm"
+          class="q-mr-md"
+          icon="add"
+          label="新增分組"
+          @click="getParent({}, 3)"
+        ></q-btn>
+      </div>
+
+      <div class="category-header">
+        <div style="width: 60px;">ID</div>
+        <div style="flex:1;text-align: center;">标签名称</div>
+        <div class="w90">使用客户</div>
+        <div class="w90">排序</div>
+        <div class="w90" style="width: 110px;">操作</div>
+      </div>
+      <div class="category-list">
+        <ul>
+          <span v-for="(x,y) in data.ChildList" :key="y">
+            <li>
+              <div class="category-item" :class="{ 'Selectstyle': data.SelectID == x.Id }">
+                <div style="width: 60px;">{{ x.Id }}</div>
+                <div style="flex:1;text-align: center;">{{ x.Name }}</div>
+                <div class="w90">0</div>
+                <div class="w90">{{ x.Sort }}</div>
+                <div class="w90" style="width: 110px;display: flex;">
+                  <q-btn flat icon="edit" class="icons" @click="getParent(x, 2)" />
+                  <q-btn flat icon="delete" class="icons" @click="goDetailed(x.Id)" />
+                </div>
+              </div>
+            </li>
+          </span>
+          <div
+            v-if="data.ChildList && data.ChildList.length == 0"
+            style="width: 100%;height: 50px;line-height: 50px;text-align: center;"
+          >暂无数据</div>
+        </ul>
+      </div>
+    </div>
+
+    <q-dialog v-model="data.isShow" persistent>
+      <q-card style="width: 500px; max-width: 80vw;">
+        <q-card-section class="row items-center q-pb-none">
+          <div class="text-h6">新增标签组</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
+          <q-input
+            outlined
+            counter
+            maxlength="8"
+            clearable
+            standout="bg-primary text-white"
+            v-model="data.addMsg.Name"
+            label="标签组名称"
+            :rules="[val => !!val || '请输入分组名称']"
+            ref="Name"
+          />
+          <q-input
+            outlined
+            clearable
+            type="number"
+            standout="bg-primary text-white"
+            v-model="data.addMsg.Sort"
+            label="标签组排序"
+            :rules="[val => !!val || '请输入分组排序']"
+            ref="Sort"
+          />
+          <div style="color: #787878;">*注:标签组/标签,排序值越大,排序越靠前！</div>
+          <div
+            style="width: 100%;"
+            v-if="data.addMsg.ChildList && data.addMsg.ChildList.length > 0"
+          >
+            <div
+              class="col row wrap q-mr-lg q-col-gutter-md"
+              v-for="(x,y) in data.addMsg.ChildList"
+              :key="y"
+              style="margin-top: 0px;"
+            >
+              <div class="col-7">
+                <q-input
+                  outlined
+                  counter
+                  maxlength="15"
+                  clearable
+                  standout="bg-primary text-white"
+                  v-model="x.Name"
+                  label="输入标签名称"
+                />
+              </div>
+              <div class="col-3">
+                <q-input
+                  filled
+                  standout="bg-primary text-white"
+                  v-model="x.Sort"
+                  label="输入排序"
+                  maxlength="20"
+                  type="number"
+                />
+              </div>
+              <div class="col-2">
+                <q-btn
+                  flat
+                  icon="delete"
+                  color="negative"
+                  class="q-mr-xs"
+                  label
+                  @click="data.addMsg.ChildList.splice(y, 1)"
+                />
+              </div>
+            </div>
+          </div>
+          <q-btn
+            flat
+            size="sm"
+            icon="add"
+            style="font-weight:400;color: #3FC4FF;margin-top: 10px;"
+            label="添加标签"
+            @click="addbiaoqian()"
+          />
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white">
+          <q-btn class="q-mr-md" label="取消" @click="data.isShow = false" />
+          <q-btn
+            color="accent"
+            class="q-mr-md"
+            label="确定"
+            @click="submit()"
+            :loading="data.btnloading"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+    <!-- 修改标签组名称 -->
+    <q-dialog v-model="data.isParent" persistent>
+      <q-card style="width: 500px; max-width: 80vw;">
+        <q-card-section class="row items-center q-pb-none">
+          <div class="text-h6">修改标签信息</div>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-separator />
+        <q-card-section class="q-pt-none" style="margin-top: 15px;padding: 20px;">
+          <q-input
+            v-if="data.edittype == 1"
+            outlined
+            counter
+            maxlength="8"
+            clearable
+            standout="bg-primary text-white"
+            v-model="data.addMsg.Name"
+            label="标签组名称"
+            :rules="[val => !!val || '请输入分组名称']"
+            ref="eName"
+          />
+          <q-input
+            v-if="data.edittype == 2 || data.edittype == 3"
+            outlined
+            counter
+            maxlength="15"
+            clearable
+            standout="bg-primary text-white"
+            v-model="data.addMsg.Name"
+            label="标签名称"
+            :rules="[val => !!val || '请输入标签名称']"
+            ref="eName"
+          />
+          <q-input
+            outlined
+            clearable
+            standout="bg-primary text-white"
+            v-model="data.addMsg.Sort"
+            label="标签组排序"
+            :rules="[val => !!val || '请输入分组排序']"
+            ref="eSort"
+          />
+          <div style="color: #787878;">*注:标签组/标签,排序值越大,排序越靠前！</div>
+        </q-card-section>
+        <q-separator />
+        <q-card-actions align="right" class="bg-white">
+          <q-btn class="q-mr-md" label="取消" @click="data.isParent = false" />
+          <q-btn
+            color="accent"
+            class="q-mr-md"
+            label="确定"
+            @click="submitParent()"
+            :loading="data.btnloading"
+          />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
   </div>
 </template>
 
 <script lang="ts">
+import customerService from '@/api/customer'
+import { useQuasar } from 'quasar'
 
 
 import {
   defineComponent,
-  
+  onMounted,
+  reactive,
 } from 'vue'
 
 export default defineComponent({
- 
-
   setup() {
-    
+    const $q = useQuasar()
+    const data: any = reactive({
+      dataList: [],
+      SelectID: 0,
+      ChildList: [],
+      groupName: '',
+      isShow: false,
+      addMsg: {},
+      btnloading: false,
+      isName: false,
+      issort: false,
+      isalladopt: false,
+      isParent: false,
+      edittype: 1,
+      selectindex:0,
+    })
+    const getList = () => {
+      customerService.getWeChatLableList({}).then((res) => {
+        if (res.data.Code == 1) {
+          data.dataList = res.data.Data;
+          data.SelectID = data.dataList[data.selectindex].Id
+          data.ChildList = data.dataList[data.selectindex].ChildList
+          data.groupName = data.dataList[data.selectindex].Name
+        }
+      })
+    }
+    const getSelectlist = (x:any,y:number) => {
+      data.SelectID = x.Id;
+      data.ChildList = x.ChildList;
+      data.groupName = x.Name
+      data.selectindex = y
+
+    }
+    const EditCategory = () => {
+      data.addMsg = {
+        Id: 0,
+        ParentId: 0,
+        Name: '',
+        Sort: 1,
+        ChildList: [{ Name: '', Sort: 1, }],
+      }
+      data.isShow = true
+    }
+    const addbiaoqian = () => {
+      let obj = {
+        Name: '',
+        Sort: 1,
+      }
+      data.addMsg.ChildList.push(obj)
+    }
+    const isChildList = () => {
+      if (data.addMsg.Name == '' || data.addMsg.Name == null) {
+        $q.notify({
+          type: 'negative',
+          message: `请填写标签分组名称`,
+          position: 'top'
+        })
+        data.isalladopt = false
+        return
+      }
+      if (data.addMsg.Sort == '' || data.addMsg.Sort == null) {
+        $q.notify({
+          type: 'negative',
+          message: `请填写标签分组序号`,
+          position: 'top'
+        })
+        data.isalladopt = false
+        return
+      }
+      data.isName = false;
+      data.issort = false;
+      if (data.addMsg.ChildList.length > 0) {
+        data.addMsg.ChildList.map(x => {
+          if (x.Name == '') {
+            data.isName = true;
+            return
+          }
+          if (x.Sort == '') {
+
+            data.issort = true;
+            return
+          }
+        })
+      }
+      if (data.isName == true) {
+        $q.notify({
+          type: 'negative',
+          message: `请填写标签名称`,
+          position: 'top'
+        })
+        data.isalladopt = false
+        return
+      }
+      if (data.issort == true) {
+        $q.notify({
+          type: 'negative',
+          message: `请填写标签排序`,
+          position: 'top'
+        })
+        data.isalladopt = false
+        return
+      }
+    }
+    const setlable = (msg: any) => {
+      customerService.setWeChatLable(msg).then((res) => {
+        if (res.data.Code == 1) {
+          $q.notify({
+            icon: 'iconfont icon-chenggong',
+            color: 'accent',
+            timeout: 2000,
+            message: '数据保存成功！',
+            position: 'top'
+          })
+          getList()
+          data.isShow = false;
+          data.isParent = false;
+        }
+      })
+    }
+    const submit = () => {
+      data.isalladopt = true
+
+      isChildList()//表单验证
+      if (data.isalladopt == true) {
+        setlable(data.addMsg)
+      }
+
+    }
+    const goDetailed = (Id: number) => {
+      $q.dialog({
+        title: "提示信息",
+        message: '确定删除？',
+        cancel: {
+          label: "取消",
+          flat: true
+        },
+        ok: {
+          label: "确认",
+          flat: true,
+        }
+      }).onOk(() => {
+        customerService.delWeChatLable({ LableId: Id }).then((res) => {
+          if (res.data.Code == 1) {
+            $q.notify({
+              icon: 'iconfont icon-chenggong',
+              color: 'accent',
+              timeout: 2000,
+              message: '数据保存成功！',
+              position: 'top'
+            })
+            if(data.selectindex+1 == data.dataList.length){
+              data.selectindex--
+            }
+            getList()
+
+          }
+        })
+
+
+      });
+    }
+    const getParent = (row: any, type: number) => {
+      if (type == 1) {
+        data.addMsg = JSON.parse(JSON.stringify(row))
+
+      } else if (type == 2) {
+        data.addMsg = {
+          ParentId: row.ParentId,
+          Name: row.Name,
+          Id: row.Id,
+          Sort: row.Sort,
+        }
+      } else {
+        data.addMsg = {
+          ParentId: data.SelectID,
+          Name: '',
+          Id: 0,
+          Sort: '1',
+        }
+      }
+      data.isParent = true;
+      data.edittype = type
+    }
+    const submitParent = () => {
+      if (data.addMsg.Name == '' || data.addMsg.Name == null) {
+        $q.notify({
+          type: 'negative',
+          message: `请填写标签分组名称`,
+          position: 'top'
+        })
+        data.isalladopt = false
+        return
+      }
+      if (data.addMsg.Sort == '' || data.addMsg.Sort == null) {
+        $q.notify({
+          type: 'negative',
+          message: `请填写标签分组序号`,
+          position: 'top'
+        })
+        data.isalladopt = false
+        return
+      }
+        let msg
+
+      if (data.edittype == 1) {
+        msg = {
+          Id: data.addMsg.Id,
+          Name: data.addMsg.Name,
+          Sort: data.addMsg.Sort,
+        }
+      } else {
+        msg = {
+          Name: data.addMsg.Name,
+          Sort: data.addMsg.Sort,
+          Id: data.addMsg.Id,
+          ParentId: data.addMsg.ParentId,
+        }
+      }
+      setlable(msg)
+    }
+    onMounted(() => {
+      getList()
+    })
     return {
-     
+      onMounted,
+      getList,
+      EditCategory,
+      data,
+      getSelectlist,
+      addbiaoqian,
+      submit,
+      isChildList,
+      setlable,
+      goDetailed,
+      getParent,
+      submitParent
     }
 
   }
 })
 
 </script>
+
+<style lang="scss">
+.customerlabel {
+  width: 100%;
+  height: calc(100vh - 80px);
+  .customer-category-content {
+    min-height: 100%;
+    max-height: 100%;
+    border-right: 1px solid #d7d7d7;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-right: 15px;
+  }
+  .header-box {
+    padding: 21px 0 21px 25px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .category-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60px;
+    padding: 0 26px;
+    border-radius: 5px;
+    background-color: #f5f5fa;
+  }
+  .category-list {
+    flex: 1;
+    overflow: auto;
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none outside none;
+      .category-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 60px;
+        border-radius: 5px;
+        padding: 0 26px;
+        position: relative;
+      }
+    }
+  }
+
+  .w90 {
+    width: 90px;
+    text-align: center;
+  }
+  .category-list::-webkit-scrollbar {
+    display: none;
+  }
+  .icons {
+    font-size: 12px;
+    margin-right: 5px;
+  }
+  .Selectstyle {
+    background: #edf2fd;
+    color: #3470ff;
+  }
+}
+</style>
\ No newline at end of file

src/pages/customer/customerSetup.vue

@@ -9,7 +9,6 @@
         active-color="primary"
         indicator-color="primary"
         narrow-indicator
-        @update:model-value='gettabs'
       >
         <q-tab name="yewumoshi" label="业务模式" />
         <q-tab name="field" label="客户字段" />
@@ -17,13 +16,12 @@
         <q-tab name="clue" label="线索分配规则" />
         <q-tab name="phase" label="客户阶段" />
       </q-tabs>
-      <div>
+    
         <customer-Field v-if="tab == 'field'"></customer-Field>
         <clue-rule v-if="tab == 'clue'"></clue-rule>
         <customer-phase v-if="tab == 'phase'"></customer-phase>
         <customerlabel v-if="tab == 'label'"></customerlabel>
-        
-      </div>
+     
     </q-page>
   </div>
 </template>
@@ -49,20 +47,13 @@ export default defineComponent({
     customerlabel
   },
   setup() {
-    let tab = ref<string>('phase')
+    let tab = ref<string>('label')
     if( router.currentRoute.value.query && router.currentRoute.value.query.type){
       tab.value = router.currentRoute.value.query.type as string
       
     }
-    const gettabs = () => {
-      // console.log(tab.value)
-    }
-
-    // if(props && props.type){
-    // }
     return {
       tab,
-      gettabs
     }
 
   }

src/pages/editor/createStageRange.vue

@@ -24,15 +24,18 @@
             </div>
             <div class="content-block">
                 <div class="bold">阶段适用范围</div>
-                <!-- <q-input clearable debounce filled maxlength="20" counter v-model="state.addMsg.FlowName" style="width:600px"
-                placeholder="名称" :rules="[val => !!val || '不能为空']" />-->
+        
+                <q-btn color="accent" label="选择部门/成员" @click="choicemember" />
             </div>
             <div class="content-block">
                 <div class="bold">
                     选择使用阶段
                     <span style="font-size: 14px;font-weight: 300;color:rgb(133, 133, 152);">
                         若没有找到可选项，请前往
-                        <span style="color:#3470ff;cursor: pointer;" @click="stageManagement">"阶段管理"</span>进行
+                        <span
+                            style="color:#3470ff;cursor: pointer;"
+                            @click="stageManagement"
+                        >"阶段管理"</span>进行
                     </span>
                 </div>
                 <div style="display:flex;align-items: center;">
@@ -55,16 +58,15 @@
                     <div class="all-stage" :style="{ height: state.getheight + 'px' }">
                         <p class="select-item-title">已选阶段</p>
                         <div v-for="(x,y) in state.UseStageName" :key="y">
-                            <div style="height:40px;line-height: 40px;"  v-if="x.IsDefault == 0">
-                                <span >{{ x.Name }}</span>
+                            <div style="height:40px;line-height: 40px;" v-if="x.IsDefault == 0">
+                                <span>{{ x.Name }}</span>
                             </div>
                         </div>
-                        <div
-                          
-                            v-for="(x,y) in state.UseStageName"
-                            :key="y"
-                        >
-                            <span v-if="x.IsDefault == 1" style="color: #ccc;height:40px;line-height: 40px;">{{ x.Name }}</span>
+                        <div v-for="(x,y) in state.UseStageName" :key="y">
+                            <span
+                                v-if="x.IsDefault == 1"
+                                style="color: #ccc;height:40px;line-height: 40px;"
+                            >{{ x.Name }}</span>
                         </div>
                     </div>
                 </div>
@@ -98,7 +100,7 @@
                             </span>
                         </div>
                         <div style="display:flex;align-items: center;flex-wrap: wrap;">
-                            <div v-if="x.Name =='已输单'">
+                            <div v-if="x.Name == '已输单'">
                                 <q-checkbox
                                     v-model="state.addMsg.LoseCause"
                                     v-for="(item,index) in x.OptionsList"
@@ -108,7 +110,7 @@
                                 />
                             </div>
 
-                            <div v-if="x.Name =='无效'">
+                            <div v-if="x.Name == '无效'">
                                 <q-checkbox
                                     v-model="state.addMsg.InvalidCause"
                                     v-for="(item,index) in x.OptionsList"
@@ -122,17 +124,31 @@
                 </div>
             </div>
         </div>
+        <departmentStaff
+            v-model="state.showDialog"
+            v-model:defaultArray="state.defaultArray"
+            nodeKey="newId"
+            labelKey="DeptName"
+            childrenKey="ChildList"
+            strategy="leaf"
+            :treeData="state.dataTree"
+        />
     </div>
 </template>
 <script lang="ts">
 import { defineComponent, onMounted, reactive, } from 'vue'
 import router from '@/router/index'
 import customerService from '@/api/customer'
+import departmentStaff from '@/components/common/departmentStaff.vue'
+import customerService2 from '@/api/customer2'
+
 import { useQuasar } from 'quasar'
 
 
 export default defineComponent({
-
+    components: {
+        departmentStaff
+    },
     setup() {
         const $q = useQuasar()
         const state: any = reactive({
@@ -149,12 +165,15 @@ export default defineComponent({
             getheight: 270,
             loading: false,
             UseStageName: [],
+            showDialog: false,
+            defaultArray: [],
+            dataTree: [],
         })
         const jumpBeforePage = () => {
             router.push({
                 path: '/customerSetup',
                 query: {
-                    type:'phase'
+                    type: 'phase'
                 }
             })
         }
@@ -220,8 +239,34 @@ export default defineComponent({
                 position: 'top'
             })
         }
+        let choicemember = () => {
+            state.showDialog = true
+
+        }
+        let getEmployeeData = () => {
+            customerService2.getEmployeeData({}).then(res => {
+                state.dataTree = res.data.Data
+                // 重组唯一id
+                if (state.dataTree.length == 0) return
+                state.dataTree.forEach(x => {
+                    x.newId = x.DataType + '-' + x.DeptId
+                    if (x.ChildList && x.ChildList.length > 0) {
+                        getChildList(x.ChildList)
+                    }
+                })
+            })
+        }
+        let getChildList = (ChildList: Array<any>) => {
+            ChildList.forEach(x => {
+                x.newId = x.DataType + '-' + x.DeptId
+                if (x.ChildList && x.ChildList.length > 0) {
+                    getChildList(x.ChildList)
+                }
+            })
+        }
         onMounted(() => {
             getList()
+            getEmployeeData()
         })
         return {
             state,
@@ -230,7 +275,10 @@ export default defineComponent({
             getusestageName,
             compare,
             stageManagement,
-            savemove
+            savemove,
+            choicemember,
+            getEmployeeData,
+            getChildList
         }
     }