126 lines
8.3 KiB
Vue
126 lines
8.3 KiB
Vue
<template>
|
|
<div>
|
|
<el-tabs v-model="activeTab"><el-tab-pane label="商务列表" name="accounts" /><el-tab-pane v-if="isLevel3" label="绑定列表" name="bindings" /></el-tabs>
|
|
<business-bindings v-if="isLevel3 && activeTab === 'bindings'" @changed="load" />
|
|
<div v-show="activeTab === 'accounts'" class="kra-search-box">
|
|
<el-form :inline="true" :model="query" @submit.prevent="search">
|
|
<el-form-item label="商务账号"><el-input v-model="query.userName" clearable placeholder="请输入账号" /></el-form-item>
|
|
<el-form-item label="姓名"><el-input v-model="query.realName" clearable placeholder="请输入姓名" /></el-form-item>
|
|
<el-form-item label="商务等级">
|
|
<el-select v-model="query.level" clearable placeholder="全部" style="width: 130px">
|
|
<el-option v-for="(label, value) in levels" :key="value" :label="label" :value="Number(value)" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="状态">
|
|
<el-select v-model="query.status" clearable placeholder="全部" style="width: 130px">
|
|
<el-option v-for="(label, value) in statuses" :key="value" :label="label" :value="value" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item><el-button type="primary" icon="search" native-type="submit">查询</el-button><el-button icon="refresh" @click="reset">重置</el-button></el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div v-show="activeTab === 'accounts'" class="kra-table-box">
|
|
<div class="kra-btn-list">
|
|
<el-button v-if="canAdd" type="primary" icon="plus" @click="openCreate">添加子商务</el-button>
|
|
</div>
|
|
<el-table v-loading="loading" :data="rows" row-key="userId">
|
|
<el-table-column prop="userName" label="商务账号" min-width="140" />
|
|
<el-table-column label="商务等级" width="110"><template #default="{ row }">{{ levels[row.level] || '系统账号' }}</template></el-table-column>
|
|
<el-table-column prop="parentUserName" label="上级商务" min-width="140" />
|
|
<el-table-column prop="realName" label="姓名" min-width="100" />
|
|
<el-table-column prop="phoneNumber" label="手机号" min-width="130" />
|
|
<el-table-column prop="bindCount" label="SDK商务" width="120"><template #default="{ row }"><el-button link type="primary" aria-label="查看SDK商务绑定详情" @click="showBindings(row)">{{ row.bindCount }}</el-button></template></el-table-column>
|
|
<el-table-column prop="promoteCount" label="旗下渠道数" width="120">
|
|
<template #default="{ row }">
|
|
<el-tooltip v-if="row.promoteCount === null" content="当前数据库尚未接入渠道数据，商务资料和绑定数仍可查看。"><span class="text-gray-400">未接入</span></el-tooltip>
|
|
<el-button v-else type="primary" link aria-label="查看旗下渠道" @click="showChannels(row)">{{ row.promoteCount }}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" label="注册时间" min-width="130"><template #default="{ row }">{{ row.createTime?.slice(0, 10) }}</template></el-table-column>
|
|
<el-table-column label="状态" width="110"><template #default="{ row }"><el-tag :type="statusType(row.status)">{{ statuses[row.status] || row.status }}</el-tag></template></el-table-column>
|
|
</el-table>
|
|
<div class="kra-pagination">
|
|
<el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" @size-change="search" @current-change="load" />
|
|
</div>
|
|
</div>
|
|
<el-drawer append-to-body v-model="channelsDrawer" title="旗下渠道" size="520px" destroy-on-close><business-channels :user-id="channelUserId" /></el-drawer>
|
|
<el-drawer append-to-body v-model="bindingsDrawer" title="SDK商务绑定详情" size="85%" destroy-on-close><business-bindings :user-id="bindingUserId" /></el-drawer>
|
|
<el-drawer append-to-body v-model="drawer" title="添加子商务" :size="480" destroy-on-close>
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
|
|
<el-form-item label="商务账号" prop="userName"><el-input v-model="form.userName" maxlength="30" /></el-form-item>
|
|
<el-form-item label="登录密码" prop="password"><el-input v-model="form.password" type="password" show-password autocomplete="new-password" /></el-form-item>
|
|
<el-form-item label="姓名" prop="realName"><el-input v-model="form.realName" maxlength="30" /></el-form-item>
|
|
<el-form-item label="手机号"><el-input v-model="form.phoneNumber" maxlength="11" /></el-form-item>
|
|
<el-form-item label="QQ"><el-input v-model="form.qqNumber" maxlength="20" /></el-form-item>
|
|
<el-form-item label="商务等级"><span>{{ childLevel }}</span></el-form-item>
|
|
<el-form-item label="所属商务"><span>{{ user.userInfo.nickName || user.userInfo.userName }}</span></el-form-item>
|
|
</el-form>
|
|
<template #footer><el-button @click="drawer = false">取消</el-button><el-button type="primary" :loading="saving" @click="save">确定</el-button></template>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, reactive, ref, onMounted, watch } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import { useUserStore } from '@/pinia/modules/user'
|
|
import { useBtnAuth } from '@/utils/btnAuth'
|
|
import { listBusiness, createBusiness } from '@/api/business'
|
|
import BusinessBindings from './components/BusinessBindings.vue'
|
|
import BusinessChannels from './components/BusinessChannels.vue'
|
|
|
|
defineOptions({ name: 'SwBusinessList' })
|
|
const user = useUserStore()
|
|
const activeTab = ref('accounts')
|
|
const bindingsDrawer = ref(false)
|
|
const bindingUserId = ref(0)
|
|
const channelsDrawer = ref(false)
|
|
const channelUserId = ref(0)
|
|
const showChannels = (row) => { channelUserId.value = row.userId; channelsDrawer.value = true }
|
|
const showBindings = (row) => { bindingUserId.value = row.userId; bindingsDrawer.value = true }
|
|
const buttons = useBtnAuth()
|
|
const levels = { 1: '一级商务', 2: '二级商务', 3: '三级商务' }
|
|
const statuses = { 0: '正常', 1: '停用', 2: '已驳回', 3: '待审核' }
|
|
const isAdmin = computed(() => Number(user.userInfo.authorityId) === 888)
|
|
const canAdd = computed(() => (isAdmin.value || buttons['sw:business:add']) && (isAdmin.value || Number(user.userInfo.level) < 3))
|
|
const isLevel3 = computed(() => Number(user.userInfo.level) === 3)
|
|
const childLevel = computed(() => levels[isAdmin.value ? 1 : Number(user.userInfo.level || 1) + 1])
|
|
const query = reactive({ pageNum: 1, pageSize: 10, userName: '', realName: '', level: undefined, status: undefined, orderByColumn: '', isAsc: '' })
|
|
const rows = ref([])
|
|
const total = ref(0)
|
|
const loading = ref(false)
|
|
const drawer = ref(false)
|
|
const saving = ref(false)
|
|
const formRef = ref()
|
|
const form = ref({})
|
|
const rules = {
|
|
userName: [{ required: true, message: '请输入商务账号', trigger: 'blur' }, { min: 2, max: 30, message: '账号长度为 2 到 30 个字符', trigger: 'blur' }],
|
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }, { min: 5, max: 50, message: '密码长度为 5 到 50 个字符', trigger: 'blur' }],
|
|
realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
|
|
}
|
|
const statusType = (status) => ({ 0: 'success', 1: 'info', 2: 'danger', 3: 'warning' })[status] || 'info'
|
|
const load = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await listBusiness(query)
|
|
if (res.code === 0) { rows.value = res.data.rows; total.value = res.data.total }
|
|
} finally { loading.value = false }
|
|
}
|
|
const search = () => { query.pageNum = 1; return load() }
|
|
const reset = () => { Object.assign(query, { userName: '', realName: '', level: undefined, status: undefined }); return search() }
|
|
const openCreate = () => {
|
|
form.value = { userName: '', password: '', realName: '', phoneNumber: '', qqNumber: '', status: '0' }
|
|
drawer.value = true
|
|
}
|
|
const save = async () => {
|
|
if (!await formRef.value.validate().catch(() => false)) return
|
|
saving.value = true
|
|
try {
|
|
const res = await createBusiness({ ...form.value, nickName: form.value.realName })
|
|
if (res.code === 0) { ElMessage.success('添加成功'); drawer.value = false; await load() }
|
|
} finally { saving.value = false }
|
|
}
|
|
watch(isLevel3, (visible) => { if (!visible) activeTab.value = 'accounts' })
|
|
onMounted(load)
|
|
</script>
|