ss-crm-manage-web/src/views/Clue/Pool/index.vue

<template>
  <div>
    <div class="relative">
      <el-tabs v-model="searchForm.mode" size="small">
        <el-tab-pane label="全部" name="0" />
        <el-tab-pane name="1">
          <template #label>
            <Tooltip message="除了无效线索和已成交的线索" />
            <el-badge :value="123" :max="9999">
              <span class="ml-3px">未成交</span>
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="2">
          <template #label>
            <Tooltip message="下次跟进时间在今日之前的未成交线索" />
            <el-badge :value="234" :max="9999">
              <span class="ml-3px">待跟进</span>
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane name="3">
          <template #label>
            <Tooltip message="只有创建时间，无下次跟进时间的未成交线索" />
            <el-badge :value="423" :max="9999">
              <span class="ml-3px">新线索</span>
            </el-badge>
          </template>
        </el-tab-pane>
        <el-tab-pane label="公海" name="4" />
      </el-tabs>
      <div class="absolute" style="right: 10px; top: 0">
        <el-button plain v-hasPermi="['clue:pool:import']">导入</el-button>
        <el-button type="primary" @click="handleInsert" v-hasPermi="['clue:pool:add']">
          新增线索
        </el-button>
      </div>
    </div>
    <!-- 搜索工作栏 -->
    <Search :schema="allSchemas.searchSchema" labelWidth="0">
      <template #actionMore>
        <el-button @click="getTableList" v-hasPermi="['clue:pool:search']"> 搜索 </el-button>
        <el-button @click="resetQuery" v-hasPermi="['clue:pool:reset']"> 重置 </el-button>
      </template>
    </Search>
    <!-- 列表 -->
    <SSTable
      class="mt-20px"
      v-model:tableObject="tableObject"
      :tableColumns="allSchemas.tableColumns"
      @get-list="getTableList"
      @get-checked-columns="getCheckedColumns"
    >
      <el-table-column
        v-for="item in showColumns"
        :key="item.field"
        :prop="item.field"
        :label="item.label"
        min-width="120px"
      >
        <template #default="{ row }">
          <div v-if="item.field == 'followRecord'">
            <el-button
              type="primary"
              text
              style="padding: 0"
              @click="handleFollow(row)"
              v-hasPermi="['clue:pool:update']"
            >
              快速新增
            </el-button>
          </div>
          <div v-else-if="item.field == 'contact'">
            <span>{{ row[item.field] }}</span>
            <Icon class="ml-5px" icon="ep:phone" @click="makeCall(row.contact)" />
          </div>
          <span v-else>{{ row[item.field] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px" fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            link
            @click="handleDetail(scope.row)"
            v-hasPermi="['clue:pool:detail']"
          >
            详情
          </el-button>
          <el-button
            type="primary"
            link
            @click="handleEdit(scope.row)"
            v-hasPermi="['clue:pool:update']"
          >
            修改
          </el-button>
          <el-button
            type="primary"
            link
            @click="handleSuccess(scope.row)"
            v-hasPermi="['clue:pool:enroll']"
          >
            登记
          </el-button>
          <el-button type="primary" link v-hasPermi="['clue:pool:release']"> 释放 </el-button>
        </template>
      </el-table-column>
    </SSTable>

    <DialogClue ref="formRef" />
    <DrawerClue ref="drawerRef" />
    <DialogSuccess ref="successRef" />
    <DialogFollow ref="followRef" />
  </div>
</template>

<script setup name="CluePool">
import { allSchemas } from './cluePool.data'
import DialogClue from './Comp/DialogClue.vue'
import DrawerClue from './Comp/DrawerClue.vue'
import DialogSuccess from './Comp/DialogSuccess.vue'
import DialogFollow from './Comp/DialogFollow.vue'

const searchForm = ref({
  mode: '2'
})
const formRef = ref()
const drawerRef = ref()
const successRef = ref()
const followRef = ref()

// const { tableObject, tableMethods } = useTable({
//   getListApi: MailTemplateApi.getMailTemplatePage, // 分页接口
//   delListApi: MailTemplateApi.deleteMailTemplate // 删除接口
// })

const tableObject = ref({
  tableList: [{ name: '测试', contact: '17318531354' }],
  loading: false,
  total: 1,
  pageSize: 20,
  currentPage: 1
})

const showColumns = ref([])

// 初始化表格
function getCheckedColumns(list) {
  showColumns.value = list
}

function resetQuery() {
  searchForm.value = {
    pageNo: 1,
    pageSize: 10
  }
  getTableList()
}

function getTableList() {
  // 查询
}

// 新增
function handleInsert() {
  formRef.value.open('create', null)
}
// 编辑
function handleEdit(row) {
  formRef.value.open('update', row)
}
// 详情
function handleDetail(row) {
  drawerRef.value.open(row)
}

function handleFollow(row) {
  followRef.value.open('create', row)
}

async function makeCall(phone) {
  console.log('打电话:' + phone)
}

// 登记
function handleSuccess(row) {
  successRef.value.open(row)
}
</script>

<style lang="scss" scoped></style>