hz_crm_web/src/views/dataReport_manage/components/DataSummary.vue

<template>
  <div>
    <el-dialog v-dialogDrag :title="title" :visible.sync="visible" :close-on-click-modal="false" :modal-append-to-body="false" width="60%" @close="closeDialog">
      <p v-if="isShowText">共xxx家客户，其中x家客户有多份合同</p>
      <el-table :data="tableData" border style="margin: 20px 0; height: 400px">
        <el-table-column v-for="(col, index) in columns" :key="index" :prop="col.prop" :label="col.label" align="center">
          <template slot-scope="{ row }" v-if="col.label === '操作'">
            <span style="color: #409eff; cursor: pointer; font-size: 14px; margin-right: 20px" @click="historicalNotesClickHandler(row)">历史备注</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <HistoricalNotesDlg :historicalNotesDlgVisible.sync="historicalNotesDlgVisible" :CompanyId.sync="historicalNotesId" />
  </div>
</template>

<script>
import HistoricalNotesDlg from "@/components/historicalNotesDlg.vue";

export default {
  name: "",
  components: { HistoricalNotesDlg },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    columns: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      tableData: [],
      historicalNotesDlgVisible: false, //历史备注的弹框
      historicalNotesId: 0,
    };
  },
  computed: {
    isShowText() {
      return ["新签合同", "到期合同", "续约合同", "确认不续约合同"].includes(this.title);
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    closeDialog() {},
    // 点击了历史留言
    historicalNotesClickHandler(row) {
      this.historicalNotesDlgVisible = true;
      this.historicalNotesId = Number(this.companyId);
    },
  },
};
</script>
<style scoped lang=""></style>