增加客户列表页面
parent
e033d5a338
commit
951b739e41
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<Page>
|
||||
<ElForm v-show="showSearchForm" inline @submit.prevent="paging">
|
||||
<!-- <ElFormItem label="Id">
|
||||
<ElInput v-model="searchForm.id" placeholder="Id" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="用户">
|
||||
<ElInput v-model="searchForm.userId" placeholder="用户" />
|
||||
</ElFormItem> -->
|
||||
<ElFormItem label="身份类型">
|
||||
<el-select style="width: 200px" v-model="searchForm.identityCategory" placeholder="身份类型">
|
||||
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
|
||||
<!-- <ElFormItem label="客户姓名">
|
||||
<ElInput v-model="searchForm.customerName" placeholder="客户姓名" />
|
||||
</ElFormItem> -->
|
||||
|
||||
<ElFormItem label="结算方式">
|
||||
<el-select v-model="searchForm.settlementWay" placeholder="结算方式" style="width: 200px">
|
||||
<el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
<!--
|
||||
<ElFormItem label="客户联系电话">
|
||||
<ElInput v-model="searchForm.phone" placeholder="客户联系电话" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="组织信息">
|
||||
<ElInput v-model="searchForm.orgId" placeholder="组织信息" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建人">
|
||||
<ElInput v-model="searchForm.creatorId" placeholder="创建人" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改人">
|
||||
<ElInput v-model="searchForm.modifierId" placeholder="修改人" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="创建时间">
|
||||
<ElInput v-model="searchForm.createTime" placeholder="创建时间" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="修改时间">
|
||||
<ElInput v-model="searchForm.modifyTime" placeholder="修改时间" />
|
||||
</ElFormItem> -->
|
||||
<ElFormItem>
|
||||
<ElButton :icon="elIcons.Search" :loading="searching" native-type="submit" type="primary">搜索</ElButton>
|
||||
<ElButton :icon="elIcons.Refresh" :loading="searching" @click="reset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
|
||||
<div class="tool-bar">
|
||||
<!-- <ElButton :icon="elIcons.Plus" type="primary" @click="addHandler">新建</ElButton> -->
|
||||
<ElButton :icon="elIcons.Filter" type="default" @click="showSearchForm = !showSearchForm" />
|
||||
</div>
|
||||
|
||||
<ElTable v-loading="searching" :data="tableData" cell-class-name="table-cell" class="table-list" empty-text="暂无数据" header-row-class-name="table-header" row-key="id">
|
||||
<!-- <ElTableColumn label="Id" prop="id" /> -->
|
||||
<ElTableColumn label="账号" prop="username" />
|
||||
<ElTableColumn label="联系人" prop="nickname" />
|
||||
<ElTableColumn label="身份类型" prop="identityCategoryTxt" />
|
||||
<ElTableColumn label="组织信息" prop="orgId" />
|
||||
<ElTableColumn label="客户姓名" prop="customerName" />
|
||||
<!-- <ElTableColumn label="客户联系电话" prop="phone" /> -->
|
||||
<ElTableColumn label="结算方式" prop="settlementWayTxt" />
|
||||
<ElTableColumn label="是否管理员">
|
||||
<template #default="scope">
|
||||
{{ scope.row.manager ? "是" : "否" }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="联系电话" prop="phone" />
|
||||
<ElTableColumn label="创建时间" prop="regdate" />
|
||||
<!-- <ElTableColumn label="修改时间" prop="modifyTime" /> -->
|
||||
<!-- <ElTableColumn label="是否删除" prop="deleted"/> -->
|
||||
<ElTableColumn label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<div class="action-btn">
|
||||
<ElPopconfirm confirm-button-text="是" cancel-button-text="否" confirm-button-type="danger" cancel-button-type="primary" placement="top" title="是否删除当前数据?" width="180" @confirm="delHandler(scope)">
|
||||
<template #reference>
|
||||
<ElButton text type="danger" :loading="deling">删除</ElButton>
|
||||
</template>
|
||||
</ElPopconfirm>
|
||||
<ElButton text type="primary" @click="modifyHandler(scope)">修改</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</ElTable>
|
||||
<ElPagination class="pagination" layout="prev, pager, next" :page-size="pagination.size" :total="pagination.total" @change="pageChangeHandler" />
|
||||
<CustomerForm ref="customerForm" @edit-succ="paging" />
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import CustomerApi from "@/pages/cst/customer/customer-api.ts";
|
||||
import CustomerForm from "@/pages/cst/customer/CustomerForm.vue";
|
||||
import Page from "@/components/page/Page.vue";
|
||||
import { elIcons } from "@/common/element/element.ts";
|
||||
|
||||
const tableData = ref<CustomerTypes.SearchCustomerResult[]>([]);
|
||||
let searchForm = reactive<CustomerTypes.SearchCustomerParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
});
|
||||
const searching = ref(false);
|
||||
const deling = ref(false);
|
||||
const showSearchForm = ref(true);
|
||||
const customerFormIns = useTemplateRef<InstanceType<typeof CustomerForm>>("customerForm");
|
||||
const pagination = reactive<G.Pagination>({
|
||||
total: 0,
|
||||
current: 1,
|
||||
size: 1,
|
||||
});
|
||||
function pageChangeHandler(currentPage: number, pageSize: number) {
|
||||
searchForm.current = currentPage;
|
||||
searchForm.size = pageSize;
|
||||
paging();
|
||||
}
|
||||
function showDialog(data?: CustomerTypes.SearchCustomerResult) {
|
||||
customerFormIns.value?.open(data);
|
||||
}
|
||||
function delHandler({ row }: { row: CustomerTypes.SearchCustomerResult }) {
|
||||
deling.value = true;
|
||||
CustomerApi.del([row.id!])
|
||||
.then(() => {
|
||||
ElMessage.success("删除成功");
|
||||
paging();
|
||||
})
|
||||
.finally(() => {
|
||||
deling.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
function modifyHandler({ row }: { row: CustomerTypes.SearchCustomerResult }) {
|
||||
showDialog(row);
|
||||
}
|
||||
|
||||
function addHandler() {
|
||||
showDialog();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
// Object.assign(searchForm, {});
|
||||
searchForm = reactive<CustomerTypes.SearchCustomerParam>({
|
||||
current: 1,
|
||||
size: 20,
|
||||
});
|
||||
paging();
|
||||
}
|
||||
|
||||
function paging() {
|
||||
searching.value = true;
|
||||
CustomerApi.paging(searchForm)
|
||||
.then((res) => {
|
||||
tableData.value = res.data?.records ?? [];
|
||||
})
|
||||
.finally(() => {
|
||||
searching.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const payList = [
|
||||
{
|
||||
value: "YueJie",
|
||||
label: "月结",
|
||||
},
|
||||
{
|
||||
value: "YuE",
|
||||
label: "余额",
|
||||
},
|
||||
{
|
||||
value: "XianFu",
|
||||
label: "现付",
|
||||
},
|
||||
];
|
||||
|
||||
const bizList = [
|
||||
{
|
||||
value: "ChanFei",
|
||||
label: "产废方",
|
||||
},
|
||||
{
|
||||
value: "YunShu",
|
||||
label: "运输方",
|
||||
},
|
||||
{
|
||||
value: "XiaoNa",
|
||||
label: "消纳方",
|
||||
},
|
||||
{
|
||||
value: "CaiGou",
|
||||
label: "采购方",
|
||||
},
|
||||
{
|
||||
value: "SiJi",
|
||||
label: "司机",
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
paging();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.table-list {
|
||||
flex 1;
|
||||
width 100%
|
||||
|
||||
:deep(.table-header) {
|
||||
color #454C59
|
||||
|
||||
th {
|
||||
background-color #EDF1F7
|
||||
font-weight 500
|
||||
position relative
|
||||
|
||||
& > div {
|
||||
display flex
|
||||
gap 5px
|
||||
align-items center
|
||||
}
|
||||
|
||||
&:not(:first-child) > div::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 1px;
|
||||
width: 1px;
|
||||
background-color: #D3D7DE;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
height 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.table-cell) {
|
||||
color #2F3540
|
||||
}
|
||||
.action-btn {
|
||||
width 100%
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
& > button {
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-bar {
|
||||
display flex
|
||||
justify-content flex-end
|
||||
margin 0 0 20px 0
|
||||
}
|
||||
|
||||
.pagination {
|
||||
justify-content: end;
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<template>
|
||||
<ElDialog v-model="showDialog" :close-on-click-modal="false" destroy-on-close width="fit-content" @close="dialogCloseHandler">
|
||||
<ElForm :model="formData" :rules="rules" class="form-panel" label-width="auto" ref="customerForm">
|
||||
<!-- <ElFormItem label="Id" prop="id">
|
||||
<ElInput
|
||||
v-model="formData.id"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="用户" prop="userId">
|
||||
<ElInput
|
||||
v-model="formData.userId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="用户"/>
|
||||
</ElFormItem> -->
|
||||
<ElFormItem label="身份类型" prop="identityCategory">
|
||||
<el-select v-model="formData.identityCategory" :disabled="status === 'view'" placeholder="身份类型" >
|
||||
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="客户姓名" prop="customerName">
|
||||
<ElInput v-model="formData.customerName" :disabled="status === 'view'" placeholder="客户姓名" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="客户联系电话" prop="phone">
|
||||
<ElInput v-model="formData.phone" :disabled="status === 'view'" placeholder="客户联系电话" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label="结算方式" prop="settlementWay">
|
||||
<el-select v-model="formData.settlementWay" :disabled="status === 'view'" placeholder="结算方式" style="width: 240px">
|
||||
<el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</ElFormItem>
|
||||
<!-- <ElFormItem label="是否管理员" prop="manager">
|
||||
<ElInput
|
||||
v-model="formData.manager"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="是否管理员"/>
|
||||
</ElFormItem> -->
|
||||
</ElForm>
|
||||
<template #footer>
|
||||
<ElButton @click="showDialog = false">{{ status === "view" ? "关闭" : "取消" }}</ElButton>
|
||||
<ElButton v-if="status !== 'view'" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import CustomerApi from "@/pages/cst/customer/customer-api.ts";
|
||||
import Strings from "@/common/utils/strings.ts";
|
||||
import FormUtil from "@/common/utils/formUtil.ts";
|
||||
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
|
||||
|
||||
const emits = defineEmits(["editSucc"]);
|
||||
const showDialog = ref(false);
|
||||
const submiting = ref(false);
|
||||
const status = ref<"add" | "view" | "modify">("add");
|
||||
|
||||
const customerFormIns = useTemplateRef<FormInstance>("customerForm");
|
||||
|
||||
const formData = ref<CustomerTypes.SearchCustomerResult>({});
|
||||
const rules = reactive<FormRules<CustomerTypes.SearchCustomerResult>>({
|
||||
id: [{ required: true, message: "请填写Id", trigger: "blur" }],
|
||||
userId: [{ required: true, message: "请填写用户", trigger: "blur" }],
|
||||
identityCategory: [{ required: true, message: "请填写身份类型", trigger: "blur" }],
|
||||
orgId: [{ required: true, message: "请填写组织信息", trigger: "blur" }],
|
||||
customerName: [{ required: true, message: "请填写客户姓名", trigger: "blur" }],
|
||||
phone: [{ required: true, message: "请填写客户联系电话", trigger: "blur" }],
|
||||
settlementWay: [{ required: true, message: "请填写结算方式", trigger: "blur" }],
|
||||
manager: [{ required: true, message: "请填写是否管理员", trigger: "blur" }],
|
||||
creatorId: [{ required: true, message: "请填写创建人", trigger: "blur" }],
|
||||
modifierId: [{ required: true, message: "请填写修改人", trigger: "blur" }],
|
||||
createTime: [{ required: true, message: "请填写创建时间", trigger: "blur" }],
|
||||
modifyTime: [{ required: true, message: "请填写修改时间", trigger: "blur" }],
|
||||
deleted: [{ required: true, message: "请填写是否删除", trigger: "blur" }],
|
||||
});
|
||||
|
||||
const payList = [
|
||||
{
|
||||
value: "YueJie",
|
||||
label: "月结",
|
||||
},
|
||||
{
|
||||
value: "YuE",
|
||||
label: "余额",
|
||||
},
|
||||
{
|
||||
value: "XianFu",
|
||||
label: "现付",
|
||||
},
|
||||
];
|
||||
|
||||
const bizList = [
|
||||
{
|
||||
value: "ChanFei",
|
||||
label: "产废方",
|
||||
},
|
||||
{
|
||||
value: "YunShu",
|
||||
label: "运输方",
|
||||
},
|
||||
{
|
||||
value: "XiaoNa",
|
||||
label: "消纳方",
|
||||
},
|
||||
{
|
||||
value: "CaiGou",
|
||||
label: "采购方",
|
||||
},
|
||||
{
|
||||
value: "SiJi",
|
||||
label: "司机",
|
||||
}
|
||||
]
|
||||
|
||||
function dialogCloseHandler() {
|
||||
formData.value = {};
|
||||
}
|
||||
|
||||
function submitHandler() {
|
||||
if (status.value === "view") return;
|
||||
submiting.value = true;
|
||||
console.log(customerFormIns.value!.validate(), "customerFormIns");
|
||||
if (formData.value.id != null) {
|
||||
FormUtil.submit(customerFormIns, () => CustomerApi.modify(formData.value))
|
||||
.then(() => {
|
||||
ElMessage.success("修改成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
} else {
|
||||
FormUtil.submit(customerFormIns, () => CustomerApi.add(formData.value))
|
||||
.then(() => {
|
||||
ElMessage.success("添加成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
open(data: CustomerTypes.SearchCustomerResult = {}) {
|
||||
showDialog.value = true;
|
||||
if (!Strings.isBlank(data.id)) {
|
||||
status.value = "modify";
|
||||
CustomerApi.detail(data.id!).then((res) => {
|
||||
formData.value = res.data;
|
||||
console.log(formData.value);
|
||||
});
|
||||
} else {
|
||||
status.value = "add";
|
||||
formData.value = data;
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form-panel {
|
||||
padding 20px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import {
|
||||
get,
|
||||
post
|
||||
} from '@/common/utils/http-util.ts'
|
||||
|
||||
export default {
|
||||
paging(data: CustomerTypes.SearchCustomerParam) {
|
||||
return get<G.PageResult<CustomerTypes.SearchCustomerResult>>('/customer/paging', data)
|
||||
},
|
||||
detail(id: string) {
|
||||
return get<CustomerTypes.SearchCustomerResult>('/customer/detail', {id})
|
||||
},
|
||||
add(data: CustomerTypes.AddCustomerParam) {
|
||||
return post('/customer/add', data)
|
||||
},
|
||||
modify(data: CustomerTypes.ModifyCustomerParam) {
|
||||
return post('/customer/modify', data)
|
||||
},
|
||||
del(ids: string[]) {
|
||||
return post('/customer/del', ids)
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
export {}
|
||||
|
||||
declare global {
|
||||
namespace CustomerTypes {
|
||||
interface SearchCustomerParam extends G.PageParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 用户 Id；一个用户可以有多个身份
|
||||
userId?: string
|
||||
// 身份类型；多个身份多条数据，PingTai-->平台、ChanFei-->产废方、QingYun-->清运方、XiaoNa-->消纳方、CaiGou-->采购方
|
||||
identityCategory?: string
|
||||
// 组织信息 Id；cst_org.id
|
||||
orgId?: string
|
||||
// 客户姓名
|
||||
customerName?: string
|
||||
// 客户联系电话
|
||||
phone?: string
|
||||
// 结算方式，YueJie-->月结、YuE-->余额、XianFu-->现付
|
||||
settlementWay?: string
|
||||
// 是否管理员；是否为当前的组织管理员，0-->否、1-->是
|
||||
manager?: boolean
|
||||
// 创建人 Id；sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id；sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除；0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface SearchCustomerResult {
|
||||
// Id
|
||||
id?: string
|
||||
// 用户 Id；一个用户可以有多个身份
|
||||
userId?: string
|
||||
// 身份类型；多个身份多条数据，PingTai-->平台、ChanFei-->产废方、QingYun-->清运方、XiaoNa-->消纳方、CaiGou-->采购方
|
||||
identityCategory?: string
|
||||
// 组织信息 Id；cst_org.id
|
||||
orgId?: string
|
||||
// 客户姓名
|
||||
customerName?: string
|
||||
// 客户联系电话
|
||||
phone?: string
|
||||
// 结算方式，YueJie-->月结、YuE-->余额、XianFu-->现付
|
||||
settlementWay?: string
|
||||
// 是否管理员；是否为当前的组织管理员，0-->否、1-->是
|
||||
manager?: boolean
|
||||
// 创建人 Id；sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id；sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除；0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface AddCustomerParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 用户 Id；一个用户可以有多个身份
|
||||
userId?: string
|
||||
// 身份类型；多个身份多条数据，PingTai-->平台、ChanFei-->产废方、QingYun-->清运方、XiaoNa-->消纳方、CaiGou-->采购方
|
||||
identityCategory?: string
|
||||
// 组织信息 Id；cst_org.id
|
||||
orgId?: string
|
||||
// 客户姓名
|
||||
customerName?: string
|
||||
// 客户联系电话
|
||||
phone?: string
|
||||
// 结算方式，YueJie-->月结、YuE-->余额、XianFu-->现付
|
||||
settlementWay?: string
|
||||
// 是否管理员；是否为当前的组织管理员，0-->否、1-->是
|
||||
manager?: boolean
|
||||
// 创建人 Id；sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id；sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除；0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
|
||||
interface ModifyCustomerParam {
|
||||
// Id
|
||||
id?: string
|
||||
// 用户 Id；一个用户可以有多个身份
|
||||
userId?: string
|
||||
// 身份类型；多个身份多条数据，PingTai-->平台、ChanFei-->产废方、QingYun-->清运方、XiaoNa-->消纳方、CaiGou-->采购方
|
||||
identityCategory?: string
|
||||
// 组织信息 Id；cst_org.id
|
||||
orgId?: string
|
||||
// 客户姓名
|
||||
customerName?: string
|
||||
// 客户联系电话
|
||||
phone?: string
|
||||
// 结算方式，YueJie-->月结、YuE-->余额、XianFu-->现付
|
||||
settlementWay?: string
|
||||
// 是否管理员；是否为当前的组织管理员，0-->否、1-->是
|
||||
manager?: boolean
|
||||
// 创建人 Id；sys_user.id
|
||||
creatorId?: string
|
||||
// 修改人 Id；sys_user.id
|
||||
modifierId?: string
|
||||
// 创建时间
|
||||
createTime?: string
|
||||
// 修改时间
|
||||
modifyTime?: string
|
||||
// 是否删除；0-->未删除、1-->已删除
|
||||
deleted?: boolean
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default {
|
||||
component: () => import('@/pages/cst/customer/Customer.vue'),
|
||||
} as RouterTypes.RouteConfig
|
||||
Loading…
Reference in New Issue