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

<template>
  <el-dialog title="关联合同" width="90%" :append-to-body="true" :visible.sync="isShowDlg" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
    <allocation-lable :tableList="datalist" typeLable="关联合同" @isPreviewHistoryDetail="isPreviewHistoryDetail" @allocationDetail="allocationDetail" />
    <el-col :span="24" class="toolbar">
      <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
    </el-col>
    <rai-history-contract :isPreview.sync="isPreview" :dealList.sync="dealList" />
    <allocation-detail :allocationDetailVisible.sync="allocationDetailVisible" :allocationDetailForm.sync="allocationDetailForm" />
  </el-dialog>
</template>

<script>
import { contractInterface } from "@/api/api.js";
import AllocationLable from "./allocationLable.vue";
import mPage from "@/components/mPage.vue";
import RaiHistoryContract from "./raiHistoryContract.vue";
import AllocationDetail from "./allocationDetail.vue";
export default {
  name: "",
  components: { AllocationLable, RaiHistoryContract, mPage, AllocationDetail },
  props: {
    isShowDlg: {
      type: Boolean,
      default: false,
    },
    listDlg: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      datalist: [],
      page_no: 1,
      total: 0, //条数
      PageSize: 10, //每页显示几条
      dealList: [],
      isPreview: false,
      allocationDetailVisible: false,
      allocationDetailForm: {},
    };
  },
  computed: {},
  watch: {
    isShowDlg: {
      handler(newVal) {
        newVal && this.getList();
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 关闭弹框
    handleClose() {
      this.$emit("update:isShowDlg", false);
      this.$emit("update:listDlg", false);
    },

    // 获取数据
    async getList() {
      console.log(this.listDlg);
      const res = await contractInterface.getAllocationContract({
        ResearcherRealName: this.listDlg.RealName,
        PageSize: this.PageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.datalist = res.Data.List;
        this.total = res.Data.Paging.Totals;
      }
    },
    // 非标准预览
    isPreviewHistoryDetail(res) {
      this.isPreview = true;
      this.dealList = res.Data.List;
    },
    //分页
    handleCurrentChange(page) {
      this.page_no = page;
      this.getList();
    },
    // 派点详情
    allocationDetail(item) {
      this.allocationDetailVisible = true;
      this.allocationDetailForm = item;
      this.allocationDetailForm.isDlgType = "关联合同";
    },
  },
};
</script>
<style scoped lang="scss">
.content-box-table-detail {
  height: 400px;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  margin-top: 20px;
  .table-cont-top {
    position: sticky;
    top: 0;
    left: 0;
  }
  .table-cont {
    display: flex;
  }
  .head-column {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dcdfe6;
    background-color: #ebeef5;
    color: #333333;
    font-weight: 500;
    margin-top: -1px;
    margin-left: -0.5px;
  }
  .head-column-item {
    width: 107px;
    height: 48px;
  }
  .head-column-item-Proportion {
    width: 73px;
    height: 48px;
  }
}
</style>