tianheng-ui 0.1.31 → 0.1.33

package/packages/TableMaking/generateList.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="generateList">
+    <!-- 搜索栏 -->
+    <search v-if="searchConfig.show" :options="searchConfig.options" />
+    <list
+      v-if="tableData.length"
+      :data="tableData"
+      :config="tableConfig"
+    ></list>
+    <th-empty v-else style="padding:100px 0;">
+      <img
+        slot="image"
+        :src="require('../../lib/theme-chalk/images/notData.png')"
+        style="width:150px;"
+        alt=""
+      />
+    </th-empty>
+    <tools :config="toolsConfig" @click="handleActionClick"></tools>
+  </div>
+</template>
+
+<script>
+import Search from "./custom/items/search/index-h5.vue";
+import List from "./custom/items/table/index-h5.vue";
+import Tools from "./custom/items/tools/index-h5.vue";
+export default {
+  name: "thListGenerate",
+  components: { Search, List, Tools },
+  props: {
+    config: Object,
+    data: Array
+  },
+  data() {
+    return {
+      searchConfig: {},
+      toolsConfig: [],
+      tableConfig: {},
+      tableData: this.data,
+      networkConfig: {}
+    };
+  },
+  watch: {
+    config(val) {
+      this.initConfig();
+    },
+    data(val) {
+      this.tableData = val;
+    }
+  },
+  mounted() {
+    this.initConfig();
+  },
+  methods: {
+    // 处理配置信息
+    initConfig() {
+      if (!this.config || !this.config.table) return;
+      // 搜索配置
+      this.searchConfig = this.config.search;
+
+      // 操作配置
+      const toolsConfig = this.config.tools;
+      this.toolsConfig = Object.values(toolsConfig).filter(item => {
+        return item.position === "header" && item.show;
+      });
+
+      // 表格配置
+      const tableConfig = this.config.table;
+      const rowActions = Object.values(toolsConfig).filter(item => {
+        return item.position === "row" && item.show;
+      });
+      tableConfig.actions = rowActions;
+      this.tableConfig = tableConfig;
+
+      // 网络请求
+      this.networkConfig = this.config.network;
+    },
+    handleSearchChange(data) {
+      this.$emit("search", data);
+    },
+    handleTableClick(data) {
+      this.$emit("click", data);
+    },
+    handleActionClick(action, data) {
+      this.tableData.push({ id: new Date().getTime() });
+      this.$emit("action", action, data);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.generateList {
+  width: 300px;
+  height: 649px;
+  margin: auto;
+  overflow-y: scroll;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+}
+</style>

package/packages/TableMaking/generateTable.js

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

package/packages/TableMaking/generateTable.vue

@@ -88,9 +88,9 @@
 </template>
 
 <script>
-import Search from "./custom/items/search";
-import Tools from "./custom/items/tools";
-import STable from "./custom/items/table";
+import Search from "./custom/items/search/index-pc.vue";
+import Tools from "./custom/items/tools/index-pc.vue";
+import STable from "./custom/items/table/index-pc.vue";
 import * as Axios from "lib/theme-chalk/js/axios";
 export default {
   name: "thTableGenerate",

package/packages/TableMaking/index.vue

@@ -10,7 +10,6 @@
         <slot name="action"></slot>
       </widget-tools>
       <widget-table
-        v-if="client === 'monitor'"
         style="height:calc(100% - 45px)"
         :config="tableConfig"
       ></widget-table>

package/packages/TableMaking/making.js

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

package/packages/TableMaking/widgetConfig.vue

@@ -190,9 +190,24 @@
             title="table 样式配置（电脑端）"
             name="group-style_table"
           >
-            <el-form-item label="是否边框">
+            <el-form-item label="显示边框">
               <el-switch v-model="config.table.style.table.border"> </el-switch>
             </el-form-item>
+            <el-form-item>
+              <el-tooltip
+                slot="label"
+                effect="dark"
+                content="Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。"
+                placement="top"
+              >
+                <span style="color: #409EFF;">高度</span>
+              </el-tooltip>
+              <el-input
+                v-model="config.table.style.table.height"
+                placeholder="请输入"
+                clearable
+              ></el-input>
+            </el-form-item>
           </el-collapse-item>
           <el-collapse-item
             title="cell 样式配置（移动端）"

package/packages/index.js

@@ -41,10 +41,11 @@ import ImagePreview from "./ImagePreview/index.js";
 import Row from "./Row/index.js";
 import Col from "./Col/index.js";
 import Upload from "./Upload/index.js";
-import FormMaking from "./FormMaking/making.js";
-import FormGenerate from "./FormMaking/generate.js";
-import TableMaking from "./TableMaking/making.js";
-import TableGenerate from "./TableMaking/generate.js";
+import MakingForm from "./FormMaking/making.js";
+import GenerateForm from "./FormMaking/generate.js";
+import MakingTable from "./TableMaking/making.js";
+import GenerateTable from "./TableMaking/generateTable.js";
+import GenerateList from "./TableMaking/generateList.js";
 import Workflow from "../packages/Workflow/index.js";
 
 const components = [
@@ -67,10 +68,11 @@ const components = [
   Row,
   Col,
   Upload,
-  FormMaking,
-  FormGenerate,
-  TableMaking,
-  TableGenerate,
+  MakingForm,
+  GenerateForm,
+  MakingTable,
+  GenerateTable,
+  GenerateList,
   Workflow
 ];
 
@@ -125,10 +127,11 @@ export default {
   Row,
   Col,
   Upload,
-  FormMaking,
-  FormGenerate,
-  TableMaking,
-  TableGenerate,
+  MakingForm,
+  GenerateForm,
+  MakingTable,
+  GenerateTable,
+  GenerateList,
   Workflow
 };
 
@@ -153,9 +156,10 @@ export {
   Row,
   Col,
   Upload,
-  FormMaking,
-  FormGenerate,
-  TableMaking,
-  TableGenerate,
+  MakingForm,
+  GenerateForm,
+  MakingTable,
+  GenerateTable,
+  GenerateList,
   Workflow
 };

package/packages/TableMaking/generate.js

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