tianheng-ui 0.1.32 → 0.1.34

package/package.json

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

package/packages/Empty/index.vue

@@ -20,7 +20,7 @@
 export default {
   name: "ThEmpty",
   props: {
-    image: { type: String, default: "" },
+    image: { type: String, default: '' },
     imageSize: { type: Number, default: 300 },
     description: { type: String, default: "暂无数据" }
   },

package/packages/FormMaking/WidgetConfig.vue

@@ -14,7 +14,7 @@
             <el-tooltip
               slot="label"
               effect="dark"
-              content="会导致该组件配置信息重置，请谨慎使用！"
+              content="切换组件会导致该组件配置信息重置，请谨慎使用！"
               placement="top"
             >
               <span style="color: #409EFF;">组件切换</span>
@@ -81,8 +81,6 @@
           :fields="fields"
           :apiConfig="apiConfig"
           :is="compsData[data.type].content"
-          @events-show="handleEventDialogShow"
-          @events-edit="handleEventsCollapseClick"
         ></component>
 
         <el-collapse-item
@@ -93,7 +91,7 @@
             <span>动作设置</span>
             <span
               style="float: right;margin-right: 10px;"
-              @click.stop="handleEventsShow"
+              @click.stop="handleEventDialogShow"
               >配置</span
             >
           </div>
@@ -102,7 +100,7 @@
             :key="event"
             :label="event"
           >
-            <div class="eventsCollapse-item">
+            <div class="events-item">
               <el-select
                 v-model="data.events[event]"
                 placeholder="请选择"
@@ -119,7 +117,7 @@
               <i
                 v-if="data.events[event]"
                 class="el-icon-edit"
-                @click="handleEventsEdit(data.events[event])"
+                @click="handleEventsCollapseClick(data.events[event])"
               ></i>
             </div>
           </el-form-item>
@@ -127,15 +125,6 @@
       </el-collapse>
     </el-form>
 
-    <!-- <component
-      :widget="data"
-      :config="config"
-      :fields="fields"
-      :is="compsData[data.type].content"
-      @events-show="handleEventDialogShow"
-      @events-edit="handleEventsCollapseClick"
-    ></component> -->
-
     <th-dialog
       title="动作设置"
       v-model="eventsDialog.visible"
@@ -498,13 +487,20 @@ export default {
   .el-radio-button__inner {
     padding: 7px !important;
   }
+  .el-dialog__body {
+    padding: 20px !important;
+  }
 }
 </style>
 
 <style lang="scss" scoped>
 .widget-config {
-  .el-dialog__body {
-    padding: 20px;
+  .events-item {
+    display: flex;
+    align-items: center;
+    > i {
+      margin-left: 10px;
+    }
   }
 
   .eventsSetting {
@@ -594,20 +590,5 @@ export default {
       }
     }
   }
-  .selectableRange {
-    width: 100%;
-
-    .el-range-separator {
-      width: 20px;
-    }
-  }
-
-  .flexView {
-    display: flex;
-    align-items: center;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid #e1e1e1;
-  }
 }
 </style>

package/packages/TableMaking/WidgetTools.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="widgetTools">
     <div class="left">
-      <el-button
+      <!-- <el-button
         :class="{ active: client === 'monitor' }"
         type="text"
         size="medium"
@@ -16,7 +16,7 @@
         icon="el-icon-mobile"
         @click="handleClick('mobile')"
       >
-      </el-button>
+      </el-button> -->
     </div>
     <div class="right">
       <slot> </slot>
@@ -30,14 +30,35 @@
         @click="handleClick('clear')"
         >重置
       </el-button>
-      <el-button
-        v-if="permissions.includes('preview')"
-        type="text"
-        size="medium"
-        icon="el-icon-view"
-        @click="handleDialogOpen('preview')"
-        >预览
-      </el-button>
+      <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
+        <el-button
+          v-if="permissions.includes('preview')"
+          type="text"
+          size="medium"
+          icon="el-icon-view"
+          slot="reference"
+          >预览
+        </el-button>
+        <div>
+          <el-button
+            type="text"
+            size="medium"
+            icon="el-icon-monitor"
+            @click="handleDialogOpen('preview_pc')"
+            >电脑端
+          </el-button>
+        </div>
+        <div>
+          <el-button
+            type="text"
+            size="medium"
+            icon="el-icon-mobile"
+            @click="handleDialogOpen('preview_h5')"
+            >移动端
+          </el-button>
+        </div>
+      </el-popover>
+
       <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
         <el-button
           v-if="permissions.includes('upload')"
@@ -48,37 +69,33 @@
           >导入</el-button
         >
         <div>
-          <div>
-            <el-button
-              type="text"
-              size="medium"
-              @click="handleDialogOpen('importJson')"
-              >导入JSON
-            </el-button>
-          </div>
-          <div>
-            <el-upload
-              action
-              accept=".xlsx, .xls"
-              :auto-upload="false"
-              :show-file-list="false"
-              disabled
-              :on-change="handleExcelFileChange"
-            >
-              <el-button type="text" size="medium" disabled
-                >导入EXCEL</el-button
-              >
-            </el-upload>
-          </div>
-          <div>
-            <el-button
-              type="text"
-              size="medium"
-              disabled
-              @click="handleDialogOpen('importTemplate')"
-              >导入模板
-            </el-button>
-          </div>
+          <el-button
+            type="text"
+            size="medium"
+            @click="handleDialogOpen('importJson')"
+            >导入JSON
+          </el-button>
+        </div>
+        <div>
+          <el-upload
+            action
+            accept=".xlsx, .xls"
+            :auto-upload="false"
+            :show-file-list="false"
+            disabled
+            :on-change="handleExcelFileChange"
+          >
+            <el-button type="text" size="medium" disabled>导入EXCEL</el-button>
+          </el-upload>
+        </div>
+        <div>
+          <el-button
+            type="text"
+            size="medium"
+            disabled
+            @click="handleDialogOpen('importTemplate')"
+            >导入模板
+          </el-button>
         </div>
       </el-popover>
       <el-popover style="margin-left:10px;" placement="bottom" trigger="hover">
@@ -128,9 +145,12 @@
       @on-close="handleDialogClose"
       @on-affirm="handleDialogAffirm"
     >
-      <template v-if="dialog.action === 'preview'">
+      <template v-if="dialog.action === 'preview_pc'">
         <th-table-generate :config="deepClone(config)"> </th-table-generate>
       </template>
+      <template v-if="dialog.action === 'preview_h5'">
+        <th-list-generate :data="[]" :config="deepClone(config)"> </th-list-generate>
+      </template>
       <template v-else-if="dialog.action === 'importJson'">
         <el-alert
           type="info"
@@ -170,7 +190,8 @@ export default {
         data: {}
       },
       dialogTitles: {
-        preview: "预览",
+        preview_pc: "预览-电脑端",
+        preview_h5: "预览-移动端",
         importJson: "导入JSON",
         importTemplate: "导入模板",
         generateJson: "生成JSON",

package/packages/TableMaking/custom/config.js

@@ -40,8 +40,6 @@ export const table = {
     table: {
       border: true,
       height: "",
-      maxHeight: "",
-      customStyle: ""
     },
     cell: {
       customStyle: "",

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="generateTable-search">
+    <el-row :gutter="10">
+      <el-col
+        v-for="item in options"
+        :key="item.prop"
+        :span="24 / options.length"
+      >
+        <el-input
+          v-if="item.type === 'input' || item.elType === 'input'"
+          v-model="data[item.prop]"
+          :placeholder="item.label"
+          :disabled="item.disabled"
+          clearable
+        ></el-input>
+        <el-date-picker
+          v-if="item.type === 'date' || item.elType === 'date'"
+          v-model="data[item.prop]"
+          :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' || item.elType === 'select'"
+          v-model="data[item.prop]"
+          :placeholder="item.label"
+          :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>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    data: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    doSearch() {
+      this.$emit("search", this.data);
+    },
+    doReset() {
+      this.options.map(item => {
+        this.$set(this.data, item.prop, item.defaultValue || "");
+      });
+      this.$emit("reset", this.data);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.generateTable-search {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  padding: 5px;
+  border-bottom: 1px solid #e5e5e5;
+  background-color: white;
+  z-index: 100;
+}
+</style>

package/packages/TableMaking/custom/items/table/index-h5.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="generateTable-table">
+    <div
+      v-for="item in data"
+      class="table-list-item"
+      :style="cellStyle"
+      :key="item.id"
+      @click="handleCellClick(item)"
+    >
+      <div
+        v-for="(column, index) in getList"
+        class="table-list-item-row"
+        :key="index"
+      >
+        <div class="table-list-item-row-label" :style="titleStyle">
+          {{ column.label }}
+        </div>
+        <div class="table-list-item-row-value" :style="valueStyle">
+          {{ item[column.prop] != null ? item[column.prop] : "" }}
+        </div>
+      </div>
+      <div class="table-list-item-tools">
+        <el-button
+          v-for="button in config.actions"
+          :key="button.name"
+          :type="button.style.type"
+          :icon="button.style.icon"
+          :plain="button.style.plain"
+          :round="button.style.round"
+          :circle="button.style.circle"
+          :size="button.style.size"
+          @click="handleActionClick(button, item)"
+          >{{ button.text }}</el-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: Array,
+    config: Object
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    getList() {
+      if (this.config.options) {
+        const data = this.config.options.filter(item => {
+          return !item.hide;
+        });
+        return data;
+      }
+      return [];
+    },
+    cellStyle() {
+      let styleText = "";
+      if (this.config.style) {
+        const style = this.config.style.cell || {};
+        const keys = Object.keys(style).filter(key => {
+          return key !== "customStyle";
+        });
+        for (let key of keys) {
+          styleText += `${key}: ${style[key]};`;
+        }
+        styleText += style.customStyle;
+        styleText = styleText.replace(/rpx/g, "px");
+        return styleText;
+      }
+    },
+    titleStyle() {
+      let styleText = "";
+      if (this.config.style) {
+        const style = this.config.style.title || {};
+        const keys = Object.keys(style).filter(key => {
+          return key !== "customStyle";
+        });
+        for (let key of keys) {
+          styleText += `${key}: ${style[key]};`;
+        }
+        styleText += style.customStyle;
+        styleText = styleText.replace(/rpx/g, "px");
+        return styleText;
+      }
+    },
+    valueStyle() {
+      let styleText = "";
+      if (this.config.style) {
+        const style = this.config.style.value || {};
+        const keys = Object.keys(style).filter(key => {
+          return key !== "customStyle";
+        });
+        for (let key of keys) {
+          styleText += `${key}: ${style[key]};`;
+        }
+        styleText += style.customStyle;
+        styleText = styleText.replace(/rpx/g, "px");
+        return styleText;
+      }
+    }
+  },
+  methods: {
+    stopClick() {},
+    handleCellClick(item) {
+      this.$emit("click", item);
+    },
+    handleActionClick(action, item) {
+      this.$emit("action", action, item);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.generateTable-table {
+  width: 100%;
+
+  .table-list-item {
+    .table-list-item-row {
+      display: flex;
+      align-items: center;
+      padding: 5px 0;
+      .table-list-item-row-label {
+      }
+      .table-list-item-row-value {
+        flex: 1;
+      }
+    }
+
+    .table-list-item-tools {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>

package/packages/TableMaking/custom/items/table/{index.vue → index-pc.vue}

@@ -5,7 +5,6 @@
       :data="data"
       :border="config.style.table.border"
       :height="config.style.table.height"
-      :max-height="config.style.table.maxHeight"
     >
       <el-table-column
         v-for="item in config.options"

package/packages/TableMaking/custom/items/tools/index-h5.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="generateTable-tools">
+    <el-row :gutter="10">
+      <el-col
+        v-for="button in config"
+        :key="button.name"
+        :span="24 / config.length"
+      >
+        <el-button
+          style="width:100%"
+          :type="button.style.type"
+          :icon="button.style.icon"
+          :plain="button.style.plain"
+          :round="button.style.round"
+          :circle="button.style.circle"
+          :size="button.style.size"
+          @click="handleClick(button)"
+          >{{ button.text }}</el-button
+        >
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    config: Array
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    handleClick(item) {
+      this.$emit("click", item);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.generateTable-tools {
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  padding: 10px 5px;
+  background-color: white;
+  z-index: 100;
+}
+</style>

package/packages/TableMaking/generateList.js

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

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>