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

<template>
  <el-form-item label-width="120px" :label="formConfig.columnComment" style="display: inline-block;" :prop="formConfig.columnName">
    <!-- 输入框 -->
    <el-input v-if="formConfig.htmlType == 'input'" @change="iChange" v-model="config[formConfig.columnName]" :placeholder="'请输入'+formConfig.columnComment"
      clearable @keyup.enter.native="handleQuery" :disabled="formConfig.disabshow" />
    <!-- 多行输入框 -->
    <el-input v-if="formConfig.htmlType == 'textarea'" @change="iChange" 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" @change="iChange" 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>
</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: {
      queryData: {
        type: Object,
        default: res => {
          return {
            showData: []
          }
        }
      },
      formConfig: {
        type: Object,
        required: true,
        default: res => {
          return {
            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()
      if (this.formConfig.extendedAttributes) {
        let extend = JSON.parse(this.formConfig.extendedAttributes)
//        this.formConfig.extend=extend
        this.extFn(extend.col, extend.comp)
      }
    },
    watch: {
      'config': {
        handler: function() {
          this.$emit('modelFn', this.formConfig.columnName, this.config[this.formConfig.columnName])
        },
        deep: true
      },
      'queryData': {
        handler: function() {
          if (this.formConfig.extendedAttributes) {
            let extend = JSON.parse(this.formConfig.extendedAttributes)
            this.extFn(extend.col, extend.comp)
          }
        },
        deep: true
      },
    },
    mounted() {},
    methods: {
      iChange(val){
        if(this.formConfig.isUseExtend){
          console.log(this.formConfig.columnName)
          this.$emit('iChange',this.formConfig.columnName,val)
        }
      },
      extFn(col, comp) {
        let str = this.getDyn(col, this.queryData.showData,comp)
        this.config[this.formConfig.columnName] = str
      },
      eval(code){
        let fun = new Function(`return ${code}`)();
        return fun
      },
      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 ? this.formConfig.columnValue :
            this.formConfig.defaultValue) || ''))
        }

        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>