feat: 迁移商务账号层级和列表管理
This commit is contained in:
Yvan
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div>
|
||||
<div 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 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" @sort-change="sort">
|
||||
<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" />
|
||||
<el-table-column prop="promoteCount" label="直属渠道数" width="120" />
|
||||
<el-table-column prop="createTime" label="注册时间" sortable="custom" min-width="180" />
|
||||
<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-column v-if="canEdit" label="操作" fixed="right" width="90"><template #default="{ row }"><el-button v-if="row.authorityId !== 888" type="primary" link @click="openEdit(row)">编辑</el-button></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 v-model="drawer" :title="editing ? '编辑商务' : '添加子商务'" :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 v-if="!editing" 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="邮箱"><el-input v-model="form.email" maxlength="50" /></el-form-item>
|
||||
<el-form-item v-if="editing" label="状态">
|
||||
<el-select v-model="form.status"><el-option v-for="(label, value) in statuses" :key="value" :label="label" :value="value" /></el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="form.status === '2'" label="驳回原因"><el-input v-model="form.rejectReason" type="textarea" maxlength="200" /></el-form-item>
|
||||
<el-form-item v-if="!editing" label="商务等级"><span>{{ childLevel }}</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 } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useUserStore } from '@/pinia/modules/user'
|
||||
import { useBtnAuth } from '@/utils/btnAuth'
|
||||
import { listBusiness, getBusiness, createBusiness, updateBusiness } from '@/api/business'
|
||||
|
||||
defineOptions({ name: 'SwBusinessList' })
|
||||
const user = useUserStore()
|
||||
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 canEdit = computed(() => isAdmin.value || buttons['sw:business:edit'])
|
||||
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 editing = 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 sort = ({ prop, order }) => { query.orderByColumn = prop || ''; query.isAsc = order === 'descending' ? 'desc' : 'asc'; return search() }
|
||||
const openCreate = () => {
|
||||
editing.value = false
|
||||
form.value = { userName: '', password: '', realName: '', phoneNumber: '', qqNumber: '', email: '', status: '0', rejectReason: '' }
|
||||
drawer.value = true
|
||||
}
|
||||
const openEdit = async (row) => {
|
||||
const res = await getBusiness(row.userId)
|
||||
if (res.code !== 0) return
|
||||
editing.value = true
|
||||
form.value = { ...res.data }
|
||||
drawer.value = true
|
||||
}
|
||||
const save = async () => {
|
||||
if (!await formRef.value.validate().catch(() => false)) return
|
||||
saving.value = true
|
||||
try {
|
||||
const res = await (editing.value ? updateBusiness : createBusiness)({ ...form.value, nickName: form.value.realName })
|
||||
if (res.code === 0) { ElMessage.success(editing.value ? '修改成功' : '添加成功'); drawer.value = false; await load() }
|
||||
} finally { saving.value = false }
|
||||
}
|
||||
onMounted(load)
|
||||
</script>
|
||||
Reference in New Issue
Block a user