tianheng-ui 0.0.5 → 0.0.9

package/packages/table/column.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <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"
+          :fixed="item.fixed"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          show-overflow-tooltip
+        >
+          <TableColumn :key="index" :options="item.children"></TableColumn>
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align"
+          :fixed="item.fixed"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            <slot v-if="item.slot" name="slot" :scope="scope" :option="item" />
+            <div v-else>{{ scope.row[item.prop] }}</div>
+          </template>
+        </el-table-column>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TableColumn",
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+  },
+  created(){
+    /**
+     * 
+     * <template v-if={!item.hide}>
+            <el-table-column
+              v-if={item.type}
+              type={item.type}
+              label={item.label}
+              width="50"
+            ></el-table-column>
+            <el-table-column
+              v-else-if={item.children}
+              prop={item.prop}
+              label={item.label}
+              width={item.width}
+              align={item.align}
+              fixed={item.fixed}
+              sortable={item.sortable}
+              sort-method={item.sortMethod}
+              show-overflow-tooltip
+            >
+              {this.dynamicItem(item.children)}
+            </el-table-column>
+            <el-table-column
+              v-else
+              prop={item.prop}
+              label={item.label}
+              width={item.width}
+              align={item.align}
+              fixed={item.fixed}
+              sortable={item.sortable}
+              sort-method={item.sortMethod}
+              show-overflow-tooltip
+            >
+              <template slot-scope="scope">
+                <slot
+                  v-if={item.slot}
+                  name="slot"
+                  scope={scope}
+                  option={item}
+                />
+                <div v-else>{scope.row[item.prop]}</div>
+              </template>
+            </el-table-column>
+          </template>
+     */
+    console.log(this.options)
+  }
+};
+</script>
+
+<style></style>

package/packages/table/index.js

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

package/packages/table/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="th-table">
+    <el-table
+      ref="th_table"
+      v-loading="loading"
+      :data="data"
+      :row-key="rowKey"
+      :stripe="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;
+      }
+    },
+    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: {
+      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/packages/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/packages/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/App.vue

@@ -1,31 +0,0 @@
-<template>
-  <div id="app">
-    <th-cell
-      v-for="(item, index) in list"
-      :key="index"
-      :title="item.title" :label="item.label"
-    ></th-cell>
-  </div>
-</template>
-
-<script>
-import ThCell from "../packages/cell/index.vue";
-export default {
-  name: "app",
-  components: { ThCell },
-  data() {
-    return {
-      list: [{ title: "张三", label: "18岁" }]
-    };
-  }
-};
-</script>
-
-<style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
-}
-</style>

package/src/main.js

@@ -1,11 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-import ElementUI from 'element-ui';
-import 'element-ui/lib/theme-chalk/index.css';
-Vue.use(ElementUI);
-
-new Vue({
-  el: '#app',
-  render: h => h(App)
-})