@xuekl/cli-components 1.6.1 → 1.8.0

package/PageContainer.vue

@@ -1,57 +1,92 @@
 <template>
     <div class="page-container">
-        <div v-if="queryVisible" class="page-query" :class="['mb-' + gutters]">
+        <div v-if="queryVisible" class="page-query part-bg" :class="['mb-' + gutters, 'pd-' + padding]">
             <slot name="query"></slot>
         </div>
-        <div class="page-body">
+        <div v-for="upper in upperSlots" :key="upper" class="page-upper part-bg"
+            :class="['mb-' + gutters, 'pd-' + padding]">
+            <slot :name="upper"></slot>
+        </div>
+        <div class="page-body part-bg" :class="['pd-' + padding]">
             <slot></slot>
         </div>
-        <div v-if="footerVisible" class="page-footer" :class="['mt-' + gutters]">
+        <div v-for="down in downSlots" class="page-down part-bg" :class="['mt-' + gutters, 'pd-' + padding]">
+            <slot :name="down"></slot>
+        </div>
+        <div v-if="footerVisible" class="page-footer part-bg"
+            :class="['mt-' + gutters, 'pd-' + padding, { 'footer-fixed': footerFixed }]">
             <slot name="footer"></slot>
         </div>
+        <div v-if="footerFixed" :style="{ height: footerHeight + 'px' }"></div>
     </div>
 </template>
 <script lang="ts">
-import { Vue, Options } from 'vue-class-component'
+export default {
+    name: 'PageContainer'
+}
+</script>
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+const props = defineProps({
+    gutters: {
+        type: Number,
+        default: 2
+    },
+    queryVisible: {
+        type: Boolean,
+        default: true
+    },
+    footerVisible: {
+        type: Boolean,
+        default: true
+    },
+    footerFixed: {
+        type: Boolean
+    },
+    upperSlots: {
+        type: Array,
+        default: []
+    },
+    downSlots: {
+        type: Array,
+        default: []
+    },
+    padding: {
+        type: Number,
+        default: 20
+    }
+})
+const { gutters, queryVisible, footerVisible, footerFixed, upperSlots, downSlots, padding } = props
+
+const footerHeight = ref(0)
+onMounted(() => {
+    if (footerFixed) {
+        const height = document.querySelector('.page-footer')?.clientHeight || 0
 
-@Options({
-    name: "PageContainer",
-    props: {
-        gutters: {
-            type: Number,
-            default: 2
-        },
-        queryVisible: {
-            type: Boolean,
-            default: true
-        },
-        footerVisible: {
-            type: Boolean,
-            default: true
-        }
+        footerHeight.value = height
     }
 })
-export default class PageContainer extends Vue {
-    gutters: unknown
-    queryVisible: unknown
-    footerVisible: unknown
-}
 </script>
 <style lang="scss" scoped>
-.page-query {
-    padding: 20px;
-    background-color: #fff;
+.page-container {
+    position: relative;
+    z-index: 1;
 }
 
-.page-body {
-    padding: 20px;
-    background-color: #fff;
+.part-bg {
+    background-color: rgba(255, 255, 255, .65);
 }
 
 .page-footer {
     display: flex;
     justify-content: flex-end;
-    padding: 20px;
-    background-color: #fff;
+}
+
+.footer-fixed {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    z-index: 999;
 }
 </style>

package/XklButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <real-el-button v-if="isAuth(auth)" @click.prevent="btnClick">
+    <real-el-button v-if="doAuth(auth)" @click.prevent="btnClick">
         <slot></slot>
     </real-el-button>
 </template>
@@ -14,17 +14,33 @@ import { componentGlobal } from '@xuekl/cli-base/global'
 import { isAuth } from '@/utils'
 import { useAttrs } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
 
-const props = defineProps(['auth', 'prevent'])
-const emit = defineEmits(['click', 'async'])
+const props = defineProps(['auth', 'prevent', 'openType', 'name'])
+const emit = defineEmits(['async'])
+const route = useRoute()
+
+const { auth, name } = props
+
+const doAuth = (auth) => {
+    if (name) {
+        return isAuth(route.name + ':' + name)
+    } else {
+        return isAuth(auth)
+    }
+}
 
-const { auth } = props
 
 const attrs = useAttrs()
 let preventClick = false
 
 const btnClick = () => {
-    emit('click')
+    if (attrs.click) {
+        attrs.onClick()
+        if (props.openType) {
+            window[props.openType] && window[props.openType]()
+        }
+    }
     if (componentGlobal.enableSubmit) {
         preventClick = false
         componentGlobal.enableSubmit = false
@@ -32,13 +48,21 @@ const btnClick = () => {
     if (!preventClick) {
         preventClick = true
         emit('async', () => {
-            setTimeout(() => preventClick = false, 200)
+            setTimeout(() => {
+                preventClick = false;
+                if (props.openType) {
+                    window[props.openType] && window[props.openType]()
+                }
+            }, 200)
         })
     }
 
     if (attrs.onConfirm) {
         if (props.prevent === false) {
             attrs.onConfirm()
+            if (props.openType) {
+                window[props.openType] && window[props.openType]()
+            }
         } else {
             ElMessageBox.confirm(
                 '当前内容可能存在修改，确认继续?',
@@ -50,9 +74,16 @@ const btnClick = () => {
                 }
             ).then(() => {
                 attrs.onConfirm()
+                if (props.openType) {
+                    window[props.openType] && window[props.openType]()
+                }
             }).catch(() => {
             })
         }
+    } else {
+        if (props.openType) {
+            window[props.openType] && window[props.openType]()
+        }
     }
 }
 </script>

package/XklDropdownItem.vue

@@ -0,0 +1,27 @@
+<template>
+    <real-el-dropdown-item v-if="doAuth(auth)">
+        <slot></slot>
+    </real-el-dropdown-item>
+</template>
+<script lang="ts">
+export default {
+    name: 'ElDropdownItem'
+}
+</script>
+<script setup lang="ts">
+import { ElDropdownItem as RealElDropdownItem } from 'element-plus'
+import { isAuth } from '@/utils'
+import { useRoute } from 'vue-router'
+const props = defineProps(['auth', 'name'])
+const route = useRoute()
+
+const { auth, name } = props
+
+const doAuth = (auth) => {
+    if (name) {
+        return isAuth(route.name + ':' + name)
+    } else {
+        return isAuth(auth)
+    }
+}
+</script>

package/XklForm.vue

@@ -1,5 +1,6 @@
 <template>
-    <el-form ref="XklFormRef" :model="form" :label-width="opts.labelWidth" @keyup.enter.native="enterSubmit()">
+    <el-form ref="XklFormRef" :model="form" :label-width="opts.labelWidth" v-bind="formProps"
+        @keyup.enter.native="enterSubmit()">
         <div class="hide-input">
             <input type="text" />
             <input type="password" />
@@ -75,7 +76,7 @@ import XklSelect from './XklSelect.vue'
 import XklTreeSelect from './XklTreeSelect.vue'
 import XklDict from './XklDict.vue'
 import XklDatePicker from './XklDatePicker.vue'
-import { componentGlobal } from '@xuekl/cli-base/global'
+import { formConf } from './index'
 
 const props = defineProps(['form'])
 const emit = defineEmits(['enter'])
@@ -89,6 +90,8 @@ if (typeof opts.defaultCollapse !== 'undefined') {
     isCollapse.value = opts.defaultCollapse
 }
 
+const formProps = Object.assign({}, formConf?.element, opts.element)
+
 const enterSubmit = () => {
     emit('enter')
 }
@@ -190,21 +193,22 @@ formList.value.forEach(res => {
 
 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]
         }
+        if (step >= 24) {
+            stepLength = i
+            break
+        }
     }
 
-    for (let i = 0; i < stepLength - 1; i++) {
+    for (let i = 0; i < stepLength; i++) {
         collapseTotalSpan = collapseTotalSpan + spans[i]
     }
 
@@ -212,7 +216,7 @@ if (opts.collapsible) {
 
 if (opts.collapsible) {
     searchSpan.value = 24 - collapseTotalSpan % 24
-    formList.value = sourceFormList.slice(0, stepLength - 1)
+    formList.value = sourceFormList.slice(0, stepLength)
 } else {
     searchSpan.value = 24 - toalSpan % 24
     formList.value = sourceFormList
@@ -224,7 +228,7 @@ const doCollapse = () => {
     isCollapse.value = !isCollapse.value
     if (isCollapse.value) {
         searchSpan.value = 24 - collapseTotalSpan % 24
-        formList.value = sourceFormList.slice(0, stepLength - 1)
+        formList.value = sourceFormList.slice(0, stepLength)
     } else {
         searchSpan.value = 24 - toalSpan % 24
         formList.value = sourceFormList
@@ -237,17 +241,8 @@ const regProto = () => {
         let enableSubmit = true;
         let submitTimer: NodeJS.Timeout
         form.submit = (callback: (call: () => void, feils: any) => void) => {
-            if (componentGlobal.enableFormSubmit) {
-                enableSubmit = true
-            }
-            componentGlobal.enableFormSubmit = false
             if (enableSubmit) {
                 enableSubmit = false;
-                clearTimeout(submitTimer)
-                submitTimer = setTimeout(() => {
-                    componentGlobal.enableFormSubmit = true
-                    enableSubmit = true
-                }, 3000)
                 sourceFormList.forEach(field => {
                     modeFields[field.prop] = (form as any)[field.prop]
                 });

package/XklFormInfo.vue

@@ -1,5 +1,6 @@
 <template>
-    <el-form class="xkl-form-info" ref="XklFormInfoRef" :model="form" :label-width="opts.labelWidth">
+    <el-form class="xkl-form-info" :class="{ 'force-align-left': opts.forceAlignLeft }" 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()">
@@ -91,4 +92,10 @@ const dictLabel = computed(() => {
         margin-bottom: 5px;
     }
 }
+
+.force-align-left {
+    :deep(.el-form-item__label) {
+        width: auto !important;
+    }
+}
 </style>

package/XklSelect.vue

@@ -27,11 +27,21 @@ const selectData = computed({
     }
 })
 
-const changeHandle = (val: string) => {
-    const item = dataList.value.find(res => res.value === val)
-    if (item) {
-        emit('update:label', item.label)
-        emit('itemChange', item)
+const changeHandle = (val: string | number | string[] | number[]) => {
+    if (Array.isArray(val)) {
+        const values = val.map(res => res.value)
+        const labels = val.map(res => res.label)
+        const items = dataList.value.filter(res => values.includes(res.value))
+        if (items) {
+            emit('update:label', labels)
+            emit('itemChange', items)
+        }
+    } else {
+        const item = dataList.value.find(res => res.value === val)
+        if (item) {
+            emit('update:label', item.label)
+            emit('itemChange', item)
+        }
     }
 }
 

package/XklTable.vue

@@ -11,7 +11,8 @@
             align="center"></el-table-column>
         <el-table-column v-if="table.index" type="index" align="center" v-bind="table.indexConfig"></el-table-column>
         <el-table-column v-for="  item   in   table.columns  " :key="item.prop" :prop="item.prop" :label="item.label"
-            :width="item.width" :align="item.align || 'center'" :sortable="item.sortable" v-bind="item.element">
+            :width="item.width" :align="item.align || tableConf.defaultAlignment || 'center'" :sortable="item.sortable"
+            v-bind="item.element">
             <template v-if="item.reflect" v-slot="{ row }">
                 {{ row[item.reflect] }}
             </template>

package/XklUpload.vue

@@ -26,7 +26,8 @@ const { config, modelValue } = props
 config.params = config.params || (() => { })
 
 const headers = {
-    [config.authorization || 'Authorization']: getToken()
+    [config.authorization || 'Authorization']: getToken(),
+    ...config.headers
 }
 const actionUrl = http.adornUrl(config.url || '/common/upload')
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xuekl/cli-components",
-  "version": "1.6.1",
-  "description": "",
+  "version": "1.8.0",
+  "description": "element-plus 组件二次封装",
   "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"