eta_mini_crm_front/src/views/customer/PotentialUserList.vue

<script setup>
import { Search } from '@element-plus/icons-vue'
import { apiCustomerUser } from '@/api/customer'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import EnableUser from './components/EnableUser.vue'

const router = useRouter()

const filterState = reactive({
  regsiterTime: [],
  readTime: [],
  sortType:'',
  sortVal:''
})


const tableColOpt = [
  {
    label: '手机号',
    key: 'Phone'
  },
  {
    label: '邮箱',
    key: 'Email'
  },
  {
    label: '注册时间',
    key: 'RegisterTime',
    sort: true
  },
  {
    label: '最近一次阅读时间',
    key: 'LastUpdateTime',
    sort: true
  },
  {
    label: '累计阅读次数',
    key: 'ReadCnt',
    sort: true,
  },
]
const userList = ref([])
const page = ref(1)
const pageSize = ref(10)
const tableLoading = ref(false)
const totals = ref(0)
async function getUserList() {
  tableLoading.value = true
  const res = await apiCustomerUser.potentialUserList({
    PageSize: pageSize.value,
    CurrentIndex: page.value,
    KeyWord: filterState.keyword,
    RegisterStartDate: filterState.regsiterTime ? filterState.regsiterTime[0] : '',
    RegisterEndDate: filterState.regsiterTime ? filterState.regsiterTime[1] : '',
    SortParam:filterState.sortType,
    SortType:filterState.sortVal
  })
  tableLoading.value = false
  if (res.Ret === 200) {
    userList.value = res.Data.List || []
    totals.value = res.Data.Paging.Totals
  }
}
getUserList()
function handlePageChange(e) {
  page.value = e
  getUserList()
}
function handleTableSort(e) {
  // console.log(e);
  const { order, prop } = e//order:"descending",prop: "RegisterTime"
  filterState.sortType=prop
  if(!order){
    filterState.sortVal=''
  }else{
    filterState.sortVal=order==='descending'?'desc':'asc'
  }
  handleFilterList()
}

function handleFilterList() {
  page.value = 1
  getUserList()
}



function handleEditUser(e) {
  router.push({
    path: '/customer/userTransform',
    query: {
      id: e.UserId
    }
  })
}


</script>

<template>
  <div class="potential-user-list-page">
    <div class="flex filter-wrap">
      <div style="width: 235px">
        <el-date-picker
          style="width: 235px"
          v-model="filterState.regsiterTime"
          type="daterange"
          range-separator="至"
          start-placeholder="注册时间"
          end-placeholder="注册时间"
          value-format="YYYY-MM-DD"
          @change="handleFilterList"
        />
      </div>
      <div style="width: 235px">
        <el-date-picker
          style="width: 235px"
          v-model="filterState.readTime"
          type="daterange"
          range-separator="至"
          start-placeholder="最近一次阅读时间"
          end-placeholder="最近一次阅读时间"
          value-format="YYYY-MM-DD"
          @change="handleFilterList"
        />
      </div>
      <el-input
        placeholder="姓名/手机号/邮箱"
        v-model="filterState.keyword"
        :prefix-icon="Search"
        clearable
        style="max-width: 359px;margin-left:auto"
        @input="handleFilterList"
      />
    </div>
    <div class="userlist-wrap" style="margin-top: 20px">
      <el-table
        :data="userList"
        border
        highlight-current-row
        element-loading-text="数据加载中..."
        v-loading="tableLoading"
        @sort-change="handleTableSort"
      >
        <el-table-column
          v-for="column in tableColOpt"
          :key="column.key"
          :prop="column.key"
          :label="column.label"
          align="center"
          :sortable="column.sort ? 'custom' : false"
        >
          <template v-if="column.headerTips" #header>
            <span>{{ column.label }}</span>
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="column.headerTips"
              placement="top"
            >
              <el-icon style="position: relative; top: 2px"
                ><i-ep-QuestionFilled
              /></el-icon>
            </el-tooltip>
          </template>
          <template #default="{ row }">
            <span
              v-if="column.key === 'Status'"
              :style="{ color: !row.Status ? '#f00' : '' }"
              >{{ row.Status ? "启用" : "禁用" }}</span
            >
            <span v-else>{{ row[column.key] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEditUser(row)"
              >转客户</el-button
            >
            
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total,prev,pager,next,jumper"
        :current-page="page"
        :page-size="pageSize"
        :total="totals"
        @current-change="handlePageChange"
        style="margin-top: 30px; justify-content: flex-end"
      />
    </div>
  </div>

</template>

<style lang="scss" scoped>
.potential-user-list-page {
  width: 100%;
  overflow: hidden;
  .filter-wrap {
    flex-wrap: wrap;
    gap: 10px;
  }
}
</style>