@xuekl/cli-components 1.8.0 → 1.9.146

package/XklButton.vue

@@ -10,29 +10,30 @@ 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 props = defineProps(['auth', 'prevent', 'openType', 'name'])
-const emit = defineEmits(['async'])
-const route = useRoute()
+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)
+        return isAuth(route?.name + ':' + name)
     } else {
         return isAuth(auth)
     }
 }
 
 
-const attrs = useAttrs()
-let preventClick = false
+const attrs: any = useAttrs()
+const preventClick = ref(false)
 
 const btnClick = () => {
     if (attrs.click) {
@@ -41,20 +42,26 @@ const btnClick = () => {
             window[props.openType] && window[props.openType]()
         }
     }
-    if (componentGlobal.enableSubmit) {
-        preventClick = false
-        componentGlobal.enableSubmit = false
-    }
-    if (!preventClick) {
-        preventClick = true
-        emit('async', () => {
-            setTimeout(() => {
-                preventClick = false;
-                if (props.openType) {
-                    window[props.openType] && window[props.openType]()
-                }
-            }, 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) {
@@ -86,4 +93,24 @@ const btnClick = () => {
         }
     }
 }
-</script>
+</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>

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 }" @visible-change="visibleChange" @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,120 @@ 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', 'displaySelectedDataFirst'])
+const emit = defineEmits(['update:label', 'itemChange', 'loaded', 'update:modelValue', 'visibleChange'])
+
+const { config, filterable, readonly, fake, displaySelectedDataFirst } = props
+const list: Ref<DictItem[]> = ref([])
+
+const isDisplaySelectedDataFirst = displaySelectedDataFirst !== false
+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
+    }
+}
+
+const visibleChange = (visible: boolean) => {
+    if (isDisplaySelectedDataFirst) {
+        if (visible) {
+            list.value = list.value.sort((a) => {
+                return selectData.value && (Array.isArray(selectData.value) ? selectData.value.includes(a.dictValue) : selectData.value === a.dictValue) ? -1 : 1
+            })
+        }
+    }
+    emit('visibleChange', visible)
+}
+
+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(() => {
-    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)
+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

@@ -1,5 +1,5 @@
 <template>
-    <real-el-dropdown-item v-if="doAuth(auth)">
+    <real-el-dropdown-item v-if="doAuth(auth)" @click.stop="btnClick">
         <slot></slot>
     </real-el-dropdown-item>
 </template>
@@ -9,14 +9,18 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { ElDropdownItem as RealElDropdownItem } from 'element-plus'
+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 props = defineProps(['auth', 'name'])
-const route = useRoute()
+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)
@@ -24,4 +28,84 @@ const doAuth = (auth) => {
         return isAuth(auth)
     }
 }
-</script>
+
+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>