tianheng-ui 0.1.22 → 0.1.24

package/package.json

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

package/packages/FormMaking/FormConfig.vue

@@ -1,60 +1,150 @@
 <template>
-  <div class="form-config-container">
-    <el-form label-position="top">
-      <el-form-item label="UI">
-        <el-radio-group v-model="data.ui">
-          <el-radio-button label="element">Element</el-radio-button>
-          <el-radio-button label="vant" disabled>Vant</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
+  <div class="form-config">
+    <el-form
+      :model="config"
+      label-position="left"
+      label-width="80px"
+      size="small"
+    >
+      <el-collapse v-model="collapseValue">
+        <el-collapse-item title="表单配置" name="group-form">
+          <el-form-item label="字段类型" required>
+            <el-radio-group v-model="config.fieldsType">
+              <el-radio-button label="custom">自定义</el-radio-button>
+              <el-radio-button label="fieldsTable">字段表</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item
+            v-if="config.fieldsType === 'fieldsTable'"
+            label="字段表"
+            required
+          >
+            <el-select
+              v-model="config.fieldsTable"
+              style="width:100%"
+              clearable
+              placeholder="请选择"
+              no-data-text="暂无接口，请前往【数据源模块】创建"
+              @change="handleFieldsTableChange"
+            >
+              <el-option
+                v-for="item in fieldsOptions"
+                :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"
+              placeholder="请输入"
+              clearable
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="表单宽度">
+            <el-input v-model="config.width"></el-input>
+          </el-form-item>
+          <el-form-item label="组件库">
+            <el-radio-group v-model="config.ui">
+              <el-radio-button label="element">Element</el-radio-button>
+              <el-radio-button label="vant" disabled>Vant</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="组件尺寸">
+            <el-radio-group v-model="config.size">
+              <el-radio-button label="medium">medium</el-radio-button>
+              <el-radio-button label="small">small</el-radio-button>
+              <el-radio-button label="mini">mini</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-collapse-item>
 
-      <el-form-item label="表单标题" required>
-        <el-input
-          v-model="data.title"
-          placeholder="请输入"
-          clearable
-        ></el-input>
-      </el-form-item>
-
-      <el-form-item label="表单宽度">
-        <el-input v-model="data.width"></el-input>
-      </el-form-item>
-
-      <el-form-item label="表单标签宽度">
-        <el-input-number
-          v-model="data.labelWidth"
-          :min="0"
-          :max="200"
-          :step="10"
-        ></el-input-number>
-      </el-form-item>
-
-      <el-form-item label="标签对齐方式">
-        <el-radio-group v-model="data.labelPosition">
-          <el-radio-button label="left">左对齐</el-radio-button>
-          <el-radio-button label="right">右对齐</el-radio-button>
-          <el-radio-button label="top">顶部对齐</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item label="组件尺寸">
-        <el-radio-group v-model="data.size">
-          <el-radio-button label="medium">medium</el-radio-button>
-          <el-radio-button label="small">small</el-radio-button>
-          <el-radio-button label="mini">mini</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item label="操作属性">
-        <el-checkbox v-model="data.disabled">禁用 </el-checkbox>
-        <el-checkbox v-model="data.hideLabel">隐藏标签 </el-checkbox>
-      </el-form-item>
+        <el-collapse-item title="数据配置" name="group-resultData">
+          <el-form-item label="表单回填">
+            <el-select
+              v-model="config.mounted.api"
+              value-key="id"
+              clearable
+              placeholder="请选择数据方法"
+              no-data-text="暂无接口，请前往【接口模块】创建"
+            >
+              <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-collapse-item>
+        <el-collapse-item title="标签配置" name="group-label">
+          <el-form-item label="标签宽度">
+            <el-input-number
+              v-model="config.labelWidth"
+              :min="0"
+              :step="5"
+            ></el-input-number>
+          </el-form-item>
+          <el-form-item label="对齐方式">
+            <el-radio-group v-model="config.labelPosition">
+              <el-radio-button label="left">左对齐</el-radio-button>
+              <el-radio-button label="right">右对齐</el-radio-button>
+              <el-radio-button label="top">顶部对齐</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+        </el-collapse-item>
+        <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>
+        </el-collapse-item>
+      </el-collapse>
     </el-form>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["data"]
+  props: ["config", "fieldsOptions"],
+  data() {
+    return {
+      collapseValue: [
+        "group-form",
+        "group-resultData",
+        "group-label",
+        "group-attributes"
+      ]
+    };
+  },
+  methods: {
+    handleFieldsTableChange(val) {
+      const data = this.fieldsOptions.filter(item => {
+        return item.id === val;
+      });
+      if (data.length) this.$emit("fieldsTableChange", data[0].children);
+      else this.$emit("fieldsTableChange", []);
+    }
+  }
 };
 </script>
+
+<style lang="scss">
+.form-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>

package/packages/FormMaking/WidgetConfig.vue

@@ -1,40 +1,134 @@
 <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 === 'fieldsTable'"
+            label="字段标识"
+          >
+            <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 +251,8 @@ export default {
       default: () => {
         return {};
       }
-    }
+    },
+    fields: Array
   },
   data() {
     return {
@@ -205,7 +300,9 @@ export default {
           value: "goPage({path:'',query:{}})",
           score: 1
         }
-      ]
+      ],
+      collapseValue: ["group-general", "group-element", "group-action"],
+      formRules: {}
     };
   },
   // watch: {
@@ -380,8 +477,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 {
+.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, //边框
@@ -236,9 +236,9 @@ export const basicComponents = [
       clearable: true,
       placeholder: "",
       startPlaceholder: "",
-      startField:'',
+      startField: "",
       endPlaceholder: "",
-      endField:'',
+      endField: "",
       type: "date",
       format: "yyyy-MM-dd",
       timestamp: 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: "custom",
+  fieldsTable: "",
   ui: "element",
   title: "",
   width: "",
@@ -781,6 +783,7 @@ export const baseConfig = {
   size: "small",
   disabled: false,
   hideLabel: false,
+  mounted: { api: "" },
   eventScript: [
     {
       id: "mounted",
@@ -792,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>