门户，任务管理

package.json

@@ -13,13 +13,13 @@
         "dayjs": "^1.11.7",
         "echarts": "^5.4.2",
         "element-plus": "2.3.4",
-        "hc-vue3-ui": "^1.0.3",
+        "hc-vue3-ui": "^1.0.4",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.5",
         "js-fast-way": "^0.1.0",
         "js-md5": "^0.7.3",
         "nprogress": "^0.2.0",
-        "pinia": "^2.0.35",
+        "pinia": "^2.0.36",
         "remixicon": "^3.1.1",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6"

src/router/modules/base.js

@@ -37,6 +37,12 @@ export default [
                 meta: {title: '任务管理'},
                 component: () => import('~src/views/home/task.vue')
             },
+            {
+                path: '/home/task-details',
+                name: 'home-task-details',
+                meta: {title: '任务详情'},
+                component: () => import('~src/views/home/task-details.vue')
+            },
             {
                 path: '/home/budget',
                 name: 'home-budget',

src/router/modules/token.js

@@ -4,6 +4,7 @@ export default [
     'home-index',
     'home-admin',
     'home-task',
+    'home-task-details',
     'home-budget',
     'user-index',
     'user-config',

src/styles/index.scss

@@ -19,6 +19,16 @@ html, body, #app {
     width: 100%;
     overflow: hidden;
 }
+.hc-sb-table .el-tabs .el-tabs__header .el-tabs__nav .el-tabs__item {
+    background: #f1f5f8;
+}
+.hc-sb-table .el-tabs .el-tabs__active-bar {
+    background: white;
+}
+.hc-sb-table .el-tabs .el-tabs__active-bar:after,
+.hc-sb-table .el-tabs .el-tabs__active-bar:before {
+    background: white;
+}
 
 .hac-card-title {
     position: relative;
@@ -82,7 +92,9 @@ html, body, #app {
     background-image: linear-gradient(45deg, #ca6f2e, #cb1413);
     color: white;
 }
-
+.hc-table-ref-box {
+    border-color: #f3f3f3;
+}
 
 .el-card.hc-card-box {
     --el-card-bg-color: white;

src/views/home/components/TaskTable.vue

@@ -0,0 +1,140 @@
+<template>
+    <HcCard>
+        <template #header>
+            <div class="w-36">
+                <el-select v-model="searchForm.reportType" block clearable placeholder="选择审批类型" size="large">
+                    <el-option v-for="item in reportTypes" :label="item.name" :value="item.key"/>
+                </el-select>
+            </div>
+            <div class="w-36 ml-4">
+                <el-date-picker class="block" v-model="searchForm.startTime" type="month" value-format="YYYY-MM" placeholder="开始日期" clearable size="large"/>
+            </div>
+            <div class="mx-2">~</div>
+            <div class="w-36">
+                <el-date-picker class="block" v-model="searchForm.endTime" type="month" value-format="YYYY-MM" placeholder="结束日期" clearable size="large"/>
+            </div>
+            <div class="ml-4">
+                <el-button size="large" type="primary" @click="searchClick">
+                    <HcIcon name="search-2"/>
+                    <span>搜索</span>
+                </el-button>
+            </div>
+            <div class="ml-2">
+                <el-button size="large" @click="resetClick">
+                    <HcIcon name="close-circle"/>
+                    <span>重置</span>
+                </el-button>
+            </div>
+        </template>
+        <HcTable indexName="编号" :column="tableColumn" :datas="tableData" :loading="tableLoading">
+            <template #taskName="{row}">
+                <span class="text-hover" @click="rowNameClick(row)">{{row.taskName}}</span>
+            </template>
+            <template #auditStatus="{row}">
+                <span class="text-green" v-if="row.auditStatus === '1'">已审核</span>
+                <span class="text-orange" v-if="row.auditStatus === '2'">待审批</span>
+                <span class="text-red" v-if="row.auditStatus === '3'">已驳回</span>
+            </template>
+        </HcTable>
+        <template #action>
+            <HcPages :pages="searchForm" @change="pageChange"/>
+        </template>
+    </HcCard>
+</template>
+
+<script setup>
+import {ref, nextTick, watch} from "vue";
+import {useRouter} from 'vue-router'
+import {getArrValue} from "js-fast-way"
+
+const router = useRouter()
+
+//参数
+const props = defineProps({
+    tableKey: {
+        type: String,
+        default: ''
+    }
+})
+
+//变量
+const isTableKey = ref(props.tableKey);
+const reportTypes = ref([
+    {name: '所有', key: '0'},
+    {name: '已审批', key: '1'},
+    {name: '待审批', key: '2'},
+    {name: '已驳回', key: '3'},
+])
+
+//监听
+watch(() => [
+    props.tableKey,
+], ([Key]) => {
+    isTableKey.value = Key
+})
+
+//搜索表单
+const searchForm = ref({
+    reportType: null, startTime: null, endTime: null,
+    current: 1, size: 20, total: 0
+})
+
+//搜索
+const searchClick = () => {
+    searchForm.value.current = 1;
+    console.log(searchForm.value)
+    getTableData()
+}
+
+//重置
+const resetClick = () => {
+    searchForm.value = {
+        reportType: null, startTime: null, endTime: null,
+        current: 1, size: 20, total: 0
+    }
+}
+
+//分页被点击
+const pageChange = ({current, size}) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+
+//获取数据
+const tableLoading = ref(false)
+const tableColumn = ref([
+    {key: 'taskName', name: '任务名称'},
+    {key: 'reportDate', name: '上报日期', width: '160', align: 'center'},
+    {key: 'auditDate', name: '审核日期', width: '160', align: 'center'},
+    {key: 'reportType', name: '上报类型', width: '120', align: 'center'},
+    {key: 'auditStatus', name: '审核状态', width: '100', align: 'center'},
+    {key: 'informant', name: '上报人', width: '120', align: 'center'},
+    {key: 'auditor', name: '审核人', width: '120', align: 'center'},
+])
+const tableData = ref([
+    {id: 1, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
+    {id: 2, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '2', informant: '张三', auditor: '李四'},
+    {id: 3, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '3', informant: '张三', auditor: '李四'},
+    {id: 4, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
+    {id: 5, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
+    {id: 6, taskName: '【任务描述】申请【任务转移】', reportDate: '2022-02-01', auditDate: '2022-02-01', reportType: '转移任务', auditStatus: '1', informant: '张三', auditor: '李四'},
+])
+const getTableData = () => {
+    //const key = isTableKey.value
+}
+
+//任务名称被点击
+const rowNameClick = (row) => {
+    router.push({
+        name: 'home-task-details', query: {
+            id: row.id,
+            type: isTableKey.value
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/home/task-details.vue

@@ -0,0 +1,43 @@
+<template>
+    <HcCard scrollbar actionUi="text-center">
+        <HcCardItem>
+            <div class="hac-task-name-box">
+                <div class="label">任务名称</div>
+                <div class="name">【任务描述】申请【任务转移】</div>
+            </div>
+        </HcCardItem>
+
+        <template #action>
+            <el-button size="large" type="primary">
+                <HcIcon name="search-2"/>
+                <span>搜索</span>
+            </el-button>
+        </template>
+    </HcCard>
+</template>
+
+<script setup>
+import {ref, watch} from "vue";
+import {useRouter, useRoute} from 'vue-router'
+
+const router = useRouter()
+const useRoutes = useRoute()
+
+console.log(useRoutes.query)
+
+</script>
+
+<style lang="scss" scoped>
+.hac-task-name-box {
+    .label {
+
+    }
+    .name {
+
+    }
+}
+</style>
+
+<style lang="scss">
+
+</style>

src/views/home/task.vue

@@ -1,12 +1,32 @@
 <template>
-    <div class="home-styles-box">
-        111111
-    </div>
+    <HcTabsSimple :cur="tabsKey" :datas="tabsData" @tabClick="tabsClick">
+        <template #tab-to-do>
+            <TaskTable :tableKey="tabsKey"/>
+        </template>
+        <template #tab-done>
+            <TaskTable :tableKey="tabsKey"/>
+        </template>
+        <template #tab-initiated>
+            <TaskTable :tableKey="tabsKey"/>
+        </template>
+    </HcTabsSimple>
 </template>
 
 <script setup>
 import {ref, watch} from "vue";
-import {useAppStore} from "~src/store";
+import TaskTable from "./components/TaskTable.vue";
+
+//选项卡
+const tabsKey = ref('to-do')
+const tabsData = ref([
+    {icon: 'time', label: '待办任务', key: 'to-do'},
+    {icon: 'calendar-check', label: '已办任务', key: 'done'},
+    {icon: 'user-shared', label: '我发起的任务', key: 'initiated'},
+])
+
+const tabsClick = (key) => {
+    tabsKey.value = key
+}
 
 </script>
 

yarn.lock

@@ -837,10 +837,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hc-vue3-ui@^1.0.3:
-  version "1.0.3"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.0.3.tgz#94c2ccf38deccbdd5f141d0b2fa0ee9869b633f9"
-  integrity sha512-020AiXzoqQzN3GpHpda9jOrHinDX8obZ6Eh7BmKSJ1fTBn0rBhC1aDPHtQCN+nFxUmI6BKN+8xQLffbukhoSSg==
+hc-vue3-ui@^1.0.4:
+  version "1.0.4"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.0.4.tgz#76dc6936a8fe14b91969b043b9b272701b13dfa1"
+  integrity sha512-VqRa5aQnscNFFdlnRghe2GpvcBosWW/HV2bPzrqC9Ii6HNSMV/UtplRFBNkRy1pBoFvGAKIxg8AZje6BFLGiiA==
   dependencies:
     axios "^1.3.6"
     dayjs "^1.11.7"
@@ -1177,10 +1177,10 @@ pify@^2.3.0:
   resolved "http://47.110.251.215:9000/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
-pinia@^2.0.35:
-  version "2.0.35"
-  resolved "http://47.110.251.215:9000/pinia/-/pinia-2.0.35.tgz#aa2597038bb55ea14ad689f83065d2814ebb8c10"
-  integrity sha512-P1IKKQWhxGXiiZ3atOaNI75bYlFUbRxtJdhPLX059Z7+b9Z04rnTZdSY8Aph1LA+/4QEMAYHsTQ638Wfe+6K5g==
+pinia@^2.0.36:
+  version "2.0.36"
+  resolved "http://47.110.251.215:9000/pinia/-/pinia-2.0.36.tgz#65130f3b94cc7fe25156308634010fab893dff24"
+  integrity sha512-4UKApwjlmJH+VuHKgA+zQMddcCb3ezYnyewQ9NVrsDqZ/j9dMv5+rh+1r48whKNdpFkZAWVxhBp5ewYaYX9JcQ==
   dependencies:
     "@vue/devtools-api" "^6.5.0"
     vue-demi "*"