alhj-admin/src/views/contracts/detail.vue

<template>
  <div>
    <el-card class="box-card">
      <el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="12">
        <div class="grid-content bg-purple">
          <span style="font-weight: 600">合同基础信息</span>
          <div class="titlein">
            <span class="titlename">合同名称</span>
            <span class="meatatitle">{{ contract.name }}</span>
          </div>
          <div class="titlein">
            <span class="titlename">合同编号</span>
            <span class="meatatitle">{{ contract.contractNo }}</span>
          </div>
          <div class="titlein">
            <span class="titlename">合同附件</span>
            <div style="display: flex">
              <div class="imgbox">
                <FileShow :files="contract.picList" />
              </div>
            </div>
          </div>
          <div class="titlein">
            <span class="titlename">发票附件</span>
            <div style="display: flex">
              <div class="imgbox">
                <FileShow :files="contract.invoicePicList" />
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="12">
        <div class="jas">
          <div class="titlein jas">
            <span class="titlename">贸易合同</span>
            <div style="display: flex">
              <div class="imgbox">
                <FileShow :files="contract.tradePicList" />
              </div>
            </div>
          </div>
          <div class="yusa jas">
            <div class="boxas">
              <span style="color: #fff">合同状态：</span>
              <span style="color: #d05c39">{{
                contract.contractStatusText
              }}</span>
            </div>
            <span class="aoiisp"
              >审核结果：
              <p style="color: #d8ab5a">{{ contract.statusText }}</p></span
            >
          </div>

          <!-- 审核反馈和审核截图框  -->
          <div class="yusa">
            <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="10" class="jas">
              <el-form ref="form" :model="contract" label-width="0px">
                <span class="sah">审核反馈：</span>
                <el-form-item label="">
                  <el-input
                    v-permission="['salesman', 'admin']"
                    v-model="contract.feedback"
                    type="textarea"
                  />
                  <div v-permission="['supplier']">{{ contract.feedback }}</div>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="jas">
              <span class="sah">审核截图：</span>
              <div style="display: flex; justify-content: flex-end">
                <div class="imgbox">
                  <FileUpload
                    v-permission="['salesman', 'admin']"
                    v-model="contract.feedbackPics"
                    accept=".jpg, .jpeg, .png, .pdf"
                  />
                  <FileShow
                    v-permission="['supplier']"
                    :files="contract.feedbackPics"
                  />
                </div>
              </div>
            </el-col>
          </div>
          <div slot="" class="clearfix">
            <!-- <el-button
              type="primary"
              style="float: right; margin-left: 10px"
            >导出
            </el-button> -->
            <el-button
              v-if="contract.status !== 0 && contract.contractStatus === 0"
              type="danger"
              style="float: right"
              @click="deletedContract"
              >删除</el-button
            >

            <el-button
              v-if="contract.contractStatus === 1"
              type="primary"
              style="float: right"
              @click="recoverContract"
              >恢复
            </el-button>

            <el-button
              v-permission="['salesman', 'admin']"
              type="warning"
              style="float: right"
              @click="failed"
              >审核失败
            </el-button>
            <el-button
              v-permission="['salesman', 'admin']"
              type="success"
              style="float: right"
              @click="success"
              >审核成功
            </el-button>
          </div>
        </div>
      </el-col>
    </el-card>

    <el-card class="box-card">
      <el-table
       :row-key="getRowKey"
        v-loading="listLoading"
        :data="temporaryList"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        @select="handleSelectionChange"
        @select-all="handleAll"
      >
        <el-table-column align="center" label="" width="55" type="selection" :reserve-selection="true" />
        <el-table-column label="汇票名称" align="center" prop="name" />
        <el-table-column label="汇票编号" align="center" prop="draftNo" />
        <el-table-column label="承兑人" align="center" prop="acceptorName" />
        <el-table-column label="金额" align="center">
          <template slot-scope="scope">
            {{ scope.row.money }}
          </template>
        </el-table-column>
        <el-table-column label="服务费" align="center">
          <template slot-scope="scope">
            {{ scope.row.serviceMoney }}
          </template>
        </el-table-column>
        <el-table-column
          label="汇票状态"
          align="center"
          prop="draftStatusText"
        />
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.statusText }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="created_at"
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <el-tag
              v-permission="['salesman', 'admin']"
              v-show="contract.status !== 0"
              type="primary"
              style="cursor: pointer; margin-right: 15px"
              @click="tapDetail(scope.row.id)"
              >查看详情</el-tag
            >
            <el-tag
              v-permission="['supplier']"
              type="primary"
              style="cursor: pointer; margin-right: 15px"
              @click="tapDetail(scope.row.id)"
              >查看详情</el-tag
            >
            <el-tag
              v-permission="['supplier']"
              v-show="scope.row.status == 2"
              type="success"
              style="cursor: pointer; margin-right: 15px"
              @click="addNewBill(scope.row.id)"
              >重新提交</el-tag
            >
            <el-tag
              v-if="scope.row.draftStatus == 1"
              type="success"
              style="margin-right: 15px; cursor: pointer"
              @click="recover(scope.row.id)"
              >恢复</el-tag
            >
            <el-tag
              v-if="contract.status != 0 && scope.row.draftStatus == 0"
              type="danger"
              style="margin-right: 15px; cursor: pointer"
              @click="deleted(scope.row.id)"
              >删除</el-tag
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagesip">
        <el-button
          v-permission="['salesman', 'admin']"
          v-show="contract.status !== 0"
          type="primary"
          @click="batSuccessed"
          >审核成功</el-button
        >
        <el-button
          v-permission="['salesman', 'admin']"
          v-show="contract.status !== 0"
          type="primary"
          @click="batFailed"
          >审核失败</el-button
        >
        <el-button
          v-if="contract.status !== 0 && role === 2"
          type="primary"
          @click="addNewBill('')"
        >
          新增汇票</el-button
        >

        <el-button
          v-if="contract.status !== 0"
          type="success"
          style="float: right"
          @click="recoverContractDraft"
          >恢复
        </el-button>
        <el-button
          v-if="contract.status !== 0"
          type="danger"
          style="float: right"
          @click="deletedContractDraft"
          >删除</el-button
        >
        <el-button
          type="primary"
          style="float: right; margin-left: 10px"
          @click="ExportsContractDraft"
          >导出
        </el-button>

        <el-button
          type="primary"
          size="small"
          style="
            background-color: #d8ab5a;
            border-color: #d8ab5a;
            margin: 0 20px;
          "
          @click="jumpFirstPage"
          >首页
        </el-button>
        <el-pagination
          ref="pagination"
          background
          layout="prev, pager, next"
          :total="list.length"
          :page-size="10"
          prev-text="上一页"
          next-text="下一页"
          :hide-on-single-page="false"
          @current-change="handleCurrentChange"
        />
        <el-button
          type="primary"
          size="small"
          style="
            background-color: #d8ab5a;
            border-color: #d8ab5a;
            margin: 0 20px;
          "
          @click="jumpLastPage"
          >尾页
        </el-button>
        <el-button type="primary" size="small" @click="back">返回 </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { dataConversionUtil } from "../../utils/Excel.js";
import logo from "@/assets/pdf.png";
export default {
  data() {
    return {
      dialogVisible: false,
      role: "",
      srcList: [],
      temporaryList: [],
      list: [],
      listLoading: false,
      contract: {},
      currentPage: 1,
      multipleSelection: [],
      pagesize: 9999,
      form: "",
      invoicePicList: [],
      picList: [],
      tradePicList: [],
      pdf: logo,
      /* 审核反馈和审核截图的数据 */
      feed: {
        id: "",
        feedback: "",
        feedbackPicList: [],
        approveStatus: "",
      },
      exportExcelData1: [], //导出列表缓存数据整页
      exportExcelData2: [], //导出列表缓存数据单选
    };
  },

  mounted() {
    this.role = this.$store.state.user.userInfo.type;
    this.checked = this.$store.state.user.checked;
    this.getData();
  },
  methods: {
    // 批量审核汇票 成功
    batSuccessed() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Contract/contractDraft/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 3,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message({
            type: "danger",
            message: res.msg,
          });
        }

        this.getData();
      });
    },
    // 批量审核汇票失败
    batFailed() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Contract/contractDraft/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 4,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message({
            type: "danger",
            message: res.msg,
          });
        }

        this.getData();
      });
    },
    getData() {
      const id = this.$route.query.id;
      this.$request({
        url: "/api/Contract/" + id,
        method: "get",
      }).then((res) => {
        this.contract = res.data;
        this.invoicePicList = this.contract.invoicePicList;
        this.picList = this.contract.picList;
        this.list = res.data.contractDraft.result;
        this.tradePicList = this.contract.tradePicList;
        this.getPageData();
      });
    },
    isPDF(url) {
      const fileType = ["pdf"];
      const index = url.lastIndexOf(".");
      const type = url.substr(index + 1);
      return fileType.indexOf(type) === -1;
    },
    addNewBill(id) {
      const cid = this.$route.query.id;
      this.$router.push({
        name: "addnewbill",
        query: {
          cid: cid,
          id: id,
        },
      });
    },
    tapDetail(id) {
      this.$router.push({
        name: "billDetail",
        query: {
          id: id,
        },
      });
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPageData();
    },
    jumpFirstPage() {
      this.$refs.pagination.handleCurrentChange(1);
      this.$emit("handleCurrentChange", 1);
    },
    jumpLastPage() {
      const font = this.$refs.pagination;
      const cpage = Math.ceil(font.total / font.pageSize);
      font.handleCurrentChange(cpage);
    },
    getPageData() {
      const start = (this.currentPage - 1) * this.pagesize;
      const end = start + this.pagesize;
      this.srcList = this.list.slice(start, end);
      this.temporaryList = this.srcList;
    },

     getRowKey(row) {
      return row.id;
    },

    /* 批量导出 */
    handleAll(data) {
      this.multipleSelection=data
    },
    handleSelectionChange(data) {
			this.multipleSelection=data
    },
    /* 批量导出 */
    ExportsContractDraft() {
      if (this.multipleSelection == "") {
        this.Exports()
      } else {
        var tableHeader = [
          [
            "序号",
            "汇票名称",
            "汇票编号",
            "承兑人",
            "金额",
            "服务费",
            "汇票状态",
            "审核状态",
          ],
        ];
        var dataList = [];
        this.multipleSelection.forEach((item, index) => {
          dataList.push([
            index + 1,
            item.name,
            item.draftNo,
            item.acceptorName,
            item.money,
            item.serviceMoney,
            item.draftStatusText,
            item.statusText,
          ]);
        });
        dataConversionUtil.dataToExcel("汇票列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }
    },
    /* 全部导出 */
    Exports() {
      this.multipleSelection = this.temporaryList;
      setTimeout(() => {
        var tableHeader = [
          [
            "序号",
            "汇票名称",
            "汇票编号",
            "承兑人",
            "金额",
            "服务费",
            "汇票状态",
            "审核状态",
          ],
        ];
        var dataList = [];
        this.multipleSelection.forEach((item, index) => {
          dataList.push([
            index + 1,
            item.name,
            item.draftNo,
            item.acceptorName,
            item.money,
            item.serviceMoney,
            item.draftStatusText,
            item.statusText,
          ]);
        });
        dataConversionUtil.dataToExcel("汇票列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }, 1000);
    },

    /* 审核成功发送请求  */
    success() {
      this.feed.feedback = this.contract.feedback;
      /* 反馈图片赋值 */
      this.feed.feedbackPicList = this.contract.feedbackPics;
      /* 合同id赋值 */
      this.feed.id = this.$route.query.id;
      /* 反馈内容赋值 */
      this.feed.approveStatus = 1;
      this.$request({
        url: "/api/Contract/approveContract",
        method: "post",
        data: this.feed,
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },

    /* 审核失败发送请求  */
    failed() {
      this.feed.feedback = this.contract.feedback;
      /* 反馈图片赋值 */
      this.feed.feedbackPicList = this.contract.feedbackPics;
      /* 合同id赋值 */
      this.feed.id = this.$route.query.id;
      this.feed.approveStatus = 2;
      this.$request({
        url: "/api/Contract/approveContract",
        method: "post",
        data: this.feed,
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },
    recoverContract() {
      const id = this.$route.query.id;
      this.$request({
        url: "/api/Contract/manage",
        method: "post",
        data: {
          ids: [id],
          operateType: 2,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },
    deletedContract() {
      const id = this.$route.query.id;
      this.$request({
        url: "/api/Contract/manage",
        method: "post",
        data: {
          ids: [id],
          operateType: 1,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },
    recoverContractDraft() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Contract/contractDraft/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 2,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },
    deletedContractDraft() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Contract/contractDraft/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 1,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },
    recover(id) {
      this.$request({
        url: "/api/Contract/contractDraft/manager",
        method: "post",
        data: {
          ids: [id],
          operateType: 2,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },
    deleted(id) {
      this.$request({
        url: "/api/Contract/contractDraft/manager",
        method: "post",
        data: {
          ids: [id],
          operateType: 1,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getData();
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.getData();
        }
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card {
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}

.el-textarea__inner {
  padding: 30px 0;
}

.imgbox {
  margin-left: 15px;
}

.titlein {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;

  .titlename {
    color: #bebdbb;
  }

  .meatatitle {
    color: #1f242a;
  }
}

.yusa {
  display: flex;
}

.jas {
  margin: 20px 20px;
  margin-bottom: 0;
}

.sah {
  display: block;
  color: #68625b;
  padding-bottom: 10px;
}

.grid-content {
  margin: 15px 20px;
}

.bors {
  height: 100%;
}

.aoiisp {
  margin-left: 20px;
  display: flex;
  align-items: center;
}

.pagesip {
  width: 100%;
  margin: 20px auto;
  display: flex;
  // align-items: center;
  justify-content: flex-end;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d8ab5a;
}

.el-col {
  margin-bottom: 20px;
}

.boxas {
  font-size: 18px;
  width: 211px;
  height: 40px;
  background: linear-gradient(to right, #ffe1ad, #d8ab5a);
  box-shadow: 0 10px 20px 1px rgba(179, 116, 5, 0.2);
  border-radius: 0 26px 26px 0;
  line-height: 40px;
  text-align: center;
}
.el-button--danger{
  margin-left: 10px;
}
::v-deep .el-textarea__inner{
height: 150px !important;

}
</style>