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>导入</el-button>
        <el-button type="primary" @click="handleInsert">新增</el-button>
      </div>
    </div>
    <!-- 搜索工作栏 -->
    <Search
      :schema="allSchemas.searchSchema"
      labelWidth="0"
      @search="setSearchParams"
      @reset="setSearchParams"
    />
    <!-- 列表 -->
    <SSTable
      class="mt-20px"
      v-model:tableObject="tableObject"
      :tableColumns="allSchemas.tableColumns"
      @get-list="getTableList"
    >
      <el-table-column
        v-for="item in allSchemas.tableColumns"
        :key="item.field"
        :prop="item.field"
        :label="item.label"
        min-width="120px"
      />
      <el-table-column label="操作" width="200px" fixed="right">
        <template #default="scope">
          <el-button type="primary" link @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="primary" link @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="primary" link @click="handleSuccess(scope.row)">登记</el-button>
          <el-button type="primary" link>释放</el-button>
        </template>
      </el-table-column>
    </SSTable>

    <DialogClue ref="formRef" />
    <DrawerClue ref="drawerRef" />
    <DialogSuccess ref="successRef" />
  </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'

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

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

const tableObject = ref({
  tableList: [{ name: '测试', contact: '18888888888' }],
  loading: false,
  total: 1,
  pageSize: 20,
  currentPage: 1
})
const setSearchParams = function () {
  // 方法体
}

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 handleSuccess(row) {
  successRef.value.open(row)
}
</script>

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