|
|
@@ -1,5 +1,10 @@
|
|
|
<template>
|
|
|
<div class="app-container" :style="`height:${height}px`" id="parent">
|
|
|
+ <el-row :gutter="10" class="mb8" style="z-index: 10;flex: right">
|
|
|
+ <el-tooltip class="top-right-btn" effect="dark" :content="$t('tagsView.refresh')" placement="top">
|
|
|
+ <el-button size="mini" circle icon="el-icon-refresh" @click="getList" />
|
|
|
+ </el-tooltip>
|
|
|
+ </el-row>
|
|
|
<vue-draggable-resizable v-drag
|
|
|
w="auto" h="auto" :draggable="dragMove" style="background-color:#fff;padding: 0px 20px">
|
|
|
<div class="zoom" @wheel.prevent="handleTableWheel($event)" ref="branch">
|
|
|
@@ -12,12 +17,12 @@
|
|
|
</tr>
|
|
|
<tr v-for="(list) in data">
|
|
|
<td v-for="(item) in list">
|
|
|
- <el-button type="text" @click="handleClick,openDialog(item.id)"
|
|
|
+ <el-button type="text" @click="handleClick,openDialog(item.id,item.status)"
|
|
|
style="color: #fff;padding: 5px;height: 100%;font-weight: bold"
|
|
|
- :class=" item.status==2? 'grey' : (item.status==1 ? 'red':'green')">
|
|
|
- <i class="el-icon-unlock" v-if="item.status==1"/>
|
|
|
- <i class="el-icon-circle-close" v-else-if="item.status==2"/>
|
|
|
- <i class="el-icon-lock" v-else/>
|
|
|
+ :class=" item.status===2? 'grey' : (item.status===1 ? 'red':'green')">
|
|
|
+ <svg-icon icon-class="key" style="font-size: 300%" v-if="item.status===1"/>
|
|
|
+ <i class="el-icon-circle-close" style="font-size: 300%" v-else-if="item.status===2"/>
|
|
|
+ <svg-icon icon-class="key" style="font-size: 300%" v-else/>
|
|
|
<br/>
|
|
|
<br/>
|
|
|
<span>{{ item.lockCode.substring(0, item.lockCode.indexOf('-')) }}</span>
|
|
|
@@ -30,18 +35,31 @@
|
|
|
</table>
|
|
|
</div>
|
|
|
</vue-draggable-resizable>
|
|
|
- <el-dialog :visible.sync="visible">
|
|
|
- <el-button type="info" round @click="changeColor(1)">状态1</el-button>
|
|
|
- <el-button type="danger" round @click="changeColor(2)">状态2</el-button>
|
|
|
- <el-button type="warning" round @click="changeColor(3)">状态3</el-button>
|
|
|
- <el-button type="success" round @click="changeColor(4)">状态4</el-button>
|
|
|
+ <el-dialog :visible.sync="visible" title="锁详情">
|
|
|
+ <el-descriptions class="margin-top" :column="3" size="medium" border>
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template slot="label">
|
|
|
+ <i style="font-size: 100%" class="el-icon-edit"></i>
|
|
|
+ 修改锁状态
|
|
|
+ </template>
|
|
|
+ <el-button :disabled="status==0" size="medium" type="success" plain round @click="changeColor(0)">挂锁
|
|
|
+ </el-button>
|
|
|
+ <el-button :disabled="status==1" size="medium" type="danger" plain round @click="changeColor(1)">拆锁
|
|
|
+ </el-button>
|
|
|
+ <el-button :disabled="status==2" size="medium" type="info" plain round @click="changeColor(2)">删除
|
|
|
+ </el-button>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="visible = false">返 回</el-button>
|
|
|
+ </div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import VueDraggableResizable from 'vue-draggable-resizable'
|
|
|
-import {listAllLock} from "@/api/apply/lock";
|
|
|
+import {listAllLock, updateLock} from "@/api/apply/lock";
|
|
|
|
|
|
export default {
|
|
|
components: {VueDraggableResizable},
|
|
|
@@ -84,6 +102,7 @@ export default {
|
|
|
dragMove: true,
|
|
|
drawer: false,
|
|
|
data: [],
|
|
|
+ status: 0,
|
|
|
index: null,
|
|
|
loading: true,
|
|
|
visible: false,
|
|
|
@@ -143,7 +162,6 @@ export default {
|
|
|
},
|
|
|
handleClick() {
|
|
|
setTimeout(function () {
|
|
|
-
|
|
|
// 点击事件触发时，判断当前状态是拖拽还是点击，若是拖拽，直接返回不继续执行
|
|
|
const isDrag = document.getElementById('parent').getAttribute('drag-flag')
|
|
|
if (isDrag == 'true') {
|
|
|
@@ -165,7 +183,7 @@ export default {
|
|
|
}
|
|
|
return false
|
|
|
},
|
|
|
- openDialog(index) {
|
|
|
+ openDialog(index, status) {
|
|
|
// 点击事件触发时，判断当前状态是拖拽还是点击，若是拖拽，直接返回不继续执行
|
|
|
const isDrag = document.getElementById('parent').getAttribute('drag-flag')
|
|
|
if (isDrag === 'true') {
|
|
|
@@ -173,33 +191,14 @@ export default {
|
|
|
}
|
|
|
this.visible = true;
|
|
|
this.index = index
|
|
|
+ this.status = status
|
|
|
},
|
|
|
changeColor(type) {
|
|
|
- let index = this.index
|
|
|
- let flag;
|
|
|
- if (this.status1.includes(index))
|
|
|
- this.status1.splice(this.status1.indexOf(index), 1);
|
|
|
- if (this.status2.includes(index))
|
|
|
- this.status2.splice(this.status2.indexOf(index), 1);
|
|
|
- if (this.status3.includes(index))
|
|
|
- this.status3.splice(this.status3.indexOf(index), 1);
|
|
|
- if (this.status4.includes(index))
|
|
|
- this.status4.splice(this.status4.indexOf(index), 1);
|
|
|
- switch (type) {
|
|
|
- case 1:
|
|
|
- this.status1.push(index)
|
|
|
- break;
|
|
|
- case 2:
|
|
|
- this.status2.push(index)
|
|
|
- break;
|
|
|
- case 3:
|
|
|
- this.status3.push(index)
|
|
|
- break;
|
|
|
- case 4:
|
|
|
- this.status4.push(index)
|
|
|
- break;
|
|
|
- }
|
|
|
- this.visible = false;
|
|
|
+ updateLock({id: this.index, status: type}).then(response => {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.visible = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
}
|
