tianheng-ui 0.1.0 → 0.1.2

package/packages/TableMaking/custom/items/search/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="th-table-search" v-if="options.length">
+    <div
+      v-for="(item, index) in options"
+      class="th-table-search-item"
+      :key="index"
+    >
+      <span class="th-table-search-item-title">{{ item.label }}：</span>
+      <el-input
+        v-if="item.type === 'input'"
+        v-model="params[item.prop]"
+        :style="{ width: `${item.width || '180'}px` }"
+        :placeholder="item.placeholder || '请输入'"
+        :disabled="item.disabled"
+        clearable
+      ></el-input>
+      <el-date-picker
+        v-if="item.type === 'date'"
+        v-model="params[item.prop]"
+        :style="{ width: `${item.width || '180'}px` }"
+        :type="item.dateType || 'date'"
+        :format="item.format"
+        :value-format="item.valueFormat"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        clearable
+      >
+      </el-date-picker>
+      <el-select
+        v-if="item.type === 'select'"
+        v-model="params[item.prop]"
+        :style="{ width: `${item.width || '180'}px` }"
+        :placeholder="item.placeholder || '请选择'"
+        :multiple="item.multiple"
+        :multiple-limit="item.multipleLimit"
+        :filterable="item.filterable"
+        :disabled="item.disabled"
+        clearable
+      >
+        <template v-if="item.remote">
+          <el-option
+            v-for="option in item.remoteData"
+            :key="option[item.props.value]"
+            :label="option[item.props.label]"
+            :value="option[item.props.value]"
+          >
+          </el-option>
+        </template>
+        <template v-else>
+          <el-option
+            v-for="option in item.staticData"
+            :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 {
+  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.prop, item.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="scss" scoped>
+.th-table-search {
+  margin-bottom: 10px;
+  &-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/TableMaking/custom/items/tools/index.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/generate.js

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