vue-2024-ui 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-2024-ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "private": false,
   "type": "module",
   "main": "src/components/index.js",

package/src/components/g-ctrl.vue

@@ -38,23 +38,25 @@
         </el-checkbox-group>
         <!--select-->
         <el-select v-model="ctrlValue" :placeholder="model[ctrlKey].label" v-bind="selectModel"
-            v-else-if="ctrlType == 'select'">
-            <template #default v-if="model[ctrlKey]?.options?.some(a => a.options)">
+            v-else-if="ctrlType === 'select'">
+            <template #default>
                 <slot :name="`${props.t}-${ctrlKey}`" :options="model[ctrlKey].options">
-                    <el-option-group v-for="group in model[ctrlKey].options" :label="group.label">
-                        <el-option v-bind="option" v-for="option in group.options"
+                    <!-- 根据是否存在子选项渲染不同结构 -->
+                    <template v-if="model[ctrlKey]?.options?.some(a => a.options)">
+                        <el-option-group v-for="group in model[ctrlKey].options" :key="group.label"
+                            :label="group.label">
+                            <el-option v-bind="option" v-for="option in group.options" :key="option.value"
+                                @click.native="selectModel.change && selectModel.change(option)">
+                                <slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
+                            </el-option>
+                        </el-option-group>
+                    </template>
+                    <template v-else>
+                        <el-option v-bind="option" v-for="option in model[ctrlKey].options" :key="option.value"
                             @click.native="selectModel.change && selectModel.change(option)">
                             <slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
                         </el-option>
-                    </el-option-group>
-                </slot>
-            </template>
-            <template #default v-else>
-                <slot :name="`${props.t}-${ctrlKey}`" :options="model[ctrlKey].options">
-                    <el-option v-bind="option" v-for="option in model[ctrlKey].options"
-                        @click.native="selectModel.change && selectModel.change(option)">
-                        <slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
-                    </el-option>
+                    </template>
                 </slot>
             </template>
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
@@ -62,7 +64,7 @@
             </template>
         </el-select>
         <!--tree-select-->
-        <el-tree-select v-model="ctrlValue" :placeholder="model[ctrlKey].label" v-bind="itemInfo"
+        <el-tree-select v-model="ctrlValue" :placeholder="model[ctrlKey].label" v-bind="itemInfo" :data="treeSelectData"
             v-else-if="ctrlType == 'tree-select'">
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
@@ -107,7 +109,8 @@
             </template>
         </el-transfer>
         <!--cascader-->
-        <el-cascader v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'cascader'">
+        <el-cascader v-model="ctrlValue" v-bind="itemInfo" :options="model[ctrlKey].options"
+            v-else-if="ctrlType == 'cascader'">
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
             </template>
@@ -134,7 +137,7 @@
         </el-input-number>
         <!--input-->
         <el-input v-model="ctrlValue" :placeholder="model[ctrlKey].label" :maxlength="itemInfo?.max || 25"
-            :clearable="true" v-bind="itemInfo" v-else>
+            :clearable="true" v-bind="{ ...itemInfo, type: ctrlType }" v-else>
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
             </template>
@@ -144,14 +147,14 @@
 
 <script setup>
 defineOptions({ inheritAttrs: false });
-import { onMounted, useSlots } from "vue";
-import { filterObject } from ".";
+import { onMounted, useSlots, ref } from "vue";
 const ctrlValue = defineModel({ required: true });
 const props = defineProps(["t", "ctrlKey", "item", "model", 'ctrlType'])
 const itemInfo = props.item;
 const ctrlKey = props.ctrlKey;
 const ctrlType = props.ctrlType;
 const model = props.model;
+const treeSelectData = ref([]);
 const slots = () => Object.keys(useSlots()).filter(a => a.startsWith(`${props.t}-${ctrlKey}-`)).map(a => a.replace(`${props.t}-${ctrlKey}-`, ''));
 
 //select 默认属性
@@ -166,9 +169,63 @@ const selectRemoteMethod = (query) => {
     })
 }
 
-onMounted(() => {
+// 新增：标记数据是否加载完成
+const isOptionsLoaded = ref(false);
+
+// 模拟异步获取数据的函数
+const options = async (keyValue = 'options') => {
+    try {
+        // 这里替换为实际的异步请求
+        const response = await itemInfo?.options(model);
+        model[ctrlKey][keyValue] = response;
+        isOptionsLoaded.value = true;
+    } catch (error) {
+        console.error('Failed to fetch options:', error);
+    }
+};
+
+onMounted(async () => {
     if (itemInfo && itemInfo["remote-method"]) {
         selectModel['remote-method'] = selectRemoteMethod;
     }
+    // 新增：在组件挂载时调用异步获取数据的函数
+    // 提取公共逻辑到一个函数中
+    const loadOptions = (key, keyValue = 'options', targetRef = model[ctrlKey]) => {
+        if (typeof itemInfo.options === 'function') {
+            options(keyValue).catch(error => {
+                console.error(`Failed to load ${keyValue} for ${key}:`, error);
+            });
+        } else if (Array.isArray(itemInfo.options)) {
+            targetRef[keyValue] = itemInfo.options;
+            // 更新数据加载状态
+            isOptionsLoaded.value = true;
+        }
+    };
+
+    // 处理不同的 ctrlType
+    const typesWithOptions = ['radio', 'radio-button', 'checkbox-group', 'checkbox-group-button', 'select', 'cascader'];
+    if (typesWithOptions.includes(ctrlType)) {
+        loadOptions(ctrlType);
+    }
+
+    if (ctrlType === 'tree-select') {
+        const loadTreeSelectOptions = async () => {
+            try {
+                if (typeof itemInfo.options === 'function') {
+                    treeSelectData.value = await itemInfo.options(model);
+                } else if (Array.isArray(itemInfo?.data)) {
+                    treeSelectData.value = itemInfo.data;
+                } else if (itemInfo?.options && Array.isArray(itemInfo?.options)) {
+                    treeSelectData.value = itemInfo.options;
+                }
+                // 更新数据加载状态
+                isOptionsLoaded.value = true;
+            } catch (error) {
+                console.error(`Failed to load data for tree-select:`, error);
+            }
+        };
+        await loadTreeSelectOptions();
+    }
+
 })
 </script>

package/src/components/g-query-item.vue

@@ -1,20 +1,18 @@
 <template>
     <template v-for="(item, key) of getQueryModel(props.more)" :key="key">
-        <el-col v-bind="{ ...model.query.cols, ...item?.search?.col }">
-            <slot :name="`q-${key}`" :item :model>
-                <el-form-item :label="item.label" v-bind="{ ...model.queryItems, ...item?.search }">
-                    <g-ctrl v-model="queryModel[key]" :item="item?.editor" :ctrlKey="key" :ctrlType="item.type" :model
-                        t="q">
-                        <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
-                            <slot :name="slotKey" :data :item :model></slot>
-                        </template>
-                    </g-ctrl>
-                    <template #label>
-                        <slot :name="`q-${key}-label`" :item :model></slot>
+        <slot :name="`q-${key}`" :item :model>
+            <el-form-item :label="item.label" v-bind="{ ...model.queryItems, ...item?.search }">
+                <g-ctrl v-model="queryModel[key]" :item="{ ...item?.editor, ...item.search }" :ctrlKey="key"
+                    :ctrlType="item.type" :model t="q">
+                    <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                        <slot :name="slotKey" :data :item :model></slot>
                     </template>
-                </el-form-item>
-            </slot>
-        </el-col>
+                </g-ctrl>
+                <template #label>
+                    <slot :name="`q-${key}-label`" :item :model></slot>
+                </template>
+            </el-form-item>
+        </slot>
     </template>
 </template>
 

package/src/components/g-query.vue

@@ -6,42 +6,41 @@
                     <slot :name="slotKey" :model></slot>
                 </template>
             </g-query-item>
-            <el-col v-bind="model.query.btns.col" style="width:100%;">
-                <el-form-item style="width: 100%;">
-                    <div :style="model.query.btns.style">
-                        <el-button v-bind="model.query.query" @click="model.query.query.click()">
-                            {{ model.query.query.label }}
-                        </el-button>
-                        <el-button v-bind="model.query.reset" @click="model.query.reset.click()">
-                            {{ model.query.reset.label }}
-                        </el-button>
-                        <el-button v-bind="model.query.more" @click="model.query.more.click()"
-                            v-if="model.query.more.mode !== 3">
-                            {{ model.query.more.label }}
-                        </el-button>
-                        <el-popover v-bind="model.query.more.dialog" v-if="model.query.more.mode == 3">
-                            <template #reference>
-                                <el-button v-bind="model.query.more">
-                                    {{ model.query.more.label }}
-                                </el-button>
-                            </template>
-                            <template #default>
-                                <el-form
-                                    v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))">
-                                    <g-query-item v-model="model" v-model:info="queryModel" :more="true">
-                                        <template v-for="(slot, slotKey, index) in $slots" :key="index"
-                                            #[slotKey]="data">
-                                            <slot :name="slotKey" :model></slot>
-                                        </template>
-                                    </g-query-item>
-                                </el-form>
-                            </template>
-                        </el-popover>
-                        <slot name="q-btns"></slot>
-                    </div>
-                </el-form-item>
-            </el-col>
         </el-form>
+        <el-form style="display: flex;">
+            <el-form-item style="width: 100%;">
+                <div :style="model.query.btns.style">
+                    <el-button v-bind="model.query.query" @click="model.query.query.click()">
+                        {{ model.query.query.label }}
+                    </el-button>
+                    <el-button v-bind="model.query.reset" @click="model.query.reset.click()">
+                        {{ model.query.reset.label }}
+                    </el-button>
+                    <el-button v-bind="model.query.more" @click="model.query.more.click()"
+                        v-if="model.query.more.mode !== 3">
+                        {{ model.query.more.label }}
+                    </el-button>
+                    <el-popover v-bind="model.query.more.dialog" v-if="model.query.more.mode == 3">
+                        <template #reference>
+                            <el-button v-bind="model.query.more">
+                                {{ model.query.more.label }}
+                            </el-button>
+                        </template>
+                        <template #default>
+                            <el-form v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))">
+                                <g-query-item v-model="model" v-model:info="queryModel" :more="true">
+                                    <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                                        <slot :name="slotKey" :model></slot>
+                                    </template>
+                                </g-query-item>
+                            </el-form>
+                        </template>
+                    </el-popover>
+                    <slot name="q-btns"></slot>
+                </div>
+            </el-form-item>
+        </el-form>
+
         <Transition :duration="300" name="nested">
             <div v-if="isShowMore && !model.query.more.hidden && model.query.more.mode == 1" class="outer">
                 <div class="inner">
@@ -124,13 +123,9 @@ const defaultQueryAttrs = {
             isShowMore.value = false;
         }
     },
-    cols: {
-        span: 6, offset: 0, xs: 24, sm: 12, md: 8, lg: 6, xl: 4,
-    },
     btns: {
-        col: { span: 8, offset: 0, xs: 24, sm: 12, md: 8, lg: 6, xl: 4, },
         style: {
-            width: "100%", display: "flex", justifyContent: "flex-end"
+            width: "100%", display: "flex", flexWrap: "wrap", justifyContent: "flex-start",
         }
     }
 }
@@ -153,9 +148,8 @@ model.value.query.more.dialog = model.value.query.more.mode == 2 ? mergeObjects(
 const defaultQueryItemsAttrs = {
     type: "hidden",
     labelPosition: 'right',
-    span: 8,
     style: {
-        width: "100%"
+        width: "280px"
     }
 };
 model.value.queryItems = mergeObjects(defaultQueryItemsAttrs, options?.queryItems, model.value.queryItems);

package/src/components/g-table.vue

@@ -7,17 +7,23 @@
                 </template>
                 <template #q-btns>
                     <slot name="q-btns">
-                        <div class="btns" v-if="model.control.add.auth()">
+                        <div class="btns">
                             <slot name="control-add-left"></slot>
-                            <slot name="control-add">
+                            <slot name="control-add" v-if="model.control.add.auth()">
                                 <el-button v-bind="model.control.add" @click="addRow(model)">{{
                                     model.control.add.label
                                 }}</el-button>
                             </slot>
                             <slot name="control-add-right"></slot>
                         </div>
+                        <div class="btns" v-if="model.control.download.auth()">
+                            <slot name="control-download">
+                                <el-button v-bind="model.control.download" @click="download(model)">{{
+                                    model.control.download.label
+                                }}</el-button>
+                            </slot>
+                        </div>
                     </slot>
-
                 </template>
             </g-query>
         </slot>
@@ -94,6 +100,7 @@
                             <div>{{ model.dialog.title }}</div>
                         </slot>
                     </div>
+                    <!-- :icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'" -->
                     <!--最大化-->
                     <div v-if="model?.dialog?.fullScreen === false" @click="model.dialog.fullScreen = true;"
                         class="max">
@@ -148,7 +155,7 @@ import { computed, watchEffect, inject, ref } from 'vue';
 import GForm from './g-form.vue';
 import gQuery from './g-query.vue';
 import { mergeObjects, filterObject, convertToPx } from './index';
-import { FullScreen, Remove } from '@element-plus/icons-vue';
+import { FullScreen, Remove, } from '@element-plus/icons-vue';
 
 defineOptions({
     name: "g-table",
@@ -236,6 +243,13 @@ const defaultControl = {
             message: '此操作将永久删除该文件, 是否继续?', title: '提示', options: { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
         },
     },
+    download: {
+        label: '下载', text: false, type: 'primary',
+        style: {
+            marginLeft: "10px",
+        },
+        auth: () => false,
+    },
 };
 model.value.control = mergeObjects(
     defaultControl,
@@ -290,44 +304,59 @@ const initFormData = Object.fromEntries(Object.entries(filterObject(model.value,
     return (val.type != 'control' && val.editor !== false && val.type != 'hidden');
 })).map(([key, val]) => [key, val.value]));
 
-//扩展formatter方法
 const formatterExtends = (item, str) => {
+    // 初始化最终值为输入的字符串
     let trueValue = str;
-    if (item.decimals && !isNaN(str)) {
-        if (typeof item.decimals == 'number') {
+    // 处理小数位数
+    if (item.decimals &&!isNaN(str)) {
+        if (typeof item.decimals === 'number') {
+            // 确保输入是有效的数字，然后保留指定小数位数
             trueValue = parseFloat(trueValue).toFixed(item.decimals);
-        }
-        else if (typeof item.decimals == 'object') {
+        } else if (typeof item.decimals === 'object') {
             if (item.decimals.num) {
                 if (item.decimals.pad) {
+                    // 保留指定小数位数并补零
                     trueValue = parseFloat(trueValue).toFixed(item.decimals.num);
                 } else {
+                    // 保留指定小数位数但不补零
                     trueValue = parseFloat(parseFloat(trueValue).toFixed(item.decimals.num));
                 }
             }
         }
     }
+
+    // 处理日期格式化
     if (item.dateFormat && dayjs(str).isValid()) {
-        if (item.dateFormat == 'date') {
-            trueValue = dayjs(trueValue).format('YYYY-MM-DD');
-        } else if (item.dateFormat == 'time') {
-            trueValue = dayjs(trueValue).format('HH:mm:ss');
-        }
-        else if (item.dateFormat == 'datetime') {
-            trueValue = dayjs(trueValue).format('YYYY-MM-DD HH:mm:ss');
-        }
-        else {
-            trueValue = dayjs(trueValue).format(item.dateFormat)
+        switch (item.dateFormat) {
+            case 'date':
+                trueValue = dayjs(trueValue).format('YYYY-MM-DD');
+                break;
+            case 'time':
+                trueValue = dayjs(trueValue).format('HH:mm:ss');
+                break;
+            case 'datetime':
+                trueValue = dayjs(trueValue).format('YYYY-MM-DD HH:mm:ss');
+                break;
+            default:
+                trueValue = dayjs(trueValue).format(item.dateFormat);
         }
     }
+
+    // 处理前缀
     if (item.prefix && trueValue) {
+        // 使用模板字符串添加前缀
         trueValue = `<span>${item.prefix}${trueValue}</span>`;
     }
+
+    // 处理后缀
     if (item.suffix && trueValue) {
-        trueValue += `<span>${item.suffix}</span>`
+        // 使用模板字符串添加后缀
+        trueValue = `${trueValue}<span>${item.suffix}</span>`;
     }
-    return trueValue
-}
+
+    return trueValue;
+};
+
 
 
 //重置查询初始值
@@ -339,6 +368,7 @@ const queryReset = (q) => {
 //查询方法
 const query = (q) => {
     queryInfo.value = q;
+    model.value.table.load();
 }
 
 //新增方法
@@ -429,6 +459,14 @@ const formReset = (callback) => {
     emits("reset", callback)
 }
 
+const download = (model) => {
+    if (model.control.download?.click) {
+        model.control.download.click(model);
+    } else {
+        alert("download");
+    }
+}
+
 //表格列
 const tableColumns = computed(() => Object.fromEntries(
     Object.entries(model.value)

package/src/components/index.js

@@ -178,4 +178,27 @@ function filterObject(obj, filter = (key, value) => filter(key, value)) {
     return result;
 }
 
-export { openModal, convertToPx, mergeObjects, filterObject };
+/**
+ * 在树形结构中通过一个 value 值查找对应的 label，使用递归方式。
+ * @param {Array} treeData - 树形结构的数据数组。
+ * @param {*} value - 需要查找的 value 值。
+ * @param {string} [valueKey="value"] - 数据节点中表示 value 的键名。
+ * @param {string} [labelKey="label"] - 数据节点中表示 label 的键名。
+ * @param {string} [childrenKey="children"] - 数据节点中表示子节点的键名。
+ * @returns {string|null} - 如果找到对应的 label 则返回该 label，否则返回 null。
+ */
+function findTreeLabelByValue(treeData, value, valueKey = "value", labelKey = "label", childrenKey = "children") {
+    for (const node of treeData) {
+        if (node[valueKey] === value) {
+            return node[labelKey];
+        }
+        if (node[childrenKey] && node[childrenKey].length > 0) {
+            const result = findTreeLabelByValue(node[childrenKey], value, valueKey, labelKey, childrenKey);
+            if (result) {
+                return result;
+            }
+        }
+    }
+    return null;
+}
+export { openModal, convertToPx, mergeObjects, filterObject, findTreeLabelByValue };