hz_crm_web/src/views/contract_manage/components/raiHistoryContract.vue

<template>
  <!-- 历史签约弹窗 -->
  <div>
    <el-dialog
      :visible.sync="isPreview"
      custom-class="history-contract-wrap-content_rai"
      append-to-body="true"
      :modal-append-to-body="false"
      @close="closePreview"
      title="历史签约"
      center
      top="7vh"
      v-dialogDrag
      width="1200px"
    >
      <div class="dialog-wrap">
        <div class="contract-list">
          <div class="contract-item" v-for="(item, index) in contractList" :key="item.ContractCode">
            <div class="contract-tag">
              <el-tag>
                {{ item.ContractType }}
                <el-tooltip class="item" effect="dark" v-if="item.ContractType != '补充协议'" placement="top-start">
                  <div slot="content" v-if="item.ContractType == '新签合同'">没有正式转试用记录的客户，在申请转正时提交的合同</div>
                  <div slot="content" v-if="item.ContractType == '续约合同'">
                    1、有正式转试用记录的客户，在申请转正时提交的合同<br />
                    2、所有客户在续约申请时提交的合同
                  </div>
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </el-tag>
              <span :style="{ 'text-decoration-line': item.ContractId ? 'underline' : 'none' }" @click="toContractDetail(item)">合同编号：{{ item.ContractCode }}</span>
            </div>
            <div class="line"></div>
            <!-- 合同基本信息 -->
            <div class="contract-base">
              <ul class="base-lise">
                <li>
                  <p>合同期限：{{ item.StartDate + "~" + item.EndDate }}</p>
                  <p>合同金额：{{ item.Money }}</p>
                </li>
                <li>
                  <p>付款方式：{{ item.PayMethod }}</p>
                  <p>付款渠道：{{ item.PayChannel }}</p>
                </li>
                <li>
                  <p>审批时间：{{ item.ModifyTimeStr | formatTime }}</p>
                  <p></p>
                </li>
              </ul>
            </div>
            <!-- 权限设置和查看附件 -->
            <div class="contract-info">
              <div @click="showExpand(index, 'root')">
                权限设置 <span><i :class="item.extend ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i></span>
              </div>
            </div>
            <div class="contract-root" v-show="item.extend">
              <ul class="menu_lists">
                <li v-for="auth in item.PermissionList" :key="auth.ClassifyName" class="menu_item">
                  <el-checkbox :indeterminate="auth.CheckList.length > 0 && auth.CheckList.length < auth.Items.length" v-model="auth.CheckAll" disabled style="marginright: 30px; fontweight: bold">{{
                    auth.ClassifyName + ":"
                  }}</el-checkbox>
                  <el-checkbox-group v-model="auth.CheckList" disabled>
                    <el-checkbox v-for="list in auth.Items" :label="list.ChartPermissionId" :key="list.ChartPermissionId" class="list_item">{{ list.PermissionName }}</el-checkbox>
                  </el-checkbox-group>
                </li>
              </ul>
            </div>
            <div class="contract-info">
              <div @click="showExpand(index, 'files')">
                合同附件 <span><i :class="item.filesExtend ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i></span>
              </div>
            </div>
            <div class="contract-files" v-show="item.filesExtend">
              <ul class="file-list">
                <li v-for="img in item.constractFiles" :key="img">
                  <img :src="require('@/assets/img/constract/word-icon.png')" v-if="img.type == 'word'" @click="preViewConstractFile(img)" />
                  <img :src="require('@/assets/img/constract/pdf.png')" v-else-if="img.type == 'pdf'" @click="preViewConstractFile(img)" />
                  <img :src="img.url" v-else-if="img.type == 'img'" @click="preViewConstractFile(img, item.constractFiles)" />
                </li>
              </ul>
            </div>
          </div>
          <span v-if="!contractList.length" style="font-size: 16px; color: #999">暂无历史合同</span>
        </div>
      </div>
      <el-image-viewer
        v-if="showViewer"
        :on-close="
          () => {
            this.showViewer = false;
          }
        "
        :url-list="constractFileImgList"
      />
    </el-dialog>
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
  props: {
    isPreview: {
      type: Boolean,
      default: false,
    },
    dealList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: { ElImageViewer },
  watch: {
    isPreview(val) {
      if (val) {
        this.getContractList();
      }
    },
  },
  data() {
    return {
      ficcContractList: [],
      raiContractList: [],
      contractList: [],
      contractType: "",
      showViewer: false,
      constractFileImgList: [],
    };
  },
  methods: {
    getContractList() {
      this.ficcContractList = this.dealList.filter((i) => i.ProductId === 1);
      this.raiContractList = this.dealList.filter((i) => i.ProductId === 2);
      this.changeContractType("ficc");
      if (!this.ficcContractList.length && this.raiContractList.length) {
        this.changeContractType("rai");
      }
    },
    changeContractType(type) {
      if (this.contractType === type) return;
      this.contractType = type;
      type === "ficc" && (this.contractList = this.ficcContractList);
      type === "rai" && (this.contractList = this.raiContractList);
    },
    showContractFiles(data) {
      this.constractFileImgList = [];
      const { constractFiles } = data;
      const imageList = constractFiles.filter((i) => i.type === "img");
      const wordList = constractFiles.filter((i) => i.type === "word");
      const pdfList = constractFiles.filter((i) => i.type === "pdf");
      imageList.forEach((i) => {
        this.constractFileImgList.push(i.url);
      });
      if (this.constractFileImgList.length) {
        this.showViewer = true;
      }
    },
    preViewConstractFile(data, list = []) {
      this.constractFileImgList = [];
      if (data.type === "word") {
        window.open("https://view.officeapps.live.com/op/view.aspx?src=" + data.url, "_blank");
      }
      if (data.type === "pdf") {
        window.open(data.url);
      }
      if (data.type === "img") {
        //改变list的顺序,当前点击的为第一个
        list
          .filter((i) => i.type === "img")
          .map((i) => {
            this.constractFileImgList.push(i.url);
          });
        const index = this.constractFileImgList.findIndex((url) => url === data.url);
        this.constractFileImgList = [...this.constractFileImgList.slice(index), ...this.constractFileImgList.slice(0, index)];
        if (this.constractFileImgList.length) {
          this.showViewer = true;
        }
      }
    },
    showExpand(index, type = "root") {
      type === "root" && (this.contractList[index].extend = !this.contractList[index].extend);
      type === "files" && (this.contractList[index].filesExtend = !this.contractList[index].filesExtend);
      this.contractList.splice(index, 1, this.contractList[index]);
    },
    toContractDetail(item) {
      if (!item.ContractId) return;
      const { href } = this.$router.resolve({ path: "/contractdetail", query: { contractId: item.ContractId } }) || { href: "" };
      href && window.open(href, "_blank");
    },
    closePreview() {
      this.$emit("update:isPreview", false);
      this.$emit("update:dealList", []);
    },
  },
};
</script>

<style lang="scss">
.history-contract-wrap-content_rai {
  .dialog-wrap {
    padding: 5px 60px 30px 60px;
    .contract-tab {
      display: flex;
      margin-bottom: 30px;
      span {
        flex: 1;
        text-align: center;
        font-size: 16px;
        padding-bottom: 5px;
        cursor: pointer;
        &.active {
          color: #0052d9;
          border-bottom: 2px solid #0052d9;
        }
      }
    }
    .contract-list {
      max-height: 600px;
      min-height: 200px;
      overflow-y: auto;
      padding-right: 6px;
      .contract-item {
        padding: 20px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        gap: 20px 0;
        .contract-tag {
          span {
            cursor: pointer;
            &:last-child {
              margin-left: 12px;
            }
            font-size: 16px;
            color: #409eff;
          }
        }
        .line {
          height: 1px;
          background-color: #dcdfe6;
          margin: 0 -20px;
        }
        .contract-base {
          li {
            display: flex;
            border: 1px solid #dcdfe6;
            border-bottom: none;
            &:last-child {
              border-bottom: 1px solid #dcdfe6;
            }
            p {
              font-size: 16px;
              flex: 1;
              min-height: 48px;
              display: flex;
              align-items: center;
              margin-left: 20px;
              &:first-child {
                border-right: 1px solid #dcdfe6;
              }
            }
          }
        }
        .contract-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          div,
          i::before {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            cursor: pointer;
          }
        }
        .contract-root {
          border: 2px dashed #dcdfe6;
          border-radius: 4px;
          padding: 20px;
          .menu_lists {
            li {
              display: flex;
              margin-bottom: 20px;
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
        .contract-files {
          .file-list {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            li {
              width: 240px;
              height: 180px;
              padding: 10px;
              box-sizing: border-box;
              cursor: pointer;
              border-radius: 4px;
              background-color: rgb(170, 170, 170);
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>