ForDetailButton.vue

<template>
    <div style="display: inline-block;margin: 0px 5px">
      <el-button type="text" @click="openForDialog" size="mini">详情</el-button>
      <el-dialog title="详情" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false" destroy-on-close>
        <el-form label-width="100px" ref="form" :model="form">
          <el-row style="height: 15px">
            <el-col :span="7">
              <el-form-item label="费用名称">{{form.feeName}}</el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="使用人">{{form.userIdName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经办人">{{form.handledByUserIdName}}</el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row style="height: 15px">
            <el-col :span="7">
              <el-form-item label="借支部门">{{form.deptName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间">{{form.registrationDate}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审批时间" v-if="form.approvalTime!=null">{{form.approvalTime}}</el-form-item>
              <el-form-item label="审批时间" v-else>-</el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>


          <el-row style="height: 15px">
            <el-col :span="7">
              <el-form-item label="小写合计" v-if="form.totalFigures!=null">{{form.totalFigures}}</el-form-item>
              <el-form-item label="小写合计" v-else>-</el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="用途说明" v-if="form.applicationDescription!=null">{{form.applicationDescription}}</el-form-item>
              <el-form-item label="用途说明" v-else>-</el-form-item>
            </el-col>

          </el-row>


          <el-divider></el-divider>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" v-if="form.remark!=null">{{form.remark}}</el-form-item>
              <el-form-item label="备注" v-else>-</el-form-item>
            </el-col>
          </el-row>
          <el-divider></el-divider>

          <el-row>
            <el-col :span="24">
              <el-form-item label="审批人" v-if="form.approvedUserIdName!=null">{{form.approvedUserIdName}}</el-form-item>
              <el-form-item label="审批人" v-else>-</el-form-item>
            </el-col>
          </el-row>

          <el-divider></el-divider>
          <el-row>
            <el-col :span="24">
              <el-form-item   v-if="form.attachmentUrl !=null" label="附件" prop="attachmentUrl">
                <div style="height: 60px;width: 100px;margin-top: 5px">
                  <img  @click="godown(form.attachmentUrl)" v-if="ispictrue(form.attachmentUrl)" style="width: 100%;height: 100%" src="@/assets/images/wenjian.png"/>
                  <img  @click="godown(form.attachmentUrl)" v-if="!ispictrue(form.attachmentUrl)" style="width: 100%;height: 100%" src="@/assets/images/wenjian.png"/>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider  v-if="form.attachmentUrl !=null"></el-divider>
        </el-form>
      </el-dialog>
    </div>
</template>

<script>
  import { getFor } from "@/api/system/for";
  export default {
    name: "operator-button",
    props:{
      forId: {
        type: Number
      }
    },
    created(){
    },
    data(){
        return{
          open: false,
          form: {}
        }
    },
    methods:{
      openForDialog(){
        getFor(this.forId).then(response => {
          if(response.data){
            this.form = response.data;
            this.open = true;
          }
        });
      },
      godown(src){
        window.open(src);
      },
      ispictrue(src){
        var pattern = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
        //console.log()
        return pattern.test(src);
      },
    }
  }
</script>

<style scoped>

</style>