soc_web/src/views/core/letter/letterIndex/dialog.letterview.vue

<template>
  <div class="edu-training-edit">
    <DialogCom :title="title" @close="onHide" :visible.sync="isShow" width="800px">
      <div class="page-body">
        <el-form ref="form" :model="formData"  label-width="150px">
          <el-row>
            <el-col :span="24">
              <el-form-item  label="介绍信名称:">
                {{formData.letterName}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item   label="介绍信有效期限:">
                {{formData.startTimeStr}}~{{formData.endTimeStr}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="创建机构:">
                {{formData.orgName}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="接待机构:">
                {{formData.orgNames}}
              </el-form-item>
            </el-col>

          <el-form-item label="介绍信文件:" >
            <K-file-upload ref="upload" :defaultValue="formFileListDefualtValue" :disabled="true"  :isShowUploadBtn="false" v-model="formData.letterFile"/>
          </el-form-item>

          <el-form-item label="备注:" >
            {{formData.description}}
          </el-form-item>
          </el-row>
          <el-table  :data="formData.userInfos">
            <el-table-column label="人员姓名" align="center" prop="userName" />
            <el-table-column label="单位" align="center" prop="companyName" />
            <el-table-column label="证据号码" align="center" prop="idCard">
            </el-table-column>
            <el-table-column label="证件" align="center" prop="imgFile" >
              <template slot-scope="scope">
                <img width="50" height="50" :src="splitImgFilePath(scope.row.imgFile,0)">
                <img width="50" height="50" :src="splitImgFilePath(scope.row.imgFile,1)">
              </template>
            </el-table-column>
          </el-table>
<!--          <el-row v-if="!showAudit">
            <el-form-item label="审核:"  prop="checkStatus">
              {{formData.checkStatus==null?"":formData.checkStatus===1?"通过":"不通过"}}
            </el-form-item>
            <el-form-item label="审核意见:"  prop="checkRemark">
             {{formData.checkRemark}}
            </el-form-item>
          </el-row>-->


<!--          <el-row v-if="showAudit">
            <el-form-item label="审核:"  prop="checkStatus">
              <template>
                <el-radio-group v-model="formData.checkStatus">
                  <el-radio  :label="1">通过</el-radio>
                  <el-radio  :label="2">不通过</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>
          <el-form-item label="审核意见:"  prop="checkRemark">
            <el-input v-model="formData.checkRemark" type="textarea" placeholder="请输入内容" />
          </el-form-item>
          </el-row>-->
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取 消</el-button>
<!--        <el-button type="primary" @click="submitForm" v-if="showAudit">确 定</el-button>-->
      </div>
    </DialogCom>
  </div>

</template>
<script>
import {mapState, mapMutations} from "vuex";
import { getLetter,auditLetter} from "@/api/core/letter";
import OrgTreeSelect from "@/components/orgTreeSelect";
import KFileUpload from "@/components/K-FileUpload";
import dayjs from "dayjs";
import imgUpload from "@/components/ImageUpload";
export default {
  components: {KFileUpload},
  data() {
    const params = this.$route.params;
    return {
      id: params ? params.id : null,
      isShow: false,
      formData: this.reset(),
      formFileListDefualtValue: [],
      open: false,
      userInfo:this.resetUserInfo(),
      imageList:[],
      title:null,
      index:null,
      showAudit:false
    };
  },
  dicts: ['letter_status'],
  props: {},
  watch: {},
  created() {
  },
  computed: {
    ...mapState(["loginUser", "org",]),

  },
  methods: {
    ...mapMutations([]),
    reset(other = {}) {
      return {
        letterName:null,
        orgIds:null,
        startTime: null,
        endTime: null,
        checkRemark: null,
        fileList: [],
        userInfos:[],
        letterFile:null,
        startTimeStr:null,
        endTimeStr:null,
        orgName:null,
        orgNames:null,
        description:null,
        ...other,
      };
    },
    resetUserInfo(){
      return {
        userName: null,
        companyName:null,
        idCard:null,
        imgFile:null,
      }
    },

    async show(id,type, other = {}) {
      this.isShow = true;
      if(type===0){
        this.title = "介绍信详情";
        this.showAudit=false;
      }else{
        this.title = "介绍信审批";
        this.showAudit=true;
      }
          getLetter(id).then(response => {
          this.formData = response.data;
          this.userInfo = response.data.userInfos;
          this.orgIds = response.data.orgIds;
          this.formFileListDefualtValue = response.data.letterFile;
            console.log("-----------------",this.formFileListDefualtValue);
        });


    },
    splitImgFilePath(imgPaths,index){
      return imgPaths.split(',')[index];
    },
    onHide() {
      this.isShow = false;
      this.showAudit=false;
      this.formData = this.reset();
      this.$emit('closed')
    },
    submitForm(){
       if(this.formData.checkRemark==null){
         this.$message.error("请选择审核状态");
         return;
       }
       if(this.formData.checkStatus==2&&!this.formData.checkRemark){
         this.$message.error("请填写审批意见");
         return;
       }
       auditLetter(this.formData).then(response => {
         this.$modal.msgSuccess("审批成功");
       });
       this.onHide();
    },
  },
  mounted() {
  },
};
</script>