hbte-saas-ui 0.0.2 → 1.0.2

package/packages/pagination/index.js

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

package/packages/pagination/src/main.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="hb-pagination">
-    <span>~</span>
-    <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

@@ -1,5 +0,0 @@
-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

@@ -1,142 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-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

@@ -1,80 +0,0 @@
-<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

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

package/packages/table/src/main.vue

@@ -1,265 +0,0 @@
-<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>
-