mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-20 09:55:53 +08:00
028f32a73c
- 将iView组件统一替换为TDesign组件 - 优化表单、表格、弹窗等交互样式 - 修复路由重复添加问题 - 更新依赖版本 - 调整布局间距与响应式 - 修复表单重置方法兼容性 - 统一消息提示组件
287 lines
11 KiB
Vue
287 lines
11 KiB
Vue
<template>
|
|
<div>
|
|
<t-card style="margin-bottom: 12px">
|
|
<t-form :data="searchForm" layout="inline" class="search-form" @submit="handleSearch">
|
|
<t-form-item label="会员名称" name="memberName">
|
|
<t-input v-model="searchForm.memberName" placeholder="请输入会员名称" clearable style="width: 240px" />
|
|
</t-form-item>
|
|
<t-form-item label="编号" name="sn">
|
|
<t-input v-model="searchForm.sn" placeholder="请输入编号" clearable style="width: 240px" />
|
|
</t-form-item>
|
|
<t-form-item label="状态">
|
|
<t-select v-model="searchForm.distributionCashStatus" clearable style="width: 240px">
|
|
<t-option v-for="item in cashStatusList" :value="item.value" :key="item.value" :label="item.label" />
|
|
</t-select>
|
|
</t-form-item>
|
|
<t-form-item>
|
|
<t-button theme="primary" @click="handleSearch">搜索</t-button>
|
|
</t-form-item>
|
|
</t-form>
|
|
</t-card>
|
|
<t-card>
|
|
<t-table :loading="loading" :columns="columns" :data="data" ref="table" class="mt_10" rowKey="id"></t-table>
|
|
<div class="page padding-row" style="display: flex; justify-content: flex-end">
|
|
<t-pagination :current="searchForm.pageNumber" :total="Number(total)" :pageSize="searchForm.pageSize" :pageSizeOptions="[20, 50, 100]" size="small" :showJumper="true" @change="onPaginationChange" />
|
|
</div>
|
|
</t-card>
|
|
<t-drawer :visible.sync="modalVisible" :header="modalTitle" placement="right" size="500px" @close="modalVisible = false">
|
|
<div v-if="handleStatus === 'view'">
|
|
<t-descriptions :column="1" size="medium">
|
|
<t-descriptions-item label="编号">{{ form.sn }}</t-descriptions-item>
|
|
<t-descriptions-item label="会员名称">{{ form.distributionName }}</t-descriptions-item>
|
|
<t-descriptions-item label="申请金额">{{ form.price }}</t-descriptions-item>
|
|
<t-descriptions-item label="申请时间">{{ form.createTime }}</t-descriptions-item>
|
|
<t-descriptions-item label="姓名">{{ form.name }}</t-descriptions-item>
|
|
<t-descriptions-item label="身份证号">{{ form.idNumber }}</t-descriptions-item>
|
|
<t-descriptions-item label="结算银行开户行名称">{{ form.settlementBankAccountName }}</t-descriptions-item>
|
|
<t-descriptions-item label="结算银行开户账号">{{ form.settlementBankAccountNum }}</t-descriptions-item>
|
|
<t-descriptions-item label="结算银行开户支行名称">{{ form.settlementBankBranchName }}</t-descriptions-item>
|
|
<t-descriptions-item label="处理时间">{{ form.updateTime }}</t-descriptions-item>
|
|
<t-descriptions-item label="状态">{{ { APPLY: '待处理', VIA_AUDITING: '通过', FAIL_AUDITING: '审核拒绝' }[form.distributionCashStatus] || form.distributionCashStatus }}</t-descriptions-item>
|
|
</t-descriptions>
|
|
</div>
|
|
<div v-else>
|
|
<t-form ref="form" :data="form" :labelWidth="100">
|
|
<t-form-item label="编号">
|
|
<t-input v-model="form.sn" disabled style="width: 100%" />
|
|
</t-form-item>
|
|
<t-form-item label="会员名称">
|
|
<t-input v-model="form.distributionName" disabled style="width: 100%" />
|
|
</t-form-item>
|
|
<t-form-item label="金额">
|
|
<t-input v-model="form.price" disabled style="width: 100%" />
|
|
</t-form-item>
|
|
<t-form-item label="是否通过">
|
|
<t-radio-group v-model="result">
|
|
<t-radio value="VIA_AUDITING">通过</t-radio>
|
|
<t-radio value="FAIL_AUDITING">拒绝</t-radio>
|
|
</t-radio-group>
|
|
</t-form-item>
|
|
</t-form>
|
|
</div>
|
|
<template #footer>
|
|
<div v-if="handleStatus === 'edit'" style="display: flex; justify-content: flex-end">
|
|
<t-button variant="text" @click="modalVisible = false">取消</t-button>
|
|
<t-button theme="primary" :loading="submitLoading" style="margin-left: 8px" @click="handleSubmit">提交</t-button>
|
|
</div>
|
|
<div v-else style="display: flex; justify-content: flex-start">
|
|
<t-button theme="primary" @click="modalVisible = false">返回</t-button>
|
|
</div>
|
|
</template>
|
|
</t-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { auditDistributionCash, getDistributionCash } from "@/api/distribution";
|
|
import { cashStatusList } from "./dataJson";
|
|
import { MessagePlugin, DialogPlugin } from "tdesign-vue";
|
|
export default {
|
|
name: "distributionCash",
|
|
data() {
|
|
return {
|
|
cashStatusList, // 状态列表
|
|
loading: true, // 表单加载状态
|
|
modalVisible: false, // 添加或编辑显示
|
|
modalTitle: "", // 添加或编辑标题
|
|
result: 'FAIL_AUDITING', // 是否通过
|
|
searchForm: { // 搜索框初始化对象
|
|
pageNumber: 1, // 当前页数
|
|
pageSize: 20, // 页面大小
|
|
sort: "createTime", // 默认排序字段
|
|
order: "desc", // 默认排序方式
|
|
},
|
|
handleStatus:'edit',// 判断是编辑还是查看
|
|
form: { // 添加或编辑表单对象初始化数据
|
|
sn: "",
|
|
memberName: "",
|
|
price: "",
|
|
},
|
|
submitLoading: false, // 添加或编辑提交状态
|
|
columns: [
|
|
{ title: "编号", colKey: "sn", width: 300, align: "left" },
|
|
{ title: "会员名称", colKey: "distributionName", minWidth: 120, align: "left" },
|
|
{ title: "申请金额", colKey: "price", minWidth: 100, align: "left", cell: (h, p) => h("priceColorScheme", { props: { value: p.row.price, color: this.$mainColor } }) },
|
|
{ title: "申请时间", colKey: "createTime", minWidth: 150, align: "left" },
|
|
{ title: "姓名", colKey: "name", minWidth: 100, align: "left" },
|
|
{ title: "身份证号", colKey: "idNumber", minWidth: 120, align: "left" },
|
|
{ title: "结算银行开户行名称", colKey: "settlementBankAccountName", minWidth: 120, align: "left" },
|
|
{ title: "结算银行开户账号", colKey: "settlementBankAccountNum", minWidth: 120, align: "left" },
|
|
{ title: "结算银行开户支行名称", colKey: "settlementBankBranchName", minWidth: 120, align: "left" },
|
|
{ title: "处理时间", colKey: "updateTime", minWidth: 150, align: "left" },
|
|
{
|
|
title: "状态",
|
|
colKey: "distributionCashStatus",
|
|
minWidth: 120,
|
|
align: "left",
|
|
cell: (h, p) => {
|
|
const s = p.row.distributionCashStatus;
|
|
const map = { APPLY: { theme: "warning", label: "待处理" }, VIA_AUDITING: { theme: "success", label: "通过" }, FAIL_AUDITING: { theme: "danger", label: "审核拒绝" } };
|
|
const cfg = map[s] || { theme: "default", label: s };
|
|
return h("t-tag", { props: { theme: cfg.theme, variant: "light", size: "small" } }, [cfg.label]);
|
|
},
|
|
},
|
|
{
|
|
title: "操作",
|
|
colKey: "action",
|
|
align: "center",
|
|
fixed: "right",
|
|
width: 130,
|
|
cell: (h, params) => {
|
|
if (params.row.distributionCashStatus !== "APPLY") {
|
|
return h("div", { class: "ops" }, [
|
|
h(
|
|
"a",
|
|
{
|
|
on: {
|
|
click: () => {
|
|
this.view(params.row);
|
|
},
|
|
},
|
|
},
|
|
"查看"
|
|
),
|
|
]);
|
|
}
|
|
return h("div", { class: "ops" }, [
|
|
h(
|
|
"a",
|
|
{
|
|
on: {
|
|
click: () => {
|
|
this.edit(params.row);
|
|
},
|
|
},
|
|
},
|
|
"审核"
|
|
),
|
|
]);
|
|
},
|
|
},
|
|
],
|
|
data: [], // 表单数据
|
|
total: 0 // 表单数据总数
|
|
};
|
|
},
|
|
methods: {
|
|
// 初始化数据
|
|
init() {
|
|
this.getDataList();
|
|
},
|
|
// 改变页码
|
|
changePage(v) {
|
|
this.searchForm.pageNumber = v;
|
|
this.getDataList();
|
|
},
|
|
// 改变页数
|
|
changePageSize(v) {
|
|
this.searchForm.pageSize = v;
|
|
this.getDataList();
|
|
},
|
|
onPaginationChange(info) {
|
|
if (info && typeof info.pageSize !== 'undefined' && info.pageSize !== this.searchForm.pageSize) {
|
|
this.changePageSize(info.pageSize);
|
|
}
|
|
if (info && typeof info.current !== 'undefined') {
|
|
this.changePage(info.current);
|
|
}
|
|
},
|
|
// 搜索
|
|
handleSearch() {
|
|
this.searchForm.pageNumber = 1;
|
|
this.searchForm.pageSize = 20;
|
|
this.getDataList();
|
|
},
|
|
getDataList() {
|
|
this.loading = true;
|
|
getDistributionCash(this.searchForm)
|
|
.then((res) => {
|
|
this.loading = false;
|
|
if (res.success) {
|
|
this.data = res.result.records;
|
|
this.total = res.result.total;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
// 通过还是拒绝申请
|
|
handleSubmit() {
|
|
let result = "拒绝";
|
|
if (this.result === "VIA_AUDITING") {
|
|
result = "通过";
|
|
}
|
|
DialogPlugin.confirm({
|
|
header: "确认审核",
|
|
content: "您确认要审核" + result + "么?",
|
|
theme: "warning",
|
|
onConfirm: () => {
|
|
this.submitLoading = true;
|
|
auditDistributionCash(this.form.id, { result: this.result })
|
|
.then((res) => {
|
|
this.submitLoading = false;
|
|
if (res.success) {
|
|
MessagePlugin.success("审核成功");
|
|
this.getDataList();
|
|
this.modalVisible = false;
|
|
} else {
|
|
this.modalVisible = false;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.submitLoading = false;
|
|
});
|
|
},
|
|
});
|
|
},
|
|
// 弹出modal 审核
|
|
edit(v) {
|
|
this.modalTitle = "审核";
|
|
this.handleStatus = 'edit';
|
|
if (this.$refs.form && typeof this.$refs.form.reset === 'function') { this.$refs.form.reset(); }
|
|
// 转换null为""
|
|
for (let attr in v) {
|
|
if (v[attr] === null) {
|
|
v[attr] = "";
|
|
}
|
|
}
|
|
this.form = JSON.parse(JSON.stringify(v));
|
|
this.modalVisible = true;
|
|
},
|
|
// 弹出modal 查看
|
|
view(v){
|
|
this.modalTitle = "查看";
|
|
this.handleStatus = 'view';
|
|
if (this.$refs.form && typeof this.$refs.form.reset === 'function') { this.$refs.form.reset(); }
|
|
// 转换null为""
|
|
for (let attr in v) {
|
|
if (v[attr] === null) {
|
|
v[attr] = "";
|
|
}
|
|
}
|
|
let str = JSON.stringify(v);
|
|
let data = JSON.parse(str);
|
|
this.form = data;
|
|
this.modalVisible = true;
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ops a {
|
|
color: #2d8cf0;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
}
|
|
.ops span {
|
|
display: inline-block;
|
|
margin: 0 8px;
|
|
color: #dcdee2;
|
|
}
|
|
</style>
|