tianheng-ui 0.1.44 → 0.1.45

package/packages/FormMaking/WidgetConfig.vue

@@ -14,7 +14,7 @@
 
     <div v-if="activeTab.value === 'field'">
       <el-form
-        v-if="data.model"
+        v-if="data.key"
         :model="data"
         label-position="left"
         label-width="80px"
@@ -48,7 +48,10 @@
                 </el-option>
               </el-select>
             </el-form-item>
-            <el-form-item v-if="config.fieldsType === 'fieldsApi'" prop="model">
+            <el-form-item
+              v-if="config.fields.type === 'api'"
+              :prop="['grid'].includes(data.type) ? '' : 'model'"
+            >
               <el-tooltip
                 slot="label"
                 effect="light"
@@ -57,21 +60,31 @@
               >
                 <span style="color: #409EFF;">字段标识</span>
               </el-tooltip>
-              <el-select
+              <el-cascader
+                v-model="data.model"
+                :options="getFieldsOptions"
+                :props="{
+                  value: 'alias',
+                  checkStrictly: true,
+                  emitPath: false
+                }"
+                clearable
+              ></el-cascader>
+              <!-- <el-select
                 v-model="data.model"
                 style="width:100%;"
                 placeholder="请选择字段"
               >
                 <el-option
-                  v-for="item in fields"
-                  :key="item.prop"
+                  v-for="item in getFieldsOptions"
+                  :key="item.alias"
                   :label="item.label"
-                  :value="item.prop"
+                  :value="item.alias"
                 >
                 </el-option>
-              </el-select>
+              </el-select> -->
             </el-form-item>
-            <el-form-item prop="model">
+            <el-form-item :prop="['grid'].includes(data.type) ? '' : 'model'">
               <el-tooltip
                 slot="label"
                 effect="light"
@@ -87,8 +100,7 @@
           <component
             :widget="data"
             :config="config"
-            :fields="fields"
-            :apiConfig="apiConfig"
+            :apiOptions="apiOptions"
             :is="compsData[data.type].content"
           ></component>
 
@@ -146,7 +158,7 @@
       >
         <el-collapse v-model="collapseValue">
           <el-collapse-item title="表单配置" name="group-form">
-            <el-form-item prop="fieldsType" required>
+            <el-form-item prop="fields.type" required>
               <el-tooltip
                 slot="label"
                 effect="light"
@@ -155,41 +167,49 @@
               >
                 <span style="color: #409EFF;">字段类型</span>
               </el-tooltip>
-              <el-radio-group v-model="config.fieldsType">
+              <el-radio-group v-model="config.fields.type">
                 <el-radio-button label="custom">自定义</el-radio-button>
-                <el-radio-button label="fieldsApi">接口导入</el-radio-button>
+                <el-radio-button label="api">接口导入</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item
-              v-if="config.fieldsType === 'fieldsApi'"
-              prop="fieldsApi"
-              required
-            >
-              <el-tooltip
-                slot="label"
-                effect="light"
-                content="使用接口的出参配置可选字段"
-                placement="top"
-              >
-                <span style="color: #409EFF;">字段接口</span>
-              </el-tooltip>
-              <el-select
-                v-model="config.fieldsApi"
-                style="width:100%"
-                clearable
-                placeholder="请选择"
-                no-data-text="暂无接口，请前往【数据源模块】创建"
-                @change="handleFieldsApiChange"
-              >
-                <el-option
-                  v-for="item in Object.values(apiConfig)"
-                  :key="item.id"
-                  :label="item.label"
-                  :value="item.id"
+            <template v-if="config.fields.type === 'api'">
+              <el-form-item>
+                <el-tooltip
+                  slot="label"
+                  effect="light"
+                  content="开启后，列表接口值修改，会触发 remote-params 回调，用于从服务器查询字段，"
+                  placement="top"
                 >
-                </el-option>
-              </el-select>
-            </el-form-item>
+                  <span style="color: #409EFF;">远程字段</span>
+                </el-tooltip>
+                <el-switch v-model="config.fields.remote"> </el-switch>
+              </el-form-item>
+              <el-form-item prop="fields.api" required>
+                <el-tooltip
+                  slot="label"
+                  effect="light"
+                  content="使用接口的出参配置可选字段"
+                  placement="top"
+                >
+                  <span style="color: #409EFF;">字段接口</span>
+                </el-tooltip>
+                <el-select
+                  v-model="config.fields.api"
+                  style="width:100%"
+                  clearable
+                  placeholder="请选择"
+                  no-data-text="暂无接口，请前往【数据源模块】创建"
+                >
+                  <el-option
+                    v-for="item in apiOptions"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </template>
             <el-form-item label="表单标题" prop="title" required>
               <el-input
                 v-model="config.title"
@@ -232,9 +252,9 @@
                 no-data-text="暂无接口，请前往【接口模块】创建"
               >
                 <el-option
-                  v-for="item in Object.values(apiConfig)"
+                  v-for="item in apiOptions"
                   :key="item.id"
-                  :label="item.label"
+                  :label="item.name"
                   :value="item.id"
                 >
                 </el-option>
@@ -381,9 +401,7 @@
         </div>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="dialog.show = false"
-          >取 消</el-button
-        >
+        <el-button size="small" @click="dialog.show = false">取 消</el-button>
         <el-button type="primary" size="small" @click="handleEventDialogAffirm"
           >保 存</el-button
         >
@@ -409,8 +427,7 @@ export default {
         return {};
       }
     },
-    fields: Array,
-    apiConfig: Object
+    apiOptions: Array
   },
   data() {
     return {
@@ -431,6 +448,7 @@ export default {
         "group-attributes",
         "group-style_form"
       ],
+      fieldsData: { inParams: [], outParams: [] },
       dialog: {
         show: false,
         data: [],
@@ -472,7 +490,7 @@ export default {
         model: [
           { required: true, message: "请填选组件字段", trigger: "change" }
         ],
-        fieldsApi: [
+        "fields.api": [
           { required: true, message: "请选择字段接口", trigger: "change" }
         ],
         title: [
@@ -481,6 +499,19 @@ export default {
       }
     };
   },
+  computed: {
+    getFieldsOptions() {
+      return this.fieldsData.inParams;
+    }
+  },
+  watch: {
+    "config.fields.api"(val) {
+      this.handleFieldsApiChange(val);
+    },
+    apiOptions() {
+      this.handleFieldsApiChange(this.config.fields.api);
+    }
+  },
   created() {
     this.activeTab = this.tabsMenus[1];
     const keys = Object.keys(this.compsData);
@@ -515,10 +546,7 @@ export default {
       };
     },
     handleEventDialogDelete(item, index) {
-      if (
-        this.dialog.active &&
-        item.key === this.dialog.active.key
-      ) {
+      if (this.dialog.active && item.key === this.dialog.active.key) {
         this.dialog.active = null;
       }
       this.dialog.data.splice(index, 1);
@@ -541,8 +569,46 @@ export default {
       const config = deepClone(this.compsData[val].config);
       this.$emit("update", config);
     },
-    handleFieldsApiChange() {
-      this.$emit("fieldsChange");
+    handleFieldsApiChange(apiId) {
+      if (!this.apiOptions.length || !this.config.fields.api) {
+        this.fieldsData = { inParams: [], outParams: [] };
+        return;
+      }
+      const api = this.apiOptions.filter(item => {
+        return item.id === apiId;
+      })[0];
+      if (!api) {
+        this.$message.warning("未知的字段借口，请检查配置信息");
+        this.fieldsData = { inParams: [], outParams: [] };
+        return;
+      }
+
+      const initParams = (paramsList, pAlias) => {
+        paramsList.forEach(item => {
+          item.elType = "input";
+          item.align = "left";
+          item.pAlias = pAlias ? `${pAlias}.${item.alias}` : item.alias;
+          if (item.children && item.children.length) {
+            initParams(item.children, item.pAlias);
+          }
+        });
+      };
+      if (this.config.fields.remote) {
+        const callback = res => {
+          api.inParams = res.inParams;
+          api.outParams = res.outParams;
+          this.fieldsData.inParams = deepClone(res.inParams) || [];
+          initParams(this.fieldsData.inParams);
+          this.fieldsData.outParams = deepClone(res.outParams) || [];
+          initParams(this.fieldsData.outParams);
+        };
+        this.$emit("remote-params", apiId, callback);
+      } else {
+        this.fieldsData.inParams = deepClone(api.inParams) || [];
+        initParams(this.fieldsData.inParams);
+        this.fieldsData.outParams = deepClone(api.outParams) || [];
+        initParams(this.fieldsData.outParams);
+      }
     },
     formValidate() {
       return new Promise((resolve, reject) => {
@@ -550,9 +616,7 @@ export default {
           this.$refs.formRef.validate(valid => {
             resolve(valid);
           });
-        } else {
-          reject();
-        }
+        } else reject();
       });
     }
   }

package/packages/FormMaking/WidgetFormItem.vue

@@ -15,8 +15,8 @@
   >
     <component
       :is="compsData[widget.type].content"
-      :value.sync="widget.options.defaultValue"
       :widget="widget"
+      :model.sync="widget.options.defaultValue"
       :config="config"
       :select.sync="selectWidget"
       :widgetArray="widgetArray"

package/packages/FormMaking/WidgetTools.vue

@@ -165,7 +165,6 @@
         <generate-form
           v-if="dialog.show"
           :config="formData"
-          :value="formValue"
           :oauthConfig="oauthConfig"
           :remoteData="remoteData"
           :slotKeys="slotKeys"
@@ -189,7 +188,6 @@
             v-if="dialog.show"
             class="box"
             :config="formData"
-            :value="formValue"
             :oauthConfig="oauthConfig"
             :remote="remoteData"
             insite="true"
@@ -239,7 +237,6 @@ export default {
     basicComponents: Array,
     layoutComponents: Array,
     formData: Object,
-    formValue: Object,
     oauthConfig: Object,
     apiOptions: Array
   },
@@ -305,12 +302,7 @@ export default {
         let workbook = XLSX.read(data, { type: "binary" }); //解析二进制格式数据
         let worksheet = workbook.Sheets[workbook.SheetNames[0]]; //获取第一个Sheet
 
-        // console.log("XLSX.read => \n", workbook);
-        // console.log("sheet_to_json => \n", XLSX.utils.sheet_to_json(worksheet));
-        // console.log("sheet_to_csv => \n", XLSX.utils.sheet_to_csv(worksheet));
-        // console.log("sheet_to_txt => \n", XLSX.utils.sheet_to_txt(worksheet));
         const xlsxDom = this.parseDom(XLSX.utils.sheet_to_html(worksheet));
-        // console.log("sheet_to_html => \n", xlsxDom);
         const rowsDom = xlsxDom.getElementsByTagName("tr");
         let rowSpan = 0;
         for (let i = 0; i < rowsDom[0].childNodes.length; i++) {
@@ -321,7 +313,7 @@ export default {
 
         let config = {
           list: [],
-          config: this.baseConfig
+          config: this.baseConfig.config
         };
 
         for (const row of rowsDom) {
@@ -363,6 +355,11 @@ export default {
               data.options.defaultValue = valueDom.innerText;
               data.key = colKey;
               data.model = "input_" + colKey;
+              data.events = {
+                onChange: "",
+                onFocus: "",
+                onBlur: ""
+              };
               grid.options.columns.push({ span: span, list: [data] });
             } else {
               span = titleDom.colSpan * colSpan;
@@ -386,6 +383,7 @@ export default {
             config.list.push(data);
           }
         }
+
         this.handleClick("import-excel", config);
       }
     },
@@ -439,6 +437,7 @@ export default {
       this.$refs.generateForm.reset();
     },
     handleDialogOpen(action) {
+      this.handleNetworkConfig();
       let data = "";
       switch (action) {
         case "generateJson":
@@ -493,6 +492,32 @@ export default {
         default:
           break;
       }
+    },
+    handleNetworkConfig() {
+      const fieldsApi = {
+        fields: this.formData.config.fields.api,
+        mounted: this.formData.config.mounted.api
+      };
+      const initList = list => {
+        for (const item of list) {
+          if (item.type === "grid" || item.type === "tabs") {
+            item.options.columns.forEach(e => {
+              initList(e.list);
+            });
+          } else if (item.type === "table" || item.type === "tableH5") {
+            initList(item.options.columns);
+          } else if (item.options.remote) {
+            fieldsApi[item.model] = item.options.remoteFunc;
+          }
+        }
+      };
+      initList(this.formData.list);
+      const apis = Object.values(fieldsApi);
+      const network = {};
+      this.apiOptions.map(item => {
+        if (apis.includes(item.id)) network[item.id] = item;
+      });
+      this.formData.config.network = network;
     }
   }
 };

package/packages/FormMaking/custom/config.js

@@ -735,6 +735,7 @@ export const layoutComponents = [
           list: []
         }
       ],
+      isEntity: false,
       hideLabel: true
     },
     events: {},
@@ -803,8 +804,11 @@ export const templateComponents = [];
 export const baseConfig = {
   list: [],
   config: {
-    fieldsType: "fieldsApi",
-    fieldsApi: "",
+    fields: {
+      type: "api",
+      api: "",
+      remote: false
+    },
     ui: "element",
     title: "",
     width: "",

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

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

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

@@ -65,9 +65,9 @@
           clearable
         >
           <el-option
-            v-for="item in Object.values(apiConfig)"
+            v-for="item in apiOptions"
             :key="item.id"
-            :label="item.label"
+            :label="item.name"
             :value="item.id"
           >
           </el-option>

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

@@ -59,9 +59,9 @@
             clearable
           >
             <el-option
-              v-for="item in Object.values(apiConfig)"
+              v-for="item in apiOptions"
               :key="item.id"
-              :label="item.label"
+              :label="item.name"
               :value="item.id"
             >
             </el-option>

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

@@ -68,6 +68,18 @@
           <el-option value="bottom" label="底部对齐"></el-option>
         </el-select>
       </el-form-item>
+
+      <el-form-item>
+        <el-tooltip
+          slot="label"
+          effect="light"
+          content="用于包装数据结构，开启后对布局中的组件数据做对象处理"
+          placement="top"
+        >
+          <span style="color: #409EFF;">实体结构</span>
+        </el-tooltip>
+        <el-switch v-model="widget.options.isEntity"> </el-switch>
+      </el-form-item>
     </el-collapse-item>
   </div>
 </template>

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

@@ -0,0 +1,18 @@
+<template>
+  <div>
+     
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -47,9 +47,9 @@
             clearable
           >
             <el-option
-              v-for="item in Object.values(apiConfig)"
+              v-for="item in apiOptions"
               :key="item.id"
-              :label="item.label"
+              :label="item.name"
               :value="item.id"
             >
             </el-option>

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

@@ -44,9 +44,9 @@
             clearable
           >
             <el-option
-              v-for="item in Object.values(apiConfig)"
+              v-for="item in apiOptions"
               :key="item.id"
-              :label="item.label"
+              :label="item.name"
               :value="item.id"
             >
             </el-option>

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

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

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

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

package/packages/FormMaking/custom/items/alliance.vue

@@ -29,12 +29,12 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 import Draggable from "vuedraggable";
 import WidgetFormItem from "../../WidgetFormItem.vue";
 export default {
   components: { Draggable, WidgetFormItem },
-  mixins: [itemsComponent],
+  mixins: [itemsComponent, eventMixin],
   data() {
     return {
       selectWidget: {}

package/packages/FormMaking/custom/items/blank_dev.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 export default {
-  mixins: [itemsComponent]
+  mixins: [itemsComponent, eventMixin]
 };
 </script>
 

package/packages/FormMaking/custom/items/blank_pro.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 export default {
-  mixins: [itemsComponent]
+  mixins: [itemsComponent, eventMixin]
 };
 </script>
 

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

@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 import * as Axios from "lib/theme-chalk/js/axios";
 export default {
-  mixins: [itemsComponent],
+  mixins: [itemsComponent, eventMixin],
   data() {
     return {
       axios: null

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

@@ -24,9 +24,9 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 export default {
-  mixins: [itemsComponent]
+  mixins: [itemsComponent, eventMixin]
 };
 </script>
 

package/packages/FormMaking/custom/items/cell.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 export default {
-  mixins: [itemsComponent]
+  mixins: [itemsComponent, eventMixin]
 };
 </script>
 

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

@@ -47,9 +47,9 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 export default {
-  mixins: [itemsComponent]
+  mixins: [itemsComponent, eventMixin]
 };
 </script>
 

package/packages/FormMaking/custom/items/color.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script>
-import { itemsComponent } from "../mixins/index";
+import { itemsComponent, eventMixin } from "../mixins/index";
 export default {
-  mixins: [itemsComponent]
+  mixins: [itemsComponent, eventMixin]
 };
 </script>