@ued_fpi/data-visual/dist/lib/wgms/src/common/popup-table.vue.js

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const es = require('element-plus/es');
require('element-plus/es/components/base/style/css');
require('element-plus/es/components/scrollbar/style/css');
const vue = require('vue');
const selectPanel_vue_vue_type_script_setup_true_name_SelectPanel_lang = require('./select-panel.vue.js');
require('./select-panel.vue2.js');

const _hoisted_1 = { class: "dv-wgms-popup-table-container" };
const _hoisted_2 = {
  key: 0,
  style: { "width": "fit-content", "margin": "0 auto" }
};
const _hoisted_3 = { key: 1 };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = ["onClick"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "popup-table",
  props: {
    /**
     * 配置项用于生成表格
     */
    option: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * 表格数据
     */
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    /**
     * 表格高度
     */
    height: {
      type: Number,
      default: void 0
    },
    /**
     * 表格可以点击 会有点击样式
     */
    canClick: {
      type: Boolean,
      default: false
    },
    lineStyle: {
      type: Object,
      default: void 0
    },
    headerLineStyle: {
      type: Object,
      default: void 0
    },
    headerCellStyle: {
      type: Object,
      default: () => {
      }
    },
    lineCellStyle: {
      type: Object,
      default: () => {
      }
    }
  },
  emits: ["checkLine"],
  setup(__props, { expose: __expose, emit }) {
    const currIndex = vue.ref(-1);
    const getData = (optionItem, item) => {
      if (optionItem.render)
        return optionItem.render(item, optionItem);
      return optionItem.key ? item[optionItem.key] === null ? "--" : item[optionItem.key] : "/";
    };
    const checkLine = (item, index) => {
      if (currIndex.value === index) {
        currIndex.value = -1;
        emit("checkLine", item, -1);
        return;
      }
      currIndex.value = index;
      emit("checkLine", item, index);
    };
    const clearClick = () => {
      currIndex.value = -1;
    };
    __expose({
      clearClick
    });
    return (_ctx, _cache) => {
      const _component_el_scrollbar = es.ElScrollbar;
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", {
          class: "table-header",
          style: vue.normalizeStyle(__props.headerLineStyle)
        }, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.option, (item) => {
            return vue.openBlock(), vue.createElementBlock("div", {
              key: item.key,
              class: "table-header-item",
              style: vue.normalizeStyle({ flex: item.flex, ...item.headerStyle, ...__props.headerCellStyle })
            }, [
              item.type === "select" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                vue.createVNode(selectPanel_vue_vue_type_script_setup_true_name_SelectPanel_lang.default, {
                  option: item.list,
                  "default-select": item.defaultSelect,
                  "label-style": { fontSize: "12px", color: "#60A2E1" },
                  arrow: "line",
                  onChange: item.click
                }, null, 8, ["option", "default-select", "onChange"])
              ])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, vue.toDisplayString(item.label), 1))
            ], 4);
          }), 128))
        ], 4),
        vue.createVNode(_component_el_scrollbar, {
          class: "table-body",
          style: vue.normalizeStyle({ height: `${__props.height}px` })
        }, {
          default: vue.withCtx(() => [
            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.data, (item, index) => {
              return vue.openBlock(), vue.createElementBlock("div", {
                key: index,
                class: vue.normalizeClass(["table-body-line", [Number(index) === vue.unref(currIndex) && __props.canClick ? "is-check-line" : ""]]),
                style: vue.normalizeStyle(__props.lineStyle),
                onClick: ($event) => checkLine(item, Number(index))
              }, [
                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.option, (optionItem) => {
                  return vue.openBlock(), vue.createElementBlock("div", {
                    key: optionItem.key,
                    class: vue.normalizeClass(`table-body-item ${optionItem.class}`),
                    style: vue.normalizeStyle({
                      flex: optionItem.flex,
                      ...optionItem.rowStyle,
                      ...optionItem.renderStyle ? optionItem.renderStyle(item, optionItem) : {},
                      ...__props.lineCellStyle
                    })
                  }, [
                    optionItem.type === "tool" ? (vue.openBlock(), vue.createElementBlock("div", {
                      key: 0,
                      class: "tool-box",
                      style: vue.normalizeStyle({
                        justifyContent: optionItem.toolList && optionItem.toolList.length === 1 ? "center" : ""
                      })
                    }, [
                      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(optionItem.toolList, (toolItem, ind) => {
                        return vue.openBlock(), vue.createElementBlock("div", {
                          key: ind,
                          class: "tool-item",
                          onClick: ($event) => toolItem.click && toolItem.click(item, optionItem)
                        }, vue.toDisplayString(toolItem.label), 9, _hoisted_5);
                      }), 128))
                    ], 4)) : vue.renderSlot(_ctx.$slots, optionItem.key, {
                      key: 1,
                      optionItem,
                      row: item
                    }, () => [
                      vue.createElementVNode("span", null, vue.toDisplayString(getData(optionItem, item)), 1)
                    ])
                  ], 6);
                }), 128))
              ], 14, _hoisted_4);
            }), 128))
          ]),
          _: 3
        }, 8, ["style"])
      ]);
    };
  }
});

exports.default = _sfc_main;