105 lines
3.6 KiB
Vue
105 lines
3.6 KiB
Vue
<template>
|
|
<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" 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" placeholder="客户姓名"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="联系电话" prop="phone">
|
|
<ElInput v-model="formData.phone" placeholder="联系电话"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="结算方式" prop="settlementWay">
|
|
<ElSelect v-model="formData.settlementWay" placeholder="结算方式">
|
|
<ElOption v-for="item in settlementWay" :key="item.val" :label="item.txt" :value="item.val"/>
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
</div>
|
|
</template>
|
|
</AFormPanel>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import CustomerApi from '@/pages/cst/customer/customer-api.ts'
|
|
import Strings from '@/common/utils/strings.ts'
|
|
import { type FormRules } from 'element-plus'
|
|
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
|
|
import {
|
|
identityCategory,
|
|
settlementWay,
|
|
} from '@/pages/cst/customer/constants.ts'
|
|
import type { ComponentExposed } from 'vue-component-type-helpers'
|
|
|
|
|
|
const props = withDefaults(defineProps<{
|
|
research?: () => void
|
|
}>(), {
|
|
research: () => {
|
|
},
|
|
})
|
|
const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
|
|
const status = ref<'add' | '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'} ],
|
|
})
|
|
|
|
function detailsLoader(id?: string) {
|
|
if (Strings.isBlank(id)) {
|
|
status.value = 'add'
|
|
return Promise.resolve()
|
|
} else {
|
|
|
|
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 {
|
|
return CustomerApi.modify(data)
|
|
.then(props.research)
|
|
}
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
open(data?: CustomerTypes.SearchCustomerResult) {
|
|
formPanelIns.value?.open(data?.id)
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.form-items {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
</style>
|
|
|