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

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-col :span="24" class="top">
            <el-button type="primary" size="mini" @click="toFlow">查看意见</el-button>
            <el-button type="primary" size="mini" @click="back">返回</el-button>
          </el-col>
          <el-col :span="24" class="down">
            <el-form :model="form" ref="form" label-width="100px">
              <el-col :span="24" class="text">
                <el-col :span="2" class="left"> 企业名称：</el-col>
                <el-col :span="22" class="right">
                  {{ form.name }}
                </el-col>
              </el-col>
              <el-col :span="24" class="text">
                <el-col :span="2" class="left"> 申领时间：</el-col>
                <el-col :span="22" class="right">
                  {{ getDate(form.meta) }}
                </el-col>
              </el-col>
              <el-col :span="24" class="text">
                <el-col :span="2" class="left"> 资质资料：</el-col>
                <el-col :span="20" class="right">
                  <el-col :span="4" v-for="(i, index) in form.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-col>
              </el-col>
              <el-col :span="24" class="text">
                <el-col :span="2" class="left"> 信息资料：</el-col>
                <el-col :span="20" class="right">
                  <el-col :span="4" v-for="(i, index) in form.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-col>
              </el-col>
              <el-col :span="24" class="text" v-if="dataStatus == '1' || dataStatus == '2'">
                <el-col :span="2" class="left"> 合同：</el-col>
                <el-col :span="20" class="right">
                  <el-col :span="4" v-for="(i, index) in form.contract" :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-col>
              </el-col>
              <el-col :span="24" class="formBtn">
                <el-button type="danger" size="mini" @click="back">取消保存</el-button>
                <el-button type="primary" size="mini" v-if="dataStatus === '0'" @click="onSubmit()">提交保存</el-button>
                <el-button type="primary" size="mini" v-if="dataStatus === '1'" @click="toStatus('2')">高企申报确认</el-button>
              </el-col>
            </el-form>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="意见" :visible.sync="dialog" :destroy-on-close="true">
      <flow :id="form._id"></flow>
    </el-dialog>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
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 {
      form: {},
      imgList: ['jpg', 'jpeg', 'png', 'bmp', 'gif'],
      // 意见
      dialog: false,
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...ticket(['fetch', 'status']),
    // 查询详情
    async search() {
      if (this.id) {
        let res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      }
    },
    // 审核
    async onSubmit() {
      let data = this.form;
      const res = await this.status(data);
      if (this.$checkRes(res, '审核成功', res.errmsg || '审核失败')) {
        this.back();
      }
    },
    // 高企认证确认
    async toStatus(status) {
      let data = this.form;
      data.status = status;
      const res = await this.status(data);
      if (this.$checkRes(res, '高企申报成功', res.errmsg || '高企申报失败')) {
        this.back();
      }
    },
    // 查看意见
    toFlow() {
      this.dialog = true;
    },
    // 返回
    back() {
      this.$router.push({ path: '/adminCenter/ticket', query: { status: this.dataStatus } });
    },
    isImg(url) {
      const arr = url.split('.');
      const suffix = _.last(arr);
      return this.imgList.includes(suffix);
    },
    toOpen(url) {
      window.open(url);
    },
    getDate(date) {
      if (date) {
        let newDate = moment(date.createdAt).format('YYYY-MM-DD');
        if (newDate) return newDate;
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    dataStatus() {
      return this.$route.query.status;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  border-radius: 10px;
  box-shadow: 0 0 5px #cccccc;
  padding: 20px;
  .top {
    text-align: right;
    margin: 0 0 10px 0;
  }
  .down {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    .text {
      padding: 10px 0;
      border-bottom: 1px dashed #333;
      .left {
        text-align: left;
      }
      .right {
        img {
          width: 200px;
          height: 200px;
          border: 1px solid #ccc;
        }
      }
    }
    .formBtn {
      padding: 10px 0;
      text-align: center;
    }
  }
}
.main:hover {
  box-shadow: 0 0 5px #409eff;
}
</style>