418 lines
15 KiB
Vue
418 lines
15 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<el-card class="common-card query-box">
|
|
<div class="queryForm">
|
|
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
|
|
<el-form-item label="会计准则">
|
|
<el-select v-model="queryParams.standardId" @change="handleQuery" style="width: 200px">
|
|
<el-option
|
|
v-for="item in standardList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="类型：">
|
|
<el-radio-group v-model="queryParams.category" @change="getList">
|
|
<el-radio-button :value="0">全部</el-radio-button>
|
|
<el-radio-button :value="1">期末</el-radio-button>
|
|
<el-radio-button :value="2">计提</el-radio-button>
|
|
<el-radio-button :value="3">支付</el-radio-button>
|
|
<el-radio-button :value="4">常规</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</el-card>
|
|
<el-card class="common-card">
|
|
<el-table v-loading="loading" :data="vouchertemplateList" border
|
|
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
row-key="id" default-expand-all
|
|
height="650"
|
|
@cell-mouse-enter="cellMouseEnter"
|
|
@cell-mouse-leave="cellMouseLeave">
|
|
<el-table-column label="编码" align="left" header-align="center" prop="code" >
|
|
</el-table-column>
|
|
<el-table-column label="名称" align="left" header-align="center" prop="name" >
|
|
</el-table-column>
|
|
<el-table-column label="字头" align="center" prop="wordHead" />
|
|
<el-table-column label="备注" align="left" prop="remark" />
|
|
<el-table-column label="排序" align="left" prop="sortIndex" />
|
|
<el-table-column label="操作" align="center" header-align="center" width="120" prop="sortIndex">
|
|
<template #default="scope">
|
|
<el-tooltip content="新增">
|
|
<el-button type="primary" link @click="handleAdd(scope.row)" icon="Plus"></el-button>
|
|
</el-tooltip>
|
|
<el-tooltip content="编辑">
|
|
<el-button type="primary" link @click="handleEdit(scope.row)" icon="Edit"></el-button>
|
|
</el-tooltip>
|
|
<el-tooltip content="移除">
|
|
<el-button type="primary" link @click="handleDel(scope.row, 'asset')" icon="Delete"></el-button>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
<template #empty>
|
|
<div class="empty-text">暂无数据</div>
|
|
<el-button @click="handleAdd(null)">立即添加</el-button>
|
|
</template>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<el-dialog v-model="dialog.visible" :close-on-click-modal="false" width="800" style="margin-top: 30vh !important;">
|
|
<template #default>
|
|
<el-form :model="form" :items="items" ref="voucherTemplateRef" label-width="68px"
|
|
inline-message>
|
|
<el-form-item label="ID" prop="id" style="display:none">
|
|
<el-input style="width: 300px" v-model="form.id" placeholder="请输入id"/>
|
|
</el-form-item>
|
|
<el-form-item label="编码" prop="code" :required="true">
|
|
<el-input style="width: 300px" v-model="form.code" placeholder="请输入编码"/>
|
|
</el-form-item>
|
|
<el-form-item label="名称" prop="name" :required="true">
|
|
<el-input style="width: 300px" v-model="form.name" placeholder="请输入名称"/>
|
|
</el-form-item>
|
|
<el-form-item label="分类" prop="category" :required="true">
|
|
<el-select v-model="form.category" placeholder="选择" style="width: 300px">
|
|
<el-option label="期末" value="1"></el-option>
|
|
<el-option label="计提" value="2"></el-option>
|
|
<el-option label="支付" value="3"></el-option>
|
|
<el-option label="常规" value="4"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="字头" prop="wordHead" :required="true">
|
|
<el-select v-model="form.wordHead" placeholder="选择" style="width: 300px">
|
|
<el-option label="记" value="记"></el-option>
|
|
<el-option label="收" value="收"></el-option>
|
|
<el-option label="付" value="付"></el-option>
|
|
<el-option label="转" value="转"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remark" :required="true">
|
|
<el-input style="width: 300px" v-model="form.remark" placeholder="请输入备注"/>
|
|
</el-form-item>
|
|
<el-form-item label="排序" prop="sortIndex" :required="true">
|
|
<el-input style="width: 300px" v-model="form.sortIndex" placeholder="请输入排序"/>
|
|
</el-form-item>
|
|
<el-table v-loading="loading" :data="form.items" border size="small"
|
|
:cell-class-name="tableCellClassName"
|
|
@cell-click="cellMouseEnter"
|
|
:row-style="{height: '46px'}">
|
|
<el-table-column label="摘要" align="left" header-align="center" prop="summary">
|
|
<template #default="scope">
|
|
<span v-if="!scope.row.editing || scope.row.columnIndex !== 0">
|
|
{{ scope.row.summary }}
|
|
</span>
|
|
<el-input v-else v-model="scope.row.summary" placeholder="请输入备注" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="科目" align="left" header-align="center" prop="subjectCode">
|
|
<template #default="scope">
|
|
<span v-if="!scope.row.editing || scope.row.columnIndex !== 1">
|
|
{{ scope.row.subjectCode+" "+subjectKeyIdItem[scope.row.subjectCode]?.displayName }}
|
|
</span>
|
|
<el-cascader v-else style="width: 100%" filterable
|
|
v-model="scope.row.subjectCode"
|
|
:options="subjectList"
|
|
:props="cascaderSubjectPropsOwn"
|
|
@change="handleSubjectChange(scope, $event)"
|
|
:filter-method="cascaderSubjectPropsOwn.filterMethod"
|
|
@visible-change="handleSubjectVisibleChange"/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="借/贷" align="center" prop="direction" width="100">
|
|
<template #default="scope">
|
|
<span v-if="!scope.row.editing || scope.row.columnIndex !== 2">
|
|
{{ scope.row.direction == "1"?"借":"贷" }}
|
|
</span>
|
|
<el-select v-else v-model="scope.row.direction" placeholder="借/贷" @blur="closeEditAll">
|
|
<el-option label="借" value="1"></el-option>
|
|
<el-option label="贷" value="2"></el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="取数规则" align="center" prop="rule">
|
|
<template #default="scope">
|
|
<span v-if="!scope.row.editing || scope.row.columnIndex !== 3">
|
|
<dict-tag :options="account_income_balance_type" :value="scope.row.rule"></dict-tag>
|
|
</span>
|
|
<el-select v-else v-model="scope.row.rule" placeholder="选择" @blur="closeEditAll">
|
|
<el-option
|
|
v-for="dict in account_income_balance_type"
|
|
:key="dict.value"
|
|
:label="dict.label"
|
|
:value="dict.value"
|
|
/>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" width="110">
|
|
<template #default="scope">
|
|
<el-popconfirm title="确认删除吗？" @confirm="form.items.splice(scope.$index, 1)">
|
|
<template #reference>
|
|
<el-button size="small" icon="Delete"></el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-button icon="Plus" style="width: 100%" @click="form.items.push({direction:1})" ></el-button>
|
|
</el-form>
|
|
</template>
|
|
<template #footer>
|
|
<div style="flex: auto">
|
|
<el-button @click="dialog.visible = false">{{ t('org.cancel') }}</el-button>
|
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">{{ t('org.confirm') }}</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup name="ReportBalanceSheet" lang="ts">
|
|
import {getCurrentQuarter, parseTime} from '@/utils/Jinbooks'
|
|
import {getCurrentInstance, h, ref, shallowRef, reactive, toRefs} from 'vue'
|
|
import bookStore from "@/store/modules/bookStore";
|
|
import {ElForm, FormInstance} from "element-plus";
|
|
import {cascaderSubjectProps} from "@/utils/Subjects"
|
|
import * as voucherTemplateService from "@/api/system/voucher/voucher-template";
|
|
import {useI18n} from "vue-i18n";
|
|
import DictTag from "@/components/DictTag/index.vue";
|
|
import * as subjectApi from "@/api/system/standard/standard-subject";
|
|
import {listStandardsAll} from "@/api/system/standard/standard";
|
|
|
|
const {t} = useI18n()
|
|
const {proxy} = getCurrentInstance();
|
|
const {account_income_balance_type} = proxy?.useDict("account_income_balance_type");
|
|
const currBookStore = bookStore()
|
|
const cascaderSubjectPropsOwn = ref<any>({...cascaderSubjectProps})
|
|
cascaderSubjectPropsOwn.value.checkStrictly = true
|
|
// 会计科目数据
|
|
const subjectList = ref<any>([])
|
|
const vouchertemplateList = ref<any>([]);
|
|
const subjectKeyIdItem = ref<any>({})
|
|
const loading = ref(true);
|
|
const buttonLoading = ref(false);
|
|
const showSearch = ref(true);
|
|
const level = ref(1);
|
|
const visibleSubjectStatus = ref(false);
|
|
//会计准则
|
|
const standardList: any = ref<any>([]);
|
|
const dialog = reactive<any>({
|
|
visible: false,
|
|
title: ''
|
|
});
|
|
const voucherTemplateRef = ref<FormInstance>();
|
|
const initFormData: any = {
|
|
bookId: currBookStore.bookId,
|
|
parentCode: undefined,
|
|
sortIndex: 1,
|
|
itemName: "",
|
|
items: [{
|
|
subjectCode: undefined,
|
|
}]
|
|
}
|
|
const data = reactive({
|
|
form: {...initFormData},
|
|
queryParams: {
|
|
periodType: 'month',
|
|
standardId:'',
|
|
category:0,
|
|
date: parseTime(new Date(), "{y}-{m}"),
|
|
reportQuarter: getCurrentQuarter(),
|
|
reportDate: parseTime(new Date(), "{y}-{m}"),
|
|
},
|
|
items: {
|
|
itemCode: [
|
|
{required: true, message: '编码不能为空', trigger: 'blur'}
|
|
],
|
|
itemName: [
|
|
{required: true, message: '名称不能为空', trigger: 'blur'}
|
|
],
|
|
}
|
|
});
|
|
|
|
const {queryParams, form, items} = toRefs(data);
|
|
|
|
const customPrefix = shallowRef({
|
|
render() {
|
|
return h('p', '年')
|
|
},
|
|
})
|
|
|
|
const disabledDate = (time: any) => {
|
|
const now = new Date();
|
|
return time.getTime() > now.getTime(); // 禁用过去的日期
|
|
}
|
|
|
|
/** 查询列表 */
|
|
function getList() {
|
|
loading.value = true;
|
|
voucherTemplateService.list(queryParams.value.standardId,queryParams.value.category).then((response: any) => {
|
|
vouchertemplateList.value = response.data.records;
|
|
//total.value = response.data.total;
|
|
loading.value = false;
|
|
});
|
|
}
|
|
|
|
/** 搜索按钮操作 */
|
|
function handleQuery() {
|
|
getList();
|
|
}
|
|
|
|
function handleExport() {
|
|
|
|
}
|
|
|
|
function closeEditAll() {
|
|
form.value.items.forEach((item: any) => {
|
|
item.editing = false
|
|
})
|
|
}
|
|
|
|
const cellMouseEnter = (row: any, column: any, cell: HTMLTableCellElement, event: Event) => {
|
|
closeEditAll()
|
|
row.columnIndex = column.index
|
|
row.editing = true
|
|
|
|
event.stopPropagation()
|
|
}
|
|
|
|
const cellMouseLeave = (row: any, column: any, cell: HTMLTableCellElement, event: Event) => {
|
|
row.editing = false
|
|
}
|
|
|
|
// 更新会计科目ID关联
|
|
const updateSubjectKeys = (items: any) => {
|
|
for (let valueKey in items) {
|
|
const item = items[valueKey]
|
|
subjectKeyIdItem.value[item.code] = item
|
|
if (item.children && item.children.length > 0) {
|
|
updateSubjectKeys(item.children)
|
|
}
|
|
}
|
|
}
|
|
|
|
function getSubjectList() {
|
|
//传入当前账套ID
|
|
subjectApi.getTree({ standardId:queryParams.value.standardId}).then((res: any) => {
|
|
subjectList.value = res.data
|
|
updateSubjectKeys(subjectList.value)
|
|
})
|
|
}
|
|
|
|
const handleSubjectChange = (scope: any, value: any) => {
|
|
const subject = subjectKeyIdItem.value[scope.row.subjectCode]
|
|
scope.row.subjectId = subject.id
|
|
}
|
|
|
|
const handleSubjectVisibleChange = (show: any) => {
|
|
if (show) {
|
|
visibleSubjectStatus.value = true
|
|
setTimeout(() => {
|
|
visibleSubjectStatus.value = false
|
|
}, 500)
|
|
}
|
|
}
|
|
|
|
/** 表单重置 */
|
|
const reset = () => {
|
|
form.value = {...initFormData};
|
|
voucherTemplateRef.value?.resetFields();
|
|
};
|
|
|
|
function handleAdd(row?: any) {
|
|
reset();
|
|
form.value.relatedId = queryParams.value.standardId;
|
|
dialog.visible = true;
|
|
dialog.title = "添加";
|
|
}
|
|
|
|
function handleEdit(row: any) {
|
|
reset();
|
|
voucherTemplateService.get(queryParams.value.standardId,row.id).then((res: any) => {
|
|
form.value = res.data
|
|
if (!form.value.items || form.value.items.length === 0) {
|
|
form.value.items = [{}]
|
|
}
|
|
dialog.visible = true;
|
|
dialog.title = "修改";
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 删除
|
|
* @param row
|
|
* @param assetOrLiability
|
|
*/
|
|
function handleDel(row: any, assetOrLiability?: string) {
|
|
voucherTemplateService.del(row.id).then(() => {
|
|
proxy?.$modal.msgSuccess('删除成功');
|
|
getList();
|
|
})
|
|
}
|
|
|
|
/** 提交按钮 */
|
|
const submitForm = () => {
|
|
voucherTemplateRef.value?.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
form.value.items = form.value.items.filter((item: any) => {
|
|
console.log("subjectCode "+item.subjectCode+ " summary " + item.summary +" direction "+ item.direction);
|
|
return item.subjectCode && item.summary && item.direction
|
|
})
|
|
form.value.relatedId =form.value.relatedId||queryParams.value.standardId;
|
|
|
|
buttonLoading.value = true;
|
|
await voucherTemplateService.save(form.value).finally(() => buttonLoading.value = false);
|
|
proxy?.$modal.msgSuccess('操作成功');
|
|
dialog.visible = false;
|
|
await getList();
|
|
}
|
|
});
|
|
};
|
|
|
|
function tableCellClassName({row, column, rowIndex, columnIndex}: any) {
|
|
//注意这里是解构
|
|
//利用单元格的 className 的回调方法，给行列索引赋值
|
|
row.index = rowIndex;
|
|
column.index = columnIndex;
|
|
return ""
|
|
}
|
|
|
|
/*获取准则列表*/
|
|
function getStandardList() {
|
|
listStandardsAll({}).then((res: any) => {
|
|
if (res.code === 0) {
|
|
if (Array.isArray(res.data) && res.data.length > 0) {
|
|
standardList.value = res.data;
|
|
queryParams.value.standardId = standardList.value[0].id;
|
|
} else {
|
|
// 如果数据为空数组时，确保有默认处理逻辑
|
|
standardList.value = [];
|
|
queryParams.value.standardId = ''; // 或设置为适当的默认值
|
|
}
|
|
getSubjectList();
|
|
getList(); // 确保在赋值完成后调用
|
|
}
|
|
});
|
|
}
|
|
|
|
getStandardList();
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 0;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.btn-form {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.common-card {
|
|
margin-bottom: 15px;
|
|
}
|
|
</style>
|