diff --git a/apps/web-antd/src/views/doctor/doctor/components/modal.vue b/apps/web-antd/src/views/doctor/doctor/components/modal.vue index 63606f38..24a3205e 100644 --- a/apps/web-antd/src/views/doctor/doctor/components/modal.vue +++ b/apps/web-antd/src/views/doctor/doctor/components/modal.vue @@ -3,11 +3,12 @@ import { ref } from 'vue'; import { useVbenModal } from '@vben/common-ui'; -import { message } from 'ant-design-vue'; +import { message, Alert } from 'ant-design-vue'; import { useVbenForm } from '#/adapter/form'; -import { createDoctor, updateDoctor } from '../api'; -import { modalFormProps } from '../config/form'; + +import {createDoctor, updateDoctor} from '../api'; +import { infoModalFormProps } from '../config/form'; defineOptions({ name: 'FormModelDemo', @@ -16,7 +17,7 @@ defineOptions({ const isUpdate = ref(false); const gridApi = ref(); -const [Form, formApi] = useVbenForm(modalFormProps); +const [Form, formApi] = useVbenForm(infoModalFormProps); const [Modal, modalApi] = useVbenModal({ fullscreenButton: false, @@ -47,10 +48,47 @@ const [Modal, modalApi] = useVbenModal({ gridApi.value = isOpen ? modalApi.getData()?.gridApi : null; if (isOpen) { const { values, update } = modalApi.getData>(); + console.log(values, 'ssssssssssss'); if (values) { isUpdate.value = update; - formApi.setValues(values); + // getPharmacistEditInfoApi(values.id).then((res) => { + // formApi.setValues(res); + // }); + // formApi.setValues(values); + + const img = 'https://img2.baidu.com/it/u=3046024791,55863177&fm=253&fmt=auto&app=138&f=JPEG'; + formApi.setValues({ + name: '测试药师', + mobile: '15110000000', + idcard: '134111000022225555', + type: 1, + sign_type: 2, + qualification: img, + practicing: img, + title: img, + card_up: img, + card_down: img, + sign_image: 'http://demo-1.nailaoyun.cn/p/image/qm1.png', + avatar: img, + }); + } else { + const img = 'https://img2.baidu.com/it/u=3046024791,55863177&fm=253&fmt=auto&app=138&f=JPEG'; + formApi.setValues({ + name: '测试药师', + mobile: '15110000000', + idcard: '134111000022225555', + type: 1, + sign_type: 2, + qualification: img, + practicing: img, + title: img, + card_up: img, + card_down: img, + sign_image: 'http://demo-1.nailaoyun.cn/p/image/qm1.png', + avatar: img, + }); } + } }, }); @@ -60,6 +98,11 @@ const [Modal, modalApi] = useVbenModal({ :title="`${isUpdate === true ? '编辑' : '新增'}医生`" class="w-[60%]" > + + + + +
diff --git a/apps/web-antd/src/views/doctor/doctor/config/form.ts b/apps/web-antd/src/views/doctor/doctor/config/form.ts index 3d689fd7..09d82d19 100644 --- a/apps/web-antd/src/views/doctor/doctor/config/form.ts +++ b/apps/web-antd/src/views/doctor/doctor/config/form.ts @@ -1,6 +1,7 @@ import type { VbenFormProps } from '#/adapter/form'; import {getStoreOption} from "#/views/system/store/api"; +import {getPharmacistTitleOptionApi} from "#/views/doctor/pharmacist/api"; export const modalFormProps: VbenFormProps = { wrapperClass: 'grid-cols-12', // 24栅格, @@ -52,3 +53,285 @@ export const modalFormProps: VbenFormProps = { ], showDefaultActions: false, }; + +export const infoModalFormProps: VbenFormProps = { + wrapperClass: 'grid-cols-12', // 24栅格, + commonConfig: { + formItemClass: 'col-span-12', + // 所有表单项 + componentProps: { + class: 'w-full', + }, + }, + // handleSubmit: onSubmit, + layout: 'horizontal', + schema: [ + { + component: 'VbenInput', + fieldName: 'id', + label: 'ID', + formItemClass: 'col-span-6', + dependencies: { + show: false, + triggerFields: ['id'], + }, + }, + { + component: 'VbenInput', + fieldName: 'su_id', + label: 'WxID', + formItemClass: 'col-span-6', + dependencies: { + show: false, + triggerFields: ['id'], + }, + }, + { + fieldName: 'otherinfo', + label: '基础信息', + component: 'Divider', + formItemClass: 'col-span-12', + componentProps: {}, + hideLabel: true, + renderComponentContent: () => { + return { + default: () => { + return '基础信息'; + }, + }; + }, + }, + { + component: 'Avatar', + componentProps: { + placeholder: '请上传医生头像', + }, + fieldName: 'avatar', + formItemClass: 'col-span-12', + label: '医生头像', + rules: 'required', + }, + { + component: 'ApiSelect', + componentProps: { + allowClear: true, + filterOption: (input: string, option: any) => { + // 自定义过滤逻辑,确保可以根据 name 进行搜索 + return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; + }, + showSearch: true, + // 菜单接口转options格式 + afterFetch: (data: { id: number; name: string }[]) => { + return data.map((item: any) => ({ + label: item.name, + value: item.id, + })); + }, + api: getStoreOption, + placeholder: '请选择诊所', + model: 'multiple', + }, + dependencies: { + show: false, + triggerFields: ['id'], + }, + fieldName: 'store_id', + formItemClass: 'col-span-6', + label: '诊所', + rules: 'required', + }, + { + component: 'ApiSelect', + componentProps: { + allowClear: true, + filterOption: (input: string, option: any) => { + // 自定义过滤逻辑,确保可以根据 name 进行搜索 + return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; + }, + showSearch: true, + // 菜单接口转options格式 + afterFetch: (data: { id: number; name: string }[]) => { + return data.map((item: any) => ({ + label: item.name, + value: item.id, + })); + }, + api: getPharmacistTitleOptionApi, + placeholder: '请选择职称', + }, + fieldName: 'title_id', + formItemClass: 'col-span-6', + label: '职称', + rules: 'required', + }, + { + component: 'VbenInput', + componentProps: { + placeholder: '请填写医生名称', + }, + fieldName: 'name', + formItemClass: 'col-span-6', + label: '医生名称', + rules: 'required', + }, + { + component: 'VbenInput', + componentProps: { + placeholder: '请填写手机号码', + }, + fieldName: 'mobile', + formItemClass: 'col-span-6', + label: '手机号码', + rules: 'required', + }, + { + component: 'VbenInput', + componentProps: { + placeholder: '请填写身份证', + }, + dependencies: { + show: false, + triggerFields: ['id'], + }, + fieldName: 'idcard', + formItemClass: 'col-span-6', + label: '身份证', + rules: 'required', + }, + { + component: 'VbenSelect', + componentProps: { + placeholder: '请填选择身份', + options: [ + { + label: '中医医生', + value: 1, + }, + { + label: '西医医生', + value: 2, + }, + ], + }, + fieldName: 'type', + formItemClass: 'col-span-6', + label: '身份', + rules: 'required', + }, + { + component: 'VbenSelect', + componentProps: { + placeholder: '请填选择签名类型', + options: [ + { + label: '电子签名', + value: 1, + }, + { + label: '手写签名', + value: 2, + }, + ], + }, + dependencies: { + show: false, + triggerFields: ['id'], + }, + fieldName: 'sign_type', + formItemClass: 'col-span-6', + label: '签名类型', + rules: 'required', + }, + { + fieldName: 'otherinfo', + label: '执业&身份信息', + component: 'Divider', + formItemClass: 'col-span-12', + componentProps: {}, + hideLabel: true, + renderComponentContent: () => { + return { + default: () => { + return '执业&身份信息'; + }, + }; + }, + }, + { + component: 'Avatar', + componentProps: { + placeholder: '请上传资格证书', + }, + fieldName: 'qualification', + formItemClass: 'col-span-6', + label: '资格证书', + rules: 'required', + }, + { + component: 'Avatar', + componentProps: { + placeholder: '请上传执业证书', + }, + fieldName: 'practicing', + formItemClass: 'col-span-6', + label: '执业证书', + rules: 'required', + }, + { + component: 'Avatar', + componentProps: { + placeholder: '请上传职称证书', + }, + fieldName: 'title', + formItemClass: 'col-span-6', + label: '职称证书', + rules: 'required', + }, + // { + // fieldName: 'otherinfo', + // label: '身份信息', + // component: 'Divider', + // formItemClass: 'col-span-12', + // componentProps: {}, + // hideLabel: true, + // renderComponentContent: () => { + // return { + // default: () => { + // return '身份信息'; + // }, + // }; + // }, + // }, + { + component: 'Avatar', + componentProps: { + placeholder: '请上传身份证正面', + }, + fieldName: 'card_up', + formItemClass: 'col-span-6', + label: '身份证正面', + rules: 'required', + }, + { + component: 'Avatar', + componentProps: { + placeholder: '请上传身份证反面', + }, + fieldName: 'card_down', + formItemClass: 'col-span-6', + label: '身份证反面', + rules: 'required', + }, + { + component: 'Avatar', + componentProps: { + placeholder: '请上传签名图片', + }, + fieldName: 'sign_image', + formItemClass: 'col-span-6', + label: '签名图片', + rules: 'required', + }, + ], + showDefaultActions: false, +}; diff --git a/apps/web-antd/src/views/doctor/doctor/index.vue b/apps/web-antd/src/views/doctor/doctor/index.vue index a8fe8b7e..ca7fcf8f 100644 --- a/apps/web-antd/src/views/doctor/doctor/index.vue +++ b/apps/web-antd/src/views/doctor/doctor/index.vue @@ -94,13 +94,13 @@ const refuse = (id: number) => {