@xuekl/cli-components 1.6.1 → 1.9.145

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>
@@ -10,35 +10,66 @@ export default {
 </script>
 <script setup lang="ts">
 import { ElButton as RealElButton } from 'element-plus'
-import { componentGlobal } from '@xuekl/cli-base/global'
 import { isAuth } from '@/utils'
-import { useAttrs } from 'vue'
+import { ref, useAttrs } from 'vue'
 import { ElMessageBox } from 'element-plus'
+import { useRoute } from 'vue-router'
+const startLoading = window.startLoading
+const finishLoading = window.finishLoading
+const props = defineProps(['auth', 'prevent', 'openType', 'name', 'mask'])
+const route: any = useRoute()
 
-const props = defineProps(['auth', 'prevent'])
-const emit = defineEmits(['click', 'async'])
+const { auth, name } = props
 
-const { auth } = props
+const mask = typeof props.mask === 'undefined' ? true : props.mask
 
-const attrs = useAttrs()
-let preventClick = false
+const doAuth = (auth) => {
+    if (name) {
+        return isAuth(route?.name + ':' + name)
+    } else {
+        return isAuth(auth)
+    }
+}
+
+
+const attrs: any = useAttrs()
+const preventClick = ref(false)
 
 const btnClick = () => {
-    emit('click')
-    if (componentGlobal.enableSubmit) {
-        preventClick = false
-        componentGlobal.enableSubmit = false
+    if (attrs.click) {
+        attrs.onClick()
+        if (props.openType) {
+            window[props.openType] && window[props.openType]()
+        }
     }
-    if (!preventClick) {
-        preventClick = true
-        emit('async', () => {
-            setTimeout(() => preventClick = false, 200)
-        })
+
+    if (attrs.onAsync) {
+        if (!preventClick.value) {
+            preventClick.value = true
+            if (props.openType !== 'preventLoading' && startLoading) {
+                startLoading()
+            }
+            attrs.onAsync(() => {
+                setTimeout(() => {
+                    preventClick.value = false;
+                    if (finishLoading) {
+                        finishLoading()
+                    }
+                    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 +81,36 @@ 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>
+
+<style lang="scss" scoped>
+.loading-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 1003;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .is-loading {
+        font-size: 40px;
+        color: #fff;
     }
 }
-</script>
+</style>

package/XklDatePicker.vue

@@ -1,6 +1,13 @@
 <template>
-    <el-date-picker :type="type" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder"
-        :value-format="valueFormat" />
+    <div v-if="type === 'doubledatetime'" class="doubledatetime">
+        <el-date-picker type="datetime" v-model="startVal" placeholder="开始时间"
+            :value-format="valueFormat"></el-date-picker>
+        <el-date-picker type="datetime" v-model="endVal" placeholder="结束时间"
+            :value-format="valueFormat"></el-date-picker>
+    </div>
+    <el-date-picker v-else :type="type" v-model="modelVal" :start-placeholder="startPlaceholder"
+        :popper-class="func === 'bottomshortcut' ? 'bottomshortcut' : ''" :end-placeholder="endPlaceholder"
+        :value-format="valueFormat" :shortcuts="shortcuts" />
 </template>
 <script lang="ts">
 export default {
@@ -8,11 +15,39 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed, Ref } from 'vue';
+import moment from 'dayjs'
 
-const props = defineProps(['type'])
-const { type } = props
+const props = defineProps(['type', 'func', 'modelValue'])
+const emit = defineEmits(['update:modelValue'])
+const { type, func } = props
 
+const modelVal = computed({
+    get() {
+        return props.modelValue
+    },
+    set(val) {
+        emit('update:modelValue', val)
+    }
+})
+
+const startVal = computed({
+    get() {
+        return props.modelValue[0]
+    },
+    set(val) {
+        emit('update:modelValue', [val, props.modelValue[1]])
+    }
+})
+
+const endVal = computed({
+    get() {
+        return props.modelValue[1]
+    },
+    set(val) {
+        emit('update:modelValue', [props.modelValue[0], val])
+    }
+})
 
 const startPlaceholder = ref('')
 const endPlaceholder = ref('')
@@ -27,7 +62,7 @@ if (type === 'daterange') {
 
 if (['date', 'dates', 'daterange'].includes(type)) {
     valueFormat.value = 'YYYY-MM-DD'
-} else if (['datetime', 'datetimerange'].includes(type)) {
+} else if (['datetime', 'datetimerange', 'doubledatetime'].includes(type)) {
     valueFormat.value = 'YYYY-MM-DD HH:mm:ss'
 } else if (['month', 'monthrange'].includes(type)) {
     valueFormat.value = 'YYYY-MM'
@@ -35,4 +70,77 @@ if (['date', 'dates', 'daterange'].includes(type)) {
     valueFormat.value = ''
 }
 
-</script>
+const shortcuts: Ref<any[]> = ref([])
+
+if (func === 'bottomshortcut') {
+    shortcuts.value = [{
+        text: '此刻',
+        value: () => {
+            if (props.modelValue && props.modelValue.length) {
+                if (props.modelValue[0] > moment().format('YYYY-MM-DD HH:mm:ss')) {
+                    modelVal.value = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD HH:mm:ss')]
+                } else {
+                    modelVal.value = [props.modelValue[0], moment().format('YYYY-MM-DD HH:mm:ss')]
+                }
+
+            } else {
+                modelVal.value = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD HH:mm:ss')]
+            }
+        }
+    },
+    {
+        text: '今天',
+        value: () => {
+            modelVal.value = [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
+        }
+    }]
+}
+
+</script>
+<style lang="scss">
+.doubledatetime {
+    display: flex;
+
+    box-shadow: 0 0 0 0.01rem var(--el-input-border-color, var(--el-border-color)) inset;
+    border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+    padding: 1px;
+
+    .el-input {
+        border: 0;
+
+        height: 0.3rem;
+
+        // .el-input__prefix {
+        //     display: none;
+        // }
+
+        .el-input__wrapper {
+            box-shadow: none;
+        }
+    }
+}
+
+.bottomshortcut {
+    .el-picker-panel__sidebar {
+        z-index: 1;
+        bottom: -35px;
+        top: unset;
+        right: 150px;
+        display: flex;
+        justify-content: flex-end;
+        padding-top: 0;
+    }
+
+    .el-picker-panel__shortcut {
+        width: auto;
+        padding-right: 24px;
+        padding-left: 0;
+        font-size: 12px;
+        white-space: nowrap;
+    }
+
+    .el-picker-panel__body {
+        margin-left: 0;
+    }
+}
+</style>

package/XklDict.vue

@@ -1,6 +1,13 @@
 <template>
-    <el-select style="width: 100%;" @change="changeHandle">
-        <el-option v-for="item in dataList" :key="item.dictValue" :label="item.dictLabel"
+    <div v-if="fakeRender && (!selectData || (selectData && !selectData.length))" class="fake-render el-input__wrapper"
+        :class="{ 'el-select__wrapper is-disabled': disabled || readonly }" @click="updateRender">
+        <span class="fs-14">{{ $attrs.placeholder
+            }}</span>
+    </div>
+    <el-select v-else style="width: 100%;" ref="XklDictRef" v-model="selectData" :automatic-dropdown="true"
+        :class="{ 'readony-input': readonly }" @change="changeHandle" :filterable="initFilterable"
+        :disabled="disabled || readonly" :filter-method="filterMethod">
+        <el-option v-for="item in list" :key="item.dictValue" :label="item.dictLabel"
             :value="item.dictValue"></el-option>
     </el-select>
 </template>
@@ -10,30 +17,108 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { ref, onBeforeMount, Ref } from 'vue'
-import http from "@/utils/httpRequest"
-import { baseConf } from './index'
-const props = defineProps(['config'])
-const emit = defineEmits(['update:label', 'loaded'])
-
-const { config } = props
-const dataList: Ref<{ dictCode: string, dictLabel: string, dictValue: string | number }[]> = ref([])
-
-const changeHandle = (val: string) => {
-    const item = dataList.value.find(res => res.dictValue === val)
-    if (item) {
-        emit('update:label', item.dictLabel)
+import { ref, onBeforeMount, Ref, computed, onBeforeUnmount } from 'vue'
+import { baseConf, dictConf } from './index'
+import DictStore from '@/utils/DictStore'
+import { nextTick } from 'vue';
+interface DictItem {
+    dictCode: string, dictLabel: string, dictValue: string | number
+}
+const props = defineProps(['config', 'filterable', 'readonly', 'disabled', 'modelValue', 'fake'])
+const emit = defineEmits(['update:label', 'itemChange', 'loaded', 'update:modelValue'])
+
+const { config, filterable, readonly, fake } = props
+const list: Ref<DictItem[]> = ref([])
+
+const isFake = typeof fake === 'undefined' ? true : fake
+const fakeRender = ref(isFake)
+const XklDictRef: any = ref(null)
+
+const updateRender = () => {
+    fakeRender.value = false
+    nextTick(() => {
+        XklDictRef.value.focus()
+    })
+}
+
+const initFilterable = ref(false)
+
+initFilterable.value = typeof filterable !== 'undefined' ? filterable : dictConf?.filterable
+
+const disabled = computed(() => props.disabled)
+let sourceData: DictItem[] = []
+
+const selectData = computed({
+    get() {
+        return props.modelValue
+    },
+    set(val) {
+
+        emit('update:modelValue', val)
+    }
+})
+
+const filterMethod = (val: any) => {
+    if (val) {
+        val = val.trim()
+        list.value = sourceData.filter(res => res.dictValue.toString().includes(val) || res.dictLabel.includes(val))
+    } else {
+        list.value = sourceData
     }
 }
 
-onBeforeMount(() => {
-    http({
-        url: http.adornUrl(`${baseConf.dict_api_url}${config.dict}`),
-        method: 'get',
-        params: http.adornParams({})
-    }).then(({ data }) => {
-        dataList.value = data.data
-        emit('loaded', dataList.value)
+const changeHandle = (val: string | number | string[] | number[]) => {
+    if (Array.isArray(val)) {
+        const values: (string | number)[] = val
+        const items = sourceData.filter(res => values.includes(res.dictValue))
+        const labels = items.map(res => res.dictLabel)
+        if (items) {
+            emit('update:label', labels)
+            emit('itemChange', items)
+        }
+    } else {
+        const item = sourceData.find(res => res.dictValue === val)
+        if (item) {
+            emit('update:label', item.dictLabel)
+            emit('itemChange', item)
+        }
+    }
+}
+
+onBeforeMount(async () => {
+    list.value = await DictStore.getDict(config.dict)
+    sourceData = JSON.parse(JSON.stringify(list.value))
+    emit('loaded', list.value, (vals) => {
+        list.value = vals
+        sourceData = JSON.parse(JSON.stringify(list.value))
     })
 })
-</script>
+
+onBeforeUnmount(() => {
+    list.value = []
+    sourceData = []
+})
+</script>
+<style lang="scss">
+.readony-input {
+    .is-disabled .el-input__wrapper {
+        background-color: #fff !important;
+
+        .el-input__inner {
+            color: #606266;
+            -webkit-text-fill-color: #606266;
+        }
+    }
+}
+
+.fake-render {
+    width: 100%;
+    justify-content: flex-start;
+    color: #a8abb2;
+    height: 32px;
+}
+
+.el-select__wrapper.is-disabled {
+    border: 1px solid #dcdfe6;
+}
+</style>

package/XklDropdownItem.vue

@@ -0,0 +1,111 @@
+<template>
+    <real-el-dropdown-item v-if="doAuth(auth)" @click.stop="btnClick">
+        <slot></slot>
+    </real-el-dropdown-item>
+</template>
+<script lang="ts">
+export default {
+    name: 'ElDropdownItem'
+}
+</script>
+<script setup lang="ts">
+import { ElMessageBox, ElDropdownItem as RealElDropdownItem } from 'element-plus'
+import { Loading } from "@element-plus/icons-vue";
+import { useAttrs, ref } from 'vue'
+import { isAuth } from '@/utils'
+import { useRoute } from 'vue-router'
+const startLoading = window.startLoading
+const finishLoading = window.finishLoading
+const props = defineProps(['auth', 'prevent', 'openType', 'name', 'mask'])
+const route: any = useRoute()
+
+const { auth, name } = props
+const mask = typeof props.mask === 'undefined' ? true : props.mask
+const doAuth = (auth) => {
+    if (name) {
+        return isAuth(route.name + ':' + name)
+    } else {
+        return isAuth(auth)
+    }
+}
+
+const attrs: any = useAttrs()
+const preventClick = ref(false)
+
+const btnClick = () => {
+    if (attrs.click) {
+        attrs.onClick()
+        if (props.openType) {
+            window[props.openType] && window[props.openType]()
+        }
+    }
+
+    if (attrs.onAsync) {
+        if (!preventClick.value) {
+            preventClick.value = true
+            if (props.openType !== 'preventLoading' && startLoading) {
+                startLoading()
+            }
+            attrs.onAsync(() => {
+                setTimeout(() => {
+                    preventClick.value = false;
+                    if (finishLoading) {
+                        finishLoading()
+                    }
+                    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(
+                '当前内容可能存在修改，确认继续?',
+                '提示',
+                {
+                    confirmButtonText: '确认',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                }
+            ).then(() => {
+                attrs.onConfirm()
+                if (props.openType) {
+                    window[props.openType] && window[props.openType]()
+                }
+            }).catch(() => {
+            })
+        }
+    } else {
+        if (props.openType) {
+            window[props.openType] && window[props.openType]()
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.loading-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 1003;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .is-loading {
+        font-size: 40px;
+        color: #fff;
+    }
+}
+</style>