|
@@ -1,73 +1,66 @@
|
|
|
-<template>
|
|
|
- <el-form class="dynamic-form" ref="dynamic-form" :model="config">
|
|
|
- <el-form-item :label="item.columnComment" v-for="item in formConfig" :prop="item.columnName">
|
|
|
+<template>
|
|
|
+ <el-form-item :label="formConfig.columnComment" style="display: inline-block;" :prop="formConfig.columnName">
|
|
|
<!-- 输入框 -->
|
|
|
- <el-input v-if="item.htmlType == 'input'" v-model="config[item.columnName]" :placeholder="'请输入'+item.columnComment"
|
|
|
+ <el-input v-if="formConfig.htmlType == 'input'" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
|
|
|
clearable @keyup.enter.native="handleQuery" />
|
|
|
<!-- 多行输入框 -->
|
|
|
- <el-input v-if="item.htmlType == 'textarea'" type="textarea" v-model="config[item.columnName]" :placeholder="'请输入'+item.columnComment"
|
|
|
+ <el-input v-if="formConfig.htmlType == 'textarea'" type="textarea" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
|
|
|
clearable @keyup.enter.native="handleQuery" />
|
|
|
<!-- 下拉框 -->
|
|
|
- <el-select v-model="config[item.columnName]" v-if="item.htmlType == 'select'" filterable :placeholder="'请输入'+item.columnComment">
|
|
|
- <el-option v-for="itemChild in item.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue">
|
|
|
+ <el-select v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'select'" filterable :placeholder="'请输入'+formConfig.columnComment">
|
|
|
+ <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[item.columnName]" v-if="item.htmlType == 'checkbox'">
|
|
|
- <el-checkbox v-for="itemChild in item.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel"
|
|
|
+ <!-- 复选框 -->
|
|
|
+ <el-checkbox-group v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'checkbox'">
|
|
|
+ <el-checkbox v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel"
|
|
|
:value="itemChild.dictValue"></el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
<!-- 单选框 -->
|
|
|
- <el-radio-group v-model="config[item.columnName]" v-if="item.htmlType == 'radio'">
|
|
|
- <el-radio v-for="itemChild in item.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue"></el-radio>
|
|
|
+ <el-radio-group v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'radio'">
|
|
|
+ <el-radio v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel" :value="itemChild.dictValue"></el-radio>
|
|
|
</el-radio-group>
|
|
|
<!-- 时间控件 -->
|
|
|
- <el-date-picker v-model="config[item.columnName]" v-if="item.htmlType == 'datetime'" type="date" :placeholder="'请输入'+item.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="item.htmlType == 'imageUpload'" :headers="{Authorization: 'Bearer ' + getToken()}" :action="defaultSettings.urls+'/boman-file/upload'" list-type="picture-card"
|
|
|
+ <el-upload v-if="formConfig.htmlType == 'imageUpload'" :headers="{Authorization: 'Bearer ' + getToken()}" :action="process + '/boman-file/upload'" list-type="picture-card"
|
|
|
:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
|
|
|
<i class="el-icon-plus"></i>
|
|
|
</el-upload>
|
|
|
- <el-dialog :visible.sync="dialogVisible" v-if="item.htmlType == 'imageUpload'">
|
|
|
+ <el-dialog :visible.sync="dialogVisible" v-if="formConfig.htmlType == 'imageUpload'">
|
|
|
<img width="100%" :src="dialogImageUrl" alt="">
|
|
|
</el-dialog>
|
|
|
<!-- 上传文件 -->
|
|
|
- <el-upload action="#" v-if="item.htmlType == 'fileUpload'" list-type="picture-card" :auto-upload="false">
|
|
|
- <i slot="default" class="el-icon-plus"></i>
|
|
|
- <div slot="file" slot-scope="{file}">
|
|
|
- <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
|
|
|
- <span class="el-upload-list__item-actions">
|
|
|
- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
|
|
- <i class="el-icon-zoom-in"></i>
|
|
|
- </span>
|
|
|
- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
|
|
- <i class="el-icon-download"></i>
|
|
|
- </span>
|
|
|
- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
|
|
- <i class="el-icon-delete"></i>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </el-upload>
|
|
|
- <el-dialog :visible.sync="dialogVisible" v-if="item.htmlType == 'fileUpload'">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="">
|
|
|
- </el-dialog>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :headers="{Authorization: 'Bearer ' + getToken()}"
|
|
|
+ v-if="formConfig.htmlType == 'fileUpload'"
|
|
|
+ :action="process + '/boman-file/upload'"
|
|
|
+ :on-change="handleChange"
|
|
|
+ :file-list="fileList">
|
|
|
+ <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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
const defaultSettings = require('@/settings.js')
|
|
|
import Editor from '@/components/Editor';
|
|
|
- import { getToken } from "@/utils/auth";
|
|
|
+ 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
|
|
|
+ disabled: false,
|
|
|
+ config: {},
|
|
|
}
|
|
|
},
|
|
|
components: {
|
|
@@ -76,18 +69,18 @@
|
|
|
props: {
|
|
|
formConfig: {
|
|
|
type: Object,
|
|
|
- required: true
|
|
|
+ required: true,
|
|
|
+ default: {
|
|
|
+ sysDictData: []
|
|
|
+ }
|
|
|
},
|
|
|
- config: {
|
|
|
- type: Object,
|
|
|
- required: true
|
|
|
- }
|
|
|
},
|
|
|
mounted() {
|
|
|
- console.log(this.formConfig, this.config)
|
|
|
- // this.setDefaultValue()
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleChange(file, fileList) {
|
|
|
+ this.fileList = fileList.slice(-3);
|
|
|
+ },
|
|
|
getToken() {
|
|
|
return getToken()
|
|
|
},
|
|
@@ -104,20 +97,6 @@
|
|
|
handleQuery() {
|
|
|
this.$emit('btns')
|
|
|
},
|
|
|
- setDefaultValue() {
|
|
|
- const formData = { ...this.config
|
|
|
- }
|
|
|
- // 设置默认值
|
|
|
- this.formConfig.formItemList.forEach(({
|
|
|
- key,
|
|
|
- value
|
|
|
- }) => {
|
|
|
- if (formData[key] === undefined || formData[key] === null) {
|
|
|
- formData[key] = value
|
|
|
- }
|
|
|
- })
|
|
|
- this.$emit('input', formData)
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
</script>
|