tianheng-ui 0.1.0 → 0.1.2

package/packages/Table/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <div class="th-table">
+    <el-table
+      ref="th_table"
+      v-loading="loading"
+      :height="height"
+      :data="data"
+      :row-key="rowKey"
+      :stripe="stripe"
+      :border="border"
+      :highlight-current-row="highlightCurrentRow"
+      :tree-props="treeProps"
+      :span-method="objectSpanMethod"
+      @current-change="handleSingleSelect"
+      @row-dblclick="dblclick"
+      @selection-change="handleSelectionChange"
+    >
+      <template v-for="(item, index) in widgetList">
+        <el-table-column
+          v-if="item.type"
+          :key="index"
+          :type="item.type"
+          :label="item.label"
+          width="50"
+        >
+        </el-table-column>
+        <el-table-column
+          v-else-if="item.children"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align || 'left'"
+          :fixed="item.fixed || null"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+        >
+          <table-column :options="item.children"></table-column>
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align || 'left'"
+          :fixed="item.fixed || null"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+        >
+          <template slot-scope="scope">
+            <slot
+              v-if="item.slot"
+              :name="item.slot"
+              :scope="scope"
+              :option="item"
+            />
+            <span v-else-if="item.formatTime">
+              {{
+                handleFormatTime(
+                  scope.row[item.alias || item.prop],
+                  item.format
+                )
+              }}
+            </span>
+            <span v-else-if="item.format">
+              {{ item.format(scope.row) }}
+            </span>
+            <span v-else-if="item.alias">{{ scope.row[item.alias] }}</span>
+            <span v-else>{{ scope.row[item.prop] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+      <template #empty>
+        <div>
+          {{ loading ? loadingText || "加载中" : emptyText || "暂无数据" }}
+        </div>
+      </template>
+    </el-table>
+
+    <!-- <el-popover placement="top-start" title="标题" width="200" trigger="hover">
+      <i class="th-table-more el-icon-s-tools" slot="reference"></i>
+      <div>
+        <el-checkbox
+          v-for="item in options"
+          :key="item.prop"
+          :label="item.label"
+          :checked="!item.hide"
+        ></el-checkbox>
+      </div>
+    </el-popover> -->
+
+    <div v-if="Object.keys(pageInfo).length > 0 && showPage" class="pagination">
+      <el-pagination
+        :current-page="pageInfo.currentPage"
+        :page-sizes="pageInfo.sizes"
+        :page-size="pageInfo.pageSize"
+        layout="total, prev, pager, next, sizes"
+        :total="pageInfo.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        @prev-click="handlePrevClick"
+        @next-click="handleNextClick"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import TableColumn from "./column.vue";
+
+export default {
+  name: "ThTable",
+  components: {
+    TableColumn
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    // 行双击事件
+    dblclick: {
+      type: Function,
+      default: () => {
+        return null;
+      }
+    },
+    stripe: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    },
+    treeProps: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    // 对象，不传表示没有分页,包含三个参数,均必填pageSize：每页展示的条数。currentPage：当前页码。pageCount：总页数
+    pageInfo: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    },
+    loading: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    },
+    height: String | Number,
+    rowKey: String | Function,
+    showPage: {
+      type: Boolean,
+      default: () => {
+        return true;
+      }
+    },
+    emptyText: {
+      type: String,
+      default: () => {
+        return "暂无数据";
+      }
+    },
+    loadingText: {
+      type: String,
+      default: () => {
+        return "加载中";
+      }
+    },
+    border: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    },
+    // 是否要高亮当前行
+    highlightCurrentRow: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    widgetList() {
+      return this.options.filter(item => {
+        return !item.hide;
+      });
+    }
+  },
+  methods: {
+    handleSelectionChange(currentRow) {
+      if (currentRow) {
+        this.$emit("selection-change", currentRow);
+      }
+    },
+    // 选中行--单选
+    handleSingleSelect(currentRow, oldCurrentRow) {
+      if (currentRow) {
+        this.$emit("current-change", currentRow);
+      }
+    },
+    // 每页展示的条数 改变时
+    handleSizeChange(val) {
+      this.pageInfo.pageSize = val;
+      this.$emit(
+        "pagination-change",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 当前页码 改变时
+    handleCurrentChange(val) {
+      this.pageInfo.currentPage = val;
+      this.$emit(
+        "pagination-change",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 点击上一页
+    handlePrevClick() {
+      if (this.pageInfo.currentPage === 1) return;
+      this.pageInfo.currentPage -= 1;
+      this.$emit(
+        "pagination-change",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 点击下一页
+    handleNextClick() {
+      if (this.pageInfo.currentPage === this.pageInfo.pageCount) return;
+      this.pageInfo.currentPage += 1;
+      this.$emit(
+        "pagination-change",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    getTable() {
+      return this.$refs["th_table"];
+    },
+    handleFormatTime(time, cFormat) {
+      if (arguments.length === 0) {
+        return null;
+      }
+      const format = cFormat || "yyyy-MM-dd HH:mm:ss";
+      let date;
+      if (typeof time === "undefined" || time === null || time === "null") {
+        return "";
+      } else if (typeof time === "object") {
+        date = time;
+      } else {
+        if (typeof time === "string" && /^[0-9]+$/.test(time)) {
+          time = parseInt(time);
+        }
+        if (typeof time === "number" && time.toString().length === 10) {
+          time = time * 1000;
+        }
+        date = new Date(time);
+      }
+      const formatObj = {
+        yyyy: date.getFullYear(),
+        MM: date.getMonth() + 1,
+        dd: date.getDate(),
+        HH: date.getHours(),
+        mm: date.getMinutes(),
+        ss: date.getSeconds(),
+        a: date.getDay()
+      };
+      const time_str = format.replace(
+        /(yyyy|MM|dd|HH|mm|ss|a)/g,
+        (result, key) => {
+          let value = formatObj[key];
+          // Note: getDay() returns 0 on Sunday
+          if (key === "a") {
+            return ["日", "一", "二", "三", "四", "五", "六"][value];
+          }
+          if (result.length > 0 && value < 10) {
+            value = "0" + value;
+          }
+          return value || 0;
+        }
+      );
+      return time_str;
+    },
+    objectSpanMethod(data) {
+      this.$emit("span-method", data);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.th-table {
+  position: relative;
+  width: 100%;
+  .pagination {
+    margin-top: 20px;
+  }
+  &-more {
+    position: absolute;
+    top: 13px;
+    right: 5px;
+    z-index: 999;
+    cursor: pointer;
+  }
+}
+</style>

package/packages/Table/search.js

@@ -0,0 +1,8 @@
+import TableSearch from "./search.vue";
+
+/* istanbul ignore next */
+TableSearch.install = function(Vue) {
+  Vue.component(TableSearch.name, TableSearch);
+};
+
+export default TableSearch;

package/packages/Table/search.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="th-table-search">
+    <div
+      v-for="(item, index) in options"
+      class="th-table-search-item"
+      :key="index"
+    >
+      <span class="th-table-search-item-title">{{ item.options.name }}：</span>
+      <el-input
+        v-if="item.type === 'input'"
+        v-model="params[item.options.prop]"
+        :style="{ width: item.options.width + 'px' }"
+        :placeholder="item.options.placeholder || '请输入'"
+        :disabled="item.options.disabled"
+        clearable
+      ></el-input>
+      <el-date-picker
+        v-if="item.type === 'date'"
+        v-model="params[item.options.prop]"
+        :style="{ width: item.options.width + 'px' }"
+        :type="item.options.dateType || 'date'"
+        :format="item.options.format"
+        :value-format="item.options.valueFormat"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        clearable
+      >
+      </el-date-picker>
+      <el-select
+        v-if="item.type === 'select'"
+        v-model="params[item.options.prop]"
+        :style="{ width: item.options.width + 'px' }"
+        :placeholder="item.options.placeholder || '请选择'"
+        :multiple="item.options.multiple"
+        :multiple-limit="item.options.multipleLimit"
+        :filterable="item.options.filterable"
+        :disabled="item.options.disabled"
+        clearable
+      >
+        <template v-if="item.options.remote">
+          <el-option
+            v-for="option in item.options.options"
+            :key="option[item.options.props.value]"
+            :label="option[item.options.props.label]"
+            :value="option[item.options.props.value]"
+          >
+          </el-option>
+        </template>
+        <template v-else>
+          <el-option
+            v-for="option in item.options.options"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          >
+          </el-option>
+        </template>
+      </el-select>
+    </div>
+
+    <el-button type="primary" icon="el-icon-search" plain @click="doSearch"
+      >查询</el-button
+    >
+    <el-button
+      type="primary"
+      icon="el-icon-refresh-right"
+      plain
+      @click="doReset"
+      >重置</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThTableSearch",
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      params: this.data,
+      datePickerTypes: [
+        "year",
+        "month",
+        "date",
+        "dates",
+        "week",
+        "datetime",
+        "datetimerange",
+        "daterange",
+        "monthrange"
+      ]
+    };
+  },
+  watch: {
+    options: {
+      handler(newVal, oldVal) {
+        if (newVal && newVal.length) {
+          newVal.map(item => {
+            this.$set(
+              this.params,
+              item.options.prop,
+              item.options.defaultValue
+            );
+          });
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+    data(val) {
+      this.params = val;
+    },
+    params: {
+      deep: true,
+      handler(val) {
+        this.$emit("update:data", val);
+      }
+    }
+  },
+  methods: {
+    doSearch() {
+      this.$emit("on-search", this.params);
+    },
+    doReset() {
+      this.options.map(item => {
+        this.$set(this.params, item.prop, item.defaultValue || "");
+      });
+      this.$emit("on-reset", this.params);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.th-table-search {
+  margin-bottom: 15px;
+  &-item {
+    display: inline-block;
+    margin-right: 15px;
+    margin-bottom: 10px;
+    &-title {
+      font-size: 14px;
+    }
+  }
+  .th-table-search-item:last-child {
+    margin-right: 20px !important;
+  }
+}
+</style>

package/packages/Table/tools.js

@@ -0,0 +1,8 @@
+import TableTools from "./tools.vue";
+
+/* istanbul ignore next */
+TableTools.install = function(Vue) {
+  Vue.component(TableTools.name, TableTools);
+};
+
+export default TableTools;

package/packages/Table/tools.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="th-table-tools">
+    <el-button
+      v-for="(item, index) in options"
+      :key="index"
+      :style="item.style"
+      :type="item.type"
+      :icon="item.icon"
+      :disabled="item.disabled || disabled[item.act]"
+      :loading="item.loading"
+      @click="handleClick(item)"
+      >{{ item.name }}</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThTableTools",
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    disabled: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleClick(item) {
+      this.$emit("on-click", item);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.th-table-tools {
+  margin-bottom: 10px;
+}
+</style>

package/packages/TableMaking/custom/configs/fieldSearch.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+     
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

package/packages/TableMaking/custom/configs/fieldTable.vue

@@ -0,0 +1,15 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped></style>