客户管理
parent
42ef42f804
commit
fb8cd34f9b
|
|
@ -6,14 +6,37 @@
|
|||
:paging="paging">
|
||||
<template #searchFormItem="{searchForm}">
|
||||
<ElFormItem label="身份类型">
|
||||
<el-select v-model="searchForm.identityCategory" placeholder="身份类型">
|
||||
<el-option v-for="item in bizList" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
<ElSelect v-model="searchForm.identityCategory" placeholder="身份类型">
|
||||
<ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="结算方式">
|
||||
<el-select v-model="searchForm.settlementWay" placeholder="结算方式">
|
||||
<el-option v-for="item in payList" :key="item.value" :label="item.label" :value="item.value"/>
|
||||
</el-select>
|
||||
<ElSelect v-model="searchForm.settlementWay" placeholder="结算方式">
|
||||
<ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="账号">
|
||||
<ElInput v-model="searchForm.username" placeholder="账号"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="姓名">
|
||||
<ElInput v-model="searchForm.nickname" placeholder="姓名"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="企业名称">
|
||||
<ElInput v-model="searchForm.orgId" placeholder="企业名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="联系电话">
|
||||
<ElInput v-model="searchForm.phone" placeholder="联系电话"/>
|
||||
</ElFormItem>
|
||||
</template>
|
||||
<template #simpleSearchFormItem="{searchForm}">
|
||||
<ElFormItem>
|
||||
<ElInput v-model="searchForm.orgId" placeholder="企业名称"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElInput v-model="searchForm.nickname" placeholder="姓名"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElInput v-model="searchForm.phone" placeholder="联系电话"/>
|
||||
</ElFormItem>
|
||||
</template>
|
||||
<template #columns>
|
||||
|
|
@ -29,9 +52,9 @@
|
|||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="联系电话" prop="phone"/>
|
||||
<ElTableColumn label="创建时间" prop="regdate"/>
|
||||
<ElTableColumn label="注册时间" prop="regdate"/>
|
||||
</template>
|
||||
<CustomerForm ref="customerForm" @edit-succ="research"/>
|
||||
<CustomerForm ref="customerForm" :research="research"/>
|
||||
</FormPage>
|
||||
</template>
|
||||
|
||||
|
|
@ -44,6 +67,10 @@ import type {
|
|||
ToolType,
|
||||
} from '@/components/page/a-page-type.ts'
|
||||
import type { ComponentExposed } from 'vue-component-type-helpers'
|
||||
import {
|
||||
identityCategory,
|
||||
settlementWay,
|
||||
} from '@/pages/cst/customer/constants.ts'
|
||||
|
||||
const payList = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,170 +1,103 @@
|
|||
<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-width="90" label="Id" prop="id">
|
||||
<ElInput
|
||||
v-model="formData.id"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="Id"/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label-width="90" label="用户" prop="userId">
|
||||
<ElInput
|
||||
v-model="formData.userId"
|
||||
:disabled="status === 'view'"
|
||||
placeholder="用户"/>
|
||||
</ElFormItem> -->
|
||||
<ElFormItem label-width="90" 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-width="90" label="客户姓名" prop="customerName">
|
||||
<ElInput v-model="formData.customerName" :disabled="status === 'view'" placeholder="客户姓名" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label-width="90" label="客户联系电话" prop="phone">
|
||||
<ElInput v-model="formData.phone" :disabled="status === 'view'" placeholder="客户联系电话" />
|
||||
</ElFormItem>
|
||||
<ElFormItem label-width="90" 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-width="90" 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>
|
||||
<AFormPanel
|
||||
ref="formPanel"
|
||||
:details-loader="detailsLoader"
|
||||
:do-submit="doSubmit"
|
||||
:rules="rules"
|
||||
:title="status === 'add' ? '新建客户' : '修改客户'">
|
||||
<template #default="{formData}">
|
||||
<div class="form-items">
|
||||
<ElFormItem label="身份类型" prop="identityCategory">
|
||||
<ElSelect v-model="formData.identityCategory" :disabled="status === 'view'" placeholder="身份类型">
|
||||
<ElOption v-for="item in identityCategory" :key="item.val" :label="item.txt" :value="item.val"/>
|
||||
</ElSelect>
|
||||
</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">
|
||||
<ElSelect v-model="formData.settlementWay" :disabled="status === 'view'" placeholder="结算方式">
|
||||
<ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
</div>
|
||||
</template>
|
||||
</ElDialog>
|
||||
</AFormPanel>
|
||||
</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 { type FormRules } from 'element-plus'
|
||||
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
|
||||
import {
|
||||
ElMessage,
|
||||
type FormInstance,
|
||||
type FormRules,
|
||||
} from 'element-plus'
|
||||
identityCategory,
|
||||
settlementWay,
|
||||
} from '@/pages/cst/customer/constants.ts'
|
||||
|
||||
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 props = withDefaults(defineProps<{
|
||||
research?: () => void
|
||||
}>(), {
|
||||
research: () => {
|
||||
},
|
||||
})
|
||||
const formPanelIns = useTemplateRef<InstanceType<typeof AFormPanel>>('formPanel')
|
||||
const status = ref<'add' | 'view' | 'modify'>('add')
|
||||
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" }],
|
||||
});
|
||||
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;
|
||||
});
|
||||
function detailsLoader(id?: string) {
|
||||
if (Strings.isBlank(id)) {
|
||||
status.value = 'add'
|
||||
return Promise.resolve()
|
||||
} else {
|
||||
FormUtil.submit(customerFormIns, () => CustomerApi.add(formData.value))
|
||||
.then(() => {
|
||||
ElMessage.success("添加成功");
|
||||
emits("editSucc");
|
||||
showDialog.value = false;
|
||||
})
|
||||
.finally(() => {
|
||||
submiting.value = false;
|
||||
});
|
||||
|
||||
status.value = 'modify'
|
||||
return CustomerApi
|
||||
.detail(id!)
|
||||
.then(res => res.data)
|
||||
}
|
||||
}
|
||||
|
||||
function doSubmit(data: CustomerTypes.SearchCustomerResult) {
|
||||
if (status.value === 'add') {
|
||||
return CustomerApi.add(data)
|
||||
.then(props.research)
|
||||
} else if (status.value === 'modify') {
|
||||
return CustomerApi.modify(data)
|
||||
.then(props.research)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
open(data?: CustomerTypes.SearchCustomerResult) {
|
||||
formPanelIns.value?.open(data?.id)
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.form-panel {
|
||||
padding 20px
|
||||
.form-items {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
import { createEnum } from '@/common/utils/enums.ts'
|
||||
|
||||
const settlementWayList = [
|
||||
{
|
||||
val: 'YueJie',
|
||||
txt: '月结',
|
||||
},
|
||||
{
|
||||
val: 'YuE',
|
||||
txt: '余额',
|
||||
},
|
||||
{
|
||||
val: 'XianFu',
|
||||
txt: '现付',
|
||||
},
|
||||
] as const
|
||||
|
||||
const identityCategoryList = [
|
||||
{
|
||||
val: 'ChanFei',
|
||||
txt: '产废方',
|
||||
},
|
||||
{
|
||||
val: 'YunShu',
|
||||
txt: '运输方',
|
||||
},
|
||||
{
|
||||
val: 'XiaoNa',
|
||||
txt: '消纳方',
|
||||
},
|
||||
{
|
||||
val: 'CaiGou',
|
||||
txt: '采购方',
|
||||
},
|
||||
{
|
||||
val: 'SiJi',
|
||||
txt: '司机',
|
||||
},
|
||||
] as const
|
||||
|
||||
export const settlementWay = createEnum(settlementWayList)
|
||||
export const identityCategory = createEnum(identityCategoryList)
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import { createEnum } from '@/common/utils/enums.ts'
|
||||
|
||||
const enums = [
|
||||
const bizTypeList = [
|
||||
{
|
||||
val: 'ZaiShengPin',
|
||||
txt: '再生品',
|
||||
|
|
@ -15,4 +15,4 @@ const enums = [
|
|||
},
|
||||
] as const
|
||||
|
||||
export const bizType = createEnum(enums)
|
||||
export const bizType = createEnum(bizTypeList)
|
||||
|
|
|
|||
Loading…
Reference in New Issue