表单设计UI、表单发布-添加编号重复检验

2024-06-12 17:51:25 +08:00 · 2024-06-12 17:51:25 +08:00 · f5a4eaa968
parent 770bef07ce
commit f5a4eaa968
9 changed files with 323 additions and 65 deletions
--- a/src/api/demo/formModule.ts
+++ b/src/api/demo/formModule.ts
@ -25,6 +25,8 @@ enum Api {
  Post_UpdateForm = '/api/FormModule/UpdateForm',
  // 获取字典分类列表
  Get_SysDataItemLoad = '/api/SysDataItem/Load',
+  // 判断数据表字段重复
+  Get_ExistFiled = '/api/FormModule/ExistFiled',
 }

 // 获取分页列表
@ -78,3 +80,11 @@ export function Get_SysDataItemLoad() {
    url: Api.Get_SysDataItemLoad,
  });
 }
+
+// 判断数据表字段重复
+export function Get_Get_ExistFiled(params) {
+  return defHttp.get<responsesmodel>({
+    url: Api.Get_ExistFiled,
+    params,
+  });
+}
--- a/src/components/Container/src/collapse/CollapseContainer.vue
+++ b/src/components/Container/src/collapse/CollapseContainer.vue
@ -31,6 +31,10 @@
     * Delayed loading time
     */
    lazyTime: { type: Number, default: 0 },
+    /**
+     * Title is Bold?
+     */
+    isTitleBold: { type: Boolean, default: false },
  };

  export type CollapseContainerProps = ExtractPropTypes<typeof collapseContainerProps>;
@ -65,6 +69,7 @@
            v-slots={{
              title: slots.title,
              action: slots.action,
+              isTitleBold: slots.isTitleBold,
            }}
          />

--- a/src/components/Container/src/collapse/CollapseHeader.vue
+++ b/src/components/Container/src/collapse/CollapseHeader.vue
@ -6,6 +6,7 @@
  const collapseHeaderProps = {
    prefixCls: String,
    title: String,
+    isTitleBold: Boolean,
    show: Boolean,
    canExpan: Boolean,
    helpMessage: {
@ -24,21 +25,40 @@
    setup(props, { slots, attrs, emit }) {
      const { prefixCls } = useDesign('collapse-container');
      const _prefixCls = computed(() => props.prefixCls || unref(prefixCls));
-      return () => (
-        <div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
-          <BasicTitle helpMessage={props.helpMessage} normal>
-            {slots.title?.() || props.title}
-          </BasicTitle>
+      // v-if="props.isTitleBold" 无效
+      if (props.isTitleBold) {
+        return () => (
+          <div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
+            <BasicTitle helpMessage={props.helpMessage} normal>
+              <strong>{slots.title?.() || props.title}</strong>
+            </BasicTitle>

-          <div class={`${unref(_prefixCls)}__action`}>
-            {slots.action
-              ? slots.action({ expand: props.show, onClick: () => emit('expand') })
-              : props.canExpan && (
-                  <BasicArrow up expand={props.show} onClick={() => emit('expand')} />
-                )}
+            <div class={`${unref(_prefixCls)}__action`}>
+              {slots.action
+                ? slots.action({ expand: props.show, onClick: () => emit('expand') })
+                : props.canExpan && (
+                    <BasicArrow up expand={props.show} onClick={() => emit('expand')} />
+                  )}
+            </div>
          </div>
-        </div>
-      );
+        );
+      } else {
+        return () => (
+          <div class={[`${unref(_prefixCls)}__header px-2 py-5`, attrs.class]}>
+            <BasicTitle helpMessage={props.helpMessage} normal>
+              {slots.title?.() || props.title}
+            </BasicTitle>
+
+            <div class={`${unref(_prefixCls)}__action`}>
+              {slots.action
+                ? slots.action({ expand: props.show, onClick: () => emit('expand') })
+                : props.canExpan && (
+                    <BasicArrow up expand={props.show} onClick={() => emit('expand')} />
+                  )}
+            </div>
+          </div>
+        );
+      }
    },
  });
 </script>
--- a/src/views/demo/form-design/components/VFormDesign/index.vue
+++ b/src/views/demo/form-design/components/VFormDesign/index.vue
@ -18,7 +18,7 @@
      breakpoint="md"
    >
      <div class="collapseItem-box">
-        <CollapseContainer title="基础控件">
+        <CollapseContainer title="基础控件" isTitleBold="true">
          <CollapseItem
            :list="baseComponents"
            :handleListPush="handleListPushDrag"
@ -26,7 +26,7 @@
            @handle-list-push="handleListPush"
          />
        </CollapseContainer>
-        <CollapseContainer title="自定义控件">
+        <CollapseContainer title="自定义控件" isTitleBold="true">
          <CollapseItem
            :list="customComponents"
            @add-attrs="handleAddAttrs"
@ -34,7 +34,7 @@
            @handle-list-push="handleListPush"
          />
        </CollapseContainer>
-        <CollapseContainer title="布局控件">
+        <CollapseContainer title="布局控件" isTitleBold="true">
          <CollapseItem
            :list="layoutComponents"
            :handleListPush="handleListPushDrag"
@ -451,4 +451,8 @@
    height: calc(100vh - 55px);
    overflow: auto;
  }
+
+  .vben-basic-title {
+    font-weight: bold;
+  }
 </style>
--- a/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue
+++ b/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue
@ -7,20 +7,25 @@
    <!-- 操作左侧区域 start -->
    <div class="left-btn-box" style="text-indent: 20px">
      <Tooltip v-for="item in toolbarsConfigs" :title="item.title" :key="item.icon">
-        <a @click="$emit(item.event)" class="toolbar-text">
-          <Icon :icon="item.icon" :style="{ fontSize: '21px' }" />
-        </a>
+        <a-button @click="$emit(item.event)" id="button">
+          <template #icon>
+            <Icon :icon="item.icon" :style="{ fontSize: '16px' }" />
+          </template>
+        </a-button>
      </Tooltip>
-      <Divider type="vertical" />
      <Tooltip title="撤销">
-        <a :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo">
-          <Icon icon="ant-design:undo-outlined" :style="{ fontSize: '21px' }" />
-        </a>
+        <a-button :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo" id="button">
+          <template #icon>
+            <Icon icon="ant-design:undo-outlined" :style="{ fontSize: '16px' }" />
+          </template>
+        </a-button>
      </Tooltip>
      <Tooltip title="重做">
-        <a :class="{ disabled: !canRedo }" :disabled="!canRedo" @click="redo">
-          <Icon icon="ant-design:redo-outlined" :style="{ fontSize: '21px' }" />
-        </a>
+        <a-button :class="{ disabled: !canRedo }" @click="redo" id="button">
+          <template #icon>
+            <Icon icon="ant-design:redo-outlined" :style="{ fontSize: '16px' }" />
+          </template>
+        </a-button>
      </Tooltip>
    </div>
  </div>
@ -30,7 +35,7 @@
  import { defineComponent, inject, reactive, toRefs } from 'vue';
  import { UseRefHistoryReturn } from '@vueuse/core';
  import { IFormConfig } from '../../../typings/v-form-component';
-  import { Tooltip, Divider } from 'ant-design-vue';
+  import { Tooltip } from 'ant-design-vue';
  import Icon from '@/components/Icon/Icon.vue';

  interface IToolbarsConfig {
@ -45,7 +50,6 @@
    components: {
      Tooltip,
      Icon,
-      Divider,
    },
    setup() {
      const state = reactive<{
@ -56,7 +60,7 @@
            title: '预览-支持布局',
            type: 'preview',
            event: 'handlePreview',
-            icon: 'ant-design:chrome-filled',
+            icon: 'bi:life-preserver',
          },
          // {
          //   title: '预览-不支持布局',
@ -113,9 +117,10 @@
    line-height: @operating-area-height;
    text-align: left;

-    a {
+    #button {
      margin: 0 5px;
-      color: #666;
+      width: 32px;
+      height: 32px;

      &.disabled,
      &.disabled:hover {
@ -127,7 +132,6 @@
      }

      > span {
-        padding-left: 2px;
        font-size: 14px;
      }
    }
--- a/src/views/demo/form-design/components/VFormDesign/styles/drag.less
+++ b/src/views/demo/form-design/components/VFormDesign/styles/drag.less
@ -1,11 +1,14 @@
 .draggable-box {
  height: 100%;
  overflow: auto;
+  background-color: @background-color;
+  

  :deep(.list-main) {
    position: relative;
    padding: 5px;
    overflow: hidden;
+    border-radius: 4px;

    .moving {
      position: relative;
@ -21,7 +24,7 @@
        top: 0;
        right: 0;
        width: 100%;
-        height: 5px;
+        height: 3px;
        background-color: @primary-color;
      }
    }
@ -33,6 +36,7 @@
      padding: 8px;
      overflow: hidden;
      transition: all 0.3s;
+      border-radius: 3px;

      &:hover {
        background-color: @primary-hover-bg-color;
@ -44,14 +48,16 @@
        position: absolute;
        top: 0;
        right: -100%;
-        width: 100%;
-        height: 5px;
+        width: 0%;
+        height: 3px;
        transition: all 0.3s;
+        outline: 3px solid @primary-color;
        background-color: @primary-color;
      }

      &.active {
-        outline-offset: 0;
+        outline: 3px solid @primary-color;
+        // outline-offset: 0;
        background-color: @primary-hover-bg-color;

        &::before {
@ -84,7 +90,7 @@
      .show-key-box {
        // 显示key
        position: absolute;
-        right: 5px;
+        right: 3px;
        bottom: 2px;
        // z-index: 999;
        color: @primary-color;
@ -133,6 +139,12 @@
      overflow: hidden;
      transition: all 0.3s;
      background-color: @layout-background-color;
+      border-radius: 3px;
+
+      // 鼠标划过
+      &:hover {
+        background-color: @layout-hover-bg-color;
+      }

      .form-item-box {
        position: relative;
@ -170,14 +182,15 @@
        position: absolute;
        top: 0;
        right: -100%;
-        width: 100%;
-        height: 5px;
+        width: 0%;
+        height: 3px;
        transition: all 0.3s;
        background: transparent;
      }

      &.active {
-        outline-offset: 0;
+        outline: 3px solid @layout-color;
+        // outline-offset: 0;
        background-color: @layout-hover-bg-color;

        &::before {
--- a/src/views/demo/form-design/components/VFormDesign/styles/variable.less
+++ b/src/views/demo/form-design/components/VFormDesign/styles/variable.less
@ -1,11 +1,11 @@
 // 表单设计器样式
-@primary-color: #13c2c2;
-@layout-color: #9867f7;
+@background-color: #EBEDF1;
+@primary-color: #1E5EFFFF;
+@layout-color: #A91EFFFF;

-@primary-background-color: fade(@primary-color, 6%);
-@primary-hover-bg-color: fade(@primary-color, 20%);
-@layout-background-color: fade(@layout-color, 12%);
-@layout-hover-bg-color: fade(@layout-color, 24%);
+@primary-hover-bg-color: #DFEAFC;
+@layout-background-color: #E9E4F5;
+@layout-hover-bg-color: #d7d2ff;

@title-text-color: #fff;
@border-color: #ccc;
--- a/src/views/demo/form-design/core/formItemConfig.ts
+++ b/src/views/demo/form-design/core/formItemConfig.ts
@ -453,7 +453,7 @@ export const baseComponents: IVFormComponent[] = [
  {
    component: 'Cascader',
    label: '级联选择',
-    icon: 'ant-design:check-outlined',
+    icon: 'ant-design:block-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
--- a/src/views/demo/onlineform/formModule/modalForm.vue
+++ b/src/views/demo/onlineform/formModule/modalForm.vue
@ -74,9 +74,10 @@
  import { useMessage } from '@/hooks/web/useMessage';
  import { getMenuList } from '@/api/demo/system';
  import { useI18n } from '@/hooks/web/useI18n';
-
+  import { FormInstance } from 'ant-design-vue';
  import ModuleModal from './modalForm-Modal.vue';
  import { functionGetSchemePageList, functionGetForm } from '@/api/demo/formScheme';
+  import { Get_Get_ExistFiled } from '@/api/demo/formModule';

  // emit
  const emit = defineEmits(['change-form-verisons', 'set-steps-current']);
@ -110,7 +111,7 @@
  // 表单选择声明
  const [registerModal, { openModal }] = useModal();
  // 表单ref
-  const formModuleRef = ref<any>();
+  let formModuleRef: FormInstance | null = null;
  // 版本options
  const formVerisons = ref([]);
  // 上级options
@ -134,12 +135,147 @@
  });
  // 规则
  let rules = {
-    code: [{ required: true, message: '请输入' }],
-    name: [{ required: true, message: '请输入' }],
-    icon: [{ component: 'IconPicker', required: true, message: '请输入' }],
-    formCodeName: [{ required: true, message: '请输入' }],
-    formVerison: [{ required: true, message: '请选择版本' }],
-    pmoduleId: [{ required: true, message: '请输入' }],
+    code: [
+      {
+        required: true,
+        asyncValidator: async (rule, value, callback) => {
+          // 验证逻辑
+          if (value) {
+            try {
+              let filedsJson = {
+                Code: formData.value.code,
+              };
+              if (props.isEdit) {
+                // 编辑
+                let query: any = {
+                  keyValue: props.editData.record.id,
+                  tableName: 'form_module',
+                  keyName: 'Id',
+                  filedsJson: JSON.stringify(filedsJson),
+                };
+                await Get_Get_ExistFiled(query).then((res) => {
+                  if (res) {
+                    callback();
+                  } else {
+                    callback(new Error('编号重复'));
+                  }
+                });
+              } else {
+                // 新增
+                let query: any = {
+                  tableName: 'form_module',
+                  keyName: 'Id',
+                  filedsJson: JSON.stringify(filedsJson),
+                };
+                await Get_Get_ExistFiled(query).then((res) => {
+                  if (res) {
+                    callback();
+                  } else {
+                    callback(new Error('编号重复'));
+                  }
+                });
+              }
+            } catch (error) {
+              ('验证出错');
+            }
+          } else {
+            callback(new Error('请输入编号'));
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    name: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请输入名称'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    icon: [
+      {
+        component: 'IconPicker',
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择图标'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    formCodeName: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择表单'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    formVerison: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择表单版本'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
+    pmoduleId: [
+      {
+        required: true,
+        validator: (rule, value, callback) => {
+          try {
+            // 验证逻辑
+            if (value) {
+              callback();
+            } else {
+              callback(new Error('请选择上级'));
+            }
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        trigger: ['blur'],
+      },
+    ],
    enabledMark: [{ required: true }],
  };

@ -159,21 +295,34 @@
  // 监视props
  watch(
    () => props.isNextSteps,
-    () => {
-      // 基本配置页数据是否填完整
+    async () => {
      if (props.isNextSteps) {
-        let checkdata = formData.value;
+        // if (formModuleRef) {
+        //   try {
+        //     await formModuleRef.validate();
+        //   } catch (error) {
+        //     console.log(error);
+        //   }
+        // }
        if (
-          checkdata.code === '' ||
-          checkdata.formCode === '' ||
-          checkdata.name === '' ||
-          checkdata.formVerison === '' ||
-          checkdata.pmoduleId === ''
+          formData.value.code === '' ||
+          formData.value.name === '' ||
+          formData.value.icon === '' ||
+          formData.value.formCode === '' ||
+          formData.value.formVerison === '' ||
+          formData.value.pmoduleId === ''
        ) {
-          createMessage.error(t('数据未填完整'));
+          createMessage.error(t('数据未填写完整'));
          emit('set-steps-current', false);
        } else {
-          emit('set-steps-current', true);
+          // 验证通过后的逻辑
+          let res = await checkExistFiled();
+          if (res) {
+            emit('set-steps-current', true);
+          } else {
+            createMessage.error(t('表单的编号值重复'));
+            emit('set-steps-current', false);
+          }
        }
      }
    },
@ -238,6 +387,59 @@
    getSchemeRow(result.info);
  }

+  // 验证通过后的逻辑
+  async function checkExistFiled() {
+    try {
+      let filedsJson = {
+        Code: formData.value.code,
+      };
+      let result = false;
+      if (props.isEdit) {
+        // 编辑
+        let query: any = {
+          keyValue: props.editData.record.id,
+          tableName: 'form_module',
+          keyName: 'Id',
+          filedsJson: JSON.stringify(filedsJson),
+        };
+        await Get_Get_ExistFiled(query)
+          .then((res) => {
+            if (res) {
+              result = true;
+            } else {
+              result = false;
+            }
+          })
+          .catch((error) => {
+            createMessage.error('验证出错' + error);
+            result = true;
+          });
+      } else {
+        // 新增
+        let query: any = {
+          tableName: 'form_module',
+          keyName: 'Id',
+          filedsJson: JSON.stringify(filedsJson),
+        };
+        await Get_Get_ExistFiled(query)
+          .then((res) => {
+            if (res) {
+              result = true;
+            } else {
+              result = false;
+            }
+          })
+          .catch((error) => {
+            createMessage.error('验证出错' + error);
+            result = false;
+          });
+      }
+      return result;
+    } catch (error) {
+      ('验证出错');
+    }
+  }
+
  defineExpose({
    formData,
  });