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

<script setup>
import { ref,watch } from "vue";
import { useRouter} from 'vue-router';
import { InfoFilled } from '@element-plus/icons-vue'

import {formatTime} from "@/hooks/mixins/index.js"

const $router=useRouter() 

const props = defineProps({
  isPreview: {
    type: Boolean,
    default: false,
  },
  dealList: {
    type: Array,
    default: () => {
      return [];
    },
  },
})
const emits=defineEmits(['update:isPreview','update:dealList'])

const ficcContractList=ref([])
const raiContractList=ref([])
const contractList=ref([])
const contractType=ref("")
const showViewer=ref(false)
const constractFileImgList=ref([])

watch(()=>props.isPreview,(val)=>{
  console.log(val,'val');
  if (val) {
    getContractList();
  }
})

const getContractList=()=>{
  ficcContractList.value = props.dealList.filter((i) => i.ProductId === 1);
  raiContractList.value = props.dealList.filter((i) => i.ProductId === 2);
  changeContractType("ficc");
  if (!ficcContractList.value.length && raiContractList.value.length) {
    changeContractType("rai");
  }
}
const changeContractType=(type)=>{
  if (contractType.value === type) return;
  contractType.value = type;
  type === "ficc" && (contractList.value = ficcContractList.value);
  type === "rai" && (contractList.value = raiContractList.value);
}
const showContractFiles=(data)=>{
  constractFileImgList.value = [];
  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) => {
    constractFileImgList.value.push(i.url);
  });
  if (constractFileImgList.value.length) {
    showViewer.value = true;
  }
}
const preViewConstractFile=(data, list = [])=>{
  constractFileImgList.value = [];
  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) => {
        constractFileImgList.value.push(i.url);
      });
    const index = constractFileImgList.value.findIndex((url) => url === data.url);
    constractFileImgList.value = [...constractFileImgList.value.slice(index), ...constractFileImgList.value.slice(0, index)];
    if (constractFileImgList.value.length) {
      showViewer.value = true;
    }
  }
}
const showExpand=(index, type = "root")=>{
  type === "root" && (contractList.value[index].extend = !contractList.value[index].extend);
  type === "files" && (contractList.value[index].filesExtend = !contractList.value[index].filesExtend);
  contractList.value.splice(index, 1, contractList.value[index]);
}
const toContractDetail=(item)=>{
  if (!item.ContractId) return;
  const { href } = $router.resolve({ path: "/contractdetail", query: { contractId: item.ContractId } }) || { href: "" };
  href && window.open(href, "_blank");
}
const closePreview=()=>{
  emits("update:isPreview", false);
  emits("update:dealList", []);
}

</script>

<template>
  <!-- 历史签约弹窗 -->
  <div>
    <el-dialog
      v-model="props.isPreview"
      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 size="large">
                {{ item.ContractType }}
                <el-tooltip class="item" effect="dark" v-if="item.ContractType != '补充协议'" placement="top-start">
                  <template #content v-if="item.ContractType == '新签合同'">
                    没有正式转试用记录的客户，在申请转正时提交的合同
                  </template>
                  <template #content v-if="item.ContractType == '续约合同'">
                    1、有正式转试用记录的客户，在申请转正时提交的合同<br />
                    2、所有客户在续约申请时提交的合同
                  </template>
                  <el-icon :size="17" style="width: 17px;"><InfoFilled /></el-icon>
                </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>审批时间：{{ formatTime(item.ModifyTimeStr) }}</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="margin-right: 30px; font-weight: 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"
        @close="
          () => {
            showViewer = false;
          }
        "
        :url-list="constractFileImgList"
      />
    </el-dialog>
  </div>
</template>

<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>
<style lang="scss">
  .contract-tag{
    .el-tag{
      .el-tag__content{
        display:inline-flex;
        align-items:center;
        margin-left:0!important;
        i{
          margin-left:4px;
        }
      }
    }
  }
</style>