Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

2024-06-11 17:45:51 +08:00 · 2024-06-11 17:45:51 +08:00 · 8efcd2a4ba
parent 81d22661e0 b5d33d6ae4
commit 8efcd2a4ba
7 changed files with 136 additions and 110 deletions
--- a/public/huichuang_logo.png
+++ b/public/huichuang_logo.png
--- a/public/iocn/text-indent-left.svg
+++ b/public/iocn/text-indent-left.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-left" viewBox="0 0 16 16">
+  <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708M7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/>
+</svg>
--- a/public/iocn/text-indent-right.svg
+++ b/public/iocn/text-indent-right.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-right" viewBox="0 0 16 16">
+  <path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m10.646 2.146a.5.5 0 0 1 .708.708L11.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zM2 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/>
+</svg>
--- a/src/views/demo/form-design/components/VFormDesign/index.vue
+++ b/src/views/demo/form-design/components/VFormDesign/index.vue
@ -4,15 +4,21 @@
      :class="`left ${prefixCls}-sider`"
      collapsible
      collapsedWidth="0"
-      width="300"
+      width="345"
      :zeroWidthTriggerStyle="{
        'margin-top': '-70px',
-        'background-color': 'gray',
+        'background-color': 'white',
+        width: '35px',
+        height: '35px',
+        'background-image': `url(/iocn/text-indent-right.svg)`,
+        'background-position': 'center',
+        'background-repeat': 'no-repeat',
+        'border-radius:': '15px',
      }"
      breakpoint="md"
    >
      <div class="collapseItem-box">
-        <CollapseContainer title="基础控件" ghost>
+        <CollapseContainer title="基础控件">
          <CollapseItem
            :list="baseComponents"
            :handleListPush="handleListPushDrag"
@ -57,8 +63,17 @@
      collapsible
      :reverseArrow="true"
      collapsedWidth="0"
-      width="270"
-      :zeroWidthTriggerStyle="{ 'margin-top': '-70px', 'background-color': 'gray' }"
+      width="320"
+      :zeroWidthTriggerStyle="{
+        'margin-top': '-70px',
+        'background-color': 'white',
+        width: '35px',
+        height: '35px',
+        'background-image': `url(/iocn/text-indent-left.svg)`,
+        'background-position': 'center',
+        'background-repeat': 'no-repeat',
+        'border-radius:': '15px',
+      }"
      breakpoint="lg"
    >
      <PropsPanel ref="propsPanel" :activeKey="formConfig.activeKey">
@ -433,7 +448,7 @@
  }

  .collapseItem-box {
-    height: calc(100vh - 60px);
+    height: calc(100vh - 55px);
    overflow: auto;
  }
 </style>
--- a/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue
+++ b/src/views/demo/form-design/components/VFormDesign/modules/Toolbar.vue
@ -5,21 +5,21 @@
  <div class="operating-area">
    <!-- 头部操作按钮区域 start -->
    <!-- 操作左侧区域 start -->
-    <div class="left-btn-box">
+    <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" />
+          <Icon :icon="item.icon" :style="{ fontSize: '21px' }" />
        </a>
      </Tooltip>
      <Divider type="vertical" />
      <Tooltip title="撤销">
        <a :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo">
-          <Icon icon="ant-design:undo-outlined" />
+          <Icon icon="ant-design:undo-outlined" :style="{ fontSize: '21px' }" />
        </a>
      </Tooltip>
      <Tooltip title="重做">
        <a :class="{ disabled: !canRedo }" :disabled="!canRedo" @click="redo">
-          <Icon icon="ant-design:redo-outlined" />
+          <Icon icon="ant-design:redo-outlined" :style="{ fontSize: '21px' }" />
        </a>
      </Tooltip>
    </div>
@ -80,7 +80,7 @@
            title: '生成代码',
            type: 'exportCode',
            event: 'handleOpenCodeModal',
-            icon: 'ant-design:code-filled',
+            icon: 'bi:code-slash',
          },
          {
            title: '清空',
--- a/src/views/demo/form-design/core/formItemConfig.ts
+++ b/src/views/demo/form-design/core/formItemConfig.ts
@ -5,7 +5,7 @@ import { IVFormComponent } from '../typings/v-form-component';
 import { isArray } from 'lodash-es';
 import { componentMap as VbenCmp, add } from '@/components/Form/src/componentMap';
 import { ComponentType } from '@/components/Form/src/types';
-import { uploadApi,fileUploadApi } from '@/api/sys/upload';
+import { uploadApi, fileUploadApi } from '@/api/sys/upload';
 import { componentMap as Cmp } from '../components';
 import { Component } from 'vue';
 import { getDeptList, getAccountList, getPosGroupList } from '@/api/demo/system';
@ -106,7 +106,7 @@ export const customComponents: IVFormComponent[] = [
  {
    component: 'InputGuid',
    label: 'GUID主键',
-    icon: 'bi:input-cursor-text',
+    icon: 'bi:braces-asterisk',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
@ -114,7 +114,7 @@ export const customComponents: IVFormComponent[] = [
  {
    component: 'TreeSelect',
    label: '职级选择',
-    icon: 'gg:select',
+    icon: 'bi:list-stars',
    field: '',
    colProps: { span: 24 },
    componentProps: {
@ -129,7 +129,7 @@ export const customComponents: IVFormComponent[] = [
  {
    component: 'TreeSelect',
    label: '部门选择',
-    icon: 'clarity:tree-view-line',
+    icon: 'bi:people',
    field: '',
    colProps: { span: 24 },
    componentProps: {
@ -144,7 +144,7 @@ export const customComponents: IVFormComponent[] = [
  {
    component: 'Select',
    label: '人员选择',
-    icon: 'gg:select',
+    icon: 'bi:person',
    field: '',
    colProps: { span: 24 },
    componentProps: {
@ -158,7 +158,7 @@ export const customComponents: IVFormComponent[] = [
  {
    component: 'MapGeom',
    label: '图斑',
-    icon: 'ant-design:heat-map-outlined',
+    icon: 'bi:box-arrow-in-up-left',
    field: 'MapGeom',
    colProps: { span: 24 },
    componentProps: {},
@ -167,7 +167,7 @@ export const customComponents: IVFormComponent[] = [
    field: '',
    component: 'Grid',
    label: '设计子表',
-    icon: 'ant-design:snippets-outlined',
+    icon: 'bi:list-ul',
    type: 'subTable',
    componentProps: {},
    columns: [
@ -190,7 +190,7 @@ export const baseComponents: IVFormComponent[] = [
  {
    component: 'InputCountDown',
    label: '倒计时输入',
-    icon: 'line-md:iconify2',
+    icon: 'ant-design:hourglass-outlined',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
@ -198,7 +198,7 @@ export const baseComponents: IVFormComponent[] = [
  {
    component: 'IconPicker',
    label: '图标选择器',
-    icon: 'line-md:iconify2',
+    icon: 'bi:grid',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
@ -214,7 +214,7 @@ export const baseComponents: IVFormComponent[] = [
  {
    component: 'AutoComplete',
    label: '自动完成',
-    icon: 'wpf:password1',
+    icon: 'bi:check2-circle',
    colProps: { span: 24 },
    field: '',
    componentProps: {
@ -242,36 +242,10 @@ export const baseComponents: IVFormComponent[] = [
      dashed: true,
    },
  },
-  {
-    component: 'Checkbox',
-    label: '复选框',
-    icon: 'ant-design:check-circle-outlined',
-    colProps: { span: 24 },
-    field: '',
-  },
-  {
-    component: 'CheckboxGroup',
-    label: '复选框-组',
-    icon: 'ant-design:check-circle-filled',
-    field: '',
-    colProps: { span: 24 },
-    componentProps: {
-      options: [
-        {
-          label: '选项1',
-          value: '1',
-        },
-        {
-          label: '选项2',
-          value: '2',
-        },
-      ],
-    },
-  },
  {
    component: 'Input',
    label: '输入框',
-    icon: 'bi:input-cursor-text',
+    icon: 'bi:braces',
    field: '',
    colProps: { span: 24 },
    componentProps: {
@ -289,15 +263,23 @@ export const baseComponents: IVFormComponent[] = [
  {
    component: 'InputTextArea',
    label: '文本域',
-    icon: 'ant-design:file-text-filled',
+    icon: 'ant-design:file-text-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
  {
-    component: 'Select',
-    label: '下拉选择',
-    icon: 'gg:select',
+    component: 'Radio',
+    label: '单选框',
+    icon: 'carbon:radio-button-checked',
+    field: '',
+    colProps: { span: 24 },
+    componentProps: {},
+  },
+  {
+    component: 'RadioGroup',
+    label: '单选框-组',
+    icon: 'bi:ui-radios-grid',
    field: '',
    colProps: { span: 24 },
    componentProps: {
@ -313,19 +295,17 @@ export const baseComponents: IVFormComponent[] = [
      ],
    },
  },
-
  {
-    component: 'Radio',
-    label: '单选框',
-    icon: 'ant-design:check-circle-outlined',
-    field: '',
+    component: 'Checkbox',
+    label: '复选框',
+    icon: 'bi:check-square',
    colProps: { span: 24 },
-    componentProps: {},
+    field: '',
  },
  {
-    component: 'RadioGroup',
-    label: '单选框-组',
-    icon: 'carbon:radio-button-checked',
+    component: 'CheckboxGroup',
+    label: '复选框-组',
+    icon: 'bi:ui-checks-grid',
    field: '',
    colProps: { span: 24 },
    componentProps: {
@ -396,11 +376,45 @@ export const baseComponents: IVFormComponent[] = [
  {
    component: 'Switch',
    label: '开关',
-    icon: 'entypo:switch',
+    icon: 'bi:toggle-off',
    field: '',
    colProps: { span: 24 },
    componentProps: {},
  },
+  {
+    component: 'Button',
+    label: '按钮组件',
+    icon: 'ant-design:build-outlined',
+    field: '',
+    colProps: { span: 24 },
+    hiddenLabel: true,
+    componentProps: {
+      type: 'default',
+      shape: 'default',
+      size: 'middle',
+      icon: '',
+      clickCode: '',
+    },
+  },
+  {
+    component: 'Select',
+    label: '下拉选择',
+    icon: 'gg:select',
+    field: '',
+    colProps: { span: 24 },
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '1',
+        },
+        {
+          label: '选项2',
+          value: '2',
+        },
+      ],
+    },
+  },
  {
    component: 'TreeSelect',
    label: '树形选择',
@ -461,21 +475,6 @@ export const baseComponents: IVFormComponent[] = [
      ],
    },
  },
-  {
-    component: 'Button',
-    label: '按钮组件',
-    icon: 'ant-design:build-outlined',
-    field: '',
-    colProps: { span: 24 },
-    hiddenLabel: true,
-    componentProps: {
-      type: 'default',
-      shape: 'default',
-      size: 'middle',
-      icon: '',
-      clickCode: '',
-    },
-  },
  // {
  //   component: 'ColorPicker',
  //   label: '颜色选择器',
@ -490,7 +489,7 @@ export const baseComponents: IVFormComponent[] = [
  {
    component: 'slot',
    label: '插槽',
-    icon: 'vs:timeslot-question',
+    icon: 'bi:inboxes',
    field: '',
    colProps: { span: 24 },
    componentProps: {
@ -498,7 +497,7 @@ export const baseComponents: IVFormComponent[] = [
    },
  },
  {
-    component:'CreateUser',
+    component: 'CreateUser',
    type: 'createuser',
    label: '创建人员',
    icon: 'mdi:account-check',
@ -507,7 +506,7 @@ export const baseComponents: IVFormComponent[] = [
    componentProps: {},
  },
  {
-    component:'ModifyUser',
+    component: 'ModifyUser',
    type: 'modifyuser',
    label: '修改人员',
    icon: 'mdi:account-edit',
@ -516,7 +515,7 @@ export const baseComponents: IVFormComponent[] = [
    componentProps: {},
  },
  {
-    component:'CreateTime',
+    component: 'CreateTime',
    type: 'createtime',
    label: '创建时间',
    icon: 'ic:outline-event-available',
@ -525,70 +524,74 @@ export const baseComponents: IVFormComponent[] = [
    componentProps: {},
  },
  {
-    component:'ModifyTime',
+    component: 'ModifyTime',
    type: 'modifytime',
    label: '修改时间',
    icon: 'ic:outline-event',
    colProps: { span: 24 },
    field: '',
    componentProps: {},
-  },{
+  },
+  {
    component: 'FileUpload',
    label: '文件上传',
    icon: 'ant-design:file-add-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
-      api:fileUploadApi,
-      maxNumber:10,
+      api: fileUploadApi,
+      maxNumber: 10,
      maxSize: 2,
-      name:"files",
-      action:"/api/Files/Upload",
-      server:"http://192.168.10.102:9023"
+      name: 'files',
+      action: '/api/Files/Upload',
+      server: 'http://192.168.10.102:9023',
    },
-  },{
+  },
+  {
    component: 'ImageUpload',
    label: '图片上传',
    icon: 'ant-design:file-image-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
-      api:fileUploadApi,
-      maxNumber:10,
+      api: fileUploadApi,
+      maxNumber: 10,
      accept: ['png', 'jpeg', 'jpg'],
      maxSize: 2,
-      name:"files",
-      action:"/api/Files/Upload",
-      server:"http://192.168.10.102:9023"
+      name: 'files',
+      action: '/api/Files/Upload',
+      server: 'http://192.168.10.102:9023',
    },
-  },{
+  },
+  {
    component: 'VideoUpload',
    label: '视频上传',
    icon: 'ant-design:video-camera-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
-      api:fileUploadApi,
-      maxNumber:10,
+      api: fileUploadApi,
+      maxNumber: 10,
      accept: ['mp4', 'mov', 'avi'],
      maxSize: 100,
-      name:"files",
-      action:"/api/Files/Upload",
-      server:"http://192.168.10.102:9023"
+      name: 'files',
+      action: '/api/Files/Upload',
+      server: 'http://192.168.10.102:9023',
    },
-  },{
+  },
+  {
    component: 'Location',
    label: '获取位置',
    icon: 'ant-design:environment-outlined',
    field: '',
    colProps: { span: 24 },
    componentProps: {
-      api:()=>1,
-      maxNumber:10,
+      api: () => 1,
+      maxNumber: 10,
      accept: ['mp4', 'mov', 'avi'],
      maxSize: 100,
    },
-  }
+  },
 ];

 // https://next.antdv.com/components/transfer-cn
@ -632,7 +635,7 @@ export const layoutComponents: IVFormComponent[] = [
    field: '',
    component: 'Grid',
    label: '栅格布局',
-    icon: 'icon-grid',
+    icon: 'bi:border-all',
    componentProps: {},
    columns: [
      {
@ -649,7 +652,7 @@ export const layoutComponents: IVFormComponent[] = [
    field: '',
    component: 'Card',
    label: '卡片布局',
-    icon: 'ant-design:tags-outlined',
+    icon: 'bi:card-text',
    componentProps: {},
    columns: [
      {
@ -665,7 +668,7 @@ export const layoutComponents: IVFormComponent[] = [
  {
    component: 'CardGroup',
    label: '卡片组',
-    icon: 'ic:round-auto-awesome-motion',
+    icon: 'bi:card-list',
    colProps: { span: 24 },
    field: '',
    componentProps: {
@ -673,12 +676,12 @@ export const layoutComponents: IVFormComponent[] = [
        {
          label: '卡片1',
          value: '1',
-          field:`use_card_1`,
+          field: 'use_card_1',
          children: [],
        },
        {
          label: '卡片2',
-          field:`use_card_2`,
+          field: 'use_card_2',
          value: '2',
          children: [],
        },
--- a/src/views/demo/onlineform/formdesign/FormModal.vue
+++ b/src/views/demo/onlineform/formdesign/FormModal.vue
@ -11,7 +11,9 @@
  >
    <div :class="`${prefixCls}`">
      <div :class="`${prefixCls}-header`">
-        <div :class="`${prefixCls}-header-logo`"> 慧创 表单设计 </div>
+        <div :class="`${prefixCls}-header-logo`">
+          <img src="/huichuang_logo.png" alt="慧创科技" /> <span>表单设计</span>
+        </div>
        <div :class="`${prefixCls}-header-stepsBox`">
          <a-steps
            :current="stepsCurrent"