@xuekl/cli-components 1.0.0 → 1.0.2

package/ContextMenu.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="my_menu" :style="{ left: position.x + 'px', top: position.y + 'px' }">
+        <div class="menu_item" v-for="item in menus" :key="item.value" @click.stop="resultSend(item)">
+            <span style="width: 100%;display: flex;justify-content: space-between;"
+                :class="{ 'menu-disabled': item.disabled }">{{ item.label }}<span v-if="item.children?.length">
+                    <icon-svg name="more"></icon-svg>
+                </span></span>
+            <div class="my_sub_menu">
+                <div class="menu_item" v-for="sub in item.children" :key="sub.value" @click.stop="resultSend(sub)">
+                    <span class="menu_name" :class="{ 'menu-disabled': item.disabled }">{{ sub.label }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+export default {
+    name: 'ContextMenu'
+}
+</script>
+<script setup lang="ts">
+import { LocalMenu } from '@/utils/type'
+import { Ref, ref } from 'vue';
+const props = defineProps(['position', 'type'])
+const emit = defineEmits(['result'])
+const { position, type } = props
+
+const newChildren: LocalMenu[] = []
+if (type === 'folder' || type === 'root') {
+    newChildren.unshift({
+        value: 'folder', label: '目录'
+    }, {
+        value: 'page', label: '菜单'
+    })
+} else {
+    newChildren.unshift(
+        { value: 'entity', label: '实体' },
+        { value: 'dialogEdit', label: '弹窗' },
+        { value: 'subEidt', label: '页面' },
+        { value: 'dialogDetail', label: '弹窗(详情)' },
+        { value: 'subDetail', label: '页面(详情)' },)
+}
+
+const menus: Ref<LocalMenu[]> = ref([
+    {
+        value: 'new',
+        label: '新建',
+        children: newChildren
+    },
+    { value: 'cut', label: '剪切', disabled: true },
+    { value: 'copy', label: '复制', disabled: true },
+    { value: 'paste', label: '粘贴', disabled: true },
+    { value: 'rename', label: '重命名', disabled: type === 'root' },
+    { value: 'delete', label: '删除', disabled: type === 'root' },
+])
+
+const resultSend = (item: LocalMenu) => {
+    if (item.children || item.disabled) {
+        return false
+    }
+    emit('result', item)
+}
+</script>
+<style lang="scss" scoped>
+.my_menu {
+    position: fixed;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    background-color: #000;
+    color: #fff;
+    border-radius: 4px;
+    box-shadow: 2px 2px 2px 2px #f5f5ff;
+
+    .menu_item {
+        width: 110px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        cursor: pointer;
+
+        .menu_name {
+            display: inline-block;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            background-color: #333;
+
+            .my_sub_menu {
+                display: block;
+            }
+        }
+    }
+
+    .my_sub_menu {
+        display: none;
+        background-color: #000;
+        color: #fff;
+        border-radius: 4px;
+        box-shadow: 2px 2px 2px 2px #f5f5ff;
+        position: absolute;
+        left: 100%;
+        top: 0;
+        border-left: 1px solid #f5f5f5;
+    }
+
+    .menu-disabled {
+        color: #aaa;
+        cursor: not-allowed;
+    }
+}
+</style>

package/PaddingBox.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="padding-box">
+        <slot></slot>
+    </div>
+</template>
+<script lang="ts">
+import { Vue, Options } from "vue-class-component";
+
+@Options({
+    name: 'PaddingBox'
+})
+export default class PaddingBox extends Vue { }
+</script>
+
+<style lang="scss" scoped>
+.padding-box {
+    padding-bottom: 22px;
+}
+</style>

package/PageContainer.vue

@@ -0,0 +1,57 @@
+<template>
+    <div>
+        <div v-if="queryVisible" class="page-query" :class="['mb-' + gutters]">
+            <slot name="query"></slot>
+        </div>
+        <div class="page-body">
+            <slot></slot>
+        </div>
+        <div v-if="footerVisible" class="page-footer" :class="['mt-' + gutters]">
+            <slot name="footer"></slot>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { Vue, Options } from 'vue-class-component'
+
+@Options({
+    name: "PageContainer",
+    props: {
+        gutters: {
+            type: Number,
+            default: 2
+        },
+        queryVisible: {
+            type: Boolean,
+            default: true
+        },
+        footerVisible: {
+            type: Boolean,
+            default: true
+        }
+    }
+})
+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-body {
+    padding: 20px;
+    background-color: #fff;
+}
+
+.page-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 20px;
+    background-color: #fff;
+}
+</style>

package/XklButton.vue

@@ -0,0 +1,34 @@
+<template>
+    <real-el-button v-if="isAuth(auth)" @click.prevent="btnClick">
+        <slot></slot>
+    </real-el-button>
+</template>
+<script lang="ts">
+export default {
+    name: 'ElButton'
+}
+</script>
+<script setup lang="ts">
+import { ElButton as RealElButton } from 'element-plus'
+import { componentGlobal } from '@/utils/global'
+import { isAuth } from '@/utils'
+const props = defineProps(['auth'])
+const emit = defineEmits(['click', 'async'])
+
+const { auth } = props
+let preventClick = false
+
+const btnClick = () => {
+    emit('click')
+    if (componentGlobal.enableSubmit) {
+        preventClick = false
+        componentGlobal.enableSubmit = false
+    }
+    if (!preventClick) {
+        preventClick = true
+        emit('async', () => {
+            setTimeout(() => preventClick = false, 200)
+        })
+    }
+}
+</script>

package/XklDatePicker.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-date-picker :type="type" :start-placeholder="startPlaceholder" :end-placeholder="endPlaceholder"
+        :value-format="valueFormat" />
+</template>
+<script lang="ts">
+export default {
+    name: 'XklDatePicker'
+}
+</script>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps(['type'])
+const { type } = props
+
+console.log('type', type);
+
+
+const startPlaceholder = ref('')
+const endPlaceholder = ref('')
+const valueFormat = ref('YYYY-MM-DD')
+if (type === 'daterange') {
+    startPlaceholder.value = '开始日期'
+    endPlaceholder.value = '结束日期'
+    valueFormat.value = 'YYYY-MM-DD'
+} else if (type === 'datetimerange') {
+    startPlaceholder.value = '开始时间'
+    endPlaceholder.value = '结束时间'
+    valueFormat.value = 'YYYY-MM-DD HH:mm:ss'
+}
+
+</script>

package/XklDict.vue

@@ -1,15 +1,30 @@
 <template>
     <el-select style="width: 100%;">
-        <el-option v-for="item in list" :key="item.id" :label="item.dicValue" :value="item.dicKey"></el-option>
+        <el-option v-for="item in dataList" :key="item.dictCode" :label="item.dictLabel"
+            :value="item.dictValue"></el-option>
     </el-select>
 </template>
+<script lang="ts">
+export default {
+    name: 'XklDict'
+}
+</script>
 <script setup lang="ts">
-import storeController from '@/controller/common/store.controller';
-import { defineProps, reactive } from 'vue'
-const props = defineProps(['dict'])
-const { dict } = reactive(props)
-const { dictList } = storeController
+import { ref, onBeforeMount, Ref } from 'vue'
+import http from "@/utils/httpRequest"
+const props = defineProps(['config'])
+const { config } = props
+const dataList: Ref<{ dictCode: string, dictLabel: string, dictValue: string | number }[]> = ref([])
 
-const list = dictList.filter(res => res.type === dict)
-console.log(list)
+onBeforeMount(() => {
+    http({
+        url: http.adornUrl(`system/dict/data/type/${config.dict}`),
+        method: 'get',
+        params: http.adornParams({})
+    }).then(({ data }) => {
+        if (data.code === 200) {
+            dataList.value = data.data
+        }
+    })
+})
 </script>

package/XklForm.vue

@@ -1,133 +1,200 @@
 <template>
-    <el-form ref="xklForm" :model="form" :label-width="config.labelWidth">
-        <el-row :gutter="20">
-            <template v-for="item in formList" :key="item.key">
-                <el-col v-if="item.show()" :span="item.span || config.span">
-                    <el-form-item :label="item.label" :label-width="item.labelWidth" :rules="item.rules" :prop="item.key">
-                        <slot v-if="item.slot" :name="item.key"></slot>
-                        <div v-else style="width: 100%;display: flex;">
-                            <XklDict v-if="item.dict" v-model="form[item.key]" clearable :placeholder="item.placeholder"
-                                :dict="item.dict" :disabled="item.disabled()"></XklDict>
-                            <XklSelect v-else-if="item.url || item.list" v-model="form[item.key]"
-                                :placeholder="item.placeholder" :config="item" clearable :disabled="item.disabled()">
-                            </XklSelect>
-                            <el-checkbox-group v-else-if="item.boxes" v-model="form[item.key]">
-                                <el-checkbox v-for="box in item.boxes" :label="box.value" :key="box.value">{{ box.label
-                                }}</el-checkbox>
-                            </el-checkbox-group>
-                            <el-radio-group v-else-if="item.radios" v-model="form[item.key]">
-                                <el-radio v-for="rad in item.radios" :label="rad.value" :key="rad.value">{{ rad.label
-                                }}</el-radio>
-                            </el-radio-group>
-                            <el-input type="textarea" v-else-if="item.rows" v-model="form[item.key]"
-                                :placeholder="item.placeholder" :disabled="item.disabled()" :rows="item.rows"
-                                :autosize="item.autosize" :maxlength="item.maxlength" :minlength="item.minlength"
-                                :show-word-limit="item.showWordLimit"></el-input>
-                            <el-input v-else v-model="form[item.key]" :placeholder="item.placeholder"
-                                :disabled="item.disabled()" :maxlength="item.maxlength" :minlength="item.minlength"
-                                :show-word-limit="item.showWordLimit"></el-input>
-                        </div>
+    <el-form ref="XklFormRef" :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" :prop="item.prop"
+                        :rules="item.refRules.value">
+                        <el-input v-if="item.type === 'input'" v-model="form[item.prop]" v-bind="item.element"
+                            v-on="item.events" :disabled="item.disabled()"></el-input>
+                        <el-input-number v-else-if="item.type === 'input-number'" v-model="form[item.prop]"
+                            v-bind="item.element" v-on="item.events" :disabled="item.disabled()"
+                            style="width: 100%;"></el-input-number>
+                        <el-input v-else-if="item.type === 'textarea'" v-model="form[item.prop]" v-bind="item.element"
+                            :disabled="item.disabled()" v-on="item.events" type="textarea"></el-input>
+                        <XklSelect v-else-if="item.type === 'select'" v-model="form[item.prop]"
+                            v-model:label="form[item.prop + 'Label']" :list="item.list" :config="{}" v-bind="item.element"
+                            v-on="item.events" :disabled="item.disabled()">
+                        </XklSelect>
+                        <XklDict v-else-if="item.type === 'dict-select'" v-model="form[item.prop]"
+                            v-model:label="form[item.prop + 'Label']" :config="item.config" v-bind="item.element"
+                            v-on="item.events" :disabled="item.disabled()"></XklDict>
+                        <XklSelect v-else-if="item.type === 'url-select'" v-model="form[item.prop]"
+                            v-model:label="form[item.prop + 'Label']" :config="item.config" v-bind="item.element"
+                            v-on="item.events" :disabled="item.disabled()">
+                        </XklSelect>
+                        <XklTreeSelect v-else-if="item.type === 'tree-select'" v-model="form[item.prop]"
+                            :config="item.config" v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
+                        </XklTreeSelect>
+                        <el-radio-group v-else-if="item.type === 'radio'" v-model="form[item.prop]" v-bind="item.element"
+                            v-on="item.events" :disabled="item.disabled()">
+                            <el-radio v-for="ra in item.list" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio>
+                        </el-radio-group>
+                        <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="form[item.prop]"
+                            v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
+                            <el-checkbox v-for="ch in item.list" :label="ch.value" :key="ch.value">{{ ch.label
+                            }}</el-checkbox>
+                        </el-checkbox-group>
+                        <XklDatePicker v-else-if="item.type === 'date-picker'" v-model="form[item.prop]"
+                            v-bind="item.element" v-on="item.events" style="width: 100%;"></XklDatePicker>
+                        <XklUpload v-else-if="item.type === 'upload'" :key="form[item.prop].length > 0"
+                            v-model="form[item.prop]" :config="item.config" v-bind="item.element" v-on="item.events">
+                        </XklUpload>
+                        <slot v-else :name="item.prop"></slot>
                     </el-form-item>
                 </el-col>
             </template>
-            <el-col :span="config.span">
-                <slot name="_action"></slot>
+            <el-col :span="searchSpan">
+                <el-form-item label-width="0">
+                    <div class="query-action">
+                        <slot name="_action"></slot>
+                    </div>
+                </el-form-item>
             </el-col>
         </el-row>
     </el-form>
 </template>
-
+<script lang="ts">
+export default {
+    name: "XklForm",
+    components: { XklTreeSelect, XklDict, XklDatePicker }
+}
+</script>
 <script setup lang="ts">
-import { Ref, defineProps, onMounted, reactive, ref, watch } from 'vue'
-import { setUpperFirst } from '@/utils'
-import XklSelect from './XklSelect.vue';
+import { setUpperFirst } from '@xuekl/cli-utils'
+import { FormItem } from '@/utils/type'
+import { ref, watch, onMounted } from 'vue'
+import XklSelect from './XklSelect.vue'
+import XklTreeSelect from './XklTreeSelect.vue'
 import XklDict from './XklDict.vue'
-import { RuleItem } from 'async-validator';
+import XklDatePicker from './XklDatePicker.vue'
 
 const props = defineProps(['form'])
-const { form } = reactive(props)
-
-const formList: Ref = ref([])
-
-const config = form.getConfig()
-const options = form.getOptions()
-const xklForm: Ref = ref(null)
-
-Object.keys(form).forEach(key => {
-    const upperKey = setUpperFirst(key)
-    if (form['get' + upperKey]) {
-        const item = form['get' + upperKey]()
-
-        const placelabel = item.label.replace(':', '').replace('：', '').trim()
-        if (item.dict || item.url || item.list) {
-            item.placeholder = item.placeholder || '请选择' + placelabel
-        } else {
-            item.placeholder = item.placeholder || '请输入' + placelabel
-        }
+const XklFormRef = ref(null)
+const { form } = props
+const formList: FormItem[] = []
+const opts = form._opts || {}
 
-        item.required = item.required || (() => false)
-        item.show = item.show || (() => true)
-        item.disabled = item.disabled || (() => false)
-
-        if (options.mode === 'search') {
-            item.rules = ref([])
-            if (item.mode === 'search') {
-                formList.value.push({
-                    key: key,
-                    ...item
+// 获取符合mode的字段
+const modeFields: any = {}
+Object.keys(form).forEach(prop => {
+    if (form['get' + setUpperFirst(prop)]) {
+        const field: FormItem = form['get' + setUpperFirst(prop)]()
+        field.rules = field.rules || []
+        field.refRules = ref(field.rules)
+        field.show = field.show || (() => true)
+        field.disabled = field.disabled || (() => false)
+        if (!['query', 'search'].includes(opts.mode)) {
+            if (field.required) {
+                // 如果穿了required函数监听required的变化
+                watch(field.required, (val) => {
+                    if (val) {
+                        field.refRules.value.push({ required: true, message: '请输入' + field.label, trigger: 'blur' })
+                    } else {
+                        field.refRules.value = field.refRules.value.filter(res => !res.required)
+                    }
                 })
             }
+            field.required = field.required || (() => false)
+            if (field.required()) {
+                field.refRules.value.push({ required: true, message: '请输入' + field.label, trigger: 'blur' })
+            }
         } else {
-            if (item.rules) {
-                item.rules = ref(item.rules)
-            } else {
-                item.rules = ref([])
+            field.refRules.value = field.refRules.value.filter(res => !res.required)
+        }
+        const placeholderStart = ['input', 'textarea'].includes(field.type) ? '请输入' : '请选择'
+        if (!field.element) {
+            field.element = {
+                placeholder: placeholderStart + field.label.replace(':', '').replace('：', ''),
+                clearable: true
             }
-
-            if (item.required()) {
-                item.rules.value.push({ required: true, message: '请输入' + placelabel, trigger: 'blur' })
+        } else {
+            field.element.placeholder = placeholderStart + field.label.replace(':', '').replace('：', '')
+            field.element.clearable = typeof field.element.clearable === 'undefined' ? true : field.element.clearable
+        }
+        const item = {
+            prop,
+            type: field.type,
+            label: field.label,
+            span: field.span || opts.span,
+            labelWidth: field.labelWidth || opts.labelWidth,
+            show: field.show,
+            disabled: field.disabled,
+            required: field.required,
+            refRules: field.refRules,
+            element: field.element,
+            events: field.events || {},
+            list: field.list,
+            config: field.config || {}
+        }
+        if (opts.mode) {
+            if (field.mode && field.mode.includes(opts.mode)) {
+                formList.push(item)
             }
-
-            watch(item.required, (newVal) => {
-                if (newVal) {
-                    item.rules.value.push({ required: true, message: '请输入' + placelabel, trigger: 'blur' })
-                } else {
-                    item.rules.value = item.rules.value.filter((item: RuleItem) => !item.required)
-                    xklForm.value.clearValidate([key])
-                }
-            })
-            formList.value.push({
-                key: key,
-                ...item
-            })
+        } else {
+            formList.push(item)
         }
+    }
+})
 
+//计算按钮所占span
+let toalSpan = 0
+const searchSpan = ref(0)
+formList.forEach(res => {
+    if (res.show && res.show()) {
+        if (res.span) {
+            toalSpan = toalSpan + res.span
+        } else {
+            toalSpan = toalSpan + opts.span
+        }
     }
 
-    const regProto = () => {
-        let enableSubmit = true
-        form.setSubmit((call: (fn: () => void) => void) => {
+})
+searchSpan.value = 24 - toalSpan % 24
+
+
+const regProto = () => {
+    if (XklFormRef.value) {
+        let enableSubmit = true;
+        form.setSubmit((callback: (call: () => void, feils: any) => void) => {
             if (enableSubmit) {
-                enableSubmit = false
-                xklForm.value.validate((valid: boolean) => {
+                enableSubmit = false;
+                formList.forEach(field => {
+                    modeFields[field.prop] = (form as any)[field.prop]
+                });
+                (XklFormRef.value as any).validate((valid: boolean) => {
                     if (valid) {
-                        call(() => {
+                        callback(() => {
                             setTimeout(() => {
                                 enableSubmit = true
                             }, 300)
-                        })
+                        }, modeFields)
                     } else {
                         enableSubmit = true
                     }
                 })
             }
-        })
-        form.setResetFields(xklForm.value.resetFields)
+        }, form)
     }
 
-    onMounted(() => {
-        regProto()
-    })
+    form.setBinds(() => {
+        formList.forEach(field => {
+            modeFields[field.prop] = (form as any)[field.prop]
+        });
+        return modeFields
+    }, form)
+}
+
+onMounted(() => {
+    regProto()
 })
 
-</script>
+
+
+</script>
+<style lang="scss" scoped>
+.query-action {
+    width: 100%;
+    text-align: right;
+}
+</style>

package/XklLink.vue

@@ -0,0 +1,34 @@
+<template>
+    <real-el-link v-if="isAuth(auth)" @click.prevent="btnClick">
+        <slot></slot>
+    </real-el-link>
+</template>
+<script lang="ts">
+export default {
+    name: 'ElLink'
+}
+</script>
+<script setup lang="ts">
+import { ElLink as RealElLink } from 'element-plus'
+import { componentGlobal } from '@/utils/global'
+import { isAuth } from '@/utils'
+const props = defineProps(['auth'])
+const emit = defineEmits(['click', 'async'])
+
+const { auth } = props
+let preventClick = false
+
+const btnClick = () => {
+    emit('click')
+    if (componentGlobal.enableSubmit) {
+        preventClick = false
+        componentGlobal.enableSubmit = false
+    }
+    if (!preventClick) {
+        preventClick = true
+        emit('async', () => {
+            setTimeout(() => preventClick = false, 200)
+        })
+    }
+}
+</script>

package/XklSelect.vue

@@ -1,28 +1,66 @@
 <template>
-    <el-select style="width: 100%;">
-        <el-option v-for="item in dataList" :key="item.key" :label="item[config.labelTarget] || item.label"
-            :value="item[config.valueTarget] || item.value"></el-option>
+    <el-select style="width: 100%;" @change="changeHandle">
+        <el-option v-for="item in dataList" :key="item.id" :label="item.label" :value="item.value"></el-option>
     </el-select>
 </template>
+<script lang="ts">
+export default {
+    name: 'XklSelect'
+}
+</script>
 <script setup lang="ts">
-import { Ref, defineProps, reactive, ref } from 'vue';
-import http from '@/utils/httpRequest'
-const props = defineProps(['config'])
+import { onBeforeMount, ref, Ref, watch } from 'vue'
+import { SelectItem } from '@/utils/type'
+import http from "@/utils/httpRequest"
+const props = defineProps(['config', 'list'])
+const emit = defineEmits(['update:label'])
+const { config, list } = props
+
+const dataList: Ref<SelectItem[]> = ref([])
 
-const { config } = reactive(props)
+const changeHandle = (val: string) => {
+    const item = dataList.value.find(res => res.value === val)
+    if (item) {
+        emit('update:label', item.label)
+    }
+}
 
-const dataList: Ref = ref([])
+const handleData = (data) => {
+    data.forEach(inner => {
+        inner.value = inner[config?.valueTarget || 'value']
+        inner.label = inner[config?.labelTarget || 'label']
+    })
+    return data
+}
 
-if (config.list) {
-    dataList.value = config.list
-} else if (config.url) {
-    http({
-        url: http.adornUrl(config.url),
-        method: 'get',
-        params: http.adornParams({})
-    }).then(({ data }) => {
-        dataList.value = data.data
+if (typeof list === 'function') {
+    watch(list, (val: SelectItem[]) => {
+        dataList.value = val
     })
 }
 
-</script>
+onBeforeMount(() => {
+    if (list) {
+        if (typeof list === 'function') {
+            return false
+        }
+        dataList.value = handleData(list)
+    } else {
+        if (!config) { return }
+        http({
+            url: http.adornUrl(config.url),
+            method: 'get',
+            params: http.adornParams(config.params)
+        }).then(({ data }) => {
+            dataList.value = handleData(data.data)
+        })
+    }
+})
+</script>
+<style lang="scss">
+.readony-input {
+    .el-input__inner {
+        cursor: not-allowed;
+    }
+}
+</style>

package/XklTable.vue

@@ -1,9 +1,30 @@
 <template>
-    <el-table :data="table.list" style="width: 100%">
-        <el-table-column v-if="table.selection" type="selection"></el-table-column>
-        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
-            :width="item.width"></el-table-column>
-        <el-table-column fixed="right" :label="operation.label">
+    <el-table ref="XklTable" :data="table.list" style="width: 100%" :header-cell-style="{ background: '#F1F4F9' }">
+        <el-table-column v-if="table.selection" type="selection" 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">
+            <template v-if="item.reflect" v-slot="{ row }">
+                {{ row[item.reflect] }}
+            </template>
+            <template v-if="item.dict" v-slot="{ row }">
+                <el-tag v-if="item.tags"
+                    :style="{ backgroundColor: tagColor(item, row) + '22', borderColor: tagColor(item, row) + '22', color: tagColor(item, row) }">
+                    {{ dictLabel(item, row) }}
+                </el-tag>
+                <span v-else>{{ dictLabel(item, row) }}</span>
+            </template>
+            <template v-else-if="item.tags" v-slot="{ row }">
+                <el-tag
+                    :style="{ backgroundColor: tagColor(item, row) + '22', borderColor: tagColor(item, row) + '22', color: tagColor(item, row) }">
+                    {{ row[item.prop] }}
+                </el-tag>
+            </template>
+            <template v-else-if="item.slot" v-slot="{ row }">
+                <slot :name="item.prop" :row="row"></slot>
+            </template>
+        </el-table-column>
+        <el-table-column v-if="table.operation.operation !== false" align="center" v-bind="table.operation">
             <template #default="{ row }">
                 <slot name="_operation" :row="row"></slot>
             </template>
@@ -13,13 +34,53 @@
         </template>
     </el-table>
 </template>
+<script lang="ts">
+export default {
+    name: 'XklTable'
+}
+</script>
 <script setup lang="ts">
-import { TableColumn, TableOperation } from '@xuekl/cli-base/types';
-import { defineProps, reactive } from 'vue'
+import http from "@/utils/httpRequest"
+import { computed } from "vue";
 const props = defineProps(['table'])
-const { table } = reactive(props)
+const { table } = props
+const dictTypes = table.columns.map(res => res.dict).filter(res => !!res)
+const dictStore = {}
+
+dictTypes.forEach((dict: string) => {
+    http({
+        url: http.adornUrl(`system/dict/data/type/${dict}`),
+        method: 'get',
+        params: http.adornParams({})
+    }).then(({ data }) => {
+        if (data.code === 200) {
+            dictStore[dict] = data.data
+        }
+    })
+})
+
+const dictLabel = computed(() => {
+    return function (col: any, row: any) {
+        if (dictStore[col.dict]) {
+            const item = dictStore[col.dict].find(res => res.dictValue == row[col.prop]) || {}
+            return item.dictLabel
+        }
+        return ''
+    }
+})
 
-const columns: TableColumn[] = table.columns
-const operation: TableOperation = table.operation
+const tagColor = computed(() => {
+    return function (col, row) {
+        if (col.tags) {
+            if (Array.isArray(col.tags)) {
+                const item = col.tags.find(res => res.value == row[col.prop]) || {}
+                return item.color
+            } else {
+                return col.tags.color
+            }
+        }
+        return ''
+    }
+})
 
 </script>

package/XklTree.vue

@@ -0,0 +1,17 @@
+<template>
+    <el-tree :props="props" :load="loadNode" lazy show-checkbox @check-change="handleCheckChange" />
+</template>
+<script lang="ts">
+export default {
+    name: 'XklTree'
+}
+</script>
+<script setup lang="ts">
+const props = {
+    label: 'name',
+    children: 'zones',
+}
+
+const loadNode = () => { }
+const handleCheckChange = () => { }
+</script>

package/XklTreeSelect.vue

@@ -0,0 +1,50 @@
+<template>
+    <el-tree-select style="width: 100%;" :data="dataList" />
+</template>
+<script lang="ts">
+export default {
+    name: 'XklTreeSelect'
+}
+</script>
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue'
+import http from "@/utils/httpRequest";
+import { treeData } from '@/utils'
+const props = defineProps(['config'])
+const { config } = props
+
+const dataList: any = ref([])
+
+const handleData = (data) => {
+    data.forEach(inner => {
+        inner.value = inner[config.valueTarget || 'value']
+        inner.label = inner[config.labelTarget || 'label']
+        if (inner.children) {
+            handleData(inner.children)
+        }
+    })
+    return data
+}
+
+onBeforeMount(() => {
+    http({
+        url: http.adornUrl(config.url),
+        method: 'get',
+        params: http.adornParams(config.params)
+    }).then(({ data }) => {
+        if (data.code === 200) {
+            if (config.toTree) {
+                data.data = treeData(data.data, config.toTree.id, config.toTree.pId)
+                if (config.toTree.incorporate) {
+                    dataList.value = [{ value: 0, label: config.toTree.incorporate, children: handleData(data.data) }]
+                } else {
+                    dataList.value = handleData(data.data)
+                }
+            } else {
+                dataList.value = handleData(data.data)
+            }
+        }
+    })
+})
+
+</script>

package/XklUpload.vue

@@ -0,0 +1,62 @@
+<template>
+    <el-upload v-model:file-list="fileList" class="upload-demo" :headers="headers" :action="actionUrl"
+        :on-change="handleChange" :before-upload="beforeUpload">
+        <el-button type="primary">点击上传</el-button>
+        <template #tip>
+            <div v-if="config.maxSize" class="el-upload__tip">
+                文件大小不得超过{{ config.maxSize }}M
+            </div>
+        </template>
+    </el-upload>
+</template>
+<script lang="ts">
+export default {
+    name: 'XklUpload'
+}
+</script>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import http from '@/utils/httpRequest';
+import { getToken } from '@/utils'
+const props = defineProps(['config', 'modelValue'])
+const emit = defineEmits(['update:modelValue'])
+const { config, modelValue } = props
+
+const headers = {
+    Authorization: getToken()
+}
+const actionUrl = http.adornUrl(config.url || '/common/upload')
+
+const fileList = ref([])
+
+const beforeUpload = (file) => {
+    if (config.maxSize) {
+        if (file.size > config.maxSize * 1024 * 1024) {
+            ElMessage.warning(`文件大小不得超过${config.maxSize}M`)
+            return false
+        }
+    }
+    return true
+}
+const handleChange = (_file, _files) => {
+    const upFiles = fileList.value.map((res: any) => {
+        const j = {
+            name: res.name,
+            url: res.url
+        }
+        if (res.response) {
+            j.name = res.response.originalFilename
+            j.url = res.response.url
+        }
+
+        return j
+    })
+    emit('update:modelValue', upFiles)
+}
+
+
+onMounted(() => {
+    fileList.value = modelValue
+})
+</script>

package/index.ts

@@ -0,0 +1,29 @@
+import ContextMenu from './ContextMenu.vue'
+import PaddingBox from './PaddingBox.vue'
+import PageContainer from './PageContainer.vue'
+import XklButton from './XklButton.vue'
+import XklDatePicker from './XklDatePicker.vue'
+import XklDict from './XklDict.vue'
+import XklForm from './XklForm.vue'
+import XklLink from './XklLink.vue'
+import XklSelect from './XklSelect.vue'
+import XklTable from './XklTable.vue'
+import XklTree from './XklTree.vue'
+import XklTreeSelect from './XklTreeSelect.vue'
+import XklUpload from './XklUpload.vue'
+
+export {
+  ContextMenu,
+  PaddingBox,
+  PageContainer,
+  XklButton,
+  XklDatePicker,
+  XklDict,
+  XklForm,
+  XklLink,
+  XklSelect,
+  XklTable,
+  XklTree,
+  XklTreeSelect,
+  XklUpload,
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@xuekl/cli-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
-  "main": "index.js",
+  "main": "index.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },