|
|
@@ -1,14 +1,47 @@
|
|
|
<template>
|
|
|
<div class="report-variety-page">
|
|
|
<div class="top-wrap">
|
|
|
- <el-button type="primary" v-permission="permissionBtn.enChartPermission.enChartPermission_save"
|
|
|
+ <div class="type-box">
|
|
|
+ <div :class="['item',typeVal==1?'active':'']" @click="handleTypeChange(1)">中文品种</div>
|
|
|
+ <div :class="['item',typeVal==2?'active':'']" @click="handleTypeChange(2)">英文品种</div>
|
|
|
+ </div>
|
|
|
+ <!-- <el-button type="primary" v-permission="permissionBtn.enChartPermission.enChartPermission_save"
|
|
|
@click="showEditBreed=true;getParentVarietyList()">添加品种</el-button>
|
|
|
<el-input placeholder="品种名称" v-model="searchVal" style="max-width: 262px; float: right" @change="handleSearch" clearable>
|
|
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
- </el-input>
|
|
|
+ </el-input> -->
|
|
|
</div>
|
|
|
<div class="main-wrap">
|
|
|
- <el-table
|
|
|
+ <draggable
|
|
|
+ v-model="tableData"
|
|
|
+ class="list-wrap"
|
|
|
+ animation="300"
|
|
|
+ tag="ul"
|
|
|
+ handle=".icon-drag"
|
|
|
+ :move="onMove"
|
|
|
+ @start="dragStart"
|
|
|
+ @update="dragenter"
|
|
|
+ @end="menuDragOver"
|
|
|
+ >
|
|
|
+ <li class="item add-btn">
|
|
|
+ <img class="icon" src="~@/assets/img/icons/variety_add.png" alt="">
|
|
|
+ </li>
|
|
|
+ <li class="item" v-for="item in tableData" :key="item.EnPermissionId">
|
|
|
+ <div class="top-icons">
|
|
|
+ <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>
|
|
|
+ <div class="name-box">
|
|
|
+ <div class="name">{{item.EnPermissionName}}</div>
|
|
|
+ <img class="icon-edit" src="~@/assets/img/icons/variety_name_edit.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="tag-box">
|
|
|
+ <span class="tag self">私有</span>
|
|
|
+ <span class="tag open">启用</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </draggable>
|
|
|
+ <!-- <el-table
|
|
|
style="border:1px solid #eaeaea;"
|
|
|
:data="tableData"
|
|
|
v-loading="listLoading"
|
|
|
@@ -34,11 +67,32 @@
|
|
|
class="deletesty" @click="handleDelBreedItem(scope.row)">删除</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- </el-table>
|
|
|
+ </el-table> -->
|
|
|
</div>
|
|
|
|
|
|
<!-- 品种编辑弹窗 -->
|
|
|
- <el-dialog
|
|
|
+ <el-drawer
|
|
|
+ :visible.sync="showEdit"
|
|
|
+ direction="rtl"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ :with-header="false"
|
|
|
+ title="品种设置"
|
|
|
+ >
|
|
|
+ <div class="edit-variety-wrap">
|
|
|
+ <div class="header-box ">
|
|
|
+ <div class="title">品种设置</div>
|
|
|
+ <img @click="showEdit=false" style="cursor: pointer;" src="~@/assets/img/icons/close_icon_black.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <el-button type="primary">添加品种分类</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center;padding:40px 0">
|
|
|
+ <el-button style="width:120px" type="primary" plain @click="showEdit=false">取消</el-button>
|
|
|
+ <el-button style="width:120px" type="primary" @click="handleConfirmEidtBreed">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ <!-- <el-dialog
|
|
|
:modal-append-to-body='false'
|
|
|
:title="!editBreedData.id?'添加品种':'编辑品种'"
|
|
|
:visible.sync="showEditBreed"
|
|
|
@@ -71,13 +125,15 @@
|
|
|
<el-button type="primary" @click="handleConfirmEidtBreed">确定</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </el-dialog>
|
|
|
+ </el-dialog> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import draggable from 'vuedraggable';
|
|
|
import {reportVarietyENInterence} from '@/api/api'
|
|
|
export default {
|
|
|
+ components:{draggable},
|
|
|
watch: {
|
|
|
showEditBreed(n){
|
|
|
if(!n){
|
|
|
@@ -92,10 +148,14 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ typeVal:1,//1中文品种 2英文品种
|
|
|
+
|
|
|
searchVal:'',
|
|
|
tableData:[],
|
|
|
listLoading:false,
|
|
|
|
|
|
+ showEdit:false,
|
|
|
+
|
|
|
parentVarietyOpts:[],
|
|
|
showEditBreed:false,
|
|
|
editBreedData:{
|
|
|
@@ -148,6 +208,20 @@ export default {
|
|
|
this.getList()
|
|
|
},
|
|
|
|
|
|
+ handleShowEdit(item){
|
|
|
+ this.showEdit=true
|
|
|
+ },
|
|
|
+
|
|
|
+ onMove(e){
|
|
|
+ if(e.relatedContext.index===0) return false
|
|
|
+ return true
|
|
|
+ },
|
|
|
+
|
|
|
+ // 中英文品种切换
|
|
|
+ handleTypeChange(type){
|
|
|
+ this.typeVal=type
|
|
|
+ },
|
|
|
+
|
|
|
async handleConfirmEidtBreed(){
|
|
|
if(!this.editBreedData.name){
|
|
|
this.$message.warning('请填写品种名称')
|
|
|
@@ -207,12 +281,127 @@ export default {
|
|
|
.top-wrap{
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 4px;
|
|
|
- padding: 20px 30px;
|
|
|
+ .type-box{
|
|
|
+ display: flex;
|
|
|
+ .item{
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #666;
|
|
|
+ min-width: 88px;
|
|
|
+ line-height: 44px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #0052D9;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0;
|
|
|
+ background-color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.main-wrap{
|
|
|
- margin-top: 30px;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 20px 30px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .list-wrap{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20px;
|
|
|
+ .item{
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ width: 186px;
|
|
|
+ height: 128px;
|
|
|
+ display: block;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .top-icons{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .icon-drag,.icon-set{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name-box{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .name{
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .icon-edit{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tag-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .tag{
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ width: 76px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+ .self{
|
|
|
+ color: #0052D9;
|
|
|
+ background-color: #ECF2FE;
|
|
|
+ }
|
|
|
+ .open{
|
|
|
+ color: #2BA471;
|
|
|
+ background-color: #E3F9E9;
|
|
|
+ }
|
|
|
+ .close{
|
|
|
+ color: #D54941;
|
|
|
+ background-color: #FFF0ED;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-btn{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .icon{
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.edit-variety-wrap{
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .header-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 48px;
|
|
|
+ border-bottom: 1px solid #E7E7E7;
|
|
|
+ .title{
|
|
|
+ width: 88px;
|
|
|
+ height: 48px;
|
|
|
+ line-height: 48px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ color: #0052D9;
|
|
|
+ border-bottom: 2px solid #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-box{
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
