Sanakey
2024-08-24 7450a275438c5c94c4b0014f813970d9da473116
src/views/clues/components/DrawerForm.vue
@@ -55,8 +55,10 @@
          </div>
        </Col>
        <Col :span="11" :offset="2" :class="`${prefixCls}-col`">
          5
          <div class="mb-10px font-size-16px">联系人</div>
          <div class="p-10px bg-gray-1">
            <BasicForm @register="registerForm2" />
          </div>
        </Col>
      </Row>
@@ -74,7 +76,8 @@
  import {getMenuList} from "@/api/demo/system";
  import {TreeItem} from "@/components/Tree";
  import {BasicForm, useForm} from "@/components/Form";
  import {schemas} from './drawerFormData.tsx'
  import {schemas} from './drawerFormData'
  import {schemas as schemas2} from './drawerContacterFormData'
  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
@@ -89,47 +92,8 @@
  // const [registerDrawer] = useDrawer();
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    Logger.log('打开了DrawerForm', data);
    isUpdate.value = !!data?.isUpdate;
    // // 方式1
    // setFieldsValue({
    //   field2: data.data,
    //   field1: data.info,
    // });
    // setDrawerProps({ confirmLoading: true });
    // setTimeout(() => {
    //   setDrawerProps({ confirmLoading: false });
    // }, 1000);
    resetFields();
    if (unref(isUpdate)) {
      setFieldsValue({
        ...data.record,
      });
    }
  });
  async function handleSubmit() {
  try {
    const values = await validate();
    // const values = getFieldsValue();
    Logger.log('点击submit',values);
    setDrawerProps({ confirmLoading: true });
    // TODO custom api
    closeDrawer();
    emit('success');
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}
  const modelRef = ref({});
  // 左侧表单
  const [
    registerForm,
    { resetFields, setFieldsValue, validate }
@@ -151,6 +115,79 @@
      span: 24,
    },
  });
  // 右侧表单
  const [
    registerForm2,
    { resetFields:resetFields2, setFieldsValue:setFieldsValue2, validate:validate2 }
    // {
    //   // setFieldsValue,
    //   // setProps
    // },
  ] = useForm({
    layout: 'vertical',
    // labelWidth: 100,
    showAdvancedButton: true, //开启折叠
    autoAdvancedLine: 5, // 超过多少行折叠
    alwaysShowLines: 4, // 始终显示多少行
    schemas:schemas2,
    // showActionButtonGroup: false, // 默认显示操作按钮,开启才会显示折叠按钮
    showResetButton:false, // 隐藏重置按钮
    showSubmitButton:false,  // 隐藏提交按钮
    actionColOptions: {
      span: 24,
    },
  });
  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    Logger.log('打开了DrawerForm', data);
    isUpdate.value = !!data?.isUpdate;
    // // 方式1
    // setFieldsValue({
    //   field2: data.data,
    //   field1: data.info,
    // });
    // setDrawerProps({ confirmLoading: true });
    // setTimeout(() => {
    //   setDrawerProps({ confirmLoading: false });
    // }, 1000);
    resetFields();
    resetFields2();
    if (unref(isUpdate)) {
      setFieldsValue({
        ...data.record,
      });
      setFieldsValue2({
        ...data.record,
      });
    }
  });
  async function handleSubmit() {
  try {
    // const values = await validate();
    const [values, values2] = await Promise.all([validate(), validate2()]);
    // const values = getFieldsValue();
    Logger.log('点击submit 左侧表单values:',values);
    Logger.log('点击submit 右侧表单values2:', values2);
    setDrawerProps({ confirmLoading: true });
    // TODO custom api
    closeDrawer();
    emit('success');
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}
  const prefixCls = 'clues-drawer';
  // 关闭提示信息
  const visible = ref<boolean>(true);