tianheng-ui 0.0.77 → 0.0.80

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.0.77",
+  "version": "0.0.80",
   "author": "shu lang <403732931@qq.com>",
   "license": "MIT",
   "private": false,

package/packages/FormMaking/GenerateForm.vue

@@ -60,13 +60,9 @@
 
 <script>
 import GenetateFormItem from "./GenerateFormItem";
-// import GenetateFormItemH5 from "./GenerateFormItemH5";
-// import Vue from "vue";
-// import { Form } from "vant";
-// Vue.use(Form);
 
 export default {
-  name: "th-generate-form",
+  name: "thFormGenerate",
   components: { GenetateFormItem },
   props: {
     data: {

package/packages/FormMaking/index.js

@@ -3,7 +3,7 @@ import "./iconfont/iconfont.css";
 // import "./styles/cover.scss";
 import "./styles/index.scss";
 
-import FormMaking from "./Container.vue";
+import FormMaking from "./index.vue";
 FormMaking.install = function(Vue) {
   Vue.component(FormMaking.name, FormMaking);
 };

package/packages/FormMaking/{Container.vue → index.vue}

@@ -387,7 +387,7 @@ import generateCode from "./util/generateCode.js";
 import * as XLSX from "xlsx/xlsx.mjs";
 
 export default {
-  name: "th-making-form",
+  name: "thFormMaking",
   components: {
     Draggable,
     WidgetConfig,

package/packages/FormMaking/making.js

@@ -2,7 +2,7 @@ import "normalize.css/normalize.css";
 import "./iconfont/iconfont.css";
 // import "./styles/cover.scss";
 import "./styles/index.scss";
-import FormMaking from "./Container.vue";
+import FormMaking from "./index.vue";
 FormMaking.install = function(Vue) {
   Vue.component(FormMaking.name, FormMaking);
 };

package/packages/Table/index.vue

@@ -15,65 +15,63 @@
       @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="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 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>
@@ -200,6 +198,13 @@ export default {
   data() {
     return {};
   },
+  computed: {
+    widgetList() {
+      return this.options.filter(item => {
+        return !item.hide;
+      });
+    }
+  },
   methods: {
     handleSelectionChange(currentRow) {
       if (currentRow) {

package/packages/Table/search.vue

@@ -81,11 +81,17 @@ export default {
       default: () => {
         return [];
       }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
     }
   },
   data() {
     return {
-      params: {},
+      params: this.data,
       datePickerTypes: [
         "year",
         "month",
@@ -114,6 +120,15 @@ export default {
       },
       deep: true,
       immediate: true
+    },
+    data(val) {
+      this.params = val;
+    },
+    params: {
+      deep: true,
+      handler(val) {
+        this.$emit("update:data", val);
+      }
     }
   },
   methods: {

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;