shujuju-web/src/components/TabForm/index.vue

<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"
        clearable @keyup.enter.native="handleQuery" />
      <!-- 多行输入框 -->
      <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[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="formConfig.sysDictDatatwo" v-if="formConfig.htmlType == 'checkbox'">
        <el-checkbox @change="handleCheckedCitiesChange" 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[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[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'" 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="formConfig.htmlType == 'imageUpload'">
        <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"
        :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"/>
      123
    </el-form-item>
   
</template>

<script>
  const defaultSettings = require('@/settings.js')
  import Editor from '@/components/Editor';
  import { getToken } from "@/utils/auth";
  export default {
    data() {
      return {
        fileList: [],
        defaultSettings,
        dialogImageUrl: '',
        process: process.env.VUE_APP_BASE_API,
        dialogVisible: false,
        disabled: false,
        config: {},
      }
    },
    components: {
      Editor
    },
    props: {
      formConfig: {
        type: Object,
        required: true,
        'default': {
          sysDictData: []
        }
      },
    },
    created() {
    console.log(this.formConfig)
    },
    mounted() {
    },
    methods: {
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },
      getToken() {
        return getToken()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      handleQuery() {
        this.$emit('btns')
      },
      handleCheckedCitiesChange(value){
        console.log(value)
      }
    }
  }
</script>

<style>
</style>