|
@@ -0,0 +1,304 @@
|
|
|
+<template>
|
|
|
+ <!-- 历史签约弹窗 -->
|
|
|
+ <div class="history-contract-wrap">
|
|
|
+ <el-dialog :visible.sync="isPreview" :modal-append-to-body="false" @close="$emit('close')" 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");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.history-contract-wrap {
|
|
|
+ .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>
|