|
|
@@ -0,0 +1,414 @@
|
|
|
+<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="applyTime">
|
|
|
+ <el-date-picker v-model="queryFrom.applyTime" type="daterange" range-separator="至"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收款账户" prop="collectionMessage">
|
|
|
+ <el-select
|
|
|
+ v-model="queryFrom.collectionMessage"
|
|
|
+ filterable
|
|
|
+ placeholder="收款账户"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in collectionData"
|
|
|
+ :key="item.accountId + 'aa' + index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.bankCardNum"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="费用类型" prop="fundUse">
|
|
|
+ <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>
|
|
|
+ <kt-button label="查询" type="primary"
|
|
|
+ @click="queryStaffInfo" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+ <kt-button label="批量导出" type="primary" :disabled="!this.expentList.length"
|
|
|
+ @click="expendDataup" />
|
|
|
+ <!-- 表格 -->
|
|
|
+ <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 {
|
|
|
+ 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: "applyTime",
|
|
|
+ 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: {
|
|
|
+ //获取资金用途树数据
|
|
|
+ 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 = [];
|
|
|
+ res.data.forEach((item, index) => {
|
|
|
+ if (item.invAccountCardList != null) {
|
|
|
+ item.invAccountCardList.forEach((it) => {
|
|
|
+ it.name =
|
|
|
+ (item.outerFlag == 0 ? "内部用户" : "外部用户") +
|
|
|
+ " " +
|
|
|
+ (it.accountQuality == 0 ? "公户" : "私户") +
|
|
|
+ " " +
|
|
|
+ item.accountName +
|
|
|
+ " " +
|
|
|
+ it.bankCardNum +
|
|
|
+ " " +
|
|
|
+ it.bank;
|
|
|
+ it.nameValue = it.name;
|
|
|
+ // it.nameValue =
|
|
|
+ // item.accountName + " " + it.bankCardNum + " " + it.bank;
|
|
|
+ });
|
|
|
+ arr.push(...item.invAccountCardList);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.collectionData = arr;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //表格多选事件
|
|
|
+ selectionChange(e) {
|
|
|
+ this.expentList = e.selections.map((item) => item.excelAccountOperateId);
|
|
|
+ },
|
|
|
+ //获取归属数据
|
|
|
+ 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) {
|
|
|
+ idList = idList || this.expentList;
|
|
|
+ this.$api.expense.deriveReport(idList).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>
|
|
|
+
|
lihongxiao