费用管理下,添加账号报表查看菜单页面

config/dev.env.js

@@ -5,11 +5,11 @@ const prodEnv = require('./prod.env')
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   ENV_CONFIG:'"dev"',
-  BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
+  // BASE_URL: '"https://test.baoxianzhanggui.com/web-api"',//测试服务器
   // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
   // BASE_URL:'"https://sxzgkj.baoxianzhanggui.com/web-api"'//正式服务器
   // BASE_URL: '"http://192.168.0.115:8080/"' //凯森
-  // BASE_URL: '"http:///192.168.0.106:8080/"',//屈晨
+  BASE_URL: '"http:///192.168.0.106:8080/"',//屈晨
   // BASE_URL: '"http:///192.168.0.253:8082/"',//田智
   // BASE_URL: '"http:///192.168.0.42:8080/"',//武鸿鹏
   // BASE_URL: '"http://192.168.1.101:8080/"',

src/views/FinancialManagement/ExpenseManagement/AccountReportViewing.vue

@@ -0,0 +1,420 @@
+<template>
+  <!--布局容器-->
+  <div class="container" style="width: 99%; margin-top: 0px">
+    <!-- 顶部查询 -->
+    <el-row class="top">
+      <el-form v-model="queryFrom" size="small" label-width="95px" class="form">
+        <el-form-item label="账户类别" label-width="95px" prop="outerFlag">
+          <el-select v-model="queryFrom.outerFlag" placeholder="请选择账户类别" clearable>
+            <el-option label="内部账户" value="0"></el-option>
+            <el-option label="外部账户" value="1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="户名" label-width="95px" prop="invCompanyName">
+          <el-input v-model="queryFrom.accountName" placeholder="请输入户名" class="widths" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="银行卡号" label-width="95px" prop="invCompanyName">
+          <el-input v-model="queryFrom.bankCardNum" placeholder="请输入银行卡号" class="widths" clearable></el-input>
+        </el-form-item>
+        <el-form-item>
+          <kt-button label="查询" type="primary" perms="expenseManagement:accountInformation:query"
+            @click="queryStaffInfo" />
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <!-- 表格 -->
+    <el-table :data="accountData" border size="small" ref="account" :header-cell-style="{
+      background: '#F2F7FC',
+      fontWeight: '900',
+      color: '#606266',
+    }" height="600px" style="width: 100%; margin-top: 30px" >
+      <el-table-column v-for="(dataItem, dataIndex) in columns" :key="dataIndex" :label="dataItem.label"
+        :prop="dataItem.prop" :min-width="dataItem.minWidth" align="center">
+      </el-table-column>
+    </el-table>
+    <el-pagination @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper"
+      @current-change="refreshPageRequest" :current-page="pageRequest.pageNo" :page-size="pageRequest.pageSize"
+      :page-sizes="[20, 50, 100, 200, 300, 400, 500]" :total="pageRequest.totalSize"
+      style="float: left; margin-left: 20px; margin-top: 20px">
+    </el-pagination>
+  </div>
+</template>
+<script>
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import KtButton from "@/views/Core/KtButton"; // 按钮权限组件
+export default {
+  name: "ExpenseManagement",
+  components: { KtCommonTable, KtButton },
+  created() {
+    this.business("account_quality"); //账户性质字典;
+    this.business("payment_methods"); //支付方式字典
+    this.business("nature_business"); //营业性质字典
+  },
+  mounted() { },
+  data() {
+    return {
+      type: 1, //1为账户信息，2为卡信息 账户和卡判断条件
+      /**
+       * 账户收入模块
+       */
+      incomeDialogVisible: false, //收入 弹出框状态
+      collectionData: [], //收入  转账方下拉菜单数组
+      fundFlowData: [], //资金用途字典数据
+      payment_methodsData: [], //收入  支付方式字典数据
+      inComeFormData: {
+        //收入form表单
+        collectionMessage: "", //收款名字
+        fundFlow: "", //资金流向
+        applyAmount: "", //金额
+        bigApplyAmount: "", //大写金额
+        company: "", //转账方
+        payMethod: [], //转账方
+        fundUse: "", //资金用途
+      },
+      inComeFormRules: {
+        //收入规则
+        company: [
+          { required: true, message: "转账方不能为空", trigger: "change" },
+        ],
+        payMethod: [
+          { required: true, message: "请选择支付方式", trigger: "change" },
+        ],
+      },
+      enterCardId: "", //收入id
+      /**
+       * 账户模块
+       */
+      title: "新增账户信息",
+      accountData: [], //账户信息数据
+      dialogFormVisible: false, //弹出框状态
+      operationWidth: 200, //操作列宽度
+      account_qualityData: [], //账户性质数据字典
+      nature_businessData: [], //营业性质数据字典
+      queryFrom: {
+        //查询条件
+        bankCardNum: "", //银行卡号查询
+        accountName: "", //户名查询
+      },
+      button1Name: "支出", //按钮内容
+      button3Name: "删除",
+      button2Name: "收入",
+      expendButton1Name: "确认已转账",
+      formDataId: "", //数据Id
+      pageRequest: {
+        // 列表查询条件
+        pageNo: 1,
+        pageSize: 20,
+      },
+      // 账户表格数据列
+      columns: [
+        {
+          prop: "outerFlagName",
+          label: "账户类别",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "businessQualityName",
+          label: "营业性质",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "accountName",
+          label: "户名",
+          minWidth: 240,
+          sortable: false,
+        },
+        {
+          prop: "juridicalPerson",
+          label: "法人",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "owned",
+          label: "所属地",
+          minWidth: 100,
+          sortable: false,
+        },
+        {
+          prop: "biller",
+          label: "开票员",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "invoicingAmount",
+          label: "开票额度",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "invoicingAmountExcess",
+          label: "剩余开票额度",
+          minWidth: 90,
+          sortable: false,
+        },
+        {
+          prop: "establishTime",
+          label: "成立日期",
+          minWidth: 90,
+          sortable: false,
+        },
+        {
+          prop: "quarterAmountExcess",
+          label: "季度开票额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "sumInvoicingAmount",
+          label: "总开票额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "tentativeEstimates",
+          label: "暂估",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "yearAmount",
+          label: "本年开票金额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "quarterAmount",
+          label: "本季度开票金额",
+          minWidth: 120,
+          sortable: false,
+        },
+      ],
+      childColums: [
+        //卡表格数据列
+        {
+          prop: "accountQualityName",
+          label: "账户性质",
+          minWidth: 80,
+          sortable: false,
+        },
+        {
+          prop: "bankCardNum",
+          label: "银行卡号",
+          minWidth: 170,
+          sortable: false,
+        },
+        {
+          prop: "bank",
+          label: "开户行",
+          minWidth: 300,
+          sortable: false,
+        },
+        {
+          prop: "bankName",
+          label: "开户行名称",
+          minWidth: 300,
+          sortable: false,
+        },
+        {
+          prop: "bankNum",
+          label: "开户行号",
+          minWidth: 150,
+          sortable: false,
+        },
+        {
+          prop: "balance",
+          label: "余额",
+          minWidth: 100,
+          sortable: false,
+        },
+        {
+          prop: "startCertExpirationDate",
+          label: "证书有效开始日期",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "endCertExpirationDate",
+          label: "证书有效结束日期",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "dayStrokeNum",
+          label: "单日转账笔数限制",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubDayLinesExcess",
+          label: "单日转账笔数剩余",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priDayLines",
+          label: "对私单日限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priDayLinesExcess",
+          label: "对私单日限额剩余",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priSingleLines",
+          label: "对私单笔限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priYearLines",
+          label: "对私年额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "priYearExcess",
+          label: "对私年剩余额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubDayLines",
+          label: "对公单日限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubDayLinesExcess",
+          label: "对公单日限额剩余",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubSingleLines",
+          label: "对公单笔限额",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubYearLines",
+          label: "对公年额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "pubYearExcess",
+          label: "对公年剩余额度",
+          minWidth: 120,
+          sortable: false,
+        },
+        {
+          prop: "spend",
+          label: "支出金额",
+          minWidth: 120,
+          sortable: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    // 换页刷新
+    refreshPageRequest: function (pageNum) {
+      this.pageRequest.pageNo = pageNum;
+      this.findPage();
+    },
+    // 每页条数发生改变
+    handleSizeChange(pageSize) {
+      this.pageRequest.pageSize = pageSize;
+      this.findPage();
+    },
+    //数据字典
+    business(typeName) {
+      this.$api.dict.findByLableName(typeName).then((res) => {
+        this[typeName + "Data"] = res.data;
+        if (typeName == "account_quality" && this.accountData.length == 0) {
+          this.findPage();
+        }
+      });
+    },
+    // 查询
+    queryStaffInfo() {
+      this.findPage();
+    },   //展开事件
+      //获取页面列表数据
+    findPage(data) {
+      if (data && data.pageRequest) {
+        this.pageRequest.pageNo = data.pageRequest.pageNum;
+        this.pageRequest.pageSize = data.pageRequest.pageSize;
+      }
+      let obj = { ...this.queryFrom, ...this.pageRequest };
+      this.$api.expense
+        .getAccount(obj)
+        .then((res) => {
+          if (res.code == 200) {
+            res.data.records.forEach((element) => {
+              if (element != null && element != "" && element != undefined) {
+                //转化营业性质
+                let quality = this.nature_businessData.find(
+                  (item) => item.value == element.businessQuality
+                );
+                if (quality != null && quality != "" && quality != undefined) {
+                  element.businessQualityName = quality.label;
+                } else {
+                  element.businessQualityName = "";
+                }
+                element.outerFlagName =
+                  element.outerFlag == 0 ? "内部账户" : "外部账户";
+              }
+            });
+            this.accountData = res.data.records;
+            this.pageRequest.pageNo = res.data.current;
+            this.pageRequest.pageSize = res.data.size;
+            this.pageRequest.totalPages = res.data.pages;
+            this.pageRequest.totalSize = res.data.total;
+          }
+        })
+        .then(data != null ? data.callback : "");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.operation {
+  margin-left: 14px !important;
+  margin-top: 15px !important;
+}
+
+.form {
+  display: flex;
+  margin-top: 14px;
+  align-items: center;
+  margin-left: -12px;
+  margin-bottom: 20px;
+}
+
+.el-pagination {
+  font-weight: normal;
+}
+
+.el-card__body {
+  padding: 12px !important;
+}
+
+.footer .footerdiv {
+  display: flex;
+  align-items: center;
+}
+
+.container .el-form-item {
+  margin-bottom: -14px !important;
+}
+
+</style>