页面地区

ruoyi-ui/src/components/DynamicForm/index.vue

@@ -1,7 +1,7 @@
-<template>
-    <el-form-item :label="formConfig.columnComment" :label-width="converByte(formConfig.columnComment)*7+'px'" style="display: inline-block;" :prop="formConfig.columnName">
+<template>
+    <el-form-item :label="formConfig.columnComment" style="display: inline-block;" :prop="formConfig.columnName">
       <!-- 输入框 -->
-      <el-input v-if="formConfig.htmlType == 'input'" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
+      <el-input v-if="formConfig.htmlType == 'input'" v-model="config[formConfig.columnValue]" :placeholder="'请输入'+formConfig.columnComment"
         clearable @keyup.enter.native="handleQuery" />
       <!-- 多行输入框 -->
       <el-input v-if="formConfig.htmlType == 'textarea'" type="textarea" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
@@ -11,10 +11,10 @@
         <el-option v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue">
         </el-option>
       </el-select>
-      <!-- 复选框 -->
+      <!-- 复选框 -->
       <el-checkbox-group v-model="config" v-if="formConfig.htmlType == 'checkbox'">
-        <el-checkbox @change="handleCheckedCitiesChange" v-for="itemChild in formConfig.sysDictData" :label="itemChild.dictValue" :key="itemChild.dictLabel" >
-          {{itemChild.dictLabel}}
+        <el-checkbox @change="handleCheckedCitiesChange" v-for="itemChild in formConfig.sysDictData" :label="itemChild.dictValue" :key="itemChild.dictLabel" >
+          {{itemChild.dictLabel}}
         </el-checkbox>
       </el-checkbox-group>
       <!-- 单选框 -->
@@ -22,7 +22,7 @@
         <el-radio v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictValue">{{itemChild.dictLabel}}</el-radio>
       </el-radio-group>
       <!-- 时间控件 -->
-      <el-date-picker v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'datetime'" type="date" :placeholder="'请输入'+formConfig.columnComment">
+      <el-date-picker  v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'datetime'" type="date" :placeholder="'请输入'+formConfig.columnComment">
       </el-date-picker>
       <!-- 上传图片 -->
       <el-upload v-if="formConfig.htmlType == 'imageUpload'" :headers="{Authorization: 'Bearer ' + getToken()}" :action="process + '/boman-file/upload'" :file-list="config" list-type="picture-card"
@@ -33,117 +33,100 @@
         <img width="100%" :src="dialogImageUrl" alt="">
       </el-dialog>
       <!-- 上传文件 -->
-      <el-upload
-        class="upload-demo"
-        :headers="{Authorization: 'Bearer ' + getToken()}"
-        v-if="formConfig.htmlType == 'fileUpload'"
-        :action="process + '/boman-file/upload'"
-        :on-change="handleChange"
-        :on-success="upImageFn"
-         :on-remove="reseImage"
-        :file-list="config">
-        <el-button size="small" type="primary">点击上传</el-button>
-        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-      </el-upload>
-      <!-- 富文本 -->
+      <el-upload
+        class="upload-demo"
+        :headers="{Authorization: 'Bearer ' + getToken()}"
+        v-if="formConfig.htmlType == 'fileUpload'"
+        :action="process + '/boman-file/upload'"
+        :on-change="handleChange"
+        :on-success="upImageFn"
+         :on-remove="reseImage"
+        :file-list="config">
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      </el-upload>
+      <!-- 富文本 -->
       <editor v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'editor'" :min-height="192"/>
-    </el-form-item>
+    </el-form-item>
 </template>
 
 <script>
-  const defaultSettings = require('@/settings.js')
-  import Editor from '@/components/Editor';
-  import { getToken } from "@/utils/auth";
+  const defaultSettings = require('@/settings.js')
+  import Editor from '@/components/Editor';
+  import { getToken } from "@/utils/auth";
   export default {
     data() {
-      return {
+      return {
         fileList: [],
         defaultSettings,
-        dialogImageUrl: '',
+        dialogImageUrl: '',
         process: process.env.VUE_APP_BASE_API,
         dialogVisible: false,
-        disabled: false,
-        config: {},
+        disabled: false,
+        config: {},
       }
-    },
-    components: {
-      Editor
+    },
+    components: {
+      Editor
     },
     props: {
       formConfig: {
         type: Object,
-        required: true,
-        'default': {
-          sysDictData: []
+        required: true,
+        'default': {
+          sysDictData: []
         }
       },
-    },
-    created() {
-      this.init()
+    },
+    created() {
+      this.config = {}
+      this.init()
     },
     mounted() {
     },
-    methods: {
-      // 字符串转成字节
-      converByte(str){
-        var bt=0;
-            for (var i = 0; i < str.length; i++) {
-                var un = str.charCodeAt(i);
-                if (un>=0 && un<=127) {
-                    bt+=1;
-                }else if (un>127 && un<=2048) {
-                    bt+=2;
-                }else if (un>2048 && un<=65536) {
-                    bt+=3;
-                }else if (un>65536 && un<=2097152) {
-                    bt+=4;
-                }
-            }
-            return bt
-      },
+    methods: {
       upImageFn(res, file){
-        this.config.push({
-          name: res.data.name,
-          url: res.data.url,
-        });
-      },
-      init() {
+        this.config.push(res.data);
+      },
+      init() {
         if(this.formConfig.htmlType == 'checkbox' || this.formConfig.htmlType == 'imageUpload' || this.formConfig.htmlType == 'fileUpload'){
-          this.config = []
-        }
-        console.log(this.config,99888)
-      },
-      handleChange(file, fileList) {
-        this.fileList = fileList.slice(-3);
-      },
-      getToken() {
-        return getToken()
-      },
-      reseImage(file, fileList) {
-        let urls = ""
-        if(file.response){
-          urls = file.response.url
+          this.config =  []
         }else{
-          urls = file.url
-        }
-        for (let i = this.config.length - 1; i >= 0; i--) {
-          if (this.config[i].url == urls) {
-            this.config.splice(i, 1);
-          }
-        }
-      },
-      reseImage1(file, fileList) {
-        let urls = ""
-        if(file.response){
-          urls = file.response.url
-        }else{
-          urls = file.url
-        }
-        for (let i = this.config.length - 1; i >= 0; i--) {
-          if (this.config[i].url == urls) {
-            this.config.splice(i, 1);
-          }
+          this.config[this.formConfig.columnName] = this.formConfig.columnValue || ''
         }
+        console.log(this.formConfig,this.config,9911112)
+      },
+      handleChange(file, fileList) {
+        this.fileList = fileList.slice(-3);
+      },
+      getToken() {
+        return getToken()
+      },
+      reseImage(file, fileList) {
+        let urls = ""
+        if(file.response){
+          urls = file.response.url
+        }else{
+          urls = file.url
+        }
+        for (let i = this.config.length - 1; i >= 0; i--) {
+          if (this.config[i].url == urls) {
+            this.config.splice(i, 1);
+          }
+        }
+      },
+      reseImage1(file, fileList) {
+        let urls = ""
+        if(file.response){
+          urls = file.response.url
+        }else{
+          urls = file.url
+        }
+        for (let i = this.config.length - 1; i >= 0; i--) {
+          if (this.config[i].url == urls) {
+            this.config.splice(i, 1);
+          }
+        }
       },
       handlePictureCardPreview(file) {
         this.dialogImageUrl = file.url;
@@ -154,13 +137,13 @@
       },
       handleQuery() {
         this.$emit('btns')
-      },
-      handleCheckedCitiesChange(value){
-        console.log(this.config)
+      },
+      handleCheckedCitiesChange(value){
+        console.log(this.config)
       }
     }
   }
 </script>
 
 <style>
-</style>
+</style>

ruoyi-ui/src/components/DynamicForms/index.vue

@@ -86,16 +86,15 @@
     },
     methods: {
       upImageFn(res, file){
-        this.config.push({
-          name: res.data.name,
-          url: res.data.url,
-        });
+        this.config.push(res.data);
       },
       init() {
         if(this.formConfig.htmlType == 'checkbox' || this.formConfig.htmlType == 'imageUpload' || this.formConfig.htmlType == 'fileUpload'){
-          this.config = []
+          this.config =  []
+        }else{
+          this.config[this.formConfig.columnName] = this.formConfig.columnValue || ''
         }
-        console.log(this.config,99888)
+        console.log(this.formConfig,this.config,9911112)
       },
       handleChange(file, fileList) {
         this.fileList = fileList.slice(-3);
@@ -137,7 +136,6 @@
         console.log(file);
       },
       handleQuery() {
-        
         this.$emit('btns')
       },
       handleCheckedCitiesChange(value){