项目部页面基础逻辑完善
This commit is contained in:
BianLzhaoMin
parent
f922040013
commit
e167c8df6c
|
|
@ -0,0 +1,36 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 新增项目部
|
||||||
|
export const addDeptProjectAPI = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/project/***',
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改项目部
|
||||||
|
export const editDeptProjectAPI = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/project/***',
|
||||||
|
method: 'POST',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除项目部
|
||||||
|
export const deleteDeptProjectAPI = (id) => {
|
||||||
|
return request({
|
||||||
|
url: `/project/****/${id}`,
|
||||||
|
method: 'DELETE',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取项目部列表
|
||||||
|
export const getDeptProjectListAPI = (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/project/***',
|
||||||
|
method: 'GET',
|
||||||
|
params: data,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
export const formLabel = [
|
||||||
|
{
|
||||||
|
f_label: '关键词',
|
||||||
|
f_model: 'keyWord',
|
||||||
|
f_type: 'ipt',
|
||||||
|
isShow: false, // 是否展示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: '6',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
projectName: '总工程名称2',
|
||||||
|
level: '电压等级',
|
||||||
|
status: '停工',
|
||||||
|
count: '5',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
projectName: '总工程名称3',
|
||||||
|
level: '电压等级',
|
||||||
|
status: '筹建',
|
||||||
|
count: '10',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const dialogConfig = {
|
||||||
|
outerVisible: false,
|
||||||
|
outerTitle: '',
|
||||||
|
outerWidth: '50%',
|
||||||
|
minHeight: '',
|
||||||
|
maxHeight: '',
|
||||||
|
}
|
||||||
|
|
@ -1,10 +1,359 @@
|
||||||
<template>
|
<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="getDeptProjectListAPI"
|
||||||
|
>
|
||||||
|
<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="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">
|
||||||
|
<!-- 新增或修改表单 -->
|
||||||
|
<template
|
||||||
|
v-if="dialogConfig.outerTitle !== '子项目(标段工程)概况'"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
label-width="100px"
|
||||||
|
ref="addOrEditFormRef"
|
||||||
|
:model="addOrEditForm"
|
||||||
|
:rules="addOrEditFormRules"
|
||||||
|
>
|
||||||
|
<el-form-item label="所属分公司" prop="branchCompany">
|
||||||
|
<el-select
|
||||||
|
clearable
|
||||||
|
filterable
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="请选择所属分公司"
|
||||||
|
v-model="addOrEditForm.branchCompany"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
v-for="item in branchCompanyOptions"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="项目部名称" prop="projectName">
|
||||||
|
<el-input
|
||||||
|
clearable
|
||||||
|
placeholder="请输入项目部名称"
|
||||||
|
v-model="addOrEditForm.projectName"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="项目部状态" prop="projectStatus">
|
||||||
|
<el-radio-group
|
||||||
|
size="medium"
|
||||||
|
v-model="addOrEditForm.projectStatus"
|
||||||
|
>
|
||||||
|
<el-radio-button label="启用" />
|
||||||
|
<el-radio-button label="解散" />
|
||||||
|
</el-radio-group>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- 子项目(标段工程)概况 -->
|
||||||
|
<template v-else>
|
||||||
|
<el-table :data="lotProjectList">
|
||||||
|
<el-table-column
|
||||||
|
type="index"
|
||||||
|
width="50"
|
||||||
|
label="序号"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="子项目名称"
|
||||||
|
prop="lotProjectName"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="专业"
|
||||||
|
align="center"
|
||||||
|
prop="professional"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="所属分公司"
|
||||||
|
prop="branchCompany"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="电压等级"
|
||||||
|
prop="voltageLevel"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="工程地址"
|
||||||
|
align="center"
|
||||||
|
prop="engineeringAddress"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="工程状态"
|
||||||
|
prop="engineeringStatus"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</DialogModel>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import TableModel from '@/components/TableModel'
|
||||||
|
import DialogModel from '@/components/DialogModel'
|
||||||
|
import { formLabel, columnsList, dialogConfig, testTableList } from './config'
|
||||||
|
import {
|
||||||
|
addDeptProjectAPI,
|
||||||
|
editDeptProjectAPI,
|
||||||
|
deleteDeptProjectAPI,
|
||||||
|
getDeptProjectListAPI,
|
||||||
|
} from '@/api/basic-manage/project-manage/dept-project'
|
||||||
export default {
|
export default {
|
||||||
name: 'DeptProject',
|
name: 'DeptProject',
|
||||||
|
components: {
|
||||||
|
TableModel,
|
||||||
|
DialogModel,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formLabel,
|
||||||
|
columnsList,
|
||||||
|
dialogConfig,
|
||||||
|
testTableList,
|
||||||
|
getDeptProjectListAPI,
|
||||||
|
|
||||||
|
// 新增或修改表单
|
||||||
|
addOrEditForm: {
|
||||||
|
projectName: '', // 项目部名称
|
||||||
|
branchCompany: '', // 所属分公司
|
||||||
|
projectStatus: '启用', // 项目部状态
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增或修改表单验证
|
||||||
|
addOrEditFormRules: {
|
||||||
|
projectName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'blur',
|
||||||
|
message: '请输入项目部名称',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
branchCompany: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'change',
|
||||||
|
message: '请选择所属分公司',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
projectStatus: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
trigger: 'change',
|
||||||
|
message: '请选择项目部状态',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// 所属分公司
|
||||||
|
branchCompanyOptions: [
|
||||||
|
{
|
||||||
|
label: '上海分公司',
|
||||||
|
value: '上海分公司',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '北京分公司',
|
||||||
|
value: '北京分公司',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '天津分公司',
|
||||||
|
value: '天津分公司',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '河北分公司',
|
||||||
|
value: '河北分公司',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// 子项目(标段工程)概况
|
||||||
|
lotProjectList: [
|
||||||
|
{
|
||||||
|
lotProjectName: '子项目名称1',
|
||||||
|
professional: '专业',
|
||||||
|
branchCompany: '所属分公司1',
|
||||||
|
voltageLevel: '电压等级',
|
||||||
|
engineeringAddress: '工程地址',
|
||||||
|
engineeringStatus: '工程状态',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lotProjectName: '子项目名称2',
|
||||||
|
professional: '专业',
|
||||||
|
branchCompany: '所属分公司1',
|
||||||
|
voltageLevel: '电压等级',
|
||||||
|
engineeringAddress: '工程地址',
|
||||||
|
engineeringStatus: '工程状态',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lotProjectName: '子项目名称3',
|
||||||
|
professional: '专业',
|
||||||
|
branchCompany: '所属分公司',
|
||||||
|
voltageLevel: '电压等级',
|
||||||
|
engineeringAddress: '工程地址',
|
||||||
|
engineeringStatus: '工程状态',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 导出按钮
|
||||||
|
onHandleExportAllProject(queryParams) {
|
||||||
|
console.log(queryParams, '导出')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 新增或修改
|
||||||
|
onHandleAddOrEditAllProject(type, data) {
|
||||||
|
this.dialogConfig.outerTitle =
|
||||||
|
type === 1 ? '新增项目部' : '修改项目部'
|
||||||
|
|
||||||
|
this.dialogConfig.outerWidth = ''
|
||||||
|
this.dialogConfig.minHeight = ''
|
||||||
|
this.dialogConfig.maxHeight = ''
|
||||||
|
this.dialogConfig.outerVisible = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
onHandleDeleteAllProject(data) {
|
||||||
|
this.$confirm('确定删除该项目部吗？', '温馨提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
})
|
||||||
|
.then(async () => {
|
||||||
|
const res = await deleteDeptProjectAPI(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 === '新增项目部'
|
||||||
|
? addDeptProjectAPI
|
||||||
|
: editDeptProjectAPI
|
||||||
|
|
||||||
|
const res = await API(this.addOrEditForm)
|
||||||
|
console.log(res, '新增或修改结果')
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$msgSuccess('操作成功')
|
||||||
|
this.handleCloseDialogOuter()
|
||||||
|
this.$refs.allProjectTableRef.getTableList() // 更新列表
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 查看标段工程数量
|
||||||
|
onHandleViewLotProject(data) {
|
||||||
|
console.log(data, '查看标段工程数量')
|
||||||
|
this.dialogConfig.outerTitle = '子项目(标段工程)概况'
|
||||||
|
this.dialogConfig.outerWidth = '80%'
|
||||||
|
this.dialogConfig.minHeight = '90vh'
|
||||||
|
this.dialogConfig.maxHeight = '90vh'
|
||||||
|
this.dialogConfig.outerVisible = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 关闭弹框
|
||||||
|
handleCloseDialogOuter() {
|
||||||
|
if (this.dialogConfig.outerTitle !== '子项目(标段工程)概况') {
|
||||||
|
this.$refs.addOrEditFormRef.resetFields()
|
||||||
|
}
|
||||||
|
this.dialogConfig.outerVisible = false
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue