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

<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>