<template>
|
<!-- 工程项目管理 ==> 项目管理-->
|
<div class="main">
|
<!-- header-->
|
<div class="main_header" style="flex-direction: row-reverse;">
|
<div class="header_item" style="margin-right:0px">
|
<el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
|
</div>
|
</div>
|
<!-- content-->
|
<div class="main_content">
|
<el-table v-loading="loading" :data="dataList" height="100%">
|
<el-table-column align="center" label="序号" width="48">
|
<template #default="scope">
|
<span>{{ (queryInfo.pageNum - 1) * queryInfo.pageSize + scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="已完成（块）" align="center">
|
<template #default="{ row }">
|
<div style="cursor: pointer;" @click="showDetail(row)">{{ row.completedQuantity }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="proName" label="项目名称" align="center" width="160"></el-table-column>
|
<el-table-column label="尺寸" align="center" show-overflow-tooltip>
|
<template #default="{ row }">
|
<div>{{ showInfo(row.proSizes) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="配筋" align="center" show-overflow-tooltip>
|
<template #default="{ row }">
|
<div>{{ showInfo(row.proHas) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="转向" align="center" width="130">
|
<template #default="{ row }">
|
<div>{{ showInfo(row.proTurns) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="注浆孔" align="center" show-overflow-tooltip>
|
<template #default="{ row }">
|
<div>{{ showInfo(row.proGroutings) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="块号" align="center" show-overflow-tooltip>
|
<template #default="{ row }">
|
<div>{{ showInfo(row.proBloks) }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="createUnit" label="建设单位" align="center"></el-table-column>
|
<el-table-column prop="planUnit" label="设计单位" align="center"></el-table-column>
|
<el-table-column prop="supervisionUnit" label="监理单位" align="center"></el-table-column>
|
<el-table-column prop="constructionUnit" label="施工单位" align="center"></el-table-column>
|
<el-table-column prop="outsideDiameter" label="外径" align="center"></el-table-column>
|
<el-table-column prop="innerDiameter" label="内径" align="center"></el-table-column>
|
<el-table-column prop="thickness" label="厚度" align="center"></el-table-column>
|
<el-table-column prop="ringWidth" label="环宽" align="center"></el-table-column>
|
<el-table-column prop="concreteStrengthGrade" label="混凝土强度等级" align="center"></el-table-column>
|
<el-table-column prop="impermeabilityLevel" label="抗渗等级" align="center"></el-table-column>
|
<el-table-column prop="waterproofType" label="有无外弧面防水" align="center">
|
<template #default="{ row }">
|
<div>{{ row.waterproofType === 0 ? '有' : '无' }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="startDate" label="开始日期" align="center" width="86"></el-table-column>
|
<el-table-column prop="proTime" label="工期（月）" align="center"></el-table-column>
|
<el-table-column prop="planOutput" label="总需求（环）" align="center"></el-table-column>
|
<el-table-column label="操作" align="center" width="140">
|
<template #default="scope">
|
<el-button class="table_btn" size="mini" v-permission="'stop'" @click="deleteRow(scope.row)">停用</el-button>
|
<el-button class="delete_btn" size="mini" v-permission="'update'"
|
@click="updateRow(scope.$index)">修改</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!-- footer-->
|
<div class="main_footer">
|
<el-pagination background @current-change="changePageNum" @size-change="changePageSize"
|
:current-page="queryInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pageSize"
|
layout="total, sizes, prev, pager, next, jumper" :total="total">
|
</el-pagination>
|
</div>
|
<!-- dialog -->
|
<el-dialog class="prop_dialog" v-if="isRender" :title="dialogTitle" :visible.sync="asyncVisible" width="35%"
|
@close="closeForm">
|
<el-form ref="ruleForm" size="mini" :model="ruleForm" :rules="rules" label-width="auto" class="rule_form">
|
<el-form-item label="项目名称" prop="proName">
|
<el-input v-model="ruleForm.proName" clearable placeholder="请输入项目名称"></el-input>
|
</el-form-item>
|
<el-form-item label="项目简介:" prop="proDesc">
|
<el-input v-model="ruleForm.proDesc" type="textarea" :rows="3" clearable placeholder="请输入内容"></el-input>
|
</el-form-item>
|
<el-form-item label="尺寸(m):" prop="sizes">
|
<el-select v-model="ruleForm.sizes" placeholder="请选择尺寸" multiple>
|
<el-option v-for="item in optionsSize" :key="item.dictId" :label="item.dictName" :value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="配筋:" prop="hass">
|
<el-select v-model="ruleForm.hass" placeholder="请选择配筋" multiple>
|
<el-option v-for="item in optionsHass" :key="item.dictId" :label="item.dictName" :value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="转向:" prop="turns">
|
<el-select v-model="ruleForm.turns" placeholder="请选择转向" multiple>
|
<el-option v-for="item in optionsTurn" :key="item.dictId" :label="item.dictName" :value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="注浆孔:" prop="groutings">
|
<el-select v-model="ruleForm.groutings" placeholder="请选择注浆孔" multiple>
|
<el-option v-for="item in optionsGrout" :key="item.dictId" :label="item.dictName" :value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="块号:" prop="bloks">
|
<el-select v-model="ruleForm.bloks" placeholder="请选择块号" multiple>
|
<el-option v-for="item in optionsBlocks" :key="item.dictId" :label="item.dictName" :value="item.dictId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="建设单位:" prop="createUnit">
|
<el-input v-model="ruleForm.createUnit" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="设计单位:" prop="planUnit">
|
<el-input v-model="ruleForm.planUnit" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="监理单位:" prop="supervisionUnit">
|
<el-input v-model="ruleForm.supervisionUnit" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="施工单位:" prop="constructionUnit">
|
<el-input v-model="ruleForm.constructionUnit" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="外径:" prop="outsideDiameter">
|
<el-input v-model="ruleForm.outsideDiameter" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="内径:" prop="innerDiameter">
|
<el-input v-model="ruleForm.innerDiameter" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="厚度:" prop="thickness">
|
<el-input v-model="ruleForm.thickness" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="环宽:" prop="ringWidth">
|
<el-input v-model="ruleForm.ringWidth" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="混凝土强度等级:" prop="concreteStrengthGrade">
|
<el-input v-model="ruleForm.concreteStrengthGrade" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="抗渗等级:" prop="impermeabilityLevel">
|
<el-input v-model="ruleForm.impermeabilityLevel" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="有无外弧面防水:" prop="waterproofType">
|
<el-radio-group v-model="ruleForm.waterproofType">
|
<el-radio :label="0">有</el-radio>
|
<el-radio :label="1">无</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="开始日期：" prop="startDate">
|
<el-date-picker v-model="ruleForm.startDate" type="date" style="width:100%" value-format="yyyy-MM-dd"
|
placeholder="请选择开始日期">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="工期(月):" prop="proTime">
|
<el-input v-model="ruleForm.proTime" type="number" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="总需求(环):" prop="planOutput">
|
<el-input v-model="ruleForm.planOutput" type="number" clearable placeholder="请输入"></el-input>
|
</el-form-item>
|
</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="800px">
|
<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="pageChange">
|
</cpnTable>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {throttle} from '../../plugins/public'; // 导入节流、动态切换组件尺寸方法
|
import cpnTable from '@/components/element/Table'
|
export default {
|
data() {
|
return {
|
isRender: false,
|
loading: false,
|
submitMode: '', // add update
|
asyncVisible: false, // 添加 修改对话框
|
total: 0,
|
queryInfo: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
dataList: [],
|
ruleForm: {}, // 表单数据 {}
|
rules: {
|
proName: [{required: true, message: '请输入', trigger: 'blur'}],
|
proDesc: [{required: true, message: '请输入', trigger: 'blur'}],
|
sizes: [{required: true, message: '请选择', trigger: 'blur'}],
|
hass: [{required: true, message: '请选择', trigger: 'blur'}],
|
turns: [{required: true, message: '请选择', trigger: 'blur'}],
|
groutings: [{required: true, message: '请选择', trigger: 'blur'}],
|
bloks: [{required: true, message: '请选择', trigger: 'blur'}],
|
createUnit: [{required: true, message: '请输入', trigger: 'blur'}],
|
planUnit: [{required: true, message: '请输入', trigger: 'blur'}],
|
supervisionUnit: [{required: true, message: '请输入', trigger: 'blur'}],
|
constructionUnit: [{required: true, message: '请输入', trigger: 'blur'}],
|
outsideDiameter: [{required: true, message: '请输入', trigger: 'blur'}],
|
innerDiameter: [{required: true, message: '请输入', trigger: 'blur'}],
|
thickness: [{required: true, message: '请输入', trigger: 'blur'}],
|
ringWidth: [{required: true, message: '请输入', trigger: 'blur'}],
|
concreteStrengthGrade: [{required: true, message: '请输入', trigger: 'blur'}],
|
impermeabilityLevel: [{required: true, message: '请输入', trigger: 'blur'}],
|
waterproofType: [{required: true, message: '请选择', trigger: 'blur'}],
|
},
|
optionsSize: [],//尺寸下拉框
|
optionsHass: [],//配筋下拉框
|
optionsTurn: [],//转向下拉框
|
optionsGrout: [],//注浆孔下拉框
|
optionsBlocks: [],//块号下拉框
|
detail: {
|
rowId: '',
|
isRenderDetail: false,
|
asyncVisible: false,
|
pageNum: 1,
|
pageSize: 10,
|
total: 0,
|
tableData: [],
|
tableColumns: [],
|
}
|
}
|
},
|
components: {
|
cpnTable
|
},
|
computed: {
|
dialogTitle() {
|
return this.submitMode === 'update' ? '修改项目' : '新增项目'
|
},
|
isUpdate() {
|
return this.submitMode === 'update'
|
},
|
},
|
created() {
|
this.setFormProps()
|
this.getAllTypes()
|
this.getLists()
|
},
|
methods: {
|
getLists() {
|
let params = this.queryInfo
|
this.loading = true
|
this.$api.Engineer.searchProjects(params).then(res => {
|
this.loading = false
|
if (res.statusMsg === 'ok') {
|
this.total = res.data.total
|
this.dataList = res.data.list
|
}
|
})
|
},
|
//获取尺寸配筋转向等信息
|
getAllTypes() {
|
let params = {pageNum: 1, pageSize: 100000000}
|
this.$api.Dictionary.searchDictionary(params).then(res => {
|
if (res.statusMsg === 'ok') {
|
res.data.list.forEach(item => {
|
switch (item.dictType) {
|
case '1':
|
this.optionsSize.push(item)
|
break
|
case '2':
|
this.optionsHass.push(item)
|
break
|
case '3':
|
this.optionsTurn.push(item)
|
break
|
case '4':
|
this.optionsGrout.push(item)
|
break
|
case '5':
|
this.optionsBlocks.push(item)
|
break
|
}
|
})
|
}
|
})
|
},
|
setFormProps(options = {}) {
|
let _form = {
|
proName: '', // 项目名称
|
proDesc: '', // 项目描述
|
sizes: '', // 尺寸
|
hass: '', // 配筋
|
turns: '', // 转向
|
groutings: '', // 注浆孔
|
bloks: '', // 块号
|
createUnit: '', // 建设单位
|
planUnit: '', // 设计单位
|
supervisionUnit: '', // 监理单位
|
constructionUnit: '', // 施工单位
|
outsideDiameter: '', // 外径
|
innerDiameter: '', // 内径
|
thickness: '', // 厚度
|
ringWidth: '', // 环宽
|
concreteStrengthGrade: '', // 混凝土强度等级
|
impermeabilityLevel: '', // 抗渗等级
|
waterproofType: '', // 有无外弧面防水
|
startDate: '', // 开始日期
|
proTime: '', // 工期
|
planOutput: '', // 总需求
|
}
|
this.ruleForm = Object.keys(options).length ? options : _form
|
},
|
//table上展示尺寸等信息
|
showInfo(val) {
|
let str = ''
|
let str1 = ''
|
if (val.length === 1) {
|
str = val[0].dictName
|
} else {
|
val.forEach(item => {
|
str += item.dictName + ','
|
})
|
str1 = str.lastIndexOf(',')
|
str = str.substring(0, str1)
|
}
|
return str
|
},
|
resetForm(formName) {
|
this.$refs[formName].resetFields()
|
},
|
showForm() {
|
!this.isRender && (this.isRender = true)
|
this.asyncVisible = true
|
},
|
closeForm() {
|
this.asyncVisible = false
|
this.resetForm('ruleForm')
|
this.setFormProps()
|
},
|
addRow() {
|
this.submitMode = 'add'
|
this.showForm()
|
},
|
updateRow(rowIndex) {
|
const rowData = this.dataList[rowIndex]
|
// 以下字段不能直接使用,需要处理后赋值
|
// a:[b,c] a:ruleForm的key b:rowData的key c:rowData[key]数据里的key
|
const formFormatKeys = {
|
sizes: ['proSizes', 'sizes'],
|
hass: ['proHas', 'hasSteel'],
|
turns: ['proTurns', 'turn'],
|
groutings: ['proGroutings', 'groutingHoles'],
|
bloks: ['proBloks', 'blockNum'],
|
}
|
Object.keys(formFormatKeys).forEach(item => {
|
const targetKey = formFormatKeys[item].shift()
|
const targetValKey = formFormatKeys[item].pop()
|
if (Array.isArray(rowData[targetKey])) {
|
rowData[targetKey].forEach(val => {
|
formFormatKeys[item].push(val[targetValKey])
|
})
|
} else {
|
formFormatKeys[item] = rowData[targetKey]
|
}
|
})
|
Object.keys(this.ruleForm).forEach(item => {
|
if (rowData.hasOwnProperty.call(rowData, item)) {
|
this.ruleForm[item] = rowData[item]
|
} else if (formFormatKeys[item]) {
|
this.ruleForm[item] = formFormatKeys[item]
|
}
|
})
|
this.ruleForm.proId = rowData.proId
|
this.submitMode = 'update'
|
this.showForm()
|
},
|
deleteRow(row) {
|
this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
this.$api.Engineer.deleteProjects({proId: row.proId})
|
.then(res => {
|
if (res.statusMsg === 'ok') {
|
this.getLists()
|
this.$message.success("删除成功！")
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}).catch(() => {
|
this.$message.warning("您已取消")
|
})
|
},
|
onSubmit: throttle(function (formName) {
|
this.$refs[formName].validate((valid) => {
|
if (!valid) return false
|
const params = this.ruleForm
|
if (this.isUpdate) {
|
// 更新
|
this.$api.Engineer.updateProjects(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists();
|
this.$message.success('更新成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
} else {
|
// 添加
|
this.$api.Engineer.insertProjects(params).then((res) => {
|
if (res.statusMsg === 'ok') {
|
this.closeForm()
|
this.getLists()
|
this.$message.success('添加成功！')
|
} else {
|
this.$message.warning(res.statusMsg)
|
}
|
})
|
}
|
})
|
}, 1000),
|
changePageNum(page) {
|
this.queryInfo.pageNum = page;
|
this.getLists();
|
},
|
changePageSize(size) {
|
this.queryInfo.pageSize = size
|
this.getLists()
|
},
|
showDetail(row) {
|
let detailData = this.detail
|
!detailData.isRenderDetail && (detailData.isRenderDetail = true)
|
detailData.asyncVisible = true
|
detailData.rowId = row.proId
|
detailData.total = 0
|
detailData.tableData = []
|
this.getDetailLists()
|
},
|
getDetailLists() {
|
let detailData = this.detail
|
this.$api.DuctpiecePLM.searchDuctpiecePLMList({
|
proId: detailData.rowId,
|
pageNum: detailData.pageNum,
|
pageSize: detailData.pageSize
|
}).then(res => {
|
if (res.success) {
|
if (!detailData.tableColumns.length) {
|
detailData.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"},
|
]
|
}
|
detailData.total = res.data.total
|
detailData.tableData = res.data.list
|
}
|
})
|
},
|
pageChange() {
|
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);
|
}
|
}
|
</style>
|
