客户管理添加用户标签

src/api/biz/member.js

@@ -10,3 +10,6 @@ import {
 export const fetchList = (query) => {
     return request('post','/api/mgr/member/list',query)
 }
+export const addUserTags = (userId,userTagIds) => {
+    return request('post','/api/mgr/member/addUserTags/'+userId,userTagIds)
+}
\ No newline at end of file

src/views/biz/member/index.vue

@@ -6,6 +6,13 @@
               <a-form-item label="用户手机号">
                   <a-input  v-model="searchPage.username" placeholder="请输入用户手机号" allowClear></a-input>
               </a-form-item>
+              <a-form-item label="用户标签" >
+                  <a-select mode="default" :value="selectedQueryTag" style="width: 150px" placeholder="请选择" @change="queryUserTagChange" allowClear>
+                    <a-select-option v-for="item in userTagList" :key="item.id" :value="item.id">
+                    {{ item.name}}
+                    </a-select-option>
+                </a-select>
+              </a-form-item>
               <a-form-item>
                   <a-button type="primary" icon="search" @click="handlSearch">查询</a-button>
               </a-form-item>
@@ -46,14 +53,45 @@
                     <a-tag v-if="record.status == 'DISABLE'" color="red">禁用</a-tag>
                     <a-tag v-if="record.status == 'UNACTIVATE'" color="orange">未激活</a-tag>
                 </div>
+                <!-- 用户标签 -->
+                <div slot="userTags" slot-scope="text, record">
+                    <span v-if="record.userTags.length == 0">-</span>
+                    <a-tag v-for="(item,index) in record.userTags" :key="index" color="blue">{{item.name}}</a-tag>
+                </div>
+                <!-- 操作 -->
+                <template slot="action" slot-scope="text, record">
+                    <a-button
+                        icon="edit"
+                        type="link"
+                        @click="editUserTag({record})"
+                    >编辑标签</a-button>
+                </template>
             </a-table>
         </div>
+        <!-- 弹窗 -->
+        <a-modal title="编辑标签" v-model="modalVisible" :footer="null">
+        <a-form @submit="modalHandleSubmit">
+            <a-form-item label="请选择标签：" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
+            <a-select mode="multiple" v-model="selectedTags" style="width: 100%" placeholder="请选择" @change="userTagHandleChange">
+                    <a-select-option v-for="item in userTagList" :key="item.id" :value="item.id">
+                    {{ item.name}}
+                    </a-select-option>
+                </a-select>
+            </a-form-item>
+            
+            <a-form-item :wrapper-col="{ span: 19, offset: 5 }">
+            <a-button type="primary" html-type="submit">保存</a-button>
+            </a-form-item>
+        </a-form>
+        </a-modal>
     </div>
+    
 </template>
     
 <script>
 
-import {fetchList} from '@/api/biz/member'
+import {fetchList,addUserTags} from '@/api/biz/member'
+import {fetchList as fetchUserTagList} from "@/api/admin/user_tag";
 import { disposereq,timestampToTime } from '@/utils/util'
 
 let columns = [
@@ -120,6 +158,19 @@ let columns = [
             return text ? timestampToTime(text) : '-'
         }
     },
+    {
+        title: '用户标签',
+        dataIndex: 'userTags',
+        align: 'center',
+        scopedSlots: {customRender: 'userTags'}
+    },
+    {
+    title: "操作",
+    key: "action",
+    scopedSlots: { customRender: "action" },
+    align: "center",
+    width: 180,
+  }
 ]
 
 export default {
@@ -130,19 +181,26 @@ export default {
             searchPage: {
                 pageIndex: 1,
                 pageSize: 10,
-                username: ''
+                username: '',
+                userTagId: null
             },
             pagination: {
                 showQuickJumper: true,
                 showSizeChanger: true
             },
             loading: false,
+            modalVisible: false,
+            userTagList: [],
+            currentUserId: 0,
+            selectedTags: [],
+            selectedQueryTag: null,
 
         }
     },
     // 创建完毕
     created() {
         this.getList(this.searchPage);
+        this.getUserTagList();
     },
     // 即将更新渲染
     beforeUpdate() {
@@ -168,6 +226,20 @@ export default {
             })
 
         },
+        getUserTagList(){
+            let query = {};
+            query['pageIndex'] = 1;
+            query['pageSize'] = 10000;
+            fetchUserTagList(query).then(res => {
+                if(res.code == 200){
+                    this.userTagList = res.data;
+                }else{
+                    this.$message.info(res.resp_msg)
+                }
+            }).catch(err => {
+                disposereq(this,err)
+            })
+        },
         handleTableChange(pagination,filters,sorter){
             let queryParam = {...this.searchPage}
             queryParam.pageIndex = pagination.current
@@ -178,7 +250,40 @@ export default {
             let queryParam = {...this.searchPage}
             this.getList(queryParam)
         },
-        timestampToTime
+        timestampToTime,
+        editUserTag(row){
+            this.modalVisible = true;
+            this.selectedTags = row.record.userTags.map(item => item.id);
+            // console.log(this.formModel.userTagIds)
+            this.currentUserId = row.record.id;
+        },
+        userTagHandleChange(value){
+            this.selectedTags = value
+        },
+        modalHandleSubmit(e){
+            this.loading = true;
+            addUserTags(this.currentUserId,this.selectedTags).then(res => {
+                this.loading = false;
+                if(res.resp_code == 200){
+                    this.modalVisible = false;
+                    this.getList(this.searchPage);
+                }else {
+                    this.$message.info(res.resp_msg)
+                }
+            }).catch(err => {
+                disposereq(this,err)
+            });
+
+        },
+        queryUserTagChange(value){
+            this.selectedQueryTag = value;
+            if(value == 0){
+                this.searchPage.userTagId = null;
+            }else{
+                this.searchPage.userTagId = value;
+            }
+            
+        },
     }
 }
 </script>