feat: codeList新增认领状态筛选

frontend/src/store/modules/rulesList.js

@@ -29,6 +29,7 @@ export default {
       const r = await ServerActionCodeList({
         modifyuser: payload.modifyuser, // 维护人
         state: payload.state, // 爬虫状态
+        claim: payload.claim, // 认领状态
         search: payload.search, // 搜索内容
         start: (pageNum - 1) * pageSize,
         limit: pageSize

frontend/src/views/CodeList.vue

@@ -33,6 +33,17 @@
                             />
                         </el-select>
                     </div>
+                    <div class="action-bar-item">
+                        <span class="action-bar-name">认领状态：</span>
+                        <el-select v-model="filters.state" placeholder="认领状态" style="width: 140px" @change="onClaimSelectChange">
+                            <el-option
+                                v-for="item in filterConfig.claimOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            />
+                        </el-select>
+                    </div>
                     <div class="action-bar-item">
                         <el-input v-model="filters.search" placeholder="按照爬虫代码搜索" @keydown.enter="onInputSearch" />
                     </div>
@@ -44,7 +55,8 @@
                 <el-table-column prop="code" label="代码" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="site" label="网站" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="channel" label="栏目" show-overflow-tooltip></el-table-column>
-                <el-table-column prop="stateText" label="状态" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="stateText" label="爬虫状态" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="claimText" label="认领状态" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="href" label="栏目地址" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="modifyuser" label="维护人" width="80" show-overflow-tooltip></el-table-column>
                 <el-table-column label="操作" width="200">
@@ -65,7 +77,7 @@
             <div class="pagination-container">
                 <el-pagination align="right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="listState.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="listState.pageSize"
-                    layout="total, prev, pager, next, jumper" :total="listState.total" hide-on-single-page>
+                    layout="total, sizes, prev, pager, next, jumper" :total="listState.total">
                 </el-pagination>
             </div>
         </el-main>
@@ -120,6 +132,24 @@ const filterConfig = reactive({
             value: 12,
         },
     ],
+    claimOptions: [
+        {
+            label: '全部',
+            value: -1
+        },
+        {
+            label: '待认领',
+            value: 0
+        },
+        {
+            label: '已认领',
+            value: 1
+        },
+        {
+            label: '历史爬虫',
+            value: 2
+        },
+    ],
     modifyUserList: [
         // {
         //     label: '全部',
@@ -133,12 +163,14 @@ const filters = reactive({
     search: '',
     state: -1,
     modifyuser: '',
+    claim: -1,
 })
 // 选择器数据(用来重置)
 const defaultFilters = {
     search: '',
     state: -1,
     modifyuser: '',
+    claim: -1,
 }
 
 // 列表数据
@@ -220,6 +252,7 @@ const getRowStyle = ({ row }) => {
     return row.selected ? { backgroundColor: '#F7F7F7' } : {};
 };
 
+// 计算爬虫状态
 const calcStateText = (state) => {
     const target = filterConfig.stateOptions.find(r => r.value === state)
     if (target) {
@@ -228,7 +261,15 @@ const calcStateText = (state) => {
         return '未知状态'
     }
 }
-
+// 计算认领状态
+const calcClaimText = (state) => {
+    const target = filterConfig.claimOptions.find(r => r.value === state)
+    if (target) {
+        return target.label
+    } else {
+        return '未知状态'
+    }
+}
 // 获取列表数据
 const getTableList = async () => {
     listState.loading = true
@@ -237,6 +278,7 @@ const getTableList = async () => {
             modifyuser: filters.modifyuser, // 维护人
             state: filters.state, // 爬虫状态
             search: filters.search, // 搜索内容
+            claim: filters.claim,
             pageSize: listState.pageSize,
             pageNum: listState.pageNum
         });
@@ -247,7 +289,8 @@ const getTableList = async () => {
                 const sList = data.list.map(t => {
                     return {
                         ...t,
-                        stateText: calcStateText(t.state)
+                        stateText: calcStateText(t.state),
+                        claimText: calcClaimText(t.claimtype),
                     }
                 })
 
@@ -287,6 +330,7 @@ getTableList()
 const handleSizeChange = (val) => {
     listState.pageSize = val;
     listState.pageNum = 1;
+    getTableList()
 };
 
 const handleCurrentChange = (val) => {
@@ -321,6 +365,9 @@ const onStateSelectChange = () => {
 const onInputSearch = () => {
     refreshTableList()
 }
+const onClaimSelectChange = () => {
+    refreshTableList()
+}
 
 
 //Wails事件绑定