<!-- 运营收益 -->
|
<template>
|
<div class="operatingIncome">
|
<div class="search-box">
|
<!-- <el-form :model="params" inline>
|
<el-form-item label="空域名称:">
|
<el-input v-model="params.algName" placeholder="请输入空域名称" clearable />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="getList">搜索</el-button>
|
<el-button @click="cancelSearch">取消</el-button>
|
</el-form-item>
|
</el-form> -->
|
<div>
|
<el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
|
</div>
|
</div>
|
<div class="mange-table">
|
<el-table border :data="tableList" class="custom-header">
|
<el-table-column label="序号" type="index" width="60"></el-table-column>
|
<el-table-column prop="operating_income" label="营业收入" align="center"></el-table-column>
|
<el-table-column prop="total_cost" label="综合总成本费用" align="center"></el-table-column>
|
<el-table-column prop="net_profit" label="净利润" align="center"></el-table-column>
|
<el-table-column prop="financial_irr" label="财务内部收益率" align="center"></el-table-column>
|
<el-table-column prop="market_space" label="市场空间" align="center" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
|
<el-table-column prop="nick_name" label="创建人" align="center"></el-table-column>
|
<el-table-column label="操作" width="180" align="center">
|
<template #default="scope">
|
<!-- <el-button icon="el-icon-view" type="text" @click="handleDetail(scope.row)">查看</el-button> -->
|
<el-button icon="el-icon-edit" type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button icon="el-icon-edit" type="text" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="pagination">
|
<el-pagination class="ztzf-pagination" popper-class="custom-pagination-dropdown" background
|
:page-sizes="[10, 20, 30, 40, 50, 100]" :size="size" v-model:current-page="params.current"
|
v-model:page-size="params.size" layout="total, sizes, prev, pager, next, jumper" :total="total"
|
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
</div>
|
</div>
|
<el-dialog class="ztzf-dialog" append-to-body v-model="isShowEditView" :title="txtTitle"
|
:width="pxToRem(800)" :close-on-click-modal="false" :destroy-on-close="true" @close="handleClose">
|
<div class="content-edit">
|
<el-form ref="ruleFormRef" :model="editParams" :rules="rules" inline>
|
<el-form-item label="营业收入" prop="operating_income">
|
<el-input v-model="editParams.operating_income" />
|
</el-form-item>
|
<el-form-item label="综合总成本费用" prop="total_cost">
|
<el-input v-model="editParams.total_cost" />
|
</el-form-item>
|
<el-form-item label="净利润" prop="net_profit">
|
<el-input v-model="editParams.net_profit" />
|
</el-form-item>
|
<el-form-item label="财务内部收益率" prop="financial_irr">
|
<el-input v-model="editParams.financial_irr" />
|
</el-form-item>
|
<el-form-item label="市场空间" prop="market_space" style="width: 716px;">
|
<el-input v-model="editParams.market_space" />
|
</el-form-item>
|
<div class="btns">
|
<el-button v-if="titleTxt === '新增'" type="primary" @click="submit(ruleFormRef)"><el-icon><CirclePlus /></el-icon>确认</el-button>
|
<el-button v-else type="primary" @click="submit(ruleFormRef)"><el-icon><CircleCheck /></el-icon>修改</el-button>
|
<el-button @click="isShowEditView = false"><el-icon><CircleClose /></el-icon>取消</el-button>
|
</div>
|
</el-form>
|
</div>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
|
import { operatingIncomePage, operatingIncomeUpdate, operatingIncomeAdd, operatingIncomeDelete } from '@/api/airspace/airspace';
|
|
let titleTxt = ref('新增')
|
const total = ref(0)
|
const params = ref({
|
current: 1,
|
size: 10,
|
});
|
|
let tableList = ref([])
|
|
let isShowEditView = ref(false)
|
|
const ruleFormRef = ref()
|
let editParams = ref({
|
id: '',
|
operating_income: '',
|
total_cost: '',
|
net_profit: '',
|
financial_irr: '',
|
market_space: '',
|
})
|
const rules = reactive({
|
operating_income: [
|
{ required: true, message: '请输入营业收入', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'));
|
} else {
|
callback();
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
total_cost: [
|
{ required: true, message: '请输入综合总成本费用', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'));
|
} else {
|
callback();
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
net_profit: [
|
{ required: true, message: '请输入净利润', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'));
|
} else {
|
callback();
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
financial_irr: [
|
{ required: true, message: '请输入财务内部收益率', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'));
|
} else {
|
callback();
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
market_space: [
|
{ required: true, message: '请输入市场空间', trigger: 'blur' },
|
],
|
})
|
|
function getList() {
|
operatingIncomePage(params.value).then(res => {
|
tableList.value = res.data.data.records || []
|
total.value = res.data.data.total || 0
|
})
|
}
|
function handleEdit(row) {
|
titleTxt.value = '编辑'
|
isShowEditView.value = true
|
editParams.value = { ...row }
|
}
|
function handleDelete (row) {
|
ElMessageBox.confirm('确定删除吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
})
|
.then(() => {
|
operatingIncomeDelete(row.id).then(res => {
|
ElMessage.success('删除成功')
|
getList()
|
}).catch(error => {
|
ElMessage.error('删除失败');
|
});
|
})
|
.catch(() => {
|
ElMessage({
|
type: 'info',
|
message: '已取消删除',
|
})
|
});
|
}
|
|
function handleAdd(row) {
|
titleTxt.value = '新增'
|
isShowEditView.value = true
|
}
|
|
function handleSizeChange(val) {
|
params.value.size = val
|
getList()
|
}
|
|
function handleCurrentChange(val) {
|
params.value.current = val
|
getList()
|
}
|
|
async function submit(formValidate) {
|
if (!formValidate) return
|
await formValidate.validate((valid, fields) => {
|
if (valid) {
|
if (titleTxt.value === '新增') {
|
operatingIncomeAdd(editParams.value).then(res => {
|
isShowEditView.value = false
|
ElMessage.success('新增成功')
|
getList()
|
})
|
} else {
|
operatingIncomeUpdate(editParams.value).then(res => {
|
isShowEditView.value = false
|
ElMessage.success('操作成功')
|
getList()
|
})
|
}
|
|
}
|
})
|
}
|
|
function handleClose() {
|
// 清除表单内容
|
editParams.value = {
|
id: '',
|
operating_income: '',
|
total_cost: '',
|
net_profit: '',
|
financial_irr: '',
|
market_space: '',
|
}
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.operatingIncome {
|
height: 0;
|
flex: 1;
|
margin: 0 10px 10px 10px;
|
background-color: #ffffff;
|
padding: 10px 20px;
|
border-radius: 5px;
|
display: flex;
|
flex-direction: column;
|
.search-box {
|
margin-top: 20px;
|
height: 40px;
|
}
|
|
:deep(.el-input) {
|
.el-input__wrapper {
|
width: 200px;
|
}
|
}
|
|
// 表格
|
.mange-table {
|
height: 0;
|
flex: 1;
|
margin-top: 18px;
|
overflow: auto;
|
}
|
:deep(.el-pagination) {
|
display: flex;
|
justify-content: right;
|
}
|
|
:deep(.el-pagination button) {
|
background: center center no-repeat none !important;
|
color: #8eb8ea !important;
|
}
|
:deep(.ztzf-select){
|
.el-select__selection {
|
width: 200px;
|
}
|
}
|
}
|
|
.content {
|
padding: 20px;
|
|
.view-table {
|
width: 100%;
|
border-collapse: collapse;
|
border: 1px solid #EBEEF5;
|
|
tr {
|
&:not(:last-child) {
|
border-bottom: 1px solid #EBEEF5;
|
}
|
|
td {
|
padding: 12px 10px;
|
|
&.label {
|
width: 140px;
|
text-align: right;
|
// color: #909399;
|
// background-color: #F5F7FA;
|
border-right: 1px solid #EBEEF5;
|
}
|
|
&.value {
|
width: 180px;
|
// color: #303133;
|
}
|
}
|
}
|
}
|
}
|
.content-edit {
|
.el-form {
|
.el-form-item {
|
width: 320px;
|
:deep(.el-form-item__label) {
|
width: 140px;
|
}
|
}
|
// .el-form-item:last-child {
|
// width: 640px;
|
// }
|
.btns {
|
display: flex;
|
justify-content: center
|
}
|
}
|
}
|
</style>
|
