<template>
|
<!-- 工程项目管理 ==> 单位工程管理-->
|
<div class="main">
|
<div class="main_header">
|
<div class="header_item">
|
<span class="header_label">标段名称：</span>
|
<el-input v-model="queryInfo.segmentName" clearable placeholder="请输入标段名称"></el-input>
|
</div>
|
<div class="header_item">
|
<span class="header_label">项目名称：</span>
|
<el-select v-model="queryInfo.proId" placeholder="请选择项目名称" clearable>
|
<el-option v-for="item in optionsProject" :key="item.proId" :label="item.proName" :value="item.proId">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="header_item">
|
<el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
|
<el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
|
</div>
|
</div>
|
<div class="main_content">
|
<cpnTable :table-index="true" :table-loading="loading" :table-data="dataList" :table-columns="tableColumns"
|
:page-total="total" :page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize"
|
:page-change="pageChange">
|
|
<template #finished="{ row }">
|
<div style="cursor: pointer;" @click="showDetail(row)">{{ row.completedQuantity }}</div>
|
</template>
|
</cpnTable>
|
</div>
|
<!-- dialog -->
|
<el-dialog class="prop_dialog" v-if="isRender" :title="dialogTitle" :visible.sync="asyncVisible" width="660px"
|
@close="closeForm">
|
|
<cpnForm :form-config="formConfig"></cpnForm>
|
|
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
|
<el-form-item label="项目名称:" prop="proId">
|
<el-select v-model="ruleForm.proId" placeholder="请选择" @change="changeNeed">
|
<el-option v-for="item in optionsProject" :key="item.proId" :label="item.proName" :value="item.proId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="起讫里程:" prop="mileage">
|
<el-input v-model="ruleForm.mileage" clearable placeholder="请输入起讫里程"></el-input>
|
</el-form-item>
|
<el-form-item label="单位工程名称:" prop="unitProjectName">
|
<el-input v-model="ruleForm.unitProjectName" clearable placeholder="请输入单位工程名称"></el-input>
|
</el-form-item>
|
<el-form-item label="需求负责人:" prop="segmentAdmin">
|
<el-select v-model="ruleForm.segmentAdmin" placeholder="请选择求负责人">
|
<el-option v-for="item in optionsUser" :key="item.userId" :label="item.realName" :value="item.userId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="盾构单位:" prop="shieldEnp">
|
<el-input v-model="ruleForm.shieldEnp" clearable placeholder="请输入盾构单位"></el-input>
|
</el-form-item>
|
<el-form-item label="开始时间:" prop="startTime">
|
<el-date-picker v-model="ruleForm.startTime" value-format="yyyy-MM-dd" placeholder="请选择开始日期"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="结束时间:" prop="endTime">
|
<el-date-picker v-model="ruleForm.endTime" value-format="yyyy-MM-dd" placeholder="请选择结束日期"></el-date-picker>
|
</el-form-item>
|
<el-form-item label="工期:" prop="duration">
|
<el-input v-model="ruleForm.duration" clearable placeholder="请输入工期"></el-input>
|
</el-form-item>
|
<el-form-item label="站点:" prop="station">
|
<el-input v-model="ruleForm.station" clearable placeholder="请输入站点"></el-input>
|
</el-form-item>
|
<div class="section_needs">标段需求</div>
|
<div class="section_needs_content">
|
<div v-for="item in ruleForm.segmentList" :key="item.dictId" class="needs_items">
|
<div class="needs_text">{{ item.dictName }}</div>
|
<el-input placeholder="请输入数量" type="number" v-model="item.needNum" class="needs_num">
|
<template slot="append">块</template>
|
</el-input>
|
</div>
|
</div>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncVisible = false">取 消</el-button>
|
<el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
|
</div>
|
</el-dialog>
|
<!-- detail dialog -->
|
<el-dialog class="prop_dialog" v-if="detail.isRenderDetail" title="管片数量" :visible.sync="detail.asyncVisible"
|
width="1000px">
|
<el-card>
|
<div class="titles" v-for="item in detail.infoMap" :key="item.key">
|
{{ item.name }} :
|
<template v-if="item.key === 'waterproofType'">
|
<span>{{ detail.infos[item.key] === 0 ? '有' : '无' }} </span>
|
</template>
|
<template v-else-if="item.key === 'proHas'">
|
<span v-for="val in detail.infos[item.key]" :key="val.hasSteel">
|
{{ val.dictName }}
|
</span>
|
</template>
|
<template v-else>
|
<span>{{ detail.infos[item.key] }}</span>
|
</template>
|
</div>
|
</el-card>
|
<cpnTable :table-index="true" :table-data="detail.tableData" :table-columns="detail.tableColumns"
|
:page-total="detail.total" :page-num.sync="detail.pageNum" :page-size.sync="detail.pageSize"
|
:page-change="detailPageChange">
|
</cpnTable>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {throttle} from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
|
import cpnTable from '@/components/element/Table'
|
import cpnForm from '@/components/element/Form'
|
export default {
|
data() {
|
return {
|
isRender: false,
|
loading: false,
|
asyncVisible: false,
|
submitMode: '', // add update
|
total: 0,
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 10,
|
segmentName: '',
|
proId: '',
|
},
|
dataList: [],
|
tableColumns: [],
|
optionsUser: [], //需求负责人
|
optionsProject: [], // 项目名称
|
ruleForm: {}, // 按钮表单
|
rules: {
|
proId: [{required: true, message: '请选择', trigger: 'change'}],
|
mileage: [{required: true, message: '请输入', trigger: 'blur'}],
|
unitProjectName: [{required: true, message: '请输入', trigger: 'blur'}],
|
segmentAdmin: [{required: true, message: '请选择', trigger: 'change'}],
|
shieldEnp: [{required: true, message: '请输入', trigger: 'blur'}],
|
startTime: [{required: true, message: '请选择', trigger: 'change'}],
|
endTime: [{required: true, message: '请选择', trigger: 'change'}],
|
duration: [{required: true, message: '请输入', trigger: 'blur'}],
|
station: [{required: true, message: '请输入', trigger: 'blur'}],
|
},
|
detail: {
|
rowId: '',
|
isRenderDetail: false,
|
asyncVisible: false,
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
tableData: [],
|
tableColumns: [],
|
infos: [],
|
infoMap: [
|
{
|
name: '项目名称',
|
key: 'proName',
|
},
|
{
|
name: '单位工程名称',
|
key: 'createUnit',
|
},
|
{
|
name: '外径',
|
key: 'outsideDiameter',
|
},
|
{
|
name: '內径',
|
key: 'innerDiameter',
|
},
|
{
|
name: '厚度',
|
key: 'thickness',
|
},
|
{
|
name: '环宽',
|
key: 'ringWidth',
|
},
|
{
|
name: '混凝土强度等级',
|
key: 'concreteStrengthGrade',
|
},
|
{
|
name: '抗渗等级',
|
key: 'impermeabilityLevel',
|
},
|
{
|
name: '配筋型号',
|
key: 'proHas',
|
},
|
{
|
name: '有无外弧面防水',
|
key: 'waterproofType',
|
}
|
]
|
},
|
|
formConfig: {
|
formModels: {
|
proId: '', // 项目名称id
|
mileage: '', // 起讫里程
|
unitProjectName: '', // 单位工程名称
|
segmentAdmin: '', // 需求负责人
|
shieldEnp: '', // 盾构单位
|
startTime: null, // 开始时间
|
endTime: null, // 结束时间
|
duration: '', // 工期
|
station: '', // 站点
|
segmentList: [], // 标段需求
|
},
|
formItems: [
|
{
|
type: 'input', label: '用户id'
|
},
|
{
|
type: 'input', label: '用户名'
|
},
|
|
{
|
type: 'input', label: '真实姓名'
|
},
|
{
|
type: 'input', label: '电话号码'
|
},
|
{
|
type: 'select', label: '用户状态', options: [
|
{label: '禁用', value: 0},
|
{label: '启用', value: 1}
|
]
|
},
|
{
|
type: 'datepicker', label: '创建时间', otherOptions: {
|
startPlaceholder: '开始时间',
|
endPlaceholder: '结束时间',
|
type: 'daterange',
|
'unlink-panels': true
|
}
|
}
|
],
|
itemColLayout: {
|
span: 8
|
}
|
}
|
}
|
},
|
components: {
|
cpnTable,
|
cpnForm
|
},
|
computed: {
|
isUpdate() {
|
return this.submitMode === 'update'
|
},
|
dialogTitle() {
|
return this.isUpdate ? '修改新增单位工程' : '新增单位工程'
|
},
|
},
|
created() {
|
this.setFormProps()
|
this.setTableColumn()
|
this.getLists()
|
this.getAllProjects()
|
this.getAllPersons()
|
// this.getAllBlocks() // 暂时没用,先屏蔽
|
},
|
methods: {
|
// 获取table列表数据
|
getLists() {
|
this.loading = true
|
let params = this.queryInfo
|
this.$api.Engineer.searchSegment(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.total = res.data.total
|
this.dataList = res.data.list
|
}
|
this.loading = false
|
})
|
},
|
//获得所有人员
|
getAllPersons() {
|
this.$api.Engineer.getPersonsList({}).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.optionsUser = res.data
|
} else {
|
this.$message.warning('人员名称获取失败')
|
}
|
})
|
},
|
//获得所有项目名称
|
getAllProjects() {
|
let obj = {
|
pageNum: 1,
|
pageSize: 100000000
|
}
|
this.$api.Engineer.searchProjects(obj).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.optionsProject = res.data.list
|
} else {
|
this.$message.warning('项目名称获取失败')
|
}
|
})
|
},
|
//字典里获取所有标段块号
|
getAllBlocks() {
|
let params = {
|
pageNum: 1,
|
pageSize: 100000000
|
}
|
this.$api.Dictionary.searchDictionary(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
const segmentList = []
|
res.data.list.forEach(item => {
|
if (item.dictType === '5') {
|
segmentList.push({
|
dictName: item.dictName,
|
needType: item.dictId,
|
needNum: 0,
|
segmentId: ''
|
})
|
}
|
})
|
this.ruleForm.segmentList = segmentList
|
} else {
|
this.$message.warning('标段获取失败')
|
}
|
})
|
},
|
// 已完成 table信息
|
getDetailLists() {
|
let detailData = this.detail
|
this.$api.DuctpiecePLM.searchDuctpiecePLMList({
|
segmentId: detailData.rowId,
|
pageNum: detailData.pageNum,
|
pageSize: detailData.pageSize
|
}).then(res => {
|
if (res.success) {
|
detailData.total = res.data.total
|
detailData.tableData = res.data.list
|
}
|
})
|
},
|
// 已完成 title信息
|
getDetailInfos(id) {
|
this.$api.Engineer.detailsProjects({proId: id}).then(res => {
|
if (res.success) {
|
this.detail.infos = res.data
|
}
|
})
|
},
|
// 初始化 ruleform
|
setFormProps(options = {}) {
|
let _form = {
|
proId: '', // 项目名称id
|
mileage: '', // 起讫里程
|
unitProjectName: '', // 单位工程名称
|
segmentAdmin: '', // 需求负责人
|
shieldEnp: '', // 盾构单位
|
startTime: null, // 开始时间
|
endTime: null, // 结束时间
|
duration: '', // 工期
|
station: '', // 站点
|
segmentList: [], // 标段需求
|
}
|
this.ruleForm = Object.keys(options).length ? options : _form
|
},
|
// 初始化 table 配置
|
setTableColumn() {
|
this.tableColumns = [
|
{index: true},
|
{slot: "finished", name: "已完成（块）"},
|
{name: "项目名称", key: "proName", width: 160},
|
{name: "起讫里程", key: "mileage"},
|
{name: "单位工程名称", key: "unitProjectName"},
|
{name: "盾构单位", key: "shieldEnp"},
|
{name: "开始时间", key: "startTime", width: 100},
|
{name: "结束时间", key: "endTime", width: 100},
|
{name: "工期", key: "duration"},
|
{name: "站点", key: "station"},
|
{name: "负责人", key: "realName"},
|
{
|
operation: true, name: "操作", width: 140, value: [
|
{name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
|
{name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
|
]
|
},
|
]
|
this.detail.tableColumns = [
|
{index: true},
|
{name: "环号", key: "ringNum"},
|
{name: "管片编号", key: "pipeNum", width: 140},
|
{name: "转向", key: "turnName", width: 106},
|
{name: "配筋", key: "reinforcementName"},
|
{name: "注浆孔", key: "groutingHolesName"},
|
{name: "块号", key: "blockNumName"},
|
{name: "模具", key: "mouldNum"},
|
{name: "入模时间", key: "intoModTime", width: 136},
|
{name: "浇筑时间", key: "pouringTime"},
|
{name: "质检时间", key: "checkTime", width: 136},
|
{name: "生产班组", key: "groupName"},
|
{name: "项目", key: "proName", width: 240},
|
{name: "质量标注", key: "checkResultStr"},
|
]
|
},
|
// 重置表单
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
},
|
// 显示表单
|
showForm() {
|
!this.isRender && (this.isRender = true)
|
this.asyncVisible = true
|
},
|
// 隐藏表单
|
closeForm() {
|
this.asyncVisible = false
|
this.resetForm('ruleForm')
|
this.setFormProps()
|
},
|
// 查询按钮列表信息
|
queryReset() {
|
this.queryInfo.pageNum = 1
|
this.queryInfo.pageSize = 10
|
this.getLists()
|
},
|
// 添加数据
|
addRow() {
|
this.submitMode = 'add'
|
this.showForm()
|
},
|
// 更新数据
|
async updateRow(row) {
|
this.submitMode = 'update'
|
this.showForm()
|
const segmentList = await this.getProjectBlocks(row.segmentId)
|
Object.keys(this.ruleForm).forEach(item => {
|
if (row.hasOwnProperty.call(row, item)) {
|
this.ruleForm[item] = row[item]
|
}
|
})
|
this.ruleForm.segmentId = row.segmentId
|
this.ruleForm.segmentList = segmentList
|
},
|
// 删除数据
|
deleteRow(row) {
|
this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$api.Engineer.deleteSegment({segmentId: row.segmentId}).then(res => {
|
if (res.statusMsg === 'ok') {
|
this.queryReset();
|
this.$message.success("删除成功！")
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}).catch(() => {
|
this.$message.warning("您已取消")
|
})
|
},
|
//获取项目标段
|
getProjectBlocks(id) {
|
return new Promise(resolve => {
|
this.$api.Engineer.detailsSegment({segmentId: id}).then(res => {
|
let outData = []
|
if (res.statusMsg === 'ok') {
|
outData.push(...res.data.segmentNeeds)
|
}
|
resolve(outData)
|
})
|
})
|
},
|
//通过不同的项目展示不同的标段需求
|
changeNeed(val) {
|
this.$api.Reinforce.searchProjectBears({proId: val}).then(res => {
|
if (res.statusMsg === 'ok') {
|
const segmentList = []
|
res.data.blokDtos.forEach(item => {
|
segmentList.push({
|
dictName: item.blockName,
|
needType: item.blockNum,
|
needNum: 0,
|
segmentId: ''
|
})
|
})
|
this.ruleForm.segmentList = segmentList
|
} else {
|
this.$message.warning('标段获取失败')
|
}
|
})
|
},
|
// 提交表单
|
onSubmit: throttle(function () {
|
this.$refs.ruleForm.validate(valid => {
|
if (!valid) return
|
const params = this.ruleForm
|
if (this.isUpdate) {
|
// 更新
|
this.$api.Engineer.updateSegment(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('更新成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
} else {
|
// 添加
|
this.$api.Engineer.insertSegment(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('添加成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}
|
})
|
}, 1000),
|
showDetail(row) {
|
let detailData = this.detail
|
!detailData.isRenderDetail && (detailData.isRenderDetail = true)
|
detailData.asyncVisible = true
|
detailData.rowId = row.segmentId
|
detailData.total = 0
|
detailData.tableData = []
|
detailData.infos = []
|
this.getDetailInfos(row.proId)
|
this.getDetailLists()
|
},
|
// 分页改变
|
pageChange() {
|
this.getLists();
|
},
|
// 已完成の分页改变
|
detailPageChange() {
|
this.getDetailLists();
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '../../style/layout-main.scss';
|
|
/deep/ {
|
&::-webkit-scrollbar {
|
width: 8px;
|
height: 8px;
|
}
|
|
&::-webkit-scrollbar-corner {
|
background-color: transparent;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px transparent;
|
background: #39B5FE;
|
}
|
|
&::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 10px;
|
background: rgba(76, 188, 254, .3);
|
}
|
}
|
|
.el-card {
|
margin-bottom: 20px;
|
border: none;
|
color: #fff;
|
background: rgba(9, 64, 101, 1);
|
|
.titles {
|
float: left;
|
width: 25%;
|
min-height: 36px;
|
padding-right: 6px;
|
margin-bottom: 6px;
|
line-height: 18px;
|
box-sizing: border-box;
|
}
|
|
span {
|
color: #39B5FE;
|
}
|
}
|
|
.section_needs {
|
position: relative;
|
color: #18F5F7;
|
padding: 20px 20px 10px 15px;
|
border-bottom: 1px solid #1949A3;
|
|
&::before {
|
position: absolute;
|
content: "";
|
width: 2px;
|
height: 20px;
|
background-color: #18F5F7;
|
top: 20px;
|
left: 5px;
|
}
|
}
|
|
.section_needs_content {
|
display: flex;
|
flex-wrap: wrap;
|
|
.needs_items {
|
max-width: 190px;
|
min-width: 142px;
|
padding: 15px;
|
display: flex;
|
|
.needs_text {
|
// width: 50px;
|
flex: none;
|
align-self: center;
|
text-align: center;
|
padding-right: 15px;
|
color: #E1E3E9;
|
}
|
|
.needs_num {
|
align-self: center;
|
}
|
}
|
}
|
</style>
|
