<template>
<div>
<el-card class="box-card">
<byTable
:source="sourceList.data"
:pagination="sourceList.pagination"
:config="config"
:loading="loading"
:searchConfig="searchConfig"
highlight-current-row
:action-list="[
{
text: '添加供应商',
action: () => clickModal(),
},
]"
@get-list="getList"
@clickReset="clickReset">
<template #contactPerson="{ item }">
<div>
{{ item.contactPerson1 }} {{ item.contactNumber1 }}, {{ item.contactPerson2 }} {{ item.contactNumber2 }}, {{ item.contactPerson3 }}
{{ item.contactNumber3 }}
</div>
</template>
</byTable>
</el-card>
<el-dialog :title="modalType == 'add' ? '添加供应商' : '编辑供应商'" v-if="openDialog" v-model="openDialog" width="900">
<byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="submit">
<template #contactPerson1>
<div style="width: 100%">
<el-row :gutter="10">
<el-col :span="8">
<el-input v-model="formData.data.contactPerson1" placeholder="请输入姓名" />
</el-col>
<el-col :span="8">
<el-input v-model="formData.data.contactNumber1" placeholder="请输入电话" />
</el-col>
<el-col :span="8">
<el-input v-model="formData.data.contactMailbox1" placeholder="请输入邮箱" />
</el-col>
</el-row>
</div>
</template>
<template #contactPerson2>
<div style="width: 100%">
<el-row :gutter="10">
<el-col :span="8">
<el-input v-model="formData.data.contactPerson2" placeholder="请输入姓名" />
</el-col>
<el-col :span="8">
<el-input v-model="formData.data.contactNumber2" placeholder="请输入电话" />
</el-col>
<el-col :span="8">
<el-input v-model="formData.data.contactMailbox2" placeholder="请输入邮箱" />
</el-col>
</el-row>
</div>
</template>
<template #contactPerson3>
<div style="width: 100%">
<el-row :gutter="10">
<el-col :span="8">
<el-input v-model="formData.data.contactPerson3" placeholder="请输入姓名" />
</el-col>
<el-col :span="8">
<el-input v-model="formData.data.contactNumber3" placeholder="请输入电话" />
</el-col>
<el-col :span="8">
<el-input v-model="formData.data.contactMailbox3" placeholder="请输入邮箱" />
</el-col>
</el-row>
</div>
</template>
</byForm>
<template #footer>
<el-button @click="openDialog = false" size="large">取 消</el-button>
<el-button type="primary" @click="submitForm()" size="large" v-preReClick>确 定</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { ElMessage, ElMessageBox } from "element-plus";
const { proxy } = getCurrentInstance();
const sourceList = ref({
data: [],
pagination: {
total: 0,
pageNum: 1,
pageSize: 10,
name: "",
},
});
const loading = ref(false);
const searchConfig = computed(() => {
return [
{
type: "input",
prop: "name",
label: "供应商名称",
},
];
});
const config = computed(() => {
return [
{
attrs: {
label: "供应商名称",
prop: "name",
},
},
{
attrs: {
label: "账期",
prop: "paymentPeriod",
width: 120,
},
},
{
attrs: {
label: "电话",
prop: "companyTelephone",
width: 160,
},
},
{
attrs: {
label: "联系方式",
slot: "contactPerson",
width: 200,
},
},
{
attrs: {
label: "省份",
prop: "province",
width: 140,
},
},
{
attrs: {
label: "城市",
prop: "city",
width: 140,
},
},
{
attrs: {
label: "地址",
prop: "detailedAddress",
width: 240,
},
},
{
attrs: {
label: "操作",
width: 120,
align: "center",
fixed: "right",
},
renderHTML(row) {
return [
{
attrs: {
label: "编辑",
type: "primary",
text: true,
},
el: "button",
click() {
clickUpdate(row);
},
},
{
attrs: {
label: "删除",
type: "danger",
text: true,
},
el: "button",
click() {
clickDelete(row);
},
},
];
},
},
];
});
const getList = async (req, status) => {
if (status) {
sourceList.value.pagination = {
pageNum: sourceList.value.pagination.pageNum,
pageSize: sourceList.value.pagination.pageSize,
};
} else {
sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
}
loading.value = true;
proxy.post("/supplier/page", sourceList.value.pagination).then((res) => {
sourceList.value.data = res.rows;
sourceList.value.pagination.total = res.total;
setTimeout(() => {
loading.value = false;
}, 200);
});
};
getList();
const clickReset = () => {
getList("", true);
};
const modalType = ref("add");
const openDialog = ref(false);
const submit = ref(null);
const formOption = reactive({
inline: true,
labelWidth: "100px",
itemWidth: 100,
rules: [],
labelPosition: "right",
});
const formData = reactive({
data: {},
});
const formConfig = computed(() => {
return [
{
type: "title",
title: "基本信息",
label: "",
},
{
type: "input",
prop: "name",
label: "供应商名称",
itemType: "text",
},
{
type: "input",
prop: "companyTelephone",
label: "公司电话",
itemType: "text",
itemWidth: 50,
},
{
type: "input",
prop: "paymentPeriod",
label: "账期",
itemType: "text",
itemWidth: 50,
},
{
type: "input",
prop: "province",
label: "省份",
itemType: "text",
itemWidth: 50,
},
{
type: "input",
prop: "city",
label: "城市",
itemType: "text",
itemWidth: 50,
},
{
type: "input",
prop: "detailedAddress",
label: "地址",
itemType: "text",
},
{
type: "input",
prop: "dutyNumber",
label: "税号",
itemType: "text",
},
{
type: "title",
title: "联系人信息",
label: "",
},
{
type: "slot",
slotName: "contactPerson1",
label: "联系人1",
},
{
type: "slot",
slotName: "contactPerson2",
label: "联系人2",
},
{
type: "slot",
slotName: "contactPerson3",
label: "联系人3",
},
{
type: "title",
title: "银行账户信息",
label: "",
},
{
type: "input",
prop: "bank",
label: "银行",
itemType: "text",
itemWidth: 50,
},
{
type: "input",
prop: "bankAccountName",
label: "账户名",
itemType: "text",
itemWidth: 50,
},
{
type: "input",
prop: "bankAccountNumber",
label: "账号",
itemType: "text",
itemWidth: 50,
},
];
});
const rules = ref({
name: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
});
const clickModal = () => {
modalType.value = "add";
formData.data = {};
openDialog.value = true;
};
const submitForm = () => {
submit.value.handleSubmit(() => {
proxy.post("/supplier/" + modalType.value, formData.data).then(() => {
ElMessage({
message: modalType.value == "add" ? "添加成功" : "编辑成功",
type: "success",
});
openDialog.value = false;
getList();
});
});
};
const clickUpdate = (row) => {
modalType.value = "edit";
proxy.post("/supplier/detail", { id: row.id }).then((res) => {
formData.data = res;
openDialog.value = true;
});
};
const clickDelete = (row) => {
ElMessageBox.confirm("你是否确认此操作", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
proxy.post("/supplier/delete", { id: row.id }).then(() => {
ElMessage({ message: "删除成功", type: "success" });
getList();
});
})
.catch(() => {});
};
</script>
<style lang="scss" scoped>
::v-deep(.el-input-number .el-input__inner) {
text-align: left;
}
</style>