settle_down_web/src/views/company/components/comp/riskOperateDetial.vue

<template>
  <div style="width: 100%;height: 100%;padding: 5px" class="riskOD">
    <el-form ref="fromData" :model="fromData" style="width: 100%;padding: 5px">
      <el-row>
        <el-col style="padding-bottom: 10px">
          <span class="card_title">风险信息</span>
          <el-card shadow="always" style="padding: 15px 5px 5px 15px">
            <el-row>
              <el-col :span="3" class="col-txt"><span>企业名称</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item prop="title">
                  <el-input v-model="fromData.proName" readonly />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>风险标题</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-input v-model="fromData.title" />
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>风险类别</span></el-col>
              <el-col :span="8" class="col-input">
                <el-form-item>
                  <el-select v-model="fromData.rtype" placeholder="请选择">
                    <el-option
                      v-for="item in dc_data.riskWarnType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>风险等级</span></el-col>
              <el-col :span="8" class="col-input">
                <el-form-item>
                  <el-select v-model="fromData.grade" placeholder="请选择">
                    <el-option
                      v-for="item in dc_data.riskGrade"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>风险内容说明</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <!-- <el-input type="textarea" :rows="10" v-model="fromData.content" /> -->
                  <QuillEditor
                    :height="300"
                    :value="fromData.content"
                    @input="getContent"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3" class="col-txt"><span>附件</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <el-upload
                    class="upload-demo"
                    action="#"
                    :http-request="upload"
                    :before-remove="uploadRemove"
                    :file-list="fileList"
                  >
                    <el-button size="small" type="primary">点击上传</el-button>
                    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="3" class="col-txt"><span>查阅人</span></el-col>
              <el-col :span="20" class="col-input">
                <el-form-item>
                  <!-- <user-select :default-select="selectList" :multiple="true" width="700" @selectValue="parentMethod" /> -->
                  <user-select-compon v-if="userSelectValue" :default-select="selectList" :multiple="true" width="700" @selectValue="parentMethod" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import axios from 'axios'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import QuillEditor from '@/components/QuillEditor'
// import UserSelect from '@/views/components/UserSelect'
import userSelectCompon from '@/views/components/userSelectCompon'
export default {
    name: 'RiskOperateDetial',
    components: {
        QuillEditor,
        // UserSelect
        userSelectCompon
    },
    mixins: [Base, BaseData],
    props: {
        proId: {
            type: String,
            default: ''
        },
        rId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            dc_key: ['riskGrade', 'riskWarnType'],
            fromData: {},
            fileList: [],
            selectList: [],
            content: '',
            userSelectValue: false
        }
    },
    watch: {
    },
    created() {
        this.initData()
    },
    destroyed() {
    },
    methods: {
        initData: function() {
            this.initDict(this.dc_key).then(res => {
                this.getInfoData()
            })
        },
        getInfoData() {
            this.fromData = {}
            this.content = "";
            this.fromData.content = "";
            this.fileList = []
            this.selectList = []
            this.$set(this, 'content', ' ')
            if (this.rId) {
                const postData = {
                    id: this.rId
                }
                const _this = this
                this.baseRequest('getById', postData).then((res) => {
                    console.log('####res_:', res)
                    if (res.data) {
                        const { data } = res
                        _this.fromData = Object.assign({}, _this.fromData, res.data)
                        _this.content = _this.fromData.content
                        if (_this.fromData.annex) {
                            _this.$set(_this, 'fileList', JSON.parse(_this.fromData.annex))
                        }
                        if (_this.fromData.viewedBy) {
                            _this.$set(_this, 'selectList', _this.fromData.viewedBy.split(','))
                        }
                        
                        console.log('this.fileList_:', _this.fileList, _this.selectList)
                    }
                    this.userSelectValue = true;
                }).catch(() => {
                })
            } else {
                const postData = {
                    id: this.proId
                }
                this.baseProRequest('getById', postData).then((res) => {
                    console.log("项目信息——：", res)
                    if (res.data) {
                        // this.$set(this, 'selectList', res.data.users)
                        this.$set(this.fromData, 'proId', res.data.id)
                        this.$set(this.fromData, 'proName', res.data.qymc)
                    }
                    this.userSelectValue = true;
                }).catch(() => {
                })
            }
        },

        upload(param) {
            const formParam = new FormData()
            formParam.append('file', param.file)
            const config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'MVVM-Key': String(new Date().getTime()),
                    'xx': 'anything',
                    'Access-Control-Allow-Origin': '*'
                }
            }
            axios.post(this.$constant.BASE_URI + '/FileController/upload', formParam, config)
                .then(response => {
                    const item = {
                        name: param.file.name,
                        url: this.$constant.BASE_URI + '/FileController/download/' + response.data.data
                    }
                    this.fileList[this.fileList.length] = item
                }).catch((err, x) => {
                    console.log(err, x)
                })
        },

        uploadRemove(file, fileList) {
            this.fileList = fileList
        },

        getContent(content) {
            this.content = content
            this.fromData.content = content
        },

        parentMethod: function(val) {
            if (val.length > 0) {
              this.fromData.viewedBy = val.join(',')
            }else{
              this.fromData.viewedBy = "";
            }
        },

        confirmSubmit: function(sta) {
            const _this = this
            this.$refs.fromData.validate(valid => {
                if (valid) {
                    let soaUrl = 'edit'
                    const extraData = {}
                    const postData = Object.assign({}, _this.fromData, extraData)
                    if (!this.fromData.id) {
                        postData.state = sta
                        soaUrl = 'add'
                    }
                    postData.annex = JSON.stringify(_this.fileList)
                    this.baseRequest(soaUrl, postData).then((res) => {
                        if (res.data.msg === 'Success') {
                            this.$message({
                                type: 'success',
                                message: '提交成功'
                            })
                            this.$emit('closeDialog')
                        } else {
                            this.$message({
                                type: 'error',
                                message: '提交失败'
                            })
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },

        baseRequest(opUrl, postData) {
            return this.$channel.globleRequest('ProRiskInfoController', opUrl, postData, 'project')
        },

        baseProRequest(opUrl, postData) {
            return this.$channel.globleRequest('MnpCompanyController', opUrl, postData, 'project')
        }
    }
}
</script>

<style lang="scss" scoped>
.riskOD{
    .el-upload{
        width: 0 !important;
    }
    .ch-input .el-input__inner {
        border-radius: 0px;
        border-color: #32323A;
    }
    .ch-input-size {
        width: 150px;
    }
    .ch-button {
        border-radius: 0px;
        border-color: #32323A;
        background-color: #32323A;
        color: #fff;
    }
    .ch-button-warning {
        margin-left: 10px;
        border-radius: 0px;
        border-color: #E6A23C;
        background-color: #E6A23C;
        color: #fff;
    }
    .ch-button-export {
        margin-left: 10px;
        border-radius: 0px;
        border-color: #98CC1F;
        background-color: #98CC1F;
        color: #fff;
    }
}
</style>