fix : 修改首页排版

src/views/home/index.vue

@@ -15,12 +15,22 @@
               </div>
             </el-col>
           </el-row>
-          <h4>待办 ({{ todoNum }})</h4>
+          <el-tabs v-model="activeName" class="demo-tabs">
-          <fvTable ref="tableIns" class="home-table" :tableConfig="tableConfig" @getTotal="getTotal">
+            <el-tab-pane :label="'待办（'+todoNum +'）'" name="first" v-loading="loading">
-            <template #empty>
+              <fvTable ref="tableIns" class="home-table" :tableConfig="tableConfigBacklog" @getTotal="getTotal">
-              <el-empty description="暂无待办"/>
+                <template #empty>
-            </template>
+                  <el-empty description="暂无待办"/>
-          </fvTable>
+                </template>
+              </fvTable>
+            </el-tab-pane>
+            <el-tab-pane :label="'待上报（' + reportNum + '）'" name="second">
+              <fvTable ref="tableIns" :tableConfig="tableConfigReport" @getTotal="getReportNumTotal">
+                <template #empty>
+                  <el-empty description="暂无数据"/>
+                </template>
+              </fvTable>
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
@@ -57,6 +67,7 @@ import {useAuthStore} from '@/stores/userstore.js'
 
 const AuthStore = useAuthStore()
 const router = useRouter()
+const activeName = ref('first')
 const list = ref([
   {
     title: '待立项',
@@ -102,7 +113,15 @@ const helpDocList = ref([
   }
 ])
 const todoNum = ref(0)
-const tableConfig = reactive({
+const reportNum = ref(0)
+const auths = {
+  edit: ['mosr:requirement:resubmit'],
+  detail: ['mosr:requirement:info'],
+  add: ['mosr:requirement:add'],
+  del: ['mosr:requirement:del'],
+  report: ['mosr:collect:reported'],
+}
+const tableConfigBacklog = reactive({
   columns: [
     {
       prop: 'targetName',
@@ -156,8 +175,112 @@ const tableConfig = reactive({
   api: '/workflow/mosr/process/task',
   params: {},
 })
-const getTotal=(val)=>{
+const tableConfigReport = reactive({
-  todoNum.value=val
+  columns: [
+    // {
+    //   type: 'selection',
+    //   prop: 'selection'
+    // },
+    {
+      prop: 'requirementName',
+      label: '征集名称',
+      align: 'center'
+    },
+    {
+      prop: 'collectType',
+      label: '征集类型',
+      align: 'center'
+    },
+    {
+      prop: 'companyName',
+      label: '征集公司',
+      align: 'center',
+      // currentRender: ({row, index}) => (
+      // <div style={{width: '300px', textOverflow: 'ellipsis',textAlign:'center'}}>{row.companyName}</div>)
+    },
+    {
+      prop: 'approveName',
+      label: '审批人',
+      align: 'center'
+    },
+    {
+      prop: 'deadline',
+      label: '截止时间',
+      align: 'center'
+    },
+    {
+      prop: 'taskNode',
+      label: '当前节点',
+      align: 'center'
+    },
+    {
+      prop: 'state',
+      label: '状态',
+      align: 'center',
+      width: 200,
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => (<Tag dictType={'demand_collection'} value={row.state}/>)
+    },
+    {
+      prop: 'oper',
+      label: '操作',
+      align: 'center',
+      fixed: 'right',
+      showOverflowTooltip: false,
+      currentRender: ({row, index}) => {
+        let btn = []
+        let buttons = new Set(Array.from(row.buttons))
+        if (buttons.has("details")) {
+          btn.push({label: '详情', prem: auths.detail, func: () => handleDetail(row), type: 'primary'})
+        }
+        if (buttons.has("report")) {
+          btn.push({label: '需求上报', prem: auths.report, func: () => handleReport(row), type: 'primary'})
+        }
+        return (
+            <div style={{width: '100%'}}>
+              {
+                btn.map(item => (
+                    <el-button
+                        type={item.type}
+                        v-perm={item.prem}
+                        onClick={() => item.func()}
+                        link
+                    >
+                      {item.label}
+                    </el-button>
+                ))
+              }
+            </div>
+        )
+      }
+    }
+  ],
+  api: '/workflow/mosr/requirement',
+  params: {
+    state: "4"
+  }
+})
+const handleDetail = (row) => {
+  router.push({
+    name: 'Requirement/detail',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const handleReport = (row) => {
+  router.push({
+    name: 'Summary/add',
+    query: {
+      id: row.requirementId
+    }
+  })
+}
+const getTotal = (val) => {
+  todoNum.value = val
+}
+const getReportNumTotal = (val) => {
+  reportNum.value = val
 }
 const handleView = (row) => {
   if (row.targetState == '00' && row.targetId) {
@@ -177,7 +300,7 @@ const handleView = (row) => {
         source: 'home'
       }
     })
-  } else if (row.targetState == '20'||row.targetState == '40'||row.targetState == '50'){
+  } else if (row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
     router.push({
       name: 'Implementation/detail',
       query: {
@@ -187,7 +310,7 @@ const handleView = (row) => {
         source: 'home'
       }
     })
-  }else if (row.targetState == '70' && row.targetId) {
+  } else if (row.targetState == '70' && row.targetId) {
     router.push({
       name: 'Fund/detail',
       query: {
@@ -196,7 +319,7 @@ const handleView = (row) => {
         source: 'home'
       }
     })
-  }else if (row.targetState == '80' && row.targetId) {
+  } else if (row.targetState == '80' && row.targetId) {
     router.push({
       name: 'Share/detail',
       query: {
@@ -205,7 +328,7 @@ const handleView = (row) => {
         source: 'home'
       }
     })
-  }else if (row.targetState == '90' && row.targetId) {
+  } else if (row.targetState == '90' && row.targetId) {
     router.push({
       name: 'Phase/detail',
       query: {
@@ -218,6 +341,25 @@ const handleView = (row) => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.el-tabs__nav-scroll) {
+  width: 100%;
+  display: flex;
+
+  .el-tabs__nav {
+    display: flex;
+    flex: 1;
+
+    .el-tabs__item {
+      flex: 1;
+      font-size: 16px;
+    }
+
+    .is-active {
+      color: black;
+      //background-color: #DED0B2;
+    }
+  }
+}
 @media only screen and (max-width: 767px) {
   .right {
     margin-top: 10px;
@@ -225,8 +367,6 @@ const handleView = (row) => {
   :deep(.el-table) {
     height: 300px !important;
   }
-
-
 }
 
 @media only screen and (max-width: 1000px) {