new_huozhou_frontend/src/views/addressBook/address/Input.vue

<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter title="用户" width="30%" @ok="handleSave">
    <BasicForm @register="registerForm" />

    <!-- <template #appendFooter>
      <a-button-save @click="handleSaveAndAdd" text="保存并新增" />
    </template> -->
  </BasicDrawer>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import { BasicForm, useForm } from '@/components/Form';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import { add, save } from '@/api/auth/sysUser';
import { SysUser } from '@/api/auth/model/sysUserModel';
import { AButtonSave } from '@/components/Button';
import { checkPassword } from '@/utils/validator';
import { message } from 'ant-design-vue';
import { saveUser } from "./address.api"
export default defineComponent({
  name: 'SysUserInput',
  components: { AButtonSave, BasicForm, BasicDrawer },
  emits: ['success', 'register'],
  setup(_, { emit }) {
    const deptId = ref();

    const [
      registerForm,
      { resetFields, setFieldsValue, validate, updateSchema, getFieldsValue },
    ] = useForm({
      schemas: [
        { field: 'id', label: 'id', component: 'Input', show: false },
        { field: 'version', label: 'version', component: 'Input', show: false },
        {
          field: 'nickname',
          label: '昵称',
          component: 'Input',
          required: true,
          rules: [{ max: 32, message: '昵称不能超过32个字符', trigger: 'blur' }],
        },
        {
          field: 'username',
          label: '账号',
          component: 'Input',
          required: true,
          rules: [{ max: 32, message: '名称不能超过32个字符', trigger: 'blur' }],
        },
        {
          field: 'password',
          label: '密码',
          component: 'InputPassword',
          rules: [],
          componentProps: {
            autocomplete: 'new-password',
          },
          show: ({ values }) => !values.id,
        },
        {
          field: 'roleIdList',
          label: '单位类型',
          required: true,
          component: 'Select',
          componentProps: {
            mode: 'multiple',
            options: [
              // {
              //   value:"1765250614939729921",
              //   label: "建设单位"
              // },
              {
                value: "1765250961473126402",
                label: "承建单位"
              }, {
                value: "1765250818753544193",
                label: "咨询单位",
              }, {
                value: "1765250743927160833",
                label: "监理单位",
              }
            ],
            // multiple: true,

          },
        },
        {
          field: 'sex',
          label: '性别',
          required: true,
          component: 'DictRadio',
          componentProps: {
            dictType: 'sex',
          },
          itemProps: { validateTrigger: 'blur' },
        },
        {
          field: 'status',
          label: '状态',
          required: true,
          component: 'DictRadio',
          componentProps: {
            dictType: 'commonStatus',
          },
          itemProps: { validateTrigger: 'blur' },
        },
        {
          field: 'phoneNumber',
          label: '手机号',
          component: 'Input',
          rules: [{ max: 32, message: '手机号不能超过32个字符', trigger: 'blur' }],
        },
        // {
        //   field: 'workplaceType',
        //   label: '单位类型',
        //   required: true,
        //   component: 'DictSelect',
        //   componentProps: {
        //     dictType: 'workplaceType',
        //   },
        //   itemProps: { validateTrigger: 'blur' },
        // },
        {
          field: 'workplace',
          label: '单位名称',
          component: 'Input',
          required: true,
        },
        // {
        //   field: 'email',
        //   label: '邮箱',
        //   component: 'Input',
        //   rules: [{ max: 32, message: '邮箱不能超过32个字符', trigger: 'blur' }],
        // },
        // {
        //   field: 'birthday',
        //   label: '生日',
        //   component: 'DatePicker',
        // },
        // {
        //   field: 'source',
        //   label: '来源',
        //   component: 'Input',
        //   rules: [{ max: 32, message: '来源不能超过32个字符', trigger: 'blur' }],
        // },
      ],
      showActionButtonGroup: false,
      baseColProps: { md: 24 },
    });

    const [registerDrawer, { changeLoading, closeDrawer }] = useDrawerInner(async (data) => {
      await setForm(data);
    });

    async function setForm(data) {
      changeLoading(true);

      // 重置表单
      await resetFields();
      deptId.value = data?.deptId;
      await updateSchema({
        field: 'roleIdList',
        componentProps: {
          type: 'deptId',
          deptId: deptId.value,
        },
      });

      if (data.id) {
        // 不允许在此页面修改密码
        await updateSchema({
          field: 'password',
          rules: [],
        });
      } else {
        await updateSchema({
          field: 'password',
          // rules: [{ required: true, validator: checkPassword, trigger: 'change' }],
        });
      }

      await setFieldsValue(data);
      changeLoading(false);
    }

    async function handleSubmit(callback: (_: SysUser) => any) {
      try {
        changeLoading(true);
        await validate();
        const values = getFieldsValue();

        await saveUser({
          ...values,
          deptId: unref(deptId),
        }).then((res) => {
          message.success('保存成功');
          emit('success');
          callback(res);
        });
      } catch (e) {
        console.error(e);
        changeLoading(false);
      }
    }

    async function handleSave() {
      await handleSubmit((_) => {
        changeLoading(false);
        closeDrawer();
      });
    }

    async function handleSaveAndAdd() {
      await handleSubmit((res) => {
        add(res.deptId!).then(async (data) => {
          await setForm(data);
        });
      });
    }

    return {
      registerDrawer,
      registerForm,
      handleSave,
      handleSaveAndAdd,
    };
  },
});
</script>