428 lines
14 KiB
Vue
428 lines
14 KiB
Vue
<!-- 生产线管理 -->
|
|
<template>
|
|
<div class="fullHeight">
|
|
<div class="searchBox whiteBlock">
|
|
<el-form :inline="true" size="medium" :model="searchForm" ref="searchForm">
|
|
<el-form-item label="生产线名称">
|
|
<el-input placeholder="请输入" v-model="searchForm.productionLineName"></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="日期">
|
|
<el-date-picker
|
|
v-model="daterange"
|
|
@change="changeDate"
|
|
type="daterange"
|
|
:range-separator="$t('message.energyManage.to')"
|
|
:start-placeholder="$t('message.energyManage.start')"
|
|
:end-placeholder="$t('message.energyManage.end')"
|
|
value-format="yyyy-MM-dd"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item> -->
|
|
<el-button type="primary" size="medium" plain @click="getPointList">查询</el-button>
|
|
<el-button type="warning" size="medium" plain @click="refresh">刷新</el-button>
|
|
<el-button type="primary" size="medium" @click="toAdd">新增</el-button>
|
|
</el-form>
|
|
</div>
|
|
<div class="table_wrap whiteBlock">
|
|
<el-table class="tables" :data="tableData">
|
|
<el-table-column type="index" label="序号" align="center" width="200"></el-table-column>
|
|
<el-table-column prop="productionLineName" label="生产线名称" align="center"></el-table-column>
|
|
<el-table-column prop="createDate" label="创建时间" align="center"></el-table-column>
|
|
|
|
<el-table-column :label="$t('message.personnelPosition.beaconManage.table.operation')" align="center" width="400">
|
|
<template slot-scope="scope">
|
|
<div style="display: flex; justify-content: center">
|
|
<div class="operationText" @click="deilBtn(scope.row)" style="margin-right:30px">
|
|
<i class="el-icon-tickets" style="color: #8dacfa; font-size: 16px; margin-right: 2px"></i>
|
|
<span>详情</span>
|
|
</div>
|
|
<div class="operationText" @click="editBtn(scope.row)" style="margin-right:30px">
|
|
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
|
|
<span>编辑</span>
|
|
</div>
|
|
<div @click="toDelete(scope.row)" class="operationText">
|
|
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
|
|
<span>删除</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
class="pagerBox"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="pageNo"
|
|
:page-sizes="$store.state.PAGESIZRS"
|
|
:page-size="pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="Number(total)"
|
|
background
|
|
></el-pagination>
|
|
</div>
|
|
<!-- 新增生产线 -->
|
|
<el-dialog :modal-append-to-body="false" :title="cardDialogTitle" :visible.sync="cardDialog" width="777px" @close="close" top="50px">
|
|
<div>
|
|
<el-form size="medium" :model="cardForm" ref="cardForm" :rules="cardFormRules" label-width="150px" class="dialogFormBox">
|
|
<el-form-item label="生产线名称" prop="productionLineName">
|
|
<el-input
|
|
:disabled="cardDialogTitle == '详情'"
|
|
v-model="cardForm.productionLineName"
|
|
:placeholder="isAdding ? '请输入' : ''"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="dialog_content">
|
|
<div class="process-list">
|
|
<div v-if="!showProductSort" style="height:600px">
|
|
<el-table class="tables" ref="multipleTable" :data="pedestalList" key="table_1" @selection-change="handleSelectionChange">
|
|
<el-table-column type="selection" width="55" align="center" :selectable="isRowDisabled">
|
|
</el-table-column>
|
|
<el-table-column prop="pedestalTypeName" label="台座类型" align="center"></el-table-column>
|
|
<el-table-column prop="pedestalProcess" label="台座工序" align="center"></el-table-column>
|
|
<el-table-column prop="makeBeamPedestalSn" label="台座编号/名称" align="center"></el-table-column>
|
|
<el-table-column prop="bindByProductionLine" label="是否被生产线绑定" align="center">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.bindByProductionLine">
|
|
是
|
|
</div>
|
|
<div v-else>
|
|
否
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
<div v-if="showProductSort">
|
|
<el-table class="tables" :data="sortProductList" key="table_2">
|
|
<el-table-column prop="pedestalTypeName" label="台座类型" align="center"></el-table-column>
|
|
<el-table-column prop="pedestalProcess" label="台座工序" align="center"></el-table-column>
|
|
<el-table-column prop="makeBeamPedestalSn" label="台座编号/名称" align="center"></el-table-column>
|
|
<!-- <el-table-column prop="bindByProductionLine" label="是否被生产线绑定" align="center"></el-table-column> -->
|
|
<el-table-column prop="processSort" label="工序排序" align="center">
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.processSort"
|
|
:disabled="cardDialogTitle == '详情'"
|
|
type="number"
|
|
placeholder="请输入排序"
|
|
:min="0"
|
|
style="width: 100px !important"
|
|
></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="dialog-footer" v-if="cardDialogTitle != '详情'">
|
|
<el-button class="cancleBtn" @click="closeEvent" icon="el-icon-circle-close" size="medium">取消</el-button>
|
|
<el-button v-if="!showProductSort" type="primary" icon="el-icon-circle-check" @click="dialogNextTick" size="medium"
|
|
>确认</el-button
|
|
>
|
|
<el-button v-if="showProductSort" type="primary" icon="el-icon-circle-check" @click="saveProductLine" size="medium"
|
|
>确认</el-button
|
|
>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
fieldProductionLinePage,
|
|
fieldProductionLineAdd,
|
|
fieldProductionLineDelete,
|
|
fieldProductionLineEdit,
|
|
makeBeamPedestalList,
|
|
fieldProductionLineDetail
|
|
} from '@/assets/js/api/smartBeamField.js'
|
|
// import QRCode from "qrcodejs2";
|
|
export default {
|
|
data() {
|
|
return {
|
|
sortProductList: [],
|
|
showProductSort: false,
|
|
pedestalList: [],
|
|
searchForm: {
|
|
productionLineName: ''
|
|
},
|
|
cardDialogTitle: '',
|
|
tableData: [],
|
|
total: 0,
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
cardForm: {
|
|
productionLineName: '',
|
|
productionLineMakeBeamPedestalList: []
|
|
},
|
|
qrCode: '',
|
|
cardDialog: false,
|
|
projectSn: '',
|
|
cardFormRules: {
|
|
productionLineName: [{ required: true, message: '请输入生产线名称', trigger: 'blur' }]
|
|
// addr: [
|
|
// { required: true, message: "请选择区域", trigger: "blur" },
|
|
// ],
|
|
},
|
|
frequencyType: ['次', '次/日', '次/周', '次/月', '次/年'],
|
|
mapOperateType: 1,
|
|
accountList: [], //检查人员列表
|
|
options: [30, 50, 100, 200, 300],
|
|
map: null,
|
|
locationList: [],
|
|
formData: [], // 存储动态表单数据
|
|
isAdding: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.projectSn = this.$store.state.projectSn
|
|
this.getProcessOption()
|
|
this.getPointList()
|
|
},
|
|
methods: {
|
|
dialogNextTick() {
|
|
console.log('下一步')
|
|
this.$refs.cardForm.validate(valid => {
|
|
if (valid) {
|
|
if (this.sortProductList.length == 0) {
|
|
this.$message.warning("请选择制梁台座")
|
|
return
|
|
}
|
|
this.showProductSort = true
|
|
}
|
|
})
|
|
},
|
|
handleSelectionChange(e) {
|
|
this.sortProductList = e
|
|
console.log(e, '选中')
|
|
},
|
|
|
|
// 判断多选是否可选
|
|
isRowDisabled(e) {
|
|
// console.log("当前行",e)
|
|
let allowChoice = !e.bindByProductionLine
|
|
return allowChoice
|
|
},
|
|
|
|
// 获取 生产线详情数据
|
|
getListDetail(id) {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
id: id
|
|
}
|
|
fieldProductionLineDetail(data).then(res => {
|
|
console.log('----生产线详情', res)
|
|
this.detailData = res.result
|
|
this.sortProductList = res.result.makeBeamPedestals.map(item => {
|
|
return {
|
|
...item,
|
|
smartBeamFieldMakeBeamPedestalId: item.id
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 获取制梁台座表格
|
|
getProcessOption() {
|
|
let data = {
|
|
projectSn: this.projectSn
|
|
}
|
|
makeBeamPedestalList(data).then(res => {
|
|
console.log('----制梁台座列表', res)
|
|
this.pedestalList = res.result.map(item => {
|
|
return {
|
|
...item,
|
|
smartBeamFieldMakeBeamPedestalId: item.id
|
|
}
|
|
})
|
|
})
|
|
},
|
|
|
|
//关键字查询查询
|
|
select(e) {
|
|
console.log('select', e)
|
|
this.placeSearch.setCity(e.poi.adcode)
|
|
this.placeSearch.search(e.poi.name)
|
|
},
|
|
//查看条数
|
|
handleSizeChange(val) {
|
|
this.pageSize = val
|
|
this.getPointList()
|
|
},
|
|
//查看页
|
|
handleCurrentChange(val) {
|
|
this.pageNo = val
|
|
this.getPointList()
|
|
},
|
|
// 查询
|
|
getPointList() {
|
|
let data = {
|
|
pageNo: this.pageNo,
|
|
pageSize: this.pageSize,
|
|
projectSn: this.projectSn,
|
|
bridgeName: this.searchForm.bridgeName
|
|
}
|
|
fieldProductionLinePage(data).then(res => {
|
|
console.log('----生产线列表', res)
|
|
this.tableData = res.result.records
|
|
this.total = res.result.total
|
|
})
|
|
},
|
|
// 刷新
|
|
toRefresh() {
|
|
this.getPointList()
|
|
},
|
|
//查看详情弹窗
|
|
deilBtn(obj) {
|
|
this.getListDetail(obj.id)
|
|
this.showProductSort = true
|
|
this.isAdding = false
|
|
this.cardDialogTitle = '详情'
|
|
this.cardDialog = true
|
|
this.cardForm = JSON.parse(JSON.stringify(obj))
|
|
},
|
|
// 查看编辑弹窗
|
|
editBtn(obj) {
|
|
this.getListDetail(obj.id)
|
|
this.showProductSort = true
|
|
console.log('编辑的信息', obj)
|
|
this.cardDialog = true
|
|
this.isAdding = true
|
|
this.cardForm = JSON.parse(JSON.stringify(obj))
|
|
this.cardDialogTitle = '编辑生产线'
|
|
},
|
|
// 新增弹窗
|
|
toAdd() {
|
|
this.cardDialog = true
|
|
this.isAdding = true
|
|
this.cardDialogTitle = '新建生产线'
|
|
},
|
|
// 删除
|
|
toDelete(val) {
|
|
// console.log('删除', val)
|
|
this.$confirm('此操作将永久删除该生产线, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
let data = {
|
|
id: val.id
|
|
}
|
|
fieldProductionLineDelete(data).then(res => {
|
|
if (res.success) {
|
|
this.getPointList()
|
|
this.$message({
|
|
type: 'success',
|
|
message: '删除成功!'
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.message
|
|
})
|
|
}
|
|
})
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消删除'
|
|
})
|
|
})
|
|
},
|
|
// 新增生产线
|
|
saveProductLine() {
|
|
console.log("新增生产线",this.sortProductList)
|
|
this.$refs.cardForm.validate(valid => {
|
|
if (valid) {
|
|
// 新增
|
|
let data = {
|
|
projectSn: this.$store.state.projectSn,
|
|
productionLineName: this.cardForm.productionLineName,
|
|
productionLineMakeBeamPedestalList: this.sortProductList
|
|
}
|
|
if (this.cardDialogTitle == '新建生产线') {
|
|
fieldProductionLineAdd(data).then(res => {
|
|
console.log('新增', res)
|
|
if (res.code == 200) {
|
|
this.$message.success('添加成功！')
|
|
|
|
this.getPointList()
|
|
}
|
|
})
|
|
} else if (this.cardDialogTitle == '编辑生产线') {
|
|
data.id = this.cardForm.id
|
|
fieldProductionLineEdit(data).then(res => {
|
|
if (res.success) {
|
|
this.$message.success(res.message)
|
|
this.getPointList()
|
|
}
|
|
})
|
|
}
|
|
this.cardDialog = false
|
|
}
|
|
})
|
|
},
|
|
|
|
close() {
|
|
this.sortProductList = []
|
|
this.cardForm = {}
|
|
this.showProductSort = false
|
|
// this.$refs.multipleTable.clearSelection()
|
|
this.$nextTick(() => {
|
|
this.$refs.cardForm.clearValidate()
|
|
})
|
|
},
|
|
//新增弹框取消
|
|
closeEvent() {
|
|
this.cardDialog = false
|
|
this.$refs.cardForm.resetFields()
|
|
this.cardForm.startTime = ''
|
|
this.cardForm.endTime = ''
|
|
},
|
|
refresh() {
|
|
this.searchForm = {}
|
|
this.getPointList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.download {
|
|
text-decoration: none;
|
|
color: blue;
|
|
}
|
|
.smallInput {
|
|
display: inline-block;
|
|
width: 148px !important;
|
|
/deep/.el-input__inner {
|
|
width: 148px;
|
|
}
|
|
/deep/.el-input {
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
::v-deep .el-input__inner {
|
|
height: 30px !important;
|
|
}
|
|
|
|
::v-deep .el-range-editor--medium .el-range__icon,
|
|
.el-range-editor--medium .el-range__close-icon {
|
|
line-height: 10px;
|
|
}
|
|
::v-deep .el-select__caret {
|
|
line-height: 36px;
|
|
}
|
|
|
|
.dialogFormBox {
|
|
width: 580px;
|
|
}
|
|
.addrTitle {
|
|
font-size: 16px;
|
|
line-height: 56px;
|
|
}
|
|
</style>
|