cysci-website/src/views/adminCenter/ticket/detail.vue

<template>
  <div id="detail">
    <el-form ref="form" label-width="150px">
      <el-row type="flex" justify="space-between" style="padding: 10px">
        <el-col :span="2">
          <el-button type="primary" size="mini" @click="toFlow">查看意见</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" size="mini" @click="toBack">返回</el-button>
        </el-col>
      </el-row>
      <el-form-item label="企业名称">{{ data.name }}</el-form-item>
      <el-form-item label="资料">
        <template #label>
          <el-row>
            <el-col :span="24">资料</el-col>
            <el-col :span="24">(图片点击放大)</el-col>
          </el-row>
        </template>
        <el-row :gutter="10">
          <el-col :span="4" v-for="(i, index) in data.material" :key="`material-${index}`">
            <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
            <el-link v-else :key="`material-${index}`" type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
          </el-col>
        </el-row>
      </el-form-item>
      <template v-if="statusData !== '0' && statusData !== '1' && statusData !== '-1'">
        <el-form-item label="中介机构审核资料">
          <template #label>
            <el-row>
              <el-col :span="24">中介机构审核资料</el-col>
              <el-col :span="24">(图片点击放大)</el-col>
            </el-row>
          </template>
          <el-row :gutter="10">
            <el-col :span="4" v-for="(i, index) in data.medium_material" :key="`medium_material-${index}`">
              <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
              <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="合同" v-if="statusData !== '0' && statusData !== '1' && statusData !== '-1' && statusData !== '2' && statusData !== '-3'">
          <template #label>
            <el-row>
              <el-col :span="24">合同</el-col>
              <el-col :span="24">(图片点击放大)</el-col>
            </el-row>
          </template>
          <el-row :gutter="10">
            <el-col :span="4" v-for="(i, index) in data.contract" :key="`contract-${index}`">
              <img v-if="isImg(i.url)" :src="i.url" width="150px" height="150px" @click="toOpen(i.url)" />
              <el-link v-else type="primary" @click="toOpen(i.url)"> <i class="el-icon-view"></i> {{ i.name }} </el-link>
            </el-col>
          </el-row>
        </el-form-item>
      </template>
      <el-form-item label="审核意见" v-if="statusData === '0' || statusData === '3'">
        <el-input v-model="form.desc" placeholder="请填写审核意见" type="textarea" :autosize="{ maxRows: 5, minRows: 3 }"></el-input>
      </el-form-item>
      <el-form-item label="审核" v-if="statusData === '0'">
        <el-radio-group v-model="form.status">
          <el-radio label="1">通过</el-radio>
          <el-radio label="-1">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-row type="flex" justify="space-around">
        <el-col :span="2">
          <el-button v-if="statusData === '0'" type="primary" @click="toStatus()" :disabled="!form.status">保存审核结果</el-button>
          <el-button v-if="statusData === '3'" type="primary" @click="toStatus('4')">确认</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-dialog title="意见" :visible.sync="dialog" :destroy-on-close="true">
      <flow :id="data._id"></flow>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
import flow from './flow.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: ticket } = createNamespacedHelpers('ticket');
export default {
  name: 'detail',
  props: {},
  components: { flow },
  data: function () {
    return {
      data: {
        material: [],
        medium_material: [],
        contract: [],
      },
      imgList: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
      form: {},
      dialog: false,
    };
  },
  created() {
    if (this.id) this.search();
  },
  methods: {
    ...ticket(['fetch', 'status']),
    async search() {
      const res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `data`, res.data);
      }
    },
    isImg(url) {
      const arr = url.split('.');
      const suffix = _.last(arr);
      return this.imgList.includes(suffix);
    },
    toOpen(url) {
      window.open(url);
    },
    async toStatus(status) {
      const dup = _.cloneDeep(this.form);
      dup.opera_id = this.user._id;
      dup.id = this.data._id;
      if (status) dup.status = status;
      const res = await this.status(dup);
      if (this.$checkRes(res, '审核成功', res.errmsg || '审核失败')) {
        this.toBack();
      }
    },
    toBack() {
      this.$router.push(`/adminCenter/ticket`);
    },
    toFlow() {
      this.dialog = true;
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    statusData() {
      return this.$route.query.status;
    },
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
/deep/.el-dialog__body {
  height: 500px;
  overflow-y: auto;
}
</style>