kd-aiot-frontend-eom/src/views/saleManage/followList/components/list.vue

<template>
  <div>
    <search-table @search="reload"></search-table>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      height="calc(100vh - 365px)"
      full-height="calc(100vh - 116px)"
      tool-class="ele-toolbar-form"
      :selection.sync="selection"
      :page-size="20"
      @columns-change="handleColumnChange"
      :cache-key="cacheKeyUrl + queryType"
      :initLoad="false"
    >
      <template v-slot:followupCount="{ row }">
        <el-link
          type="primary"
          :underline="false"
          @click="handleAddOrEdit(row, 'view')"
        >
          {{ row.followupCount }}
        </el-link>
      </template>

      <template v-slot:toolbar v-if="queryType === 0">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          class="ele-btn-icon"
          @click="openEdit('add', {})"
        >
          新建
        </el-button>
        <el-button
          size="small"
          type="danger"
          el-icon-delete
          class="ele-btn-icon"
          @click="allDelBtn"
          :disabled="selection?.length === 0"
        >
          批量删除
        </el-button>
      </template>

      <template v-slot:action="{ row }">
        <el-link
          type="primary"
          :underline="false"
          icon="el-icon-edit"
          @click="openEdit('编辑', row)"
        >
          修改
        </el-link>

        <el-popconfirm
          class="ele-action"
          title="确定要删除此信息吗？"
          @confirm="remove(row)"
        >
          <template v-slot:reference>
            <el-link type="danger" :underline="false" icon="el-icon-delete">
              删除
            </el-link>
          </template>
        </el-popconfirm>
      </template>
    </ele-pro-table>

    <viewDialog ref="viewDialogRef"></viewDialog>

    <AddFollowDialog ref="addFollowDialogRef" @done="done"></AddFollowDialog>
  </div>
</template>

<script>
  import tabMixins from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';
  import viewDialog from './viewDialog.vue';
  import searchTable from './searchTable.vue';
  import { groupByContact } from '@/api/saleManage/contact.js';

  import AddFollowDialog from './addFollowDialog.vue';

  export default {
    mixins: [dictMixins, tabMixins],
    components: {
      searchTable,
      viewDialog,
      AddFollowDialog
    },
    props: {
      queryType: {
        default: 0,
        type: Number
      }
    },
    data() {
      return {
        // 加载状态
        loading: false,
        cacheKeyUrl: 'eos-be72e790-followList-myList',
        columnsVersion: 1,
        selection: []
      };
    },
    computed: {
      columns() {
        // 当columnsVersion变化时会重新计算,用作更新列配置
        const version = this.columnsVersion;
        let arr = [
          {
            width: 60,
            label: '序号',
            type: 'index',
            columnKey: 'index',
            align: 'center'
          },
          {
            minWidth: 200,
            prop: 'contactName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'userName',
            label: '负责人',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 150,
            prop: 'deptName',
            label: '负责人部门',
            align: 'center',
            showOverflowTooltip: true
          },

          {
            minWidth: 150,
            prop: 'followupCount',
            label: '跟进次数',
            align: 'center',
            slot: 'followupCount',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'beginTime',
            label: '开始跟进时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            minWidth: 200,
            prop: 'lastTime',
            label: '最近一次跟进时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            columnKey: 'action',
            label: '操作',
            width: 180,
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ];

        if (this.queryType === 1) {
          arr.pop();
        }

        return arr;
      }
    },
    created() {},
    methods: {
      //新增、修改
      handleAddOrEdit(row = {}) {
        this.$nextTick(() => {
          this.$refs.viewDialogRef.open({
            contactId: row.contactId,
            deptIds: row.deptIds,
            beginTime: row.beginTime,
            endTime: row.endTime,
            deptId: row.deptId,
            userId: row.userId
          });
        });
      },

      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return groupByContact({
          pageNum: page,
          size: limit,
          ...where,
          queryType: this.queryType
        });
      },

      /* 刷新表格 */
      reload(where = {}) {
        this.$refs.table.reload({ page: 1, where });
      },
      openEdit(type, row, index) {
        this.$refs.addFollowDialogRef.open(type, row, index);
        this.$refs.addFollowDialogRef.$refs.form &&
          this.$refs.addFollowDialogRef.$refs.form.clearValidate();
      },
      allDelBtn() {},
      remove() {},
      done({ data }) {
        console.log(data);
      }
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.el-link--inner) {
    margin-left: 0px !important;
  }

  .sys-organization-list {
    height: calc(100vh - 264px);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    overflow: auto;
  }

  .sys-organization-list :deep(.el-tree-node__content) {
    height: 40px;

    & > .el-tree-node__expand-icon {
      margin-left: 10px;
    }
  }
</style>