tianheng-ui 0.1.23 → 0.1.25

package/package.json

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

package/packages/FormMaking/FormConfig.vue

@@ -8,6 +8,46 @@
     >
       <el-collapse v-model="collapseValue">
         <el-collapse-item title="表单配置" name="group-form">
+          <el-form-item required>
+            <el-tooltip
+              slot="label"
+              effect="dark"
+              content="字段的配置方式"
+              placement="top"
+            >
+              <span style="color: #409EFF;">字段类型</span>
+            </el-tooltip>
+            <el-radio-group v-model="config.fieldsType">
+              <el-radio-button label="custom">自定义</el-radio-button>
+              <el-radio-button label="fieldsApi">接口导入</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="config.fieldsType === 'fieldsApi'" required>
+            <el-tooltip
+              slot="label"
+              effect="dark"
+              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 config.network"
+                :key="item.id"
+                :label="item.label"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
           <el-form-item label="表单标题" required>
             <el-input
               v-model="config.title"
@@ -43,10 +83,10 @@
               no-data-text="暂无接口，请前往【接口模块】创建"
             >
               <el-option
-                v-for="item in config.remoteFuncs"
+                v-for="item in config.network"
                 :key="item.id"
                 :label="item.label"
-                :value="item"
+                :value="item.id"
               >
               </el-option>
             </el-select>
@@ -68,8 +108,8 @@
             </el-radio-group>
           </el-form-item>
         </el-collapse-item>
-        <el-collapse-item title="操作配置" name="group-action">
-          <el-form-item label="属性">
+        <el-collapse-item title="属性配置" name="group-attributes">
+          <el-form-item label-width="0">
             <el-checkbox v-model="config.disabled">禁用 </el-checkbox>
             <el-checkbox v-model="config.hideLabel">隐藏标签 </el-checkbox>
           </el-form-item>
@@ -88,9 +128,28 @@ export default {
         "group-form",
         "group-resultData",
         "group-label",
-        "group-action"
+        "group-attributes"
       ]
     };
+  },
+  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", []);
+    }
   }
 };
 </script>

package/packages/FormMaking/WidgetConfig.vue

@@ -1,40 +1,139 @@
 <template>
-  <div class="widgetConfig" v-if="show">
-    <div style="line-height: 30px;"></div>
-    <div class="flexView">
-      <div style="width:100px">类型切换</div>
-      <el-select
-        :value="data.type"
-        style="width:100%;"
-        size="small"
-        placeholder="请选择类型"
-        @change="handleTypeChange"
-      >
-        <el-option
-          v-for="item in Object.values(compsData)"
-          :key="item.type"
-          :label="item.name"
-          :value="item.type"
+  <div class="widget-config" v-if="show">
+    <el-form
+      :model="data"
+      label-position="left"
+      label-width="80px"
+      size="small"
+      :rules="formRules"
+      ref="formRef"
+    >
+      <el-collapse v-model="collapseValue">
+        <el-collapse-item title="通用配置" name="group-general">
+          <el-form-item>
+            <el-tooltip
+              slot="label"
+              effect="dark"
+              content="会导致该组件配置信息重置，请谨慎使用！"
+              placement="top"
+            >
+              <span style="color: #409EFF;">组件切换</span>
+            </el-tooltip>
+            <el-select
+              :value="data.type"
+              style="width:100%;"
+              placeholder="请选择类型"
+              @change="handleTypeChange"
+            >
+              <el-option
+                v-for="item in Object.values(compsData)"
+                :key="item.type"
+                :label="item.name"
+                :value="item.type"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item required>
+            <el-tooltip
+              slot="label"
+              effect="dark"
+              content="组件关联数据表中的唯一字段"
+              placement="top"
+            >
+              <span style="color: #409EFF;">组件字段</span>
+            </el-tooltip>
+            <el-input
+              v-if="config.fieldsType === 'custom'"
+              v-model="data.model"
+            ></el-input>
+            <el-select
+              v-else
+              v-model="data.model"
+              style="width:100%;"
+              placeholder="请选择字段"
+            >
+              <el-option
+                v-for="item in fields"
+                :key="item.prop"
+                :label="item.label"
+                :value="item.prop"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="config.fieldsType === 'fieldsApi'">
+            <el-tooltip
+              slot="label"
+              effect="dark"
+              content="表单提交时的入参名，对应数据表中的字段"
+              placement="top"
+            >
+              <span style="color: #409EFF;">字段标识</span>
+            </el-tooltip>
+            <el-input v-model="data.model" readonly></el-input>
+          </el-form-item>
+        </el-collapse-item>
+
+        <component
+          :widget="data"
+          :config="config"
+          :fields="fields"
+          :is="compsData[data.type].content"
+          @events-show="handleEventDialogShow"
+          @events-edit="handleEventsCollapseClick"
+        ></component>
+
+        <el-collapse-item
+          v-if="data.events && Object.keys(data.events).length"
+          name="group-action"
         >
-        </el-option>
-      </el-select>
-      <el-tooltip
-        style="padding-left:10px;color:#F56C6C;"
-        effect="dark"
-        content="切换类型会导致该组件配置信息重置，请谨慎使用！"
-        placement="top"
-      >
-        <i class="el-icon-warning"></i>
-      </el-tooltip>
-    </div>
+          <div slot="title" style="width:100%">
+            <span>动作设置</span>
+            <span
+              style="float: right;margin-right: 10px;"
+              @click.stop="handleEventsShow"
+              >配置</span
+            >
+          </div>
+          <el-form-item
+            v-for="event in Object.keys(data.events)"
+            :key="event"
+            :label="event"
+          >
+            <div class="eventsCollapse-item">
+              <el-select
+                v-model="data.events[event]"
+                placeholder="请选择"
+                clearable
+              >
+                <el-option
+                  v-for="item in config.eventScript"
+                  :key="item.id"
+                  :label="item.label"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <i
+                v-if="data.events[event]"
+                class="el-icon-edit"
+                @click="handleEventsEdit(data.events[event])"
+              ></i>
+            </div>
+          </el-form-item>
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
 
-    <component
+    <!-- <component
       :widget="data"
       :config="config"
+      :fields="fields"
       :is="compsData[data.type].content"
       @events-show="handleEventDialogShow"
       @events-edit="handleEventsCollapseClick"
-    ></component>
+    ></component> -->
 
     <th-dialog
       title="动作设置"
@@ -157,7 +256,8 @@ export default {
       default: () => {
         return {};
       }
-    }
+    },
+    fields: Array
   },
   data() {
     return {
@@ -205,7 +305,9 @@ export default {
           value: "goPage({path:'',query:{}})",
           score: 1
         }
-      ]
+      ],
+      collapseValue: ["group-general", "group-element", "group-action"],
+      formRules: {}
     };
   },
   // watch: {
@@ -380,9 +482,25 @@ export default {
 };
 </script>
 
+<style lang="scss">
+.widget-config {
+  .el-collapse-item__header {
+    padding: 0 10px;
+    height: 40px;
+    line-height: 40px;
+    background-color: #f5f7f9;
+  }
+  .el-collapse-item__wrap {
+    padding: 10px;
+  }
+  .el-radio-button__inner {
+    padding: 7px !important;
+  }
+}
+</style>
+
 <style lang="scss" scoped>
-.widgetConfig {
-  padding: 10px;
+.widget-config {
   .el-dialog__body {
     padding: 20px;
   }

package/packages/FormMaking/WidgetTools.vue

@@ -155,7 +155,7 @@
     >
       <generate-form
         v-if="dialog.preview.visible"
-        :data="formData"
+        :config="formData"
         :value="formValue"
         :oauthConfig="oauthConfig"
         :remote="remoteData"

package/packages/FormMaking/custom/config.js

@@ -132,7 +132,7 @@ export const basicComponents = [
         children: "children"
       },
       remote: false,
-      remoteFunc: {},
+      remoteFunc: "",
       remoteOptions: [],
       disabled: false,
       border: false, //边框
@@ -175,7 +175,7 @@ export const basicComponents = [
         children: "children"
       },
       remote: false,
-      remoteFunc: {},
+      remoteFunc: "",
       remoteOptions: [],
       disabled: false,
       border: false, //边框
@@ -280,7 +280,7 @@ export const basicComponents = [
         children: "children"
       },
       remote: false,
-      remoteFunc: {},
+      remoteFunc: "",
       remoteOptions: [],
       hidden: false,
       hideLabel: false
@@ -510,7 +510,7 @@ export const basicComponents = [
       min: 0,
       //isEdit: false,
       remote: false,
-      remoteFunc: {},
+      remoteFunc: "",
       action: "https://jsonplaceholder.typicode.com/posts/",
       disabled: false,
       required: false,
@@ -567,7 +567,7 @@ export const basicComponents = [
         checkStrictly: false //选择任意一级选项
       },
       remote: true,
-      remoteFunc: {},
+      remoteFunc: "",
       remoteOptions: [],
       hidden: false,
       hideLabel: false
@@ -667,7 +667,7 @@ export const advanceComponents = [
       isLabelWidth: false,
       hideLabel: true,
       remote: false,
-      remoteFunc: {},
+      remoteFunc: "",
       remoteOption: [],
       tableColumn: false
     },
@@ -772,6 +772,8 @@ export const layoutComponents = [
 export const templateComponents = [];
 
 export const baseConfig = {
+  fieldsType: "fieldsApi",
+  fieldsApi: "",
   ui: "element",
   title: "",
   width: "",
@@ -793,5 +795,6 @@ export const baseConfig = {
       label: "refresh",
       value: ""
     }
-  ]
+  ],
+  network: []
 };

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

@@ -1,10 +1,6 @@
 <template>
   <div class="configComponents">
-    <el-form label-position="top" size="small">
-      <el-form-item label="字段标识" required>
-        <el-input v-model="widget.model"></el-input>
-      </el-form-item>
-
+    <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name"></el-input>
       </el-form-item>
@@ -37,7 +33,7 @@
       <el-form-item label="校验">
         <el-checkbox v-model="widget.options.required">必填</el-checkbox>
       </el-form-item>
-    </el-form>
+    </el-collapse-item>
   </div>
 </template>
 

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

@@ -1,10 +1,6 @@
 <template>
   <div class="configComponents">
-    <el-form label-position="top" size="small">
-      <el-form-item label="字段标识" required>
-        <el-input v-model="widget.model"></el-input>
-      </el-form-item>
-
+    <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name" clearable></el-input>
       </el-form-item>
@@ -100,53 +96,15 @@
           no-data-text="暂无接口，请前往【接口模块】创建"
         >
           <el-option
-            v-for="item in config.remoteFuncs"
+            v-for="item in config.network"
             :key="item.id"
             :label="item.label"
-            :value="item"
+            :value="item.id"
           >
           </el-option>
         </el-select>
       </el-form-item>
-
-      <el-form-item>
-        <div class="config-header" slot="label">
-          <span class="title">动作设置</span>
-          <span class="value" @click="handleEventsShow">配置</span>
-        </div>
-
-        <el-collapse v-show="!widget.options.remote" class="eventsCollapse">
-          <el-collapse-item
-            v-for="event in Object.keys(widget.events)"
-            :key="event"
-            :title="event"
-            :name="event"
-          >
-            <div class="eventsCollapse-item">
-              <el-select
-                v-model="widget.events[event]"
-                placeholder="请选择"
-                size="mini"
-                clearable
-              >
-                <el-option
-                  v-for="item in config.eventScript"
-                  :key="item.id"
-                  :label="item.label"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-              <i
-                v-if="widget.events[event]"
-                class="el-icon-edit"
-                @click="handleEventsEdit(widget.events[event])"
-              ></i>
-            </div>
-          </el-collapse-item>
-        </el-collapse>
-      </el-form-item>
-    </el-form>
+    </el-collapse-item>
   </div>
 </template>
 

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

@@ -1,10 +1,6 @@
 <template>
   <div class="configComponents">
-    <el-form label-position="top" size="small">
-      <el-form-item label="字段标识" required>
-        <el-input v-model="widget.model"></el-input>
-      </el-form-item>
-
+    <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name"></el-input>
       </el-form-item>
@@ -69,10 +65,10 @@
           clearable
         >
           <el-option
-            v-for="item in config.remoteFuncs"
+            v-for="item in config.network"
             :key="item.id"
             :label="item.label"
-            :value="item"
+            :value="item.id"
           >
           </el-option>
         </el-select>
@@ -115,44 +111,7 @@
       <el-form-item label="校验">
         <el-checkbox v-model="widget.options.required">必填</el-checkbox>
       </el-form-item>
-
-      <el-form-item>
-        <div class="config-header" slot="label">
-          <span class="title">动作设置</span>
-          <span class="value" @click="handleEventsShow">配置</span>
-        </div>
-        <el-collapse class="eventsCollapse">
-          <el-collapse-item
-            v-for="event in Object.keys(widget.events)"
-            :key="event"
-            :title="event"
-            :name="event"
-          >
-            <div class="eventsCollapse-item">
-              <el-select
-                v-model="widget.events[event]"
-                placeholder="请选择"
-                size="mini"
-                clearable
-              >
-                <el-option
-                  v-for="item in config.eventScript"
-                  :key="item.id"
-                  :label="item.label"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-              <i
-                v-if="widget.events[event]"
-                class="el-icon-edit"
-                @click="handleEventsEdit(widget.events[event])"
-              ></i>
-            </div>
-          </el-collapse-item>
-        </el-collapse>
-      </el-form-item>
-    </el-form>
+    </el-collapse-item>
   </div>
 </template>
 

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

@@ -1,10 +1,6 @@
 <template>
   <div class="configComponents">
-    <el-form label-position="top" size="small">
-      <el-form-item label="字段标识" required>
-        <el-input v-model="widget.model"></el-input>
-      </el-form-item>
-
+    <el-collapse-item title="组件配置" name="group-element">
       <el-form-item label="标题">
         <el-input v-model="widget.name"></el-input>
       </el-form-item>
@@ -58,7 +54,7 @@
         <el-checkbox v-model="widget.options.hidden">隐藏组件</el-checkbox>
         <el-checkbox v-model="widget.options.hideLabel">隐藏标签</el-checkbox>
       </el-form-item>
-    </el-form>
+    </el-collapse-item>
   </div>
 </template>