<template>
|
<div class="app-container">
|
<el-form :model="filters" :inline="true">
|
<el-form-item label="科目编码:">
|
<el-input v-model="filters.subjectCode" placeholder="请输入科目编码" clearable style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="科目名称:">
|
<el-input v-model="filters.subjectName" placeholder="请输入科目名称" clearable style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="科目类型:">
|
<el-select v-model="filters.subjectType" placeholder="请选择" clearable style="width: 200px;">
|
<el-option label="资产类" value="asset" />
|
<el-option label="负债类" value="liability" />
|
<el-option label="权益类" value="equity" />
|
<el-option label="成本类" value="cost" />
|
<el-option label="损益类" value="profit_loss" />
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getTableData">搜索</el-button>
|
<el-button @click="resetFilters">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div class="table_list">
|
<div class="actions">
|
<div></div>
|
<div>
|
<el-button type="primary" @click="add" icon="Plus">新增</el-button>
|
<el-button @click="handleOut" icon="Download">导出</el-button>
|
</div>
|
</div>
|
<PIMTable
|
rowKey="id"
|
:column="columns"
|
:tableData="dataList"
|
:page="{
|
current: pagination.currentPage,
|
size: pagination.pageSize,
|
total: pagination.total,
|
}"
|
@pagination="changePage"
|
>
|
<template #subjectType="{ row }">
|
<el-tag :type="getSubjectTypeType(row.subjectType)">{{ getSubjectTypeLabel(row.subjectType) }}</el-tag>
|
</template>
|
<template #balanceDirection="{ row }">
|
<el-tag :type="row.balanceDirection === 'debit' ? 'success' : 'danger'">
|
{{ row.balanceDirection === 'debit' ? '借方' : '贷方' }}
|
</el-tag>
|
</template>
|
<template #status="{ row }">
|
<el-tag :type="row.status === 'active' ? 'success' : 'info'">
|
{{ row.status === 'active' ? '启用' : '禁用' }}
|
</el-tag>
|
</template>
|
<template #operation="{ row }">
|
<el-button type="primary" link @click="edit(row)">编辑</el-button>
|
<el-button type="danger" link @click="handleDelete(row)">删除</el-button>
|
</template>
|
</PIMTable>
|
</div>
|
|
<FormDialog :title="dialogTitle" v-model="dialogVisible" width="600px" @confirm="submitForm" @cancel="dialogVisible = false">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
|
<el-form-item label="科目编码" prop="subjectCode">
|
<el-input v-model="form.subjectCode" placeholder="请输入科目编码" />
|
</el-form-item>
|
<el-form-item label="科目名称" prop="subjectName">
|
<el-input v-model="form.subjectName" placeholder="请输入科目名称" />
|
</el-form-item>
|
<el-form-item label="科目类型" prop="subjectType">
|
<el-select v-model="form.subjectType" placeholder="请选择科目类型" style="width: 100%;">
|
<el-option label="资产类" value="asset" />
|
<el-option label="负债类" value="liability" />
|
<el-option label="权益类" value="equity" />
|
<el-option label="成本类" value="cost" />
|
<el-option label="损益类" value="profit_loss" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="余额方向" prop="balanceDirection">
|
<el-radio-group v-model="form.balanceDirection">
|
<el-radio label="debit">借方</el-radio>
|
<el-radio label="credit">贷方</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="状态" prop="status">
|
<el-radio-group v-model="form.status">
|
<el-radio label="active">启用</el-radio>
|
<el-radio label="inactive">禁用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
</template>
|
</FormDialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, reactive, onMounted } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
|
defineOptions({
|
name: "总帐科目",
|
});
|
|
const filters = reactive({
|
subjectCode: "",
|
subjectName: "",
|
subjectType: "",
|
});
|
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
|
const columns = [
|
{ label: "科目编码", prop: "subjectCode", width: "120" },
|
{ label: "科目名称", prop: "subjectName", width: "150" },
|
{ label: "科目类型", prop: "subjectType", slot: "subjectType" },
|
{ label: "余额方向", prop: "balanceDirection", slot: "balanceDirection" },
|
{ label: "状态", prop: "status", slot: "status" },
|
{ label: "备注", prop: "remark", showOverflowTooltip: true },
|
{ label: "操作", prop: "operation", slot: "operation", width: "150", fixed: "right" },
|
];
|
|
const dataList = ref([]);
|
const dialogVisible = ref(false);
|
const dialogTitle = ref("");
|
const formRef = ref(null);
|
const isEdit = ref(false);
|
const currentId = ref(null);
|
|
const form = reactive({
|
subjectCode: "",
|
subjectName: "",
|
subjectType: "",
|
balanceDirection: "debit",
|
status: "active",
|
remark: "",
|
});
|
|
const rules = {
|
subjectCode: [{ required: true, message: "请输入科目编码", trigger: "blur" }],
|
subjectName: [{ required: true, message: "请输入科目名称", trigger: "blur" }],
|
subjectType: [{ required: true, message: "请选择科目类型", trigger: "change" }],
|
};
|
|
const mockData = [
|
{ id: 1, subjectCode: "1001", subjectName: "库存现金", subjectType: "asset", balanceDirection: "debit", status: "active", remark: "" },
|
{ id: 2, subjectCode: "1002", subjectName: "银行存款", subjectType: "asset", balanceDirection: "debit", status: "active", remark: "" },
|
{ id: 3, subjectCode: "1122", subjectName: "应收账款", subjectType: "asset", balanceDirection: "debit", status: "active", remark: "" },
|
{ id: 4, subjectCode: "2202", subjectName: "应付账款", subjectType: "liability", balanceDirection: "credit", status: "active", remark: "" },
|
{ id: 5, subjectCode: "4001", subjectName: "实收资本", subjectType: "equity", balanceDirection: "credit", status: "active", remark: "" },
|
{ id: 6, subjectCode: "5001", subjectName: "生产成本", subjectType: "cost", balanceDirection: "debit", status: "active", remark: "" },
|
{ id: 7, subjectCode: "6001", subjectName: "主营业务收入", subjectType: "profit_loss", balanceDirection: "credit", status: "active", remark: "" },
|
{ id: 8, subjectCode: "6401", subjectName: "主营业务成本", subjectType: "profit_loss", balanceDirection: "debit", status: "active", remark: "" },
|
];
|
|
const getSubjectTypeLabel = (type) => {
|
const map = {
|
asset: "资产类",
|
liability: "负债类",
|
equity: "权益类",
|
cost: "成本类",
|
profit_loss: "损益类",
|
};
|
return map[type] || type;
|
};
|
|
const getSubjectTypeType = (type) => {
|
const map = {
|
asset: "success",
|
liability: "danger",
|
equity: "warning",
|
cost: "info",
|
profit_loss: "primary",
|
};
|
return map[type] || "";
|
};
|
|
const getTableData = () => {
|
let result = [...mockData];
|
if (filters.subjectCode) {
|
result = result.filter(item => item.subjectCode.includes(filters.subjectCode));
|
}
|
if (filters.subjectName) {
|
result = result.filter(item => item.subjectName.includes(filters.subjectName));
|
}
|
if (filters.subjectType) {
|
result = result.filter(item => item.subjectType === filters.subjectType);
|
}
|
pagination.total = result.length;
|
dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
|
};
|
|
const resetFilters = () => {
|
filters.subjectCode = "";
|
filters.subjectName = "";
|
filters.subjectType = "";
|
pagination.currentPage = 1;
|
getTableData();
|
};
|
|
const changePage = ({ current, size }) => {
|
pagination.currentPage = current;
|
pagination.pageSize = size;
|
getTableData();
|
};
|
|
const add = () => {
|
isEdit.value = false;
|
dialogTitle.value = "新增科目";
|
Object.assign(form, {
|
subjectCode: "",
|
subjectName: "",
|
subjectType: "",
|
balanceDirection: "debit",
|
status: "active",
|
remark: "",
|
});
|
dialogVisible.value = true;
|
};
|
|
const edit = (row) => {
|
isEdit.value = true;
|
currentId.value = row.id;
|
dialogTitle.value = "编辑科目";
|
Object.assign(form, row);
|
dialogVisible.value = true;
|
};
|
|
const submitForm = () => {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
if (isEdit.value) {
|
const index = mockData.findIndex(item => item.id === currentId.value);
|
if (index !== -1) {
|
mockData[index] = { ...mockData[index], ...form };
|
}
|
ElMessage.success("编辑成功");
|
} else {
|
const newId = mockData.length > 0 ? Math.max(...mockData.map(item => item.id)) + 1 : 1;
|
mockData.push({ id: newId, ...form });
|
ElMessage.success("新增成功");
|
}
|
dialogVisible.value = false;
|
getTableData();
|
}
|
});
|
};
|
|
const handleDelete = (row) => {
|
ElMessageBox.confirm("确认删除该科目吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
const index = mockData.findIndex(item => item.id === row.id);
|
if (index !== -1) {
|
mockData.splice(index, 1);
|
}
|
ElMessage.success("删除成功");
|
getTableData();
|
});
|
};
|
|
const handleOut = () => {
|
ElMessage.success("导出成功");
|
};
|
|
onMounted(() => {
|
getTableData();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.actions {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
}
|
</style>
|
