|
|
@@ -0,0 +1,210 @@
|
|
|
+<script lang="ts" setup>
|
|
|
+import type { WorkerEntity } from '@vben/types';
|
|
|
+
|
|
|
+import { computed, ref } from 'vue';
|
|
|
+
|
|
|
+import { useVbenModal } from '@vben/common-ui';
|
|
|
+
|
|
|
+import { ElMessage } from 'element-plus';
|
|
|
+
|
|
|
+import { useVbenForm, z } from '#/adapter/form';
|
|
|
+import { addWorkerApi, editWorkerApi, getWorkerDetailApi } from '#/api/worker';
|
|
|
+
|
|
|
+const emit = defineEmits(['finish']);
|
|
|
+const data = ref();
|
|
|
+const formType = ref<'create' | 'detail' | 'edit'>('create');
|
|
|
+
|
|
|
+const titleMap = {
|
|
|
+ create: '新增职员',
|
|
|
+ detail: '职员详情',
|
|
|
+ edit: '编辑职员',
|
|
|
+} as const;
|
|
|
+
|
|
|
+const getTitle = computed(() => titleMap[formType.value]);
|
|
|
+
|
|
|
+const [BaseForm, baseFormApi] = useVbenForm({
|
|
|
+ showDefaultActions: false,
|
|
|
+ // 所有表单项共用,可单独在表单内覆盖
|
|
|
+ commonConfig: {
|
|
|
+ labelWidth: 130,
|
|
|
+ // 所有表单项
|
|
|
+ componentProps: {
|
|
|
+ class: 'w-full',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ wrapperClass: 'grid-cols-1 lg:grid-cols-2',
|
|
|
+ schema: [
|
|
|
+ // { title: '姓名', field: 'worker_xm' },
|
|
|
+ // { title: '工号', field: 'worker_gh' },
|
|
|
+ // { title: '类别', field: 'worker_lb' },
|
|
|
+ // { title: '状态', field: 'worker_zt' },
|
|
|
+ // { title: '所属部门', field: 'worker_ssbm' },
|
|
|
+ // { title: '二级部门', field: 'worker_ssbm2' },
|
|
|
+ // { title: '岗位', field: 'worker_gw' },
|
|
|
+ // { title: '联系地址', field: 'worker_lxdz' },
|
|
|
+ // { title: '联系电话', field: 'worker_dh' },
|
|
|
+ // { title: '邮箱', field: 'worker_email' },
|
|
|
+ // { title: '紧急联系人', field: 'worker_jjlxr' },
|
|
|
+ // { title: '紧急联系电话', field: 'worker_jjlxdh' },
|
|
|
+ // { title: '创建时间', field: 'worker_createdate' },
|
|
|
+ // { title: '创建者', field: 'worker_create' },
|
|
|
+ // { title: '是否绑定微信', field: 'worker_iswxbind' },
|
|
|
+
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_xm',
|
|
|
+ label: '姓名',
|
|
|
+ rules: z.string().min(1, '请输入姓名'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_gh',
|
|
|
+ label: '工号',
|
|
|
+ rules: z.string().min(1, '请输入工号'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Select',
|
|
|
+ fieldName: 'worker_lb',
|
|
|
+ label: '类别',
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ { label: '合同工', value: '合同工' },
|
|
|
+ { label: '实习工', value: '实习工' },
|
|
|
+ { label: '临时工', value: '临时工' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ rules: z.string().min(1, '请选择类别'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Select',
|
|
|
+ fieldName: 'worker_zt',
|
|
|
+ label: '状态',
|
|
|
+ componentProps: {
|
|
|
+ options: [
|
|
|
+ { label: '在职', value: '在职' },
|
|
|
+ { label: '离职', value: '离职' },
|
|
|
+ { label: '退假', value: '退假' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ rules: z.string().min(1, '请选择状态'),
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // component: 'Input',
|
|
|
+ // fieldName: 'worker_ssbm',
|
|
|
+ // label: '所属部门',
|
|
|
+ // rules: z.string().min(1, '请输入所属部门'),
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // component: 'Input',
|
|
|
+ // fieldName: 'worker_ssbm2',
|
|
|
+ // label: '二级部门',
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_gw',
|
|
|
+ label: '岗位',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_lxdz',
|
|
|
+ label: '联系地址',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_dh',
|
|
|
+ label: '联系电话',
|
|
|
+ rules: z.string().min(1, '请输入联系电话'),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_email',
|
|
|
+ label: '邮箱',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_jjlxr',
|
|
|
+ label: '紧急联系人',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_jjlxdh',
|
|
|
+ label: '紧急联系电话',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ component: 'Input',
|
|
|
+ fieldName: 'worker_userid',
|
|
|
+ label: '关联渠道id',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+const [Modal, modalApi] = useVbenModal({
|
|
|
+ class: 'w-7/12',
|
|
|
+ onCancel() {
|
|
|
+ modalApi.close();
|
|
|
+ },
|
|
|
+ async onConfirm() {
|
|
|
+ // 校验输入的数据
|
|
|
+ const formValues = await baseFormApi.getValues();
|
|
|
+ const validate = await baseFormApi.validate();
|
|
|
+ if (!validate.valid) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ const apiMap = {
|
|
|
+ create: () => addWorkerApi(formValues as unknown as WorkerEntity),
|
|
|
+ edit: () =>
|
|
|
+ editWorkerApi({
|
|
|
+ ...formValues,
|
|
|
+ 'worker_id.value': data.value.row.worker_id,
|
|
|
+ } as unknown as WorkerEntity),
|
|
|
+ };
|
|
|
+
|
|
|
+ if (formType.value === 'detail') {
|
|
|
+ modalApi.close();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ await apiMap[formType.value]();
|
|
|
+ ElMessage.success('操作成功');
|
|
|
+ emit('finish');
|
|
|
+ modalApi.close();
|
|
|
+ } catch {}
|
|
|
+ },
|
|
|
+ async onOpenChange(isOpen) {
|
|
|
+ if (isOpen) {
|
|
|
+ data.value = modalApi.getData();
|
|
|
+
|
|
|
+ formType.value = data.value.formType;
|
|
|
+
|
|
|
+ baseFormApi.setState({
|
|
|
+ commonConfig: { disabled: formType.value === 'detail' },
|
|
|
+ });
|
|
|
+
|
|
|
+ if (data.value.formType === 'create') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ modalApi.setState({ loading: true });
|
|
|
+ const detailData = await getWorkerDetailApi({
|
|
|
+ worker_id: data.value.row.worker_id,
|
|
|
+ });
|
|
|
+
|
|
|
+ baseFormApi.setValues(detailData);
|
|
|
+ } catch {
|
|
|
+ // console.log(error);
|
|
|
+ }
|
|
|
+
|
|
|
+ modalApi.setState({ loading: false });
|
|
|
+ }
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <Modal :title="getTitle">
|
|
|
+ <BaseForm />
|
|
|
+ </Modal>
|
|
|
+</template>
|