总包工程页面基础逻辑完善
This commit is contained in:
BianLzhaoMin
parent
d889ab028a
commit
8f7232f68d
|
|
@ -0,0 +1,36 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 新增总包工程
|
||||
export const addAllProjectAPI = (data) => {
|
||||
return request({
|
||||
url: '/project/***',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 修改总包工程
|
||||
export const editAllProjectAPI = (data) => {
|
||||
return request({
|
||||
url: '/project/***',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 删除总包工程
|
||||
export const deleteAllProjectAPI = (id) => {
|
||||
return request({
|
||||
url: `/project/****/${id}`,
|
||||
method: 'DELETE',
|
||||
})
|
||||
}
|
||||
|
||||
// 获取总包工程列表
|
||||
export const getAllProjectListAPI = (data) => {
|
||||
return request({
|
||||
url: '/project/***',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
|
@ -208,3 +208,11 @@ aside {
|
|||
color: #409EFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dialog-footer-btn {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
padding: 12px 0;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
:inline="true"
|
||||
size="small"
|
||||
ref="queryFormRef"
|
||||
label-width="100px"
|
||||
:rules="formRules"
|
||||
v-show="showSearch"
|
||||
:model="queryParams"
|
||||
|
|
@ -248,6 +247,7 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 复选框是否勾选
|
||||
selectable: {
|
||||
type: Function,
|
||||
|
|
@ -258,7 +258,7 @@ export default {
|
|||
// 是否显示复选框 由父组件传递 默认不显示
|
||||
isSelectShow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: true,
|
||||
},
|
||||
// 测试时使用的数据源
|
||||
testTableList: {
|
||||
|
|
@ -318,7 +318,7 @@ export default {
|
|||
// 搜索区域是否隐藏
|
||||
showSearch: true,
|
||||
// 是否显示复选框
|
||||
selectionShow: true,
|
||||
selectionShow: false,
|
||||
// 是否显示序号
|
||||
indexNumShow: true,
|
||||
// 是否显示操作列
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
export const formLabel = [
|
||||
{
|
||||
f_label: '关键词',
|
||||
f_model: 'keyWord',
|
||||
f_type: 'ipt',
|
||||
isShow: true, // 是否展示label
|
||||
},
|
||||
]
|
||||
|
||||
export const columnsList = [
|
||||
{ t_props: 'projectName', t_label: '总工程名称' },
|
||||
{ t_props: 'level', t_label: '电压等级' },
|
||||
|
||||
{
|
||||
t_props: 'count',
|
||||
t_label: '标段工程数量',
|
||||
t_slot: 'count',
|
||||
},
|
||||
{ t_props: 'status', t_label: '状态' },
|
||||
]
|
||||
|
||||
export const testTableList = [
|
||||
{
|
||||
projectName: '总工程名称',
|
||||
level: '电压等级',
|
||||
status: '在建',
|
||||
count: '专业工程数量',
|
||||
},
|
||||
{
|
||||
projectName: '总工程名称2',
|
||||
level: '电压等级',
|
||||
status: '停工',
|
||||
count: '专业工程数量',
|
||||
},
|
||||
{
|
||||
projectName: '总工程名称3',
|
||||
level: '电压等级',
|
||||
status: '筹建',
|
||||
count: '专业工程数量',
|
||||
},
|
||||
]
|
||||
|
||||
export const dialogConfig = {
|
||||
outerVisible: false,
|
||||
outerTitle: '',
|
||||
}
|
||||
|
|
@ -1,10 +1,235 @@
|
|||
<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="getAllProjectListAPI"
|
||||
>
|
||||
<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="handle" slot-scope="{ data }">
|
||||
<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">
|
||||
<el-form
|
||||
label-width="100px"
|
||||
ref="addOrEditFormRef"
|
||||
:model="addOrEditForm"
|
||||
:rules="addOrEditFormRules"
|
||||
>
|
||||
<el-form-item label="总工程名称" prop="projectName">
|
||||
<el-input
|
||||
clearable
|
||||
placeholder="请输入总工程名称"
|
||||
v-model="addOrEditForm.projectName"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级" prop="voltageLevel">
|
||||
<el-select
|
||||
clearable
|
||||
filterable
|
||||
style="width: 100%"
|
||||
placeholder="请选择电压等级"
|
||||
v-model="addOrEditForm.voltageLevel"
|
||||
>
|
||||
<el-option
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
v-for="item in voltageLevelOptions"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<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 { formLabel, columnsList, dialogConfig, testTableList } from './config'
|
||||
import {
|
||||
addAllProjectAPI,
|
||||
editAllProjectAPI,
|
||||
deleteAllProjectAPI,
|
||||
getAllProjectListAPI,
|
||||
} from '@/api/basic-manage/project-manage/all-project'
|
||||
export default {
|
||||
name: 'AllProject',
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
formLabel,
|
||||
columnsList,
|
||||
dialogConfig,
|
||||
testTableList,
|
||||
getAllProjectListAPI,
|
||||
|
||||
// 新增或修改表单
|
||||
addOrEditForm: {
|
||||
projectName: '', // 总工程名称
|
||||
voltageLevel: '', // 电压等级
|
||||
},
|
||||
|
||||
// 新增或修改表单验证
|
||||
addOrEditFormRules: {
|
||||
projectName: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
message: '请输入总工程名称',
|
||||
},
|
||||
],
|
||||
voltageLevel: [
|
||||
{
|
||||
required: true,
|
||||
trigger: 'change',
|
||||
message: '请选择电压等级',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 电压等级
|
||||
voltageLevelOptions: [
|
||||
{
|
||||
label: '110kV',
|
||||
value: '110kV',
|
||||
},
|
||||
{
|
||||
label: '220kV',
|
||||
value: '220kV',
|
||||
},
|
||||
{
|
||||
label: '330kV',
|
||||
value: '330kV',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
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 deleteAllProjectAPI(data.id)
|
||||
console.log(res, '删除结果')
|
||||
if (res.code === 200) {
|
||||
this.$msgSuccess('删除成功')
|
||||
this.$refs.allProjectTableRef.getTableList() // 更新列表
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log('取消')
|
||||
})
|
||||
},
|
||||
|
||||
// 确定按钮
|
||||
onHandleConfirmAddOrEdit() {
|
||||
this.$refs.addOrEditFormRef.validate(async (valid) => {
|
||||
if (valid) {
|
||||
const API =
|
||||
this.dialogConfig.outerTitle === '新增总工程'
|
||||
? addAllProjectAPI
|
||||
: editAllProjectAPI
|
||||
|
||||
const res = await API(this.addOrEditForm)
|
||||
console.log(res, '新增或修改结果')
|
||||
if (res.code === 200) {
|
||||
this.$msgSuccess('操作成功')
|
||||
this.handleCloseDialogOuter()
|
||||
this.$refs.allProjectTableRef.getTableList() // 更新列表
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleCloseDialogOuter() {
|
||||
this.$refs.addOrEditFormRef.resetFields()
|
||||
this.dialogConfig.outerVisible = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue