Merge branch 'jzl'

precision-effect-web/src/api/account/account.js

+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2023-06-12 10:49:16
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-06-13 16:19:48
+ * @FilePath: /precision-effect-web/src/api/account/account.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import request from '@/utils/request'
 
 // 查询账户列表
@@ -9,6 +17,15 @@ export function listAccount(query) {
   })
 }
 
+
+// 应收应付金额列表
+export function getIncomeOrPayableList (query) {
+  return request({
+    url: '/trade/project/getIncomeOrPayableList',
+    method: 'get',
+    params: query
+  })
+}
 // 查询账户详细
 export function getAccount(accountId) {
   return request({

precision-effect-web/src/assets/styles/zehong.scss

@@ -324,3 +324,6 @@
 .flex{
 	display: flex;
 }
+.cup{
+	cursor: pointer;
+}
\ No newline at end of file

precision-effect-web/src/views/account/component/MoneyTable.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2023-06-13 15:40:04
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-06-13 17:18:43
+ * @FilePath: /precision-effect-web/src/views/account/component/table.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div>
+    <!-- 交易项目、卖方、申请人、买方、买方经办人、应付/应收金额 -->
+    <el-table :data="tableData" v-loading="moneyLoading">
+      <el-table-column
+        label="交易项目"
+        align="center"
+        prop="a"
+        :formatter="formatter"
+      />
+      <el-table-column label="卖方" align="center" prop="tradeTransactorName" />
+      <el-table-column label="申请人" align="center" prop="applyName" />
+      <el-table-column label="买方" align="center" prop="applyDeptName" />
+      <el-table-column label="买方经办人" align="center" prop="tradeDeptName" />
+      <template v-if="or === 'income'">
+        <el-table-column
+          label="应收金额"
+          align="center"
+          prop="pendingPayment"
+        />
+      </template>
+      <template v-else>
+        <el-table-column
+          label="应付金额"
+          align="center"
+          prop="pendingPayment"
+        />
+      </template>
+    </el-table>
+
+    <pagination
+      v-show="tableData.length > 0"
+      :total="total"
+      :page.sync="queryAccountDetailParams.pageNum"
+      :limit.sync="queryAccountDetailParams.pageSize"
+      @pagination="getOperateList"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    moneyLoading: {
+      type: Boolean,
+    },
+    tableData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    or: {
+      type: String,
+      default: "tableOr",
+    },
+    total: {
+      tyle: Number,
+    },
+    deptId: {
+      tyle: Number,
+    },
+  },
+  data() {
+    return {
+      queryAccountDetailParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  methods: {
+    getOperateList() {
+      this.$parent.getIncomeOrPayableList(
+        {
+          ...queryAccountDetailParams,
+          deptId: this.deptId,
+        },
+        or
+      );
+    },
+    formatter(row, column, cellValue, index) {
+      return cellValue ? cellValue : "-";
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>

precision-effect-web/src/views/account/index.vue

 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="部门" prop="deptId">
         <div style="width: 200px">
-          <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="请选择归属部门" :disabled="disabled"/>
+          <treeselect
+            v-model="queryParams.deptId"
+            :options="deptOptions"
+            :show-count="true"
+            placeholder="请选择归属部门"
+            :disabled="disabled"
+          />
         </div>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
@@ -60,12 +80,49 @@
     </el-row>-->
 
     <el-table v-loading="loading" :data="accountList">
-      <el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
-      <el-table-column label="账户总额" align="center" prop="totalAmount"/>
+      <el-table-column
+        label="部门"
+        align="center"
+        prop="deptName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column label="账户总额" align="center" prop="totalAmount" />
       <el-table-column label="可用金额" align="center" prop="ableAmount" />
-      <el-table-column label="应收总额" align="center" prop="incomeAbleTotalAmount"/>
-      <el-table-column label="应付总额" align="center" prop="payableTotalAmount"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="应收总额"
+        align="center"
+        prop="incomeAbleTotalAmount"
+      >
+        <template v-slot="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="moneyDialog(scope.row, 'income')"
+          >
+            {{ scope.row.incomeAbleTotalAmount }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="应付总额"
+        align="center"
+        prop="payableTotalAmount"
+      >
+        <template v-slot="scope">
+          <el-button
+            size="mini"
+            type="text"
+            @click="moneyDialog(scope.row, 'pay')"
+          >
+            {{ scope.row.payableTotalAmount }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
           <!--<el-button
             size="mini"
@@ -81,13 +138,15 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['system:account:remove']"
           >删除</el-button>-->
-          <el-button size="mini" type="text" @click="accountDetail(scope.row)">账户详情</el-button>
+          <el-button size="mini" type="text" @click="accountDetail(scope.row)"
+            >账户详情</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -110,27 +169,50 @@
       </div>
     </el-dialog>
 
+    <!-- 应收应付弹框 -->
+    <el-dialog
+      :title="tableOr === 'pay' ? '应付金额' : '应收金额'"
+      :visible.sync="moneyOpen"
+      append-to-body
+      destroy-on-close
+    >
+      <MoneyTable
+        :tableData="ableTotalAmountData"
+        :or="tableOr"
+        :deptId="deptId"
+        :total="ableTotalAmounTotal"
+        :moneyLoading="moneyLoading"
+      />
+    </el-dialog>
     <!-- 账户详情 -->
-    <el-dialog title="账户详情" :visible.sync="operateOpen" width="800px" append-to-body>
-
+    <el-dialog
+      title="账户详情"
+      :visible.sync="operateOpen"
+      width="800px"
+      append-to-body
+    >
       <el-table :data="cashOperateList">
         <el-table-column label="序号" width="50px" align="center">
           <template slot-scope="scope">
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column label="操作部门" align="center" prop="operateDeptName"/>
+        <el-table-column
+          label="操作部门"
+          align="center"
+          prop="operateDeptName"
+        />
         <el-table-column label="操作类型" align="center" prop="operateType">
           <template slot-scope="scope">
             <span v-if="scope.row.operateType == '1'">借贷</span>
             <span v-if="scope.row.operateType == '2'">借支</span>
           </template>
         </el-table-column>
-        <el-table-column label="金额" align="center" prop="operateAmount"/>
-        <el-table-column label="操作时间" align="center" prop="operateTime"/>
+        <el-table-column label="金额" align="center" prop="operateAmount" />
+        <el-table-column label="操作时间" align="center" prop="operateTime" />
       </el-table>
       <pagination
-        v-show="operateListTotal>0"
+        v-show="operateListTotal > 0"
         :total="operateListTotal"
         :page.sync="queryAccountDetailParams.pageNum"
         :limit.sync="queryAccountDetailParams.pageSize"
@@ -141,15 +223,26 @@
 </template>
 
 <script>
-import { listAccount, getAccount, delAccount, addAccount, updateAccount, exportAccount } from "@/api/account/account";
+import {
+  listAccount,
+  getIncomeOrPayableList,
+  getAccount,
+  delAccount,
+  addAccount,
+  updateAccount,
+  exportAccount,
+} from "@/api/account/account";
 import { treeselect } from "@/api/system/dept";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import { listOperate } from "@/api/account/operate";
+
+import MoneyTable from "./component/MoneyTable";
 export default {
   name: "Account",
   components: {
-    Treeselect
+    Treeselect,
+    MoneyTable,
   },
   data() {
     return {
@@ -171,14 +264,24 @@ export default {
       accountList: [],
       // 弹出层标题
       title: "",
+
       // 是否显示弹出层
       open: false,
+      // 总额弹框
+      moneyOpen: false,
+      moneyLoading:true,
+      // 应收还是应付 income / pay
+      tableOr: "income",
+      ableTotalAmountData: [],
+      ableTotalAmounTotal: 0,
+      deptId: null,
+
       // 查询参数
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         deptId: null,
-        ableAmount: null
+        ableAmount: null,
       },
       queryAccountDetailParams: {
         pageNum: 1,
@@ -188,20 +291,19 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      },
+      rules: {},
       // 部门树选项
       deptOptions: [],
       disabled: false,
       operateOpen: false,
       cashOperateList: [],
-      operateListTotal: 0
+      operateListTotal: 0,
     };
   },
   created() {
-    console.log("userId===",this.$store.state.user.userId);
-    console.log("deptId===",this.$store.state.user.deptId);
-    if(this.$store.state.user.userId != 1){
+    console.log("userId===", this.$store.state.user.userId);
+    console.log("deptId===", this.$store.state.user.deptId);
+    if (this.$store.state.user.userId != 1) {
       this.queryParams.deptId = this.$store.state.user.deptId;
       this.disabled = true;
     }
@@ -212,12 +314,26 @@ export default {
     /** 查询账户列表 */
     getList() {
       this.loading = true;
-      listAccount(this.queryParams).then(response => {
+      listAccount(this.queryParams).then((response) => {
+        console.log(response);
         this.accountList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
     },
+    getIncomeOrPayableList(queryParams, or) {
+      if (or === "pay") {
+        return getIncomeOrPayableList({
+          ...queryParams,
+          tradeDeptId: queryParams.deptId,
+        });
+      } else {
+        return getIncomeOrPayableList({
+          ...queryParams,
+          applyDeptId: queryParams.deptId,
+        });
+      }
+    },
     // 取消按钮
     cancel() {
       this.open = false;
@@ -228,7 +344,7 @@ export default {
       this.form = {
         accountId: null,
         deptId: null,
-        ableAmount: null
+        ableAmount: null,
       };
       this.resetForm("form");
     },
@@ -244,9 +360,9 @@ export default {
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.accountId)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
+      this.ids = selection.map((item) => item.accountId);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
     },
     /** 新增按钮操作 */
     handleAdd() {
@@ -257,8 +373,8 @@ export default {
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
-      const accountId = row.accountId || this.ids
-      getAccount(accountId).then(response => {
+      const accountId = row.accountId || this.ids;
+      getAccount(accountId).then((response) => {
         this.form = response.data;
         this.open = true;
         this.title = "修改账户";
@@ -266,16 +382,16 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.accountId != null) {
-            updateAccount(this.form).then(response => {
+            updateAccount(this.form).then((response) => {
               this.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addAccount(this.form).then(response => {
+            addAccount(this.form).then((response) => {
               this.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -287,53 +403,88 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const accountIds = row.accountId || this.ids;
-      this.$confirm('是否确认删除账户编号为"' + accountIds + '"的数据项?', "警告", {
+      this.$confirm(
+        '是否确认删除账户编号为"' + accountIds + '"的数据项?',
+        "警告",
+        {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
+          type: "warning",
+        }
+      )
+        .then(function () {
           return delAccount(accountIds);
-        }).then(() => {
+        })
+        .then(() => {
           this.getList();
           this.msgSuccess("删除成功");
-        }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
       const queryParams = this.queryParams;
-      this.$confirm('是否确认导出所有账户数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(() => {
+      this.$confirm("是否确认导出所有账户数据项?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
           this.exportLoading = true;
           return exportAccount(queryParams);
-        }).then(response => {
+        })
+        .then((response) => {
           this.download(response.msg);
           this.exportLoading = false;
-        }).catch(() => {});
+        })
+        .catch(() => {});
     },
     /** 查询部门下拉树结构 */
     getTreeselect() {
-      treeselect().then(response => {
-          this.deptOptions = response.data;
+      treeselect().then((response) => {
+        this.deptOptions = response.data;
       });
     },
+    // 应收音符金额点击弹框 data是table传进来的数据，or是印绶还是应付
+    moneyDialog(data, or, pageNum, pageSize) {
+       this.tableOr = or;
+      this.moneyOpen = true;
+      this.ableTotalAmountData=[];
+      this.moneyLoading=true;
+      // 储存一下，好传参,点击进来的要
+      this.deptId = data.deptId;
+      const queryParams = {
+        pageNum: pageNum ? pageNum : 1,
+        pageSize: pageSize ? pageSize : 10,
+        deptId: this.deptId,
+      };
+
+      this.getIncomeOrPayableList(queryParams, or).then((res) => {
+        // console.log(res)
+        this.ableTotalAmountData = res.rows;
+        this.ableTotalAmounTotal=res.total;
+        this.moneyLoading=false;
+      });
+      // // 应收还是应付
+      // this.tableOr = or;
+      // this.moneyOpen = true;
+      // this.ableTotalAmountData = [];
+    },
     //账户详情
-    accountDetail(row){
+    accountDetail(row) {
       this.operateOpen = true;
       this.queryAccountDetailParams.operateDeptId = row.deptId;
       this.getOperateList();
     },
     //账户操作记录查询
-    getOperateList(){
-      listOperate(this.queryAccountDetailParams).then(res =>{
-        if(res.code == 200){
+    getOperateList() {
+      listOperate(this.queryAccountDetailParams).then((res) => {
+        if (res.code == 200) {
           this.cashOperateList = res.rows;
           this.operateListTotal = res.total;
         }
-      })
-    }
-  }
+      });
+    },
+  },
 };
 </script>