|
@@ -6,7 +6,6 @@
|
|
|
title="添加实例对象"
|
|
|
mode="full"
|
|
|
@close="modalClose"
|
|
|
- @confirm="modalConfirm"
|
|
|
>
|
|
|
<template #content class="xxx">
|
|
|
<div class="getItem">
|
|
@@ -83,37 +82,56 @@
|
|
|
</div>
|
|
|
<ul class="choiceList">
|
|
|
<li class="choiceList-item">
|
|
|
- <div class="treeList">
|
|
|
- <div class="title">
|
|
|
- <i class="el-icon-caret-right"></i>
|
|
|
- <span class="equip-title">设备名称</span>
|
|
|
- <span class="equip-num">341</span>
|
|
|
+ <div
|
|
|
+ class="treeList"
|
|
|
+ v-for="(items, key) in equipData"
|
|
|
+ :key="key"
|
|
|
+ >
|
|
|
+ <div class="title" @click="collapse(items)">
|
|
|
+ <i
|
|
|
+ v-bind:class="[
|
|
|
+ items.showChildren ? 'caret-icon-active' : 'caret-icon',
|
|
|
+ 'el-icon-caret-bottom',
|
|
|
+ ]"
|
|
|
+ ></i>
|
|
|
+ <span class="equip-title">{{ items.name }}</span>
|
|
|
+ <span class="equip-num">{{ items.number }}</span>
|
|
|
</div>
|
|
|
- <ul class="treeList-bodys">
|
|
|
- <li class="treeList-item">
|
|
|
- <div class="item-title">设备实例-SBSL10020113</div>
|
|
|
- <i class="el-icon-error"></i>
|
|
|
- </li>
|
|
|
- <li class="treeList-item">
|
|
|
- <div class="item-title">设备实例-SBSL10020113</div>
|
|
|
- <i class="el-icon-error"></i>
|
|
|
- </li>
|
|
|
- <li class="treeList-item">
|
|
|
- <div class="item-title">设备实例-SBSL10020113</div>
|
|
|
- <i class="el-icon-error"></i>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <el-collapse-transition>
|
|
|
+ <ul class="treeList-bodys" v-show="items.showChildren">
|
|
|
+ <li
|
|
|
+ class="treeList-item"
|
|
|
+ v-for="(item, key) in items.children"
|
|
|
+ :key="key"
|
|
|
+ >
|
|
|
+ <div class="item-title">{{ item.name }}</div>
|
|
|
+ <i
|
|
|
+ class="el-icon-error"
|
|
|
+ @click="deleteItem(items, key)"
|
|
|
+ ></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-collapse-transition>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="btn-list">
|
|
|
+ <el-button @click="modalClose">取消</el-button>
|
|
|
+ <el-button type="primary" @click="finish">确认</el-button>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</Modal>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import { mapMutations, mapState } from "vuex";
|
|
|
+import { EquipmentList } from "./equipData";
|
|
|
export default {
|
|
|
props: ["showAddItemModel"],
|
|
|
+ computed: {
|
|
|
+ ...mapState(["editCmd"]),
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
inputVal2: "",
|
|
@@ -221,18 +239,32 @@ export default {
|
|
|
address: "上海市普陀区金沙江路 1518 弄",
|
|
|
},
|
|
|
],
|
|
|
+ equipData: EquipmentList,
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ ...mapMutations(["SETEQUIPLIST"]),
|
|
|
changeItem(item) {
|
|
|
console.log(item);
|
|
|
},
|
|
|
modalClose() {
|
|
|
this.isShowModel = false;
|
|
|
- this.$emit('closeModel')
|
|
|
+ this.$emit("closeModel");
|
|
|
+ },
|
|
|
+ finish() {
|
|
|
+ this.SETEQUIPLIST(this.equipData);
|
|
|
+ this.modalClose();
|
|
|
},
|
|
|
- modalConfirm() {},
|
|
|
pressEnter() {},
|
|
|
+ // /是否下拉折叠
|
|
|
+ collapse(item) {
|
|
|
+ item.showChildren = !item.showChildren;
|
|
|
+ },
|
|
|
+ // 删除item
|
|
|
+ deleteItem(items, key) {
|
|
|
+ items.children.splice(key, 1);
|
|
|
+ items.number = items.children.length;
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
abc: function (item) {
|
|
@@ -245,7 +277,7 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="less" >
|
|
|
+<style lang="less" scoped>
|
|
|
ul,
|
|
|
li {
|
|
|
margin: 0;
|
|
@@ -253,14 +285,18 @@ li {
|
|
|
list-style-type: none;
|
|
|
}
|
|
|
.getItemModal {
|
|
|
- height: 100%;
|
|
|
+ height: calc(~"100% - 110px");
|
|
|
.getItem {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ height: calc(~"100% - 110px");
|
|
|
display: flex;
|
|
|
+ margin: 0 32px 16px 32px;
|
|
|
+ border: 1px solid #e4e5e7;
|
|
|
+ position: relative;
|
|
|
+ top: 16px;
|
|
|
.xxx {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ position: relative;
|
|
|
+ // height: 100%;
|
|
|
}
|
|
|
}
|
|
|
/deep/ .p-modal-main .p-modal-content-full {
|
|
@@ -317,6 +353,7 @@ li {
|
|
|
font-size: 14px;
|
|
|
color: #8d9399;
|
|
|
line-height: 14px;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.equip-num {
|
|
|
font-size: 14px;
|
|
@@ -326,6 +363,12 @@ li {
|
|
|
padding: 0 10px 0 10px;
|
|
|
line-height: 24px;
|
|
|
}
|
|
|
+ .caret-icon {
|
|
|
+ animation: nowhirling 0.2s linear forwards;
|
|
|
+ }
|
|
|
+ .caret-icon-active {
|
|
|
+ animation: whirling 0.2s linear forwards;
|
|
|
+ }
|
|
|
}
|
|
|
.treeList-bodys {
|
|
|
.treeList-item {
|
|
@@ -336,6 +379,7 @@ li {
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0 16px 0 50px;
|
|
|
+ cursor: pointer;
|
|
|
&:hover {
|
|
|
background: #f5f6f7;
|
|
|
}
|
|
@@ -356,5 +400,45 @@ li {
|
|
|
justify-content: space-around;
|
|
|
}
|
|
|
}
|
|
|
+ .btn-list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-top: 24px;
|
|
|
+ padding-right: 32px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes whirling {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ -ms-transform: rotate(-90deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(-90deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(-90deg); /* Opera */
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(0deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(0deg); /* Opera */
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes nowhirling {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(0deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(0deg); /* Opera */
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ -ms-transform: rotate(-90deg); /* Internet Explorer */
|
|
|
+ -moz-transform: rotate(-90deg); /* Firefox */
|
|
|
+ -webkit-transform: rotate(-90deg); /* Safari 和 Chrome */
|
|
|
+ -o-transform: rotate(-90deg); /* Opera */
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|