tianheng-ui 0.1.28 → 0.1.29

package/package.json

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

package/packages/FormMaking/FormConfig.vue

@@ -46,7 +46,7 @@
               @change="handleFieldsApiChange"
             >
               <el-option
-                v-for="item in apiOptions"
+                v-for="item in Object.values(apiConfig)"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id"
@@ -127,7 +127,7 @@
 
 <script>
 export default {
-  props: ["config", "apiOptions"],
+  props: ["config", "apiConfig"],
   data() {
     return {
       collapseValue: [

package/packages/FormMaking/index.vue

@@ -158,7 +158,7 @@
                 <form-config
                   v-if="configTab == 'form'"
                   :config="formConfig.config"
-                  :apiOptions="apiOptions"
+                  :apiConfig="apiConfig"
                   @fieldsChange="handleFieldsChange"
                   ref="formConfigRef"
                 ></form-config>
@@ -205,6 +205,7 @@ export default {
         return {};
       }
     },
+    apiOptions: Array,
     permissions: {
       type: Array,
       default: () => [
@@ -248,8 +249,7 @@ export default {
     layoutFields: {
       type: Array,
       default: () => ["grid", "filler", "divider"]
-    },
-    apiOptions: Array
+    }
   },
   data() {
     this.basicComponents = basicComponents;
@@ -262,7 +262,8 @@ export default {
       widgetValue: {},
       configTab: "form",
       client: "monitor",
-      fields: []
+      fields: [],
+      apiConfig: {}
     };
   },
   computed: {
@@ -295,12 +296,13 @@ export default {
     config(val) {
       this.setConfig(val);
     },
-    apiOptions() {
+    apiOptions(val) {
+      this.initApiConfig();
       this.handleFieldsChange();
     }
   },
   created() {
-    this.initConfig();
+    this.initOauthConfig();
     this.formConfig = Object.assign(this.baseConfig, this.config);
 
     if (this.formConfig.list && this.formConfig.list.length) {
@@ -309,10 +311,12 @@ export default {
       this.formConfig.list = [];
     }
   },
-  mounted() {},
+  mounted() {
+    this.initApiConfig();
+  },
   methods: {
     // 初始化组件配置
-    initConfig() {
+    initOauthConfig() {
       if (this.oauthConfig.token) {
         const oauthInfo = {
           token: this.oauthConfig.token,
@@ -335,6 +339,14 @@ export default {
         });
       }
     },
+    initApiConfig() {
+      this.apiConfig = {};
+      if (this.apiOptions.length) {
+        this.apiOptions.map(item => {
+          this.apiConfig[item.id] = item;
+        });
+      }
+    },
 
     handleConfigSelect(value) {
       this.configTab = value;
@@ -373,11 +385,9 @@ export default {
       this.widgetFormSelect = Object.assign(this.widgetFormSelect, val);
     },
     handleFieldsChange() {
-      const dataArr = this.apiOptions.filter(item => {
-        return item.id === this.formConfig.config.fieldsApi;
-      });
-      if (dataArr.length && dataArr[0].paramsOut) {
-        this.fields = dataArr[0].paramsOut.map(item => {
+      const data = this.apiConfig[this.formConfig.config.fieldsApi];
+      if (data) {
+        this.fields = data.paramsOut.map(item => {
           return {
             label: item.note || item.name,
             alias: item.name,
@@ -397,7 +407,7 @@ export default {
           this.$refs.formConfigRef.formValidate().then(res => {
             if (res) {
               const data = deepClone(this.formConfig);
-              data.config.network = this.apiOptions;
+              data.config.network = this.apiConfig;
               resolve(data);
             } else {
               reject();
@@ -419,7 +429,7 @@ export default {
             return reject();
           }
           const data = deepClone(this.formConfig);
-          data.config.network = this.apiOptions;
+          data.config.network = this.apiConfig;
           resolve(data);
         });
       }

package/packages/TableMaking/WidgetTools.vue

@@ -129,7 +129,7 @@
       @on-affirm="handleDialogAffirm"
     >
       <template v-if="dialog.action === 'preview'">
-        <th-table-generate :config="config"> </th-table-generate>
+        <th-table-generate :config="deepClone(config)"> </th-table-generate>
       </template>
       <template v-else-if="dialog.action === 'importJson'">
         <el-alert
@@ -154,6 +154,8 @@
 </template>
 
 <script>
+import { deepClone } from "./util";
+
 export default {
   props: {
     config: Object,
@@ -179,6 +181,7 @@ export default {
   created() {},
   mounted() {},
   methods: {
+    deepClone: deepClone,
     handleClick(val, data) {
       this.$emit("click", val, data);
     },
@@ -195,7 +198,12 @@ export default {
       this.dialog = { show: true, action, data };
     },
     handleDialogFullscreen() {
-      this.$refs.codeEditor.resize();
+      if (
+        this.dialog.action === "importJson" ||
+        this.dialog.action === "generateJson"
+      ) {
+        this.$refs.codeEditor.resize();
+      }
     },
     handleDialogAffirm() {
       const action = this.dialog.action;

package/packages/TableMaking/custom/config.js

@@ -10,30 +10,6 @@ export const table = {
     api: ""
   },
   fieldsType: "fieldsApi",
-  style: {
-    cell: {
-      customStyle: "",
-      margin: "",
-      padding: "20rpx",
-      "border-bottom": "1px solid #e5e5e5"
-    },
-    title: {
-      customStyle: "",
-      margin: "",
-      padding: "",
-      width: "",
-      "text-align": "",
-      color: "#999"
-    },
-    value: {
-      customStyle: "",
-      margin: "",
-      padding: "",
-      width: "",
-      "text-align": "",
-      color: "#333"
-    }
-  },
   options: [],
   pageInfo: {
     show: true,
@@ -59,7 +35,35 @@ export const table = {
     text: "暂无数据",
     image: ""
   },
-  sequence: true
+  sequence: true,
+  style: {
+    table: {
+      border: true,
+      customStyle: ""
+    },
+    cell: {
+      customStyle: "",
+      margin: "",
+      padding: "20rpx",
+      "border-bottom": "1px solid #e5e5e5"
+    },
+    title: {
+      customStyle: "",
+      margin: "",
+      padding: "",
+      width: "",
+      "text-align": "",
+      color: "#999"
+    },
+    value: {
+      customStyle: "",
+      margin: "",
+      padding: "",
+      width: "",
+      "text-align": "",
+      color: "#333"
+    }
+  }
 };
 
 // 按钮配置

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

@@ -1,74 +1,78 @@
 <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
+  <div class="generateTable-search">
+    <el-form :inline="true" :model="data" size="small">
+      <el-form-item
+        v-for="item in options"
+        :key="item.prop"
+        :label="item.label"
       >
-      </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
-    >
+        <el-input
+          v-if="item.type === 'input' || item.elType === 'input'"
+          v-model="data[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' || item.elType === 'date'"
+          v-model="data[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' || item.elType === 'select'"
+          v-model="data[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>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" plain @click="doSearch">
+          查询
+        </el-button>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-refresh-right"
+          plain
+          @click="doReset"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -89,70 +93,24 @@ export default {
     }
   },
   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);
-      }
-    }
+    return {};
   },
   methods: {
     doSearch() {
-      this.$emit("on-search", this.params);
+      this.$emit("search", this.data);
     },
     doReset() {
       this.options.map(item => {
-        this.$set(this.params, item.prop, item.defaultValue || "");
+        this.$set(this.data, item.prop, item.defaultValue || "");
       });
-      this.$emit("on-reset", this.params);
+      this.$emit("reset", this.data);
     }
   }
 };
 </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;
-  }
+.generateTable-search {
+  width: 100%;
 }
 </style>

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

@@ -0,0 +1,41 @@
+<template>
+  <div class="generateTable-table">
+    <el-table
+      :style="config.style.table.customStyle"
+      :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"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+        :width="item.width || 180"
+      >
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: Array,
+    config: Object
+  },
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.generateTable-table {
+  width: 100%;
+}
+</style>

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

@@ -1,16 +1,22 @@
 <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 class="generateTable-tools">
+    <el-form :inline="true">
+      <el-form-item v-for="item in options" :key="item.type">
+        <el-button
+          :style="item.style.customStyle"
+          :type="item.style.type"
+          :icon="item.style.icon"
+          :plain="item.style.plain"
+          :round="item.style.round"
+          :circle="item.style.circle"
+          :size="item.style.size"
+          :disabled="item.style.disabled || disabled[item.act]"
+          :loading="item.style.loading"
+          @click="handleClick(item)"
+          >{{ item.name }}</el-button
+        >
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
@@ -36,14 +42,14 @@ export default {
   },
   methods: {
     handleClick(item) {
-      this.$emit("on-click", item);
+      this.$emit("click", item);
     }
   }
 };
 </script>
 
 <style lang="less" scoped>
-.th-table-tools {
-  margin-bottom: 10px;
+.generateTable-tools {
+  width: 100%;
 }
 </style>