ch
2 years ago
commit
1e0553f18b
@ -0,0 +1,54 @@
|
||||
/*
|
||||
* @Author: ch
|
||||
* @Date: 2022-07-04 15:20:02
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-06 14:27:54
|
||||
* @Description: file content
|
||||
*/
|
||||
import request from '@/utils/request.js';
|
||||
export const create = (data) => {
|
||||
return request({
|
||||
url: '/payCenter/mchInfo',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
};
|
||||
export const del = (mchPrimaryId) => {
|
||||
return request({
|
||||
url: `/payCenter/mchInfo/${mchPrimaryId}`,
|
||||
method: 'delete',
|
||||
});
|
||||
};
|
||||
export const detail = (mchPrimaryId) => {
|
||||
return request({
|
||||
url: `/payCenter/mchInfo/${mchPrimaryId}`,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
export const update = (data) => {
|
||||
return request({
|
||||
url: '/payCenter/mchInfo',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
};
|
||||
export const updateStatus = (params) => {
|
||||
return request({
|
||||
url: `/payCenter/appInfo/updateStatus`,
|
||||
method: 'put',
|
||||
params,
|
||||
});
|
||||
};
|
||||
export const getApplicationList = (params) => {
|
||||
return request({
|
||||
url: '/payCenter/appInfo/page',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
};
|
||||
export const getPayType = () => {
|
||||
return request({
|
||||
url: '/payCenter/appInfo/payCode',
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,61 @@
|
||||
/*
|
||||
* @Author: ch
|
||||
* @Date: 2022-07-04 15:20:02
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-06 14:14:31
|
||||
* @Description: file content
|
||||
*/
|
||||
import request from '@/utils/request.js';
|
||||
export const create = (data) => {
|
||||
return request({
|
||||
url: '/payCenter/mchInfo',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
};
|
||||
export const del = (mchPrimaryId) => {
|
||||
return request({
|
||||
url: `/payCenter/mchInfo/${mchPrimaryId}`,
|
||||
method: 'delete',
|
||||
});
|
||||
};
|
||||
export const detail = (mchPrimaryId) => {
|
||||
return request({
|
||||
url: `/payCenter/mchInfo/${mchPrimaryId}`,
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
export const update = (data) => {
|
||||
return request({
|
||||
url: '/payCenter/mchInfo',
|
||||
method: 'put',
|
||||
data,
|
||||
});
|
||||
};
|
||||
export const updateStatus = (params) => {
|
||||
return request({
|
||||
url: `/payCenter/mchInfo/updateStatus`,
|
||||
method: 'put',
|
||||
params,
|
||||
});
|
||||
};
|
||||
export const getMerchantList = (params) => {
|
||||
return request({
|
||||
url: '/payCenter/mchInfo/page',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
};
|
||||
export const getMerchantSelector = () => {
|
||||
return request({
|
||||
url: '/payCenter/mchInfo/mchSelector',
|
||||
method: 'get',
|
||||
});
|
||||
};
|
||||
export const getMerchantPlatform = (params) => {
|
||||
return request({
|
||||
url: '/payCenter/mchInfo/mchCode',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,112 @@
|
||||
/*
|
||||
* @Author: ch
|
||||
* @Date: 2022-07-04 15:21:30
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-06 14:31:27
|
||||
* @Description: file content
|
||||
*/
|
||||
import * as api from '@/api/pay/application.js';
|
||||
import * as mchApi from '@/api/pay/merchant.js';
|
||||
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||
const state = {
|
||||
code: 'PayApplicationManagement',
|
||||
list: [],
|
||||
detail: {},
|
||||
total: 0,
|
||||
opts: {
|
||||
status: [
|
||||
{
|
||||
value: false,
|
||||
label: '启用',
|
||||
},
|
||||
{
|
||||
value: true,
|
||||
label: '禁用',
|
||||
},
|
||||
],
|
||||
merchant: [],
|
||||
payType: [],
|
||||
},
|
||||
};
|
||||
const getters = {};
|
||||
const mutations = {
|
||||
setList: (state, data) => (state.list = data),
|
||||
setPayType: (state, data) => (state.opts.payType = data),
|
||||
setMerchant: (state, data) => (state.opts.merchant = data),
|
||||
setTotal: (state, data) => (state.total = data),
|
||||
setDetail: (state, data) => (state.detail = data),
|
||||
};
|
||||
const actions = {
|
||||
async search({ rootGetters, commit }, params) {
|
||||
const res = await api.getApplicationList({
|
||||
...rootGetters['local/page'](state.code),
|
||||
...params,
|
||||
});
|
||||
if (res) {
|
||||
commit('setList', res?.records.map((i) => ({ ...i, isShow: !i.isDisabled })) || []);
|
||||
commit('setTotal', res?.total || 0);
|
||||
}
|
||||
},
|
||||
async save({ dispatch }, data) {
|
||||
let save = data.mchPrimaryId ? api.update : api.create;
|
||||
let res = await save(data);
|
||||
if (res) {
|
||||
ElMessage.success('保存成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
detail: async (context, id) => {
|
||||
let res = await api.detail(id);
|
||||
if (!res) {
|
||||
ElMessage.error('加载详情失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
del: async ({ dispatch }, id) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
|
||||
let res = await api.del(id);
|
||||
if (res) {
|
||||
ElMessage.success('删除成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
return res;
|
||||
} catch (e) {
|
||||
console.info('取消删除', e);
|
||||
}
|
||||
},
|
||||
async updateStatus({ dispatch }, data) {
|
||||
let res = await api.updateStatus(data);
|
||||
if (res) {
|
||||
ElMessage.success('保存成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
async getMerchantList({ commit }) {
|
||||
const res = await mchApi.getMerchantSelector();
|
||||
if (res) {
|
||||
commit('setMerchant', res || []);
|
||||
}
|
||||
},
|
||||
async getPayType({ commit }) {
|
||||
const res = await api.getPayType();
|
||||
if (res) {
|
||||
commit('setPayType', res || []);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
||||
@ -0,0 +1,103 @@
|
||||
/*
|
||||
* @Author: ch
|
||||
* @Date: 2022-07-04 15:21:30
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-06 11:26:06
|
||||
* @Description: file content
|
||||
*/
|
||||
import * as api from '@/api/pay/merchant.js';
|
||||
import { ElMessage, ElMessageBox } from '@/plugins/element-plus';
|
||||
const state = {
|
||||
code: 'PayMerchantManagement',
|
||||
list: [],
|
||||
detail: {},
|
||||
total: 0,
|
||||
opts: {
|
||||
status: [
|
||||
{
|
||||
value: false,
|
||||
label: '启用',
|
||||
},
|
||||
{
|
||||
value: true,
|
||||
label: '禁用',
|
||||
},
|
||||
],
|
||||
platform: [],
|
||||
},
|
||||
};
|
||||
const getters = {};
|
||||
const mutations = {
|
||||
setList: (state, data) => (state.list = data),
|
||||
setPlatform: (state, data) => (state.opts.platform = data),
|
||||
setTotal: (state, data) => (state.total = data),
|
||||
setDetail: (state, data) => (state.detail = data),
|
||||
};
|
||||
const actions = {
|
||||
async search({ rootGetters, commit }, params) {
|
||||
const res = await api.getMerchantList({
|
||||
...rootGetters['local/page'](state.code),
|
||||
...params,
|
||||
});
|
||||
if (res) {
|
||||
commit('setList', res?.records.map((i) => ({ ...i, isShow: !i.isDisabled })) || []);
|
||||
commit('setTotal', res?.total || 0);
|
||||
}
|
||||
},
|
||||
async save({ dispatch }, data) {
|
||||
let save = data.mchPrimaryId ? api.update : api.create;
|
||||
let res = await save(data);
|
||||
if (res) {
|
||||
ElMessage.success('保存成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
detail: async (context, id) => {
|
||||
let res = await api.detail(id);
|
||||
if (!res) {
|
||||
ElMessage.error('加载详情失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
del: async ({ dispatch }, id) => {
|
||||
try {
|
||||
await ElMessageBox.confirm('数据删除后无法恢复，确定要删除吗?', '危险操作');
|
||||
let res = await api.del(id);
|
||||
if (res) {
|
||||
ElMessage.success('删除成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('删除失败');
|
||||
}
|
||||
return res;
|
||||
} catch (e) {
|
||||
console.info('取消删除', e);
|
||||
}
|
||||
},
|
||||
async updateStatus({ dispatch }, data) {
|
||||
let res = await api.updateStatus(data);
|
||||
if (res) {
|
||||
ElMessage.success('保存成功');
|
||||
dispatch('search');
|
||||
} else {
|
||||
ElMessage.error('保存失败');
|
||||
}
|
||||
return res;
|
||||
},
|
||||
async getMerchantPlatform({ commit }) {
|
||||
const res = await api.getMerchantPlatform();
|
||||
if (res) {
|
||||
commit('setPlatform', res || []);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
state,
|
||||
getters,
|
||||
mutations,
|
||||
actions,
|
||||
};
|
||||
@ -0,0 +1,11 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-07-04 16:37:25
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-04 16:38:00
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
<script setup lang="jsx"></script>
|
||||
@ -0,0 +1,11 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-07-04 16:34:07
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-04 16:34:13
|
||||
* @Description: file content
|
||||
-->
|
||||
<template></template>
|
||||
<script lang="jsx">
|
||||
export default {};
|
||||
</script>
|
||||
@ -0,0 +1,201 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-06-15 17:29:32
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-06 14:31:59
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<table-list
|
||||
v-loading="loading"
|
||||
:code="code"
|
||||
:config="config"
|
||||
:data="list"
|
||||
:operation="['create', 'search']"
|
||||
:reset="handleReset"
|
||||
title="商户"
|
||||
:total="total"
|
||||
@create="handleCreate"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #search>
|
||||
<el-form inline>
|
||||
<el-form-item label="所属商户">
|
||||
<el-select v-model="state.condition.mchPrimaryId">
|
||||
<el-option
|
||||
v-for="item in opts.merchant"
|
||||
:key="item.mchPrimaryId"
|
||||
:label="item.mchName"
|
||||
:value="item.mchPrimaryId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="应用名称">
|
||||
<el-input v-model="state.condition.appName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="应用ID">
|
||||
<el-input v-model="state.condition.appId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="支付方式">
|
||||
<el-select v-model="state.condition.payCode">
|
||||
<el-option
|
||||
v-for="(item, idx) in opts.payType"
|
||||
:key="idx"
|
||||
:label="item.text"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户状态">
|
||||
<el-select v-model="state.condition.isDisabled">
|
||||
<el-option
|
||||
v-for="(item, idx) in opts.status"
|
||||
:key="idx"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</table-list>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import ElButton from '@/components/extra/ElButton.vue';
|
||||
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const loading = ref(false);
|
||||
// 页面字典表数据
|
||||
const opts = computed(() => store.state.application.opts);
|
||||
// 表格数据
|
||||
const code = computed(() => store.state.application.code);
|
||||
const list = computed(() => _.cloneDeep(store.state.application.list));
|
||||
const total = computed(() => store.state.application.total);
|
||||
// 表格查询参数
|
||||
const _condition = {
|
||||
mchPrimaryId: '',
|
||||
payCode: '',
|
||||
appId: '',
|
||||
appName: '',
|
||||
isDisabled: null,
|
||||
};
|
||||
const state = reactive({
|
||||
condition: { ..._condition },
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
const handleSearch = async () => {
|
||||
loading.value = true;
|
||||
await store.dispatch('application/search', { ...state.condition });
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
store.dispatch('application/getMerchantList');
|
||||
store.dispatch('application/getPayType');
|
||||
onActivated(handleSearch);
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
const handleReset = () => {
|
||||
state.condition = { ..._condition };
|
||||
};
|
||||
const handleCreate = () => {
|
||||
router.push('./create');
|
||||
};
|
||||
const handleShowHide = (row) => {
|
||||
store.dispatch('application/updateStatus', {
|
||||
appPrimaryId: row.appPrimaryId,
|
||||
isDisabled: !row.isShow,
|
||||
});
|
||||
};
|
||||
const handleEdit = (id) => {
|
||||
router.push({
|
||||
path: './update',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
const handleDelete = (id) => {
|
||||
store.dispatch('application/del', id);
|
||||
};
|
||||
const config = reactive({
|
||||
columns: [
|
||||
{
|
||||
label: '应用名称',
|
||||
align: 'left',
|
||||
prop: 'appName',
|
||||
},
|
||||
{
|
||||
label: '应用代号',
|
||||
align: 'left',
|
||||
prop: 'appCode',
|
||||
},
|
||||
{
|
||||
label: '应用ID',
|
||||
align: 'left',
|
||||
prop: 'appId',
|
||||
},
|
||||
{
|
||||
label: '所属商户',
|
||||
width: 120,
|
||||
slots: {
|
||||
default: ({ row }) => <span>{row.mchInfo.mchName}</span>,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '支付方式',
|
||||
width: 120,
|
||||
prop: 'payCodes',
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
width: 80,
|
||||
slots: {
|
||||
default: ({ row }) => <ElSwitch v-model={row.isShow} onChange={() => handleShowHide(row)} />,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
width: 120,
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<div>
|
||||
<ElButton type="text" onClick={() => handleEdit(row.mchPrimaryId)}>
|
||||
编辑
|
||||
</ElButton>
|
||||
<ElButton type="text" onClick={() => handleDelete(row.mchPrimaryId)}>
|
||||
删除
|
||||
</ElButton>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.batch-show-hide {
|
||||
margin-left: 20px;
|
||||
}
|
||||
:deep(.row-ellipsis) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.ctx-link) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,124 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-07-04 16:42:21
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-06 11:08:35
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="formEl" label-width="160px" :model="form" :rules="rules">
|
||||
<el-form-item label="商户平台" prop="mchCode">
|
||||
<el-radio-group v-model="form.mchCode" :disabled="idEdit">
|
||||
<el-radio v-for="item in opts.platform" :key="item.code" :label="item.code" border>
|
||||
{{ item.text }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户名称" prop="mchName">
|
||||
<el-input v-model="form.mchName" maxlength="64" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户ID" prop="mchId">
|
||||
<el-input v-model="form.mchId" maxlength="64" show-word-limit />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户状态" prop="disabled">
|
||||
<el-select v-model="form.isDisabled" :clearable="false">
|
||||
<el-option v-for="item in opts.status" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<Ali v-if="form.mchCode === 'alipay'" ref="aliFormEl" v-model="form.aliMchData" :detai="aliMchData" />
|
||||
<Wx v-if="form.mchCode === 'wxpay'" v-model="form.wxMchData" ref="wxFormEl" />
|
||||
<el-form-item>
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button :disabled="loading" :loading="submitting" type="primary" @click="handleSave">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import Ali from './ali.vue';
|
||||
import Wx from './wx.vue';
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
// 页面字典表数据
|
||||
const opts = computed(() => store.state.merchant.opts);
|
||||
const defaultForm = {
|
||||
isDisabled: false,
|
||||
mchCode: route.params.id ? '' : 'wxpay',
|
||||
mchName: '',
|
||||
mchId: '',
|
||||
aliMchData: {},
|
||||
wxMchData: {},
|
||||
};
|
||||
const form = reactive({ ...defaultForm });
|
||||
const rules = reactive({
|
||||
mchName: [{ required: true, message: '商户名称不能为空' }],
|
||||
mchId: [{ required: true, message: '商户ID不能为空' }],
|
||||
});
|
||||
const idEdit = computed(() => Boolean(route.params.id));
|
||||
|
||||
const formEl = ref();
|
||||
const aliFormEl = ref();
|
||||
const wxFormEl = ref();
|
||||
|
||||
store.dispatch('merchant/getMerchantPlatform');
|
||||
onActivated(() => {
|
||||
handlelLoadData();
|
||||
});
|
||||
/**
|
||||
* 如果是编辑需要加载初始数据加载
|
||||
*/
|
||||
const handlelLoadData = async () => {
|
||||
let id = route.params.id;
|
||||
if (id && form.id !== id) {
|
||||
let res = await store.dispatch('merchant/detail', id);
|
||||
if (res.mchCode === 'alipay') {
|
||||
const publicKey = res.aliMchData.publicKey;
|
||||
if (publicKey) {
|
||||
res.aliMchData.hasPublicKey = publicKey;
|
||||
delete res.aliMchData.publicKey;
|
||||
}
|
||||
} else {
|
||||
const { apiKey, apiKeyV3, serialNo } = res.wxMchData;
|
||||
res.wxMchData.hasApiKey = apiKey;
|
||||
delete res.wxMchData.apiKey;
|
||||
res.wxMchData.hasApiKeyV3 = apiKeyV3;
|
||||
delete res.wxMchData.apiKeyV3;
|
||||
res.wxMchData.hasSerialNo = serialNo;
|
||||
delete res.wxMchData.serialNo;
|
||||
}
|
||||
Object.assign(form, res);
|
||||
}
|
||||
};
|
||||
const handleSave = async () => {
|
||||
let validate = false;
|
||||
if (form.mchCode === 'wxpay') {
|
||||
validate = wxFormEl.value.validate;
|
||||
} else {
|
||||
validate = aliFormEl.value.validate;
|
||||
}
|
||||
Promise.all([formEl.value.validate(), validate()])
|
||||
.then(async () => {
|
||||
const res = await store.dispatch('merchant/save', form);
|
||||
if (res) {
|
||||
handleCancel();
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
const handleCancel = () => {
|
||||
Object.assign(form, defaultForm);
|
||||
wxFormEl.value && wxFormEl.value.resetFields();
|
||||
aliFormEl.value && aliFormEl.value.resetFields();
|
||||
formEl.value.resetFields();
|
||||
router.push({ name: 'PayMerchant' });
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.form-container {
|
||||
.el-form {
|
||||
// width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,177 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-06-15 17:29:32
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-07-06 14:34:01
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<table-list
|
||||
v-loading="loading"
|
||||
:code="code"
|
||||
:config="config"
|
||||
:data="list"
|
||||
:operation="['create', 'search']"
|
||||
:reset="handleReset"
|
||||
title="商户"
|
||||
:total="total"
|
||||
@create="handleCreate"
|
||||
@search="handleSearch"
|
||||
>
|
||||
<template #search>
|
||||
<el-form inline>
|
||||
<el-form-item label="商户名称">
|
||||
<el-input v-model="state.condition.mchName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户ID">
|
||||
<el-input v-model="state.condition.mchId" />
|
||||
</el-form-item>
|
||||
<el-form-item label="商户平台">
|
||||
<el-select v-model="state.condition.mchCode">
|
||||
<el-option
|
||||
v-for="(item, idx) in opts.platform"
|
||||
:key="idx"
|
||||
:label="item.text"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="商户状态">
|
||||
<el-select v-model="state.condition.isDisabled">
|
||||
<el-option
|
||||
v-for="(item, idx) in opts.status"
|
||||
:key="idx"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</table-list>
|
||||
</template>
|
||||
<script setup lang="jsx">
|
||||
import ElButton from '@/components/extra/ElButton.vue';
|
||||
import ElSwitch from '@/components/extra/ElSwitch.vue';
|
||||
const router = useRouter();
|
||||
const store = useStore();
|
||||
const loading = ref(false);
|
||||
// 页面字典表数据
|
||||
const opts = computed(() => store.state.merchant.opts);
|
||||
// 表格数据
|
||||
const code = computed(() => store.state.merchant.code);
|
||||
const list = computed(() => _.cloneDeep(store.state.merchant.list));
|
||||
const total = computed(() => store.state.merchant.total);
|
||||
// 表格查询参数
|
||||
const _condition = {
|
||||
mchCode: '',
|
||||
mchId: '',
|
||||
mchName: '',
|
||||
isDisabled: null,
|
||||
};
|
||||
const state = reactive({
|
||||
condition: { ..._condition },
|
||||
});
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
const handleSearch = async () => {
|
||||
loading.value = true;
|
||||
await store.dispatch('merchant/search', { ...state.condition });
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
store.dispatch('merchant/getMerchantPlatform');
|
||||
onActivated(handleSearch);
|
||||
/**
|
||||
* 重置
|
||||
*/
|
||||
const handleReset = () => {
|
||||
state.condition = { ..._condition };
|
||||
};
|
||||
const handleCreate = () => {
|
||||
router.push('./create');
|
||||
};
|
||||
const handleShowHide = (row) => {
|
||||
store.dispatch('merchant/updateStatus', {
|
||||
mchPrimaryId: row.mchPrimaryId,
|
||||
isDisabled: !row.isShow,
|
||||
});
|
||||
};
|
||||
const handleDetail = (id) => {
|
||||
router.push({
|
||||
name: 'UpdateMerchant',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
const handleDelete = (id) => {
|
||||
store.dispatch('merchant/del', id);
|
||||
};
|
||||
const config = reactive({
|
||||
columns: [
|
||||
{
|
||||
label: '商户名称',
|
||||
align: 'left',
|
||||
prop: 'mchName',
|
||||
},
|
||||
{
|
||||
label: '商户ID',
|
||||
align: 'left',
|
||||
prop: 'mchId',
|
||||
},
|
||||
{
|
||||
label: '商户平台',
|
||||
width: 120,
|
||||
prop: 'mchCodeText',
|
||||
},
|
||||
{
|
||||
label: '状态',
|
||||
width: 80,
|
||||
slots: {
|
||||
default: ({ row }) => <ElSwitch v-model={row.isShow} onChange={() => handleShowHide(row)} />,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
prop: 'createTime',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
width: 120,
|
||||
slots: {
|
||||
default: ({ row }) => (
|
||||
<div>
|
||||
<ElButton type="text" onClick={() => handleDetail(row.mchPrimaryId)}>
|
||||
编辑
|
||||
</ElButton>
|
||||
<ElButton type="text" onClick={() => handleDelete(row.mchPrimaryId)}>
|
||||
删除
|
||||
</ElButton>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.batch-show-hide {
|
||||
margin-left: 20px;
|
||||
}
|
||||
:deep(.row-ellipsis) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.ctx-link) {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue