沙箱

src/components/StatisticsList/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="pa-3 white content" ref="content">
+    <div ref="header" class="content-header">
+      <m-search v-if="searchItems.length" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
+      <div>
+        <el-tag
+          v-for="item in items"
+          :key="item.title"
+          type="orange"
+          class="mr-3 mb-3 point"
+        >
+          {{ item.title }}
+        </el-tag>
+      </div>
+    </div>
+    <div ref="main" class="content-main">
+      <m-card shadow="never" v-for="item in items" :key="item.title" class="mb-3">
+        <template #header>
+          {{ item.title }}
+        </template>
+      </m-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatisticsList',
+  props: {
+    apis: {
+      type: Array,
+      default: () => []
+    },
+    searchItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      searchValues: {},
+      items: [
+        {
+          title: '统计分析1',
+          desc: '统计分析1描述'
+        },
+        {
+          title: '统计分析2',
+          desc: '统计分析2描述'
+        },
+        {
+          title: '统计分析3',
+          desc: '统计分析3描述'
+        },
+        {
+          title: '统计分析4',
+          desc: '统计分析4描述'
+        },
+        {
+          title: '统计分析1',
+          desc: '统计分析1描述'
+        },
+        {
+          title: '统计分析2',
+          desc: '统计分析2描述'
+        },
+        {
+          title: '统计分析3',
+          desc: '统计分析3描述'
+        },
+        {
+          title: '统计分析4',
+          desc: '统计分析4描述'
+        }
+      ]
+    }
+  },
+  methods: {
+    onSearch () {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%; /* 确保容器有明确的高度 */
+  &-header {
+    // display: table-row;
+    // height: 1px; /* 最小高度 */
+  }
+  &-main {
+    flex-grow: 1;
+  min-height: 0; /* 关键：允许内容压缩 */
+  overflow: auto;
+  }
+}
+.point {
+  cursor: pointer;
+}
+</style>

src/views/salary/claim/sharingClaim/index.vue

@@ -17,22 +17,16 @@
       </template>
     </m-table>
     <SharingClaimDetails ref="sharingClaimDetailsRefs" />
-    <!-- <SharingClaimDetailsClaim ref="sharingClaimDetailsClaimRefs" @success="getPage"></SharingClaimDetailsClaim>
-    <SharingClaimDetailsClaimByDept ref="sharingClaimDetailsClaimByDeptRefs" @success="getPage"></SharingClaimDetailsClaimByDept> -->
   </div>
 </template>
 
 <script>
 import { dateFormat } from '@/utils/date'
 import {
-  getPerformanceGroupPage,
-  // getCustomerProfitSharingClaimDeptAdd,
-  // getCustomerProfitSharingClaimAdd,
-  getAccessOrganization
+  getPerformanceGroupPage
+  // getAccessOrganization
 } from '@/api/salary'
 import SharingClaimDetails from './sharingClaimDetails.vue'
-// import SharingClaimDetailsClaim from './sharingClaimDetailsClaim.vue'
-// import SharingClaimDetailsClaimByDept from './sharingClaimDetailsClaimByDept.vue'
 import { mapGetters } from 'vuex'
 export default {
   name: 'salaryClaimSharing',
@@ -55,14 +49,8 @@ export default {
         { label: '一级科目编码/名称', prop: 'oneLevelSubject' },
         { label: '二级科目编码/名称', prop: 'twoLevelSubject' },
         { label: '总金额', prop: 'residualAmount' },
-        // { label: '金额', prop: 'amount' },
-        // { label: '员工分润比例', prop: 'employeeProfitSharingRatio', align: 'center', width: 140 },
         { label: '管户层级标识', prop: 'customerLevelIdentifier', width: 140 },
         { label: '客户类别标识', prop: 'customerCategoryIdentifier', width: 140 },
-        // { label: '统一认证号1', prop: 'unifiedCertificationNumber1', width: 150 },
-        // { label: '员工姓名1', prop: 'employeeName1', width: 120 },
-        // { label: '统一认证号2', prop: 'unifiedCertificationNumber2', width: 150 },
-        // { label: '员工姓名2', prop: 'employeeName2', width: 120 },
         { label: '操作', prop: 'actions', fixed: 'right', width: 180 }
       ],
       items: [],
@@ -79,19 +67,26 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['permission']),
+    ...mapGetters(['organizationTree']),
     searchItems () {
       return [
         {
           label: '机构名称',
+          type: 'cascader',
           prop: 'manageOrganizationNo',
-          type: 'select',
           options: {
-            clearable: false,
             filterable: true,
-            placeholder: '请选择机构名称',
-            items: this.organizationItems,
-            labelValue: 'organizationNo'
+            clearable: true,
+            placeholder: '请选择机构',
+            options: this.organizationTree,
+            showAllLevels: false,
+            props: {
+              emitPath: false,
+              checkStrictly: true,
+              value: 'organizationNo',
+              label: 'organizationName',
+              children: 'child'
+            }
           }
         },
         {
@@ -133,12 +128,12 @@ export default {
       if (this.cardTitle) {
         this.cardTitle = cardTitle
       }
-      const data = await this.onGetDeptList()
-      if (!data) {
-        return
-      }
-      this.searchValues.manageOrganizationNo = data[0].organizationNo
-      this.defaultManageOrganization = data[0]
+      // const data = await this.onGetDeptList()
+      // if (!data) {
+      //   return
+      // }
+      this.searchValues.manageOrganizationNo = this.organizationTree[0]?.organizationNo
+      // this.defaultManageOrganization = data[0]
       this.getPage()
     },
     async getPage () {
@@ -164,23 +159,23 @@ export default {
         this.loading = false
       }
     },
-    async onGetDeptList () {
-      try {
-        const { data } = await getAccessOrganization()
-        if (!data.length) {
-          return
-        }
-        this.organizationItems = data.map(e => {
-          return {
-            ...e,
-            label: `${e.parentOrganizationName} - ${e.organizationName}`
-          }
-        })
-        return data
-      } catch (error) {
-        this.$message.error(error)
-      }
-    },
+    // async onGetDeptList () {
+    //   try {
+    //     const { data } = await getAccessOrganization()
+    //     if (!data.length) {
+    //       return
+    //     }
+    //     this.organizationItems = data.map(e => {
+    //       return {
+    //         ...e,
+    //         label: `${e.parentOrganizationName} - ${e.organizationName}`
+    //       }
+    //     })
+    //     return data
+    //   } catch (error) {
+    //     this.$message.error(error)
+    //   }
+    // },
     onDetails (item) {
       this.$refs.sharingClaimDetailsRefs.open({
         month: this.queryValues.month,
@@ -210,9 +205,9 @@ export default {
     //   }
     // },
     onSearch () {
-      if (!this.searchValues.manageOrganizationNo) {
-        this.searchValues.manageOrganizationNo = this.defaultManageOrganization.organizationNo
-      }
+      // if (!this.searchValues.manageOrganizationNo) {
+      //   this.searchValues.manageOrganizationNo = this.defaultManageOrganization.organizationNo
+      // }
       this.pageInfo.current = 1
       this.getPage()
     },

src/views/salary/claim/staff/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div>
-    <div v-if="!customerId" style="min-height: 400px;" class="d-flex justify-center align-center">
-      <div>
-        <el-input v-model="customerIdModel" placeholder="请输入客户编号"></el-input>
+    <div v-if="!customerId" style="min-height: 400px;" class="d-flex flex-column justify-center align-center">
+      <div class="pa-3" style="color: #909399">
+        请输入分润客户编号进行查询
+      </div>
+      <div class="d-flex">
+        <el-input v-model="customerIdModel" placeholder="请输入分润客户编号"></el-input>
+        <m-button class="ml-3" type="orange" @click="onSearchCustomer">查询</m-button>
       </div>
-      <m-button class="ml-3" type="orange" @click="onSearchCustomer">查询</m-button>
     </div>
     <template v-if="customerId">
       <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>

src/views/welfare/welfareAnalysis/index.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="pa-3 white">
-    <m-empty></m-empty>
-  </div>
+  <StatisticsList></StatisticsList>
 </template>
 
 <script>
+import StatisticsList from '@/components/StatisticsList'
 export default {
-  name: 'welfareAnalysis'
+  name: 'welfareAnalysis',
+  components: {
+    StatisticsList
+  }
 }
 </script>