增加套餐绑定用户功能

bms-front/src/views/price/set/components/detail/SetUserTable.vue

@@ -0,0 +1,174 @@
+<template>
+  <set-section-card
+    title="绑定用户"
+    tone="orange"
+    :count="viewers.length"
+    sub="指定用户可查看本套餐（不受销售数据权限限制）"
+  >
+    <template #action>
+      <el-button
+        type="primary"
+        plain
+        icon="Plus"
+        size="small"
+        v-hasPermi="['price:set:edit']"
+        @click="openBind"
+      >绑定用户</el-button>
+    </template>
+
+    <el-table :data="viewers" border class="user-table" empty-text="暂未绑定用户">
+      <el-table-column label="账号" prop="userName" min-width="140" show-overflow-tooltip>
+        <template #default="{ row }">
+          <span class="u-code">{{ row.userName }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="姓名" prop="nickName" min-width="140" show-overflow-tooltip>
+        <template #default="{ row }">
+          {{ row.nickName || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100" align="center" fixed="right">
+        <template #default="{ row }">
+          <el-button
+            link
+            type="danger"
+            v-hasPermi="['price:set:edit']"
+            @click="onUnbind(row)"
+          >解绑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      v-model="bindVisible"
+      title="绑定用户"
+      width="480px"
+      append-to-body
+      @closed="onClosed"
+    >
+      <el-form label-width="80px">
+        <el-form-item label="用户" required>
+          <el-select
+            v-model="selectedUserIds"
+            multiple
+            filterable
+            collapse-tags
+            collapse-tags-tooltip
+            placeholder="请选择用户"
+            style="width: 100%"
+            :loading="userLoading"
+          >
+            <el-option
+              v-for="u in userOptions"
+              :key="u.userId"
+              :label="formatUser(u)"
+              :value="u.userId"
+              :disabled="u.status === '1' || boundUserIdSet.has(String(u.userId))"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="bindVisible = false">取消</el-button>
+        <el-button type="primary" :loading="submitting" @click="submitBind">确定</el-button>
+      </template>
+    </el-dialog>
+  </set-section-card>
+</template>
+
+<script setup name="SetUserTable">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import SetSectionCard from './SetSectionCard.vue'
+import { useUsers } from '@/components/UserSelect/useUsers'
+import { addSetViewer, delSetViewer } from '@/api/price/set'
+
+const props = defineProps({
+  set: { type: Object, required: true }
+})
+const emit = defineEmits(['changed'])
+
+const { userList, ensureUsers } = useUsers()
+const viewers = computed(() => props.set.viewers || [])
+const boundUserIdSet = computed(() => new Set(viewers.value.map(v => String(v.userId))))
+
+const bindVisible = ref(false)
+const selectedUserIds = ref([])
+const userLoading = ref(false)
+const submitting = ref(false)
+const userOptions = computed(() => userList.value || [])
+
+function formatUser(u) {
+  const name = u.nickName || u.userName || ''
+  return u.userName ? (name + ' (' + u.userName + ')') : name
+}
+
+function openBind() {
+  selectedUserIds.value = []
+  bindVisible.value = true
+  userLoading.value = true
+  ensureUsers().finally(() => { userLoading.value = false })
+}
+
+function onClosed() {
+  selectedUserIds.value = []
+}
+
+async function submitBind() {
+  const ids = (selectedUserIds.value || []).filter(id => !boundUserIdSet.value.has(String(id)))
+  if (!ids.length) {
+    ElMessage.warning('请选择要绑定的用户')
+    return
+  }
+  if (!props.set.priceSetId) {
+    ElMessage.warning('套餐不存在')
+    return
+  }
+  submitting.value = true
+  let ok = 0
+  let fail = 0
+  try {
+    for (const userId of ids) {
+      try {
+        await addSetViewer({ priceSetId: props.set.priceSetId, userId })
+        ok++
+      } catch (e) {
+        fail++
+      }
+    }
+    if (ok) ElMessage.success('绑定成功 ' + ok + (fail ? ('，失败 ' + fail) : ''))
+    else ElMessage.error('绑定失败')
+    bindVisible.value = false
+    emit('changed')
+  } finally {
+    submitting.value = false
+  }
+}
+
+function onUnbind(row) {
+  if (!row || !row.psuId) return
+  ElMessageBox.confirm(
+    '确认解绑用户 ' + (row.nickName || row.userName || '') + ' ？',
+    '解绑确认',
+    { type: 'warning' }
+  ).then(() => delSetViewer(row.psuId)).then(() => {
+    ElMessage.success('已解绑')
+    emit('changed')
+  }).catch(() => {})
+}
+</script>
+
+<style scoped>
+.user-table {
+  border-radius: 6px;
+}
+.user-table :deep(th.el-table__cell) {
+  background: #fafbfc;
+  color: #606266;
+  font-weight: 600;
+}
+.u-code {
+  font-family: Consolas, Monaco, monospace;
+  font-size: 12px;
+  color: #606266;
+}
+</style>

bms-front/src/views/price/set/detail.vue

@@ -20,6 +20,8 @@
 
       <set-customer-table :set="set" />
 
+      <set-user-table :set="set" @changed="load" />
+
       <set-version-table
         v-model="currentPsvId"
         :versions="set.versions || []"
@@ -80,6 +82,7 @@
 import SetDetailHeader from './components/detail/SetDetailHeader.vue'
 import SetBasicInfoCard from './components/detail/SetBasicInfoCard.vue'
 import SetCustomerTable from './components/detail/SetCustomerTable.vue'
+import SetUserTable from './components/detail/SetUserTable.vue'
 import SetVersionTable from './components/detail/SetVersionTable.vue'
 import SetVersionDetailDrawer from './components/detail/SetVersionDetailDrawer.vue'
 import SetVersionExcelFileDrawer from './components/detail/SetVersionExcelFileDrawer.vue'