管理界面-弹窗样式调整更新

src/components/Form/src/BasicForm.vue

@@ -1,18 +1,12 @@
 <template>
   <div class="vent-form">
-    <Form v-bind="getBindValue" :class="getFormClass" ref="formElRef" :model="formModel" @keypress.enter="handleEnterPress" autocomplete="off">
+    <Form v-bind="getBindValue" :class="getFormClass" ref="formElRef" :model="formModel"
+      @keypress.enter="handleEnterPress" autocomplete="off">
       <Row v-bind="getRow">
         <slot name="formHeader"></slot>
         <template v-for="schema in getSchema" :key="schema.field">
-          <FormItem
-            :tableAction="tableAction"
-            :formActionType="formActionType"
-            :schema="schema"
-            :formProps="getProps"
-            :allDefaultValues="defaultValueRef"
-            :formModel="formModel"
-            :setFormModel="setFormModel"
-          >
+          <FormItem :tableAction="tableAction" :formActionType="formActionType" :schema="schema" :formProps="getProps"
+            :allDefaultValues="defaultValueRef" :formModel="formModel" :setFormModel="setFormModel">
             <template #[item]="data" v-for="item in Object.keys($slots)">
               <slot :name="item" v-bind="data || {}"></slot>
             </template>
@@ -34,387 +28,403 @@
   </div>
 </template>
 <script lang="ts">
-  import type { FormActionType, FormProps, FormSchema } from './types/form';
-  import type { AdvanceState } from './types/hooks';
-  import type { Ref } from 'vue';
-
-  import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue';
-  import { Form, Row } from 'ant-design-vue';
-  import FormItem from './components/FormItem.vue';
-  import FormAction from './components/FormAction.vue';
-
-  import { dateItemType } from './helper';
-  import { dateUtil } from '/@/utils/dateUtil';
-
-  // import { cloneDeep } from 'lodash-es';
-  import { deepMerge } from '/@/utils';
-
-  import { useFormValues } from './hooks/useFormValues';
-  import useAdvanced from './hooks/useAdvanced';
-  import { useFormEvents } from './hooks/useFormEvents';
-  import { createFormContext } from './hooks/useFormContext';
-  import { useAutoFocus } from './hooks/useAutoFocus';
-  import { useModalContext } from '/@/components/Modal';
-
-  import { basicProps } from './props';
-  import componentSetting from '/@/settings/componentSetting';
-
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import dayjs from 'dayjs';
-  import { useDebounceFn } from '@vueuse/core';
-
-  export default defineComponent({
-    name: 'BasicForm',
-    components: { FormItem, Form, Row, FormAction },
-    props: basicProps,
-    emits: ['advanced-change', 'reset', 'submit', 'register'],
-    setup(props, { emit, attrs }) {
-      const formModel = reactive<Recordable>({});
-      const modalFn = useModalContext();
-
-      const advanceState = reactive<AdvanceState>({
-        // 默认是收起状态
-        isAdvanced: false,
-        hideAdvanceBtn: true,
-        isLoad: false,
-        actionSpan: 6,
-      });
-
-      const defaultValueRef = ref<Recordable>({});
-      const isInitedDefaultRef = ref(false);
-      const propsRef = ref<Partial<FormProps>>({});
-      const schemaRef = ref<Nullable<FormSchema[]>>(null);
-      const formElRef = ref<Nullable<FormActionType>>(null);
-
-      const { prefixCls } = useDesign('basic-form');
-
-      // Get the basic configuration of the form
-      const getProps = computed((): FormProps => {
-        let mergeProps = { ...props, ...unref(propsRef) } as FormProps;
-        //update-begin-author:sunjianlei date:20220923 for: 如果用户设置了labelWidth，则使labelCol失效，解决labelWidth设置无效的问题
-        if (mergeProps.labelWidth) {
+import type { FormActionType, FormProps, FormSchema } from './types/form';
+import type { AdvanceState } from './types/hooks';
+import type { Ref } from 'vue';
+
+import { defineComponent, reactive, ref, computed, unref, onMounted, watch, nextTick } from 'vue';
+import { Form, Row } from 'ant-design-vue';
+import FormItem from './components/FormItem.vue';
+import FormAction from './components/FormAction.vue';
+
+import { dateItemType } from './helper';
+import { dateUtil } from '/@/utils/dateUtil';
+
+// import { cloneDeep } from 'lodash-es';
+import { deepMerge } from '/@/utils';
+
+import { useFormValues } from './hooks/useFormValues';
+import useAdvanced from './hooks/useAdvanced';
+import { useFormEvents } from './hooks/useFormEvents';
+import { createFormContext } from './hooks/useFormContext';
+import { useAutoFocus } from './hooks/useAutoFocus';
+import { useModalContext } from '/@/components/Modal';
+
+import { basicProps } from './props';
+import componentSetting from '/@/settings/componentSetting';
+
+import { useDesign } from '/@/hooks/web/useDesign';
+import dayjs from 'dayjs';
+import { useDebounceFn } from '@vueuse/core';
+
+export default defineComponent({
+  name: 'BasicForm',
+  components: { FormItem, Form, Row, FormAction },
+  props: basicProps,
+  emits: ['advanced-change', 'reset', 'submit', 'register'],
+  setup(props, { emit, attrs }) {
+    const formModel = reactive<Recordable>({});
+    const modalFn = useModalContext();
+
+    const advanceState = reactive<AdvanceState>({
+      // 默认是收起状态
+      isAdvanced: false,
+      hideAdvanceBtn: true,
+      isLoad: false,
+      actionSpan: 6,
+    });
+
+    const defaultValueRef = ref<Recordable>({});
+    const isInitedDefaultRef = ref(false);
+    const propsRef = ref<Partial<FormProps>>({});
+    const schemaRef = ref<Nullable<FormSchema[]>>(null);
+    const formElRef = ref<Nullable<FormActionType>>(null);
+
+    const { prefixCls } = useDesign('basic-form');
+
+    // Get the basic configuration of the form
+    const getProps = computed((): FormProps => {
+      let mergeProps = { ...props, ...unref(propsRef) } as FormProps;
+      //update-begin-author:sunjianlei date:20220923 for: 如果用户设置了labelWidth，则使labelCol失效，解决labelWidth设置无效的问题
+      if (mergeProps.labelWidth) {
+        mergeProps.labelCol = undefined;
+      }
+      //update-end-author:sunjianlei date:20220923 for: 如果用户设置了labelWidth，则使labelCol失效，解决labelWidth设置无效的问题
+      // update-begin--author:liaozhiyang---date:20231017---for：【QQYUN-6566】BasicForm支持一行显示(inline)
+      if (mergeProps.layout === 'inline') {
+        if (mergeProps.labelCol === componentSetting.form.labelCol) {
           mergeProps.labelCol = undefined;
         }
-        //update-end-author:sunjianlei date:20220923 for: 如果用户设置了labelWidth，则使labelCol失效，解决labelWidth设置无效的问题
-        // update-begin--author:liaozhiyang---date:20231017---for：【QQYUN-6566】BasicForm支持一行显示(inline)
-        if (mergeProps.layout === 'inline') {
-          if (mergeProps.labelCol === componentSetting.form.labelCol) {
-            mergeProps.labelCol = undefined;
+        if (mergeProps.wrapperCol === componentSetting.form.wrapperCol) {
+          mergeProps.wrapperCol = undefined;
+        }
+      }
+      // update-end--author:liaozhiyang---date:20231017---for：【QQYUN-6566】BasicForm支持一行显示(inline)
+      return mergeProps;
+    });
+
+    const getFormClass = computed(() => {
+      return [
+        prefixCls,
+        {
+          [`${prefixCls}--compact`]: unref(getProps).compact,
+        },
+      ];
+    });
+
+    // Get uniform row style and Row configuration for the entire form
+    const getRow = computed((): Recordable => {
+      const { baseRowStyle = {}, rowProps } = unref(getProps);
+      return {
+        style: baseRowStyle,
+        ...rowProps,
+      };
+    });
+
+    const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }) as Recordable);
+
+    const getSchema = computed((): FormSchema[] => {
+      const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
+      for (const schema of schemas) {
+        const { defaultValue, component, componentProps } = schema;
+        // handle date type
+        if (defaultValue && dateItemType.includes(component)) {
+          //update-begin---author:wangshuai ---date:20230410  for：【issues/435】代码生成的日期控件赋默认值报错------------
+          let valueFormat: string = '';
+          if (componentProps) {
+            valueFormat = componentProps?.valueFormat;
           }
-          if (mergeProps.wrapperCol === componentSetting.form.wrapperCol) {
-            mergeProps.wrapperCol = undefined;
+          if (!valueFormat) {
+            console.warn('未配置valueFormat,可能导致格式化错误！');
           }
-        }
-        // update-end--author:liaozhiyang---date:20231017---for：【QQYUN-6566】BasicForm支持一行显示(inline)
-        return mergeProps;
-      });
-
-      const getFormClass = computed(() => {
-        return [
-          prefixCls,
-          {
-            [`${prefixCls}--compact`]: unref(getProps).compact,
-          },
-        ];
-      });
-
-      // Get uniform row style and Row configuration for the entire form
-      const getRow = computed((): Recordable => {
-        const { baseRowStyle = {}, rowProps } = unref(getProps);
-        return {
-          style: baseRowStyle,
-          ...rowProps,
-        };
-      });
-
-      const getBindValue = computed(() => ({ ...attrs, ...props, ...unref(getProps) }) as Recordable);
-
-      const getSchema = computed((): FormSchema[] => {
-        const schemas: FormSchema[] = unref(schemaRef) || (unref(getProps).schemas as any);
-        for (const schema of schemas) {
-          const { defaultValue, component, componentProps } = schema;
-          // handle date type
-          if (defaultValue && dateItemType.includes(component)) {
-            //update-begin---author:wangshuai ---date:20230410  for：【issues/435】代码生成的日期控件赋默认值报错------------
-            let valueFormat: string = '';
-            if (componentProps) {
-              valueFormat = componentProps?.valueFormat;
-            }
-            if (!valueFormat) {
-              console.warn('未配置valueFormat,可能导致格式化错误！');
+          //update-end---author:wangshuai ---date:20230410  for：【issues/435】代码生成的日期控件赋默认值报错------------
+          if (!Array.isArray(defaultValue)) {
+            //update-begin---author:wangshuai ---date:20221124  for：[issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
+            if (valueFormat) {
+              schema.defaultValue = dateUtil(defaultValue).format(valueFormat);
+            } else {
+              schema.defaultValue = dateUtil(defaultValue);
             }
-            //update-end---author:wangshuai ---date:20230410  for：【issues/435】代码生成的日期控件赋默认值报错------------
-            if (!Array.isArray(defaultValue)) {
+            //update-end---author:wangshuai ---date:20221124  for：[issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
+          } else {
+            const def: dayjs.Dayjs[] = [];
+            defaultValue.forEach((item) => {
               //update-begin---author:wangshuai ---date:20221124  for：[issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
               if (valueFormat) {
-                schema.defaultValue = dateUtil(defaultValue).format(valueFormat);
+                def.push(dateUtil(item).format(valueFormat));
               } else {
-                schema.defaultValue = dateUtil(defaultValue);
+                def.push(dateUtil(item));
               }
               //update-end---author:wangshuai ---date:20221124  for：[issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
-            } else {
-              const def: dayjs.Dayjs[] = [];
-              defaultValue.forEach((item) => {
-                //update-begin---author:wangshuai ---date:20221124  for：[issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
-                if (valueFormat) {
-                  def.push(dateUtil(item).format(valueFormat));
-                } else {
-                  def.push(dateUtil(item));
-                }
-                //update-end---author:wangshuai ---date:20221124  for：[issues/215]列表页查询框（日期选择框）设置初始时间，一进入页面时，后台报日期转换类型错误的------------
-              });
-              schema.defaultValue = def;
-            }
+            });
+            schema.defaultValue = def;
           }
         }
-        if (unref(getProps).showAdvancedButton) {
-          return schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[];
-        } else {
-          return schemas as FormSchema[];
-        }
-      });
-
-      const { handleToggleAdvanced } = useAdvanced({
-        advanceState,
-        emit,
-        getProps,
-        getSchema,
-        formModel,
-        defaultValueRef,
-      });
-
-      const { handleFormValues, initDefault } = useFormValues({
-        getProps,
-        defaultValueRef,
-        getSchema,
-        formModel,
-      });
-
-      useAutoFocus({
-        getSchema,
-        getProps,
-        isInitedDefault: isInitedDefaultRef,
-        formElRef: formElRef as Ref<FormActionType>,
-      });
-
-      const {
-        handleSubmit,
-        setFieldsValue,
-        clearValidate,
-        validate,
-        validateFields,
-        getFieldsValue,
-        updateSchema,
-        resetSchema,
-        appendSchemaByField,
-        removeSchemaByFiled,
-        resetFields,
-        scrollToField,
-      } = useFormEvents({
-        emit,
-        getProps,
-        formModel,
-        getSchema,
-        defaultValueRef,
-        formElRef: formElRef as Ref<FormActionType>,
-        schemaRef: schemaRef as Ref<FormSchema[]>,
-        handleFormValues,
-      });
-
-      createFormContext({
-        resetAction: resetFields,
-        submitAction: handleSubmit,
-      });
-
-      watch(
-        () => unref(getProps).model,
-        () => {
-          const { model } = unref(getProps);
-          if (!model) return;
-          setFieldsValue(model);
-        },
-        {
-          immediate: true,
-        }
-      );
+      }
+      if (unref(getProps).showAdvancedButton) {
+        return schemas.filter((schema) => schema.component !== 'Divider') as FormSchema[];
+      } else {
+        return schemas as FormSchema[];
+      }
+    });
+
+    const { handleToggleAdvanced } = useAdvanced({
+      advanceState,
+      emit,
+      getProps,
+      getSchema,
+      formModel,
+      defaultValueRef,
+    });
+
+    const { handleFormValues, initDefault } = useFormValues({
+      getProps,
+      defaultValueRef,
+      getSchema,
+      formModel,
+    });
+
+    useAutoFocus({
+      getSchema,
+      getProps,
+      isInitedDefault: isInitedDefaultRef,
+      formElRef: formElRef as Ref<FormActionType>,
+    });
+
+    const {
+      handleSubmit,
+      setFieldsValue,
+      clearValidate,
+      validate,
+      validateFields,
+      getFieldsValue,
+      updateSchema,
+      resetSchema,
+      appendSchemaByField,
+      removeSchemaByFiled,
+      resetFields,
+      scrollToField,
+    } = useFormEvents({
+      emit,
+      getProps,
+      formModel,
+      getSchema,
+      defaultValueRef,
+      formElRef: formElRef as Ref<FormActionType>,
+      schemaRef: schemaRef as Ref<FormSchema[]>,
+      handleFormValues,
+    });
+
+    createFormContext({
+      resetAction: resetFields,
+      submitAction: handleSubmit,
+    });
+
+    watch(
+      () => unref(getProps).model,
+      () => {
+        const { model } = unref(getProps);
+        if (!model) return;
+        setFieldsValue(model);
+      },
+      {
+        immediate: true,
+      }
+    );
 
-      watch(
-        () => unref(getProps).schemas,
-        (schemas) => {
-          resetSchema(schemas ?? []);
+    watch(
+      () => unref(getProps).schemas,
+      (schemas) => {
+        resetSchema(schemas ?? []);
+      }
+    );
+
+    watch(
+      () => getSchema.value,
+      (schema) => {
+        nextTick(() => {
+          //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
+          modalFn?.redoModalHeight?.();
+        });
+        if (unref(isInitedDefaultRef)) {
+          return;
         }
-      );
-
-      watch(
-        () => getSchema.value,
-        (schema) => {
-          nextTick(() => {
-            //  Solve the problem of modal adaptive height calculation when the form is placed in the modal
-            modalFn?.redoModalHeight?.();
-          });
-          if (unref(isInitedDefaultRef)) {
-            return;
-          }
-          if (schema?.length) {
-            initDefault();
-            isInitedDefaultRef.value = true;
-          }
+        if (schema?.length) {
+          initDefault();
+          isInitedDefaultRef.value = true;
         }
-      );
-
-      async function setProps(formProps: Partial<FormProps>): Promise<void> {
-        propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
       }
+    );
 
-      //update-begin-author:taoyan date:2022-11-28 for: QQYUN-3121 【优化】表单视图问题#scott测试 8、此功能未实现
-      const onFormSubmitWhenChange = useDebounceFn(handleSubmit, 300);
-      function setFormModel(key: string, value: any) {
-        formModel[key] = value;
-        // update-begin--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
-        // const { validateTrigger } = unref(getBindValue);
-        // if (!validateTrigger || validateTrigger === 'change') {
-        //   validateFields([key]).catch((_) => {});
-        // }
-        // update-end--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
-        if (props.autoSearch === true) {
-          onFormSubmitWhenChange();
-        }
+    async function setProps(formProps: Partial<FormProps>): Promise<void> {
+      propsRef.value = deepMerge(unref(propsRef) || {}, formProps);
+    }
+
+    //update-begin-author:taoyan date:2022-11-28 for: QQYUN-3121 【优化】表单视图问题#scott测试 8、此功能未实现
+    const onFormSubmitWhenChange = useDebounceFn(handleSubmit, 300);
+    function setFormModel(key: string, value: any) {
+      formModel[key] = value;
+      // update-begin--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
+      // const { validateTrigger } = unref(getBindValue);
+      // if (!validateTrigger || validateTrigger === 'change') {
+      //   validateFields([key]).catch((_) => {});
+      // }
+      // update-end--author:liaozhiyang---date:20230922---for：【issues/752】表单校验dynamicRules 无法 使用失去焦点后校验 trigger: 'blur'
+      if (props.autoSearch === true) {
+        onFormSubmitWhenChange();
       }
-      //update-end-author:taoyan date:2022-11-28 for: QQYUN-3121 【优化】表单视图问题#scott测试 8、此功能未实现
-
-      function handleEnterPress(e: KeyboardEvent) {
-        const { autoSubmitOnEnter } = unref(getProps);
-        if (!autoSubmitOnEnter) return;
-        if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
-          const target: HTMLElement = e.target as HTMLElement;
-          if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
-            handleSubmit();
-          }
+    }
+    //update-end-author:taoyan date:2022-11-28 for: QQYUN-3121 【优化】表单视图问题#scott测试 8、此功能未实现
+
+    function handleEnterPress(e: KeyboardEvent) {
+      const { autoSubmitOnEnter } = unref(getProps);
+      if (!autoSubmitOnEnter) return;
+      if (e.key === 'Enter' && e.target && e.target instanceof HTMLElement) {
+        const target: HTMLElement = e.target as HTMLElement;
+        if (target && target.tagName && target.tagName.toUpperCase() == 'INPUT') {
+          handleSubmit();
         }
       }
+    }
 
-      const formActionType: Partial<FormActionType> = {
-        getFieldsValue,
-        setFieldsValue,
-        resetFields,
-        updateSchema,
-        resetSchema,
-        setProps,
-        getProps,
-        removeSchemaByFiled,
-        appendSchemaByField,
-        clearValidate,
-        validateFields,
-        validate,
-        submit: handleSubmit,
-        scrollToField: scrollToField,
-      };
-
-      onMounted(() => {
-        initDefault();
-        emit('register', formActionType);
-      });
-
-      return {
-        getBindValue,
-        handleToggleAdvanced,
-        handleEnterPress,
-        formModel,
-        defaultValueRef,
-        advanceState,
-        getRow,
-        getProps,
-        formElRef,
-        getSchema,
-        formActionType: formActionType as any,
-        setFormModel,
-        getFormClass,
-        getFormActionBindProps: computed((): Recordable => ({ ...getProps.value, ...advanceState })),
-        ...formActionType,
-      };
-    },
-  });
+    const formActionType: Partial<FormActionType> = {
+      getFieldsValue,
+      setFieldsValue,
+      resetFields,
+      updateSchema,
+      resetSchema,
+      setProps,
+      getProps,
+      removeSchemaByFiled,
+      appendSchemaByField,
+      clearValidate,
+      validateFields,
+      validate,
+      submit: handleSubmit,
+      scrollToField: scrollToField,
+    };
+
+    onMounted(() => {
+      initDefault();
+      emit('register', formActionType);
+    });
+
+    return {
+      getBindValue,
+      handleToggleAdvanced,
+      handleEnterPress,
+      formModel,
+      defaultValueRef,
+      advanceState,
+      getRow,
+      getProps,
+      formElRef,
+      getSchema,
+      formActionType: formActionType as any,
+      setFormModel,
+      getFormClass,
+      getFormActionBindProps: computed((): Recordable => ({ ...getProps.value, ...advanceState })),
+      ...formActionType,
+    };
+  },
+});
 </script>
 <style lang="less" scoped>
-  @prefix-cls: ~'@{namespace}-basic-form';
-  @ventSpace: zxm;
+@prefix-cls: ~'@{namespace}-basic-form';
+@ventSpace: zxm;
 
-  .@{prefix-cls} {
-    .@{ventSpace}-form-item {
-      &-label label::after {
-        margin: 0 6px 0 2px;
+.@{prefix-cls} {
+  
+
+  .@{ventSpace}-form-item {
+    &-label label::after {
+      margin: 0 6px 0 2px;
+    }
+
+    &-with-help {
+      margin-bottom: 0;
+    }
+
+    &:not(.@{ventSpace}-form-item-with-help) {
+      margin-bottom: 20px;
+    }
+
+    &.suffix-item {
+      .@{ventSpace}-form-item-children {
+        display: flex;
       }
 
-      &-with-help {
-        margin-bottom: 0;
+      .@{ventSpace}-form-item-control {
+        margin-top: 4px;
       }
 
-      &:not(.@{ventSpace}-form-item-with-help) {
-        margin-bottom: 20px;
+      .suffix {
+        display: inline-flex;
+        padding-left: 6px;
+        margin-top: 1px;
+        line-height: 1;
+        align-items: center;
       }
+    }
+  }
 
-      &.suffix-item {
-        .@{ventSpace}-form-item-children {
-          display: flex;
-        }
+  /*【美化表单】form的字体改小一号*/
+  .@{ventSpace}-form-item-label>label {
+    font-size: 13px;
+  }
 
-        .@{ventSpace}-form-item-control {
-          margin-top: 4px;
-        }
+  .@{ventSpace}-form-item .@{ventSpace}-select {
+    font-size: 13px;
+  }
 
-        .suffix {
-          display: inline-flex;
-          padding-left: 6px;
-          margin-top: 1px;
-          line-height: 1;
-          align-items: center;
-        }
-      }
-    }
-    /*【美化表单】form的字体改小一号*/
-    .@{ventSpace}-form-item-label > label {
-      font-size: 13px;
-    }
-    .@{ventSpace}-form-item .@{ventSpace}-select {
-      font-size: 13px;
-    }
-    .@{ventSpace}-select-item-option-selected {
-      font-size: 13px;
-    }
-    .@{ventSpace}-select-item-option-content {
-      font-size: 13px;
-    }
-    .@{ventSpace}-input {
-      font-size: 13px;
-    }
-    /*【美化表单】form的字体改小一号*/
+  .@{ventSpace}-select-item-option-selected {
+    font-size: 13px;
+  }
 
-    .@{ventSpace}-form-explain {
-      font-size: 14px;
-    }
+  .@{ventSpace}-select-item-option-content {
+    font-size: 13px;
+  }
 
-    &--compact {
-      .@{ventSpace}-form-item {
-        margin-bottom: 8px !important;
-      }
+  .@{ventSpace}-input {
+    font-size: 13px;
+  }
+
+  /*【美化表单】form的字体改小一号*/
+
+  .@{ventSpace}-form-explain {
+    font-size: 14px;
+  }
+
+  &--compact {
+    .@{ventSpace}-form-item {
+      margin-bottom: 8px !important;
     }
   }
-  .vent-form {
-    :deep(.@{ventSpace}-select-dropdown) {
-      left: 0px !important;
-      top: 34px !important;
-      // background: #ffffff !important;
-      .@{ventSpace}-select-item {
-        color: #000 !important;
+}
+
+.vent-form {
+ height: calc(100% - 62px);
+  overflow: auto;
+  :deep(.@{ventSpace}-select-dropdown) {
+    left: 0px !important;
+    top: 34px !important;
+
+    // background: #ffffff !important;
+    .@{ventSpace}-select-item {
+      color: #000 !important;
+    }
+
+    .@{ventSpace}-select-tree {
+      .@{ventSpace}-select-tree-treenode {
+        color: black !important;
       }
-      .@{ventSpace}-select-tree {
-        .@{ventSpace}-select-tree-treenode {
-          color: black !important;
-        }
-        .@{ventSpace}-select-tree-switcher-icon {
-          color: black !important;
-        }
+
+      .@{ventSpace}-select-tree-switcher-icon {
+        color: black !important;
       }
     }
   }
+}
+
+
 </style>

src/components/Modal/src/components/ModalClose.vue

@@ -11,149 +11,152 @@
 
     <!-- 是否开启评论区域 -->
     <template v-if="enableComment">
-      <Tooltip title="收起" placement="bottom" v-if="commentSpan>0">
-        <RightSquareOutlined @click="handleCloseComment" style="font-size: 16px"/>
+      <Tooltip title="收起" placement="bottom" v-if="commentSpan > 0">
+        <RightSquareOutlined @click="handleCloseComment" style="font-size: 16px" />
       </Tooltip>
       <Tooltip title="展开" placement="bottom" v-else>
-        <LeftSquareOutlined @click="handleOpenComment" style="font-size: 16px"/>
+        <LeftSquareOutlined @click="handleOpenComment" style="font-size: 16px" />
       </Tooltip>
     </template>
-    
+
     <Tooltip :title="t('component.modal.close')" placement="bottom">
       <CloseOutlined @click="handleCancel" />
     </Tooltip>
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, computed } from 'vue';
-  import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, LeftSquareOutlined, RightSquareOutlined } from '@ant-design/icons-vue';
-  import { useDesign } from '/@/hooks/web/useDesign';
-  import { Tooltip } from 'ant-design-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-
-  export default defineComponent({
-    name: 'ModalClose',
-    components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, LeftSquareOutlined, RightSquareOutlined },
-    props: {
-      canFullscreen: { type: Boolean, default: true },
-      fullScreen: { type: Boolean },
-      enableComment: { type: Boolean, default: false },
-      commentSpan: { type: Number, default: 0 },
-    },
-    emits: ['cancel', 'fullscreen', 'comment'],
-    setup(props, { emit }) {
-      const { prefixCls } = useDesign('basic-modal-close');
-      const { t } = useI18n();
-
-      const getClass = computed(() => {
-        return [
-          prefixCls,
-          `${prefixCls}--custom`,
-          {
-            [`${prefixCls}--can-full`]: props.canFullscreen || props.enableComment,
-          },
-        ];
-      });
-
-      function handleCancel(e: Event) {
-        emit('cancel', e);
-      }
+import { defineComponent, computed } from 'vue';
+import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, LeftSquareOutlined, RightSquareOutlined } from '@ant-design/icons-vue';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { Tooltip } from 'ant-design-vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+
+export default defineComponent({
+  name: 'ModalClose',
+  components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined, LeftSquareOutlined, RightSquareOutlined },
+  props: {
+    canFullscreen: { type: Boolean, default: true },
+    fullScreen: { type: Boolean },
+    enableComment: { type: Boolean, default: false },
+    commentSpan: { type: Number, default: 0 },
+  },
+  emits: ['cancel', 'fullscreen', 'comment'],
+  setup(props, { emit }) {
+    const { prefixCls } = useDesign('basic-modal-close');
+    const { t } = useI18n();
+
+    const getClass = computed(() => {
+      return [
+        prefixCls,
+        `${prefixCls}--custom`,
+        {
+          [`${prefixCls}--can-full`]: props.canFullscreen || props.enableComment,
+        },
+      ];
+    });
+
+    function handleCancel(e: Event) {
+      emit('cancel', e);
+    }
 
-      function handleFullScreen(e: Event) {
-        e?.stopPropagation();
-        e?.preventDefault();
-        if(props.commentSpan==0 || props.enableComment == false){
-          emit('fullscreen');
-        }
+    function handleFullScreen(e: Event) {
+      e?.stopPropagation();
+      e?.preventDefault();
+      if (props.commentSpan == 0 || props.enableComment == false) {
+        emit('fullscreen');
       }
+    }
 
-      /**
-       * 开启评论区域
-       * @param e
-       */
-      function handleOpenComment(e: Event){
-        e?.stopPropagation();
-        e?.preventDefault();
-        if(props.fullScreen==false){
-          emit('fullscreen');
-        }
-        emit('comment', true);
+    /**
+     * 开启评论区域
+     * @param e
+     */
+    function handleOpenComment(e: Event) {
+      e?.stopPropagation();
+      e?.preventDefault();
+      if (props.fullScreen == false) {
+        emit('fullscreen');
       }
+      emit('comment', true);
+    }
+
+    /**
+     * 关闭评论区域
+     * @param e
+     */
+    function handleCloseComment(e: Event) {
+      e?.stopPropagation();
+      e?.preventDefault();
+      emit('comment', false);
+    }
 
-      /**
-       * 关闭评论区域
-       * @param e
-       */
-      function handleCloseComment(e: Event){
-        e?.stopPropagation();
-        e?.preventDefault();
-        emit('comment', false);
+    /**
+     * 有评论的时候不需要设置全屏
+     */
+    const fullScreenStatus = computed(() => {
+      if (props.enableComment === true) {
+        return false
+      } else {
+        return props.canFullscreen;
       }
+    });
 
-      /**
-       * 有评论的时候不需要设置全屏
-       */
-      const fullScreenStatus = computed(()=>{
-        if(props.enableComment===true){
-          return false
-        }else{
-          return props.canFullscreen;
-        }
-      });
-      
-      return {
-        t,
-        getClass,
-        prefixCls,
-        handleCancel,
-        handleFullScreen,
-        handleOpenComment,
-        handleCloseComment,
-        fullScreenStatus
-      };
-    },
-  });
+    return {
+      t,
+      getClass,
+      prefixCls,
+      handleCancel,
+      handleFullScreen,
+      handleOpenComment,
+      handleCloseComment,
+      fullScreenStatus
+    };
+  },
+});
 </script>
 <style lang="less">
-  @prefix-cls: ~'@{namespace}-basic-modal-close';
-  .@{prefix-cls} {
-    display: flex;
-    height: 95%;
-    align-items: center;
-
-    > span {
-      margin-left: 48px;
-      font-size: 16px;
-    }
+@prefix-cls: ~'@{namespace}-basic-modal-close';
 
-    &--can-full {
-      > span {
-        margin-left: 12px;
-      }
+.@{prefix-cls} {
+  display: flex;
+  height: 95%;
+  align-items: center;
+
+  >span {
+    margin-left: 48px;
+    font-size: 16px;
+  }
+
+  &--can-full {
+    >span {
+      margin-left: 12px;
     }
+  }
 
-    &:not(&--can-full) {
-      > span:nth-child(1) {
-        &:hover {
-          font-weight: 700;
-        }
+  &:not(&--can-full) {
+    >span:nth-child(1) {
+      &:hover {
+        font-weight: 700;
       }
     }
+  }
 
-    & span:nth-child(1) {
-      display: inline-block;
-      padding: 10px;
+  & span:nth-child(1) {
+    display: inline-block;
+    padding: 10px;
+    display: none;
 
-      &:hover {
-        color: @primary-color;
-      }
+    &:hover {
+      color: @primary-color;
     }
+  }
 
-    & span:last-child {
-      padding: 10px 10px 10px 0;
-      &:hover {
-        color: @error-color;
-      }
+  & span:last-child {
+    padding: 10px 10px 10px 0;
+
+    &:hover {
+      color: @error-color;
     }
   }
+}
 </style>

src/design/vent/antCss.less

@@ -141,70 +141,117 @@ tr.@{ventSpace}-table-expanded-row:hover > td {
   color: @vent-font-color !important;
 }
 
-/* modal 组件 */
-.@{ventSpace}-modal-content {
-  color: @vent-font-color !important;
-  background-color: @vent-modal-bg !important;
-  border: 1px solid @vent-modal-border !important;
-  box-shadow: 0px 0px 10px @vent-modal-box-shadow inset !important;
-  backdrop-filter: blur(10px);
-}
-.@{ventSpace}-modal-header {
-  color: @vent-font-color !important;
-  box-shadow: 0px 0px 0px @vent-modal-box-shadow inset !important;
-  border-color: #ffffff22 !important;
-  backdrop-filter: blur(10px);
+// /* modal 组件 */
+// .@{ventSpace}-modal-content {
+//   color: @vent-font-color !important;
+//   background-color: @vent-modal-bg !important;
+//   border: 1px solid @vent-modal-border !important;
+//   box-shadow: 0px 0px 10px @vent-modal-box-shadow inset !important;
+//   backdrop-filter: blur(10px);
+// }
+// .@{ventSpace}-modal-header {
+//   color: @vent-font-color !important;
+//   box-shadow: 0px 0px 0px @vent-modal-box-shadow inset !important;
+//   border-color: #ffffff22 !important;
+//   backdrop-filter: blur(10px);
+//   background-color: transparent !important;
+//   .jeecg-basic-title {
+//     color: @vent-font-color !important;
+//   }
+//   .@{ventSpace}-modal-title {
+//     color: @vent-modal-title !important;
+//   }
+// }
+// .@{ventSpace}-modal-body {
+//   height: calc(100% - 48px) !important;
+//   .j-box-bottom-button-float {
+//     background-color: #ffffff00 !important;
+//   }
+//   .@{ventSpace}-modal-confirm-title {
+//     color: @vent-font-color !important;
+//   }
+//   .@{ventSpace}-form {
+//     label {
+//       color: @vent-font-color;
+//     }
+//     .anticon.@{ventSpace}-input-clear-icon,
+//     .anticon {
+//       color: @vent-font-color !important;
+//     }
+//     .@{ventSpace}-select-selector {
+//       color: @vent-font-color;
+//       background-color: #ffffff00 !important;
+//     }
+//     .@{ventSpace}-form-item-control-input-content {
+//       .@{ventSpace}-input-affix-wrapper {
+//         background-color: #ffffff00 !important;
+//       }
+//       .@{ventSpace}-input {
+//         color: @vent-font-color;
+//         background-color: #ffffff00 !important;
+//       }
+//       .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-item,
+//       .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-placeholder {
+//         color: @vent-font-color;
+//       }
+//     }
+//   }
+// }
+// .@{ventSpace}-modal-close {
+//   color: #ffffff !important; 
+// }
+
+// .@{ventSpace}-modal-footer {
+//   border-color: #ffffff22 !important;
+// }
+
+.zxm-modal-content {
+  // height: 700px;
+  border: none !important;
+  box-shadow: none !important;
   background-color: transparent !important;
-  .jeecg-basic-title {
-    color: @vent-font-color !important;
-  }
-  .@{ventSpace}-modal-title {
-    color: @vent-modal-title !important;
-  }
+  background-color: transparent !important;
+  background: url('@/assets/images/gasInjection/9-1.png') no-repeat;
+  background-size: 100% 100% !important;
 }
-.@{ventSpace}-modal-body {
-  height: calc(100% - 48px) !important;
-  .j-box-bottom-button-float {
-    background-color: #ffffff00 !important;
-  }
-  .@{ventSpace}-modal-confirm-title {
-    color: @vent-font-color !important;
-  }
-  .@{ventSpace}-form {
-    label {
-      color: @vent-font-color;
-    }
-    .anticon.@{ventSpace}-input-clear-icon,
-    .anticon {
-      color: @vent-font-color !important;
-    }
-    .@{ventSpace}-select-selector {
-      color: @vent-font-color;
-      background-color: #ffffff00 !important;
-    }
-    .@{ventSpace}-form-item-control-input-content {
-      .@{ventSpace}-input-affix-wrapper {
-        background-color: #ffffff00 !important;
-      }
-      .@{ventSpace}-input {
-        color: @vent-font-color;
-        background-color: #ffffff00 !important;
-      }
-      .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-item,
-      .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-placeholder {
-        color: @vent-font-color;
-      }
-    }
+
+.zxm-modal-header {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-color: none !important;
+  backdrop-filter: blur(0);
+  background: url('@/assets/images/gasInjection/9-2.png') no-repeat bottom !important;
+  border-bottom: 0px !important;
+
+  .zxm-modal-title {
+    display: flex;
+    justify-content: center;
+    color: #fff !important;
+    text-align: center;
+    font-size: 18px;
   }
 }
-.@{ventSpace}-modal-close {
-  color: #ffffff !important; 
+
+.zxm-modal-close {
+  position: absolute;
+  top: -26px !important;
+  right: -22px !important;
+  color: #2b9fce !important;
 }
 
-.@{ventSpace}-modal-footer {
-  border-color: #ffffff22 !important;
+.zxm-modal-close-x {
+  display: inline-block;
+  width: 44px !important;
+  height: 44px !important;
+  line-height: 39px !important;
+  background-color: #00000b;
+  border-radius: 50%;
+  border: 3px solid #2b9fce;
+  font-size: 24px !important;
+  font-weight: 700 !important;
 }
 
+
 /* 加载 */
 .@{ventSpace}-spin-container:hover {
   background-color: transparent !important;

src/views/vent/deviceManager/comment/DeviceModal.vue

@@ -265,4 +265,7 @@
     margin-left: 5px;
     color: #fff;
   }
+  ::v-deep .j-box-bottom-button-float{
+    background: transparent !important;
+  }
 </style>

src/views/vent/deviceManager/comment/FormModal.vue

@@ -63,11 +63,12 @@ async function handleSubmit(v) {
 }
 .vent-form {
   // width: 100%;
-  max-height: 700px;
-  overflow-y: auto;
+  max-height: 660px;
+  // overflow-y: auto;
 
   .@{ventSpace}-select-selection-item {
     color: rgba(255, 255, 255, 1) !important;
   }
 }
+
 </style>