cxyy-web/src/views/center/collection.vue

<template>
  <div class="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <div class="one_left">
            <span>收藏分类</span>
            <el-select v-model="searchForm.type" placeholder="请选择" style="width: 240px" @change="search">
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <div class="one_right">
            <el-input v-model="searchForm.name" style="width: 250px" size="large" placeholder="搜索" @change="search" :suffix-icon="Search" />
          </div>
        </el-col>
        <el-col :span="24" class="two">
          <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }">
            <template #empty>
              <el-empty description="暂无数据" />
            </template>
            <el-table-column prop="source_name" align="center" label="名称" />
            <el-table-column prop="created_time" align="center" label="收藏时间" width="180" />
            <el-table-column prop="status" align="center" label="来源" width="180">
              <template #default="scope">
                <div>{{ getDict(scope.row.type, 'type') }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template #default="{ row }">
                <el-link :underline="false" type="primary" size="mini" @click="toView(row)" style="margin-right: 10px">查看</el-link>
                <el-link :underline="false" type="danger" size="mini" @click="toDelete(row)"> 取消收藏 </el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24" class="thr">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 路由
const router = useRouter()

// 接口
import { CollectionStore } from '@/store/api/platform/collection'
const store = CollectionStore()
import { DictDataStore } from '@/store/api/system/dictData'
const dictDataStore = DictDataStore()
// 加载中
const loading = ref(false)
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const currentPage = ref(1)
const searchForm = ref({})
// 字典表
const typeList = ref([])
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  loading.value = false
})
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit,
    user: user.value.id,
    ...searchForm.value
  }
  const res = await store.list(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const searchOther = async () => {
  let result
  // 类型
  result = await dictDataStore.query({ code: 'collectType', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
}
// 字典数据转换
const getDict = (data, model) => {
  if (data) {
    let res
    if (model == 'type') res = typeList.value.find((f) => f.value == data)
    return get(res, 'label')
  }
}
// 查看
const toView = (data) => {
  if (data.type == 'achievement') router.push({ path: '/achievement/detail', query: { id: data.source } })
  if (data.type == 'company') router.push({ path: '/company/detail', query: { id: data.source } })
  if (data.type == 'demand') router.push({ path: '/demand/detail', query: { id: data.source } })
  if (data.type == 'expert') router.push({ path: '/expert/detail', query: { id: data.source } })
  if (data.type == 'match') router.push({ path: '/match/detail', query: { id: data.source } })
  if (data.type == 'news') router.push({ path: '/news/detail', query: { id: data.source } })
  if (data.type == 'footplate') router.push({ path: '/platform/detail', query: { id: data.source } })
  if (data.type == 'project') router.push({ path: '/project/detail', query: { id: data.source } })
  if (data.type == 'support') router.push({ path: '/service/detail', query: { id: data.source } })
  if (data.type == 'supply') router.push({ path: '/supply/detail', query: { id: data.source } })
}
// 删除
const toDelete = (data) => {
  ElMessageBox.confirm(`您确认取消收藏?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
    .then(async () => {
      const res = await store.del(data.id)
      if ($checkRes(res, true)) {
        search({ skip, limit })
      }
    })
    .catch(() => {})
}
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    .one_left {
      display: flex;
      align-items: center;
      span {
        font-size: $global-font-size-16;
        margin: 0 5px 0 0;
        color: #606266;
      }
    }
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
}
</style>