qy-better-lib 0.0.1

package/packages/pc_components/lib/simpleVirtualList/src/index.vue2.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/simpleVirtualList/src/type.d.ts

@@ -0,0 +1,12 @@
+export interface VirtualListProps {
+    /**列表数据 */
+    data: any[];
+    /**每项高度（固定高度简化实现） */
+    item_height: number;
+    /**容器可视高度 */
+    container_height?: number;
+    /**缓冲区大小，用于上下额外渲染的项目数 */
+    buffer?: number;
+    /**数据key,用于优化渲染 */
+    data_key?: string;
+}

package/packages/pc_components/lib/styles/comm-form.scss

@@ -0,0 +1,4 @@
+.comm-form {
+    display: grid;
+    gap: 0 20px;
+}

package/packages/pc_components/lib/styles/context-menu.scss

@@ -0,0 +1,47 @@
+.contextmenu {
+  position: fixed;
+  top: 110px;
+  left: 200px;
+  z-index: 10000;
+
+  &-wrap {
+    overflow: hidden;
+    color: var(--el-text-color-regular);
+    background-color: var(--el-bg-color);
+    border-radius: var(--el-border-radius-base);
+    box-shadow: var(--el-box-shadow);
+    padding: 5px 0;
+  }
+
+
+  &-items {
+    list-style-type: none;
+    box-sizing: border-box;
+
+    .el-divider--horizontal {
+      margin: 5px 0;
+    }
+
+    li {
+      cursor: pointer;
+      user-select: none;
+      height: 34px;
+      padding: 0 20px;
+      margin: 0 5px;
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      border-radius: var(--el-border-radius-base);
+      transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
+
+      &.disabled {
+        cursor: not-allowed;
+        color: var(--el-text-color-disabled);
+      }
+
+      &:hover {
+        background-color: var(--el-color-primary-light-7);
+      }
+    }
+  }
+}

package/packages/pc_components/lib/styles/describe-view.scss

@@ -0,0 +1,25 @@
+.describe-view-container {
+    padding: 0 16px 16px;
+
+    .view-content {
+        display: grid;
+        gap: 16px;
+    }
+
+    .view-item {
+        display: flex;
+        align-items: center;
+
+        .label {
+            flex-shrink: 0;
+            color: #606266;
+        }
+
+        .value {
+            display: flex;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+}

package/packages/pc_components/lib/styles/index.scss

@@ -0,0 +1,6 @@
+@use "./text-button.scss" as *;
+@use "./table-extend.scss" as *;
+@use "./context-menu.scss" as *;
+@use "./describe-view.scss" as *;
+@use "./simple-virtual-list.scss" as *;
+@use "./comm-form.scss" as *;

package/packages/pc_components/lib/styles/simple-virtual-list.scss

@@ -0,0 +1,25 @@
+.simple-virtual-list {
+    position: relative;
+    overflow-y: auto;
+    width: 100%;
+
+    &-wrap {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: -1;
+    }
+
+    &-content {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        will-change: transform;
+    }
+
+    &-item {
+        box-sizing: border-box;
+    }
+}

package/packages/pc_components/lib/styles/table-extend.scss

@@ -0,0 +1,100 @@
+.table-extend {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 0%;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  min-height: 200px;
+
+  .tool-panel {
+    display: flex;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
+  .left-panel,
+  .right-panel {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .right-panel {
+    flex: 1 0 0;
+    justify-content: flex-end;
+  }
+
+  .el-table--border td {
+    border-right: none !important;
+  }
+
+  .el-empty {
+    padding: 0;
+  }
+
+  .el-empty__description {
+    margin-top: 0;
+  }
+
+  .required-ident {
+    color: var(--el-color-danger);
+    // margin-right: 4px;
+  }
+
+  .table-bottom {
+    width: 100%;
+    padding-top: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.default-tool {
+  font-size: 18px;
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.set-column-list-wrap {
+  max-height: 70vh;
+  overflow: auto;
+}
+
+.set-column-check-group {
+  .group-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 32px;
+  }
+
+  .fixed-wrap {
+    display: flex;
+    justify-content: space-between;
+    width: 50px;
+    font-size: 16px;
+    color: #333;
+  }
+
+  .fixed-icon {
+    cursor: pointer;
+
+    &:first-child {
+      transform: rotate(-90deg);
+    }
+
+    &:last-child {
+      transform: rotate(90deg);
+    }
+
+    &.active {
+      color: var(--el-color-primary);
+    }
+  }
+}

package/packages/pc_components/lib/styles/text-button.scss

@@ -0,0 +1,71 @@
+.text-button {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+
+  &.is-disabled {
+    cursor: not-allowed !important;
+  }
+
+  &-default {
+    color: inherit;
+
+    &.is-disabled {
+      color: var(--el-text-color-disabled);
+    }
+  }
+
+  &-primary {
+    color: var(--el-color-primary);
+
+    &.is-disabled {
+      color: var(--el-color-primary-light-5);
+    }
+  }
+
+  &-success {
+    color: var(--el-color-success);
+
+    &.is-disabled {
+      color: var(--el-color-success-light-5);
+    }
+  }
+
+  &-warning {
+    color: var(--el-color-warning);
+
+    &.is-disabled {
+      color: var(--el-color-warning-light-5);
+    }
+  }
+
+  &-danger {
+    color: var(--el-color-danger);
+
+    &.is-disabled {
+      color: var(--el-color-danger-light-5);
+    }
+  }
+
+  &-error {
+    color: var(--el-color-error);
+
+    &.is-disabled {
+      color: var(--el-color-error-light-5);
+    }
+  }
+
+  &-info {
+    color: var(--el-color-info);
+
+    &.is-disabled {
+      color: var(--el-color-info-light-5);
+    }
+  }
+
+  &-icon {
+    margin-right: 4px;
+  }
+}

package/packages/pc_components/lib/tableExtend/index.d.ts

@@ -0,0 +1,3 @@
+import { default as tableExtend } from './src/index.vue';
+export type { TableProp, TableColumn } from './type';
+export default tableExtend;

package/packages/pc_components/lib/tableExtend/index.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./src/index.vue.js";
+_sfc_main.install = (app) => {
+  app.component("TableExtend", _sfc_main);
+};
+export {
+  _sfc_main as default
+};

package/packages/pc_components/lib/tableExtend/props.d.ts

@@ -0,0 +1,130 @@
+import { PropType } from 'vue';
+import { TableAttr, TableColumn } from './type';
+/**
+ * 表格扩展组件属性定义
+ * @returns {Object} 组件属性配置
+ */
+export default function props(): {
+    /**
+     * 表格UI选项配置
+     * @type {TableAttr}
+     * @default {}
+     */
+    options: {
+        type: PropType<TableAttr>;
+        default: () => {};
+    };
+    /**
+     * 表格数据源
+     * @type {Array}
+     * @default []
+     */
+    tableData: {
+        type: ArrayConstructor;
+        default: never[];
+    };
+    /**
+     * 表格列配置
+     * @type {Array<TableColumn>}
+     * @default []
+     */
+    tableColums: {
+        type: PropType<Array<TableColumn>>;
+        default: () => never[];
+    };
+    /**
+     * 加载状态
+     * @type {Boolean}
+     * @default false
+     */
+    tableLoading: BooleanConstructor;
+    /**
+     * 是否显示展开行
+     * @type {Boolean}
+     * @default false
+     */
+    expand: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 是否显示选择列
+     * @type {Boolean}
+     * @default true
+     */
+    selectionCol: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 是否显示索引列
+     * @type {Boolean}
+     * @default true
+     */
+    indexCol: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 是否启用列显示/隐藏设置
+     * @type {Boolean}
+     * @default false
+     */
+    isSetColumn: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 分页配置
+     * @type {{ pageIndex: number; pageSize: number }}
+     */
+    paging: {
+        type: PropType<{
+            pageIndex: number;
+            pageSize: number;
+        }>;
+    };
+    /**
+     * 数据总数
+     * @type {Number}
+     */
+    total: NumberConstructor;
+    /**
+     * 可选页面大小列表
+     * @type {Array<number>}
+     * @default [15, 20, 30, 50, 100]
+     */
+    sizeList: {
+        type: PropType<Array<number>>;
+        default: () => number[];
+    };
+    /**
+     * 是否自动高度
+     * 最大高度为父容器高度，实际高度由数据决定
+     * @type {Boolean}
+     * @default false
+     */
+    autoHeight: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 是否自动显示分页器
+     * 当数据量满足分页时显示，否则不显示
+     * @type {Boolean}
+     * @default false
+     */
+    autoPagination: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+    /**
+     * 是否启用大小自适应
+     * @type {Boolean}
+     * @default false
+     */
+    autoSize: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
+};

package/packages/pc_components/lib/tableExtend/props.js

@@ -0,0 +1,128 @@
+function props() {
+  return {
+    /**
+     * 表格UI选项配置
+     * @type {TableAttr}
+     * @default {}
+     */
+    options: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    /**
+     * 表格数据源
+     * @type {Array}
+     * @default []
+     */
+    tableData: {
+      type: Array,
+      default: []
+    },
+    /**
+     * 表格列配置
+     * @type {Array<TableColumn>}
+     * @default []
+     */
+    tableColums: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * 加载状态
+     * @type {Boolean}
+     * @default false
+     */
+    tableLoading: Boolean,
+    /**
+     * 是否显示展开行
+     * @type {Boolean}
+     * @default false
+     */
+    expand: {
+      type: Boolean,
+      default: () => false
+    },
+    /**
+     * 是否显示选择列
+     * @type {Boolean}
+     * @default true
+     */
+    selectionCol: {
+      type: Boolean,
+      default: () => true
+    },
+    /**
+     * 是否显示索引列
+     * @type {Boolean}
+     * @default true
+     */
+    indexCol: {
+      type: Boolean,
+      default: () => true
+    },
+    /**
+     * 是否启用列显示/隐藏设置
+     * @type {Boolean}
+     * @default false
+     */
+    isSetColumn: {
+      type: Boolean,
+      default: () => false
+    },
+    /**
+     * 分页配置
+     * @type {{ pageIndex: number; pageSize: number }}
+     */
+    paging: {
+      type: Object
+    },
+    /**
+     * 数据总数
+     * @type {Number}
+     */
+    total: Number,
+    /**
+     * 可选页面大小列表
+     * @type {Array<number>}
+     * @default [15, 20, 30, 50, 100]
+     */
+    sizeList: {
+      type: Array,
+      default: () => [15, 20, 30, 50, 100]
+    },
+    /**
+     * 是否自动高度
+     * 最大高度为父容器高度，实际高度由数据决定
+     * @type {Boolean}
+     * @default false
+     */
+    autoHeight: {
+      type: Boolean,
+      default: () => false
+    },
+    /**
+     * 是否自动显示分页器
+     * 当数据量满足分页时显示，否则不显示
+     * @type {Boolean}
+     * @default false
+     */
+    autoPagination: {
+      type: Boolean,
+      default: () => false
+    },
+    /**
+     * 是否启用大小自适应
+     * @type {Boolean}
+     * @default false
+     */
+    autoSize: {
+      type: Boolean,
+      default: () => false
+    }
+  };
+}
+export {
+  props as default
+};

package/packages/pc_components/lib/tableExtend/src/colVisible.vue.d.ts

@@ -0,0 +1,3 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+declare const _default: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+export default _default;

package/packages/pc_components/lib/tableExtend/src/colVisible.vue.js

@@ -0,0 +1,128 @@
+import { defineComponent, inject, ref, computed, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createVNode, createTextVNode, createElementBlock, Fragment, renderList, toDisplayString, normalizeClass } from "vue";
+const _hoisted_1 = { class: "set-column-list-wrap" };
+const _hoisted_2 = { class: "fixed-wrap" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "colVisible",
+  setup(__props) {
+    const table_props = inject("table-extend");
+    const check_all_columns = ref(true);
+    const is_all = ref(false);
+    const checkColumnProp = computed(() => {
+      return table_props && table_props.column_config.show_column.map((m) => m.prop) || [];
+    });
+    const table_colums = computed(() => table_props?.table_colums.value || []);
+    function on_check_all_change(e) {
+      if (e) {
+        table_props && (table_props.column_config.show_column = table_colums.value);
+      } else {
+        table_props && (table_props.column_config.show_column = []);
+      }
+    }
+    function on_checked_change(colProps) {
+      if (table_props) {
+        table_props.column_config.show_column = table_colums.value.filter((f) => colProps.includes(f.prop));
+        const checkedCount = colProps.length;
+        check_all_columns.value = checkedCount === table_colums.value.length;
+        is_all.value = checkedCount > 0 && checkedCount < table_colums.value.length;
+      }
+    }
+    function on_change_fixed(type, prop) {
+      if (prop.fixed === type) {
+        prop.fixed = void 0;
+      } else {
+        prop.fixed = type;
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_Setting = resolveComponent("Setting");
+      const _component_el_icon = resolveComponent("el-icon");
+      const _component_el_checkbox = resolveComponent("el-checkbox");
+      const _component_Upload = resolveComponent("Upload");
+      const _component_el_divider = resolveComponent("el-divider");
+      const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
+      const _component_el_popover = resolveComponent("el-popover");
+      return openBlock(), createBlock(_component_el_popover, {
+        placement: "bottom",
+        title: "列显示设置",
+        width: 220
+      }, {
+        reference: withCtx(() => [
+          createVNode(_component_el_icon, null, {
+            default: withCtx(() => [
+              createVNode(_component_Setting)
+            ]),
+            _: 1
+          })
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createVNode(_component_el_checkbox, {
+              indeterminate: is_all.value,
+              modelValue: check_all_columns.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => check_all_columns.value = $event),
+              onChange: on_check_all_change
+            }, {
+              default: withCtx(() => [..._cache[2] || (_cache[2] = [
+                createTextVNode("全选 ", -1)
+              ])]),
+              _: 1
+            }, 8, ["indeterminate", "modelValue"]),
+            createVNode(_component_el_checkbox_group, {
+              class: "set-column-check-group",
+              modelValue: checkColumnProp.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => checkColumnProp.value = $event),
+              onChange: on_checked_change
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(table_colums.value, (colum) => {
+                  return openBlock(), createElementBlock("div", {
+                    class: "group-item",
+                    key: colum.prop
+                  }, [
+                    createVNode(_component_el_checkbox, {
+                      class: "set-column-check",
+                      label: colum.prop
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(colum.label), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["label"]),
+                    createElementVNode("div", _hoisted_2, [
+                      createVNode(_component_el_icon, {
+                        class: normalizeClass(["fixed-icon", colum.fixed === "left" && "active"]),
+                        title: "固定到左边",
+                        onClick: ($event) => on_change_fixed("left", colum)
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_Upload)
+                        ]),
+                        _: 1
+                      }, 8, ["class", "onClick"]),
+                      createVNode(_component_el_divider, { direction: "vertical" }),
+                      createVNode(_component_el_icon, {
+                        class: normalizeClass(["fixed-icon", colum.fixed === "right" && "active"]),
+                        title: "固定到右边",
+                        onClick: ($event) => on_change_fixed("right", colum)
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_Upload)
+                        ]),
+                        _: 1
+                      }, 8, ["class", "onClick"])
+                    ])
+                  ]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};