vue-2024-ui 0.0.24 → 0.0.26

package/package.json

@@ -1,24 +1,16 @@
 {
   "name": "vue-2024-ui",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "private": false,
   "type": "module",
-  "main": "./dist/vue-2024-ui.cjs",
-  "module": "./dist/vue-2024-ui.min.js",
-  "types": "./dist/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/types/index.d.ts",
-      "import": "./dist/vue-2024-ui.esm.js",
-      "require": "./dist/vue-2024-ui.cjs"
-    }
-  },
+  "main": "./src/components/index.js",
+  "types": "./dist/types/index.d.ts", 
   "author": {
     "name": "guoyuanchao",
     "email": "xg816620@163.com"
   },
   "files": [
-    "dist",
+    "./src/components",
     "README.md"
   ],
   "scripts": {
@@ -34,18 +26,18 @@
     "sortablejs": "^1.15.6"
   },
   "peerDependencies": {
-    "vue": "^3.4.29",
-    "element-plus": "^2.8.4"
+    "element-plus": "^2.8.4",
+    "vue": "^3.4.29"
   },
   "license": "MIT",
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "vite": "^5.3.1",
-    "vite-plugin-vue-devtools": "^7.3.1",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "rollup-plugin-visualizer": "^5.10.0",
     "@vue/compiler-sfc": "^3.4.29",
-    "terser": "^5.27.0"
+    "rollup-plugin-visualizer": "^5.10.0",
+    "terser": "^5.27.0",
+    "vite": "^5.3.1",
+    "vite-plugin-vue-devtools": "^7.3.1"
   }
-}
+}

package/src/components/check-excel-item.vue

@@ -0,0 +1,105 @@
+<template>
+    <div style="padding:0;margin: 0;box-sizing: border-box;">
+        <div style="padding: 10px;box-sizing: border-box;">
+            <div style="margin: 10px">
+                <a @click="selectAll">全选</a>
+                <el-divider direction="vertical"></el-divider>
+                <a @click="clearAll">全不选</a>
+            </div>
+            <el-alert title="拖动列标题可以改变表格列的生成顺序 !" type="warning" show-icon :closable="false"
+                style="margin-bottom: 10px">
+            </el-alert>
+            <div style="margin: 1px 0;"></div>
+            <div style="display: flex;">
+                <el-checkbox-group id="excelSortEl" v-model="checkList" @change="handleCheckedCitiesChange" style="display: flex;flex-wrap: wrap;margin:0 !important;padding:0 !important; 
+                ">
+                    <el-checkbox class="check-box-hover"
+                        style=" width: 120px !important;  height: 30px !important;  border: 1px solid #dfe6ec;  margin: 5px !important;  border-radius: 3px !important;  padding-left: 5px !important;  display:flex !important;  align-items: center !important;"
+                        :data-id="index" v-for="(item, index) in excelItems" :value="item.value" :key="'el-i-' + index"
+                        :title="item.label">
+                        <span v-text="item.label"
+                            style="display: block; text-overflow: ellipsis;width:95px;overflow: hidden;"></span>
+                    </el-checkbox>
+                </el-checkbox-group>
+            </div>
+        </div>
+        <div
+            style="width:100%;display: flex;padding: 10px; box-sizing:border-box; justify-content: center;border-top: 1px solid #dcdfe6;">
+            <el-button type="primary" @click="createExcel" :disabled="checkList.length <= 0">
+                <a href="" :download="returnUrl" style="text-decoration: none;"> {{ props.commitText }}</a>
+            </el-button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import Sortable from "sortablejs";
+
+const props = defineProps({
+    items: Array,
+    commitText: String
+});
+
+const emits = defineEmits(['save']);
+// 定义响应式数据
+const checkAll = ref(false);
+const checkList = ref([]);
+const excelItems = ref(props.items);
+const isIndeterminate = ref(true);
+const afterDragData = ref([]);
+const returnUrl= ref('');
+
+// 定义方法
+const createExcel = () => {
+    let arr = [];
+    (afterDragData.value.length === 0 ? excelItems.value : afterDragData.value).forEach(element => {
+        if (checkList.value.includes(element)) {
+            arr.push(element);
+        }
+    });
+    emits('save', arr);
+    console.log(arr);
+};
+
+const handleCheckAllChange = (val) => {
+    checkList.value = val ? props.items : [];
+    isIndeterminate.value = false;
+};
+
+const handleCheckedCitiesChange = (value) => {
+    let checkedCount = value.length;
+    checkAll.value = checkedCount === excelItems.value.length;
+    isIndeterminate.value = checkedCount > 0 && checkedCount < excelItems.value.length;
+};
+
+// 生命周期钩子
+onMounted(() => {
+    checkAll.value = true;
+    isIndeterminate.value = false;
+    checkList.value = props.items || [];
+    const sortable = new Sortable(document.getElementById('excelSortEl'), {
+        animation: 150,
+        onEnd: () => {
+            afterDragData.value = [];
+            let indexArr = sortable.toArray();
+            console.log(indexArr);
+            indexArr.forEach(element => {
+                afterDragData.value.push(excelItems.value[parseInt(element)]);
+            });
+        },
+    });
+    // 保存 sortable 实例以便在组件销毁时销毁它
+    const sortableInstance = sortable;
+    onBeforeUnmount(() => {
+        if (sortableInstance) {
+            sortableInstance.destroy();
+        }
+    });
+});
+</script>
+<style scoped>
+.check-box-hover:hover {
+    background: #f5f1f1;
+}
+</style>

package/src/components/columns-setting.vue

@@ -0,0 +1,168 @@
+<template>
+  <div>
+    <div style="margin: 10px" class="allcheck">
+      <a @click="selectAll">全选</a>
+      <el-divider direction="vertical"></el-divider>
+      <a @click="clearAll">全不选</a>
+      <el-divider direction="vertical"></el-divider>
+      <a @click="rowReset">复位</a>
+    </div>
+    <el-alert title="拖动表格列标题可以改变表格列显示顺序 !" type="warning" show-icon :closable="false" style="margin-bottom: 10px">
+    </el-alert>
+    <div>
+      <div id="cols" style="display: flex;flex-wrap: wrap;margin:0 !important;padding:0 !important; ">
+        <el-checkbox v-model="check.showCol" :data-id="check.value" class="check-box-hover"
+          :class="check.value == 'control' ? 'filtered' : ''" @change="(v) => change(v, check.value)" style=" width: 125px !important; height: 30px !important;  border: 1px solid #dfe6ec;  margin: 5px !important;  border-radius: 2px !important;
+  padding-left: 5px !important;  display: flex !important;  align-items: center !important;" :value="check.value"
+          :title="check.label" :disabled="check.alwaysShow" v-for="(check) in cols" :key="check.value">
+          <span v-text="check.label"
+            style="display: block; text-overflow: ellipsis;width:95px;overflow: hidden;"></span>
+        </el-checkbox>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import Sortable from "sortablejs";
+import { deleteTableInfo, saveTableInfo } from './db';
+import { ElMessage, ElMessageBox } from 'element-plus';
+// 定义 props
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+});
+
+const cols = ref([]);
+// 定义响应式数据
+const arrKeys = defineModel({ required: true });
+
+const change = async (val, key) => {
+  if (val) {
+    arrKeys.value[key].showCol = true;
+  } else {
+    arrKeys.value[key].showCol = false;
+  }
+  saveTableInfo(arrKeys.value.table.user, props.name, key, { showCol: val }).then((res) => {
+    console.log(res);
+  })
+}
+
+// 拖拽列
+const rowDrop = () => {
+  const c = document.getElementById("cols");
+  if (c) {
+    let arr = Sortable.create(c, {
+      animation: 150,
+      filter: '.filtered', //
+      sort: true,
+      onEnd: () => {
+        let indexArr = arr.toArray();
+        indexArr.forEach((element, index) => {
+          arrKeys.value[element].sort = index;
+          let w = arrKeys.value[element].width || "auto";
+          saveTableInfo(arrKeys.value.table.user, props.name, element, { sort: index, width: w }).then((res) => {
+            console.log(res);
+          })
+        })
+      },
+    });
+  }
+};
+
+
+// 全选列
+const selectAll = async () => {
+  try {
+    for (const element of cols.value) {
+      element.showCol = true;
+      arrKeys.value[element.value].showCol = true;
+      const res = await saveTableInfo(arrKeys.value.table.user, props.name, element.value, {
+        showCol: true, width: element.width, sort: element.sort
+      });
+      console.log(res);
+    }
+  } catch (error) {
+    console.error('全选列保存信息时出错:', error);
+    ElMessage({
+      type: 'error',
+      message: '全选列保存信息失败!',
+    });
+  }
+};
+
+// 清除列
+const clearAll = async () => {
+  try {
+    const filteredCols = cols.value.filter(a => !a.alwaysShow);
+    for (const element of filteredCols) {
+      element.showCol = false;
+      arrKeys.value[element.value].showCol = false;
+      const res = await saveTableInfo(arrKeys.value.table.user, props.name, element.value, {
+        showCol: false, width: element.width, sort: element.sort
+      });
+      console.log(res);
+    }
+  } catch (error) {
+    console.error('清除列保存信息时出错:', error);
+    ElMessage({
+      type: 'error',
+      message: '清除列保存信息失败!',
+    });
+  }
+};
+// 复位
+const rowReset = () => {
+  ElMessageBox.confirm('确定要复位吗?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    deleteTableInfo(arrKeys.value.table.user, props.name).then((res) => {
+      console.log(res);
+      window.location.reload();
+    }).catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '复位失败!',
+      });
+    })
+  })
+};
+onMounted(async () => {
+  cols.value = Object.entries(arrKeys.value)
+    .filter(([key, value]) => value.visible !== false)
+    .filter(([key, value]) => value.type != "hidden").map(([key, value]) => {
+      return {
+        label: value.label,
+        value: key,
+        alwaysShow: value.alwaysShow,
+        showCol: value.showCol === false ? false : true,
+        sort: value.sort || 0,
+        width: value.width || "auto",
+      };
+    }).sort((a, b) => a.sort - b.sort);
+  rowDrop();
+
+
+
+});
+</script>
+
+<style scoped>
+.check-box-hover:hover {
+  background: #f5f1f1;
+}
+
+.allcheck a {
+  cursor: pointer;
+}
+
+.filtered {
+  pointer-events: none;
+}
+</style>

package/src/components/db.js

@@ -0,0 +1,39 @@
+// db.js
+import {Dexie} from 'dexie';
+
+const db = new Dexie('gyc');
+//删除数据库
+//db.delete();
+db.version(1).stores({
+    tableInfo: '++id,user,page,key,showCol,width,sort',
+    tableList: "++id,name"
+});
+
+export async function saveTableInfo(user, page, key, options = {}) {
+    let count = await db.tableInfo.where({ user, page, key }).count();
+    if (count > 0) {
+        let m = await db.tableInfo.where({ user, page, key }).first();
+        await db.tableInfo.put({ ...m, ...options });
+        return 'update success'
+    } else {
+        let d = { showCol: true, width: 'auto', sort: 0, ...options }
+        await db.tableInfo.add({ user, page, key, ...d });
+        return 'add success'
+    }
+}
+
+export async function getTableInfo(user, page) {
+    return await db.tableInfo.where({ user, page }).toArray();
+}
+
+export async function deleteTableInfo(user, page) {
+    db.tableInfo.where({ user, page }).delete((deleteCount) => {
+        console.log("删除了" + deleteCount + "条数据");
+    });
+}
+
+export async function existsTableName(page) {
+    let count = await db.tableInfo.where({ page }).count();
+    return count > 0;
+}
+

package/src/components/g-ctrl.vue

@@ -0,0 +1,231 @@
+<template>
+    <div style="display: flex; width: 100%;" class="g-ctrl-container">
+        <!--radio-->
+        <el-radio-group v-model="ctrlValue" v-bind="itemInfo" v-if="ctrlType == 'radio'">
+            <slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
+                <el-radio v-bind="option" v-for="option in model[ctrlKey].options">
+                    <slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
+                </el-radio>
+            </slot>
+        </el-radio-group>
+        <!--radio-button-->
+        <el-radio-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'radio-button'">
+            <slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
+                <el-radio-button v-bind="option" v-for="option in model[ctrlKey].options">
+                    <slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
+                </el-radio-button>
+            </slot>
+        </el-radio-group>
+        <!--checkbox-->
+        <el-checkbox v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox'">
+            <slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">{{ " " }}</slot>
+        </el-checkbox>
+        <!--checkbox-group-->
+        <el-checkbox-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox-group'">
+            <slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
+                <el-checkbox v-bind="option" v-for="option in model[ctrlKey].options">
+                    <slot :name="`${props.t}-${ctrlKey}-options`" :option>{{ option.label }}</slot>
+                </el-checkbox>
+            </slot>
+        </el-checkbox-group>
+        <!--checkbox-group-button-->
+        <el-checkbox-group v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'checkbox-group-button'">
+            <slot :name="`${props.t}-${ctrlKey}`" :data="itemInfo">
+                <el-checkbox-button v-bind="option" v-for="option in model[ctrlKey].options">
+                    <slot :name="`${props.t}-${ctrlKey}-options`" :option></slot>
+                </el-checkbox-button>
+            </slot>
+        </el-checkbox-group>
+        <!--select-->
+        <el-select v-model="ctrlValue" :placeholder="model[ctrlKey].label" v-bind="selectModel"
+            v-else-if="ctrlType === 'select'">
+            <template #default>
+                <slot :name="`${props.t}-${ctrlKey}`" :options="model[ctrlKey].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>
+                    </template>
+                </slot>
+            </template>
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-select>
+        <!--tree-select-->
+        <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>
+            </template>
+        </el-tree-select>
+        <!--time-->
+        <el-time-picker v-model="ctrlValue" arrow-control v-bind="itemInfo" :placeholder="model[ctrlKey].label"
+            v-else-if="ctrlType == 'time'" />
+        <!--time-select-->
+        <el-time-select v-model="ctrlValue" start="06:30" step="00:15" end="23:30" :placeholder="model[ctrlKey].label"
+            v-bind="itemInfo" v-else-if="ctrlType == 'time-select'" />
+        <!--date-->
+        <el-date-picker v-model="ctrlValue" type="date" :placeholder="model[ctrlKey].label" v-bind="itemInfo"
+            v-else-if="ctrlType == 'date'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-date-picker>
+        <!--datetime-->
+        <el-date-picker v-model="ctrlValue" type="datetime" :placeholder="model[ctrlKey].label" v-bind="itemInfo"
+            v-else-if="ctrlType == 'datetime'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-date-picker>
+        <!--color-->
+        <el-color-picker v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'color'" />
+        <!--rate-->
+        <el-rate v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'rate'" />
+        <!--slider-->
+        <el-slider v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'slider'" />
+        <!--switch-->
+        <el-switch v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'switch'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-switch>
+        <!--transfer-->
+        <el-transfer v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'transfer'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-transfer>
+        <!--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>
+        </el-cascader>
+        <!--upload-->
+        <el-upload v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'upload'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-upload>
+        <!--autocomplete-->
+        <el-autocomplete v-model="ctrlValue" v-bind="itemInfo" :placeholder="model[ctrlKey].label"
+            v-else-if="ctrlType == 'autocomplete'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-autocomplete>
+        <!--input-number-->
+        <el-input-number v-model="ctrlValue" :min="0" :max="100000000" :placeholder="model[ctrlKey].label"
+            v-bind="itemInfo" v-else-if="ctrlType == 'input-number'">
+            <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
+                <slot :name="`${props.t}-${ctrlKey}-${slot}`" :data> </slot>
+            </template>
+        </el-input-number>
+        <!--input-->
+        <el-input v-model="ctrlValue" :placeholder="model[ctrlKey].label" :maxlength="itemInfo?.max || 25"
+            :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>
+        </el-input>
+    </div>
+</template>
+
+<script setup>
+defineOptions({ inheritAttrs: false });
+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 默认属性
+const selectModel = {
+    filterable: true,
+    remote: itemInfo && itemInfo["remote-method"] ? true : false,
+    ...itemInfo
+};
+const selectRemoteMethod = (query) => {
+    itemInfo["remote-method"](query, (a) => {
+        model[ctrlKey].options = a;
+    })
+}
+
+// 新增：标记数据是否加载完成
+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>