|
@@ -0,0 +1,225 @@
|
|
|
+<template>
|
|
|
+ <!-- <el-row class="row-bg"> -->
|
|
|
+ <el-col :span="this.formConfig.tableColumnuy !== null? this.formConfig.tableColumnuy : 8 " >
|
|
|
+ <el-form-item :label="formConfig.columnComment" :prop="formConfig.columnName">
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <el-input v-if="formConfig.htmlType == 'input'" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
|
|
|
+ clearable @keyup.enter.native="handleQuery" :disabled="formConfig.disabshow" />
|
|
|
+ <!-- 多行输入框 -->
|
|
|
+ <el-input v-if="formConfig.htmlType == 'textarea'" type="textarea" v-model="config[formConfig.columnName]"
|
|
|
+ :placeholder="'请输入'+formConfig.columnComment" clearable @keyup.enter.native="handleQuery" :disabled="formConfig.disabshow"/>
|
|
|
+ <!-- 下拉框 -->
|
|
|
+ <el-select v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'select'&&(!formConfig.fkInfo)"
|
|
|
+ filterable :placeholder="'请输入'+formConfig.columnComment" :disabled="formConfig.disabshow">
|
|
|
+ <el-option v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictLabel"
|
|
|
+ :value="itemChild.dictValue">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- 下拉框搜索 -->
|
|
|
+ <el-select :disabled="formConfig.disabshow" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'select'&&(formConfig.fkInfo)"
|
|
|
+ filterable remote :remote-method="remoteMethod" :loading="loading" :placeholder="'请输入'+formConfig.columnComment">
|
|
|
+ <el-option v-for="itemChild in filterList" :key="itemChild[formConfig.fkInfo.fkColumnName]" :label="itemChild[formConfig.fkInfo.dkColumnName]" :value="itemChild[formConfig.fkInfo.fkColumnName]">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <!-- 复选框 -->
|
|
|
+ <el-checkbox-group :disabled="formConfig.disabshow" 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>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <!-- 单选框 -->
|
|
|
+ <el-radio-group :disabled="formConfig.disabshow" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'radio'">
|
|
|
+ <el-radio v-for="itemChild in formConfig.sysDictData" :key="itemChild.dictValue" :label="itemChild.dictValue">{{itemChild.dictLabel}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <!-- 时间控件 -->
|
|
|
+ <el-date-picker :disabled="formConfig.disabshow" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'datetime'" type="date"
|
|
|
+ :placeholder="'请输入'+formConfig.columnComment">
|
|
|
+ </el-date-picker>
|
|
|
+ <!-- 上传图片 -->
|
|
|
+ <el-upload :disabled="formConfig.disabshow" v-if="formConfig.htmlType == 'imageUpload'" :headers="{Authorization: 'Bearer ' + getToken()}" :action="process + '/boman-file/upload'"
|
|
|
+ :file-list="config" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="upImageFn"
|
|
|
+ :on-remove="reseImage">
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ </el-upload>
|
|
|
+ <el-dialog :disabled="formConfig.disabshow" :visible.sync="dialogVisible" v-if="formConfig.htmlType == 'imageUpload'">
|
|
|
+ <img :src="dialogImageUrl" alt="">
|
|
|
+ </el-dialog>
|
|
|
+ <!-- 上传文件 -->
|
|
|
+ <el-upload :disabled="formConfig.disabshow" 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 :disabled="formConfig.disabshow" v-model="config[formConfig.columnName]" v-if="formConfig.htmlType == 'editor'" :min-height="192" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <!-- </el-row> -->
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const defaultSettings = require('@/settings.js')
|
|
|
+ import Editor from '@/components/Editor';
|
|
|
+ import {
|
|
|
+ listIndexfou
|
|
|
+ } from "@/api/tool/gen";
|
|
|
+ import {
|
|
|
+ getToken
|
|
|
+ } from "@/utils/auth";
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fileList: [],
|
|
|
+ defaultSettings,
|
|
|
+ dialogImageUrl: '',
|
|
|
+ process: process.env.VUE_APP_BASE_API,
|
|
|
+ dialogVisible: false,
|
|
|
+ disabled: false,
|
|
|
+ loading: false,
|
|
|
+ filterList: [],
|
|
|
+ config: {},
|
|
|
+ aliemg: {
|
|
|
+ table: '',
|
|
|
+ orderBy: 'create_time desc',
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ fixedData: {
|
|
|
+ condition: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Editor
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ formConfig: {
|
|
|
+ type: Object,
|
|
|
+ required: true,
|
|
|
+ 'default': {
|
|
|
+ sysDictData: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type: {
|
|
|
+ type: Number,
|
|
|
+ default: 1
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.config = {}
|
|
|
+ if(this.type){
|
|
|
+ if(this.formConfig.readonly == true){
|
|
|
+ this.formConfig.disabshow = true
|
|
|
+ }else if(this.formConfig.mask.slice(3,4) == '0' || this.formConfig.isonliy == true){
|
|
|
+ this.formConfig.disabshow = true
|
|
|
+ }else{
|
|
|
+ this.formConfig.disabshow = false
|
|
|
+ }
|
|
|
+ if(this.formConfig.fkInfo == null){
|
|
|
+ this.formConfig.fkInfo=false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'config': {
|
|
|
+ handler: function() {
|
|
|
+ this.$emit('modelFn',this.formConfig.columnName,this.config[this.formConfig.columnName])
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ console.log(this.formConfig)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ listIndexfouFn() {
|
|
|
+ listIndexfou(this.aliemg).then(response => {
|
|
|
+ if (response.data) {
|
|
|
+ this.filterList = response.data.rows
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ remoteMethod(query) {
|
|
|
+ if (query !== '') {
|
|
|
+ this.loading = true;
|
|
|
+ this.aliemg.fixedData.condition[this.formConfig.fkInfo.dkColumnName] = query
|
|
|
+ this.listIndexfouFn()
|
|
|
+ } else {
|
|
|
+ this.filterList = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ upImageFn(res, file) {
|
|
|
+ this.config.push(res.data);
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ if (this.formConfig.htmlType == 'checkbox' || this.formConfig.htmlType == 'imageUpload' || this.formConfig.htmlType ==
|
|
|
+ 'fileUpload') {
|
|
|
+ this.config = []
|
|
|
+ } else {
|
|
|
+ this.$set(this.config, this.formConfig.columnName, (this.formConfig.columnValue || ''))
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.formConfig.fkInfo){
|
|
|
+ this.aliemg.table = this.formConfig.fkInfo.fkTableName
|
|
|
+ if(this.formConfig.fkInfo.value){
|
|
|
+ this.aliemg.fixedData.condition[this.formConfig.fkInfo.dkColumnName] = this.formConfig.fkInfo.value
|
|
|
+ }
|
|
|
+ this.listIndexfouFn()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ console.log(file)
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ handleDownload(file) {
|
|
|
+ console.log(file);
|
|
|
+ },
|
|
|
+ handleQuery() {
|
|
|
+ this.$emit('btns')
|
|
|
+ },
|
|
|
+ handleCheckedCitiesChange(value) {
|
|
|
+ console.log(this.config)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+</style>
|