修改抽屉形式

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,29 +108,32 @@
     * 新增事件
     */
   function handleAdd() {
-     openModal(true, {
+    openDrawer(true, {
       isUpdate: false,
       showFooter: true,
+      tenantSaas: false,
     });
   }
    /**
     * 编辑事件
     */
   function handleEdit(record: Recordable) {
-     openModal(true, {
+    openDrawer(true, {
       record,
       isUpdate: true,
       showFooter: true,
+      tenantSaas: false,
     });
    }
    /**
     * 详情
    */
   function handleDetail(record: Recordable) {
-     openModal(true, {
+    openDrawer(true, {
       record,
       isUpdate: true,
       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";
+
+  // 声明Emits
+  const emit = defineEmits(['success', 'register']);
+  const attrs = useAttrs();
   const isUpdate = ref(true);
-    const isDetail = ref(false);
+  const rowId = ref('');
+  const departOptions = ref([]);
+  let isFormDepartUser = false;
   //表单配置
-    const [registerForm, { setProps,resetFields, setFieldsValue, validate, scrollToField }] = useForm({
+  const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
-        labelWidth: 150,
+    labelWidth: 90,
     schemas: formSchema,
     showActionButtonGroup: false,
-        baseColProps: {span: 24}
   });
+  const showFooter = ref(true);
   //表单赋值
-    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        //重置表单
     await resetFields();
-        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
+    showFooter.value = data?.showFooter ?? true;
+    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
     isUpdate.value = !!data?.isUpdate;
-        isDetail.value = !!data?.showFooter;
+    
     if (unref(isUpdate)) {
         //表单赋值
         await setFieldsValue({
             ...data.record,
         });
     }
-        // 隐藏底部时禁用整个表单
+    setProps({ disabled: !showFooter.value });
-       setProps({ disabled: !data?.showFooter })
   });
-    //设置标题
+  //获取标题
-    const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));
+  const getTitle = computed(() => {
-    //表单提交事件
+    // update-begin--author:liaozhiyang---date:20240306---for：【QQYUN-8389】系统用户详情抽屉title更改
-    async function handleSubmit(v) {
+    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();
-            setModalProps({confirmLoading: true});
+      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(values, isUpdate.value);
+      await saveOrUpdate(params, isUpdateVal);
       //关闭弹窗
-            closeModal();
+      closeDrawer();
       //刷新列表
-            emit('success');
+      emit('success',{isUpdateVal ,values});
-        } 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});
+      setDrawerProps({ confirmLoading: false });
     }
   }
 </script>
-
-<style lang="less" scoped>
-	/** 时间和数字输入框样式 */
-  :deep(.ant-input-number) {
-    width: 100%;
-  }
-
-  :deep(.ant-calendar-picker) {
-    width: 100%;
-  }
-</style>