@xuekl/cli-components 1.8.0 → 1.9.145

package/XklFormInfo.vue

@@ -1,12 +1,13 @@
 <template>
-    <el-form class="xkl-form-info" :class="{ 'force-align-left': opts.forceAlignLeft }" 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()">
-                    <el-form-item :label="item.label + '：'" :label-width="item.labelWidth">
-                        <span v-if="item.type === 'dict-select'">{{ dictLabel(item.config.dict, form[item.prop]) }}</span>
-                        <span v-else-if="item.type">{{ form[item.reflect] || form[item.prop] }}</span>
+                    <el-form-item :label="item.label ? item.label + '：' : ''" :label-width="item.labelWidth">
+                        <span v-if="item.type === 'dict-select'">{{ dictLabel(item.config.dict, form[item.prop])
+                        }}</span>
+                        <span v-else-if="item.type">{{ reflect(form[item.reflect]) || form[item.prop] }}</span>
                         <slot v-else :name="item.prop"></slot>
                     </el-form-item>
                 </el-col>
@@ -25,7 +26,8 @@ import http from "@/utils/httpRequest"
 import { baseConf } from './index'
 import { setUpperFirst } from '@xuekl/cli-utils'
 import { FormItem } from '@xuekl/cli-base/type.d'
-import { ref, computed } from 'vue'
+import { ref, computed, onBeforeMount } from 'vue'
+import DictStore from "@/utils/DictStore";
 
 const props = defineProps(['form'])
 const XklFormRef = ref(null)
@@ -33,7 +35,6 @@ const { form } = props
 const formList: FormItem[] = []
 const opts = form._opts || {}
 
-
 // 获取符合mode的字段
 Object.keys(form).forEach(prop => {
     if (form['get' + setUpperFirst(prop)]) {
@@ -64,26 +65,42 @@ Object.keys(form).forEach(prop => {
 const dictTypes = formList.map(item => item.config?.dict).filter(res => !!res)
 const dictStore = ref({})
 
-dictTypes.forEach((dict: string) => {
-    http({
-        url: http.adornUrl(`${baseConf.dict_api_url}${dict}`),
-        method: 'get',
-        params: http.adornParams({})
-    }).then(({ data }) => {
-        dictStore.value[dict] = data.data
-    })
+
+onBeforeMount(async () => {
+    for (let dict of dictTypes) {
+        dictStore.value[dict] = await DictStore.getDict(dict)
+    }
 })
 
+
 const dictLabel = computed(() => {
-    return function (dict: string, val: string | number) {
+    return function (dict: string, propValue: any) {
         if (dictStore.value[dict]) {
-            const item = dictStore.value[dict].find(res => res.dictValue == val) || {}
-            return item.dictLabel
+            if (Array.isArray(propValue)) {
+                const items = dictStore.value[dict].filter(res => propValue.includes(res.dictValue))
+                const labels = items.map(it => it.dictLabel)
+                return labels.join(',')
+            } else {
+                const item = dictStore.value[dict].find(res => res.dictValue == propValue) || {}
+                return item.dictLabel
+            }
+
         }
         return ''
     }
 })
 
+const reflect = computed(() => {
+    return function (value) {
+        if (Array.isArray(value)) {
+            return value.join(',')
+        } else {
+            return value
+        }
+    }
+})
+
+
 
 </script>
 <style lang="scss" scoped>

package/XklLink.vue

@@ -1,5 +1,5 @@
 <template>
-    <real-el-link v-if="isAuth(auth)" @click.prevent="btnClick">
+    <real-el-link v-if="doAuth(auth)" :underline="false" @click.prevent.stop="btnClick">
         <slot></slot>
     </real-el-link>
 </template>
@@ -10,25 +10,105 @@ export default {
 </script>
 <script setup lang="ts">
 import { ElLink as RealElLink } from 'element-plus'
-import { componentGlobal } from '@xuekl/cli-base/global'
+import { Loading } from "@element-plus/icons-vue";
 import { isAuth } from '@/utils'
-const props = defineProps(['auth'])
-const emit = defineEmits(['click', 'async'])
+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 { auth } = props
-let preventClick = false
+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 = () => {
-    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 (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 (!preventClick) {
-        preventClick = true
-        emit('async', () => {
-            setTimeout(() => preventClick = false, 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;
     }
 }
-</script>
+</style>

package/XklSelect.vue

@@ -1,6 +1,29 @@
 <template>
-    <el-select v-model="selectData" style="width: 100%;" @change="changeHandle">
-        <el-option v-for="item in dataList" :key="item.id" :label="item.label" :value="item.value"></el-option>
+    <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 ref="XklSelectRef" :automatic-dropdown="true" v-model="selectData"
+        :class="{ 'readony-input': readonly }" style="width: 100%;" @change="changeHandle" :filterable="initFilterable"
+        :disabled="disabled || readonly" :filter-method="filterMethod" :allow-create="allowCreate"
+        :multiple-limit="multipleLimit" @focus="onClick()">
+        <!-- <template v-if="createAtFirst && filterVal" #header>
+            <div class="el-select-dropdown__item" @click="headerClick()">
+                <OptionComponent v-if="config && config.customOption" :item="creatingItem" />
+            </div>
+        </template> -->
+        <el-option v-if="config && config.all && dataList.length" key="all" :label="config.allLabel || 'ALL'"
+            value="ALL"></el-option>
+        <el-option v-if="createAtFirst && filterVal" :label="creatingItem.label" :value="creatingItem.value"
+            @click="creatingItemClick()">
+            <OptionComponent v-if="config && config.customOption" :item="creatingItem" />
+        </el-option>
+        <el-option v-for="item in dataList" :key="item.value.toString()" :label="item.label" :value="item.value">
+            <!-- <span v-if="item.tag">{{ item.tag }}</span> -->
+            <OptionComponent v-if="config && config.customOption" :item="item" />
+            <span v-else>{{ item.label }}</span>
+        </el-option>
     </el-select>
 </template>
 <script lang="ts">
@@ -9,42 +32,222 @@ export default {
 }
 </script>
 <script setup lang="ts">
-import { onBeforeMount, ref, Ref, watch, computed } from 'vue'
+import { onBeforeMount, ref, Ref, watch, computed, shallowRef, onBeforeUnmount } from 'vue'
 import { SelectItem } from '@xuekl/cli-base/type.d'
+import { selectConf } from './index'
 import http from "@/utils/httpRequest"
-const props = defineProps(['config', 'list', 'modelValue'])
-const emit = defineEmits(['update:label', 'loaded', 'update:modelValue', 'itemChange'])
-const { config, list } = props
+import useApp from '@/store/app'
+import { toPromise } from '@xuekl/cli-utils'
+import { pinyin } from 'pinyin-pro'
+import { nextTick } from 'vue'
+interface OptionItem extends SelectItem {
+    tag?: string
+    pinyinStartStr?: string
+    pinyinStr?: string
+    abbreviation?: string
+    pinyin?: string
+    isChecked?: boolean
+    isSpecial?: boolean
+}
+const props = defineProps(['config', 'list', 'modelValue', 'filterable', 'readonly', 'disabled', 'cache', 'allowCreate', 'multipleLimit', 'createAtFirst', 'fake'])
+const emit = defineEmits(['update:label', 'click', 'loaded', 'update:modelValue', 'itemChange'])
+const { config, list, filterable, readonly, cache, allowCreate, multipleLimit, createAtFirst, fake } = props
+const appStore = useApp()
+
+const dataCahe = cache !== false
+
+const dataList: Ref<OptionItem[]> = ref([])
+
+const initFilterable = ref(false)
+
+
+const isFake = typeof fake === 'undefined' ? true : fake
+const fakeRender = ref(isFake)
+const XklSelectRef: any = ref(null)
+
+const updateRender = () => {
+    fakeRender.value = false
+    nextTick(() => {
+        XklSelectRef.value.focus()
+    })
+}
+initFilterable.value = filterable || selectConf?.filterable
+
+const disabled = computed(() => props.disabled)
+
+const OptionComponent = config?.customOption
+
+let sourceData: OptionItem[] = []
+let filterSourceData: OptionItem[] = []
+
+
+const creatingItem: Ref<OptionItem> = ref({
+    label: '',
+    value: '',
+    isChecked: false,
+    isSpecial: false,
+    __created: true
+})
+
+const createdItems: Ref<OptionItem[]> = ref([])
+
+const creatingItemClick = () => {
+    if (selectData.value.length >= multipleLimit) {
+        return
+    }
+    // if (selectData.value.includes(creatingItem.value.value)) {
+    //     return
+    // }
+    creatingItem.value.isChecked = !creatingItem.value.isChecked
+    if (creatingItem.value.isChecked) {
+        createdItems.value.push({ ...creatingItem.value })
+    } else {
+        createdItems.value = createdItems.value.filter(item => item.value !== creatingItem.value.value)
+    }
+}
+
+// 允许创建到第一条时候
+if (allowCreate && createAtFirst) {
+    watch(() => creatingItem.value.isSpecial, (val) => {
+        const item = createdItems.value.find(inner => inner.value == creatingItem.value.value)
+        if (item) {
+            item.isSpecial = val
+        }
+    })
+}
+
+
 
-const dataList: Ref<SelectItem[]> = ref([])
+const filterVal = ref('')
 
 const selectData = computed({
     get() {
-        return dataList.value.length ? props.modelValue : ''
+        if (Array.isArray(props.modelValue)) {
+            return (!dataList.value.length && !allowCreate) ? [] : props.modelValue
+        }
+        return (!dataList.value.length && !allowCreate) ? '' : props.modelValue
     },
     set(val) {
+
         emit('update:modelValue', val)
     }
 })
 
-const changeHandle = (val: string | number | string[] | number[]) => {
+const filterMethod = (val: any) => {
+    if (createAtFirst) {
+        filterVal.value = val
+        creatingItem.value.value = val
+        creatingItem.value.label = val
+        creatingItem.value.isChecked = selectData.value.includes(creatingItem.value.value)
+        const createdItem = createdItems.value.find(item => item.value == val)
+        if (createdItem) {
+            creatingItem.value.isSpecial = createdItem.isSpecial
+        } else {
+            creatingItem.value.isSpecial = false
+        }
+    }
+
+    if (val) {
+        val = val.trim()
+        const filterKeys = config.filterKeys || []
+        dataList.value = filterSourceData.filter(res => {
+            if (filterKeys.length) {
+                for (let k of filterKeys) {
+                    if (res[k] && res[k].toString().includes(val)) {
+                        return true
+                    }
+                }
+            } else {
+                if (config?.smartFilter) {
+                    const startMatch = val.toUpperCase()
+                    const endMatch1 = res.value.toString().toUpperCase()
+                    const endMatch2 = res.label.toString().toUpperCase()
+                    const endMatch3 = res.pinyinStartStr!.toString().toUpperCase()
+                    const endMatch4 = res.pinyinStr!.toString().toUpperCase()
+                    const endMatch5 = res.abbreviation!.toString().toUpperCase()
+                    const endMatch6 = res.pinyin!.toString().toUpperCase()
+                    return endMatch1.includes(startMatch) || endMatch2.includes(startMatch)
+                        || endMatch3.includes(startMatch) || endMatch4.includes(startMatch)
+                        || endMatch5.includes(startMatch) || endMatch6.includes(startMatch);
+                } else {
+                    return res.value.toString().includes(val) || res.label.includes(val);
+                }
+            }
+        })
+    } else {
+        dataList.value = filterSourceData
+    }
+}
+
+const onClick = () => {
+    emit('click')
+}
+
+const valChangeHandle = (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))
+        const values: any = val
+        const items: OptionItem[] = []
+        for (let v of values) {
+            const item = filterSourceData.find(inner => inner.value == v)
+            if (item) {
+                items.push(item)
+            } else {
+                if (allowCreate) {
+                    const createdItem = createdItems.value.find(inner => inner.value == v)
+                    if (createdItem) {
+                        items.push(createdItem)
+                    } else {
+                        items.push({
+                            label: v,
+                            value: v,
+                        } as OptionItem)
+                    }
+                }
+            }
+        }
+        const labels = items.map(res => res.label)
         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)
+        if (!val) {
+            emit('update:label', "")
+            emit('itemChange', null)
+        } else {
+            const item = dataList.value.find(res => res.value === val)
+            if (item) {
+                emit('update:label', item.label)
+                emit('itemChange', item)
+            } else {
+                if (val == 'ALL') {
+                    emit('update:label', config.allLabel || val)
+                    emit('itemChange', {
+                        label: config.allLabel || val,
+                        value: val
+                    })
+                } else if (allowCreate) {
+                    emit('update:label', val)
+                    emit('itemChange', {
+                        label: val,
+                        value: val
+                    })
+                }
+            }
         }
     }
 }
 
+const changeHandle = (val: string | number | string[] | number[]) => {
+    if (allowCreate && createAtFirst) {
+        // 在自动创建时，第一条的点击事件是晚于change事件的，目前的使用场景是要早于change事件
+        setTimeout(() => { valChangeHandle(val) }, 0)
+    } else {
+        valChangeHandle(val)
+    }
+
+}
+
 const handleData = (data) => {
     const split = config?.split
     const labelTarget = config?.labelTarget
@@ -56,6 +259,7 @@ const handleData = (data) => {
     }
 
     if (data) {
+
         data.forEach(inner => {
             inner.value = inner[config?.valueTarget || 'value']
             if (!split) {
@@ -63,47 +267,156 @@ const handleData = (data) => {
             } else {
                 inner.label = labels.map(label => inner[label]).join(split)
             }
+            if (config?.smartFilter) {
+                inner.pinyinStr = pinyin(inner.label, { toneType: 'none', type: 'array' }).join('')
+                inner.pinyinStartStr = pinyin(inner.label, { pattern: 'first', toneType: 'none', type: 'array' }).join('')
+            }
         })
     }
 
     return data || []
 }
 
+let listWatcher: Function
+
 if (typeof list === 'function') {
-    watch(list, (val: SelectItem[]) => {
+    listWatcher = watch(list, (val: OptionItem[]) => {
         dataList.value = val
     })
 }
 
+const checkExist = () => {
+    // return
+    if (!allowCreate) {
+        if (Array.isArray(selectData.value)) {
+            const exist = dataList.value.some(item => selectData.value.includes(item.value))
+            if (!exist) {
+                selectData.value = []
+            }
+        } else {
+            const exist = dataList.value.some(item => item.value === selectData.value)
+            if (!exist && selectData.value !== 'ALL') {
+                selectData.value = ""
+            }
+        }
+    }
+}
+
 onBeforeMount(() => {
+
     if (list) {
         if (typeof list === 'function') {
             return false
         }
-        dataList.value = handleData(list)
+        sourceData = list
+        dataList.value = handleData(sourceData)
+        filterSourceData = handleData(sourceData)
+        // checkExist()
     } else {
         if (!config) { return }
         let doParams
         if (typeof config.params === 'function') {
             doParams = config.params
         } else {
-            doParams = () => config.params
+            doParams = () => config.params || {}
+        }
+
+        const params = doParams()
+
+        const paramsStr = JSON.stringify(params)
+        //先读取缓存中的数据
+        if (appStore.urlSelectData[config.url + paramsStr]) {
+            sourceData = appStore.urlSelectData[config.url + paramsStr]
+            dataList.value = handleData(sourceData)
+            filterSourceData = handleData(sourceData)
+            // 如果缓存中没有数据，可能是以为接口已经发出数据未返回，需要等待
+            if (!dataList.value.length) {
+                toPromise(() => appStore.urlSelectData[config.url + paramsStr]).then((vals) => {
+                    sourceData = vals
+                    dataList.value = handleData(sourceData)
+                    filterSourceData = handleData(sourceData)
+                    emit('loaded', dataList.value, (vals) => {
+                        sourceData = vals
+                        dataList.value = handleData(sourceData)
+                        filterSourceData = handleData(sourceData)
+                        // appStore.urlSelectData[config.url] = JSON.parse(JSON.stringify(dataList.value))
+                    })
+                })
+            } else {
+                // 如果有数据则直接完成load
+                emit('loaded', dataList.value, (vals) => {
+                    sourceData = vals
+                    dataList.value = handleData(sourceData)
+                    filterSourceData = handleData(sourceData)
+                    // appStore.urlSelectData[config.url] = JSON.parse(JSON.stringify(dataList.value))
+                })
+            }
+
+            if (dataList.value.length) {
+                checkExist()
+            }
+        } else {
+            // 缓存中不存在再调用接口 并且开始在缓存中打标记，以防止一个页面有相同接口时会调用多次
+            appStore.urlSelectData[config.url + paramsStr] = []
+            http({
+                url: http.adornUrl(config.url),
+                method: 'get',
+                params: http.adornParams(params)
+            }).then(({ data }) => {
+                sourceData = data.data
+                dataList.value = handleData(sourceData)
+                filterSourceData = handleData(sourceData)
+                appStore.urlSelectData[config.url + paramsStr] = sourceData
+                emit('loaded', dataList.value, (vals) => {
+                    sourceData = vals
+                    dataList.value = handleData(sourceData)
+                    filterSourceData = handleData(sourceData)
+                    // appStore.urlSelectData[config.url + paramsStr] = sourceData
+                })
+                checkExist()
+            }).catch(() => {
+                appStore.urlSelectData[config.url + paramsStr] = undefined
+            })
         }
-        http({
-            url: http.adornUrl(config.url),
-            method: 'get',
-            params: http.adornParams(doParams())
-        }).then(({ data }) => {
-            dataList.value = handleData(data.data)
-            emit('loaded', dataList.value)
-        })
     }
 })
+
+onBeforeUnmount(() => {
+    if (listWatcher) {
+        listWatcher(); // 调用返回函数来移除 watch 监听
+    }
+    dataList.value = []
+    sourceData = []
+    filterSourceData = []
+    if (!dataCahe && config) {
+        Object.keys(appStore.urlSelectData).forEach(key => {
+            if (key.includes(config.url)) {
+                appStore.urlSelectData[key] = undefined
+            }
+        })
+    }
+});
 </script>
 <style lang="scss">
 .readony-input {
-    .el-input__inner {
-        cursor: not-allowed;
+    .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>