tianheng-ui 0.0.2 → 0.0.3

package/src/component/table/index.vue

@@ -0,0 +1,251 @@
+<template>
+  <div class="th-table">
+    <el-table
+      ref="th_table"
+      v-loading="loading"
+      :data="data"
+      :row-key="rowKey"
+      stripe
+      :highlight-current-row="selectType === 'single'"
+      :tree-props="treeProps"
+      @current-change="handleSingleSelect"
+      @row-dblclick="dblclick"
+      @selection-change="handleSelectionChange"
+    >
+      <template v-for="(item, index) in options">
+        <template v-if="!item.hide">
+          <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
+          >
+            <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
+          >
+            <template slot-scope="scope">
+              <slot
+                v-if="item.slot"
+                :name="item.slot"
+                :scope="scope"
+                :option="item"
+              />
+              <div v-else>{{ scope.row[item.prop] }}</div>
+            </template>
+          </el-table-column>
+        </template>
+      </template>
+      <!-- <table-column :options="options">
+        <template #slot="{ scope,option }">
+          <slot :name="option.slot" :scope="scope" :option="option" />
+        </template>
+      </table-column> -->
+      <template #empty>
+        <div>
+          {{ loading ? loadingText || "加载中" : emptyText || "暂无数据" }}
+        </div>
+      </template>
+    </el-table>
+    <!-- <i class="th-table-more el-icon-setting"></i> -->
+
+    <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 [];
+      },
+    },
+    // single:单行选中    multiple:多行选中
+    selectType: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    // 行双击事件
+    dblclick: {
+      type: Function,
+      default: () => {
+        return null;
+      },
+    },
+    treeProps: {
+      type: Object,
+      default: function() {
+        return {};
+      },
+    },
+    // 对象，不传表示没有分页,包含三个参数,均必填pageSize：每页展示的条数。currentPage：当前页码。pageCount：总页数
+    pageInfo: {
+      type: Object,
+      default: function() {
+        return {};
+      },
+    },
+    loading: {
+      type: Boolean,
+      default: () => {
+        return false;
+      },
+    },
+    height: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    rowKey: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+    showPage: {
+      type: Boolean,
+      default: () => {
+        return true;
+      },
+    },
+    emptyText: {
+      type: String,
+      default: () => {
+        return "暂无数据";
+      },
+    },
+    loadingText: {
+      type: String,
+      default: () => {
+        return "加载中";
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleSelectionChange(currentRow) {
+      if (currentRow) {
+        this.$emit("selection-change", currentRow);
+      }
+    },
+    // 选中行--单选
+    handleSingleSelect(currentRow, oldCurrentRow) {
+      if (currentRow) {
+        this.$emit("select-row-change", currentRow);
+      }
+    },
+    // 每页展示的条数 改变时
+    handleSizeChange(val) {
+      this.pageInfo.pageSize = val;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 当前页码 改变时
+    handleCurrentChange(val) {
+      this.pageInfo.currentPage = val;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 点击上一页
+    handlePrevClick() {
+      if (this.pageInfo.currentPage === 1) return;
+      this.pageInfo.currentPage -= 1;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    // 点击下一页
+    handleNextClick() {
+      if (this.pageInfo.currentPage === this.pageInfo.pageCount) return;
+      this.pageInfo.currentPage += 1;
+      this.$emit(
+        "pageNumberChange",
+        this.pageInfo.currentPage,
+        this.pageInfo.pageSize
+      );
+    },
+    getTable() {
+      return this.$refs["th_table"];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.th-table {
+  position: relative;
+  width: 100%;
+  .pagination {
+    margin-top: 20px;
+  }
+  &-more {
+    position: absolute;
+    top: 13px;
+    right: 5px;
+    cursor: pointer;
+  }
+}
+</style>

package/src/component/table/search.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="table-search">
+    <template v-for="(item, index) in options">
+      <el-input
+        v-if="item.type === 'input'"
+        class="table-search-item"
+        v-model="params[item.value]"
+        :key="index"
+        :style="{ width: item.width + 'px' }"
+        :placeholder="item.placeholder || '请输入'"
+        :size="item.size || 'mini'"
+        clearable
+      ></el-input>
+      <el-date-picker
+        v-if="item.type === 'date'"
+        class="table-search-item"
+        v-model="params[item.value]"
+        :key="index"
+        :style="{ width: item.width + 'px' }"
+        :type="item.dateType || 'date'"
+        :format="item.format"
+        :value-format="item.valueFormat"
+        :size="item.size || 'mini'"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      >
+      </el-date-picker>
+    </template>
+
+    <el-button
+      type="primary"
+      icon="el-icon-search"
+      size="mini"
+      plain
+      @click="doSearch"
+      >查询</el-button
+    >
+    <el-button
+      type="primary"
+      icon="el-icon-refresh-right"
+      size="mini"
+      plain
+      @click="doReset"
+      >重置</el-button
+    >
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    params: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      datePickerTypes: [
+        "year",
+        "month",
+        "date",
+        "dates",
+        "week",
+        "datetime",
+        "datetimerange",
+        "daterange",
+        "monthrange",
+      ],
+    };
+  },
+  methods: {
+    doSearch() {
+      this.$emit("on-search", this.params);
+    },
+    doReset() {
+      this.params = {};
+      this.$emit("on-reset", this.params);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.table-search {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  &-item {
+    margin-right: 10px;
+  }
+}
+.table-search-item:last-child {
+  margin-right: 20px !important;
+}
+</style>

package/src/component/table/tools.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="tableTools">
+    <template v-for="(item, index) in options">
+      <el-button
+        v-if="item.act_type === 'add'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doAdd(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-button
+        v-if="item.act_type === 'refresh'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doRefresh(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-button
+        v-if="item.act_type === 'export'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled"
+        @click="doExport(item)"
+        >{{ item.btn_name }}</el-button
+      >
+      <el-button
+        v-if="item.act_type === 'batch'"
+        :key="index"
+        :style="{ color: item.btn_color }"
+        :type="item.btn_type"
+        :icon="item.btn_icon"
+        :disabled="item.btn_disabled || selectionDisabled"
+        :loading="loadingDel"
+        @click="doBatch(item)"
+        >{{ item.btn_name }}</el-button
+      >
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    selectionDisabled: {
+      type: Boolean,
+      default: () => {
+        return true;
+      },
+    },
+  },
+  data() {
+    return {
+      loadingDel: false,
+    };
+  },
+  methods: {
+    doEval(item) {
+      this.$emit("on-eval", item);
+    },
+    doAdd(item) {
+      this.$emit("on-add", item);
+    },
+    doRefresh(item) {
+      this.$emit("on-refresh", item);
+    },
+    doExport(item) {
+      this.$emit("on-export", item);
+    },
+    doBatch(item) {
+      this.loadingDel = true;
+      const callback = (bool) => {
+        this.loadingDel = false;
+      };
+      this.$emit("on-batch", item, callback);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.tableTools {
+  margin-bottom: 10px;
+}
+</style>

package/src/index.js

@@ -0,0 +1,21 @@
+import Cell from "./component/cell/index.js";
+import Icons from "./component/icons/index.js";
+import Table from "./component/table/index.js";
+
+const components = [Cell, Icons, Table];
+
+const install = function(Vue, opts = {}) {
+  components.forEach(component => {
+    Vue.component(component.name, component);
+  });
+};
+
+if (typeof window !== "undefined" && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  version: "0.0.3",
+  install,
+  ...components
+};

package/webpack.config.js

@@ -3,7 +3,7 @@ var webpack = require("webpack");
 
 module.exports = {
   // entry: './src/main.js',
-  entry: "./src/component/cell/index.js",
+  entry: "./src/index.js",
   output: {
     path: path.resolve(__dirname, "./dist"),
     publicPath: "/dist/",