423 lines
10 KiB
Vue
423 lines
10 KiB
Vue
<template>
|
||
<CommonPage show-footer :title="$route.title">
|
||
<!-- {{ formValue }} -->
|
||
<n-button v-perms="['/store/edit']" type="primary" @click="handleAdd(1)">新增商户</n-button>
|
||
<n-grid class="mb-10" x-gap="12" cols="6" collapsed>
|
||
<n-gi>
|
||
<div class="flex items-center">
|
||
<div class="w-150">商户名称：</div>
|
||
<n-input v-model:value="QuryVal.StoreName" type="text" placeholder="请输入商户名称" />
|
||
</div>
|
||
</n-gi>
|
||
<n-gi>
|
||
<div class="flex items-center">
|
||
<div class="w-150">商户状态：</div>
|
||
<n-select
|
||
v-model:value="QuryVal.Status"
|
||
placeholder="请选择商户状态"
|
||
clearable
|
||
:options="[
|
||
{
|
||
label: '正常',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '禁用',
|
||
value: 2,
|
||
},
|
||
]"
|
||
/>
|
||
</div>
|
||
</n-gi>
|
||
<n-gi>
|
||
<n-button type="primary" @click="getList">查询</n-button>
|
||
<n-button class="ml10" @click="clearQuryVal">重置</n-button>
|
||
</n-gi>
|
||
</n-grid>
|
||
|
||
<n-data-table
|
||
:loading="loading"
|
||
:columns="columns"
|
||
:data="data"
|
||
:pagination="pagination"
|
||
:bordered="false"
|
||
remote
|
||
/>
|
||
|
||
<n-drawer v-model:show="showModal" :width="502" placement="right">
|
||
<n-drawer-content :title="drawerTitle" closable>
|
||
<n-form
|
||
ref="formRef"
|
||
label-placement="left"
|
||
label-align="left"
|
||
label-width="120px"
|
||
:model="formValue"
|
||
:rules="rules"
|
||
size="medium"
|
||
>
|
||
<n-form-item label="商户名称:" path="name">
|
||
<n-input
|
||
v-model:value="formValue.name"
|
||
:disabled="isEdit"
|
||
placeholder="请输入商户名称"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="负责人姓名:" path="username">
|
||
<n-input
|
||
v-model:value="formValue.username"
|
||
:disabled="isEdit"
|
||
placeholder="请输入负责人姓名"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="商户手机号:" path="phone">
|
||
<n-input
|
||
v-model:value="formValue.phone"
|
||
:disabled="isEdit"
|
||
placeholder="请输入商户手机号"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="商户座机:" path="mobile">
|
||
<n-input v-model:value="formValue.mobile" placeholder="请输入商户座机" />
|
||
</n-form-item>
|
||
<n-form-item label="商户地址:" path="address">
|
||
<n-input v-model:value="formValue.address" placeholder="请输入商户地址" />
|
||
</n-form-item>
|
||
<n-form-item label="经营类目:" path="classId">
|
||
<n-select
|
||
v-model:value="formValue.classId"
|
||
label-field="name"
|
||
value-field="ID"
|
||
clearable
|
||
placeholder="请选择经营类目"
|
||
:options="classOptions"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item v-if="!isEdit" label="商户密码:" path="password">
|
||
<n-input v-model:value="formValue.password" placeholder="请输入商户密码" />
|
||
</n-form-item>
|
||
<n-form-item v-else label="修改密码:" path="password">
|
||
<n-input v-model:value="formValue.password" placeholder="不修改密码请留空" />
|
||
</n-form-item>
|
||
<n-form-item label="商户类型:" path="bType">
|
||
<n-select
|
||
v-model:value="formValue.bType"
|
||
label-field="name"
|
||
value-field="ID"
|
||
placeholder="请选择商户类型"
|
||
clearable
|
||
:options="typeOptions"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="手续费收取类型:" path="scaleType">
|
||
<n-select
|
||
v-model:value="formValue.scaleType"
|
||
placeholder="请选择手续费收取类型"
|
||
clearable
|
||
:options="[
|
||
{
|
||
label: '百分比',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '数值',
|
||
value: 2,
|
||
},
|
||
]"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="手续费比例:" path="scale">
|
||
<n-input-number v-model:value="formValue.scale" placeholder="请输入手续费比例" />
|
||
</n-form-item>
|
||
<n-form-item label="商户状态:" path="status">
|
||
<n-switch v-model:value="formValue.status" :checked-value="1" :unchecked-value="2" />
|
||
</n-form-item>
|
||
<n-form-item>
|
||
<n-button
|
||
class="m-auto w-200"
|
||
attr-type="button"
|
||
type="primary"
|
||
@click="handleValidateClick"
|
||
>
|
||
提交
|
||
</n-button>
|
||
<!-- <n-button class="m-auto w-200" @click="handleClearValidateClick">重置</n-button> -->
|
||
</n-form-item>
|
||
</n-form>
|
||
</n-drawer-content>
|
||
</n-drawer>
|
||
</CommonPage>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref, h, withDirectives, resolveDirective } from 'vue'
|
||
import { NButton } from 'naive-ui'
|
||
import api from './api'
|
||
const vPerms = resolveDirective('perms')
|
||
|
||
const isEdit = computed(() => (drawerTitle.value === '编辑商户' ? true : false))
|
||
|
||
const columns = ref([
|
||
{
|
||
title: '商户名称',
|
||
align: 'center',
|
||
key: 'name',
|
||
},
|
||
{
|
||
title: '商户类型',
|
||
align: 'center',
|
||
key: 'type',
|
||
render(row) {
|
||
return h('span', row.bType === 1 ? '供应商' : '兑换商')
|
||
},
|
||
},
|
||
{
|
||
title: '状态',
|
||
align: 'center',
|
||
key: 'status',
|
||
render(row) {
|
||
return h('span', row.status === 1 ? '正常' : '禁用')
|
||
},
|
||
},
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
slot: 'action',
|
||
render: (row) => {
|
||
return [
|
||
withDirectives(
|
||
h(
|
||
NButton,
|
||
{
|
||
type: 'primary',
|
||
text: true,
|
||
size: 'small',
|
||
onClick: () => {
|
||
formValue.value = { ...row }
|
||
Reflect.deleteProperty(formValue.value, 'password')
|
||
handleAdd(2)
|
||
},
|
||
},
|
||
() => '编辑'
|
||
),
|
||
[[vPerms, ['/admin/store/edit']]]
|
||
),
|
||
withDirectives(
|
||
h(
|
||
NButton,
|
||
{
|
||
class: 'ml-10',
|
||
type: 'primary',
|
||
text: true,
|
||
size: 'small',
|
||
onClick: async () => {
|
||
const res = await api.login({
|
||
bid: row.bid,
|
||
})
|
||
window.open(
|
||
`${import.meta.env.VITE_MER_LOGIN_URL}?redirect=/workbench&type=${
|
||
res.data.type
|
||
}&tk=${res.data.token}`
|
||
)
|
||
},
|
||
},
|
||
() => '一键登录'
|
||
),
|
||
[[vPerms, ['/admin/store/login']]]
|
||
),
|
||
]
|
||
},
|
||
},
|
||
])
|
||
|
||
const data = ref([])
|
||
|
||
const loading = ref(false)
|
||
|
||
const showModal = ref(false)
|
||
|
||
const formRef = ref(null)
|
||
|
||
const drawerTitle = ref('新增商户')
|
||
|
||
const pagination = ref({
|
||
page: 1,
|
||
pageSize: 10,
|
||
itemCount: 0,
|
||
onChange: (page) => {
|
||
pagination.value.page = page
|
||
getList()
|
||
},
|
||
onUpdatePageSize: (pageSize) => {
|
||
pagination.value.pageSize = pageSize
|
||
pagination.value.page = 1
|
||
getList()
|
||
},
|
||
})
|
||
|
||
const QuryVal = ref({
|
||
StoreName: '',
|
||
Status: null,
|
||
})
|
||
|
||
let formValue = ref({
|
||
name: '',
|
||
username: '',
|
||
phone: '',
|
||
mobile: '',
|
||
address: '',
|
||
classId: null,
|
||
local: '',
|
||
password: '',
|
||
bType: null,
|
||
scaleType: null,
|
||
scale: null,
|
||
status: 2,
|
||
})
|
||
|
||
const rules = {
|
||
name: {
|
||
required: true,
|
||
message: '请输入商户名称',
|
||
trigger: 'blur',
|
||
},
|
||
username: {
|
||
required: true,
|
||
message: '请输入负责人姓名',
|
||
trigger: 'blur',
|
||
},
|
||
phone: {
|
||
required: true,
|
||
message: '请输入商户手机号',
|
||
trigger: 'blur',
|
||
},
|
||
mobile: {
|
||
required: true,
|
||
message: '请输入商户座机',
|
||
trigger: 'blur',
|
||
},
|
||
address: {
|
||
required: true,
|
||
message: '请输入商户地址',
|
||
trigger: 'blur',
|
||
},
|
||
local: {
|
||
required: true,
|
||
message: '请搜索商户经纬度',
|
||
trigger: 'blur',
|
||
},
|
||
classId: {
|
||
required: true,
|
||
type: 'number',
|
||
message: '请选择经营类目',
|
||
trigger: 'change',
|
||
},
|
||
// password: {
|
||
// required: true,
|
||
// message: '请输入商户密码',
|
||
// trigger: 'blur',
|
||
// },
|
||
bType: {
|
||
required: true,
|
||
type: 'number',
|
||
message: '请选择商户类型',
|
||
trigger: 'change',
|
||
},
|
||
scaleType: {
|
||
required: true,
|
||
type: 'number',
|
||
message: '请选择手续费收取类型',
|
||
trigger: 'change',
|
||
},
|
||
scale: {
|
||
required: true,
|
||
type: 'number',
|
||
message: '请输入手续费比例',
|
||
trigger: 'blur',
|
||
},
|
||
status: {
|
||
type: 'number',
|
||
message: '请选择商户状态',
|
||
trigger: 'change',
|
||
},
|
||
}
|
||
|
||
onMounted(() => {
|
||
getList()
|
||
getMertype()
|
||
})
|
||
|
||
const getList = async () => {
|
||
loading.value = true
|
||
const res = await api.getList({
|
||
...QuryVal.value,
|
||
PageNum: pagination.value.page,
|
||
PageSize: pagination.value.pageSize,
|
||
})
|
||
data.value = res.data.data || []
|
||
pagination.value.itemCount = res.data.total
|
||
loading.value = false
|
||
}
|
||
|
||
const classOptions = ref([])
|
||
const typeOptions = ref([])
|
||
|
||
const getMertype = async () => {
|
||
const res = await api.getMerType()
|
||
classOptions.value = res.data.class
|
||
typeOptions.value = res.data.type
|
||
}
|
||
|
||
const clearQuryVal = () => {
|
||
QuryVal.value = {
|
||
StoreName: '',
|
||
Status: null,
|
||
}
|
||
getList()
|
||
}
|
||
|
||
const handleAdd = (e) => {
|
||
drawerTitle.value = e === 1 ? '新增商户' : '编辑商户'
|
||
showModal.value = true
|
||
}
|
||
|
||
const handleValidateClick = (e) => {
|
||
e.preventDefault()
|
||
formRef.value?.validate(async (errors) => {
|
||
if (!errors) {
|
||
try {
|
||
await api.addMer(formValue.value)
|
||
$message.success('成功')
|
||
handleClearValidateClick()
|
||
getMertype()
|
||
getList()
|
||
showModal.value = false
|
||
} catch (error) {
|
||
$message.error(error.msg)
|
||
}
|
||
} else {
|
||
$message.error('Invalid')
|
||
}
|
||
})
|
||
}
|
||
|
||
const handleClearValidateClick = () => {
|
||
formRef.value?.restoreValidation()
|
||
formValue.value = {
|
||
name: '',
|
||
username: '',
|
||
phone: '',
|
||
mobile: '',
|
||
address: '',
|
||
classId: null,
|
||
local: '',
|
||
password: '',
|
||
bType: null,
|
||
scaleType: null,
|
||
scale: null,
|
||
status: 2,
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|