| | |
| | | <template> |
| | | <div></div> |
| | | <LoadingLayout :loading="isEdit && isLoading"> |
| | | <AppScrollContainer> |
| | | <ChunkCell title="企业基本信息"> |
| | | <ProForm :model="form" ref="formRef" label-width="140px" :is-read="isDetail"> |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="企业名称:" |
| | | prop="enterpriseName" |
| | | :check-rules="[{ message: '请输入企业名称' }]" |
| | | > |
| | | <ProFormText |
| | | v-model.trim="form.enterpriseName" |
| | | :maxlength="30" |
| | | placeholder="请输入企业名称" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="法人姓名:" prop="legalPerson"> |
| | | <ProFormText |
| | | v-model.trim="form.legalPerson" |
| | | :maxlength="30" |
| | | placeholder="请输入法人姓名" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="法人身份证号:" prop="legalIdentity"> |
| | | <ProFormText |
| | | v-model.trim="form.legalIdentity" |
| | | :maxlength="30" |
| | | placeholder="请输入法人身份证号" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="统一社会信用代码:" |
| | | prop="societyCreditCode" |
| | | :check-rules="[{ message: '请输入统一社会信用代码', type: 'societyCreditCode' }]" |
| | | > |
| | | <ProFormText |
| | | v-model.trim="form.societyCreditCode" |
| | | placeholder="请输入统一社会信用代码" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="注册资本:" prop="registeredCapital"> |
| | | <ProFormText v-model.trim="form.registeredCapital" placeholder="请输入注册资本" /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="企业类型:" prop="enterpriseType"> |
| | | <ProFormText v-model.trim="form.enterpriseType" placeholder="请输入企业类型" /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="成立日期:" prop="establishmentDate"> |
| | | <ProFormDatePicker |
| | | v-model="form.establishmentDate" |
| | | type="date" |
| | | placeholder="请选择成立日期" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="所在地区:" prop="areaList"> |
| | | <ProFromAddressSelectV2 |
| | | v-model:areaList="form.areaList" |
| | | areaListPlaceholder="请选择所在地区" |
| | | :layer="AreaType.City" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="详细地址:" prop="address"> |
| | | <ProFormText v-model.trim="form.address" placeholder="请输入详细地址" /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormItemV2 label="经营范围:" prop="mainBusiness"> |
| | | <ProFormTextArea |
| | | v-model="form.mainBusiness" |
| | | maxlength="200" |
| | | :rows="6" |
| | | show-word-limit |
| | | placeholder="请输入经营范围" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProForm> |
| | | </ChunkCell> |
| | | <ChunkCell title="合作信息"> |
| | | <ProForm |
| | | :model="form" |
| | | ref="settingFormRef" |
| | | label-width="140px" |
| | | :scroll-to-error="false" |
| | | :is-read="isDetail" |
| | | > |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="联系人:" |
| | | prop="contacts" |
| | | :check-rules="[{ message: '请输入联系人' }]" |
| | | > |
| | | <ProFormText |
| | | v-model.trim="form.contacts" |
| | | :maxlength="30" |
| | | placeholder="请输入联系人" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="联系电话:" |
| | | prop="contactPhoneNumber" |
| | | :check-rules="[{ message: '请输入联系电话', type: 'phone' }]" |
| | | > |
| | | <ProFormText v-model.trim="form.contactPhoneNumber" placeholder="请输入联系电话" /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="联系邮箱:" prop="contactEmail"> |
| | | <ProFormText |
| | | v-model.trim="form.contactEmail" |
| | | :maxlength="30" |
| | | placeholder="请输入联系邮箱" |
| | | :formatter="filterCN" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="合作状态:" prop="cooperationStatus"> |
| | | <ProFormRadio |
| | | v-model="form.cooperationStatus" |
| | | :value-enum="EnumEnterpriseCooperationStatusText" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="签约状态:" prop="signStatus"> |
| | | <ProFormRadio |
| | | v-model="form.signStatus" |
| | | :value-enum="EnumEnterpriseCooperationSignStatusText" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="合作协议:" prop="cooperationAgreementUrl"> |
| | | <ProFormUpload |
| | | v-model:file-url="form.cooperationAgreementUrl" |
| | | :limit="1" |
| | | :limitFileSize="10" |
| | | accept="jpg/jpeg,png,pdf" |
| | | ></ProFormUpload> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="服务费收取方式:" prop="serviceFeeCollectType"> |
| | | <ProFormSelect |
| | | v-model="form.serviceFeeCollectType" |
| | | :valueEnum="EnumEnterpriseCooperationServiceFeeCollectTypeText" |
| | | placeholder="请选择服务费收取方式" |
| | | > |
| | | </ProFormSelect> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="服务费:" |
| | | prop="serviceFeeRate" |
| | | :check-rules=" |
| | | form.serviceFeeCollectType ? [{ message: '请输入服务费' }] : undefined |
| | | " |
| | | :required="!!form.serviceFeeCollectType" |
| | | > |
| | | <ProFormInputNumber |
| | | v-model="form.serviceFeeRate" |
| | | :controls="false" |
| | | :min="0" |
| | | :precision="2" |
| | | placeholder="请输入" |
| | | :unit="serviceFeeCollectTypeUnit" |
| | | :showReadContent="!!form.serviceFeeRate" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 label="发票税点:" prop="invoiceTaxPointRate"> |
| | | <ProFormInputNumber |
| | | v-model="form.invoiceTaxPointRate" |
| | | :controls="false" |
| | | :min="0" |
| | | :precision="2" |
| | | placeholder="请输入" |
| | | unit="%" |
| | | :showReadContent="!!form.invoiceTaxPointRate" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | </ProForm> |
| | | </ChunkCell> |
| | | <ChunkCell title="账号信息"> |
| | | <ProForm |
| | | :model="form" |
| | | ref="accountFormRef" |
| | | label-width="140px" |
| | | :scroll-to-error="false" |
| | | :is-read="isDetail" |
| | | > |
| | | <ProFormCol> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="账号:" |
| | | prop="userName" |
| | | :check-rules="[{ message: '请输入账号' }]" |
| | | > |
| | | <ProFormText |
| | | v-model.trim="form.userName" |
| | | :maxlength="30" |
| | | placeholder="请输入账号" |
| | | /> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol v-if="!isDetail"> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="密码:" |
| | | prop="password" |
| | | :check-rules="[{ required: !isEdit, message: '请输入密码' }]" |
| | | > |
| | | <div class="password-input"> |
| | | <ProFormText |
| | | v-if="!isEdit" |
| | | v-model.trim="form.password" |
| | | :maxlength="30" |
| | | placeholder="请输入密码" |
| | | /> |
| | | <el-button v-else type="primary" link @click="openResetPasswordDialog" |
| | | >修改密码</el-button |
| | | > |
| | | </div> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <ProFormCol v-if="!isDetail"> |
| | | <ProFormColItem :span="8"> |
| | | <ProFormItemV2 |
| | | label="操作密码:" |
| | | prop="operatorPassword" |
| | | :check-rules="[ |
| | | { |
| | | required: false, |
| | | message: '请输入6位数字', |
| | | pattern: /\b\d{6}\b/, |
| | | }, |
| | | ]" |
| | | > |
| | | <div class="password-input"> |
| | | <ProFormText |
| | | v-if="!isEdit" |
| | | v-model.trim="form.operatorPassword" |
| | | :maxlength="6" |
| | | placeholder="请输入操作密码(6位数字)" |
| | | /> |
| | | <el-button type="primary" v-else link @click="openResetOperatorPasswordDialog" |
| | | >修改密码</el-button |
| | | > |
| | | </div> |
| | | </ProFormItemV2> |
| | | </ProFormColItem> |
| | | </ProFormCol> |
| | | <div class="chuck-add-or-edit-actions"> |
| | | <el-button @click="handleBack">返回</el-button> |
| | | <el-button v-if="!isDetail" type="primary" @click="handleSubmit">确认</el-button> |
| | | </div> |
| | | </ProForm> |
| | | </ChunkCell> |
| | | </AppScrollContainer> |
| | | <ResetPasswordDialog v-bind="resetPasswordDialogProps"></ResetPasswordDialog> |
| | | <ResetOperatorPasswordDialog |
| | | v-bind="resetOperatorPasswordDialogProps" |
| | | ></ResetOperatorPasswordDialog> |
| | | </LoadingLayout> |
| | | </template> |
| | | |
| | | <script setup lang="ts"> |
| | | import { Message, BoleRegExp } from '@bole-core/core'; |
| | | import { useQuery } from '@tanstack/vue-query'; |
| | | import { |
| | | LoadingLayout, |
| | | AppScrollContainer, |
| | |
| | | ProFormItemV2, |
| | | ChunkCell, |
| | | ProFormText, |
| | | ProFormSelect, |
| | | ProFormUpload, |
| | | ProFormTextArea, |
| | | ProFormCol, |
| | | ProFormColItem, |
| | | ProFormDatePicker, |
| | | ProFormRadio, |
| | | UploadUserFile, |
| | | useFormDialog, |
| | | ProFormSelect, |
| | | ProFormInputNumber, |
| | | } from '@bole-core/components'; |
| | | import { FormRules, FormInstance } from 'element-plus'; |
| | | import { FormInstance } from 'element-plus'; |
| | | import * as enterpriseServices from '@/services/api/enterprise'; |
| | | import * as userServices from '@/services/api/user'; |
| | | import { useRouteView, useGlobalEventContext } from '@/hooks'; |
| | | import _ from 'lodash'; |
| | | import { |
| | | EnumEnterpriseCooperationStatusText, |
| | | EnumEnterpriseCooperationSignStatusText, |
| | | EnumEnterpriseCooperationServiceFeeCollectTypeText, |
| | | EnumEnterpriseCooperationServiceFeeCollectType, |
| | | } from '@/constants'; |
| | | import { |
| | | validateFormList, |
| | | filterCN, |
| | | removeEmptyKeys, |
| | | format, |
| | | convertApi2FormUrlOnlyOne, |
| | | } from '@/utils'; |
| | | import { Message } from '@bole-core/core'; |
| | | import { useQuery } from '@tanstack/vue-query'; |
| | | import { AreaType } from '@/constants'; |
| | | import ResetPasswordDialog from './ResetPasswordDialog.vue'; |
| | | import ResetOperatorPasswordDialog from './ResetOperatorPasswordDialog.vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'AddOrEditCustomerView', |
| | | }) |
| | | }); |
| | | |
| | | type Props = { |
| | | isDetail: boolean; |
| | | } |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | |
| | | }) |
| | | const props = withDefaults(defineProps<Props>(), {}); |
| | | |
| | | const route = useRoute(); |
| | | const id = route.params.id as string; |
| | | const isEdit = !!id; |
| | | const isEdit = !!id; |
| | | |
| | | const { closeViewPush } = useRouteView(); |
| | | const eventContext = useGlobalEventContext(); |
| | | |
| | | </script> |
| | | const form = reactive({ |
| | | id: '', |
| | | enterpriseName: '', |
| | | legalPerson: '', |
| | | legalIdentity: '', |
| | | societyCreditCode: '', |
| | | registeredCapital: '', |
| | | enterpriseType: '', |
| | | establishmentDate: '', |
| | | areaList: [] as string[], |
| | | address: '', |
| | | mainBusiness: '', |
| | | contacts: '', |
| | | contactPhoneNumber: '', |
| | | contactEmail: '', |
| | | cooperationStatus: EnumEnterpriseCooperationStatus.None, |
| | | signStatus: EnumEnterpriseCooperationSignStatus.None, |
| | | cooperationAgreementUrl: [] as UploadUserFile[], |
| | | userName: '', |
| | | password: '', |
| | | operatorPassword: '', |
| | | |
| | | userId: '', |
| | | |
| | | serviceFeeCollectType: '' as any as EnumEnterpriseCooperationServiceFeeCollectType, |
| | | serviceFeeRate: null as any as number, |
| | | invoiceTaxPointRate: null as any as number, |
| | | }); |
| | | |
| | | const { isLoading, refetch } = useQuery({ |
| | | queryKey: ['enterpriseServices/getPartyAEnterprise', id], |
| | | queryFn: async () => { |
| | | return await enterpriseServices.getPartyAEnterprise( |
| | | { id: id }, |
| | | { |
| | | showLoading: false, |
| | | } |
| | | ); |
| | | }, |
| | | onSuccess(data) { |
| | | form.id = data.id; |
| | | form.enterpriseName = data.enterpriseName; |
| | | form.legalPerson = data.legalPerson; |
| | | form.legalIdentity = data.legalIdentity; |
| | | form.societyCreditCode = data.societyCreditCode; |
| | | form.registeredCapital = data.registeredCapital; |
| | | form.enterpriseType = data.enterpriseType; |
| | | form.establishmentDate = data.establishmentDate; |
| | | form.areaList = [data.provinceCode, data.cityCode].filter(Boolean); |
| | | form.address = data.address; |
| | | form.mainBusiness = data.mainBusiness; |
| | | form.contacts = data.contacts; |
| | | form.contactPhoneNumber = data.contactPhoneNumber; |
| | | form.contactEmail = data.contactEmail; |
| | | form.cooperationStatus = data.cooperationStatus; |
| | | form.signStatus = data.signStatus; |
| | | form.cooperationAgreementUrl = convertApi2FormUrlOnlyOne(data.cooperationAgreementUrl); |
| | | form.userName = data.userName; |
| | | |
| | | form.userId = data.userId; |
| | | form.serviceFeeCollectType = data.serviceFeeCollectType; |
| | | form.serviceFeeRate = data.serviceFeeRate; |
| | | form.invoiceTaxPointRate = data.invoiceTaxPointRate; |
| | | }, |
| | | enabled: computed(() => !!id), |
| | | }); |
| | | |
| | | const serviceFeeCollectTypeUnit = computed(() => { |
| | | if (!form.serviceFeeCollectType) { |
| | | return ''; |
| | | } else { |
| | | return form.serviceFeeCollectType === EnumEnterpriseCooperationServiceFeeCollectType.Rate |
| | | ? '%' |
| | | : '元/人'; |
| | | } |
| | | }); |
| | | |
| | | const { |
| | | dialogProps: resetPasswordDialogProps, |
| | | handleAdd: handleResetPasswordAdd, |
| | | editForm: resetPasswordEditForm, |
| | | } = useFormDialog({ |
| | | onConfirm: resetPassword, |
| | | defaultFormParams: { |
| | | ids: '', |
| | | password: '', |
| | | }, |
| | | }); |
| | | |
| | | function openResetPasswordDialog() { |
| | | handleResetPasswordAdd({ |
| | | ids: form.userId, |
| | | password: '', |
| | | }); |
| | | } |
| | | |
| | | async function resetPassword() { |
| | | try { |
| | | let params: API.ResetUserPasswordsCommand = { |
| | | ids: [resetPasswordEditForm.ids], |
| | | password: resetPasswordEditForm.password, |
| | | }; |
| | | let res = await userServices.resetUserPasswords(params); |
| | | if (res) { |
| | | Message.successMessage('操作成功'); |
| | | refetch(); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | |
| | | const { |
| | | dialogProps: resetOperatorPasswordDialogProps, |
| | | handleAdd: handleResetOperatorPasswordAdd, |
| | | editForm: resetOperatorPasswordEditForm, |
| | | } = useFormDialog({ |
| | | onConfirm: resetOperatorPassword, |
| | | defaultFormParams: { |
| | | ids: '', |
| | | operatorPassword: '', |
| | | }, |
| | | }); |
| | | |
| | | function openResetOperatorPasswordDialog() { |
| | | handleResetOperatorPasswordAdd({ |
| | | ids: form.userId, |
| | | operatorPassword: '', |
| | | }); |
| | | } |
| | | |
| | | async function resetOperatorPassword() { |
| | | try { |
| | | let params: API.ResetUserOperatorPasswordsCommand = { |
| | | ids: [resetOperatorPasswordEditForm.ids], |
| | | operatorPassword: resetOperatorPasswordEditForm.operatorPassword, |
| | | }; |
| | | let res = await userServices.resetUserOperatorPasswords(params); |
| | | if (res) { |
| | | Message.successMessage('操作成功'); |
| | | refetch(); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | |
| | | const formRef = ref<FormInstance>(); |
| | | const settingFormRef = ref<FormInstance>(); |
| | | const accountFormRef = ref<FormInstance>(); |
| | | |
| | | async function handleSubmit() { |
| | | try { |
| | | const valid = await validateFormList([ |
| | | formRef.value, |
| | | settingFormRef.value, |
| | | accountFormRef.value, |
| | | ]); |
| | | if (valid) { |
| | | handleCreateOrEditFlexEnterprise(); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | |
| | | async function handleCreateOrEditFlexEnterprise() { |
| | | try { |
| | | let params: API.SavePartyAEnterpriseCommand = { |
| | | enterpriseName: form.enterpriseName, |
| | | legalPerson: form.legalPerson, |
| | | legalIdentity: form.legalIdentity, |
| | | societyCreditCode: form.societyCreditCode, |
| | | registeredCapital: form.registeredCapital, |
| | | enterpriseType: form.enterpriseType, |
| | | establishmentDate: format(form.establishmentDate, 'YYYY-MM-DD'), |
| | | provinceCode: form.areaList[0], |
| | | cityCode: form.areaList[1], |
| | | address: form.address, |
| | | mainBusiness: form.mainBusiness, |
| | | contacts: form.contacts, |
| | | contactPhoneNumber: form.contactPhoneNumber, |
| | | contactEmail: form.contactEmail, |
| | | cooperationStatus: form.cooperationStatus, |
| | | signStatus: form.signStatus, |
| | | cooperationAgreementUrl: form.cooperationAgreementUrl[0]?.path, |
| | | userName: form.userName, |
| | | password: form.password, |
| | | operatorPassword: form.operatorPassword, |
| | | serviceFeeCollectType: form.serviceFeeCollectType, |
| | | invoiceTaxPointRate: form.invoiceTaxPointRate, |
| | | serviceFeeRate: form.serviceFeeRate, |
| | | }; |
| | | if (isEdit) { |
| | | params.id = id; |
| | | } |
| | | let res = await enterpriseServices.savePartyAEnterprise(removeEmptyKeys(params)); |
| | | if (res) { |
| | | Message.successMessage(isEdit ? '编辑成功' : '发布成功'); |
| | | eventContext.emit(isEdit ? 'customerManage:edit' : 'customerManage:add'); |
| | | handleBack(); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | | |
| | | function handleBack() { |
| | | closeViewPush(route, { |
| | | name: 'CustomerManage', |
| | | }); |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | @use '@/style/common.scss' as *; |
| | | |
| | | .password-input { |
| | | display: flex; |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | </style> |
| | | |