整合前端

This commit is contained in:
砂糖
2026-04-13 17:04:38 +08:00
parent 69609a2cb1
commit 5d4794c9bd
915 changed files with 144259 additions and 0 deletions

View File

@@ -0,0 +1,118 @@
<template>
<div>
<div style="display: flex; gap: 20px;">
<el-select v-model="queryParams.signingCompany" placeholder="请选择签约公司" @change="getList">
<el-option :value="undefined" label="全部" :key="all" />
<el-option v-for="dict in dict.type.signing_company" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
<el-option value="100" label="王瑞春账户" :key="100" />
</el-select>
<el-button type="primary" @click="handleClick">新增</el-button>
<el-button type="primary" @click="getList">刷新</el-button>
</div>
<el-table v-loading="loading" :data="list">
<el-table-column label="出账名称" align="left" prop="financeTitle" />
<el-table-column label="经手人" align="center" prop="financeParties" />
<el-table-column label="签约公司" align="center" prop="signingCompany">
<template slot-scope="scope">
<span v-if="scope.row.signingCompany == '100'"">王瑞春账户</span>
<dict-tag v-else :options="dict.type.signing_company" :value="scope.row.signingCompany" />
</template>
</el-table-column>
<el-table-column label="总金额" align="center">
<template slot-scope="scope">
{{'¥' + scope.row.detailList.reduce((acc, curr) => acc + Number(curr.price), 0)}}
</template>
</el-table-column>
<el-table-column label="支付类型" align="center" prop="payType" width="80">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_pay_type" :value="scope.row.payType" />
</template>
</el-table-column>
<el-table-column label="交易日期" align="center" prop="financeTime" width="120">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.financeTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="创建者" align="center" prop="createBy" width="80" />
<el-table-column label="开票状态" align="center" prop="makeTime" width="80">
<template slot-scope="scope">
<span v-if="scope.row.makeTime == null || (scope.row.makePrice == null || scope.row.makePrice == '')"
style="color: #cccccc">未开票</span>
<span v-else style="color: #1ab394">已开票</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="120">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark">
<template slot-scope="scope">
<span>{{ scope.row.remark == null || scope.row.remark == '' ? "暂无" : scope.row.remark }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)">查看
</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="financeUpdate(scope.row)">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
</div>
</template>
<script>
import { listFinance } from "@/api/oa/finance";
export default {
dicts: ['sys_pay_type', 'signing_company'],
data () {
return {
list: [],
loading: false,
total: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: 0,
financeType: 0,
signingCompany: undefined, // 默认选中全部
}
}
},
methods: {
getList () {
this.loading = true;
listFinance(this.queryParams).then(res => {
this.list = res.rows;
this.total = res.total;
this.loading = false;
})
},
handleLook (row) {
this.$emit('look', row);
},
financeUpdate (row) {
this.$emit('update', row);
},
handleDelete (row) {
this.$emit('delete', row);
},
handleClick () {
this.$emit('add', { signingCompany: this.queryParams.signingCompany });
}
},
created () {
this.getList();
}
}
</script>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,524 @@
<template>
<div class="app-container">
<div style="display: flex; gap: 20px;">
<el-select v-model="queryParams.signingCompany" placeholder="请选择签约公司" @change="getList">
<el-option :value="undefined" label="全部" key="all" />
<el-option v-for="dict in dict.type.signing_company" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
<el-option value="100" label="王瑞春账户" :key="100" />
</el-select>
<el-button type="primary" @click="handleClick">新增</el-button>
<el-button type="primary" @click="getList">刷新</el-button>
</div>
<el-table v-loading="loading" :data="list">
<el-table-column label="出账名称" align="left" prop="financeTitle" />
<el-table-column label="经手人" align="center" prop="financeParties" />
<el-table-column label="签约公司" align="center" prop="signingCompany">
<template slot-scope="scope">
<span v-if="scope.row.signingCompany == '100'"">王瑞春账户</span>
<dict-tag v-else :options="dict.type.signing_company" :value="scope.row.signingCompany" />
</template>
</el-table-column>
<el-table-column label="支出类型" align="center" prop="outType">
<template slot-scope="scope">
<dict-tag :options="dict.type.oa_out_finance" :value="scope.row.outType" />
</template>
</el-table-column>
<el-table-column label="总金额" align="center">
<template slot-scope="scope">
{{'¥' + scope.row.detailList.reduce((acc, curr) => acc + Number(curr.price), 0)}}
</template>
</el-table-column>
<el-table-column label="支付类型" align="center" prop="payType" width="80">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_pay_type" :value="scope.row.payType" />
</template>
</el-table-column>
<el-table-column label="交易日期" align="center" prop="financeTime" width="120">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.financeTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="创建者" align="center" prop="createBy" width="80" />
<el-table-column label="开票状态" align="center" prop="makeTime" width="80">
<template slot-scope="scope">
<span v-if="scope.row.makeTime == null || (scope.row.makePrice == null || scope.row.makePrice == '')"
style="color: #cccccc">未开票</span>
<span v-else style="color: #1ab394">已开票</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="120">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark">
<template slot-scope="scope">
<span>{{ scope.row.remark == null || scope.row.remark == '' ? "暂无" : scope.row.remark }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-view" @click="handleLook(scope.row)">查看
</el-button>
<el-button size="mini" type="text" icon="el-icon-edit" @click="financeUpdate(scope.row)">修改
</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="getList" />
<!-- 出入账提交信息弹出层 -->
<el-dialog :title="title" :visible.sync="open" width="76%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" v-loading="formLoading" label-width="120px">
<el-row>
<el-col :span="16">
<el-form-item :label="financeType == 1 ? '入账名称' : '出账名称'" prop="financeTitle">
<el-input v-model="form.financeTitle" placeholder="请输入账务名称" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="交易时间" prop="financeTime">
<el-date-picker clearable v-model="form.financeTime" type="date" value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择交易时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item :label="financeType == 1 ? '付款方' : '经手人'" prop="financeParties">
<el-input v-model="form.financeParties" placeholder="请输入经手人/付款方" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="支付类型" prop="payType">
<el-select v-model="form.payType" placeholder="请选择支付类型">
<el-option v-for="dict in dict.type.sys_pay_type" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="签约公司" prop="signingCompany">
<el-select v-model="form.signingCompany" placeholder="请选择签约公司">
<el-option v-for="dict in dict.type.signing_company" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
<el-option value="100" label="王瑞春账户" :key="100" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="支出用途" prop="costCategory">
<el-select v-model="form.outType" placeholder="请选择支出用途">
<el-option v-for="dict in dict.type.oa_out_finance" :key="dict.value" :label="dict.label"
:value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开票比例" prop="makeRatio">
<el-input v-model="form.makeRatio" placeholder="请输入开票比例" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开票金额" prop="makePrice">
<el-input v-model="form.makePrice" placeholder="请输入开票金额" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开票时间" prop="makeTime">
<el-input v-model="form.makeTime" placeholder="请输入开票金额" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开票情况说明" prop="makeExplain">
<el-input v-model="form.makeExplain" placeholder="请输入开票情况说明" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="附件" prop="accessory">
<file-upload v-model="form.accessory" />
</el-form-item>
</el-col>
</el-row>
<el-divider content-position="center">明细</el-divider>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" icon="el-icon-plus" size="mini" plain @click="handleAddDetailList">添加明细
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" icon="el-icon-delete" size="mini" plain @click="handleDeleteDetailList">删除
</el-button>
</el-col>
</el-row>
<el-table :data="detailList" :row-class-name="rowDetailListIndex"
@selection-change="handleDetailListSelectionChange" ref="detailList">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" prop="index" width="50" />
<el-table-column label="明细名称" prop="detailTitle">
<template slot-scope="scope">
<el-input v-model="scope.row.detailTitle" placeholder="请输入名称" />
</template>
</el-table-column>
<el-table-column label="金额(单位:元)" prop="price">
<template slot-scope="scope">
<el-input v-model="scope.row.price" placeholder="请输入金额" οnkeyup="value=value.replace(/[^\d]/g,'')"
@input="updateBigPrice(scope.$index, scope.row)" />
</template>
</el-table-column>
<el-table-column label="大写金额(零壹贰叁肆伍陆柒捌玖万仟佰拾亿元角分)" prop="bigPrice">
<template slot-scope="scope">
<el-input v-model="scope.row.bigPrice" placeholder="请输入大写金额" />
</template>
</el-table-column>
</el-table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<!--查看账目明细-->
<el-dialog :title="title" :visible.sync="openLook" width="60%" append-to-body>
<el-descriptions :column="3" border>
<el-descriptions-item :label="type == 1 ? '入账名称' : '出账名称'" :span="3" :labelStyle="lableBg">
{{ form.financeTitle }}
</el-descriptions-item>
<el-descriptions-item label="交易时间" :span="1" :labelStyle="lableBg">
{{ parseTime(form.financeTime, '{y}-{m}-{d}') }}
</el-descriptions-item>
<el-descriptions-item :label="type == 1 ? '付款方' : '经手人'" :span="1" :labelStyle="lableBg">
{{ form.financeParties }}
</el-descriptions-item>
<el-descriptions-item label="支付类型" :span="1" :labelStyle="lableBg">
<dict-tag :options="dict.type.sys_pay_type" :value="form.payType" />
</el-descriptions-item>
<el-descriptions-item label="开票状态" :span="2" :labelStyle="lableBg">
<span v-if="form.makeTime == null || form.makePrice == null" style="color: #cccccc">未开票</span>
<span v-else style="color: #1ab394">
已开票, 开票金额¥ {{ form.makePrice }},
开票比例{{ form.makeRatio == null ? '未填' : form.makeRatio }},
开票时间{{ form.makeTime }},
开票情况说明{{ form.makeExplain == null ? '未填' : form.makeExplain }}</span>
</el-descriptions-item>
<el-descriptions-item label="创建者" :span="1" :labelStyle="lableBg">
{{ form.createBy }}
</el-descriptions-item>
<el-descriptions-item label="附件" :span="3" :labelStyle="lableBg">
<!--附件-->
<template>
<file-preview v-model="form.accessory" />
</template>
<!--附件-->
</el-descriptions-item>
</el-descriptions>
<el-table :data="detailList" style="margin-top: 30px;">
<el-table-column label="明细名称" prop="detailTitle">
<template slot-scope="scope">
<div>{{ scope.row.detailTitle }}</div>
</template>
</el-table-column>
<el-table-column label="金额(单位:元)" prop="price">
<template slot-scope="scope">
<div>¥{{ scope.row.price }}</div>
</template>
</el-table-column>
<el-table-column label="大写金额" prop="bigPrice">
<template slot-scope="scope">
<div>{{ scope.row.bigPrice }}</div>
</template>
</el-table-column>
<!-- <el-table-column label="备注" prop="remark" >
<template slot-scope="scope">
<div>{{scope.row.remark}}</div>
</template>
</el-table-column>-->
</el-table>
<h2 class="cl3">{{ type == 1 ? '入账合计' : '出账合计' }}¥{{ priceSum }}</h2>
</el-dialog>
</div>
</template>
<script>
import { addFinance, getFinance, listFinance, updateFinance } from "@/api/oa/finance";
import FilePreview from "@/components/FilePreview";
import { numberToCNY } from "@/utils/currencyFormatter";
export default {
dicts: ['sys_project_type', 'sys_project_status', 'sys_pay_type', 'signing_company', 'oa_out_finance'],
components: {
FilePreview,
},
data () {
return {
list: [],
loading: false,
total: 0,
lableBg: "background: #f0f9eb; width:150px; text-align: center;",
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: 0,
financeType: 0,
signingCompany: undefined, // 默认选中全部
},
priceSum: 0,
buttonLoading: false,
//入账弹出层标题
title: '',
//出入账弹出层
open: false,
type: '',
//表单
form: {},
detailList: [],
formLoading: false,
financeType: '0', // 0 出账 1 入账
// 表单校验
rules: {
financeTitle: [
{ required: true, message: "账务名称不能为空", trigger: "blur" }
],
financeParties: [
{ required: true, message: "经手人/付款方不能为空", trigger: "blur" }
],
financeType: [
{ required: true, message: "进出账类型不能为空", trigger: "blur" }
]
},
openLook: false,
}
},
methods: {
getList () {
this.loading = true;
listFinance(this.queryParams).then(res => {
this.list = res.rows;
this.total = res.total;
this.loading = false;
})
},
/** 出入账明细序号 */
rowDetailListIndex ({ row, rowIndex }) {
row.index = rowIndex + 1;
},
isDecimal (n, len) {
return new RegExp("^\\d+(\\.\\d{1," + len + "})?$").test(n);
},
/** 复选框选中数据 */
handleDetailListSelectionChange (selection) {
this.checkedDetailList = selection.map(item => item.index)
},
updateBigPrice (index, row) {
if (row.price !== '') {
row.bigPrice = numberToCNY(parseFloat(row.price) || 0);
} else {
row.bigPrice = ''; // 如果价格为空,则大写金额也清空
}
},
/**查看按钮操作**/
handleLook (row) {
this.type = row.financeType
this.loading = true;
this.title = "查看账目";
this.reset();
const financeId = row.financeId || this.ids
getFinance(financeId).then(response => {
this.loading = false;
this.form = response.data;
this.detailList = response.data.detailList;
//核算求和
this.detailPriceSum(response.data.detailList);
this.openLook = true;
});
},
/**
* 求和
* obj是列表数据
* */
detailPriceSum (obj) {
if (obj.length > 0) {
let sum = []
obj.forEach((vo, key) => {
sum.push(parseFloat(vo.price))
})
this.priceSum = sum.reduce((accumulator, currentValue) => accumulator + currentValue);
}
},
financeUpdate (row) {
/** 入账按钮操作 */
this.reset();
this.open = true;
this.title = "提交出账信息";
this.isRubbish = false;
this.financeType = '0';
this.form = row;
this.detailList = row.detailList;
if (this.detailList.length == 0) {
this.handleAddDetailList()
}
},
/** 出入账明细添加按钮操作 */
handleAddDetailList () {
let obj = {};
obj.detailTitle = "";
obj.price = "";
obj.remark = "";
if (!this.detailList) {
this.detailList = [];
}
console.log(this.detailList)
this.detailList.push(obj);
},
/** 出入账明细删除按钮操作 */
handleDeleteDetailList () {
if (this.checkedDetailList.length == 0) {
this.$modal.msgError("请先选择要删除的出入账明细数据");
} else {
const detailList = this.detailList;
const checkedDetailList = this.checkedDetailList;
this.detailList = detailList.filter(function (item) {
return checkedDetailList.indexOf(item.index) == -1
});
}
},
/** 删除按钮操作 */
handleDelete (row) {
const financeId = row.financeId;
this.$modal.confirm('是否确认删除编号为"' + financeId + '"的数据项?').then(() => {
this.loading = true;
return delFinance(financeId);
}).then(() => {
this.getList()
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
handleClick () {
this.handleAddRubbish({ signingCompany: this.queryParams.signingCompany })
},
handleAddRubbish ({ signingCompany }) {
this.open = true;
this.title = "提交出账信息";
this.financeType = '0';
this.form = {
signingCompany,
financeType: '0',
financeId: undefined,
financeTitle: undefined,
financeParties: undefined,
payType: undefined,
financeTime: undefined,
makeTime: undefined,
makeRatio: undefined,
makePrice: undefined,
makeExplain: undefined,
accessory: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
fileList: [],
};
this.detailList = [];
this.handleAddDetailList()
},
/** 提交按钮 */
submitForm () {
this.$refs["form"].validate(async valid => {
if (valid) {
try {
this.buttonLoading = true;
let arr = this.detailList;
let boolValue = []
arr.forEach((vo, i) => {
let ii = i + 1
if (vo.detailTitle == null || vo.detailTitle == undefined || vo.detailTitle == "") {
this.$modal.msgWarning("第" + ii + "条明细名称不能为空!");
} else if (vo.price == null || vo.price == undefined || vo.price == "") {
this.$modal.msgWarning("第" + ii + "条明细金额不能为空,且必须是两位小数点数字!");
} else if (vo.bigPrice == null || vo.bigPrice == undefined || vo.bigPrice == "") {
this.$modal.msgWarning("第" + ii + "条明细大写金额不能为空!");
} else {
boolValue.push(1)
}
})
if (arr.length == boolValue.length) {
this.form.detailList = arr;
if (this.form.financeId != null) {
const response = await updateFinance(this.form);
this.$modal.msgSuccess(response.msg);
this.open = false;
} else {
this.form.financeType = this.financeType;
await addFinance(this.form);
this.$modal.msgSuccess("新增成功");
this.open = false;
}
this.getList();
}
} finally {
this.buttonLoading = false;
}
} else {
console.log("验证失败")
}
})
},
// 取消按钮
cancel () {
this.open = false;
this.reset();
},
// 表单重置
reset () {
this.form = {
financeId: undefined,
projectId: undefined,
financeTitle: undefined,
financeParties: undefined,
payType: undefined,
financeType: undefined,
financeTime: undefined,
makeTime: undefined,
makeRatio: undefined,
makePrice: undefined,
makeExplain: undefined,
accessory: undefined,
remark: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
fileList: [],
signingCompany: undefined
};
this.detailList = []
this.resetForm("form");
},
},
created () {
this.getList();
}
}
</script>