zhgdyun/src/views/projectFront/projectSummary/supplierAudit.vue

<template>
  <div class="temporary whiteBlock">
    <div class="content">
      <div class="title_wrap flex">
        <el-form :inline="true" class="demo-form-inline" size="medium">
          <el-form-item label="审批状态">
            <el-select
              v-model="tableParameter.applyStatus"
              :placeholder="$t('message.laborMange.pleaseChoose')"
              clearable
            >
              <el-option
                v-for="(item, index) in statusListData"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资质申请时间">
            <el-date-picker
              v-model="tableParameter.timeRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="searchData">{{
              $t("message.laborMange.inquire")
            }}</el-button>
            <el-button type="warning" plain @click="refresh">{{
              $t("message.laborMange.refresh")
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <vue-scroll style="height: 86%">
        <el-table class="tables" :data="tableData" height="500">
          <el-table-column
            prop="applyTime"
            align="center"
            label="资质申请时间"
          ></el-table-column>
          <el-table-column
            prop="applyOrg"
            label="审批组织"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="replyTime"
            label="审批回复时间"
            align="center"
          ></el-table-column>
          <el-table-column label="审批状态" align="center">
            <template slot-scope="scope">
              <span
                :style="{
                  color:
                    scope.row.applyStatus == 1
                      ? '#66A972'
                      : scope.row.applyStatus == 2
                      ? '#5F73CD'
                      : scope.row.applyStatus == 3
                      ? '#E14655'
                      : scope.row.applyStatus == 4
                      ? '#B8B8BA'
                      : '',
                }"
              >
                {{
                  scope.row.applyStatus == 1
                    ? "待审批"
                    : scope.row.applyStatus == 2
                    ? "已审批"
                    : scope.row.applyStatus == 3
                    ? "已驳回"
                    : scope.row.applyStatus == 4
                    ? "已撤销"
                    : ""
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('message.deviceManage.operation')"
            align="center"
            width="400"
          >
            <template slot-scope="scope">
              <div class="tableBtns">
                <div @click="showAudit(scope.row)" class="operationText">
                  <img
                    src="@/assets/images/tableIcon/showReply.png"
                    width="15px"
                    height="15px"
                  />
                  <span>查看详情</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </vue-scroll>
      <el-pagination
        style="margin: 10px 20px 0"
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
    <!-- 查看详情 -->
    <el-dialog
      class="auditDialog"
      title="查看详情"
      :visible.sync="relativeGroupDialog"
      :modal-append-to-body="false"
      width="80%"
    >
      <div class="dialog_content">
        <div class="tab-content">
          <span
            :class="activeTab == 0 ? 'activeStyle' : ''"
            @click="activeTab = 0"
            >基本信息</span
          >
          <span
            :class="activeTab == 1 ? 'activeStyle' : ''"
            @click="activeTab = 1"
            >企业资质</span
          >
          <span
            :class="activeTab == 2 ? 'activeStyle' : ''"
            @click="activeTab = 2"
            v-if="[2, 3].includes(rowData.applyStatus)"
            >审批回复</span
          >
        </div>
        <div class="basic-info" v-show="activeTab == 0">
          <div class="custom_tab">
            <div class="flex4">
              <div class="type_content" style="z-index: 2">
                <div class="flex3">
                  <span class="width_35">企业名称</span>
                  <span class="width_65">{{
                    supplierDetail.enterpriseName
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color">企业类型</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.companyTypeName
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35">开户行</span>
                  <span class="width_65">{{ supplierDetail.bankname }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color">注册人申请电话</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.registerPersonPhoneTel
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35">法人电话</span>
                  <span class="width_65">{{
                    supplierDetail.legalPersonTel
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color">营业执照截止日期</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.businessLicenseEndDate
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35">企业邮箱</span>
                  <span class="width_65">{{
                    supplierDetail.enterpriseEmail
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color">劳资证书号</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.qualificationNumber
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35">单位性质</span>
                  <span class="width_65" style="white-space: nowrap">{{
                    supplierDetail.enterpriseProperty == 1
                      ? "国有企业"
                      : supplierDetail.enterpriseProperty == 2
                      ? "三资企业"
                      : supplierDetail.enterpriseProperty == 3
                      ? "集体企业"
                      : supplierDetail.enterpriseProperty == 4
                      ? "私营企业"
                      : ""
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color">项目负责人</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.projectDirectorName
                  }}</span>
                </div>
              </div>
              <div class="type_content">
                <div class="flex3">
                  <span class="width_35 border_l">资质图片</span>
                  <span class="width_65"
                    ><img
                      :src="supplierDetail.enterpriseQualificationUrl"
                      style="
                          width: 40px;
                          height: 40px;
                          margin-top: 2px;
                          cursor: pointer;
                        "
                      @click="
                        bigImageDialog = true;
                        bigImageUrl = supplierDetail.enterpriseQualificationUrl;
                      "
                  /></span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color border_l">法定代表人</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.enterpriseLegalPerson
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 border_l">统一社会信用代码</span>
                  <span class="width_65">{{ supplierDetail.socialCode }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color border_l">注册资金(万元)</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.registeredCapital
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 border_l">银行账号</span>
                  <span class="width_65">{{
                    supplierDetail.bankcardnumber
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color border_l">营业执照注册号</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.businessNumber
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 border_l">企业地址</span>
                  <span class="width_65">{{
                    supplierDetail.enterpriseAddress
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color border_l">安全生产许可证</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.enterpriseSafeAllow
                  }}</span>
                </div>
                <div class="flex3">
                  <span class="width_35 border_l">logo</span>
                  <span class="width_65"
                    ><img
                      :src="supplierDetail.logo"
                      style="
                          width: 40px;
                          height: 40px;
                          margin-top: 2px;
                          cursor: pointer;
                        "
                      @click="
                        bigImageDialog = true;
                        bigImageUrl = supplierDetail.logo;
                      "
                  /></span>
                </div>
                <div class="flex3">
                  <span class="width_35 bg_color border_l">项目负责人电话</span>
                  <span class="width_65 bg_color">{{
                    supplierDetail.projectDirectorPhone
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="company-qualification" v-show="activeTab == 1">
          <el-table class="tables" :data="dialogTableData" height="300">
            <el-table-column
              width="50"
              type="index"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="fileName"
              label="资质文件名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="fileNumber"
              label="资质文件编号"
              align="center"
            ></el-table-column>
            <el-table-column label="资质文件" align="center">
              <div slot slot-scope="scope">
                <img
                  :src="scope.row.fileUrl ? scope.row.fileUrl : []"
                  alt=""
                  width="50px"
                  @click="
                    bigImageDialog = true;
                    bigImageUrl = scope.row.fileUrl;
                  "
                />
              </div>
            </el-table-column>
            <el-table-column
              prop="remarks"
              label="备注"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div
          class="dialog-footer relative-group"
          v-show="activeTab == 1 && rowData.applyStatus == 1"
        >
          <el-button
            type="primary"
            @click="auditReplyDialog = true"
            size="medium"
            >审批
          </el-button>
        </div>
        <div class="audit-reply" v-show="activeTab == 2">
          <div class="audit-content">
            <div class="audit-content-item">
              <span>审批人：</span>
              <span>{{ replyData.applyUser }}</span>
            </div>
            <div class="audit-content-item">
              <span>审批回复时间：</span>
              <span>{{ replyData.replyTime }}</span>
            </div>
            <div class="audit-content-item">
              <span>审批回复：</span>
              <el-input
                v-model="replyData.applyContent"
                disabled
                type="textarea"
                :rows="5"
                style="flex: 1;align-self: flex-start"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 查看审批回复 -->
    <el-dialog
      class="replyDialog"
      title="审批回复"
      :visible.sync="auditReplyDialog"
      :modal-append-to-body="false"
      width="668px"
    >
      <div class="reply-content">
        <div class="reply-content-item">
          <span>审批人：</span>
          <span>{{ $store.state.userInfo.realName }}</span>
        </div>
        <div class="reply-content-item">
          <span>审批回复：</span>
          <el-input
            v-model="auditReplyVal"
            type="textarea"
            :rows="5"
            placeholder="请输入"
            style="width: 300px;align-self: flex-start"
          ></el-input>
        </div>
      </div>
      <div class="dialog-footer relative-group">
        <el-button
          class="cancleBtn"
          @click="noPassFn"
          icon="el-icon-circle-close"
          size="medium"
          type="danger"
          plain
          >审核拒绝
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="auditPass"
          size="medium"
          >审核通过
        </el-button>
      </div>
    </el-dialog>
    <!-- 查看大图 -->
    <el-dialog
      :modal-append-to-body="false"
      title="查看大图"
      :visible.sync="bigImageDialog"
    >
      <img width="100%" :src="bigImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import {
  getQualificationApplyListApi,
  getSupplierInfoRecordApi,
  getQualificationFileRecordApi,
  auditQualificationApplyApi,
  qualificationApplyInfoApi,
} from "@/assets/js/api/supplier.js";
import { getComapnyStatisticsListApi } from "@/assets/js/api/company/project";
import moment from "moment";
export default {
  name: "temporary",
  data() {
    return {
      bigImageDialog: false,
      bigImageUrl: "",
      auditReplyVal: "",
      dialogTableData: [],
      activeTab: 0,
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      workerName: "",
      projectSn: "",
      statusListData: [
        { name: "待审批", value: 1 },
        { name: "已审批", value: 2 },
        { name: "已驳回", value: 3 },
        { name: "已撤销", value: 4 },
      ],
      tableParameter: {
        applyStatus: "",
        timeRange: [],
      },
      relativeGroupDialog: false,
      level1CompanyData: [],
      filterText: "",
      defaultProps: {
        children: "list",
        label: "name",
      },
      auditReplyDialog: false,
      supplierDetail: {
        enterpriseName: "",
        enterpriseQualificationUrl: "",
        companyTypeName: "",
        xzSupplierTypeId: "",
        enterpriseLegalPerson: "",
        bankname: "",
        socialCode: "",
        registerPersonPhoneTel: "",
        registeredCapital: "",
        legalPersonTel: "",
        bankcardnumber: "",
        businessLicenseEndDate: "",
        businessNumber: "",
        enterpriseEmail: "",
        enterpriseAddress: "",
        qualificationNumber: "",
        enterpriseSafeAllow: "",
        enterpriseProperty: "",
        logo: "",
        projectDirectorName: "",
        projectDirectorPhone: "",
      },
      rowData: {},
      replyData: {},
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getTableList();
    this.loadData();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    // 查看详情-审批回复内容
    loadqulificationReplyRecord() {
      let requestData = {
        id: this.rowData.id,
      };
      qualificationApplyInfoApi(requestData).then((res) => {
        if (res.result) {
          this.replyData = res.result;
        }
      });
    },
    // 查看详情-企业资质
    loadCompanyQulificationRecord() {
      let requestData = {
        xzSupplierQualificationApplyId: this.rowData.id,
      };
      getQualificationFileRecordApi(requestData).then((res) => {
        console.log(res, "资质文件表格");
        if (res.result) {
          this.dialogTableData = res.result;
          this.dialogTableData.map((item) => {
            // if (!item.fileUrl.includes(this.$store.state.FILEURL)) {
            //   item.fileUrl = this.$store.state.FILEURL + item.fileUrl;
            // }
            if (!item.fileUrl.includes(this.$store.state.FILEURL)) {
              if(item.fileUrl.includes("name")){
                item.fileUrl = this.$store.state.FILEURL + JSON.parse(item.fileUrl)[0].url;
              } else {
                item.fileUrl = this.$store.state.FILEURL + item.fileUrl;
              }
            }
          });
        }
      });
    },
    // 查看详情-基本信息
    loadBasicInfoRecord() {
      getSupplierInfoRecordApi({
        xzSupplierQualificationApplyId: this.rowData.id,
      }).then((res) => {
        console.log(res, "基本信息");
        if (res.result) {
          for (let i in this.supplierDetail) {
            this.supplierDetail[i] = res.result[i];
          }
        }
      });
    },
    // 刷新
    refresh() {
      this.tableParameter = {
        applyStatus: "",
        timeRange: [],
      };
      this.searchData();
    },
    // 表格搜索
    searchData() {
      this.page = 1; // 回归第一页
      this.getTableList();
    },
    // 获取表格数据
    getTableList() {
      let requestData = {
        userId: this.$store.state.userInfo.userId,
        pageNo: this.page,
        pageSize: this.pageSize,
        applyStatus: this.tableParameter.applyStatus,
        projectSn: this.$store.state.projectSn,
      };
      if (
        this.tableParameter.timeRange &&
        this.tableParameter.timeRange.length > 0
      ) {
        requestData.createTime_begin = this.tableParameter.timeRange[0];
        requestData.createTime_end = this.tableParameter.timeRange[1];
      }
      getQualificationApplyListApi(requestData).then((res) => {
        console.log(res, "资质申请表格");
        if (res.result && res.result.records) {
          this.tableData = res.result.records;
          this.total = res.result.total;
        }
      });
    },
    // 查看审批详情
    showAudit(item) {
      this.rowData = item;
      this.activeTab = 0; // tab回归默认
      this.auditReplyVal = ""; // 审核回复内容框回归默认
      this.loadBasicInfoRecord();
      this.loadCompanyQulificationRecord();
      if ([2, 3].includes(this.rowData.applyStatus)) {
        this.loadqulificationReplyRecord();
      }
      this.relativeGroupDialog = true;
    },
    loadData() {
      let sn = this.$store.state.userInfo.sn;
      let projectType = 1; // 展示项目列表
      if (this.$store.state.userInfo.addProjectType == 1) {
        projectType = 0; // 不展示项目列表
      }
      getComapnyStatisticsListApi({
        sn: sn,
        projectType: projectType,
      }).then((res) => {
        console.log(res, "111222333");
        this.level1CompanyData = res.result.companyList
          ? res.result.companyList
          : res.result.projectList;
      });
      console.log(this.level1CompanyData, "111222333");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 拒绝申请
    noPassFn() {
      let item = this.rowData;
      this.$confirm(
        `确定要拒绝审核吗？`,
        this.$t("message.companyDiagram.Tips"),
        {
          confirmButtonText: this.$t(
            "message.companyDiagram.confirmButtonText"
          ), //确定
          cancelButtonText: this.$t("message.companyDiagram.cancelButtonText"), //取消
          type: "warning",
        }
      ).then(() => {
        auditQualificationApplyApi({
          id: item.id,
          applyStatus: 3,
          applyContent: this.auditReplyVal,
          applyUser: this.$store.state.userInfo.realName,
          replyTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        }).then((res) => {
          this.$message.error("已拒绝");
          this.relativeGroupDialog = false;
          this.auditReplyDialog = false;
          this.getTableList();
        });
      });
    },
    // 审批通过
    auditPass() {
      let item = this.rowData;
      this.$confirm(
        `确定要通过审核吗？`,
        this.$t("message.companyDiagram.Tips"),
        {
          confirmButtonText: this.$t(
            "message.companyDiagram.confirmButtonText"
          ), //确定
          cancelButtonText: this.$t("message.companyDiagram.cancelButtonText"), //取消
          type: "warning",
        }
      ).then(() => {
        auditQualificationApplyApi({
          id: item.id,
          applyStatus: 2,
          applyContent: this.auditReplyVal,
          applyUser: this.$store.state.userInfo.realName,
          replyTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        }).then((res) => {
          this.$message.success("已通过");
          this.relativeGroupDialog = false;
          this.auditReplyDialog = false;
          this.getTableList();
        });
      });
    },
    //切换数量
    handleSizeChange(value) {
      this.pageSize = value;
      this.getTableList();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.getTableList();
    },
  },
};
</script>
<style lang="less" scoped>
.treeStyle() {
  /deep/.el-tree {
    font-size: 15px;
    width: 100%;
    background-color: transparent;
    .el-tree-node {
      white-space: normal;
      &:focus > .el-tree-node__content {
        background-color: transparent;
      }
      &.is-current > .el-tree-node__content {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }
    }
    .el-tree-node__content {
      // height: 32px;
      padding: 7px 0;
      height: auto;
      line-height: 16px;
      position: relative;
      // margin-bottom: 7px;
      &:hover {
        background-color: rgba(81, 129, 246, 0.14);
        color: #5181f6;
      }

      .videoName {
        font-size: 14px;
      }
      .projectName {
        font-size: 14px;
        width: calc(100% - 55px);
        display: inline-block;
      }
      .companyName2 {
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
        width: 192px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .el-tree-node__expand-icon {
      font-size: 16px;
      padding: 0 6px;
      &.is-leaf {
        color: transparent !important;
      }
    }
    .treeTitle {
      background-color: #f7f7f7;
      margin-bottom: 10px;
    }
  }
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex3 {
  display: flex;
  align-items: center;
}
.flex4 {
  display: flex;
  justify-content: space-between;
}
.flex5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.temporary {
  width: 100%;
  height: 100%;

  .content {
    padding: 15px 0;
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 42px);
  }
  .title_wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    border-bottom: 2px solid @borderColor;
  }
  .tableBtns {
    .flex();
    justify-content: center;
  }
}
// 查看详情弹框样式
.auditDialog /deep/ .el-dialog__body {
  padding-top: 0px;
  padding-bottom: 30px;
}
.dialog_content {
  padding: 0px;
  .tab-content {
    margin-top: 10px;
    display: flex;
    align-items: center;
    span {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #272d45;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
    }
    span:nth-child(1),
    span:nth-child(2) {
      margin-right: 20px;
    }
    .activeStyle {
      color: #5181f6;
    }
  }
  .basic-info {
    margin-top: 20px;
    .custom_tab {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid rgba(148, 148, 148, 0.5);
      border-bottom: none;
      // color: #333;
      .title {
        width: 100%;
        font-size: 14px;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(148, 148, 148, 0.5);
        box-sizing: border-box;
        height: 44px;
        background: #eeeeee;
      }

      .type_content {
        width: 50%;
        div {
          font-size: 14px;
          padding: 12px 0;
          height: 44px;
          line-height: 44px;
          box-sizing: border-box;
          border-bottom: 1px solid rgba(148, 148, 148, 0.5);
        }
      }

      .width_65 {
        width: 80%;
        display: inline-block;
        box-sizing: border-box;
        height: 44px;
        padding: 0 15px;
      }
      .width_35 {
        width: 20%;
        display: inline-block;
        box-sizing: border-box;
        border-right: 1px solid rgba(148, 148, 148, 0.5);
        padding: 0 15px;
        text-align: left;
      }
    }
    .bg_color {
      background: rgba(235, 234, 234, 0.5);
      display: inline-block;
      box-sizing: border-box;
    }
    .border_l {
      border-left: 1px solid rgba(148, 148, 148, 0.5);
    }
  }
  .company-qualification {
    margin-top: 20px;
  }
  .audit-reply {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    .audit-content {
      width: 100%;
      line-height: 40px;
      &-item {
        display: flex;
        span {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 400;
          color: #272d45;
          font-style: normal;
          text-transform: none;
        }
        span:nth-child(1) {
          display: inline-block;
          width: 105px;
          text-align: right;
        }
      }
    }
  }
}
// 审批回复弹框样式
.replyDialog /deep/ .el-dialog__body {
  padding: 10px 20px 15px 20px;
}
.reply-content {
  width: max-content;
  margin: 0 auto;
  line-height: 40px;
  &-item {
    display: flex;
    span {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      color: #272d45;
      font-style: normal;
      text-transform: none;
    }
    span:nth-child(1) {
      display: inline-block;
      width: 105px;
      text-align: right;
    }
  }
  &-item:nth-child(1) {
    align-items: center;
  }
}
</style>