vue-insagent-pc/src/views/FinancialManagement/ExpenseManagement/ViewExpenseReport.vue

<template>
  <div class="table_btnbox">
    <!-- 搜索 -->
    <el-row class="top">
      <el-form v-model="queryFrom" size="small" label-width="120px" class="query-form">
        <el-form-item label="支出部门" prop="applySector">
          <el-input v-model="queryFrom.applySector" placeholder="请输入部门" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item label="支出账户" prop="company">
          <el-input v-model="queryFrom.company" placeholder="请输入支出账户" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item label="转账日期" prop="createTime">
          <el-date-picker v-model="createdate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="createTimeChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="收款账户" prop="collectionMessage">
          <el-select v-model="queryFrom.collectionMessage" filterable clearable placeholder="收款账户">
            <el-option v-for="(item, index) in collectionData" :key="item.accountId + 'aa' + index" :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="费用类型" prop="fundUse">
          <el-select v-model="queryFrom.fundUse" filterable clearable placeholder="费用类型">
            <el-option v-for="(item, index) in fundFlowData" :key="index" :label="item.category" :value="item.category">
            </el-option>
          </el-select>
          <!-- <el-cascader
                    v-model="queryFrom.fundUse"
                    :show-all-levels="true"
                    :clearable="true"
                    :checkStrictly="true"
                    :emitPath="false"
                    placeholder="费用类型"
                    :options="fundFlowData"
                    filterable
                    :props="{
                        children: 'child',
                        label: 'category',
                        value: 'category',
                        checkStrictly: false,
                    }"
                    ></el-cascader> -->
        </el-form-item>
        <el-form-item label="支出金额" prop="applyAmount">
          <el-input v-model="queryFrom.applyAmount" placeholder="请输入支出金额" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item label="成本分类" prop="label">
          <el-input v-model="queryFrom.label" placeholder="请输入成本分类" class="widths" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button label="查询" type="primary" @click="queryStaffInfo" />
          <kt-button label="批量导出" type="primary" :disabled="!this.expentList.length" @click="expendDataup" />
        </el-form-item>
      </el-form>
    </el-row>

    <!-- 表格 -->
    <kt-common-table :operationWidth="operationWidth" class="ktTable" :showBatchPrint="true" ref="dataTable"
      :data="pageResult" :columns="columns" :showOperation="false" @findPage="findPage"
      @selectionChange="selectionChange"></kt-common-table>

  </div>
</template>
<script>
import ExpenseComponent from "./ExpenseComponent.vue"; //新增账户信息弹框
// import ExpenseManagement from "./ExpenseManagement.vue"; //新增账户信息
import KtButton from "@/views/Core/KtButton"; // 按钮权限组件

import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
import { toChies, convertPositive } from "../../../utils/moneyTransition";
export default {
  name: "ExpenseApplyFor",
  components: { KtCommonTable, ExpenseComponent, KtButton },
  data() {
    //开票金额自定义校验
    let applyAmountRules = (rule, value, callback) => {
      if (value == 0) {
        callback(new Error("申请金额不能小于0"));
      } else {
        callback();
      }
    };
    return {
      createdate: [],
      formDisable: false, //资金申请form表单是否可选状态
      expentList: [], //批量导出数据
      expenseaaa: true,
      expendTitle: "新增资金使用申请单", //弹框标题
      operationWidth: 250, //操作单元格宽度
      queryFrom: {}, //查询form表单
      pageRequest: {
        // 列表查询条件
        pageNum: 1,
        pageSize: 10,
      },
      dialogFormVisible: false, //账户信息弹出框状态
      title: "新增账户信息", //账户信息弹框标题
      expenseDialog: false, //申请单显示状态
      pageResult: {
        //表格参数
        pageNum: 1,
        pageSize: 10,
        content: [],
      },
      columns: [
        // 申请列表表格头部
        {
          prop: "createTime",
          label: "转账日期",
          sortable: false,
        },
        {
          prop: "label",
          label: "成本分类",
          sortable: false,
        },
        {
          prop: "fundUse",
          label: "费用类型",
          sortable: false,
        },
        {
          prop: "remark",
          label: "摘要",
          sortable: false,
        },
        {
          prop: "applyAmount",
          label: "支出金额",
          sortable: false,
        },

        {
          prop: "applySector",
          label: "支出部门",
          sortable: false,
        },
        {
          prop: "company",
          label: "支出账户",
          sortable: false,
        },
        {
          prop: "collectionMessage",
          label: "收款账户",
          sortable: false,
        },

      ],
      pickerOptions: {
        //日期快捷键
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      payment_methodsData: [], //支付方式字典数据
      affiliationData: [], //归属字典数据
      affiliationData2: [], //归属字典数据
      collectionData: [], //收款单位信息数据
      innerCollectionData: [], //内部账户单位信息数据
      account_qualityData: [], //账户性质字典
      fundFlowData: [], //资金用途字典数据
      companyItem: {}, //选择单位整条数据
      collectionMessageItem: {}, //选择收款单位整条数据
      expendDataId: "", //修改时该条数据id
      buttonValue: "导 出", //弹框提交按钮内容
      collectionData: [], //收款单位信息数据

    };
  },

  created() {
    this.getAllUser(); //获取所有银行账户信息
    this.getTreeList()
  },
  mounted() { },
  methods: {
    createTimeChange(e) {
      if (e) {
        this.queryFrom.createTimeStart = e[0]+" 00:00:00";
        this.queryFrom.createTimeEnd = e[1]+" 23:59:59";
      } else {
        this.queryFrom.createTimeStart = "";
        this.queryFrom.createTimeEnd = "";
      }
    },
    //获取资金用途树数据
    getTreeList() {
      this.$api.expense.getAccountExpensesTreeList().then((res) => {
        if (res.code == 200) {
          this.fundFlowData = res.data;
          this.fundFlowSet();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //资金用途数据转换     如果最后一项child数组长度为0把值变为null
    fundFlowSet(data) {
      data = data || this.fundFlowData;
      for (var i = 0; i < data.length; i++) {
        if (data[i].child.length) {
          this.fundFlowSet(data[i].child);
        } else {
          data[i].child = null;
        }
      }
    },
    //获取所有账户信息
    getAllUser() {
      this.$api.expense.getAccountByAccountName().then((res) => {
        if (res.code == 200) {
          let arr = [];
          let filteredData = res.data.filter(item => item.outerFlag == "1");
          filteredData.map(item => {
            if (item.invAccountCardList != null) {
              item.invAccountCardList.forEach((it) => {
                it.name =
                  (item.outerFlag == 0 ? "内部用户" : "外部用户") +
                  "   " +
                  (it.accountQuality == 0 ? "公户" : "私户") +
                  "   " +
                  item.accountName +
                  "   " +
                  it.bankCardNum +
                  "   " +
                  it.bank;
                arr.push(...item.invAccountCardList);
              });
            }
          })
          this.collectionData = arr;
        }
      });
    },
    //表格多选事件
    selectionChange(e) {
      this.expentList = e.selections.map((item) => item.accountOperateId);
    },
    //获取归属数据
    getAffiliationData() {
      this.$api.expense.getList().then((res) => {
        if (res.code == 200) {
          res.data.map((item) => {
            item.profit = 0;
            return item;
          });
          this.affiliationData = JSON.parse(JSON.stringify(res.data));
          this.affiliationData2 = JSON.parse(JSON.stringify(res.data));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //导出公共方法
    expendDataup(e, idList) {
      this.$api.expense.deriveReport(this.expentList).then((response) => {
        if (response.code == 200) {
          if (response.data == null) {
            this.$message.error("暂无导出数据，请重试！");
            return;
          }
          let url = process.env.BASE_URL + response.data; // 3.创建一个临时的url指向blob对象
          let a = document.createElement("a");
          a.href = url;
          a.click();
          window.URL.revokeObjectURL(url);
          document.body.removeChild(a); //移除a标签
          this.findPage();
        } else {
          this.$message.error(response.msg);
        }
      });
    },


    //搜索列表功能
    queryStaffInfo() {
      this.pageRequest.pageNum = 1;
      this.pageRequest.pageSize = 20;
      this.findPage();
    },
    //查询列表
    findPage(data) {
      if (data && data.pageRequest) {
        this.pageRequest.pageNum = data.pageRequest.pageNum;
        this.pageRequest.pageSize = data.pageRequest.pageSize;
      }
      let obj = JSON.parse(
        JSON.stringify({ ...this.queryFrom, ...this.pageRequest })
      );
      if (obj.applyTime != null && obj.applyTime.length > 0) {
        obj.applyTimeStart = obj.applyTime[0];
        obj.applyTimeEnd = obj.applyTime[1];
      }
      delete obj.applyTime;
      this.$api.expense
        .getDisburse(obj)
        .then((res) => {
          if (res.code == 200) {
            this.pageResult = {
              content: res.data.records,
              pageNum: res.data.current,
              pageSize: res.data.size,
              totalPages: res.data.pages,
              totalSize: res.data.total,
            };
          }
          else {
            this.$message.error(res.msg)
          }

        })
        .then(data != null ? data.callback : "");
    },



    //数据字典
    business(typeName) {
      this.$api.dict.findByLableName(typeName).then((res) => {
        this[typeName + "Data"] = res.data;
        if (typeName == "payment_methods") {
          this.tableForm.payMethod = [
            this[typeName + "Data"].find((item) => item.value == 2).label,
          ];
        }
      });
    },

    //支付方式转换
    toPayment(list) {
      let newList = [];
      list.forEach((item) => {
        let newItem = this.payment_methodsData.find(
          (payItem) => payItem.label == item
        );
        if (newItem) {
          newList.push(newItem.value);
        }
      });
      newList.sort();
      newList = newList.join(",");
      return newList;
    },
  },
};
</script>
<style scoped>
.query-form {
  display: flex;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}


.expense-table>>>.el-textarea__inner,
.expense-table>>>.el-input__inner {
  border: none;
  padding: 0;
  text-align: center;
}

.expense-table>>>.el-form-item {
  margin: 0;
  padding: 0;
}


.el-icon-right {
  font-size: 20px;
}

.operation {
  margin-bottom: 15px;
}

.paymethod>>>.el-form-item__content {
  display: flex;
  align-items: center;
}

.el-icon-right {
  margin: 0 10px;
}

.table_btnbox {
  position: relative;
}

.dialog-body {
  overflow-y: auto;
  height: 500px;
}
</style>