|
|
@@ -12,6 +12,28 @@
|
|
|
</el-input> -->
|
|
|
</div>
|
|
|
<div class="main-wrap">
|
|
|
+ <div class="left-wrap">
|
|
|
+ <div class="add-btn-box">
|
|
|
+ <el-button type="primary">添加品种</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="first-variety-wrap">
|
|
|
+ <draggable
|
|
|
+ v-model="tableData"
|
|
|
+ class="f-list-wrap"
|
|
|
+ animation="300"
|
|
|
+ tag="ul"
|
|
|
+ handle=".icon-drag"
|
|
|
+ >
|
|
|
+ <li class="item" v-for="item in tableData" :key="item.EnPermissionId">
|
|
|
+ <div class="name">{{item.EnPermissionName}}</div>
|
|
|
+ <div class="menu-box">
|
|
|
+ <img class="icon-drag" src="~@/assets/img/data_m/move_ico2.png" alt="">
|
|
|
+ <img class="icon-set" src="~@/assets/img/icons/variety_set.png" alt="" @click="handleShowEdit(item)">
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </draggable>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<draggable
|
|
|
v-model="tableData"
|
|
|
class="list-wrap"
|
|
|
@@ -39,7 +61,7 @@
|
|
|
<span class="tag self">私有</span>
|
|
|
<span class="tag open">启用</span>
|
|
|
</div>
|
|
|
- </li>
|
|
|
+ </li>
|
|
|
</draggable>
|
|
|
<!-- <el-table
|
|
|
style="border:1px solid #eaeaea;"
|
|
|
@@ -308,9 +330,44 @@ export default {
|
|
|
}
|
|
|
.main-wrap{
|
|
|
margin-top: 20px;
|
|
|
+ height: calc(100vh - 220px);
|
|
|
+ display: flex;
|
|
|
+ .left-wrap{
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
+ width: 400px;
|
|
|
+ margin-right: 20px;
|
|
|
+ .add-btn-box{
|
|
|
+ padding: 20px;
|
|
|
+ box-shadow: 0px 2px 12px 0px #00000014;
|
|
|
+ }
|
|
|
+ .first-variety-wrap{
|
|
|
+ padding: 20px;
|
|
|
+ .f-list-wrap{
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 10px 20px;
|
|
|
+ .menu-box{
|
|
|
+ display: flex;
|
|
|
+ gap: 0 10px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .icon-drag,.icon-set{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.list-wrap{
|
|
|
+ flex: 1;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+ align-content: start;
|
|
|
gap: 20px;
|
|
|
.item{
|
|
|
cursor: pointer;
|
