|
|
@ -16,88 +16,100 @@ |
|
|
|
</div> |
|
|
|
<!-- 右侧 --> |
|
|
|
<div class="content-right"> |
|
|
|
<button @click="test">测试</button> |
|
|
|
<!-- <button @click="test">测试</button> --> |
|
|
|
<!-- 密集架 --> |
|
|
|
<ul v-show="cnName==='密集架'"> |
|
|
|
<li v-for="(eItem) in childData" :key="eItem.id" class="box"> |
|
|
|
<ul v-if="cnName==='密集架'"> |
|
|
|
<li v-for="(eItem,index) in childData" :key="eItem.id" class="box"> |
|
|
|
<p class="case-name">盒名称:{{ eItem.caseName }}</p> |
|
|
|
<div class="frame-content head-container"> |
|
|
|
<div class="frame-item"> |
|
|
|
<span>区号</span> |
|
|
|
<el-input v-model="eItem.fieldNum" disabled type="number" class="filter-item" /> |
|
|
|
<el-input v-model="fieldNum" disabled type="number" class="filter-item" /> |
|
|
|
</div> |
|
|
|
<div class="frame-item item-line"> |
|
|
|
<span>列</span> |
|
|
|
<el-select v-model="eItem.colNum" class="filter-item" style="width: 86px;"> |
|
|
|
<el-select v-model="numArr[index].colNum" class="filter-item" style="width: 86px;" @change="selectChange(index)"> |
|
|
|
<el-option v-for="item in numOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="frame-item item-line"> |
|
|
|
<span>节</span> |
|
|
|
<el-select v-model="eItem.sectionNum" class="filter-item" style="width: 86px;"> |
|
|
|
<el-select v-model="numArr[index].sectionNum" class="filter-item" style="width: 86px;" @change="selectChange(index)"> |
|
|
|
<el-option v-for="item in numOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="frame-item item-line"> |
|
|
|
<span>层</span> |
|
|
|
<el-select v-model="eItem.levelNum" class="filter-item" style="width: 86px;"> |
|
|
|
<el-select v-model="numArr[index].levelNum" class="filter-item" style="width: 86px;" @change="selectChange(index)"> |
|
|
|
<el-option v-for="item in numOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="frame-item item-line"> |
|
|
|
<span>方向</span> |
|
|
|
<el-select v-model="eItem.direction" class="filter-item" style="width: 86px;"> |
|
|
|
<el-select v-model="numArr[index].direction" class="filter-item" style="width: 86px;" @change="selectChange(index)"> |
|
|
|
<el-option v-for="item in directionOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="frame-item state-btn"> |
|
|
|
<el-button v-show="true" type="primary" class="el-icon-refresh icon-style" /> |
|
|
|
<el-button v-show="false" type="success" style="background:#1AAF91;border:none" class="el-icon-check icon-style" /> |
|
|
|
<div v-show="btnChecked[index]===1" type="primary" class="el-icon-refresh icon-style show" /> |
|
|
|
<div v-show="btnChecked[index]===2" type="success" style="background:#1AAF91;border:none" class="el-icon-check icon-style show" /> |
|
|
|
<div v-show="btnChecked[index]===3" style="background:#F65163;border:none" class="el-icon-close icon-style show" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="success-msg"> |
|
|
|
<span class="el-icon-success" /> |
|
|
|
<span class="success-text">位置已核对成功,层位名称:{{ eItem.fieldNum }}区{{ eItem.colNum }}列{{ eItem.sectionNum }}节{{ eItem.levelNum }}层{{ eItem.direction }}</span> |
|
|
|
</p> |
|
|
|
<div> |
|
|
|
<p v-show="btnChecked[index]===2" class="success-msg"> |
|
|
|
<i class="iconfont icon-tishichenggong" /> |
|
|
|
<span class="success-text">位置已核对成功,层位名称:{{ fieldNum }}区{{ numArr[index].colNum }}列{{ numArr[index].sectionNum }}节{{ numArr[index].levelNum }}层{{ (numArr[index].direction==='1'? '左边':'')||(numArr[index].direction==='2'?'右边':'') }}</span> |
|
|
|
</p> |
|
|
|
<p v-show="btnChecked[index]===3" class="fail-msg"> |
|
|
|
<i class="iconfont icon-tishijinggao" /> |
|
|
|
<span>当前位置已被占用</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li style="text-align:center;padding:20px 0"><el-button type="primary" :disabled="!(btnChecked.every(item=>item===2))" class="btn-save" @click="handleSave">保存</el-button></li> |
|
|
|
</ul> |
|
|
|
<!-- 回转柜 --> |
|
|
|
<ul v-show="cnName==='回转柜'"> |
|
|
|
<li v-for="(eItem) in childData" :key="eItem.id" class="box"> |
|
|
|
<ul v-if="cnName==='回转柜'"> |
|
|
|
<li v-for="(eItem,index) in childData" :key="eItem.id" class="box"> |
|
|
|
<p class="case-name">盒名称:{{ eItem.caseName }}</p> |
|
|
|
<div class="frame-content head-container"> |
|
|
|
<div class="frame-item"> |
|
|
|
<span>柜号</span> |
|
|
|
<el-input v-model="eItem.cabinetNum" disabled type="number" class="filter-item" /> |
|
|
|
<el-input v-model="fieldNum" disabled type="number" class="filter-item" /> |
|
|
|
</div> |
|
|
|
<div class="frame-item item-line"> |
|
|
|
<span>层</span> |
|
|
|
<el-select v-model="eItem.cabLevel" class="filter-item" style="width: 86px;"> |
|
|
|
<el-select v-model="numArr[index].cabLevel" class="filter-item" style="width: 86px;" @change="selectChange(index)"> |
|
|
|
<el-option v-for="item in numOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="frame-item item-line"> |
|
|
|
<span>列</span> |
|
|
|
<el-select v-model="eItem.cabCol" class="filter-item" style="width: 86px;"> |
|
|
|
<el-select v-model="numArr[index].cabCol" class="filter-item" style="width: 86px;" @change="selectChange(index)"> |
|
|
|
<el-option v-for="item in numOptions" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<div class="state-btn" style="padding-right:32px;margin-bottom:14px"> |
|
|
|
<el-button v-show="true" type="primary" class="el-icon-refresh icon-style" /> |
|
|
|
<el-button v-show="false" type="success" style="background:#1AAF91;border:none" class="el-icon-check icon-style" /> |
|
|
|
<el-button v-show="false" type="success" style="background:#F65163;border:none" class="el-icon-close icon-style" /> |
|
|
|
<div v-show="btnChecked[index]===1" type="primary" class="el-icon-refresh icon-style show" /> |
|
|
|
<div v-show="btnChecked[index]===2" type="success" style="background:#1AAF91;border:none" class="el-icon-check icon-style show" /> |
|
|
|
<div v-show="btnChecked[index]===3" style="background:#F65163;border:none" class="el-icon-close icon-style show" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="success-msg"> |
|
|
|
<span class="el-icon-success" /> |
|
|
|
<span class="success-text">位置已核对成功,层位名称:{{ eItem.cabinetNum }}柜{{ eItem.cabLevel }}层{{ eItem.cabCol }}列</span> |
|
|
|
</p> |
|
|
|
<div> |
|
|
|
<p v-show="btnChecked[index]===2" class="success-msg"> |
|
|
|
<i class="iconfont icon-tishichenggong" /> |
|
|
|
<span class="success-text">位置已核对成功,层位名称:{{ fieldNum }}柜{{ numArr[index].cabLevel }}层{{ numArr[index].cabCol }}列</span> |
|
|
|
</p> |
|
|
|
<p v-show="btnChecked[index]===3" class="fail-msg"> |
|
|
|
<i class="iconfont icon-tishijinggao" /> |
|
|
|
<span>当前位置已被占用</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li style="text-align:center;padding:20px 0"><el-button type="primary" :disabled="!(btnChecked.every(item=>item===2))" class="btn-save" @click="handleSave">保存</el-button></li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
<!-- <div> |
|
|
|
回转柜 |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -106,15 +118,8 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { isOccupy } from '@/api/archivesManage/outInStorage' |
|
|
|
export default { |
|
|
|
// props: { |
|
|
|
// child: { |
|
|
|
// type: Array, |
|
|
|
// default: function() { |
|
|
|
// return [] |
|
|
|
// } |
|
|
|
// } |
|
|
|
// }, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
dialogVisible: false, |
|
|
@ -128,34 +133,83 @@ export default { |
|
|
|
{ cnName: '回转柜' } |
|
|
|
] |
|
|
|
}], |
|
|
|
// 密集架 |
|
|
|
fieldNum: 1, // 柜号 |
|
|
|
btnChecked: [], // 校验状态 |
|
|
|
numArr: [], // 选择器 值 |
|
|
|
numOptions: [ |
|
|
|
{ value: '1', label: '1' }, |
|
|
|
{ value: '2', label: '2' } |
|
|
|
], |
|
|
|
directionOptions: [ |
|
|
|
{ value: '左边', label: '左边' }, |
|
|
|
{ value: '右边', label: '右边' } |
|
|
|
{ value: '1', label: '左边' }, |
|
|
|
{ value: '2', label: '右边' } |
|
|
|
] |
|
|
|
// 回转柜 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// 密集架 |
|
|
|
|
|
|
|
}, |
|
|
|
// watch: { |
|
|
|
// child(newVal, oldVal) { |
|
|
|
// this.childData = newVal |
|
|
|
// } |
|
|
|
// }, |
|
|
|
methods: { |
|
|
|
// 选中设备 |
|
|
|
handleNodeClick(data) { |
|
|
|
this.cnName = data.cnName |
|
|
|
console.log(data) |
|
|
|
// 按钮状态 |
|
|
|
this.btnChecked = this.childArr(1) |
|
|
|
// 选择器 |
|
|
|
if (data.cnName === '密集架') { |
|
|
|
const obj = { colNum: '', sectionNum: '', levelNum: '', direction: '' } |
|
|
|
this.numArr = this.childArr(obj) |
|
|
|
} else if (data.cnName === '回转柜') { |
|
|
|
const obj = { cabCol: '', cabLevel: '' } |
|
|
|
this.numArr = this.childArr(obj) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 计算 |
|
|
|
childArr(str) { |
|
|
|
const arr = [] |
|
|
|
for (let i = 0; i < this.childData.length; i++) { |
|
|
|
arr.push(str) |
|
|
|
} |
|
|
|
return JSON.parse(JSON.stringify(arr)) |
|
|
|
}, |
|
|
|
test() { |
|
|
|
console.log(this.childData, '...........') |
|
|
|
console.log(this.numArr, '...........') |
|
|
|
}, |
|
|
|
// 校验 |
|
|
|
async selectChange(index) { |
|
|
|
const obj = this.numArr[index] |
|
|
|
let bool = 0 |
|
|
|
for (const key in obj) { // 校验是否全部选择 |
|
|
|
if (!obj[key]) { |
|
|
|
bool++ |
|
|
|
} |
|
|
|
} |
|
|
|
if (bool === 0) { |
|
|
|
const params = { |
|
|
|
// false |
|
|
|
// deviceId: '3734A977C269ABEF6E284C', |
|
|
|
// position: '1-5-6-2-1', |
|
|
|
deviceId: 'FA0B05E2728EA8129A9F15', |
|
|
|
position: '1-1-3-4-1', |
|
|
|
deviceType: '1' |
|
|
|
} |
|
|
|
const res = await isOccupy(params).then(res => { |
|
|
|
console.log(res, '--res') |
|
|
|
}) |
|
|
|
// 按钮变化 |
|
|
|
if (res) { |
|
|
|
this.btnChecked[index] = 2 |
|
|
|
} else { |
|
|
|
this.btnChecked[index] = 3 |
|
|
|
} |
|
|
|
} |
|
|
|
this.$forceUpdate() |
|
|
|
}, |
|
|
|
// 保存 |
|
|
|
handleSave() { |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
@ -246,14 +300,17 @@ export default { |
|
|
|
left: -20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-button{ |
|
|
|
.show{ |
|
|
|
background-color: #339CFF; |
|
|
|
padding: 0; |
|
|
|
width: 36px; |
|
|
|
height: 36px; |
|
|
|
line-height: 36px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
::v-deep .icon-style:before{ |
|
|
|
font-size: 18px; |
|
|
|
font-size: 24px; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.state-btn{ |
|
|
|
display: flex; |
|
|
@ -264,18 +321,32 @@ export default { |
|
|
|
::v-deep .head-container .filter-item .el-input__inner{ |
|
|
|
height: 36px; |
|
|
|
} |
|
|
|
.success-msg{ |
|
|
|
color: #1AAF91 ; |
|
|
|
.success-msg,.fail-msg{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
padding-left: 25px; |
|
|
|
.el-icon-success{ |
|
|
|
font-size: 20px; |
|
|
|
margin-right: 7px; |
|
|
|
.iconfont{ |
|
|
|
font-size: 14px; |
|
|
|
margin-right: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.success-msg{ |
|
|
|
color: #1AAF91; |
|
|
|
} |
|
|
|
.fail-msg{ |
|
|
|
color: #EF3147 ; |
|
|
|
} |
|
|
|
::v-deep .el-input.is-disabled .el-input__inner{ |
|
|
|
background-color: #021330; |
|
|
|
border-color: #17426b; |
|
|
|
} |
|
|
|
.btn-save{ |
|
|
|
width: 90px; |
|
|
|
height: 36px; |
|
|
|
font-size: 16px; |
|
|
|
background-color: #339CFF; |
|
|
|
} |
|
|
|
.btn-save.is-disabled{ |
|
|
|
background-color: #031435; |
|
|
|
} |
|
|
|
</style> |