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

<template>
    <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="160px" class="from_index">
        <el-row>
          <el-col :span="24"  v-for="(item,index) in formConfig.columns" :key="index">
            <el-form-item :label="item.columnComment" style="display: inline-block;" :prop="item.columnName" v-if="item.isEdit == 1">
              <!-- 输入框 -->
              <el-input v-if="item.htmlType == 'input'" v-model="config[item.columnName]" :placeholder="'请输入'+item.columnComment"
                clearable @keyup.enter.native="submitForm" />
              <!-- 多行输入框 -->
              <el-input v-if="item.htmlType == 'textarea'" type="textarea" v-model="config[item.columnName]" :placeholder="'请输入'+item.columnComment"
                clearable @keyup.enter.native="submitForm" @change="submitForm"/>
              <!-- 下拉框 -->
              <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" @change="submitForm">
                </el-option>
              </el-select>
              <!-- 复选框 -->
              <el-checkbox-group v-model="config" v-if="item.htmlType == 'checkbox'">
                <el-checkbox @change="submitForm" v-for="itemChild in item.sysDictData" :label="itemChild.dictValue" :key="itemChild.dictLabel" >
                  {{itemChild.dictLabel}}
                </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" @change="submitForm"></el-radio>
              </el-radio-group>
              <!-- 时间控件 -->
              <el-date-picker v-model="config[item.columnName]" v-if="item.htmlType == 'datetime'" type="date" :placeholder="'请输入'+item.columnComment" @change="submitForm">
              </el-date-picker>
              <!-- 上传图片 -->
              <el-upload v-if="item.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'">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <!-- 上传文件 -->
              <el-upload
                class="upload-demo"
                :headers="{Authorization: 'Bearer ' + getToken()}"
                v-if="item.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[item.columnName]" v-if="item.htmlType == 'editor'"  :min-height="192"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </div>

</template>

<script>
  const defaultSettings = require('@/settings.js')
  import { addConfigindex } from "@/api/system/config";
  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: {},
        form:{},
        // 表单校验
        rules: {
        },
        open:false
      }
    },
    components: {
      Editor
    },
    props: {
      formConfig: {},
      nummer:0
    },
    created() {
      this.init()
    },
    mounted() {
    },
    methods: {
      init() {
        // if(this.formConfig.htmlType == 'checkbox'){
        //   this.config = []
        // }
        console.log(this.config,99888)
        console.log(this.nummer)
      },
      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')
      },
      submitForm(value){
        console.log(1243)
        console.log(this.config,value)
        this.form.fixedData = this.config
        this.form.table = 'sys_memorandum'
        this.form.objId = -1
        this.$refs["form"].validate(valid => {
          if (valid) {
            // if (this.form.id != undefined) {
            //   updateNotice(this.form).then(response => {
            //     this.msgSuccess("修改成功");
            //     this.open = false;
            //     this.getList();
            //   });
            // } else {
              addConfigindex(this.form).then(response => {
                this.msgSuccess("新增成功");
                // this.open = false;
                this.cancel();
              });
            // }
          }
        });
        // this.$emit('submitForm',this.config)
      },
      cancel(){
       this.$emit('cancel',this.config)
      },
      handleCheckedCitiesChange(value){
        console.log(this.config)
      }
    }
  }
</script>

<style lang="scss">
  .from_index{
    .el-form-item{
      width: 93%;
    }
    .el-input{
      width: 100%;
    }
    .el-select{
      width: 100%;
    }
  }
</style>
<style scoped lang="scss">
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
  }
</style>