会员：

1.会员设置标签

src/views/member/tag/components/MemberTagSelect.vue

+<template>
+  <el-select v-model="tagIds" placeholder="请选择用户标签" clearable multiple class="!w-240px">
+    <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id" />
+  </el-select>
+  <el-button
+    v-if="showAdd"
+    type="primary"
+    class="ml-2"
+    link
+    @click="openForm('create')"
+    v-hasPermi="['member:tag:create']"
+  >
+    新增标签
+  </el-button>
+
+  <!-- 表单弹窗：添加 -->
+  <TagForm ref="formRef" @success="getList" />
+</template>
+
+<script lang="ts" setup>
+import * as TagApi from '@/api/member/tag'
+import TagForm from '@/views/member/tag/TagForm.vue'
+
+defineOptions({ name: 'MemberTagSelect' })
+
+const props = defineProps({
+  /** 下拉框选中值 **/
+  modelValue: {
+    type: Array,
+    default: undefined
+  },
+  /** 是否显示“新增标签”按钮 **/
+  showAdd: {
+    type: Boolean,
+    default: false
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+defineExpose({
+  showAdd: props.showAdd
+})
+
+const tagIds = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: any) {
+    emit('update:modelValue', value)
+  }
+})
+
+const tags = ref<TagApi.TagVO[]>([])
+
+const getList = async () => {
+  const data = await TagApi.getMemberTagPage({})
+  tags.value = data.list
+}
+
+/** 添加用户标签表单弹框 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>

src/views/member/user/UserForm.vue

@@ -57,6 +57,9 @@
           :render-after-expand="true"
           :render-after-expand="true"
         />
         />
       </el-form-item>
       </el-form-item>
+      <el-form-item label="用户标签" prop="tagIds">
+        <MemberTagSelect v-model="formData.tagIds" show-add />
+      </el-form-item>
       <el-form-item label="会员备注" prop="mark">
       <el-form-item label="会员备注" prop="mark">
         <el-input type="textarea" v-model="formData.mark" placeholder="请输入会员备注" />
         <el-input type="textarea" v-model="formData.mark" placeholder="请输入会员备注" />
       </el-form-item>
       </el-form-item>
@@ -72,6 +75,7 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import * as UserApi from '@/api/member/user'
 import * as UserApi from '@/api/member/user'
 import * as AreaApi from '@/api/system/area'
 import * as AreaApi from '@/api/system/area'
 import { defaultProps } from '@/utils/tree'
 import { defaultProps } from '@/utils/tree'
+import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
 
 
 const { t } = useI18n() // 国际化
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const message = useMessage() // 消息弹窗
@@ -90,7 +94,8 @@ const formData = ref({
   sex: undefined,
   sex: undefined,
   areaId: undefined,
   areaId: undefined,
   birthday: undefined,
   birthday: undefined,
-  mark: undefined
+  mark: undefined,
+  tagIds: []
 })
 })
 const formRules = reactive({
 const formRules = reactive({
   mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
   mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
@@ -163,7 +168,8 @@ const resetForm = () => {
     areaId: undefined,
     areaId: undefined,
     birthday: undefined,
     birthday: undefined,
     mark: undefined,
     mark: undefined,
-    createTime: undefined
+    createTime: undefined,
+    tagIds: []
   }
   }
   formRef.value?.resetFields()
   formRef.value?.resetFields()
 }
 }

src/views/member/user/index.vue

@@ -48,6 +48,9 @@
           class="!w-240px"
           class="!w-240px"
         />
         />
       </el-form-item>
       </el-form-item>
+      <el-form-item label="用户标签" prop="tagIds">
+        <MemberTagSelect v-model="queryParams.tagIds" />
+      </el-form-item>
       <el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -69,6 +72,16 @@
       <!-- TODO 芋艿：待接入 -->
       <!-- TODO 芋艿：待接入 -->
       <el-table-column label="等级" align="center" width="100px" />
       <el-table-column label="等级" align="center" width="100px" />
       <el-table-column label="分组" align="center" width="100px" />
       <el-table-column label="分组" align="center" width="100px" />
+      <el-table-column
+        label="用户标签"
+        align="center"
+        prop="tagNames"
+        :show-overflow-tooltip="false"
+      >
+        <template #default="scope">
+          <el-tag v-for="(tagName, index) in scope.row.tagNames" :key="index">{{ tagName }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="积分" align="center" width="100px" />
       <el-table-column label="积分" align="center" width="100px" />
       <el-table-column label="状态" align="center" prop="status" width="100px">
       <el-table-column label="状态" align="center" prop="status" width="100px">
         <template #default="scope">
         <template #default="scope">
@@ -119,6 +132,7 @@ import { dateFormatter } from '@/utils/formatTime'
 import * as UserApi from '@/api/member/user'
 import * as UserApi from '@/api/member/user'
 import UserForm from './UserForm.vue'
 import UserForm from './UserForm.vue'
 import { DICT_TYPE } from '@/utils/dict'
 import { DICT_TYPE } from '@/utils/dict'
+import MemberTagSelect from '@/views/member/tag/components/MemberTagSelect.vue'
 
 
 defineOptions({ name: 'MemberUser' })
 defineOptions({ name: 'MemberUser' })
 
 
@@ -134,7 +148,8 @@ const queryParams = reactive({
   nickname: null,
   nickname: null,
   mobile: null,
   mobile: null,
   loginDate: [],
   loginDate: [],
-  createTime: []
+  createTime: [],
+  tagIds: []
 })
 })
 const queryFormRef = ref() // 搜索的表单
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
 const exportLoading = ref(false) // 导出的加载中