标段工程页面基础逻辑完善

This commit is contained in:
BianLzhaoMin 2025-08-08 16:13:24 +08:00
parent 77f19175d6
commit f922040013
6 changed files with 732 additions and 5 deletions

View File

@ -0,0 +1,45 @@
import request from '@/utils/request'
// 新增标段工程
export const addLotLotProjectAPI = (data) => {
return request({
url: '/project/***',
method: 'POST',
data,
})
}
// 修改标段工程
export const editLotLotProjectAPI = (data) => {
return request({
url: '/project/***',
method: 'POST',
data,
})
}
// 删除标段工程
export const deleteLotLotProjectAPI = (id) => {
return request({
url: `/project/****/${id}`,
method: 'DELETE',
})
}
// 获取标段工程列表
export const getLotLotProjectListAPI = (data) => {
return request({
url: '/project/***',
method: 'GET',
params: data,
})
}
// 标段工程完工操作
export const completeLotLotProjectAPI = (data) => {
return request({
url: '/project/***',
method: 'POST',
data,
})
}

View File

@ -9,6 +9,7 @@
:rules="formRules"
v-show="showSearch"
:model="queryParams"
label-width="auto"
>
<el-form-item
:key="v"
@ -108,13 +109,12 @@
>
重置
</el-button>
<slot name="btn" :queryParams="queryParams"></slot>
</el-form-item>
</el-form>
<!-- 按钮集群 -->
<el-row class="btn-container">
<div class="btn-handler">
<slot name="btn" :queryParams="queryParams"></slot>
</div>
<ToolbarModel
v-if="showRightTools"
:columns="columnCheckList"
@ -491,6 +491,7 @@ export default {
.btn-container {
margin-bottom: 6px;
display: flex;
justify-content: flex-end;
align-items: center;
}
::v-deep .btn-handler {

View File

@ -3,7 +3,7 @@ export const formLabel = [
f_label: '关键词',
f_model: 'keyWord',
f_type: 'ipt',
isShow: true, // 是否展示label
isShow: false, // 是否展示label
},
]

View File

@ -0,0 +1,393 @@
<template>
<!-- 新增或修改标段工程表单 -->
<div>
<el-form
label-width="140px"
ref="addOrEditFormRef"
:model="addOrEditForm"
:rules="addOrEditFormRules"
>
<el-row>
<el-col :span="12">
<el-form-item label="所属总包工程" prop="allProject">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择"
v-model="addOrEditForm.allProject"
>
<el-option
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in allProjectOptions"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属项目部" prop="xmb">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择"
v-model="addOrEditForm.xmb"
>
<el-option
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in xmbOptions"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="标段工程名称" prop="lotProjectName">
<el-input
clearable
placeholder="请输入标段工程名称"
v-model="addOrEditForm.lotProjectName"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="标段工程简称"
prop="lotProjectShortName"
>
<el-input
clearable
placeholder="请输入标段工程简称"
v-model="addOrEditForm.lotProjectShortName"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="工程类型" prop="type">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择"
v-model="addOrEditForm.type"
>
<el-option
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in typeOptions"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="电压等级" prop="level">
<el-select
clearable
filterable
style="width: 100%"
placeholder="请选择"
v-model="addOrEditForm.level"
>
<el-option
:key="item.value"
:label="item.label"
:value="item.value"
v-for="item in levelOptions"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="是否上海项目" prop="isForeignProject">
<el-radio-group
size="medium"
v-model="addOrEditForm.isForeignProject"
>
<el-radio-button label="是" />
<el-radio-button label="否" />
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="工程状态" prop="status">
<el-radio-group
size="medium"
v-model="addOrEditForm.status"
>
<el-radio-button label="在建" />
<el-radio-button label="筹建" />
<el-radio-button label="停工" />
<el-radio-button label="完工" />
<el-radio-button label="遗留收尾" />
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="工程地址" prop="address">
<el-input
clearable
placeholder="请输入总工程名称"
v-model="addOrEditForm.address"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划开工时间" prop="planStartTime">
<el-date-picker
type="date"
style="width: 100%"
placeholder="选择日期"
value-format="yyyy-MM-dd"
v-model="addOrEditForm.planStartTime"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="项目部经度" prop="projectLongitude">
<el-input
clearable
placeholder="请输入项目部经度"
v-model="addOrEditForm.projectLongitude"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="计划竣工时间" prop="planEndTime">
<el-date-picker
type="date"
style="width: 100%"
placeholder="选择日期"
value-format="yyyy-MM-dd"
v-model="addOrEditForm.planEndTime"
/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="项目部纬度" prop="projectLatitude">
<el-input
clearable
placeholder="请输入项目部纬度"
v-model="addOrEditForm.projectLatitude"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import {
addLotLotProjectAPI,
editLotLotProjectAPI,
} from '@/api/basic-manage/project-manage/lot-project'
export default {
name: 'AddOrEditForm',
data() {
//
const validatePlanEndTime = (rule, value, callback) => {
if (value <= this.addOrEditForm.planStartTime) {
callback(new Error('竣工时间不能小于开工时间'))
}
callback()
}
const validatePlanStartTime = (rule, value, callback) => {
if (value >= this.addOrEditForm.planEndTime) {
callback(new Error('开工时间不能大于竣工时间'))
}
callback()
}
return {
formType: 1,
addOrEditForm: {
allProject: '',
xmb: '',
lotProjectName: '',
lotProjectShortName: '',
type: '',
level: '',
isForeignProject: '否',
status: '在建',
address: '',
planStartTime: '',
planEndTime: '',
projectLongitude: '',
projectLatitude: '',
},
addOrEditFormRules: {
allProject: [
{
required: true,
message: '请选择所属总包工程',
trigger: 'change',
},
],
xmb: [
{
required: true,
message: '请选择所属项目部',
trigger: 'change',
},
],
lotProjectName: [
{
required: true,
message: '请输入标段工程名称',
trigger: 'blur',
},
],
lotProjectShortName: [
{
required: true,
message: '请输入标段工程简称',
trigger: 'blur',
},
],
type: [
{
required: true,
message: '请选择工程类型',
trigger: 'change',
},
],
level: [
{
required: true,
message: '请选择电压等级',
trigger: 'change',
},
],
isForeignProject: [
{
required: true,
},
],
status: [
{
required: true,
},
],
address: [
{
required: true,
message: '请输入工程地址',
trigger: 'blur',
},
],
planStartTime: [
{
required: false,
message: '请选择计划开工时间',
trigger: 'change',
},
{
validator: validatePlanStartTime,
},
],
planEndTime: [
{
required: false,
message: '请选择计划竣工时间',
trigger: 'change',
},
{
validator: validatePlanEndTime,
},
],
},
allProjectOptions: [
{
value: '1',
label: '总包工程1',
},
{
value: '2',
label: '总包工程2',
},
],
xmbOptions: [
{
value: '1',
label: '项目部1',
},
{
value: '2',
label: '项目部2',
},
],
typeOptions: [
{
value: '1',
label: '类型1',
},
{
value: '2',
label: '类型3',
},
],
levelOptions: [
{
value: '1',
label: '等级1',
},
{
value: '2',
label: '等级2',
},
],
}
},
methods: {
//
onHandleConfirmAddOrEditFun() {
return new Promise((resolve, reject) => {
this.$refs.addOrEditFormRef.validate(async (valid) => {
if (valid) {
console.log(this.addOrEditForm)
const API =
this.formType === 1
? addLotLotProjectAPI
: editLotLotProjectAPI
const res = await API(this.addOrEditForm)
console.log(res, '新增或修改结果')
if (res.code === 200) {
resolve()
} else {
reject(new Error(res.message))
}
} else {
reject(new Error('表单验证失败'))
}
})
})
},
//
resetForm() {
this.$refs.addOrEditFormRef.resetFields()
},
},
}
</script>

View File

@ -0,0 +1,80 @@
export const formLabel = [
{
f_label: '分公司',
f_model: 'company',
f_type: 'sel',
isShow: false, // 是否展示label
},
{
f_label: '总包工程',
f_model: 'allProject',
f_type: 'sel',
isShow: false, // 是否展示label
},
{
f_label: '标段工程',
f_model: 'lotProject',
f_type: 'sel',
isShow: false, // 是否展示label
},
{
f_label: '工程状态',
f_model: 'status',
f_type: 'sel',
isShow: false, // 是否展示label
},
{
f_label: '是否上海外项目',
f_model: 'isForeignProject',
f_type: 'sel',
isShow: false, // 是否展示label
},
]
export const columnsList = [
{ t_props: 'projectName', t_label: '所属总工程' },
{ t_props: 'xmb', t_label: '所属项目部' },
{ t_props: 'name', t_label: '工程名称' },
{ t_props: 'type', t_label: '工程类型' },
{ t_props: 'level', t_label: '电压等级' },
{ t_props: 'address', t_label: '工程地址' },
{ t_props: 'status', t_label: '状态' },
]
export const testTableList = [
{
projectName: '总工程名称',
level: '等级3',
xmb: 'xxx项目部',
name: '110kv工程',
type: '基建变电',
address: '安徽省合肥市110k工程',
status: '在建',
},
{
projectName: '总工程名称21',
level: '等级3',
xmb: 'xxx项目部',
name: '110kv工程',
type: '基建变电',
address: '安徽省合肥市110k工程',
status: '在建',
},
{
projectName: '总工程名称3',
level: '等级3',
xmb: 'xxx项目部',
name: '110kv工程',
type: '基建变电',
address: '安徽省合肥市110k工程',
status: '在建',
},
]
export const dialogConfig = {
outerVisible: false,
outerTitle: '',
outerWidth: '90%',
minHeight: '',
maxHeight: '',
}

View File

@ -1,10 +1,218 @@
<template>
<!-- 基础管理 ---- 项目管理 ---- 标段工程 -->
<div class="app-container"> </div>
<div class="app-container">
<TableModel
:formLabel="formLabel"
:showOperation="true"
:showRightTools="true"
ref="allProjectTableRef"
:columnsList="columnsList"
:testTableList="testTableList"
:request-api="getLotLotProjectListAPI"
>
<template slot="btn" slot-scope="{ queryParams }">
<el-button
plain
size="mini"
type="success"
icon="el-icon-download"
@click="onHandleExportAllProject(queryParams)"
>
导出
</el-button>
<el-button
plain
size="mini"
type="primary"
icon="el-icon-plus"
@click="onHandleAddOrEditAllProject(1, null)"
>
新增
</el-button>
</template>
<!-- 标段工程数量 -->
<template slot="count" slot-scope="{ data }">
<span class="cursor-blue" @click="onHandleViewLotProject(data)">
{{ data.count }}
</span>
</template>
<template slot="handle" slot-scope="{ data }">
<el-button
plain
size="mini"
type="success"
icon="el-icon-check"
@click="onHandleCompleteAllProject(data)"
>
完工
</el-button>
<el-button
plain
size="mini"
type="primary"
icon="el-icon-edit"
@click="onHandleAddOrEditAllProject(2, data)"
>
修改
</el-button>
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="onHandleDeleteAllProject(data)"
>
删除
</el-button>
</template>
</TableModel>
<DialogModel
:dialogConfig="dialogConfig"
@closeDialogOuter="handleCloseDialogOuter"
>
<template slot="outerContent">
<AddOrEditForm ref="addOrEditFormContentRef" />
<el-row class="dialog-footer-btn">
<el-button size="medium" @click="handleCloseDialogOuter">
取消
</el-button>
<el-button
size="medium"
type="primary"
@click="onHandleConfirmAddOrEdit"
>
确定
</el-button>
</el-row>
</template>
</DialogModel>
</div>
</template>
<script>
import TableModel from '@/components/TableModel'
import DialogModel from '@/components/DialogModel'
import AddOrEditForm from './add-or-edit-form'
import { formLabel, columnsList, dialogConfig, testTableList } from './config'
import {
deleteLotLotProjectAPI,
getLotLotProjectListAPI,
completeLotLotProjectAPI,
} from '@/api/basic-manage/project-manage/lot-project'
export default {
name: 'LotProject',
components: {
TableModel,
DialogModel,
AddOrEditForm,
},
data() {
return {
formLabel,
columnsList,
dialogConfig,
testTableList,
getLotLotProjectListAPI,
}
},
methods: {
//
onHandleExportAllProject(queryParams) {
console.log(queryParams, '导出')
},
//
onHandleAddOrEditAllProject(type, data) {
this.dialogConfig.outerTitle =
type === 1 ? '新增标段工程' : '修改标段工程'
this.dialogConfig.outerVisible = true
},
//
onHandleDeleteAllProject(data) {
this.$confirm('确定删除该工程吗?', '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const res = await deleteLotLotProjectAPI(data.id)
console.log(res, '删除结果')
if (res.code === 200) {
this.$msgSuccess('删除成功')
this.$refs.allProjectTableRef.getTableList() //
}
})
.catch(() => {
console.log('取消')
})
},
//
onHandleCompleteAllProject(data) {
const h = this.$createElement
this.$msgbox({
title: '完工确认',
message: h('p', null, [
h(
'h3',
{
style: 'font-weight: bold; display: flex; align-items: center;',
},
[
h('i', {
class: 'el-icon-warning-outline', // 使Element UI
style: 'color: #E6A23C; margin-right: 8px; font-size: 18px;',
}),
'是否确定完工?',
],
),
h(
'p',
{
style: 'text-indent: 2em;',
},
'完工后,会解绑分包合同,项目人员全部出场,请确认后再操作此项。',
),
]),
showCancelButton: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
})
.then(async () => {
const res = await completeLotLotProjectAPI(data.id)
console.log(res, '完工结果')
if (res.code === 200) {
this.$msgSuccess('完工成功')
this.$refs.allProjectTableRef.getTableList() //
}
})
.catch(() => {
console.log('取消')
})
},
//
async onHandleConfirmAddOrEdit() {
this.$refs.addOrEditFormContentRef.formType =
this.dialogConfig.outerTitle === '新增标段工程' ? 1 : 2
try {
await this.$refs.addOrEditFormContentRef.onHandleConfirmAddOrEditFun()
} catch (error) {
console.log('表单提交失败', error)
}
},
//
handleCloseDialogOuter() {
this.$refs.addOrEditFormContentRef.resetForm()
this.dialogConfig.outerVisible = false
},
},
}
</script>