549 lines
16 KiB
Vue
549 lines
16 KiB
Vue
<!-- 存梁区管理模块 -->
|
|
<template>
|
|
<div class="plan-manage">
|
|
<div class="plan-content">
|
|
<div class="left-plan">
|
|
<div style="padding: 20px 0 0 20px">
|
|
<p class="pageTitle">存梁区列表</p>
|
|
</div>
|
|
<div class="bridge-section">
|
|
<vue-scroll>
|
|
<div class="section-list">
|
|
<div
|
|
class="section-item"
|
|
v-for="(item, index) in saveBeamList"
|
|
:key="item.id"
|
|
:class="{ active: activeBuildIndex == index }"
|
|
@click="changeBuildFn(item, index)"
|
|
>
|
|
<div class="bridge-title">{{ item.saveBeamDistrictName }}</div>
|
|
<div class="bridge-tool">
|
|
<img @click.stop="editBuildFn(item)" src="@/assets/images/icon-edit.png" style="margin-right:16px" class="icon" />
|
|
<img @click.stop="deleteBuildFn(item)" src="@/assets/images/icon-delete.png" class="icon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
<div class="add-section" @click="handle">
|
|
新增存梁区
|
|
</div>
|
|
</div>
|
|
<div class="add-icon"></div>
|
|
</div>
|
|
<div class="right-plan">
|
|
<div class="add-btn" @click="pedestalAdd">
|
|
<el-button type="primary" size="medium">新增存梁台座</el-button>
|
|
</div>
|
|
<div class="qr-code-list">
|
|
<div class="list-item" v-for="item in savePedestalList" :key="item.id">
|
|
<div class="code-icon">
|
|
<el-image
|
|
style="
|
|
width: 60px;
|
|
height: 60px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
"
|
|
fit="cover"
|
|
:src="$store.state.FILEURL + item.qrCode"
|
|
:preview-src-list="[$store.state.FILEURL + item.qrCode]"
|
|
/>
|
|
<!-- <img style="width: 60px; height: 60px" src="@/assets/images/smartBeam/codeIcon.jpg" alt="" /> -->
|
|
</div>
|
|
<div class="code-title" :title="item.saveBeamPedestalSn">{{ item.saveBeamPedestalSn }}</div>
|
|
<div class="code-tool">
|
|
<img @click.stop="editPedestal(item)" src="@/assets/images/icon-edit.png" style="margin-right:16px" class="icon" />
|
|
<img @click.stop="deletePedestal(item)" src="@/assets/images/icon-delete.png" class="icon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="placeholderBox" v-if="savePedestalList == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新增存梁区 -->
|
|
<el-dialog :modal-append-to-body="false" :title="titleArea" :visible.sync="dialogShow" width="667px" @close="closeEvent">
|
|
<div class="dialog_content">
|
|
<el-form size="medium" :model="addEditForm" ref="addEditForm" :rules="addEditRules" label-width="150px" class="dialogFormBox">
|
|
<el-form-item label="存梁区名称：" prop="saveBeamDistrictName">
|
|
<el-input :disabled="titleArea == '详情'" v-model="addEditForm.saveBeamDistrictName" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<div class="dialog-footer">
|
|
<el-button class="cancleBtn" @click="closeEvent" icon="el-icon-circle-close" size="medium">取消</el-button>
|
|
<el-button type="primary" icon="el-icon-circle-check" @click="submitDistrict" size="medium">确认</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
<!-- *************************** 新增存梁台座 ************************************* -->
|
|
<el-dialog :modal-append-to-body="false" :title="titlePedestal" :visible.sync="dialogPedestalShow" width="667px" @close="closePedestal">
|
|
<div class="dialog_content">
|
|
<el-form size="medium" :model="pedestalForm" ref="pedestalForm" :rules="pedestalRules" label-width="150px" class="dialogFormBox">
|
|
<el-form-item label="存梁台座编号：" prop="saveBeamPedestalSn">
|
|
<el-input v-model="pedestalForm.saveBeamPedestalSn" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
|
|
<div class="dialog-footer">
|
|
<el-button class="cancleBtn" @click="closePedestal" icon="el-icon-circle-close" size="medium">取消</el-button>
|
|
<el-button type="primary" icon="el-icon-circle-check" @click="submitPedestal" size="medium">确认</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
saveBeamDistrictAdd,
|
|
saveBeamDistrictDelete,
|
|
saveBeamDistrictEdit,
|
|
saveBeamDistrictList,
|
|
saveBeamPedestalAdd,
|
|
saveBeamPedestalEdit,
|
|
saveBeamPedestalDelete,
|
|
saveBeamPedestalPage,
|
|
saveBeamPedestalList
|
|
} from '@/assets/js/api/smartBeamField.js'
|
|
import beamDetail from '@/views/projectFront/smartBeamField/beam-detail.vue'
|
|
export default {
|
|
components: {
|
|
beamDetail
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
data() {
|
|
return {
|
|
beamDistrictId: '', //存梁区ID
|
|
dialogPedestalShow: false,
|
|
titlePedestal: '',
|
|
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
|
srcList: [
|
|
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
|
|
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
|
|
],
|
|
showBeamDetail: false,
|
|
dateSelect: '',
|
|
beamTypeOption: [
|
|
{
|
|
label: '梁型1',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '梁型2',
|
|
value: 2
|
|
},
|
|
{
|
|
label: '梁型3',
|
|
value: 3
|
|
}
|
|
],
|
|
nameOptions: [
|
|
{
|
|
label: '合格',
|
|
value: 1
|
|
},
|
|
{
|
|
label: '不合格',
|
|
value: 2
|
|
},
|
|
{
|
|
label: '未判定',
|
|
value: 3
|
|
}
|
|
],
|
|
saveBeamList: [],
|
|
savePedestalList: [],
|
|
input1: '', // 桥段
|
|
currentBridgeInfo: '', //桥段item
|
|
activeBuildIndex: '', //当前选中桥段
|
|
|
|
// 梁列表相关 *************
|
|
titleArea: '',
|
|
dialogShow: false,
|
|
pagInfo: {
|
|
pageNo: 1, //页数
|
|
pageSize: 10, //条数
|
|
total: 0 //总条数
|
|
},
|
|
List: [],
|
|
addEditForm: {
|
|
saveBeamDistrictName: ''
|
|
},
|
|
pedestalForm: {
|
|
saveBeamPedestalSn: '',
|
|
qrCodeUrl: '/pages/projectEnd/smartBeamField/saveBeamRecord'
|
|
},
|
|
addEditRules: {
|
|
saveBeamDistrictName: [
|
|
{
|
|
required: true,
|
|
message: '必填',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
},
|
|
pedestalRules: {
|
|
saveBeamPedestalSn: [
|
|
{
|
|
required: true,
|
|
message: '必填',
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
},
|
|
searchForm: {
|
|
institutionName: ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
// 打开新增存梁区弹窗
|
|
handle() {
|
|
console.log('打开弹窗')
|
|
this.dialogShow = true
|
|
this.titleArea = '新增存梁区'
|
|
},
|
|
changeBuildFn(item, index) {
|
|
this.activeBuildIndex = index
|
|
this.currentBridgeInfo = item
|
|
this.beamDistrictId = item.id
|
|
this.getPedestalList(item.id)
|
|
},
|
|
// 编辑存梁区弹窗
|
|
editBuildFn(item) {
|
|
this.dialogShow = true
|
|
this.titleArea = '编辑存梁区'
|
|
this.addEditForm = item
|
|
console.log('编辑存梁区', item)
|
|
},
|
|
|
|
// 存梁区相关 **************************
|
|
getList() {
|
|
saveBeamDistrictList({
|
|
projectSn: this.$store.state.projectSn
|
|
}).then(res => {
|
|
if (res.result.length > 0) {
|
|
this.saveBeamList = res.result
|
|
this.beamDistrictId = res.result[0].id
|
|
this.getPedestalList(res.result[0].id)
|
|
}
|
|
})
|
|
},
|
|
submitDistrict() {
|
|
let params = JSON.parse(JSON.stringify(this.addEditForm))
|
|
params.projectSn = this.$store.state.projectSn
|
|
this.$refs.addEditForm.validate(valid => {
|
|
if (valid) {
|
|
if (this.titleArea == '新增存梁区') {
|
|
saveBeamDistrictAdd(params).then(result => {
|
|
if (result.success) {
|
|
this.$message.success(result.message)
|
|
this.getList()
|
|
}
|
|
})
|
|
} else if (this.titleArea === '编辑存梁区') {
|
|
saveBeamDistrictEdit(params).then(result => {
|
|
if (result.success) {
|
|
this.$message.success(result.message)
|
|
this.getList()
|
|
}
|
|
})
|
|
}
|
|
this.dialogShow = false
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
deleteBuildFn(obj) {
|
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
saveBeamDistrictDelete({ id: obj.id }).then(res => {
|
|
if (res.success) {
|
|
this.getList()
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.message
|
|
})
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
},
|
|
|
|
closeEvent() {
|
|
this.dialogShow = false
|
|
this.addEditForm = {}
|
|
this.$nextTick(() => {
|
|
this.$refs.addEditForm.clearValidate()
|
|
})
|
|
},
|
|
SizeChange(val) {
|
|
this.pagInfo.pageSize = val
|
|
this.getList()
|
|
},
|
|
CurrentChange(val) {
|
|
this.pagInfo.pageNo = val
|
|
this.getList()
|
|
},
|
|
refresh() {
|
|
this.searchForm = {}
|
|
this.pagInfo.pageNo = 1 //页数
|
|
this.pagInfo.pageSize = 10 //条数
|
|
this.getList()
|
|
},
|
|
|
|
// ****************** 存梁台座 *******************
|
|
getPedestalList(detailId) {
|
|
saveBeamPedestalList({
|
|
projectSn: this.$store.state.projectSn,
|
|
smartBeamFieldSaveBeamDistrictId: detailId
|
|
}).then(res => {
|
|
if (res.success) {
|
|
console.log('存梁台座', res)
|
|
this.savePedestalList = res.result
|
|
}
|
|
})
|
|
},
|
|
|
|
closePedestal() {
|
|
this.dialogPedestalShow = false
|
|
this.pedestalForm = {
|
|
saveBeamPedestalSn: '',
|
|
qrCodeUrl: '存梁台座url'
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs.pedestalForm.clearValidate()
|
|
})
|
|
},
|
|
pedestalAdd() {
|
|
this.titlePedestal = '新增存梁台座'
|
|
this.dialogPedestalShow = true
|
|
},
|
|
|
|
editPedestal(obj) {
|
|
this.titlePedestal = '编辑存梁台座'
|
|
this.dialogPedestalShow = true
|
|
this.pedestalForm = JSON.parse(JSON.stringify(obj))
|
|
},
|
|
submitPedestal() {
|
|
let params = JSON.parse(JSON.stringify(this.pedestalForm))
|
|
params.projectSn = this.$store.state.projectSn
|
|
params.smartBeamFieldSaveBeamDistrictId = this.beamDistrictId
|
|
this.$refs.pedestalForm.validate(valid => {
|
|
if (valid) {
|
|
if (this.titlePedestal == '新增存梁台座') {
|
|
saveBeamPedestalAdd(params).then(result => {
|
|
if (result.success) {
|
|
this.$message.success(result.message)
|
|
this.getPedestalList(this.beamDistrictId)
|
|
}
|
|
})
|
|
} else if (this.titlePedestal === '编辑存梁台座') {
|
|
saveBeamPedestalEdit(params).then(result => {
|
|
if (result.success) {
|
|
this.$message.success(result.message)
|
|
this.getPedestalList(this.beamDistrictId)
|
|
}
|
|
})
|
|
}
|
|
this.dialogPedestalShow = false
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
deletePedestal(obj) {
|
|
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
saveBeamPedestalDelete({ id: obj.id }).then(res => {
|
|
if (res.success) {
|
|
this.getPedestalList(this.beamDistrictId)
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.message
|
|
})
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.plan-manage {
|
|
width: 100%;
|
|
height: 100%;
|
|
.plan-content {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
.left-plan {
|
|
width: 17%;
|
|
margin-right: 1%;
|
|
background: #fff;
|
|
position: relative;
|
|
.input-box {
|
|
display: flex;
|
|
margin: 20px 0 0px 20px;
|
|
.plan-search {
|
|
width: 80%;
|
|
margin-right: 5%;
|
|
}
|
|
.add-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
cursor: pointer;
|
|
border: 1px solid #c7d4f8;
|
|
img {
|
|
width: 75%;
|
|
height: 75%;
|
|
}
|
|
}
|
|
}
|
|
.bridge-section {
|
|
width: 100%;
|
|
height: 85%;
|
|
margin-top: 6%;
|
|
.add-section {
|
|
position: absolute;
|
|
bottom: 0%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
width: 100%;
|
|
height: 40px;
|
|
color: #5181f6;
|
|
border-top: 1px solid #c7d4f8;
|
|
}
|
|
.section-list {
|
|
width: 100%;
|
|
.section-item {
|
|
padding: 10px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
&.active {
|
|
background: #c7d4f8;
|
|
color: #5181f6;
|
|
border-left: 4px solid #5181f6;
|
|
.bridge-title {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
.bridge-title {
|
|
font-size: 14px;
|
|
margin-left: 4px;
|
|
}
|
|
.bridge-tool {
|
|
display: flex;
|
|
.icon {
|
|
width: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-plan {
|
|
width: 82%;
|
|
background: #fff;
|
|
position: relative;
|
|
.add-btn {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 20px;
|
|
}
|
|
.qr-code-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 60px;
|
|
.list-item {
|
|
position: relative;
|
|
width: 149px;
|
|
height: 80px;
|
|
border-radius: 10px;
|
|
margin-left: 20px;
|
|
margin-top: 20px;
|
|
// border: 1px solid #b4c5f2;
|
|
box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
|
|
.code-icon {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
.code-title {
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 60px;
|
|
font-size: 14px;
|
|
top: 12px;
|
|
right: 12px;
|
|
}
|
|
.code-tool {
|
|
position: absolute;
|
|
right: 15px;
|
|
bottom: 10px;
|
|
.icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.table-btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.beam-detail {
|
|
.return-list {
|
|
display: flex;
|
|
}
|
|
}
|
|
</style>
|