tianheng-ui 0.1.28 → 0.1.30

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tianheng-ui",
   "description": "A Vue.js project",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "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"
@@ -80,7 +80,15 @@
         </el-collapse-item>
 
         <el-collapse-item title="数据配置" name="group-resultData">
-          <el-form-item label="表单回填">
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="dark"
+              content="一般用于编辑和详情的数据回显"
+              placement="top"
+            >
+              <span style="color: #409EFF;">数据回填</span>
+            </el-tooltip>
             <el-select
               v-model="config.mounted.api"
               value-key="id"
@@ -89,7 +97,7 @@
               no-data-text="暂无接口，请前往【接口模块】创建"
             >
               <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 +135,7 @@
 
 <script>
 export default {
-  props: ["config", "apiOptions"],
+  props: ["config", "apiConfig"],
   data() {
     return {
       collapseValue: [

package/packages/FormMaking/WidgetConfig.vue

@@ -79,6 +79,7 @@
           :widget="data"
           :config="config"
           :fields="fields"
+          :apiConfig="apiConfig"
           :is="compsData[data.type].content"
           @events-show="handleEventDialogShow"
           @events-edit="handleEventsCollapseClick"
@@ -257,7 +258,8 @@ export default {
         return {};
       }
     },
-    fields: Array
+    fields: Array,
+    apiConfig: Object
   },
   data() {
     return {

package/packages/FormMaking/custom/config.js

@@ -798,6 +798,6 @@ export const baseConfig = {
         value: ""
       }
     ],
-    network: []
+    network: {}
   }
 };

package/packages/FormMaking/custom/configs/button.vue

@@ -96,7 +96,7 @@
           no-data-text="暂无接口，请前往【接口模块】创建"
         >
           <el-option
-            v-for="item in config.network"
+            v-for="item in Object.values(apiConfig)"
             :key="item.id"
             :label="item.label"
             :value="item.id"

package/packages/FormMaking/custom/configs/cascader.vue

@@ -65,7 +65,7 @@
           clearable
         >
           <el-option
-            v-for="item in config.network"
+            v-for="item in Object.values(apiConfig)"
             :key="item.id"
             :label="item.label"
             :value="item.id"

package/packages/FormMaking/custom/configs/checkbox.vue

@@ -59,7 +59,7 @@
             clearable
           >
             <el-option
-              v-for="item in config.network"
+              v-for="item in Object.values(apiConfig)"
               :key="item.id"
               :label="item.label"
               :value="item.id"

package/packages/FormMaking/custom/configs/radio.vue

@@ -47,7 +47,7 @@
             clearable
           >
             <el-option
-              v-for="item in config.network"
+              v-for="item in Object.values(apiConfig)"
               :key="item.id"
               :label="item.label"
               :value="item.id"

package/packages/FormMaking/custom/configs/select.vue

@@ -44,7 +44,7 @@
             clearable
           >
             <el-option
-              v-for="item in config.network"
+              v-for="item in Object.values(apiConfig)"
               :key="item.id"
               :label="item.label"
               :value="item.id"

package/packages/FormMaking/custom/configs/tabs.vue

@@ -55,7 +55,7 @@
             placeholder="请选择远端方法"
           >
             <el-option
-              v-for="item in config.network"
+              v-for="item in Object.values(apiConfig)"
               :key="item.id"
               :label="item.label"
               :value="item.id"

package/packages/FormMaking/custom/configs/upload.vue

@@ -72,7 +72,7 @@
           placeholder="请选择远端方法"
         >
           <el-option
-            v-for="item in config.network"
+            v-for="item in Object.values(apiConfig)"
             :key="item.id"
             :label="item.label"
             :value="item.id"

package/packages/FormMaking/custom/mixins/index.js

@@ -12,12 +12,7 @@ export const configComponent = {
         return {};
       }
     },
-    remoteApis: {
-      type: Array,
-      default: () => {
-        return [];
-      }
-    }
+    apiConfig: Object
   },
   data() {
     return {};

package/packages/FormMaking/index.vue

@@ -152,13 +152,14 @@
                   :data="widgetFormSelect"
                   :config="formConfig.config"
                   :fields="fields"
+                  :apiConfig="apiConfig"
                   @update="handleWidgetConfigUpdate"
                 >
                 </widget-config>
                 <form-config
                   v-if="configTab == 'form'"
                   :config="formConfig.config"
-                  :apiOptions="apiOptions"
+                  :apiConfig="apiConfig"
                   @fieldsChange="handleFieldsChange"
                   ref="formConfigRef"
                 ></form-config>
@@ -205,6 +206,7 @@ export default {
         return {};
       }
     },
+    apiOptions: Array,
     permissions: {
       type: Array,
       default: () => [
@@ -248,8 +250,7 @@ export default {
     layoutFields: {
       type: Array,
       default: () => ["grid", "filler", "divider"]
-    },
-    apiOptions: Array
+    }
   },
   data() {
     this.basicComponents = basicComponents;
@@ -262,7 +263,8 @@ export default {
       widgetValue: {},
       configTab: "form",
       client: "monitor",
-      fields: []
+      fields: [],
+      apiConfig: {}
     };
   },
   computed: {
@@ -295,12 +297,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 +312,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 +340,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 +386,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 +408,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 +430,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,37 @@ export const table = {
     text: "暂无数据",
     image: ""
   },
-  sequence: true
+  sequence: true,
+  style: {
+    table: {
+      border: true,
+      height: "",
+      maxHeight: "",
+      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"
+    }
+  }
 };
 
 // 按钮配置
@@ -82,7 +88,7 @@ export const tools = {
     position: "header",
     form: "",
     api: "",
-    style: buttonStyle
+    style: { ...buttonStyle, type: "primary" }
   },
   edit: {
     show: true,
@@ -92,7 +98,7 @@ export const tools = {
     position: "row",
     form: "",
     api: "",
-    style: buttonStyle
+    style: { ...buttonStyle, type: "primary", plain: true }
   },
   look: {
     show: false,
@@ -102,7 +108,7 @@ export const tools = {
     position: "row",
     form: "",
     api: "",
-    style: buttonStyle
+    style: { ...buttonStyle, type: "primary", plain: true }
   },
   delete: {
     show: true,
@@ -112,7 +118,7 @@ export const tools = {
     position: "row",
     form: "",
     api: "",
-    style: buttonStyle
+    style: { ...buttonStyle, type: "danger", plain: true }
   },
   batchDelete: {
     show: false,
@@ -122,7 +128,7 @@ export const tools = {
     position: "header",
     form: "",
     api: "",
-    style: buttonStyle
+    style: { ...buttonStyle, type: "danger", plain: true }
   },
   export: {
     show: false,
@@ -132,7 +138,7 @@ export const tools = {
     position: "header",
     form: "",
     api: "",
-    style: buttonStyle
+    style: { ...buttonStyle }
   },
   import: {
     show: false,
@@ -142,7 +148,7 @@ export const tools = {
     position: "header",
     form: "",
     api: "",
-    style: buttonStyle
+    style: { ...buttonStyle }
   }
 };
 

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>