violationCaseFileInfo.vue 8.27 KB
<template>
  <el-form ref="form" :model="form" label-width="115px">
    <el-row :gutter="2">
      <el-col :span="11">
        <el-form-item label="案卷编号" prop="number">
          <el-input v-model="form.number" placeholder="请输入案卷编号" :disabled="true"/>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="违规对象类型" prop="violationObjectType">
          <el-select v-model="form.violationObjectType" placeholder="请选择违规对象类型" style="width: 100%;" :disabled="true">
           <el-option label="工地" value="0" />
           <el-option label="消纳场" value="1" />
           <el-option label="企业" value="2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="11">
        <el-form-item label="所属区域" prop="owningRegion">
          <el-select v-model="form.owningRegion" placeholder="请输入所属区域" style="width: 100%;" :disabled="true">
            <el-option label="区域1" value="区域1" />
            <el-option label="区域2" value="区域2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="违规类型" prop="violationType">
          <el-select v-model="form.violationType" placeholder="请选择违规类型" style="width: 100%;" :disabled="true">
            <el-option label="违规1" value="违规1" />
            <el-option label="违规2" value="违规2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="11">
        <el-form-item label="违规等级" prop="violationGrade">
          <el-select v-model="form.violationGrade" placeholder="请选择企业名称" style="width: 100%;" :disabled="true">
            <el-option label="一般类" value="一般类"/>
            <el-option label="重点类" value="重点类" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="项目名称" prop="projectName">
          <el-select v-model="form.projectName"  :disabled="true" style="width: 100%;">

          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="11">
        <el-form-item label="企业名称" prop="companyName">
          <el-select v-model="form.companyName"  :disabled="true" style="width: 100%;">
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="发送时间" prop="createTime">
          <el-input :value="form.createTime" :disabled="true"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="11">
        <el-form-item label="发送人" prop="createBy">
          <el-input :value="form.createBy" :disabled="true"/>
        </el-form-item>
      </el-col>
      <el-col :span="11">
        <el-form-item label="接收人" prop="receive">
          <el-input :value="form.readBy" :disabled="true"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="2">
      <el-col :span="11">
        <el-form-item label="阅读时间" prop="createBy">
          <el-input :value="form.readTime" :disabled="true"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-form-item label="违规描述" prop="describe">
          <el-input v-model="form.describe" type="textarea" placeholder="请输入内容" :row="4" :disabled="true"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="推送对象">
      <el-radio-group v-model="form.sendObject" :disabled="true">
        <el-radio label="区管理部门(治)">区管理部门(治)</el-radio>
        <el-radio label="区管理部门(消)">区管理部门(消)</el-radio>
        <el-radio label="运输企业">运输企业</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-row>
      <el-col :offset="3"><el-button type="primary" @click="open = true">查看附件({{fileEntityList.length}})</el-button></el-col>
    </el-row>
    <el-table :data="replyApprovalProcessList" v-if="entryType==0">
      <el-table-column property="replyPeople" label="操作人" header-align="center" align="center"></el-table-column>
      <el-table-column property="reply" label="意见" header-align="center" align="center"></el-table-column>
      <el-table-column property="replyTime" label="操作时间" header-align="center" align="center"></el-table-column>
      <el-table-column property="replyImg" label="图片预览" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="openImage(scope.row.replyImg)"
            v-if="scope.row.replyImg!=null"
            v-hasPermi="['casefile:violationWarningInformation:view']"
          >查看</el-button>
          <span v-if="scope.row.replyImg==null">暂无</span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看附件" :visible.sync="open" append-to-body>
      <vue-preview :slides="slide1"></vue-preview>
      <el-table :data="fileEntityList">
        <el-table-column property="name" label="附件名称" header-align="center" align="center"></el-table-column>
        <el-table-column label="操作" class-name="small-padding fixed-width" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              size="small" type="success"
              icon="el-icon-download"
              @click="downloadFA(scope.row)"
              v-hasPermi="['office:management:edit']"
              v-if="form.id!=null"
              round>下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="预览" :visible.sync="openImg" append-to-body v-if="entryType==0">
      <img :src="img" width="100%" height="750px" />
    </el-dialog>
  </el-form>
</template>

<script>
import {getViolationCaseFile} from "@/api/casefile/violationCaseFile";
import {listReplyApprovalProcess} from "@/api/casefile/replyApprovalProcess";
import {getBase64} from "@/api/business/threestep";
export default {
  name: "violationWarningInformationInfo",
  props: {
    businessKey: {
      type: String
    },
    idInfo: {
      type: String
    },
    entryType: {
      type: Number
    },
  },
  data() {
    return {
      form: {},
      fileEntityList: [],
      open: false,
      replyApprovalProcessList:[],
      openImg:false,
      img:null,
      showPic: null,
      picImage: null,
      slide1: []
    }
  },
  created() {
    let id = this.idInfo.split(":");

    if(id.length == 2){
      this.idInfo = id[1];
    }else{
      this.idInfo = id;
    }




    this.init();
  },
  methods:{
    init(){
      getViolationCaseFile(this.idInfo).then(response => {
        this.form = response.data.violationCaseFile;
        let files = JSON.stringify(response.data.uploadFiles);
        this.fileEntityList = JSON.parse(files.replaceAll("filePath", "url").replaceAll("fileName", "name"));
        this.fileEntityList.map(item => {
          if(item.url.indexOf(".jpg") > -1 || item.url.indexOf(".png") > -1 || item.url.indexOf(".jpeg") > -1 || item.url.indexOf(".jpg") > -1){
            this.slide1.push({
              src: process.env.VUE_APP_BASE_API + item.url,
              msrc: process.env.VUE_APP_BASE_API + item.url,
              w: 1920,
              h: 1080
            });
          }
        })
      });


      listReplyApprovalProcess({tableName:"workflow_casefile" + ":" +  this.idInfo}).then(response => {
        this.replyApprovalProcessList = response.rows;
      });
    },
    /** 文件下载 */
    downloadFA(row) {
      let name = row.name;
      let url = row.url;
      const a = document.createElement('a')
      a.setAttribute('download', name)
      a.setAttribute('target', '_blank')
      a.setAttribute('href', process.env.VUE_APP_BASE_API + url);
      a.click()
    },
    openImage(base64){
      this.openImg = true;
      this.img = base64;
    },
  }
}
</script>

<style scoped>

</style>