吉安感知网项目-前端
罗广辉
2026-01-22 700add48bb9313467870f19fc0d80fce2d09c1f6
applications/task-work-order/src/views/orderView/orderManage/operatingIncome/index.vue
@@ -1,9 +1,329 @@
<!-- 运营收益 -->
<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="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">
               <template #default="scope">
            <!-- <el-button icon="el-icon-view" type="text" @click="handleDetail(scope.row)">查看</el-button> -->
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
               </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"
      :width="pxToRem(800)" :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="140px">
        <el-form-item label="营业收入" prop="operatingIncome">
          <el-input v-model="editParams.operatingIncome" />
        </el-form-item>
        <el-form-item label="综合总成本费用" prop="totalCost">
          <el-input v-model="editParams.totalCost" />
        </el-form-item>
        <el-form-item label="净利润" prop="netProfit">
          <el-input v-model="editParams.netProfit" />
        </el-form-item>
        <el-form-item label="财务内部收益率" prop="financialIrr">
          <el-input v-model="editParams.financialIrr" />
        </el-form-item>
        <el-form-item label="市场空间" prop="marketSpace">
          <el-input v-model="editParams.marketSpace"  />
        </el-form-item>
      </el-form>
    <!-- </div> -->
     <template #footer>
         <el-button color="#F2F3F5" @click="isShowEditView = false">取消</el-button>
         <el-button class="save-btn" 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';
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: '',
  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'
    }
  ],
  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 scoped lang="scss">
<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>