账单

src/api/bill.js

+import request from '@/utils/request'
+// 查询预支工资账单列表
+export function billList(query) {
+    return request({
+        url: '/djl-salary//advance/salary/bill/l',
+        method: 'get',
+        params: query
+    })
+}
+// 查询项目账单明细
+export function billProjectList(query) {
+    return request({
+        url: "/djl-salary/advance/salary/bill/project/l",
+        method: 'get',
+        params: query,
+    })
+}
+// 查询所有项目下拉
+export function queryallproject(query) {
+    return request({
+        url: "/djl-salary/salaryproject/queryallproject",
+        method: 'get',
+        params: query,
+    })
+}
+// 查询所有派遣公司下拉
+export function queryAllDispatch(query) {
+    return request({
+        url: "/djl-salary/advance/salary/bill/dispatch/list",
+        method: 'get',
+        params: query,
+    })
+}
+// 预支工资账单明细列表
+export function billDetail(query) {
+    return request({
+        url: "/djl-salary/advance/salary/bill/details",
+        method: 'get',
+        params: query,
+    })
+}
\ No newline at end of file

src/router/index.js

@@ -149,6 +149,30 @@ export const constantRoutes = [
         }
       },
     ]
+  },
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/bill',
+    children: [
+      {
+        path: 'bill',
+        component: () => import('@/views/bill/index'),
+        name: 'person/archives',
+        meta: { title: '账单', icon: 'form' }
+      },
+      {
+        "name": "billDetails",
+        "path": "bill/details",
+        "hidden": true,
+        "component": () => import('@/views/bill/details'),
+        "meta": {
+          "title": "账单明细",
+          "preTitle":"账单",
+          "activeMenu":"/person/archives"
+        }
+      },
+    ]
   }
   // {
   //   path: "/channel",

src/views/bill/details.vue

+<template>
+    <div class="billDetails">
+        <el-form :model="queryParams" ref="queryRef" :inline="true">
+            <!-- <el-form-item label="账单年月" prop="billDate">
+                <el-date-picker
+                    v-model="queryParams.billDate"
+                    type="month"
+                    placeholder="账单年月"
+                    value-format="YYYY-MM"
+                />
+            </el-form-item> -->
+            <el-form-item label="项目" prop="proId">
+                <el-select
+                    v-model="queryParams.proId"
+                    placeholder="请选择"
+                    style="width: 240px"
+                    filterable
+                >
+                    <el-option
+                        v-for="item in options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+        <el-table v-loading="loading" :data="list">
+            <el-table-column label="账单年月" prop="billYM" />
+            <el-table-column label="项目" prop="project" />
+            <el-table-column label="累计发放金额" prop="totalMoney" />
+            <el-table-column label="累计发放次数" prop="totalTimes" />
+            <el-table-column label="手续费总额" prop="totalFee" />
+            <el-table-column label="操作">
+                <template #default="{row}">
+                    <el-button link type="primary" icon="Edit" @click="handleDetails(row)">明细</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.page"
+            v-model:limit="queryParams.limit"
+            @pagination="getList"
+        />
+        <el-dialog v-model="dialogFormVisible" title="明细" width="1000">
+          <el-table v-loading="detailLoading" :data="detailList">
+            <el-table-column label="姓名" align="left" prop="name" width="140" />
+            <el-table-column label="证件号码" align="center" prop="id_no" />
+            <el-table-column label="申请金额" align="center" prop="money" width="140" />
+            <el-table-column label="实发金额" align="center" prop="actual_money" width="140" />
+            <el-table-column label="手续费" align="center" prop="service_fee" width="140" />
+            <el-table-column label="支付时间" align="center" prop="paid_time" />
+          </el-table>
+          <div style="position: relative;">
+            <pagination
+                v-show="detailTotal > 0"
+                :total="detailTotal"
+                v-model:page="detailQueryParams.page"
+                v-model:limit="detailQueryParams.limit"
+                @pagination="getDetailList"
+            />
+          </div>
+          <template #footer>
+              <div class="dialog-footer">
+                  <el-button type="primary" @click="dialogFormVisible = false">确定</el-button>
+              </div>
+          </template>
+        </el-dialog>
+    </div>
+  </template>
+  <script setup>
+  import {ref} from "vue";
+  const { proxy } = getCurrentInstance();
+  import { billProjectList,queryallproject,billDetail } from "@/api/bill"
+  const list = ref([]);
+  const loading = ref(false);
+  const options = ref([]); // 项目下拉
+  const total = ref(0);
+  const queryParams = ref({
+    billDate:  proxy.$route.query.billDate,
+    proId: '',
+    page: 1,
+    limit: 10,
+    baseCode: proxy.$route.query.baseCode
+  });
+  
+  const detailList = ref([]);
+  const detailLoading = ref(false);
+  const detailTotal = ref(0);
+  
+  const detailQueryParams = ref({
+    page: 1,
+    limit: 10,
+    proId: '',
+    billDate: '',
+    baseCode: ''
+  }) // 弹窗列表查询条件
+  const dialogFormVisible = ref(false); // 弹窗
+  /** 打开明细弹窗 */
+  function handleDetails(row){
+    dialogFormVisible.value = true;
+    detailLoading.value = true;
+    detailQueryParams.value.proId = row.proId;
+    detailQueryParams.value.billDate = row.billYM;
+    detailQueryParams.value.baseCode = row.baseCode;
+    detailTotal.value = 0;
+    detailList.value = [];
+    getDetailList()
+  }
+  /** 查询明细 */
+  function getDetailList() {
+    billDetail(detailQueryParams.value).then(res => {
+      detailLoading.value = false;
+      detailTotal.value = res.count;
+      detailList.value = res.data;
+    })
+  }
+  /** 搜索按钮操作 */
+  function handleQuery() {
+  queryParams.value.page = 1;
+  queryParams.value.limit = 10;
+  getList();
+  }
+  /** 重置按钮操作 */
+  function resetQuery() {
+    queryParams.value = {
+        billDate: proxy.$route.query.billDate,
+        proId: '',
+        page: 1,
+        limit: 10
+    }
+    handleQuery();
+  }
+  /** 查询预支工资账单列表 */
+  function getList() {
+    loading.value = true;
+    billProjectList(queryParams.value).then(response => {
+      list.value = response.data;
+      total.value = response.count;
+      loading.value = false;
+    });
+  }
+  // 查询所有项目、渠道下拉
+  function getqueryallproject() {
+    queryallproject().then(res => {
+      res.data = res.data || []
+      options.value = res.data.map(item => {
+        return {
+          value: item.pro_id,
+          label: item.project
+        }
+      });
+    })
+  }
+  getqueryallproject();
+  getList();
+  </script>
+  <style lang="scss">
+  .billDetails{
+    padding: 20px;
+  }
+  </style>
\ No newline at end of file

src/views/bill/index.vue

+<template>
+    <div class="bill">
+      <el-form :model="queryParams" ref="queryRef" :inline="true">
+          <el-form-item label="账单年月" prop="billDate">
+              <el-date-picker
+                  v-model="queryParams.billDate"
+                  type="month"
+                  placeholder="账单年月"
+                  value-format="YYYY-MM"
+              />
+          </el-form-item>
+          <el-form-item label="派遣" prop="baseCode">
+            <el-select
+                v-model="queryParams.baseCode"
+                placeholder="请选择"
+                style="width: 240px"
+                filterable
+            >
+                <el-option
+                    v-for="item in options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                />
+            </el-select>
+        </el-form-item>
+          <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+          </el-form-item>
+      </el-form>
+      <el-table v-loading="loading" :data="list">
+          <el-table-column label="派遣公司" prop="dispatchName" />
+          <el-table-column label="账单年月" prop="billYM" />
+          <el-table-column label="累计发放金额" prop="totalMoney" />
+          <el-table-column label="累计发放次数" prop="totalTimes" />
+          <el-table-column label="手续费总额" prop="totalFee" />
+          <el-table-column label="平台分成" prop="totalTimes" />
+          <el-table-column label="盈利" prop="profit" />
+          <el-table-column label="状态">
+            <template #default="{row}">
+              <span v-if="row.state == 'none'">未结算</span>
+              <span v-if="row.state == 'settle'">已结算</span>
+              <span v-if="row.state == 'payment'">已收款</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="平台状态">
+            <template #default="{row}">
+              <span v-if="row.platState == 'settle'">挂账</span>
+              <span v-if="row.platState == 'payment'">已收款</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作"  width="240">
+              <template #default="{row}">
+                  <el-button link type="primary" icon="Memo" @click="handleDetails(row)">结算</el-button>
+                  <el-button link type="primary" icon="Edit" @click="handleDetails(row)">明细</el-button>
+                  <el-button link type="primary" icon="Download" @click="handleDetails(row)">下载</el-button>
+              </template>
+          </el-table-column>
+      </el-table>
+      <pagination
+          v-show="total > 0"
+          :total="total"
+          v-model:page="queryParams.page"
+          v-model:limit="queryParams.limit"
+          @pagination="getList"
+      />
+  </div>
+</template>
+<script setup>
+import {ref} from "vue";
+import { billList,queryAllDispatch } from "@/api/bill"
+const { proxy } = getCurrentInstance();
+const options = ref([]); // 派遣下拉
+const list = ref([{}]);
+const loading = ref(false);
+const total = ref(0); // 分页
+const queryParams = ref({
+    billDate: '',
+    baseCode: '',
+    page: 1,
+    limit: 10
+}); // 查询参数
+/** 查询明细 */
+function handleDetails(row){
+  proxy.$router.push(`/bill/details?baseCode=${row.baseCode}&billDate=${row.billYM}`)
+}
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.page = 1;
+  queryParams.value.limit = 10;
+  getList();
+}
+/** 重置按钮操作 */
+function resetQuery() {
+    queryParams.value = {
+        billDate: '',
+        baseCode: '',
+        page: 1,
+        limit: 10
+    }
+    handleQuery();
+}
+/** 查询预支工资账单列表 */
+function getList() {
+  loading.value = true;
+  billList(queryParams.value).then(response => {
+    list.value = response.data;
+    total.value = response.count;
+    loading.value = false;
+  });
+}
+function getqueryAllDispatch() {
+    queryAllDispatch().then(res => {
+        res.data = res.data || []
+        options.value = res.data.map(item => {
+            return {
+                value: item.baseCode,
+                label: item.name
+            }
+        });
+    })
+}
+getqueryAllDispatch();
+getList();
+</script>
+<style lang="scss">
+.bill{
+    padding: 20px;
+}
+</style>
\ No newline at end of file