yh-ui/src/views/yh/report/view/view.vue

<template>
  <div class="app-container" v-loading="loading">
    <el-row :gutter="16">
      <el-col :md="showVerify ? 19 : 24">
        <el-card header="基本信息" class="card-box">
          <el-descriptions :column="4">
            <el-descriptions-item label="报表编号">{{detail.reportId | dv}}</el-descriptions-item>
            <el-descriptions-item label="部门">{{detail.deptName | dv}}</el-descriptions-item>
            <el-descriptions-item label="报表日期">{{detail.reportDate | dv}}</el-descriptions-item>
            <el-descriptions-item label="总金额">{{detail.totalAmount | dv}} 元</el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.report_status" :value="detail.status" size="small"/>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="3">{{detail.remark | dv}}</el-descriptions-item>
            <el-descriptions-item label="创建人">{{detail.createBy | dv}}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{detail.createTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="更新人">{{detail.updateBy | dv}}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{detail.updateTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="审核人">{{detail.verifyBy | dv}}</el-descriptions-item>
            <el-descriptions-item label="审核时间">{{detail.verifyTime | dv}}</el-descriptions-item>
            <el-descriptions-item label="审核意见" :span="2" v-if="ReportStatus.isVerified(detail.status)">
              {{detail.verifyRemark | dv}}
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card header="工序产量" class="card-box">
          <report-prod
            v-if="!loading"
            :remove-search-columns="['reportId']"
            :hide-columns="['reportId', 'id']"
            :query="{reportId: detail.reportId}"
            :custom-config="{
              containerClass: null,
              showTableOpera: false,
              showSearch: false,
              showSelection: false
            }"/>
        </el-card>
      </el-col>
      <el-col :md="5" v-if="showVerify">
        <el-card header="审核">
          <el-form :model="detail">
            <el-form-item label="审核意见" prop="verifyRemark">
              <el-input v-model="detail.verifyRemark" :autosize="{minRows: 2, maxRows: 10}" type="textarea" maxlength="1000" placeholder="请输入审核意见" show-word-limit/>
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="center">
            <el-button type="success" icon="el-icon-check" plain @click="handleVerify(true)">通 过</el-button>
            <el-button type="danger" icon="el-icon-close" plain @click="handleVerify(false)">驳 回</el-button>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getReport, verifyReport} from "@/api/yh/report";
import ReportProd from "@/views/yh/reportProd/index.vue";
import {ReportStatus} from "@/utils/constants";
import {checkPermi} from "@/utils/permission";

export default {
  name: "ReportView",
  components: {ReportProd},
  dicts: ['report_status'],
  data() {
    return {
      ReportStatus,
      detail: {},
      loading: false,
    }
  },
  computed: {
    // 是否显示审核区域
    showVerify() {
      return this.detail != null && checkPermi(['yh:report:verify']) && ReportStatus.canVerify(this.detail.status);
    }
  },
  created() {
    this.detail.reportId = this.$route.params.reportId;
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.loading = true;
      getReport(this.detail.reportId).then(res => {
        this.detail = res.data;
      }).finally(() => {
        this.loading = false;
      })
    },
    // 处理审核
    handleVerify(pass) {
      this.$confirm(`是否确认${pass ? '通过' : '驳回'}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        verifyReport(this.detail.reportId, pass, this.detail.verifyRemark).then(res => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getDetail();
          }
        })
      })
    }
  }
}
</script>