release(custom): i
This commit is contained in:
242
src/views/sys/verify/index.vue
Normal file
242
src/views/sys/verify/index.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<script setup>
|
||||
import api from '../api.js'
|
||||
import { NAvatar, NButton, NPopconfirm } from 'naive-ui'
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '头像',
|
||||
slot: 'avatarUrl',
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
return h(NAvatar, { src: row.avatarUrl, round: true, size: 50 })
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
key: 'nickName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
console.log(row)
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
size: 'small',
|
||||
type: 'primary',
|
||||
onClick: () => {
|
||||
addUser(2, row)
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '编辑',
|
||||
}
|
||||
),
|
||||
h(
|
||||
NPopconfirm,
|
||||
{
|
||||
onPositiveClick: () => {
|
||||
delVerifyUser(row)
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '删除无法撤销，请谨慎！',
|
||||
trigger: () =>
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
class: 'ml-10',
|
||||
size: 'small',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
default: () => '删除',
|
||||
}
|
||||
),
|
||||
}
|
||||
),
|
||||
]
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
const showModalTitle = ref('')
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
itemCount: 0,
|
||||
onChange: (page) => {
|
||||
pagination.value.page = page
|
||||
get_list()
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
get_list()
|
||||
})
|
||||
|
||||
const get_list = async () => {
|
||||
loading.value = true
|
||||
const res = await api.getList({
|
||||
PageNum: pagination.value.page,
|
||||
PageSize: pagination.value.pageSize,
|
||||
})
|
||||
data.value = res.data.data || []
|
||||
pagination.value.itemCount = res.data.total
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const addUser = (type, row = {}) => {
|
||||
showModalTitle.value = type === 1 ? '添加核销人员' : '编辑核销人员'
|
||||
if (type === 2) {
|
||||
model.value = {
|
||||
inputValue: row.phone,
|
||||
id: row.uid,
|
||||
url: row.avatarUrl,
|
||||
name: row.nickName,
|
||||
}
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
const model = ref({
|
||||
inputValue: '',
|
||||
url: '',
|
||||
id: null,
|
||||
name: '',
|
||||
})
|
||||
|
||||
const search = async () => {
|
||||
const res = await api.findUser({
|
||||
phone: model.value.inputValue,
|
||||
})
|
||||
model.value = {
|
||||
...model.value,
|
||||
id: res.data.data.uid,
|
||||
url: res.data.data.avatarUrl,
|
||||
name: res.data.data.nickName,
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (!model.value.id) return $message.error('请绑定核销人员')
|
||||
const res = await api.bindUser({
|
||||
uid: model.value.id,
|
||||
})
|
||||
$message.success(res.msg)
|
||||
clear()
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
model.value = {
|
||||
inputValue: '',
|
||||
url: '',
|
||||
id: null,
|
||||
name: '',
|
||||
}
|
||||
showModal.value = false
|
||||
get_list()
|
||||
}
|
||||
|
||||
const delVerifyUser = async (row) => {
|
||||
const res = await api.delVerifyUser({
|
||||
uid: row.uid,
|
||||
})
|
||||
$message.success(res.msg)
|
||||
get_list()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPage show-footer :title="$route.title">
|
||||
<n-button type="primary" @click="addUser(1)">添加核销人员</n-button>
|
||||
<n-data-table
|
||||
class="mt-10"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:bordered="false"
|
||||
remote
|
||||
/>
|
||||
<!-- 添加对话框 -->
|
||||
<n-modal v-model:show="showModal">
|
||||
<n-card
|
||||
style="width: 600px"
|
||||
:title="showModalTitle"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<n-form ref="formRef" :model="model" label-placement="left">
|
||||
<n-grid :cols="1" :x-gap="24">
|
||||
<n-form-item-gi class="flex items-center" label="查找用户" :span="20">
|
||||
<n-input-group>
|
||||
<n-input
|
||||
v-model:value="model.inputValue"
|
||||
placeholder="请输入用户手机号"
|
||||
:style="{ width: '90%' }"
|
||||
/>
|
||||
<n-button type="primary" ghost @click="search">搜索</n-button>
|
||||
</n-input-group>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi class="flex items-center" label="绑定用户" :span="12">
|
||||
<div v-if="model.url !== '' && model.id !== null" class="text-center">
|
||||
<img class="h-100 w-100 border rounded-5" :src="model.url || ''" />
|
||||
<div>{{ model.name }}</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="checkBox">+</div>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi>
|
||||
<div m-auto>
|
||||
<n-button type="primary" @click="submit">提交</n-button>
|
||||
<n-button ml-10 @click="clear">取消</n-button>
|
||||
</div>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.checkBox {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(250, 250, 252);
|
||||
border: 1px dashed rgb(224, 224, 230);
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 30px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px dashed #18a058;
|
||||
transition: 1s all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user