<!-- 运营收益 -->
|
<template>
|
<basic-container>
|
<div class="gd-table-toolbar">
|
<el-button :icon="Plus" color="#4C34FF" type="primary" @click="handleAdd">新增</el-button>
|
<el-button :icon="Delete" color="#4C34FF" :disabled="!selectedIds.length" @click="handleDelete()">删除</el-button>
|
</div>
|
<div class="gd-table-container" v-loading="loading">
|
<div class="gd-table-content gd-table-content-bg">
|
<el-table class="gd-table" :data="tableList" @selection-change="handleSelectionChange">
|
<el-table-column type="selection" width="46" />
|
<el-table-column label="序号" type="index" width="60"></el-table-column>
|
<el-table-column prop="operatingIncome" label="营业收入(元)" align="center"></el-table-column>
|
<el-table-column prop="totalCost" label="综合总成本费用(元)" align="center"></el-table-column>
|
<el-table-column prop="netProfit" label="净利润(元)" align="center"></el-table-column>
|
<el-table-column prop="earnForecast" label="收益预测(元)" align="center"></el-table-column>
|
<el-table-column prop="financialIrr" label="财务内部收益率(%)" align="center"></el-table-column>
|
<el-table-column prop="marketSpace" label="市场空间" align="center" show-overflow-tooltip></el-table-column>
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
<el-table-column prop="nickName" label="创建人" align="center"></el-table-column>
|
<el-table-column label="操作" width="180" align="center" class-name="operation-btns">
|
<template #default="scope">
|
<!-- <el-button icon="el-icon-view" type="text" @click="handleDetail(scope.row)">查看</el-button> -->
|
<el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link>
|
<el-link type="primary" @click="handleDelete(scope.row)">删除</el-link>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div class="gd-pagination-parent">
|
<el-pagination popper-class="gd-select-popper" v-model:current-page="params.current"
|
v-model:page-size="params.size" layout="total, prev, pager, next, sizes" :total="total" @change="getList" />
|
</div>
|
</div>
|
<el-dialog class="gd-dialog" append-to-body v-model="isShowEditView" :title="titleTxt"
|
:close-on-click-modal="false" :destroy-on-close="true" @close="handleClose">
|
<el-form class="gd-dialog-form" ref="ruleFormRef" :model="editParams" :rules="rules" label-width="160px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="营业收入(元)" prop="operatingIncome">
|
<el-input class="gd-input" v-model="editParams.operatingIncome" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="综合总成本费用(元)" prop="totalCost">
|
<el-input class="gd-input" v-model="editParams.totalCost" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="净利润(元)" prop="netProfit">
|
<el-input class="gd-input" v-model="editParams.netProfit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="收益预测(元)" prop="earnForecast">
|
<el-input class="gd-input" v-model="editParams.earnForecast" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="财务内部收益率(%)" prop="financialIrr">
|
<el-input class="gd-input" v-model="editParams.financialIrr" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="市场空间" prop="marketSpace">
|
<el-input class="gd-input" v-model="editParams.marketSpace" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<!-- </div> -->
|
<template #footer>
|
<el-button color="#F2F3F5" @click="isShowEditView = false">取消</el-button>
|
<el-button class="" color="#4C34FF" :loading="submitting" :disabled="submitting" @click="submit(ruleFormRef)">
|
保存
|
</el-button>
|
</template>
|
</el-dialog>
|
</basic-container>
|
</template>
|
<script setup>
|
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
|
import { operatingIncomePage, operatingIncomeUpdate, operatingIncomeAdd, operatingIncomeBatchDelete } from './operatingIncomeApi'
|
|
import { fieldRules } from '@ztzf/utils'
|
|
let titleTxt = ref('新增')
|
const total = ref(0)
|
const params = ref({
|
current: 1,
|
size: 10,
|
})
|
const submitting = ref(false)
|
const loading = ref(true) // 列表加载中
|
const selectedIds = ref([]) // 勾选的ID列表
|
let tableList = ref([])
|
|
let isShowEditView = ref(false)
|
|
const ruleFormRef = ref()
|
let editParams = ref({
|
id: '',
|
operatingIncome: '',
|
totalCost: '',
|
netProfit: '',
|
earnForecast: '',
|
financialIrr: '',
|
marketSpace: '',
|
})
|
|
const rules = reactive({
|
operatingIncome: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
totalCost: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
netProfit: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
earnForecast: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
financialIrr: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
{
|
validator: (rule, value, callback) => {
|
if (!/^\d+(\.\d+)?$/.test(value)) {
|
callback(new Error('请输入有效的数字（整数或小数）'))
|
} else {
|
callback()
|
}
|
},
|
trigger: 'blur'
|
}
|
],
|
marketSpace: [
|
{ required: true, message: '请输入', trigger: 'blur' },
|
],
|
})
|
|
// 勾选值设置
|
function handleSelectionChange (rows) {
|
selectedIds.value = rows.map(item => item.id)
|
}
|
|
function getList () {
|
loading.value = true
|
operatingIncomePage(params.value).then(res => {
|
tableList.value = res.data.data.records || []
|
total.value = res.data.data.total || 0
|
}).finally(() => {
|
loading.value = false
|
})
|
}
|
function handleEdit (row) {
|
titleTxt.value = '编辑'
|
isShowEditView.value = true
|
editParams.value = { ...row }
|
}
|
|
// 删除
|
async function handleDelete (row) {
|
const tips = row ? '该条' : '选中的项'
|
await ElMessageBox.confirm(`确认删除${tips}吗？`, '提示', {
|
type: 'warning',
|
customClass: 'gd-confirm-custom',
|
confirmButtonClass: 'gd-confirm-button',
|
cancelButtonClass: 'gd-confirm-cancel-button',
|
})
|
const ids = row ? [row.id] : selectedIds.value
|
await operatingIncomeBatchDelete(ids)
|
ElMessage.success('删除成功')
|
selectedIds.value = []
|
getList()
|
}
|
|
function handleAdd () {
|
titleTxt.value = '新增'
|
isShowEditView.value = true
|
}
|
|
async function submit (formValidate) {
|
if (!formValidate) return
|
await formValidate.validate((valid, fields) => {
|
if (valid) {
|
submitting.value = true
|
try {
|
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()
|
})
|
}
|
} finally {
|
submitting.value = false
|
}
|
}
|
})
|
}
|
|
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>
|
