tianheng-ui 0.1.24 → 0.1.27

package/package.json

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

package/packages/FormMaking/FormConfig.vue

@@ -5,30 +5,48 @@
       label-position="left"
       label-width="80px"
       size="small"
+      :rules="formRules"
+      ref="formRef"
     >
       <el-collapse v-model="collapseValue">
         <el-collapse-item title="表单配置" name="group-form">
-          <el-form-item label="字段类型" required>
+          <el-form-item prop="fieldsType" 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="fieldsTable">字段表</el-radio-button>
+              <el-radio-button label="fieldsApi">接口导入</el-radio-button>
             </el-radio-group>
           </el-form-item>
           <el-form-item
-            v-if="config.fieldsType === 'fieldsTable'"
-            label="字段表"
+            v-if="config.fieldsType === 'fieldsApi'"
+            prop="fieldsApi"
             required
           >
+            <el-tooltip
+              slot="label"
+              effect="dark"
+              content="使用接口的出参配置可选字段"
+              placement="top"
+            >
+              <span style="color: #409EFF;">字段接口</span>
+            </el-tooltip>
             <el-select
-              v-model="config.fieldsTable"
+              v-model="config.fieldsApi"
               style="width:100%"
               clearable
               placeholder="请选择"
               no-data-text="暂无接口，请前往【数据源模块】创建"
-              @change="handleFieldsTableChange"
+              @change="handleFieldsApiChange"
             >
               <el-option
-                v-for="item in fieldsOptions"
+                v-for="item in config.network"
                 :key="item.id"
                 :label="item.label"
                 :value="item.id"
@@ -36,7 +54,7 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="表单标题" required>
+          <el-form-item label="表单标题" prop="title" required>
             <el-input
               v-model="config.title"
               placeholder="请输入"
@@ -109,7 +127,7 @@
 
 <script>
 export default {
-  props: ["config", "fieldsOptions"],
+  props: ["config"],
   data() {
     return {
       collapseValue: [
@@ -117,16 +135,44 @@ export default {
         "group-resultData",
         "group-label",
         "group-attributes"
-      ]
+      ],
+      formRules: {
+        fieldsType: [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ],
+        fieldsApi: [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ],
+        title: [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ]
+      }
     };
   },
   methods: {
-    handleFieldsTableChange(val) {
-      const data = this.fieldsOptions.filter(item => {
+    handleFieldsApiChange(val) {
+      const dataArr = this.config.network.filter(item => {
         return item.id === val;
       });
-      if (data.length) this.$emit("fieldsTableChange", data[0].children);
-      else this.$emit("fieldsTableChange", []);
+      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", []);
+    },
+    formValidate() {
+      return new Promise((resolve, reject) => {
+        this.$refs.formRef.validate(valid => {
+          resolve(valid);
+        });
+      });
     }
   }
 };

package/packages/FormMaking/WidgetConfig.vue

@@ -14,7 +14,7 @@
             <el-tooltip
               slot="label"
               effect="dark"
-              content="【组件切换】会导致该组件配置信息重置，请谨慎使用！"
+              content="会导致该组件配置信息重置，请谨慎使用！"
               placement="top"
             >
               <span style="color: #409EFF;">组件切换</span>
@@ -38,10 +38,10 @@
             <el-tooltip
               slot="label"
               effect="dark"
-              content="【组件标识】是表单组件关联数据表字段的唯一键"
+              content="组件关联数据表中的唯一字段"
               placement="top"
             >
-              <span style="color: #409EFF;">组件标识</span>
+              <span style="color: #409EFF;">组件字段</span>
             </el-tooltip>
             <el-input
               v-if="config.fieldsType === 'custom'"
@@ -62,10 +62,15 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item
-            v-if="config.fieldsType === 'fieldsTable'"
-            label="字段标识"
-          >
+          <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>

package/packages/FormMaking/WidgetForm.vue

@@ -3,7 +3,7 @@
     <th-empty
       class="form-empty"
       v-if="data.list.length == 0"
-      :image="require('@/assets/images/notData.png')"
+      :image="require('../../lib/theme-chalk/images/notData.png')"
       description="从左侧拖拽来添加字段"
     ></th-empty>
     <el-form

package/packages/FormMaking/custom/config.js

@@ -772,8 +772,8 @@ export const layoutComponents = [
 export const templateComponents = [];
 
 export const baseConfig = {
-  fieldsType: "custom",
-  fieldsTable: "",
+  fieldsType: "fieldsApi",
+  fieldsApi: "",
   ui: "element",
   title: "",
   width: "",

package/packages/FormMaking/index.vue

@@ -158,8 +158,8 @@
                 <form-config
                   v-if="configTab == 'form'"
                   :config="formConfig.config"
-                  :fieldsOptions="fieldsOptions"
-                  @fieldsTableChange="handleFieldsTableChange"
+                  @fieldsChange="handleFieldsChange"
+                  ref="formConfigRef"
                 ></form-config>
               </el-main>
             </el-container>
@@ -253,7 +253,6 @@ export default {
       type: Array,
       default: () => ["grid", "filler", "divider"]
     },
-    fieldsOptions: Array,
     apiOptions: Array
   },
   data() {
@@ -386,14 +385,42 @@ export default {
     handleWidgetConfigUpdate(val) {
       this.widgetFormSelect = Object.assign(this.widgetFormSelect, val);
     },
-    handleFieldsTableChange(val) {
+    handleFieldsChange(val) {
       this.fields = val;
     },
     clear() {
       this.handleClear();
     },
-    getJSON() {
-      return this.formConfig;
+    getConfig() {
+      if (this.$refs.formConfigRef) {
+        return new Promise((resolve, reject) =>
+          this.$refs.formConfigRef.formValidate().then(res => {
+            if (res) {
+              const data = deepClone(this.formConfig);
+              resolve(data);
+            } else {
+              reject();
+            }
+          })
+        );
+      } else {
+        return new Promise((resolve, reject) => {
+          if (!this.formConfig.config.fieldsType) {
+            this.$message.warning("请选择字段类型");
+            return reject();
+          }
+          if (!this.formConfig.config.fieldsApi) {
+            this.$message.warning("请选择字段接口");
+            return reject();
+          }
+          if (!this.formConfig.config.title) {
+            this.$message.warning("请填写表单标题");
+            return reject();
+          }
+          const data = deepClone(this.formConfig);
+          resolve(data);
+        });
+      }
     },
     getHtml() {
       return generateCode(JSON.stringify(this.formConfig));

package/packages/TableMaking/WidgetTools.vue

@@ -9,14 +9,14 @@
         @click="handleClick('monitor')"
       >
       </el-button>
-      <!-- <el-button
-              :class="{ active: client === 'mobile' }"
-              type="text"
-              size="medium"
-              icon="el-icon-mobile"
-              @click="client = 'mobile'"
-            >
-            </el-button> -->
+      <el-button
+        :class="{ active: client === 'mobile' }"
+        type="text"
+        size="medium"
+        icon="el-icon-mobile"
+        @click="handleClick('mobile')"
+      >
+      </el-button>
     </div>
     <div class="right">
       <slot> </slot>

package/packages/TableMaking/custom/config.js

@@ -9,6 +9,7 @@ export const table = {
   mounted: {
     api: ""
   },
+  fieldsType: "fieldsApi",
   style: {
     cell: {
       customStyle: "",

package/packages/TableMaking/index.vue

@@ -10,6 +10,7 @@
         <slot name="action"></slot>
       </widget-tools>
       <widget-table
+        v-if="client === 'monitor'"
         style="height:calc(100% - 45px)"
         :config="tableConfig"
       ></widget-table>
@@ -17,7 +18,6 @@
     <div class="th-flex_aside th-is_border_left" style="width:300px">
       <widget-config
         :config="tableConfig"
-        :fieldsOptions="fieldsOptions"
         :formOptions="formOptions"
         :apiOptions="apiOptions"
         ref="configRef"
@@ -39,30 +39,10 @@ export default {
     config: {
       type: Object,
       default: () => {
-        return deepClone(baseConfig);
+        return {};
       }
     },
 
-     /**
-     * 字段表配置列表。
-     * [
-     *  {
-     *    id:'',    表单id
-     *    label:'',   表单名称
-     *    children:[
-     *      {
-              label: "主键",
-              alias: "id",
-              prop: "id",
-              type: "input",
-              align: "left"
-            }
-     *    ]
-     *  }
-     * ]
-     */
-    fieldsOptions: Array,
-
     /**
      * 表单配置列表。
      * 只关联表单id，渲染器通过接口查询表单配置信息
@@ -106,6 +86,7 @@ export default {
     }
   },
   data() {
+    this.baseConfig = deepClone(baseConfig);
     return {
       tableConfig: this.config,
       client: "monitor"
@@ -119,14 +100,16 @@ export default {
       }
     },
     config(val) {
-      this.tableConfig = val;
+      this.tableConfig = Object.assign(this.baseConfig, val);
       this.handleNetwork();
     },
     apiOptions(val) {
       this.handleNetwork();
     }
   },
-  mounted() {},
+  mounted() {
+    this.tableConfig = Object.assign(this.baseConfig, this.tableConfig);
+  },
   methods: {
     handleNetwork() {
       const network = {};
@@ -140,15 +123,19 @@ export default {
         case "import-json":
           this.tableConfig = data;
           break;
+        case "monitor":
+        case "mobile":
+          this.client = action;
+          break;
 
         default:
           break;
       }
     },
-    getJson() {
+    getConfig() {
       return new Promise((resolve, reject) =>
         this.$refs.configRef
-          .handleFormValidate()
+          .formValidate()
           .then(res => {
             if (res) {
               const data = deepClone(this.tableConfig);

package/packages/TableMaking/widgetConfig.vue

@@ -54,17 +54,40 @@
       >
         <el-collapse v-model="collapseValue">
           <el-collapse-item title="列表配置" name="group-table">
-            <el-form-item label="字段表" required prop="table.fieldsTable">
+            <el-form-item required prop="table.fieldsType">
+              <el-tooltip
+                slot="label"
+                effect="dark"
+                content="字段的配置方式"
+                placement="top"
+              >
+                <span style="color: #409EFF;">字段类型</span>
+              </el-tooltip>
+              <el-radio-group v-model="config.table.fieldsType">
+                <el-radio-button label="custom" disabled
+                  >自定义</el-radio-button
+                >
+                <el-radio-button label="fieldsApi">接口导入</el-radio-button>
+              </el-radio-group> </el-form-item
+            ><el-form-item required prop="table.mounted.api">
+              <el-tooltip
+                slot="label"
+                effect="dark"
+                content="列表初始化完成后，调用该接口获取列表数据"
+                placement="top"
+              >
+                <span style="color: #409EFF;">列表接口</span>
+              </el-tooltip>
               <el-select
-                v-model="config.table.fieldsTable"
+                v-model="config.table.mounted.api"
                 style="width:100%"
                 clearable
                 placeholder="请选择"
-                no-data-text="暂无接口，请前往【数据源模块】创建"
-                @change="handleFieldsTableChange"
+                no-data-text="暂无接口，请前往【接口模块】创建"
+                @change="handleFieldsApiChange"
               >
                 <el-option
-                  v-for="item in fieldsOptions"
+                  v-for="item in apiOptions"
                   :key="item.id"
                   :label="item.label"
                   :value="item.id"
@@ -78,29 +101,12 @@
                 placeholder="请输入"
               ></el-input>
             </el-form-item>
-            <el-form-item label="列表接口" required prop="table.mounted.api">
-              <el-select
-                v-model="config.table.mounted.api"
-                style="width:100%"
-                clearable
-                placeholder="请选择"
-                no-data-text="暂无接口，请前往【接口模块】创建"
-              >
-                <el-option
-                  v-for="item in apiOptions"
-                  :key="item.id"
-                  :label="item.label"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
+            <el-form-item label="列表序号">
+              <el-switch v-model="config.table.sequence"> </el-switch>
             </el-form-item>
             <el-form-item label="开启查询">
               <el-switch v-model="config.search.show"> </el-switch>
             </el-form-item>
-            <el-form-item label="列表序号">
-              <el-switch v-model="config.table.sequence"> </el-switch>
-            </el-form-item>
           </el-collapse-item>
           <el-collapse-item title="排序配置" name="group-sort">
             <el-form-item label="排序类型">
@@ -434,7 +440,6 @@ export default {
         return {};
       }
     },
-    fieldsOptions: Array,
     formOptions: Array,
     apiOptions: Array
   },
@@ -467,7 +472,10 @@ export default {
         "group-button"
       ],
       formRules: {
-        "table.fieldsTable": [
+        "table.fieldsType": [
+          { required: true, message: "请选择字段类型", trigger: "change" }
+        ],
+        "table.fieldsApi": [
           { required: true, message: "请选择字段表", trigger: "change" }
         ],
         "table.title": [
@@ -584,14 +592,24 @@ export default {
     handleActionConfig(data) {
       this.dialog = { show: true, data };
     },
-    handleFieldsTableChange(val) {
-      const data = this.fieldsOptions.filter(item => {
+    handleFieldsApiChange(val) {
+      const dataArr = this.apiOptions.filter(item => {
         return item.id === val;
       });
-      if (data.length) this.fields = data[0].children;
-      else this.fields = [];
+      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.fields = fields;
+      } else this.fields = [];
     },
-    handleFormValidate() {
+    formValidate() {
       return new Promise((resolve, reject) => {
         if (this.$refs.formRef) {
           this.$refs.formRef.validate(valid => {