소스 검색

表单支持button、divider类型

tongshangming 2 년 전
부모
커밋
9fd75fc402

+ 2 - 2
package.json

@@ -1,6 +1,6 @@
 {
   "name": "fs-admin",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "scripts": {
     "dev": "vite --host",
     "build": "run-p type-check build-only",
@@ -19,7 +19,7 @@
     "dayjs": "^1.11.8",
     "echarts": "^5.4.2",
     "echarts-wordcloud": "^2.1.0",
-    "element-plus": "^2.3.8",
+    "element-plus": "^2.3.14",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.3",
     "splitpanes": "^3.1.5",

+ 20 - 16
pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.1.0
@@ -29,8 +33,8 @@ dependencies:
     specifier: ^2.1.0
     version: 2.1.0(echarts@5.4.2)
   element-plus:
-    specifier: ^2.3.8
-    version: 2.3.8(vue@3.3.4)
+    specifier: ^2.3.14
+    version: 2.3.14(vue@3.3.4)
   nprogress:
     specifier: ^0.2.0
     version: 0.2.0
@@ -116,7 +120,7 @@ devDependencies:
     version: 5.1.3
   unocss:
     specifier: ^0.52.7
-    version: 0.52.7(postcss@8.4.26)(vite@4.3.9)
+    version: 0.52.7(postcss@8.4.30)(vite@4.3.9)
   unplugin-auto-import:
     specifier: ^0.16.4
     version: 0.16.4(@vueuse/core@10.1.2)
@@ -1117,7 +1121,7 @@ packages:
       sirv: 2.0.3
     dev: true
 
-  /@unocss/postcss@0.52.7(postcss@8.4.26):
+  /@unocss/postcss@0.52.7(postcss@8.4.30):
     resolution: {integrity: sha512-0yG7K8ie9gky7Y/oD29Jzpe4l92IgRPB2Fo9a7g2f4dGlKOuih5S+NsH3EO4WODrawntISyxVXMHsIydze2vAw==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -1128,7 +1132,7 @@ packages:
       css-tree: 2.3.1
       fast-glob: 3.2.12
       magic-string: 0.30.0
-      postcss: 8.4.26
+      postcss: 8.4.30
     dev: true
 
   /@unocss/preset-attributify@0.52.7:
@@ -2082,7 +2086,7 @@ packages:
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /class-utils@0.3.6:
@@ -2453,8 +2457,8 @@ packages:
     resolution: {integrity: sha512-jdie3RiEgygvDTyS2sgjq71B36q2cDSBfPlwzUyuOrfYTNoYWyBxxjGJV/HAu3A2hB0Y+HesvCVkVAFoCKwCSw==}
     dev: true
 
-  /element-plus@2.3.8(vue@3.3.4):
-    resolution: {integrity: sha512-yHQR0/tG2LvPkpGUt7Te/hPmP2XW/BytBNUbx+EFO54VnGCOE3upmQcVffNp1PLgwg9sthYDXontUWpnpmLPJw==}
+  /element-plus@2.3.14(vue@3.3.4):
+    resolution: {integrity: sha512-9yvxUaU4jXf2ZNPdmIxoj/f8BG8CDcGM6oHa9JIqxLjQlfY4bpzR1E5CjNimnOX3rxO93w1TQ0jTVt0RSxh9kA==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
@@ -2998,8 +3002,8 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
     dev: true
 
-  /fsevents@2.3.2:
-    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+  /fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
     requiresBuild: true
@@ -4321,8 +4325,8 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  /postcss@8.4.26:
-    resolution: {integrity: sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==}
+  /postcss@8.4.30:
+    resolution: {integrity: sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -4510,7 +4514,7 @@ packages:
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /run-parallel@1.2.0:
@@ -5108,7 +5112,7 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.52.7(postcss@8.4.26)(vite@4.3.9):
+  /unocss@0.52.7(postcss@8.4.30)(vite@4.3.9):
     resolution: {integrity: sha512-c35lqmzWqnQH0hW2IE1owac2qfGOvNAhrIrLV2+pNmc2MDWq8WMjIEuWo8G+OS5JqFQY3ZBlE61q2x/tHPlujQ==}
     engines: {node: '>=14'}
     peerDependencies:
@@ -5121,7 +5125,7 @@ packages:
       '@unocss/cli': 0.52.7
       '@unocss/core': 0.52.7
       '@unocss/extractor-arbitrary-variants': 0.52.7
-      '@unocss/postcss': 0.52.7(postcss@8.4.26)
+      '@unocss/postcss': 0.52.7(postcss@8.4.30)
       '@unocss/preset-attributify': 0.52.7
       '@unocss/preset-icons': 0.52.7
       '@unocss/preset-mini': 0.52.7
@@ -5373,7 +5377,7 @@ packages:
       rollup: 3.23.0
       sass: 1.62.1
     optionalDependencies:
-      fsevents: 2.3.2
+      fsevents: 2.3.3
     dev: true
 
   /vue-count-to@1.0.13:

+ 6 - 1
src/components/core/form/BasicForm.vue

@@ -51,7 +51,12 @@ buildContainerSlots(props.formConfig.formItems)
         </template>
       </component>
       <template v-else>
-        <el-form-item :label="item.label" :rules="item.rules" :prop="item.name" v-show="!item.hidden">
+        <el-form-item
+          :label="item.notFormItem ? '' : item.label"
+          :rules="item.rules"
+          :prop="item.name"
+          v-show="!item.hidden"
+        >
           <form-comp :item="item" v-model="formData[item.name]">
             <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
               <slot :name="slot.alias" v-bind="slotProps"></slot>

+ 2 - 0
src/components/core/form/FormComp.vue

@@ -95,6 +95,8 @@ const headers = reactive({
     :placeholder="item.placeholder || placeholder(item)"
     v-on="item.events || {}"
   >
+    <template v-if="item.type === 'button'">{{ item.props.buttonName }}</template>
+    <template v-if="item.type === 'divider'">{{ item.props.dividerName }}</template>
     <template v-if="item.type === 'radio-group'">
       <template v-if="item.props?.button">
         <el-radio-button

+ 6 - 1
src/components/form/ElFormCard.vue

@@ -34,7 +34,12 @@ const cardSlot = props.formItem.slots?.find(slot => slot.name === 'header')
           </template>
         </component>
         <template v-else>
-          <el-form-item :label="item.label" :rules="item.rules" :prop="item.name" v-show="!item.hidden">
+          <el-form-item
+            :label="item.notFormItem ? '' : item.label"
+            :rules="item.rules"
+            :prop="item.name"
+            v-show="!item.hidden"
+          >
             <form-comp :item="item" v-model="formData[item.name]">
               <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
                 <slot :name="slot.alias" v-bind="slotProps"></slot>

+ 1 - 1
src/components/form/ElFormLayout.vue

@@ -30,7 +30,7 @@ defineProps<Props>()
       <template v-else>
         <el-row :gutter="20">
           <el-col v-for="child in item.children" :span="child.span || formConfig.span || 12" v-show="!child.hidden">
-            <el-form-item :label="child.label" :rules="child.rules" :prop="child.name">
+            <el-form-item :label="child.notFormItem ? '' : child.label" :rules="child.rules" :prop="child.name">
               <form-comp :item="child" v-model="formData[child.name]">
                 <template #[slot.alias]="slotProps" v-for="slot in child.slots" :key="slot.alias">
                   <slot :name="slot.alias" v-bind="slotProps"></slot>

+ 6 - 1
src/components/form/ElFormTabs.vue

@@ -41,7 +41,12 @@ const modelValue = computed({
             </template>
           </component>
           <template v-else>
-            <el-form-item :label="item.label" :rules="item.rules" :prop="item.name" v-show="!item.hidden">
+            <el-form-item
+              :label="item.notFormItem ? '' : item.label"
+              :rules="item.rules"
+              :prop="item.name"
+              v-show="!item.hidden"
+            >
               <form-comp :item="item" v-model="formData[item.name]">
                 <template #[slot.alias]="slotProps" v-for="slot in item.slots" :key="slot.alias">
                   <slot :name="slot.alias" v-bind="slotProps"></slot>

+ 21 - 1
src/views/form/Basic.vue

@@ -22,7 +22,6 @@ const formConfig = reactive<BasicForm>({
       value: '',
       name: 'password',
       type: 'custom',
-      notFormItem: true,
       slots: [
         {
           name: 'default',
@@ -53,6 +52,27 @@ const formConfig = reactive<BasicForm>({
       type: 'switch',
       props: {}
     },
+    {
+      label: '',
+      value: '',
+      name: '',
+      type: 'button',
+      notFormItem: true,
+      props: {
+        buttonName: '按钮'
+      }
+    },
+    {
+      label: '',
+      value: '',
+      name: '',
+      type: 'alert',
+      notFormItem: true,
+      props: {
+        title: 'alert',
+        type: 'warning'
+      }
+    },
     {
       label: '字典',
       value: '',