修改抽屉形式

src/views/config/configSuppliersInfo/ConfigSuppliersInfoList.vue

@@ -32,7 +32,7 @@
       </template>
     </BasicTable>
     <!-- 表单区域 -->
-    <ConfigSuppliersInfoModal @register="registerModal" @success="handleSuccess"></ConfigSuppliersInfoModal>
+    <ConfigSuppliersInfoModal @register="registerDrawer" @success="handleSuccess"></ConfigSuppliersInfoModal>
   </div>
 </template>
 
@@ -46,11 +46,14 @@
   import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './ConfigSuppliersInfo.api';
   import { downloadFile } from '/@/utils/common/renderUtils';
   import { useUserStore } from '/@/store/modules/user';
+  import { useDrawer } from '/@/components/Drawer';
   const queryParam = reactive<any>({});
   const checkedKeys = ref<Array<string | number>>([]);
   const userStore = useUserStore();
   //注册model
   const [registerModal, {openModal}] = useModal();
+  //注册drawer
+  const [registerDrawer, { openDrawer }] = useDrawer();
   //注册table数据
   const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
       tableProps:{
@@ -105,30 +108,33 @@
     * 新增事件
     */
   function handleAdd() {
-     openModal(true, {
+    openDrawer(true, {
-       isUpdate: false,
+      isUpdate: false,
-       showFooter: true,
+      showFooter: true,
-     });
+      tenantSaas: false,
+    });
   }
    /**
     * 编辑事件
     */
   function handleEdit(record: Recordable) {
-     openModal(true, {
+    openDrawer(true, {
-       record,
+      record,
-       isUpdate: true,
+      isUpdate: true,
-       showFooter: true,
+      showFooter: true,
-     });
+      tenantSaas: false,
+    });
    }
    /**
     * 详情
    */
   function handleDetail(record: Recordable) {
-     openModal(true, {
+    openDrawer(true, {
-       record,
+      record,
-       isUpdate: true,
+      isUpdate: true,
-       showFooter: false,
+      showFooter: false,
-     });
+      tenantSaas: false,
+    });
    }
    /**
     * 删除事件

src/views/config/configSuppliersInfo/components/ConfigSuppliersInfoModal.vue

@@ -1,76 +1,87 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
+  <BasicDrawer
-      <BasicForm @register="registerForm" name="ConfigSuppliersInfoForm" />
+    v-bind="$attrs"
-  </BasicModal>
+    @register="registerDrawer"
+    :title="getTitle"
+    :width="adaptiveWidth"
+    @ok="handleSubmit"
+    :showFooter="showFooter"
+    destroyOnClose
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
 </template>
-
 <script lang="ts" setup>
-    import {ref, computed, unref} from 'vue';
+  import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
-    import {BasicModal, useModalInner} from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form/index';
-    import {BasicForm, useForm} from '/@/components/Form/index';
+  import { formSchema } from '../ConfigSuppliersInfo.data';
-    import {formSchema} from '../ConfigSuppliersInfo.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-    import {saveOrUpdate} from '../ConfigSuppliersInfo.api';
+  import { saveOrUpdate } from '../ConfigSuppliersInfo.api';
-    // Emits声明
+  import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
-    const emit = defineEmits(['register','success']);
+  import { getTenantId } from "/@/utils/auth";
-    const isUpdate = ref(true);
+
-    const isDetail = ref(false);
+  // 声明Emits
-    //表单配置
+  const emit = defineEmits(['success', 'register']);
-    const [registerForm, { setProps,resetFields, setFieldsValue, validate, scrollToField }] = useForm({
+  const attrs = useAttrs();
-        labelWidth: 150,
+  const isUpdate = ref(true);
-        schemas: formSchema,
+  const rowId = ref('');
-        showActionButtonGroup: false,
+  const departOptions = ref([]);
-        baseColProps: {span: 24}
+  let isFormDepartUser = false;
-    });
+  //表单配置
-    //表单赋值
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
-    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+    labelWidth: 90,
-        //重置表单
+    schemas: formSchema,
-        await resetFields();
+    showActionButtonGroup: false,
-        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
+  });
-        isUpdate.value = !!data?.isUpdate;
+  const showFooter = ref(true);
-        isDetail.value = !!data?.showFooter;
+  //表单赋值
-        if (unref(isUpdate)) {
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-            //表单赋值
+    await resetFields();
-            await setFieldsValue({
+    showFooter.value = data?.showFooter ?? true;
-                ...data.record,
+    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
-            });
+    isUpdate.value = !!data?.isUpdate;
-        }
+    
-        // 隐藏底部时禁用整个表单
+    if (unref(isUpdate)) {
-       setProps({ disabled: !data?.showFooter })
+        //表单赋值
-    });
+        await setFieldsValue({
-    //设置标题
+            ...data.record,
-    const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
+        });
-    //表单提交事件
-    async function handleSubmit(v) {
-        try {
-            let values = await validate();
-            setModalProps({confirmLoading: true});
-            //提交表单
-            await saveOrUpdate(values, isUpdate.value);
-            //关闭弹窗
-            closeModal();
-            //刷新列表
-            emit('success');
-        } catch ({ errorFields }) {
-           if (errorFields) {
-             const firstField = errorFields[0];
-             if (firstField) {
-               scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
-             }
-           }
-           return Promise.reject(errorFields);
-        } finally {
-            setModalProps({confirmLoading: false});
-        }
     }
+    setProps({ disabled: !showFooter.value });
+  });
+  //获取标题
+  const getTitle = computed(() => {
+    // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8389】系统用户详情抽屉title更改
+    if (!unref(isUpdate)) {
+      return '新增';
+    } else {
+      return unref(showFooter) ? '编辑' : '详情';
+    }
+    // update-end--author:liaozhiyang---date:20240306---for：【QQYUN-8389】系统用户详情抽屉title更改
+  });
+  const { adaptiveWidth } = useDrawerAdaptiveWidth();
+
+  //提交事件
+  async function handleSubmit() {
+    try {
+      let values = await validate();
+      setDrawerProps({ confirmLoading: true });
+      values.userIdentity === 1 && (values.departIds = '');
+      let isUpdateVal = unref(isUpdate);
+      // -update-begin--author:liaozhiyang---date:20240702---for：【TV360X-1737】部门用户编辑接口，增加参数updateFromPage:"deptUsers"
+      let params = values;
+      if (isFormDepartUser) {
+        params = { ...params, updateFromPage: 'deptUsers' };
+      }
+      // -update-end--author:liaozhiyang---date:20240702---for：【TV360X-1737】部门用户编辑接口，增加参数updateFromPage:"deptUsers"
+      //提交表单
+      await saveOrUpdate(params, isUpdateVal);
+      //关闭弹窗
+      closeDrawer();
+      //刷新列表
+      emit('success',{isUpdateVal ,values});
+    } finally {
+      setDrawerProps({ confirmLoading: false });
+    }
+  }
 </script>
-
-<style lang="less" scoped>
-	/** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-calendar-picker) {
-    width: 100%;
-  }
-</style>