frontend/src/views/article/index.vue

<template>
  <div class="h-full  m-4 bg-white rounded-2 shadow-lg p-8 flex flex-col justify-between space-y-4">
    <div class="flex justify-between">
      <div></div>
      <div class="flex space-x-4">
        <a-input placeholder="请输入关键词" v-model:value="query.keyword"></a-input>
        <a-button type="primary" :disabled="loading" @click="list">搜索</a-button>
      </div>
    </div>
    <div class="h-full border-0 border-t-1 border-solid border-gray-300 pt-4">
      <a-spin :spinning="loading" :indicator="indicator">
        <a-table :dataSource="data.list" :columns="columns" :pagination="false" :scroll="{y:1000}" @change="tableChange" rowKey="id">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'image'">
              <div class="w-75px h-75px">
                <a-image  :src="record.image"/>
              </div>
            </template>
            <template v-else-if="column.key === 'name'">
              <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }">
                {{record.name}}
              </router-link>
<!--              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.name}}</span>-->
            </template>
            <template v-else-if="column.key === 'pid'">
<!--              <span class="cursor-pointer text-blue" title="查看详情" @click="toDetail(record.id)">{{record.pid}}</span>-->
              <router-link target="_blank" :to="{ path: '/article/detail', query: {id: record.id} }">
                {{record.pid}}
              </router-link>
            </template>
            <template v-else-if="column.key === 'rate'">
              <span>{{record.rate > 0 ? `${record.rate}%`:'--' }}</span>
            </template>
            <template v-else-if="column.key === 'available'">
              <span :class="[record.available ? 'text-green-700':'text-red-500']">{{record.available ? '是':'否'}}</span>
            </template>
            <template v-else-if="column.key === 'exclude'">
              <a-switch :checked="!record.exclude" @click="onClickExclude(record)"/>
            </template>
            <template v-else-if="column.key === 'remark'">
              {{record.remark===''?'-':record.remark}}
            </template>
          </template>
        </a-table>
      </a-spin>
    </div>
    <a-pagination :disabled="loading" class="text-right" v-model:current="query.page" v-model:page-size="query.size" :total="data.total" show-less-items @change="list"/>
  </div>
</template>
<script setup>

import {computed, h, onMounted, reactive, ref} from "vue";
import {LoadingOutlined} from "@ant-design/icons-vue";
import {message} from "ant-design-vue";
import {ListArticles, UpdateArticle} from "@/api/articles.js";
import {useRouter} from "vue-router";

const query = reactive({
  keyword: "",
  page: 1,
  size: 8,
  pid:'',
  brand: '',
  available: null,
  rate_sort:null,
})

onMounted(()=>{
  list()
})

const loading = ref(false)
// 展示数据
const data = reactive({
  list: [],
  total: 0
})

const list = () => {
  loading.value = true
  ListArticles(query).then(res => {
    if (res.code !== 200) {
      message.error(res.msg)
    }else {
      data.list = res.data.list
      data.total = res.data.total
    }
  }).finally(()=>{
    loading.value = false
  })
}

const columns = computed(()=>[
  {
    title: '货号',
    dataIndex: 'pid',
    key: 'pid',
    width: 200
  },
  {
    title: '名称',
    dataIndex: 'name',
    ellipsis: true,
    key: 'name',
    width: 350
  },
  {
    title: '图片',
    key: 'image',
    width: 250
  },
  {
    title: '最低成本价',
    dataIndex: 'costPrice',
    key: 'costPrice',
    width: 150
  },
  {
    title: '最低售价',
    dataIndex: 'sellPrice',
    key: 'sellPrice',
    width: 150
  },
  {
    title: '利润率',
    key: 'rate',
    dataIndex: 'rate',
    width: 150,
    sorter:true,
    sortOrder: query.rate_sort
  },
  {
    title: '可购买',
    key: 'available',
    dataIndex: 'available',
    width: 150,
    filteredValue: query.available,
    filterMultiple:false,
    filters:[
      {
        text: '可购买',
        value: true,
      },
      {
        text: '不可购买',
        value: false,
      },
    ]
  },
  {
    title: '需要更新',
    key: 'exclude',
    width: 150
  },
  {
    title: '备注',
    key: 'remark',
    dataIndex: 'remark',
    ellipsis: true,
  }
])



const indicator = h(LoadingOutlined, {
  style: {
    fontSize: '32px',
  },
  spin: true,
});

const onClickExclude=(record)=>{
  record.exclude = !record.exclude
  UpdateArticle(record).then(res=>{
    if (res.code !== 200) {
      message.error(`${record.exclude ? '关闭':'开启'}失败`)
    }else {
      message.success(`${record.exclude ? '关闭':'开启'}成功`)
    }
  }).catch(err=>{
    message.error(`${record.exclude ? '关闭':'开启'}失败`)
    console.log(err)
  })
}

const router = useRouter()
// 跳到详情页面
const toDetail=(id)=>{
  router.push({
    path: '/article/detail',
    query: {
      id: id
    },
  })
}

//
const tableChange = (pagination, filters, sorter, { action, currentDataSource })=>{
  if(sorter.columnKey === 'rate') {
    query.rate_sort = sorter.order
  }
  query.available = filters.available
  list()
}

</script>
<style scoped>

</style>