@xuekl/cli-components 1.2.6 → 1.2.8

package/XklForm.vue

@@ -52,6 +52,10 @@
                 <el-form-item label-width="0">
                     <div class="query-action">
                         <slot name="_action"></slot>
+                        <span class="collapsible" v-if="opts.collapsible" @click="doCollapse()">
+                            {{ isCollapse ? '展开' : '收起' }}
+                            <icon-svg name="down" :class="[isCollapse ? '' : 'rotate']"></icon-svg>
+                        </span>
                     </div>
                 </el-form-item>
             </el-col>
@@ -74,11 +78,17 @@ import XklDict from './XklDict.vue'
 import XklDatePicker from './XklDatePicker.vue'
 import { componentGlobal } from '@xuekl/cli-base/global'
 
+import { slice } from 'lodash'
 const props = defineProps(['form'])
 const XklFormRef = ref(null)
 const { form } = props
-const formList: FormItem[] = []
+const sourceFormList: FormItem[] = []
+const formList: FormItem[] = ref([])
 const opts = form._opts || {}
+const isCollapse = ref(true)
+if (typeof opts.defaultCollapse !== 'undefined') {
+    isCollapse.value = opts.defaultCollapse
+}
 
 // 获取符合mode的字段
 const modeFields: any = {}
@@ -149,10 +159,12 @@ Object.keys(form).forEach(prop => {
         }
         if (opts.mode) {
             if (field.mode && field.mode.includes(opts.mode)) {
-                formList.push(item)
+                formList.value.push(item)
+                sourceFormList.push(item)
             }
         } else {
-            formList.push(item)
+            formList.value.push(item)
+            sourceFormList.push(item)
         }
     }
 })
@@ -160,18 +172,63 @@ Object.keys(form).forEach(prop => {
 //计算按钮所占span
 let toalSpan = 0
 const searchSpan = ref(0)
-formList.forEach(res => {
+const spans: number[] = []
+formList.value.forEach(res => {
     if (res.show && res.show()) {
         if (res.span) {
+            spans.push(res.span)
             toalSpan = toalSpan + res.span
         } else {
+            spans.push(opts.span)
             toalSpan = toalSpan + opts.span
         }
     }
 
 })
-searchSpan.value = 24 - toalSpan % 24
 
+let stepLength = 0
+let collapseTotalSpan = 0
+if (opts.collapsible) {
+    let step = 0
+    for (let i = 0; i < spans.length; i++) {
+        if (step >= 24) {
+            stepLength = i
+            break
+        }
+        if (spans[i] === 24) {
+            step = step + 0
+        } else {
+            step = step + spans[i]
+        }
+    }
+
+    for (let i = 0; i < stepLength - 1; i++) {
+        collapseTotalSpan = collapseTotalSpan + spans[i]
+    }
+
+}
+
+if (opts.collapsible) {
+    searchSpan.value = 24 - collapseTotalSpan % 24
+    formList.value = sourceFormList.slice(0, stepLength - 1)
+} else {
+    searchSpan.value = 24 - toalSpan % 24
+    formList.value = sourceFormList
+}
+
+
+
+const doCollapse = () => {
+    isCollapse.value = !isCollapse.value
+    if (isCollapse.value) {
+        searchSpan.value = 24 - collapseTotalSpan % 24
+        formList.value = sourceFormList.slice(0, stepLength - 1)
+    } else {
+        searchSpan.value = 24 - toalSpan % 24
+        formList.value = sourceFormList
+    }
+
+}
 
 const regProto = () => {
     if (XklFormRef.value) {
@@ -189,7 +246,7 @@ const regProto = () => {
                     componentGlobal.enableFormSubmit = true
                     enableSubmit = true
                 }, 3000)
-                formList.forEach(field => {
+                formList.value.forEach(field => {
                     modeFields[field.prop] = (form as any)[field.prop]
                 });
                 (XklFormRef.value as any).validate((valid: boolean) => {
@@ -208,7 +265,7 @@ const regProto = () => {
     }
 
     form.setBinds(() => {
-        formList.forEach(field => {
+        formList.value.forEach(field => {
             modeFields[field.prop] = (form as any)[field.prop]
         });
         return modeFields
@@ -228,6 +285,19 @@ onMounted(() => {
 .query-action {
     width: 100%;
     text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    .collapsible {
+        margin-left: 12px;
+        cursor: pointer;
+        color: $primary--color;
+
+        .rotate {
+            transform: rotate(180deg);
+        }
+    }
 }
 
 .hide-input {

package/XklFormInfo.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-form ref="XklFormInfoRef" :model="form" :label-width="opts.labelWidth">
+    <el-form class="xkl-form-info" ref="XklFormInfoRef" :model="form" :label-width="opts.labelWidth">
         <el-row>
             <template v-for="item in formList" :key="item.prop">
                 <el-col :span="item.span" v-if="item.show()">
@@ -57,4 +57,10 @@ Object.keys(form).forEach(prop => {
 
 
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.xkl-form-info {
+    .el-form-item {
+        margin-bottom: 5px;
+    }
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xuekl/cli-components",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "",
   "main": "index.ts",
   "scripts": {