hbte-saas-ui 0.0.1

package/packages/pagination/index.js

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

package/packages/pagination/src/main.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="hb-pagination">
+    <el-pagination
+      v-if="pageData"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageData.pageNum"
+      :page-sizes="pageSizes"
+      :page-size="pageData.pageSize"
+      layout="total, sizes, prev, slot"
+      :total="total"
+    >
+      <div class="hb-pagination-slot">
+        <div slot="input">
+          <span class="hb-pagination-slot_text">第</span>
+          <el-input
+            @input="handleCurrentInput"
+            @blur="handleCurrentBlur"
+            class="hb-pagination-slot_input"
+            v-model="pageData.pageNum"
+            :clearable="false"
+          ></el-input>
+          <span class="hb-pagination-slot_text">共{{ pageNumber }}页</span>
+        </div>
+      </div>
+    </el-pagination>
+    <el-pagination
+      v-if="pageData"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageData.pageNum"
+      :page-sizes="pageSizes"
+      :page-size="pageData.pageSize"
+      layout="next, slot"
+      :total="total"
+    >
+      <hb-filterdrop
+        v-if="showFilter"
+        :columns="columns"
+        :placement="placement"
+        :disabledFilter="disabledFilter"
+        @columnsChange="columnsChange"
+        v-bind="$attrs"
+      >
+        <i
+          slot="dropdown"
+          class="hb-pagination__dropdown-icon el-icon-s-operation"
+        ></i>
+      </hb-filterdrop>
+    </el-pagination>
+  </div>
+</template>
+<script>
+export default {
+  name: "hbPagination",
+  cpName: "hbPagination",
+  props: {
+    pageData: {
+      type: Object,
+      default: () => ({
+        pageSize: 50,
+        pageNum: 1,
+        total: 0,
+      }),
+    },
+    pageSizes: {
+      type: Array,
+      default: () => [5, 30, 50],
+    },
+    showFilter: {
+      type: Boolean,
+      default: true,
+    },
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    placement: {
+      type: String,
+      default: "bottom-end",
+    },
+    disabledFilter: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    total() {
+      const { total } = this.pageData;
+      return typeof total === "number" ? total : total ? Number(total) : 0;
+    },
+    pageNumber() {
+      return Math.ceil(this.pageData.total / this.pageData.pageSize);
+    },
+  },
+  methods: {
+    /**
+     * @event handleSizeChange 切换每页数量
+     */
+    handleSizeChange(num) {
+      // 每页条数改变时,建议重置当前的页码
+      this.$emit("pageSizeChange", num);
+    },
+    /**
+     * @event handleCurrentChange 切换页码
+     */
+    handleCurrentChange(num) {
+      this.$emit("pageNumChange", num);
+    },
+    /**
+     * @event handleCurrentInput 自定义翻页页码输入时
+     */
+    handleCurrentInput() {
+      // 处理输入格式
+      if (isNaN(this.pageData.pageNum)) {
+        this.pageData.pageNum = 1;
+      } else {
+        this.pageData.pageNum = Number(this.pageData.pageNum);
+      }
+    },
+    /**
+     * @event handleCurrentBlur 自定义翻页页码失焦触发翻页
+     */
+    handleCurrentBlur() {
+      let currentPage = 1;
+      if (this.pageData.pageNum > this.pageNumber) {
+        currentPage = this.pageNumber;
+      } else if (this.pageData.pageNum <= 0) {
+        currentPage = 1;
+      } else {
+        currentPage = this.pageData.pageNum;
+      }
+      this.handleCurrentChange(currentPage);
+    },
+    columnsChange(newColumns) {
+      this.$emit("columnsChange", newColumns);
+    },
+  },
+};
+</script>

package/packages/query-form/index.js

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

package/packages/query-form/src/main.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="hb-queryform">
+    <template v-if="formProp.type === 'input'">
+      <el-input
+        clearable
+        :type="formProp.type"
+        :placeholder="formProp.placeholder"
+        v-model="qryFormData[formProp.prop]"
+        :size="size"
+        v-on="$listeners"
+        v-bind="$attrs"
+        style="width: 100%"
+      ></el-input>
+    </template>
+    <template v-if="formProp.type === 'select'">
+      <el-select
+        clearable
+        :size="size"
+        v-model="qryFormData[formProp.prop]"
+        :placeholder="formProp.placeholder"
+        :multiple="formProp.multiple"
+        collapse-tags
+        :filterable="formProp.filterable"
+        v-on="$listeners"
+        v-bind="$attrs"
+        style="width: 100%"
+      >
+        <el-option
+          v-for="(item, index) in formProp.optList"
+          :key="index"
+          :label="
+            formProp.optListProp ? item[formProp.optListProp.label] : item.label
+          "
+          :value="
+            formProp.optListProp ? item[formProp.optListProp.value] : item.value
+          "
+        ></el-option>
+      </el-select>
+    </template>
+    <template v-if="formProp.type === 'daterange'">
+      <el-date-picker
+        :size="size"
+        v-model="qryFormData[formProp.prop]"
+        type="daterange"
+        unlink-panels
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        :value-format="formProp.format ? formProp.format : 'yyyy-MM-dd'"
+        v-on="$listeners"
+        v-bind="$attrs"
+        style="width: 100%"
+      >
+      </el-date-picker>
+    </template>
+    <template v-if="formProp.type === 'date'">
+      <el-date-picker
+        :size="size"
+        v-model="qryFormData[formProp.prop]"
+        type="date"
+        unlink-panels
+        :placeholder="formProp.placeholder"
+        :value-format="formProp.format ? formProp.format : 'yyyy-MM-dd'"
+        v-on="$listeners"
+        v-bind="$attrs"
+        style="width: 100%"
+      >
+      </el-date-picker>
+    </template>
+    <template v-if="formProp.type == 'switch'">
+      <el-switch
+        :size="size"
+        v-model="qryFormData[formProp.prop]"
+        :active-text="formProp.optList ? formProp.optList[0] : ''"
+        :inactive-text="formProp.optList ? formProp.optList[1] : ''"
+        v-on="$listeners"
+        v-bind="$attrs"
+        style="width: 100%"
+      ></el-switch>
+    </template>
+    <template v-if="formProp.type == 'radio'">
+      <el-radio-group
+        :size="size"
+        v-model="qryFormData[formProp.prop]"
+        style="width: 100%"
+      >
+        <el-radio
+          v-for="(j, k) in formProp.optList"
+          :label="
+            formProp.optListProp ? j[formProp.optListProp.value] : j.value
+          "
+          :key="k"
+          >{{
+            formProp.optListProp ? j[formProp.optListProp.label] : j.lable
+          }}</el-radio
+        >
+      </el-radio-group>
+    </template>
+    <template v-if="formProp.type === 'checkbox'">
+      <el-checkbox-group
+        :size="size"
+        v-model="qryFormData[formProp.prop]"
+        style="width: 100%; display: flex"
+      >
+        <el-checkbox
+          v-for="(j, k) in formProp.optList"
+          :label="
+            formProp.optListProp ? j[formProp.optListProp.value] : j.value
+          "
+          :key="k"
+          >{{ formProp.optListProp ? j[formProp.optListProp.label] : j.lable }}
+        </el-checkbox>
+      </el-checkbox-group>
+    </template>
+    <template v-if="formProp.slot == true">
+      <slot :name="formProp.prop"></slot>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  name: "HbQueryForm",
+  componentName: "HbQueryForm",
+  props: {
+    formProp: {
+      type: Object,
+      default: () => {},
+    },
+    qryFormData: {
+      type: Object,
+      default: () => {},
+    },
+    size: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>

package/packages/select-vague/index.js

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

package/packages/select-vague/src/main.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="hb-select">
+    <el-select
+      filterable
+      :filter-method="filter"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <el-option
+        v-for="item in data"
+        :key="item[defaultProps.value]"
+        :label="item[defaultProps.label]"
+        :value="item[defaultProps.value]"
+        :disabled="item.disabled"
+      >
+        <span v-html="item[defaultProps.label]"></span>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+<script>
+import lodash from "lodash";
+import pinyinMatch from "pinyin-match";
+export default {
+  name: "HbSelectVague",
+  componentName: "HbSelectVague",
+  data() {
+    return {
+      data: [],
+    };
+  },
+  methods: {
+    filter(keyWords) {
+      this.data = lodash.cloneDeep(this.options);
+      if (!keyWords.trim()) return;
+      //操作返回options其中匹配的项即可
+      let searchData = [];
+      this.data.forEach((item) => {
+        let matched = pinyinMatch.match(
+          item[this.defaultProps.label],
+          keyWords
+        );
+        if (matched) {
+          searchData.push(item);
+        }
+      });
+      searchData.forEach((item) => {
+        item[this.defaultProps.label] = item[this.defaultProps.label].replace(
+          new RegExp(keyWords, "g"),
+          `<span class="high-light">${keyWords}</span>`
+        );
+      });
+      this.data = searchData;
+    },
+  },
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    defaultProps: {
+      type: Object,
+      default: () => {
+        return {
+          value: "value",
+          label: "label",
+        };
+      },
+    },
+  },
+  watch: {
+    options: {
+      immediate: true,
+      handler: function (to) {
+        this.data = lodash.cloneDeep(to);
+      },
+    },
+  },
+};
+</script>

package/packages/table/index.js

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

package/packages/table/src/main.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="hb-table">
+    <!-- 测试代码 -->
+    <!-- <template v-for="item in columns">
+      <span :key="item.prop">{{ item.prop }}</span>
+    </template> -->
+    <el-table
+      ref="table"
+      v-loading="loading"
+      :data="tableData"
+      v-bind="tableProp"
+      :stripe="false"
+      :border="true"
+      :height="height"
+      style="flex: 1"
+      :key="key"
+      @select="selectData"
+      @select-all="selectData"
+      v-on="$listeners"
+    >
+      <template slot="empty">
+        <div class="hb-table-nodata"></div>
+        <div class="hb-table-nodata-text">暂无数据</div>
+      </template>
+      <!-- 序号列 -->
+      <el-table-column
+        v-if="serial"
+        label="序号"
+        type="index"
+        align="center"
+        width="44"
+        fixed="left"
+        class-name="hb-table-index"
+      ></el-table-column>
+      <!-- 选择框列 -->
+      <el-table-column
+        v-if="select"
+        type="selection"
+        align="center"
+        width="44"
+        :selectable="selectable"
+        :reserve-selection="reserveSelect"
+        fixed="left"
+      ></el-table-column>
+      <!-- 只有一列时在左支撑这一列的空白列 -->
+      <el-table-column
+        v-if="columns.length === 0"
+        min-width="1px"
+        key="beforeBlank"
+        :resizable="false"
+      ></el-table-column>
+      <template v-for="(item, colIndex) in columns">
+        <!-- 插槽列 -->
+        <slot
+          v-if="item.slot && item.currentSelect"
+          :name="item.prop"
+          :column="item"
+        ></slot>
+        <!-- 编辑列 -->
+        <el-table-column
+          v-else-if="item.edit && item.currentSelect"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.minWidth > 0 ? undefined : item.width"
+          :min-width="item.minWidth"
+          :formatter="item.formatter"
+          :fixed="item.fixed"
+          :align="item.align || 'left'"
+          :show-overflow-tooltip="!item.edit.keepEdit"
+          :resizable="!!item.resizable || true"
+        >
+          <template v-slot="{ row, col, $index }">
+            <hb-editarea
+              :ref="
+                item.edit.keepEdit
+                  ? `editarea_${$index}_${colIndex}`
+                  : undefined
+              "
+              v-if="!item.editCondition || item.editCondition($index, row)"
+              :keepEdit="item.edit.keepEdit"
+              :value.sync="row[item.prop]"
+              v-bind="item.edit"
+              :class="item.edit.keepEdit ? 'hb-table__keep' : 'hb-table__edit'"
+              :border="true"
+              :insert="handleInsertCell(row, item)"
+              :change="handleChangeCell(row, item)"
+            ></hb-editarea>
+            <font v-else>{{ row[item.prop] }}</font>
+          </template>
+        </el-table-column>
+        <!-- 普通列 -->
+        <el-table-column
+          v-else-if="item.currentSelect"
+          :key="item.prop"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.minWidth > 0 ? undefined : item.width"
+          :min-width="item.minWidth"
+          :formatter="item.formatter"
+          :fixed="item.fixed"
+          :align="item.align || 'left'"
+          :show-overflow-tooltip="true"
+          :resizable="!!item.resizable || true"
+        >
+        </el-table-column>
+      </template>
+      <!-- 只有一列时在右支撑这一列的空白列 -->
+      <el-table-column
+        v-if="columns.length === 1"
+        min-width="1px"
+        key="afterBlank"
+      ></el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  name: "HbTable",
+  componentName: "HbTable",
+  props: {
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    // 表格列配置数组
+    height: {
+      type: String,
+      default: () => "auto",
+    },
+    serial: {
+      type: Boolean,
+      default: () => true,
+    },
+    select: {
+      type: Boolean,
+      default: () => false,
+    },
+    reserveSelect: {
+      type: Boolean,
+      default: () => false,
+    },
+    selectable: {
+      type: Function,
+      default: () => () => false,
+    },
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      /** 列表样式 */
+      tableStyles: {
+        "highlight-current-row": true,
+        "header-cell-class-name": "hb-table-header-cell",
+        "cell-class-name": "hb-table-cell",
+      },
+      /** 列表数据 */
+      key: 0,
+      selectedData: [],
+    };
+  },
+  methods: {
+    /* api */
+    elTable() {
+      return this.$refs?.table;
+    },
+    /**
+     * @function validateEdit 对于编辑单元格进行校验,仅对edit.keepEdit的单元格有效
+     * @param {Function} callback 回调，传入校验结果布尔值
+     * @param {[Number|Function]} who 校验目标，数字表示行下标，函数传入行和列信息，根据返回值确定是否校验
+     */
+    validateEdit(callback, who) {
+      const cols = this.columns;
+      const rows = this.tableData;
+      let errorCount = 0;
+      let validCount = rows.length * cols.length;
+      // 确定哪些单元格需要校验
+      let validIt = () => true;
+      if (typeof who === "number") {
+        validIt = (colIndex, rowIndex) => rowIndex === who;
+      } else if (typeof who === "function") {
+        validIt = who;
+      }
+      rows.forEach((row, rowIndex) => {
+        cols.forEach((col, colIndex) => {
+          validCount--;
+          // 对存在keepEdit控件的单元格进行校验
+          if (
+            col.edit &&
+            col.edit.keepEdit &&
+            (typeof col.editCondition !== "function" ||
+              col.editCondition(rowIndex, row))
+          ) {
+            if (validIt(colIndex, rowIndex, col, row)) {
+              const area = this.$refs[`editarea_${rowIndex}_${colIndex}`];
+              // area数组内都是指定节点，只有最后一个vnode是响应式的
+              area.length &&
+                area[area.length - 1].validateEdit((error) => {
+                  error && errorCount++;
+                });
+            }
+          }
+          !validCount &&
+            typeof callback === "function" &&
+            callback(!errorCount);
+        });
+      });
+    },
+    /** methods */
+    openLoading() {
+      this.loading = true;
+    },
+    closeLoading() {
+      this.loading = false;
+    },
+    selectData(arr) {
+      this.selectedData = arr;
+      this.$emit("selectData", this.selectedData);
+    },
+    /** events */
+    /**
+     * @event handleInsertCell 改写cell传参，用于抛出row信息
+     */
+    handleInsertCell(row, column) {
+      if (typeof column.edit.insert === "function") {
+        return () => {
+          // 推给area的传参
+          return column.edit.insert(row); // 被改写的处理内容：为insert科利华
+        };
+      }
+      return null;
+    },
+    /**
+     * @event handleChangeCell 改写change传参，用于抛出row信息
+     */
+    handleChangeCell(row, column) {
+      if (typeof column.edit.change === "function") {
+        return (next, value) => {
+          column.edit.change(next, row, value);
+        };
+      }
+      return null;
+    },
+  },
+  computed: {
+    // 传入el-table的prop:将自带的一些prop和传入的prop(权重更高)合并
+    tableProp() {
+      const props = this.$lodash.assign({}, this.tableStyles, this.$attrs);
+      return props;
+    },
+  },
+  watch: {
+    columns: {
+      handler: function () {
+        this.key = new Date().getTime();
+      },
+    },
+  },
+};
+</script>
+