leisure-core 1.0.2 → 1.0.3

package/le-libs/mixins/main.js

@@ -0,0 +1,48 @@
+const leMixins = {
+  data() {
+    return {
+      elTableMaxHeight: 200,
+    };
+  },
+
+  mounted() {
+    window.addEventListener("resize", this.changeHeight);
+    this.changeHeight();
+  },
+
+  destroyed() {
+    window.removeEventListener("resize", this.changeHeight);
+  },
+  methods: {
+    renderHeader(h, { column, $index }) {
+      const opts = document.getElementsByClassName("le-table-btn-container");
+      let widthArr = [];
+      Array.prototype.forEach.call(opts, function (item) {
+        widthArr.push(item.offsetWidth);
+      });
+      if (widthArr.length > 0) {
+        let width = Math.max(...widthArr) + 24;
+        column.width = width;
+        return h("span", column.label);
+      } else {
+        column.width = 0;
+        return h("span", column.label);
+      }
+    },
+    changeHeight() {
+      this.$nextTick(() => {
+        if (!this.$refs.eltablemain) return;
+        let dyHeight = this.elTableMaxHeight;
+        let all = window.innerHeight;
+        let top = this.$refs.eltablemain.$el.getBoundingClientRect().top;
+        dyHeight = all - top - 90;
+        this.elTableMaxHeight = dyHeight;
+        if (this.elTableMaxHeight < 200) {
+          this.elTableMaxHeight = 200;
+        }
+      });
+    },
+  },
+};
+
+export default leMixins;

package/le-list/index.js

@@ -0,0 +1,7 @@
+import LeList from "./src/main.vue";
+
+LeList.install = function (Vue) {
+  Vue.component(LeList.name, LeList);
+};
+
+export default LeList;

package/le-list/src/main.vue

@@ -0,0 +1,645 @@
+<template>
+  <div class="page-container">
+    <div v-if="showQform">
+      <el-form :inline="true" class="demo-form-inline" :model="searchData">
+        <slot name="paramSlot"></slot>
+        <el-form-item>
+          <div class="queryBtnClass">
+            <slot></slot>
+            <le-button type="primary" @click="onClickQuery()" v-if="isDispQBtn"
+              >查询</le-button
+            >
+            <le-button type="primary" @click="addItem()" v-if="isDispAddBtn">{{
+              addBtnText
+            }}</le-button>
+            <slot name="btnright"></slot>
+            <slot name="headerBtns" :params="searchData"></slot>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <el-table
+      ref="eltablemain"
+      :max-height="elTableMaxHeight"
+      :data="tableData"
+      border
+      :row-key="rowId"
+      :header-cell-style="computedHeaderCellStyle"
+      :cell-style="computedCellStyle"
+      stripe
+      style="width: 100%"
+      reserve-selection
+      @selection-change="handleSelectionChange"
+      @cell-click="handleCellClick"
+    >
+      <el-table-column type="selection" v-if="showChecked" width="55" />
+      <el-table-column
+        v-for="column in tableColumns"
+        show-overflow-tooltip
+        :key="column.prop"
+        :prop="column.prop"
+        :label="column.label"
+        :width="column.width"
+        :class-name="column.className"
+      >
+        <template #default="scope">
+          <!-- <span v-html="renderColumnContent(column, scope)"></span> -->
+          <component
+            :is="renderColumnContent(column)"
+            v-bind="getComponentProps(column, scope)"
+          ></component>
+        </template>
+      </el-table-column>
+      <slot name="extColumn"></slot>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        :width="btnCellWidht"
+        align="center"
+        v-if="isdispOper"
+      >
+        <template slot-scope="scope">
+          <template v-if="$scopedSlots.rowAllBtns">
+            <slot name="rowAllBtns" :rowItem="scope.row"></slot>
+          </template>
+          <template v-else>
+            <div class="rowBtns">
+              <slot name="rowBtnStand" :scope="scope">
+                <le-button
+                  @click="editItem(scope.row)"
+                  v-if="getBtnType(scope.row) === 'edit'"
+                >
+                  {{ editBtnText }}</le-button
+                >
+                <le-button
+                  @click="detail(scope.row)"
+                  v-if="getBtnType(scope.row) === 'detail'"
+                >
+                  {{ detailBtnText }}</le-button
+                >
+                <le-button-msg @click="del(scope.row.id)" v-if="isDispDelBtn"
+                  >删除</le-button-msg
+                >
+              </slot>
+              <div class="rowBtnsExt">
+                <slot name="rowBtns" :scope="scope"></slot>
+              </div>
+            </div>
+          </template>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div
+      style="text-align: center; margin-top: 30px"
+      v-if="searchData.total > searchData.pageSize"
+    >
+      <el-pagination
+        background
+        layout="prev, pager, next, jumper,sizes, total"
+        :current-page="searchData.pageNo"
+        :total="searchData.total"
+        :page-size="searchData.pageSize"
+        @current-change="current_change"
+        @size-change="size_change"
+        :page-sizes="pageSizes"
+      >
+      </el-pagination>
+    </div>
+    <le-dialog-container
+      :title="dialogTitle"
+      :width="dialogWidth"
+      :showDialog="showDialog"
+      :showCloseBtnTop="showCloseBtnTop"
+      @close="closeDialog"
+    >
+      <slot
+        name="expand"
+        v-if="showDialog && isDispExpand === 1"
+        :rowItem="rowItem"
+      ></slot>
+      <slot name="sub" v-else-if="showDialog" :rowItem="rowItem"></slot>
+    </le-dialog-container>
+  </div>
+</template>
+<script>
+import leMixins from "../../le-libs/mixins/main";
+import { EventBus } from "../../le-libs/js/event.js";
+export default {
+  name: "le-list",
+  mixins: [leMixins],
+  props: {
+    expand: {
+      type: Number,
+      default: 0,
+    },
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    showCloseBtnTop: {
+      type: Boolean,
+      default: false,
+    },
+    btnCellWidht: {
+      type: String,
+      default: "130px",
+    },
+    totalData: {
+      type: Number,
+      default: 1,
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [10, 20, 30],
+    },
+    tableColumns: {
+      type: Array,
+      default: () => [],
+    },
+    searchParam: {
+      type: Object,
+      default: () => {},
+    },
+    isdispOper: {
+      type: Boolean,
+      default: true,
+    },
+    isDispAddBtn: {
+      type: Boolean,
+      default: true,
+    },
+    isDispQBtn: {
+      type: Boolean,
+      default: true,
+    },
+    addBtnText: {
+      type: String,
+      default: "新建",
+    },
+    detailBtnText: {
+      type: String,
+      default: "详情",
+    },
+    isDispDelBtn: {
+      type: Boolean,
+      default: false,
+    },
+    dialogWidth: {
+      type: String,
+      default: "60%",
+    },
+    dialogTitle: {
+      type: String,
+      default: "标题",
+    },
+    disBtn: {
+      type: [String, Function],
+      default: "edit",
+    },
+    showChecked: {
+      type: Boolean,
+      default: false,
+    },
+    rowId: {
+      type: String,
+      default: "id",
+    },
+    editBtnText: {
+      type: String,
+      default: "编辑",
+    },
+    headerCellStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    cellStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    showQform: {
+      type: Boolean,
+      default: true,
+    },
+    autoOpenDetail: {
+      type: [Boolean, Object, String],
+      default: false,
+    },
+  },
+  watch: {
+    expand: {
+      handler(newVal) {
+        this.isDispExpand = newVal;
+      },
+      immediate: true,
+    },
+    searchParam: {
+      handler(val) {
+        this.searchData = Object.assign({}, this.searchData, val);
+      },
+      deep: true,
+      immediate: true,
+    },
+    totalData: {
+      handler(val) {
+        this.searchData.total = val;
+      },
+    },
+    showQform: {
+      handler() {
+        this.changeHeight();
+      },
+      immediate: false,
+    },
+    tableData: {
+      handler(newVal) {
+        if (
+          this.autoOpenDetail &&
+          !this.autoOpened &&
+          newVal &&
+          newVal.length
+        ) {
+          this.$nextTick(() => {
+            this.tryAutoOpenDetail();
+          });
+        }
+      },
+      immediate: false, // 避免在 mounted 之前触发
+      deep: false,
+    },
+    autoOpenDetail: {
+      handler() {
+        this.autoOpened = false; // 重置标记，允许重新自动打开
+        if (this.tableData && this.tableData.length) {
+          this.$nextTick(() => {
+            this.tryAutoOpenDetail();
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+  data() {
+    return {
+      rowItem: {},
+      rowItems: [],
+      isDispExpand: 0, //是否显示扩展插槽 0:不显示 1:显示
+      searchData: {
+        pageNo: 1,
+        total: 1,
+        pageSize: 10,
+      },
+      showDialog: false,
+      handleStatus: 0, //处理状态 0:详情 1:新增 2:编辑
+
+      autoOpened: false, // 防止重复打开
+      componentMap: {
+        url: {
+          component: "le-url",
+          prop: "value",
+        },
+        text: {
+          component: "le-span",
+          prop: "value",
+        },
+        image: {
+          component: "le-image",
+          prop: "src",
+          style: { width: "40px", height: "40px" },
+        },
+      },
+    };
+  },
+  computed: {
+    toparam() {
+      if (this.showChecked) return this.rowItems;
+      else {
+        return this.rowItem;
+      }
+    },
+    isDispPage() {},
+    computedHeaderCellStyle() {
+      const defaultStyle = { "text-align": "center" };
+      return { ...defaultStyle, ...this.headerCellStyle };
+    },
+    computedCellStyle() {
+      const defaultStyle = { "text-align": "center" };
+      return { ...defaultStyle, ...this.cellStyle };
+    },
+  },
+  created() {
+    EventBus.$on("closeDialog", this.closeDialog);
+  },
+  destroyed() {
+    EventBus.$off("closeDialog", this.closeDialog);
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    renderColumnContent(column) {
+      return this.componentMap[column.type]?.component || "le-span";
+    },
+    getComponentProps(column, scope) {
+      let value = scope.row[column.prop];
+      if (column.formatter) {
+        value = column.formatter(scope.rows, scope.column, value);
+      }
+      if (column.type) {
+        value = this.format(column.type, value, column.spec);
+      }
+      let ctype = this.componentMap[column.type];
+      let prop = ctype?.prop || "value";
+      let param = {};
+      param[prop] = value || "";
+      if (ctype?.style) {
+        param.style = ctype.style;
+      }
+      return param;
+    },
+    onClickQuery() {
+      this.searchData.pageNo = 1;
+      this.getList();
+    },
+    getList() {
+      let params = this.searchData;
+      this.$emit("getList", params);
+    },
+    current_change(currentPage) {
+      this.searchData.pageNo = currentPage;
+      this.getList();
+    },
+    del(id) {
+      this.$emit("delRow", id, () => {
+        this.getList();
+      });
+    },
+    getBtnType(row) {
+      if (typeof this.disBtn === "function") {
+        return this.disBtn(row); // 调用父组件传入的函数，传入当前行数据
+      }
+      return this.disBtn; // 兼容旧的字符串写法
+    },
+    customItem(rowData) {
+      this.handleStatus = 2;
+      if (rowData) {
+        this.rowItem = rowData;
+      }
+      this.$emit("handleStatus", this.handleStatus);
+      this.showDialog = true;
+    },
+    editItem(row) {
+      this.isDispExpand = 0;
+      this.handleStatus = 2;
+      this.$emit("handleStatus", this.handleStatus);
+      this.$emit("editCurrentRow", row);
+      this.rowItem = row;
+      this.showDialog = true;
+    },
+    detail(row) {
+      this.handleStatus = 0;
+      this.rowItem = row;
+      this.$emit("handleStatus", this.handleStatus);
+      this.$emit("detailCurrentRow", row);
+      this.showDialog = true;
+    },
+    openFirstDetail() {
+      if (this.tableData && this.tableData.length > 0) {
+        const firstRow = this.tableData[0];
+        this.detail(firstRow);
+      }
+    },
+    resetAutoOpenFlag() {
+      this.autoOpened = false;
+    },
+    tryAutoOpenDetail() {
+      if (this.autoOpened) return;
+      const config = this.autoOpenDetail;
+      if (!config) return;
+
+      let targetRow = null;
+      if (config === true || config === "first") {
+        if (this.tableData && this.tableData.length) {
+          targetRow = this.tableData[0];
+        } else {
+          console.warn("le-list: 表格数据为空，无法自动打开第一行详情");
+          return;
+        }
+      } else if (typeof config === "object" && config !== null) {
+        // 传入的对象即视为行数据
+        if (Object.keys(config).length) {
+          targetRow = config;
+        } else {
+          console.warn("le-list: 自动打开配置的行数据为空对象");
+          return;
+        }
+      }
+
+      if (targetRow) {
+        // 使用双重 nextTick 确保表格完全渲染后再打开弹窗，消除闪烁
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.detail(targetRow);
+            this.autoOpened = true;
+          }, 50); // 极短延迟，平滑过渡
+        });
+      }
+    },
+    addItem() {
+      this.handleStatus = 1;
+      this.$emit("handleStatus", this.handleStatus);
+      this.showDialog = true;
+      this.rowItem = {};
+    },
+    closeDialog() {
+      this.showDialog = false;
+      this.$emit("close");
+    },
+    size_change(item) {
+      this.searchData.pageSize = item;
+      this.getList();
+    },
+    handleSelectionChange(val) {
+      this.rowItems = val;
+    },
+    format(type, value, spec) {
+      // 参数验证
+      if (type === undefined || value === undefined) return value;
+
+      switch (type) {
+        case "bool":
+          return value === 1 || value === "1" || value === true ? "是" : "否";
+
+        case "date":
+          if (!value) return "";
+          try {
+            return spec ? this.parseTime(value, spec) : this.parseTime(value);
+          } catch {
+            return value;
+          }
+
+        case "currency":
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+
+          const decimalPart = num.toString().split(".")[1];
+          const hasDecimal = decimalPart && decimalPart.length > 0;
+
+          return new Intl.NumberFormat("zh-CN", {
+            style: "decimal",
+            currency: "CNY",
+            minimumFractionDigits: hasDecimal
+              ? Math.min(decimalPart.length, 2)
+              : 0,
+            maximumFractionDigits: hasDecimal
+              ? Math.min(decimalPart.length, 4)
+              : 0,
+          }).format(num);
+
+        case "number":
+          return this.formatNumber(value, spec);
+        default:
+          return value;
+      }
+    },
+    // format(type, value, spec) {
+    //   if (type === undefined || value === undefined) return value;
+
+    //   switch (type) {
+    //     // ... 其他 case 保持不变 ...
+
+    //     case "number":
+    //       return this.formatNumber(value, spec);
+
+    //     default:
+    //       return value;
+    //   }
+    // },
+
+    /**
+     * 格式化数值（带千分位逗号分隔）
+     * @param {*} value - 要格式化的值
+     * @param {Object|string} options - 配置选项或格式字符串
+     * @returns {string} 格式化后的字符串
+     */
+    formatNumber(value, options = {}) {
+      // 处理空值
+      if (value == null || value === "") {
+        return options.nullValue || "";
+      }
+
+      // 转换为数值
+      const num = Number(value);
+      if (isNaN(num)) {
+        return options.invalidValue || value.toString();
+      }
+
+      // 如果 options 是字符串，解析为配置对象
+      let config = options;
+      if (typeof options === "string") {
+        config = this.parseNumberFormat(options);
+      }
+
+      // 默认配置
+      const defaultConfig = {
+        minimumIntegerDigits: 1, // 最小整数位数
+        minimumFractionDigits: 0, // 最小小数位数
+        maximumFractionDigits: 4, // 最大小数位数
+        useGrouping: true, // 使用千分位分隔符
+        nullValue: "", // 空值显示
+        invalidValue: value.toString(), // 无效值显示
+        ...config,
+      };
+
+      try {
+        return new Intl.NumberFormat("zh-CN", defaultConfig).format(num);
+      } catch (error) {
+        console.warn("Number format error:", error);
+        return num.toString();
+      }
+    },
+
+    /**
+     * 解析格式字符串为配置对象
+     * @param {string} formatStr - 格式字符串，如 "0,0.00"、"0,0[.]0#" 等
+     * @returns {Object} 配置对象
+     */
+    parseNumberFormat(formatStr = "0,0") {
+      const config = {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0,
+        useGrouping: true,
+      };
+
+      // 简单解析格式字符串
+      if (formatStr.includes(".")) {
+        const parts = formatStr.split(".");
+        // 处理小数部分
+        const decimalPart = parts[1];
+        // 计算小数位数
+        config.minimumFractionDigits = decimalPart.replace(
+          /\[.*?\]/g,
+          "",
+        ).length;
+        config.maximumFractionDigits = decimalPart.length;
+      }
+
+      // 判断是否使用千分位
+      config.useGrouping = formatStr.includes(",");
+
+      return config;
+    },
+    /**
+     * 处理单元格点击
+     * @param {Object} row 行数据
+     * @param {Object} column 列配置
+     * @param {HTMLElement} cell 单元格元素
+     * @param {Event} event 原生事件对象
+     */
+    handleCellClick(row, column, cell, event) {
+      // 查找当前点击列对应的列配置
+      const colConfig = this.tableColumns.find(
+        (col) => col.prop === column.property,
+      );
+
+      // 如果列配置中定义了 cellClick 回调，则执行
+      if (colConfig && typeof colConfig.cellClick === "function") {
+        colConfig.cellClick({ row, column, cell, event });
+      }
+
+      // 向上抛出统一事件，供父组件监听
+      this.$emit("cell-click", { row, column, cell, event });
+    },
+    // getCellClassName({ row, column }) {
+    //   const colConfig = this.tableColumns.find(
+    //     (col) => col.prop === column.property,
+    //   );
+    //   return colConfig && typeof colConfig.cellClick === "function"
+    //     ? "clickable-cell"
+    //     : "";
+    // },
+  },
+};
+</script>
+<style lang="less" scoped>
+.rowBtns {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.rowBtnsExt {
+  margin-left: 3px;
+}
+
+.queryBtnClass {
+  display: flex !important;
+  display: -webkit-flex !important;
+  justify-content: flex-start;
+  gap: 5px;
+}
+.clickable-cell {
+  cursor: pointer !important;
+}
+</style>

package/le-list-form/index.js

@@ -0,0 +1,7 @@
+import LeListForm from "./src/main.vue";
+
+LeListForm.install = function (Vue) {
+  Vue.component(LeListForm.name, LeListForm);
+};
+
+export default LeListForm;