项目部页面基础逻辑完善
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>
|
||||
<!-- 基础管理 ---- 项目管理 ---- 项目部 -->
|
||||
<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>
|
||||
|
||||
<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 {
|
||||
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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue