tianheng-ui 0.0.92 → 0.0.93

package/package.json

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

package/packages/FormMaking/GenerateForm.vue

@@ -59,12 +59,19 @@
 </template>
 
 <script>
+import * as Axios from "lib/theme-chalk/js/axios";
 import GenetateFormItem from "./GenerateFormItem";
 
 export default {
   name: "thFormGenerate",
   components: { GenetateFormItem },
   props: {
+    oauthConfig: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
     data: {
       type: Object,
       default: () => {
@@ -95,7 +102,8 @@ export default {
     return {
       formJson: this.data,
       models: {},
-      componentsData: []
+      componentsData: [],
+      axios: null
     };
   },
   computed: {
@@ -124,6 +132,7 @@ export default {
     }
   },
   created() {
+    this.axios = Axios.init(this.oauthConfig);
     this.generateModle(this.formJson.list);
   },
   mounted() {},
@@ -208,6 +217,28 @@ export default {
           rule.pattern = new RegExp(rule.pattern);
         }
       });
+      this.hendleRemoteData(item);
+    },
+    hendleRemoteData(item) {
+      if (!item.options.remote) return;
+      if (item.type === "upload" || item.type === "button") return;
+
+      const remoteFunc = item.options.remoteFunc;
+      this.axios({
+        url: remoteFunc.api,
+        method: remoteFunc.method,
+        headers: remoteFunc.headers,
+        data: { ...remoteFunc.params }
+      }).then(res => {
+        const resultData = res.data.records;
+        item.options.remoteOptions = resultData.map(element => {
+          return {
+            value: element[item.options.props.value || "value"],
+            label: element[item.options.props.label || "label"],
+            children: element[item.options.props.children || "children"]
+          };
+        });
+      });
     },
     getData() {
       return new Promise((resolve, reject) => {

package/packages/FormMaking/GenerateFormItem.vue

@@ -383,21 +383,25 @@
     <template v-if="widget.type == 'upload'">
       <el-upload
         class="upload-demo"
-        :action="widget.options.remoteFunc"
-        :on-preview="
-          file => handlePictureCardPreview(file, widget.options.listType)
+        :action="uploadUrl"
+        :headers="
+          widget.options.remote ? widget.options.remoteFunc.headers : {}
         "
-        :on-remove="handleRemove"
+        :data="widget.options.remote ? widget.options.remoteFunc.params : {}"
         :multiple="widget.options.multiple"
         :limit="widget.options.length"
         :width="widget.options.size.width"
         :height="widget.options.size.height"
         :list-type="widget.options.listType"
-        :on-change="handleAvatar"
-        :on-error="handleAvatarError"
         :drag="widget.options.drag"
         :disabled="widget.options.disabled"
-        :auto-upload="false"
+        :auto-upload="true"
+        :on-change="handleAvatar"
+        :on-error="handleAvatarError"
+        :on-preview="
+          file => handlePictureCardPreview(file, widget.options.listType)
+        "
+        :on-remove="handleRemove"
       >
         <el-button
           size="small"
@@ -725,28 +729,20 @@ export default {
         return `${this.widget.options.labelWidth}px`;
 
       return "";
+    },
+    uploadUrl() {
+      if (this.widget.options.remote) {
+        const info = sessionStorage.getItem("th_oauth_info");
+        let baseUrl = "";
+        if (info) baseUrl = JSON.parse(info).baseUrl;
+
+        return `${baseUrl}/${this.widget.options.remoteFunc.api}`;
+      } else {
+        return this.widget.options.action;
+      }
     }
   },
-  created() {
-    if (this.widget.options.remote) {
-      const remoteData = this.remote[this.widget.model] || [];
-      this.widget.options.remoteOptions = remoteData.map(item => {
-        return {
-          value: item[this.widget.options.props.value],
-          label: item[this.widget.options.props.label],
-          children: item[this.widget.options.props.children]
-        };
-      });
-    }
-
-    if (
-      this.widget.type === "upload" &&
-      this.remote[this.widget.options.remoteFunc]
-    ) {
-      const remoteData = this.remote[this.widget.options.remoteFunc] || {};
-      this.widget.options.remoteApi = remoteData;
-    }
-  },
+  created() {},
   mounted() {
     this.$nextTick(() => {
       this.componentsData[this.widget.model] = this.widget;

package/packages/FormMaking/custom/config.js

@@ -123,13 +123,14 @@ export const basicComponents = [
         }
       ],
       required: false,
-      remote: false,
-      remoteOptions: [],
       props: {
-        value: "value",
-        label: "label"
+        value: "id",
+        label: "name",
+        children: "children"
       },
-      remoteFunc: "",
+      remote: false,
+      remoteFunc: {},
+      remoteOptions: [],
       disabled: false,
       border: false, //边框
       buttonType: false //替换成按钮
@@ -161,13 +162,14 @@ export const basicComponents = [
         }
       ],
       required: false,
-      remote: false,
-      remoteOptions: [],
       props: {
-        value: "value",
-        label: "label"
+        value: "id",
+        label: "name",
+        children: "children"
       },
-      remoteFunc: "",
+      remote: false,
+      remoteFunc: {},
+      remoteOptions: [],
       disabled: false,
       border: false, //边框
       buttonType: false, //替换成按钮
@@ -265,14 +267,15 @@ export const basicComponents = [
           value: "Option 3"
         }
       ],
-      remote: false,
       filterable: false,
-      remoteOptions: [],
       props: {
-        value: "value",
-        label: "label"
+        value: "id",
+        label: "name",
+        children: "children"
       },
-      remoteFunc: "",
+      remote: false,
+      remoteFunc: {},
+      remoteOptions: [],
       hidden: false,
       hideLabel: false
     },
@@ -352,9 +355,8 @@ export const basicComponents = [
       buttonCircle: false,
       buttonIcon: "",
       textAlign: "center",
-      remoteFunc: "",
-      remoteOption: "",
       tableColumn: false,
+      remote: false,
       disabled: false,
       loading: false,
       hidden: false,
@@ -506,9 +508,9 @@ export const basicComponents = [
       //isDelete: false,
       min: 0,
       //isEdit: false,
-      remoteFunc: "https://jsonplaceholder.typicode.com/posts/",
+      remote: false,
+      remoteFunc: {},
       action: "https://jsonplaceholder.typicode.com/posts/",
-      remoteApi: {},
       disabled: false,
       required: false,
       multiple: false,
@@ -546,22 +548,22 @@ export const basicComponents = [
       disabled: false,
       clearable: false,
       required: false,
-      remote: true,
       showAllLevels: false, //只显示最后一级
       collapseTags: false,
       filterable: false, //搜索
       prepend: "",
       append: "",
-      remoteOptions: [],
       props: {
-        value: "value",
-        label: "label",
+        value: "id",
+        label: "name",
         children: "children",
         multiple: false,
         expandTrigger: "hover",
         checkStrictly: false //选择任意一级选项
       },
-      remoteFunc: "",
+      remote: true,
+      remoteFunc: {},
+      remoteOptions: [],
       hidden: false,
       hideLabel: false
     },
@@ -587,8 +589,6 @@ export const advanceComponents = [
       validator: "",
       paging: false,
       pageSize: 5,
-      remoteFunc: "",
-      remoteOption: "",
       tableColumn: false,
       hidden: false,
       hideLabel: false,
@@ -618,8 +618,6 @@ export const advanceComponents = [
       validator: "",
       paging: false,
       pageSize: 5,
-      remoteFunc: "",
-      remoteOption: "",
       tableColumn: false,
       hidden: false,
       hideLabel: false,
@@ -659,8 +657,8 @@ export const advanceComponents = [
       isLabelWidth: false,
       hideLabel: true,
       remote: false,
-      remoteFunc: "",
-      remoteOption: "",
+      remoteFunc: {},
+      remoteOption: [],
       tableColumn: false
     },
     rules: []
@@ -732,8 +730,6 @@ export const layoutComponents = [
       isLabelWidth: false,
       hideLabel: true,
       contentPosition: "left",
-      remoteFunc: "",
-      remoteOption: "",
       tableColumn: false
     },
     rules: []

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

@@ -87,7 +87,35 @@
           <span class="title">动作设置</span>
           <span class="value" @click="handleEventsShow">配置</span>
         </div>
-        <el-collapse class="eventsCollapse">
+
+        <el-radio-group
+          style="margin-bottom:10px;"
+          v-model="widget.options.remote"
+          size="mini"
+        >
+          <el-radio-button :label="false">自定义事件</el-radio-button>
+          <el-radio-button :label="true">绑定接口</el-radio-button>
+        </el-radio-group>
+
+        <div v-show="widget.options.remote">
+          <el-select
+            style="width:100%"
+            v-model="widget.options.remoteFunc"
+            value-key="api"
+            placeholder="请选择远端方法"
+            clearable
+          >
+            <el-option
+              v-for="item in remoteApis"
+              :key="item.api"
+              :label="item.name"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+
+        <el-collapse v-show="!widget.options.remote" class="eventsCollapse">
           <el-collapse-item
             v-for="event in Object.keys(widget.events)"
             :key="event"

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

@@ -64,34 +64,27 @@
         <el-select
           style="width:100%"
           v-model="widget.options.remoteFunc"
+          value-key="api"
           placeholder="请选择远端方法"
+          clearable
         >
-          <el-option-group
-            v-for="group in remoteApis"
-            :key="group.label"
-            :label="group.label"
+          <el-option
+            v-for="item in remoteApis"
+            :key="item.api"
+            :label="item.name"
+            :value="item"
           >
-            <el-option
-              v-for="item in group.options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-option-group>
+          </el-option>
         </el-select>
+
         <el-input v-model="widget.options.props.value">
-          <template slot="prepend"> <div style="width:50px">值</div></template>
+          <div slot="prepend" style="width:50px;">值</div>
         </el-input>
         <el-input v-model="widget.options.props.label">
-          <template slot="prepend">
-            <div style="width:50px">标签</div></template
-          >
+          <div slot="prepend" style="width:50px;">标签</div>
         </el-input>
         <el-input v-model="widget.options.props.children">
-          <template slot="prepend">
-            <div style="width:50px">子选项</div></template
-          >
+          <div slot="prepend" style="width:50px">子选项</div>
         </el-input>
       </el-form-item>
 

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

@@ -60,39 +60,36 @@
             <el-radio-button :label="true">远端数据</el-radio-button>
           </el-radio-group>
 
-          <span>显示标签</span>
-          <el-switch v-model="widget.options.showLabel"> </el-switch>
+          <div v-if="!widget.options.remote">
+            <span>显示标签</span>
+            <el-switch v-model="widget.options.showLabel"> </el-switch>
+          </div>
         </div>
         <template v-if="widget.options.remote">
           <el-select
-            style="width:100%;"
+            style="width:100%"
             v-model="widget.options.remoteFunc"
+            value-key="api"
             placeholder="请选择远端方法"
+            clearable
           >
-            <el-option-group
-              v-for="group in remoteApis"
-              :key="group.label"
-              :label="group.label"
+            <el-option
+              v-for="item in remoteApis"
+              :key="item.api"
+              :label="item.name"
+              :value="item"
             >
-              <el-option
-                v-for="item in group.options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-option-group>
+            </el-option>
           </el-select>
 
           <el-input v-model="widget.options.props.value">
-            <template slot="prepend">
-              <div style="width:30px;">值</div>
-            </template>
+            <div slot="prepend" style="width:50px;">值</div>
           </el-input>
           <el-input v-model="widget.options.props.label">
-            <template slot="prepend">
-              <div style="width:30px;">标签</div>
-            </template>
+            <div slot="prepend" style="width:50px;">标签</div>
+          </el-input>
+          <el-input v-model="widget.options.props.children">
+            <div slot="prepend" style="width:50px">子选项</div>
           </el-input>
         </template>
         <template v-else>

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

@@ -44,41 +44,37 @@
             <el-radio-button :label="true">远端数据</el-radio-button>
           </el-radio-group>
 
-          <span>显示标签</span>
-          <el-switch v-model="widget.options.showLabel"> </el-switch>
+          <div v-if="!widget.options.remote">
+            <span>显示标签</span>
+            <el-switch v-model="widget.options.showLabel"> </el-switch>
+          </div>
         </div>
 
         <template v-if="widget.options.remote">
           <el-select
-            style="width:100%;"
+            style="width:100%"
             v-model="widget.options.remoteFunc"
+            value-key="api"
             placeholder="请选择远端方法"
             clearable
           >
-            <el-option-group
-              v-for="group in remoteApis"
-              :key="group.label"
-              :label="group.label"
+            <el-option
+              v-for="item in remoteApis"
+              :key="item.api"
+              :label="item.name"
+              :value="item"
             >
-              <el-option
-                v-for="item in group.options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-option-group>
+            </el-option>
           </el-select>
 
-          <el-input style="" v-model="widget.options.props.value">
-            <template slot="prepend">
-              <div style="width:30px;">值</div>
-            </template>
+          <el-input v-model="widget.options.props.value">
+            <div slot="prepend" style="width:50px;">值</div>
+          </el-input>
+          <el-input v-model="widget.options.props.label">
+            <div slot="prepend" style="width:50px;">标签</div>
           </el-input>
-          <el-input style="" v-model="widget.options.props.label">
-            <template slot="prepend">
-              <div style="width:30px;">标签</div>
-            </template>
+          <el-input v-model="widget.options.props.children">
+            <div slot="prepend" style="width:50px">子选项</div>
           </el-input>
         </template>
         <template v-else>

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

@@ -41,44 +41,36 @@
             <el-radio-button :label="true">远端数据</el-radio-button>
           </el-radio-group>
 
-          <span>显示标签</span>
-          <el-switch v-model="widget.options.showLabel"> </el-switch>
+          <div v-if="!widget.options.remote">
+            <span>显示标签</span>
+            <el-switch v-model="widget.options.showLabel"> </el-switch>
+          </div>
         </div>
         <template v-if="widget.options.remote">
           <el-select
             style="width:100%"
             v-model="widget.options.remoteFunc"
+            value-key="api"
             placeholder="请选择远端方法"
+            clearable
           >
-            <el-option-group
-              v-for="group in remoteApis"
-              :key="group.label"
-              :label="group.label"
+            <el-option
+              v-for="item in remoteApis"
+              :key="item.api"
+              :label="item.name"
+              :value="item"
             >
-              <el-option
-                v-for="item in group.options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
-            </el-option-group>
+            </el-option>
           </el-select>
-          <!-- <el-input
-            v-model="widget.options.remoteFunc"
-            placeholder="请输入远端方法"
-          >
-          </el-input> -->
 
           <el-input v-model="widget.options.props.value">
-            <template slot="prepend">
-              <div style="width:30px;">值</div>
-            </template>
+            <div slot="prepend" style="width:50px;">值</div>
           </el-input>
           <el-input v-model="widget.options.props.label">
-            <template slot="prepend">
-              <div style="width:30px;">标签</div>
-            </template>
+            <div slot="prepend" style="width:50px;">标签</div>
+          </el-input>
+          <el-input v-model="widget.options.props.children">
+            <div slot="prepend" style="width:50px">子选项</div>
           </el-input>
         </template>
         <template v-else>

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

@@ -65,7 +65,27 @@
       </el-form-item>
 
       <el-form-item label="上传地址" :required="true">
+        <el-radio-group v-model="widget.options.remote" size="mini">
+          <el-radio-button :label="false">静态接口</el-radio-button>
+          <el-radio-button :label="true">远端接口</el-radio-button>
+        </el-radio-group>
+        <el-select
+          v-if="widget.options.remote"
+          style="width:100%"
+          v-model="widget.options.remoteFunc"
+          value-key="api"
+          placeholder="请选择远端方法"
+        >
+          <el-option
+            v-for="item in remoteApis"
+            :key="item.api"
+            :label="item.name"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
         <el-input
+          v-else
           v-model.number="widget.options.action"
           placeholder="请输入上传地址"
         ></el-input>

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

@@ -1,19 +1,22 @@
 <template>
   <div>
     <el-upload
-      :action="widget.options.action"
-      :on-preview="
-        file => handlePictureCardPreview(file, widget.options.listType)
-      "
-      :on-remove="handleRemove"
+      :action="uploadUrl"
+      :headers="widget.options.remote ? widget.options.remoteFunc.headers : {}"
+      :data="widget.options.remote ? widget.options.remoteFunc.params : {}"
       :multiple="widget.options.multiple"
       :limit="widget.options.length"
       :list-type="widget.options.listType"
       :file-list="widget.options.defaultValue"
       :drag="widget.options.drag"
+      :disabled="widget.options.disabled"
       :on-change="handleAvatar"
+      :on-success="handleSuccess"
       :on-error="handleAvatarError"
-      :disabled="widget.options.disabled"
+      :on-preview="
+        file => handlePictureCardPreview(file, widget.options.listType)
+      "
+      :on-remove="handleRemove"
     >
       <el-button
         v-if="
@@ -60,7 +63,23 @@ export default {
       dialogImageUrl: ""
     };
   },
+  computed: {
+    uploadUrl() {
+      if (this.widget.options.remote) {
+        const info = sessionStorage.getItem("th_oauth_info");
+        let baseUrl = "";
+        if (info) baseUrl = JSON.parse(info).baseUrl;
+
+        return `${baseUrl}${this.widget.options.remoteFunc.api}`;
+      } else {
+        return this.widget.options.action;
+      }
+    }
+  },
   methods: {
+    handleSuccess(res) {
+      console.log("handleSuccess =>", res);
+    },
     handlePictureCardPreview(file, listType) {
       if (listType === "picture-card") {
         this.dialogImageUrl = file.url;