feat: 表格爬虫状态添加

frontend/src/views/CodeList.vue

@@ -40,10 +40,11 @@
             </div>
         </el-header>
         <el-main>
-            <el-table ref="spiderTable" :data="listState.list" stripe :row-style="getRowStyle" :loading="listState.loading">
+            <el-table ref="spiderTable" :data="listState.list" stripe :row-style="getRowStyle" v-loading="listState.loading">
                 <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="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">
@@ -219,22 +220,46 @@ const getRowStyle = ({ row }) => {
     return row.selected ? { backgroundColor: '#F7F7F7' } : {};
 };
 
+const calcStateText = (state) => {
+    const target = filterConfig.stateOptions.find(r => r.value === state)
+    if (target) {
+        return target.label
+    } else {
+        return '未知状态'
+    }
+}
+
 // 获取列表数据
 const getTableList = async () => {
-    const r = await store.dispatch('rulesList/getCodeList', {
-        modifyuser: filters.modifyuser, // 维护人
-        state: filters.state, // 爬虫状态
-        search: filters.search, // 搜索内容
-        pageSize: listState.pageSize,
-        pageNum: listState.pageNum
-    });
-    const { data, code } = r
-    if (data) {
-        listState.total = data.total || 0
-        if (Array.isArray(data.list)) {
-            listState.list = data.list || []
+    listState.loading = true
+    try {
+        const r = await store.dispatch('rulesList/getCodeList', {
+            modifyuser: filters.modifyuser, // 维护人
+            state: filters.state, // 爬虫状态
+            search: filters.search, // 搜索内容
+            pageSize: listState.pageSize,
+            pageNum: listState.pageNum
+        });
+        const { data, code } = r
+        if (data) {
+            listState.total = data.total || 0
+            if (Array.isArray(data.list)) {
+                const sList = data.list.map(t => {
+                    return {
+                        ...t,
+                        stateText: calcStateText(t.state)
+                    }
+                })
+
+                listState.list = sList || []
+            }
         }
+    } catch (error) {
+        listState.loaded = true
+    } finally {
+        listState.loading = false
     }
+    
 }
 
 // 重置列表数据
@@ -254,8 +279,7 @@ const refreshTableList = () => {
 // 刷新列表(并重置选择器)
 const resetFilterAndRefreshTableList = () => {
     resetFilterState()
-    resetListState()
-    getTableList()
+    refreshTableList()
 }
 
 getTableList()
@@ -275,10 +299,10 @@ const getModifyUserList = async () => {
     const { data, code } = r
     if (data) {
         if (Array.isArray(data.list)) {
-            const arr = [{ s_name: '全部', value: '' }]
+            const arr = [{ name: '全部', value: '' }]
             const reqArr = data.list.map(r => {
                 return {
-                    name: r.s_name,
+                    label: r.s_name,
                     value: r.s_name,
                 }
             })

frontend/src/views/Login.vue

@@ -16,7 +16,7 @@
                         <el-button text>
                             <el-icon><UserFilled /></el-icon>忘记密码
                         </el-button>
-                        <el-button type="primary" @click="doLogin">
+                        <el-button type="primary" @click="doLogin" :loading="loading">
                             <el-icon><Lock /></el-icon> 登录
                         </el-button>
                     </el-form-item>
@@ -37,22 +37,32 @@ const store = useStore();
 const router = useRouter();
 
 const form = ref({})
+const loading = ref(false)
 //
 const doLogin = async () => {
+    loading.value = true
     //TODO 这里需要调用后台方法实现登录
-    const { msg } = await store.dispatch('login', {...form.value});
-    if (store.state.isAuthenticated) {
-        // 登录成功。跳转首页
-        router.replace({ name: 'codeList' })
-        ElMessage({
-            message: msg,
-            type: 'success',
-        })
-    } else {
-        ElMessage({
-            message: msg,
-            type: 'error',
-        })
+    try {
+        const { msg } = await store.dispatch('login', {...form.value});
+        loading.value = false
+        if (store.state.isAuthenticated) {
+            // 登录成功。跳转首页
+            router.replace({ name: 'codeList' })
+            ElMessage({
+                message: msg,
+                type: 'success',
+            })
+        } else {
+            ElMessage({
+                message: msg,
+                type: 'error',
+            })
+        }
+    } catch (error) {
+        console.log(error)
+    } finally {
+        loading.value = false
     }
+    
 }
 </script>