<template>
|
<div class="app-container">
|
<el-form :model="filters" :inline="true">
|
<el-form-item label="资产编号:">
|
<el-input v-model="filters.assetCode" placeholder="请输入资产编号" clearable style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="资产名称:">
|
<el-input v-model="filters.assetName" placeholder="请输入资产名称" clearable style="width: 200px;" />
|
</el-form-item>
|
<el-form-item label="资产类别:">
|
<el-select v-model="filters.category" placeholder="请选择类别" clearable style="width: 150px;">
|
<el-option label="专利权" value="patent" />
|
<el-option label="商标权" value="trademark" />
|
<el-option label="著作权" value="copyright" />
|
<el-option label="软件" value="software" />
|
<el-option label="土地使用权" value="land" />
|
<el-option label="其他" value="other" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态:">
|
<el-select v-model="filters.status" placeholder="请选择状态" clearable style="width: 150px;">
|
<el-option label="在用" value="in_use" />
|
<el-option label="闲置" value="idle" />
|
<el-option label="已摊销完毕" value="amortized" />
|
</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>
|
<el-statistic title="资产原值合计" :value="totalOriginalValue" precision="2" prefix="¥" />
|
<el-statistic title="累计摊销合计" :value="totalAmortization" precision="2" prefix="¥" style="margin-left: 30px;" />
|
<el-statistic title="净值合计" :value="totalNetValue" precision="2" prefix="¥" style="margin-left: 30px;" />
|
</div>
|
<div>
|
<el-button type="primary" @click="add" icon="Plus">新增资产</el-button>
|
<el-button type="warning" @click="handleAmortization" icon="Money">摊销计提</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 #originalValue="{ row }">
|
<span class="text-primary">¥{{ formatMoney(row.originalValue) }}</span>
|
</template>
|
<template #accumulatedAmortization="{ row }">
|
<span class="text-warning">¥{{ formatMoney(row.accumulatedAmortization) }}</span>
|
</template>
|
<template #netValue="{ row }">
|
<span class="text-success">¥{{ formatMoney(row.netValue) }}</span>
|
</template>
|
<template #category="{ row }">
|
<el-tag>{{ getCategoryLabel(row.category) }}</el-tag>
|
</template>
|
<template #status="{ row }">
|
<el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
|
</template>
|
<template #operation="{ row }">
|
<el-button type="primary" link @click="view(row)">查看</el-button>
|
<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="800px" @confirm="submitForm" @cancel="dialogVisible = false">
|
<el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="资产编号" prop="assetCode">
|
<el-input v-model="form.assetCode" placeholder="系统自动生成" disabled />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="资产名称" prop="assetName">
|
<el-input v-model="form.assetName" placeholder="请输入资产名称" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="资产类别" prop="category">
|
<el-select v-model="form.category" placeholder="请选择资产类别" style="width: 100%;">
|
<el-option label="专利权" value="patent" />
|
<el-option label="商标权" value="trademark" />
|
<el-option label="著作权" value="copyright" />
|
<el-option label="软件" value="software" />
|
<el-option label="土地使用权" value="land" />
|
<el-option label="其他" value="other" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="证书编号" prop="certificateNo">
|
<el-input v-model="form.certificateNo" placeholder="请输入证书编号" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="取得日期" prop="acquisitionDate">
|
<el-date-picker v-model="form.acquisitionDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="资产原值" prop="originalValue">
|
<el-input-number v-model="form.originalValue" :min="0" :precision="2" style="width: 100%;" @change="calculateNetValue" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="摊销年限" prop="amortizationPeriod">
|
<el-input-number v-model="form.amortizationPeriod" :min="1" :max="50" style="width: 100%;" />
|
<span style="margin-left: 10px;">年</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="残值率" prop="residualRate">
|
<el-input-number v-model="form.residualRate" :min="0" :max="10" :precision="2" style="width: 100%;" />
|
<span style="margin-left: 10px;">%</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="累计摊销">
|
<el-input v-model="form.accumulatedAmortization" disabled />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="资产净值">
|
<el-input v-model="form.netValue" disabled />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="有效期至" prop="validityDate">
|
<el-date-picker v-model="form.validityDate" type="date" placeholder="选择日期" value-format="YYYY-MM-DD" style="width: 100%;" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="状态" prop="status">
|
<el-select v-model="form.status" placeholder="请选择状态" style="width: 100%;">
|
<el-option label="在用" value="in_use" />
|
<el-option label="闲置" value="idle" />
|
<el-option label="已摊销完毕" value="amortized" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="资产描述" prop="description">
|
<el-input v-model="form.description" type="textarea" :rows="3" placeholder="请输入资产描述" />
|
</el-form-item>
|
<el-form-item label="备注" prop="remark">
|
<el-input v-model="form.remark" type="textarea" :rows="2" 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, computed } from "vue";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
import FormDialog from "@/components/Dialog/FormDialog.vue";
|
|
defineOptions({
|
name: "无形资产",
|
});
|
|
const filters = reactive({
|
assetCode: "",
|
assetName: "",
|
category: "",
|
status: "",
|
});
|
|
const pagination = reactive({
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
});
|
|
const columns = [
|
{ label: "资产编号", prop: "assetCode", width: "130" },
|
{ label: "资产名称", prop: "assetName", width: "150" },
|
{ label: "资产类别", prop: "category", slot: "category" },
|
{ label: "证书编号", prop: "certificateNo", width: "150" },
|
{ label: "资产原值", prop: "originalValue", slot: "originalValue" },
|
{ label: "累计摊销", prop: "accumulatedAmortization", slot: "accumulatedAmortization" },
|
{ label: "资产净值", prop: "netValue", slot: "netValue" },
|
{ label: "状态", prop: "status", slot: "status" },
|
{ label: "操作", prop: "operation", slot: "operation", width: "180", 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({
|
assetCode: "",
|
assetName: "",
|
category: "",
|
certificateNo: "",
|
acquisitionDate: "",
|
originalValue: 0,
|
amortizationPeriod: 10,
|
residualRate: 0,
|
accumulatedAmortization: 0,
|
netValue: 0,
|
validityDate: "",
|
status: "in_use",
|
description: "",
|
remark: "",
|
});
|
|
const rules = {
|
assetName: [{ required: true, message: "请输入资产名称", trigger: "blur" }],
|
category: [{ required: true, message: "请选择资产类别", trigger: "change" }],
|
acquisitionDate: [{ required: true, message: "请选择取得日期", trigger: "change" }],
|
originalValue: [{ required: true, message: "请输入资产原值", trigger: "blur" }],
|
amortizationPeriod: [{ required: true, message: "请输入摊销年限", trigger: "blur" }],
|
};
|
|
const mockData = [
|
{ id: 1, assetCode: "WX2024001", assetName: "ERP软件许可", category: "software", certificateNo: "SW-2023-001", acquisitionDate: "2023-01-01", originalValue: 50000, amortizationPeriod: 10, residualRate: 0, accumulatedAmortization: 5000, netValue: 45000, validityDate: "2033-01-01", status: "in_use", description: "企业资源计划管理系统", remark: "" },
|
{ id: 2, assetCode: "WX2024002", assetName: "发明专利", category: "patent", certificateNo: "ZL202210123456.7", acquisitionDate: "2022-06-15", originalValue: 100000, amortizationPeriod: 20, residualRate: 0, accumulatedAmortization: 3750, netValue: 96250, validityDate: "2042-06-15", status: "in_use", description: "一种新型生产工艺", remark: "" },
|
{ id: 3, assetCode: "WX2024003", assetName: "商标权", category: "trademark", certificateNo: "TM-2023-008", acquisitionDate: "2023-03-10", originalValue: 20000, amortizationPeriod: 10, residualRate: 0, accumulatedAmortization: 1500, netValue: 18500, validityDate: "2033-03-10", status: "in_use", description: "公司品牌商标", remark: "" },
|
{ id: 4, assetCode: "WX2024004", assetName: "土地使用权", category: "land", certificateNo: "土国用(2023)第001号", acquisitionDate: "2023-07-01", originalValue: 500000, amortizationPeriod: 50, residualRate: 0, accumulatedAmortization: 5000, netValue: 495000, validityDate: "2073-07-01", status: "in_use", description: "工业用地使用权", remark: "" },
|
];
|
|
const totalOriginalValue = computed(() => {
|
return dataList.value.reduce((sum, item) => sum + Number(item.originalValue), 0);
|
});
|
|
const totalAmortization = computed(() => {
|
return dataList.value.reduce((sum, item) => sum + Number(item.accumulatedAmortization), 0);
|
});
|
|
const totalNetValue = computed(() => {
|
return dataList.value.reduce((sum, item) => sum + Number(item.netValue), 0);
|
});
|
|
const formatMoney = (value) => {
|
if (value === undefined || value === null) return "0.00";
|
return Number(value).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
};
|
|
const getCategoryLabel = (category) => {
|
const map = {
|
patent: "专利权",
|
trademark: "商标权",
|
copyright: "著作权",
|
software: "软件",
|
land: "土地使用权",
|
other: "其他",
|
};
|
return map[category] || category;
|
};
|
|
const getStatusLabel = (status) => {
|
const map = { in_use: "在用", idle: "闲置", amortized: "已摊销完毕" };
|
return map[status] || status;
|
};
|
|
const getStatusType = (status) => {
|
const map = { in_use: "success", idle: "warning", amortized: "info" };
|
return map[status] || "";
|
};
|
|
const calculateNetValue = () => {
|
form.netValue = Number((form.originalValue - form.accumulatedAmortization).toFixed(2));
|
};
|
|
const getTableData = () => {
|
let result = [...mockData];
|
if (filters.assetCode) {
|
result = result.filter(item => item.assetCode.includes(filters.assetCode));
|
}
|
if (filters.assetName) {
|
result = result.filter(item => item.assetName.includes(filters.assetName));
|
}
|
if (filters.category) {
|
result = result.filter(item => item.category === filters.category);
|
}
|
if (filters.status) {
|
result = result.filter(item => item.status === filters.status);
|
}
|
pagination.total = result.length;
|
dataList.value = result.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
|
};
|
|
const resetFilters = () => {
|
filters.assetCode = "";
|
filters.assetName = "";
|
filters.category = "";
|
filters.status = "";
|
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, {
|
assetCode: "WX" + Date.now().toString().slice(-8),
|
assetName: "",
|
category: "",
|
certificateNo: "",
|
acquisitionDate: new Date().toISOString().split('T')[0],
|
originalValue: 0,
|
amortizationPeriod: 10,
|
residualRate: 0,
|
accumulatedAmortization: 0,
|
netValue: 0,
|
validityDate: "",
|
status: "in_use",
|
description: "",
|
remark: "",
|
});
|
dialogVisible.value = true;
|
};
|
|
const edit = (row) => {
|
isEdit.value = true;
|
currentId.value = row.id;
|
dialogTitle.value = "编辑无形资产";
|
Object.assign(form, row);
|
dialogVisible.value = true;
|
};
|
|
const view = (row) => {
|
ElMessage.info(`查看资产: ${row.assetName}`);
|
};
|
|
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 handleAmortization = () => {
|
ElMessageBox.confirm("确认进行本月摊销计提吗？", "提示", {
|
confirmButtonText: "确认",
|
cancelButtonText: "取消",
|
type: "info",
|
}).then(() => {
|
mockData.forEach(item => {
|
if (item.status === "in_use") {
|
const monthlyAmortization = (item.originalValue * (1 - item.residualRate / 100)) / (item.amortizationPeriod * 12);
|
item.accumulatedAmortization = Number((item.accumulatedAmortization + monthlyAmortization).toFixed(2));
|
item.netValue = Number((item.originalValue - item.accumulatedAmortization).toFixed(2));
|
if (item.netValue <= 0) {
|
item.status = "amortized";
|
item.netValue = 0;
|
}
|
}
|
});
|
ElMessage.success("摊销计提完成");
|
getTableData();
|
});
|
};
|
|
const handleOut = () => {
|
ElMessage.success("导出成功");
|
};
|
|
const submitForm = () => {
|
formRef.value.validate((valid) => {
|
if (valid) {
|
calculateNetValue();
|
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();
|
}
|
});
|
};
|
|
onMounted(() => {
|
getTableData();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
.actions {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
|
> div:first-child {
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.text-primary {
|
color: #409eff;
|
font-weight: bold;
|
}
|
|
.text-warning {
|
color: #e6a23c;
|
font-weight: bold;
|
}
|
|
.text-success {
|
color: #67c23a;
|
font-weight: bold;
|
}
|
</style>
|
