tianheng-ui 0.1.27 → 0.1.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.27",
+  "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 config.network"
+                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"],
+  props: ["config", "apiConfig"],
   data() {
     return {
       collapseValue: [
@@ -150,22 +150,8 @@ export default {
     };
   },
   methods: {
-    handleFieldsApiChange(val) {
-      const dataArr = this.config.network.filter(item => {
-        return item.id === val;
-      });
-      if (dataArr.length && dataArr[0].paramsOut) {
-        const fields = dataArr[0].paramsOut.map(item => {
-          return {
-            label: item.note || item.name,
-            alias: item.name,
-            prop: item.name,
-            type: "input",
-            align: "left"
-          };
-        });
-        this.$emit("fieldsChange", fields);
-      } else this.$emit("fieldsChange", []);
+    handleFieldsApiChange() {
+      this.$emit("fieldsChange");
     },
     formValidate() {
       return new Promise((resolve, reject) => {

package/packages/FormMaking/GenerateForm.vue

@@ -117,7 +117,7 @@ export default {
   },
   watch: {
     config(val) {
-      this.setJSON(val);
+      this.setConfig(val);
     },
     formJson: {
       handler(val) {
@@ -262,7 +262,7 @@ export default {
     onInputChange(value, field) {
       this.$emit("on-change", field, value, this.models);
     },
-    setJSON(json) {
+    setConfig(json) {
       this.formJson = json;
       this.generateModle(this.formJson.list);
     }

package/packages/FormMaking/WidgetConfig.vue

@@ -66,12 +66,12 @@
             <el-tooltip
               slot="label"
               effect="dark"
-              content="表单提交时的入参名，对应数据表中的字段"
+              content="表单提交时的入参名，对应数据表中的字段，非必要不修改！"
               placement="top"
             >
               <span style="color: #409EFF;">字段标识</span>
             </el-tooltip>
-            <el-input v-model="data.model" readonly></el-input>
+            <el-input v-model="data.model"></el-input>
           </el-form-item>
         </el-collapse-item>
 

package/packages/FormMaking/custom/config.js

@@ -772,29 +772,32 @@ export const layoutComponents = [
 export const templateComponents = [];
 
 export const baseConfig = {
-  fieldsType: "fieldsApi",
-  fieldsApi: "",
-  ui: "element",
-  title: "",
-  width: "",
-  labelWidth: 100,
-  labelPosition: "right",
-  labelSuffix: ":",
-  size: "small",
-  disabled: false,
-  hideLabel: false,
-  mounted: { api: "" },
-  eventScript: [
-    {
-      id: "mounted",
-      label: "mounted",
-      value: ""
-    },
-    {
-      id: "refresh",
-      label: "refresh",
-      value: ""
-    }
-  ],
-  network: []
+  list: [],
+  config: {
+    fieldsType: "fieldsApi",
+    fieldsApi: "",
+    ui: "element",
+    title: "",
+    width: "",
+    labelWidth: 100,
+    labelPosition: "right",
+    labelSuffix: ":",
+    size: "small",
+    disabled: false,
+    hideLabel: false,
+    mounted: { api: "" },
+    eventScript: [
+      {
+        id: "mounted",
+        label: "mounted",
+        value: ""
+      },
+      {
+        id: "refresh",
+        label: "refresh",
+        value: ""
+      }
+    ],
+    network: []
+  }
 };

package/packages/FormMaking/index.vue

@@ -158,6 +158,7 @@
                 <form-config
                   v-if="configTab == 'form'"
                   :config="formConfig.config"
+                  :apiConfig="apiConfig"
                   @fieldsChange="handleFieldsChange"
                   ref="formConfigRef"
                 ></form-config>
@@ -197,18 +198,14 @@ export default {
     GenerateForm
   },
   props: {
-    config: {
-      type: Object,
-      default: () => {
-        return { config: {}, list: [] };
-      }
-    },
+    config: Object,
     oauthConfig: {
       type: Object,
       default: () => {
         return {};
       }
     },
+    apiOptions: Array,
     permissions: {
       type: Array,
       default: () => [
@@ -252,8 +249,7 @@ export default {
     layoutFields: {
       type: Array,
       default: () => ["grid", "filler", "divider"]
-    },
-    apiOptions: Array
+    }
   },
   data() {
     this.basicComponents = basicComponents;
@@ -261,12 +257,13 @@ export default {
     this.layoutComponents = layoutComponents;
     this.baseConfig = deepClone(baseConfig);
     return {
-      formConfig: this.config,
+      formConfig: this.baseConfig,
       widgetFormSelect: {},
       widgetValue: {},
       configTab: "form",
       client: "monitor",
-      fields: []
+      fields: [],
+      apiConfig: {}
     };
   },
   computed: {
@@ -294,27 +291,19 @@ export default {
       deep: true,
       handler: function(val) {
         this.$emit("update:config", val);
-        // this.$emit("on-change", val);
       }
     },
     config(val) {
-      if (val && val.config) {
-        val.config = Object.assign(this.baseConfig, val.config);
-      }
-      this.setJSON(val);
+      this.setConfig(val);
     },
     apiOptions(val) {
-      if (val) {
-        this.formConfig.config.network = val;
-      }
+      this.initApiConfig();
+      this.handleFieldsChange();
     }
   },
   created() {
-    this.initConfig();
-    this.formConfig.config = Object.assign(
-      this.baseConfig,
-      this.formConfig.config
-    );
+    this.initOauthConfig();
+    this.formConfig = Object.assign(this.baseConfig, this.config);
 
     if (this.formConfig.list && this.formConfig.list.length) {
       this.widgetFormSelect = this.formConfig.list[0];
@@ -322,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,
@@ -348,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;
@@ -372,7 +371,7 @@ export default {
         case "import-excel":
         case "import-json":
         case "import-template":
-          this.setJSON(data);
+          this.setConfig(data);
           break;
         case "clear":
           this.handleClear();
@@ -385,8 +384,19 @@ export default {
     handleWidgetConfigUpdate(val) {
       this.widgetFormSelect = Object.assign(this.widgetFormSelect, val);
     },
-    handleFieldsChange(val) {
-      this.fields = val;
+    handleFieldsChange() {
+      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,
+            prop: item.name,
+            type: "input",
+            align: "left"
+          };
+        });
+      } else this.fields = [];
     },
     clear() {
       this.handleClear();
@@ -397,6 +407,7 @@ export default {
           this.$refs.formConfigRef.formValidate().then(res => {
             if (res) {
               const data = deepClone(this.formConfig);
+              data.config.network = this.apiConfig;
               resolve(data);
             } else {
               reject();
@@ -418,6 +429,7 @@ export default {
             return reject();
           }
           const data = deepClone(this.formConfig);
+          data.config.network = this.apiConfig;
           resolve(data);
         });
       }
@@ -425,12 +437,14 @@ export default {
     getHtml() {
       return generateCode(JSON.stringify(this.formConfig));
     },
-    setJSON(json) {
-      this.formConfig = json;
+    setConfig(val) {
+      this.formConfig = Object.assign(this.baseConfig, val);
 
-      if (json.list.length > 0) {
-        this.widgetFormSelect = json.list[0];
+      if (this.formConfig.list.length > 0) {
+        this.widgetFormSelect = this.formConfig.list[0];
       }
+
+      this.handleFieldsChange();
     }
   }
 };

package/packages/TableMaking/WidgetTools.vue

@@ -35,7 +35,6 @@
         type="text"
         size="medium"
         icon="el-icon-view"
-        disabled
         @click="handleDialogOpen('preview')"
         >预览
       </el-button>
@@ -129,7 +128,9 @@
       @on-close="handleDialogClose"
       @on-affirm="handleDialogAffirm"
     >
-      <template v-if="dialog.action === 'preview'"></template>
+      <template v-if="dialog.action === 'preview'">
+        <th-table-generate :config="deepClone(config)"> </th-table-generate>
+      </template>
       <template v-else-if="dialog.action === 'importJson'">
         <el-alert
           type="info"
@@ -153,6 +154,8 @@
 </template>
 
 <script>
+import { deepClone } from "./util";
+
 export default {
   props: {
     config: Object,
@@ -178,6 +181,7 @@ export default {
   created() {},
   mounted() {},
   methods: {
+    deepClone: deepClone,
     handleClick(val, data) {
       this.$emit("click", val, data);
     },
@@ -194,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>