ETA1.6.7

src/views/classify_manage/classifylistV2.vue

@@ -17,45 +17,34 @@
             </div>
         </div>
         <div class="content-box">
-            <div class="list-item-wrap">
-                <draggable
-                    v-model="level1_list"
-                    class="drag_list-wrap"
-                    animation="300"
-                    tag="ul"
-                >
-                    <li class="item" v-for="item in level1_list" :key="item.Id" @click="handleSelectLevel1(item)">
-                        <span class="tag open-tag">启用</span>
-                        <div style="flex:1">{{item.ClassifyName}}</div>
-                        <div>
-                            <span class="edit-btn" style="color:#0052D9" @click.stop="handleEdit(item,1)">编辑</span>
-                            <span class="edit-btn" style="color:#D54941">禁用</span> 
-                        </div>
-                    </li>
-                </draggable>
-            </div>
-            <div class="list-item-wrap">
-                <div v-if="level2_list&&level2_list.length>0">
-                    <div style="padding: 20px 0 0 20px;">二级分类</div>
-                    <draggable
-                        v-model="level2_list"
-                        class="drag_list-wrap"
-                        animation="300"
-                        tag="ul"
-                    >
-                        <li class="item" v-for="item in level2_list" :key="item.Id" @click="handleSelectLevel2(item)">
-                            <span class="tag open-tag">启用</span>
-                            <div style="flex:1">{{item.ClassifyName}}</div>
-                            <div>
-                                <span class="edit-btn" style="color:#0052D9" @click.stop="handleEdit(item,2)">编辑</span>
-                                <span class="edit-btn" style="color:#D54941">禁用</span> 
-                            </div>
-                        </li>
-                    </draggable>
-                </div>
-                
-                <span class="placehoder-text" v-else>请选择一级分类</span>
-            </div>
+            <el-tree
+			    :data="list"
+				node-key="Id"
+                :props="{
+                    label: 'ClassifyName',
+                    children: 'Child'
+                }"
+				check-strictly
+				empty-text="暂无数据"
+                draggable
+                icon-class=""
+                indent='76'
+			>
+				<div
+					class="classify-item-wrap"
+					slot-scope="{ node, data }"
+				>
+                    <div>
+                        <span class="tag open">启用</span>
+                        <span>{{data.ClassifyName}}</span>
+                    </div>
+					
+                    <div class="opt-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.stop="handleEdit(data)">
+                    </div>
+				</div>
+			</el-tree>
         </div>
 
         <!-- 分类弹窗 -->
@@ -71,7 +60,7 @@
                     ref="formRef" 
                     label-position="left"
                     hide-required-asterisk
-                    label-width="80px">
+                    label-width="100px">
                     <el-form-item prop="classify_name" label="分类名称">
                         <el-input 
                             type="text" 
@@ -87,6 +76,15 @@
                         </el-select>
                     </el-form-item>
                     <el-form-item prop="variety" label="关联品种" v-if="classifyForm.parent_id">
+                        <template slot="label">
+                            <el-tooltip class="item" effect="dark" content="控制报告阅读权限">
+                                <div>
+                                    <span>关联品种</span>
+                                    <i class="el-icon-info"></i>
+                                </div>
+                                
+                            </el-tooltip>
+                        </template>
                         <el-cascader
                             :options="classifyparentArr" 
                             v-model="classifyForm.parent_id" 
@@ -113,11 +111,10 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable';
 import mDialog from '@/components/mDialog.vue';
 import { classifylist,classifyparent,classifyadd,classifydelete,classifyedit,checkDeleteClassify } from 'api/api.js';
 export default {
-    components:{draggable,mDialog},
+    components:{mDialog},
     watch: {
         'classifyForm.show': {
             handler(newval) {
@@ -129,9 +126,7 @@ export default {
         return {
             typeVal:1,
             searchVal:'',
-            level1_list:[],
-            level2_list:[],
-            level3_list:[],
+            list:[],
 
             classifyForm:{
                 show:false,
@@ -155,18 +150,10 @@ export default {
                 KeyWord:this.searchVal
             })
             if(res.Ret===200){
-                this.level1_list=res.Data.List||[]
-                this.level2_list=[]
-                this.level3_list=[]
+                this.list=res.Data.List||[]
             }
         },
-        handleSelectLevel1(item){
-            this.level2_list=item.Child||[]
-            this.level3_list=[]
-        },
-        handleSelectLevel2(item){
-            this.level3_list=item.Child||[]
-        },
+
         /* 获取一级分类 */
         getClassifyOne() {
             classifyparent({}).then(res => {
@@ -184,13 +171,13 @@ export default {
                 variety:'',//关联的品种
             }
         },
-        handleEdit(item,level){
+        handleEdit(item){
             this.classifyForm={
                 show:true,
                 classify_id:item.Id,
                 classify_name:item.ClassifyName,
                 parent_id: item.ParentId,
-                variety:level===3?item.EnPermissions:'',//关联的品种
+                // variety:level===3?item.EnPermissions:'',//关联的品种
             }
         },
         async setClassifyHandle(){
@@ -223,6 +210,18 @@ export default {
 .el-cascader .el-input{
   width: 100%;
 }
+.classify-page{
+    .content-box{
+        .el-tree-node__content{
+            padding-top: 10px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #C8CDD9;
+        }
+        // .el-tree-node.is-current > .el-tree-node__content {
+		// 	background-color: #f0f4ff !important;
+		// }
+    }
+}
 
 </style>
 <style lang="scss" scoped>
@@ -257,47 +256,36 @@ export default {
     }
 }
 .content-box{
-    margin-top: 30px;
-    display: flex;
-    gap: 0 30px;
-    .list-item-wrap{
+    padding: 20px;
+    margin-top: 20px;
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+    background-color: #FFFFFF;
+    .classify-item-wrap{
         flex: 1;
-        background-color: #FFFFFF;
-        height: calc(100vh - 230px);
-        position: relative;
-        .placehoder-text{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%,-50%);
-            color: #C0C4CC;
+        padding-right: 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .tag{
+            display: inline-block;
+            min-width: 76px;
+            line-height: 30px;
+            text-align: center;
+            &.open{
+                background-color: #ECF2FE;
+                color: #0052D9;
+            }
+            &.close{
+                background-color: #0052D9;
+                color: #fff;
+            }
         }
-        .drag_list-wrap{
-            padding: 20px;
-            box-sizing: border-box;
-            .item{
-                box-sizing: border-box;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 10px 0;
-                border-bottom: 1px solid #C8CDD9;
-                .tag{
-                    min-width: 76px;
-                    line-height: 30px;
-                    text-align: center;
-                    display: inline-block;
-                    margin-right: 10px;
-                }
-                .open-tag{
-                    color: #2BA471;
-                    background-color: #E3F9E9;
-                }
-                .edit-btn{
-                    margin-left: 30px;
-                    display: inline-block;
-                    cursor: pointer;
-                }
+        .opt-box{
+            .icon-drag,.icon-set{
+                width: 16px;
+                height: 16px;
+                margin-left: 10px;
             }
         }
     } 

src/views/report_manage/reportVariety.vue

@@ -5,16 +5,11 @@
                 <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> -->
         </div>
         <div class="main-wrap">
             <div class="left-wrap">
                 <div class="add-btn-box">
-                    <el-button type="primary">添加品种</el-button>
+                    <el-button type="primary" v-permission="permissionBtn.enChartPermission.enChartPermission_save" @click="handleAddVariety">添加品种</el-button>
                 </div>
                 <div class="first-variety-wrap">
                     <draggable
@@ -24,7 +19,12 @@
                         tag="ul"
                         handle=".icon-drag"
                     >
-                        <li class="item" v-for="item in tableData" :key="item.EnPermissionId">
+                        <li 
+                            :class="['item',selectFirstId==item.EnPermissionId?'active':'']" 
+                            v-for="item in tableData" 
+                            :key="item.EnPermissionId"
+                            @click="handleSelectFirstVariety(item)"
+                        >
                             <div class="name">{{item.EnPermissionName}}</div>
                             <div class="menu-box">
                                 <img class="icon-drag" src="~@/assets/img/data_m/move_ico2.png" alt="">
@@ -35,7 +35,6 @@
                 </div>
             </div>
             <draggable
-                v-model="tableData"
                 class="list-wrap"
                 animation="300"
                 tag="ul"
@@ -45,78 +44,49 @@
                 @update="dragenter"
                 @end="menuDragOver"
             >
-                <li class="item add-btn">
+                <li class="item add-btn" v-if="selectFirstId">
                     <img class="icon" src="~@/assets/img/icons/variety_add.png" alt="">
                 </li>
-                <li class="item" v-for="item in tableData" :key="item.EnPermissionId">
+                <li class="item" v-for="item in secondVarietyList" :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)">
+                        <el-switch
+                            :value="true"
+                            active-color="#0052D9">
+                        </el-switch>
                     </div>
                     <div class="name-box">
-                        <div class="name">{{item.EnPermissionName}}</div>
-                        <img class="icon-edit" src="~@/assets/img/icons/variety_name_edit.png" alt="">
+                        <el-input
+							ref="editVal"
+                            size='mini'
+							style="width: 90px"
+							placeholder="请输入值"
+							class="label-input"
+							v-model="new_label"
+							v-if="item.isEdit"
+							@blur="changeValue(item)"
+						/>
+                        <template v-else>
+                        <div class="name" >{{item.EnPermissionName}}</div>
+                        <img @click="editNodeLabel(item)" class="icon-edit" src="~@/assets/img/icons/variety_name_edit.png" alt="">
+                        </template>
                     </div>
-                    <div class="tag-box">
-                        <span class="tag self">私有</span>
-                        <span class="tag open">启用</span>
+                    <div class="tag-box open" v-if="true">
+                        <span class="tag">公有</span>
+                        <img class="icon" src="~@/assets/img/icons/changeLang01.png" alt="">
+                    </div>
+                    <div class="tag-box close" v-else>
+                        <span class="tag">私有</span>
+                        <img class="icon" src="~@/assets/img/icons/edit_icon01.png" alt="">
                     </div>
                 </li> 
             </draggable>
-            <!-- <el-table 
-                style="border:1px solid #eaeaea;" 
-                :data="tableData" 
-                v-loading="listLoading"
-                element-loading-text="数据加载中..."
-                row-key="EnPermissionId" 
-                :tree-props="{children:'Child',hasChildren:'hasChildren'}"
-            >
-                <el-table-column prop="EnPermissionName" label="一级品种">
-                    <template slot-scope="scope">
-                        <span>{{scope.row.ParentId==0?scope.row.EnPermissionName:''}}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="EnPermissionName" label="二级品种">
-                    <template slot-scope="scope">
-                        <span>{{scope.row.ParentId!=0?scope.row.EnPermissionName:''}}</span>
-                    </template>
-                </el-table-column>
-                <el-table-column label="操作" align="center">
-                    <template slot-scope="scope">
-                        <span class="editsty" v-permission="permissionBtn.enChartPermission.enChartPermission_save"
-                            style="margin-right:20px;display:inline-block" @click="handleEditBreedItem(scope.row)">编辑</span>
-                        <span v-permission="permissionBtn.enChartPermission.enChartPermission_del"
-                            class="deletesty" @click="handleDelBreedItem(scope.row)">删除</span>
-                    </template>
-                </el-table-column>
-            </el-table> -->
         </div>
 
         <!-- 品种编辑弹窗 -->
-        <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 
+        <el-dialog 
             :modal-append-to-body='false' 
-            :title="!editBreedData.id?'添加品种':'编辑品种'" 
+            :title="!editBreedData.id?'添加品种':'品种设置'" 
             :visible.sync="showEditBreed" 
             :close-on-click-modal="false"
             :center="true" 
@@ -128,18 +98,11 @@
                     <el-form-item label="品种名称">
                         <el-input placeholder="请输入品种名称" v-model="editBreedData.name" style="width:400px"></el-input>
                     </el-form-item>
-                    <el-form-item label="上级品种">
-                        <el-select v-model="editBreedData.parentId" placeholder="请选择" style="width:400px">
-                            <el-option
-                                v-for="item in parentVarietyOpts"
-                                :key="item.EnPermissionId"
-                                :label="item.EnPermissionName"
-                                :value="item.EnPermissionId">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="后台排序">
-                        <el-input placeholder="后台排序" min="0" v-model="editBreedData.sort" type="number" style="width:400px"></el-input>
+                    <el-form-item label="启用状态">
+                        <el-switch
+                            v-model="editBreedData.status"
+                            active-color="#0052D9">
+                        </el-switch>
                     </el-form-item>
                 </el-form>
                 <div style="text-align: center;margin-top:40px">
@@ -147,7 +110,7 @@
                     <el-button type="primary" @click="handleConfirmEidtBreed">确定</el-button>
                 </div>
             </div>
-        </el-dialog> -->
+        </el-dialog>
     </div>
 </template>
 
@@ -172,25 +135,25 @@ export default {
         return {
             typeVal:1,//1中文品种 2英文品种
 
-            searchVal:'',
             tableData:[],
             listLoading:false,
 
-            showEdit:false,
+            selectFirstId:0,//当前选中的一级品种Id
+            secondVarietyList:[],//当前选中的一级品种下的二级品种数据
+
+            new_label:'',//当前编辑二级品种的名称值
 
-            parentVarietyOpts:[],
             showEditBreed:false,
             editBreedData:{
                 id:0,
                 name:'',
-                sort:0,
-                parentId:0,
+                status:true,//启用状态
+
             },
         }
     },
     created(){
         this.getList()
-        this.getParentVarietyList()
     },
     methods: {
         async getList(){
@@ -199,39 +162,57 @@ export default {
             this.listLoading=false
             if(res.Ret===200){
                 this.tableData=res.Data||[]
+                if(this.tableData.length>0){
+                    this.handleSelectFirstVariety(this.tableData[0])
+                }
             }
         },
 
-        getParentVarietyList(isEidtLevelOne){
-            reportVarietyENInterence.parentVarietyList({}).then(res=>{
-                if(res.Ret===200){
-                    const arr=res.Data||[]
-                    if(isEidtLevelOne){
-                        this.parentVarietyOpts=[
-                            {
-                                EnPermissionName:'无',
-                                EnPermissionId:0,
-                            }
-                        ]
-                    }else{
-                        this.parentVarietyOpts=[
-                            {
-                                EnPermissionName:'无',
-                                EnPermissionId:0,
-                            },
-                            ...arr
-                        ]
-                    }
-                }
-            })
+        // 点击一级分类
+        handleSelectFirstVariety(item){
+            this.selectFirstId=item.EnPermissionId
+            this.secondVarietyList=item.Child||[]
+        },
+
+        //点击编辑二级品种名称
+        editNodeLabel(item){
+            this.$set(item,'isEdit',true)
+            this.new_label = item.EnPermissionName;
+			this.$nextTick(() => {
+				this.$refs.editVal[0].focus();
+			});
+        },
+        changeValue(item){
+            if(this.new_label) {
+				this.$set(item,'isEdit',false)
+				// this.new_label !== data.ClassifyName && dataBaseInterface.nodeEdit({
+				// 		ClassifyId: data.ClassifyId,
+				// 		ClassifyName: this.new_label
+				// 	}).then(res => {
+				// 		if(res.Ret === 200) {
+				// 			this.getTreeData();
+				// 		}
+				// 	})
+			}else {
+				this.$message.warning('名称不能为空')
+			}
         },
 
-        handleSearch(){
-            this.getList()
+        handleAddVariety(){
+            this.showEditBreed=true
+            this.editBreedData={
+                id:0,
+                name:'',
+                status:true,//启用状态
+            }
         },
 
         handleShowEdit(item){
-            this.showEdit=true
+            this.showEditBreed=true
+            this.editBreedData={
+                id:item.EnPermissionId,
+                name:item.EnPermissionName
+            }
         },
 
         onMove(e){
@@ -349,7 +330,10 @@ export default {
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
-                    padding: 10px 20px;
+                    padding: 10px 20px 10px 10px;
+                    &.active{
+                        background-color: #ECF2FE;
+                    }
                     .menu-box{
                         display: flex;
                         gap: 0 10px;
@@ -382,7 +366,7 @@ export default {
             .top-icons{
                 display: flex;
                 justify-content: space-between;
-                .icon-drag,.icon-set{
+                .icon-drag{
                     width: 16px;
                     height: 16px;
                 }
@@ -401,27 +385,23 @@ export default {
                 }
             }
             .tag-box{
+                width: 100%;
+                height: 30px;
                 display: flex;
-                justify-content: space-between;
-                flex-wrap: wrap;
-                .tag{
-                    display: inline-block;
-                    line-height: 30px;
-                    text-align: center;
-                    width: 76px;
-                    border-radius: 2px;
+                justify-content: center;
+                align-items: center;
+                .icon{
+                    width: 16px;
+                    height: 16px;
+                    margin-left: 10px;
                 }
-                .self{
+                &.open{
                     color: #0052D9;
                     background-color: #ECF2FE;
                 }
-                .open{
-                    color: #2BA471;
-                    background-color: #E3F9E9;
-                }
-                .close{
-                    color: #D54941;
-                    background-color: #FFF0ED;
+                &.close{
+                    color: #fff;
+                    background-color: #0052D9;
                 }
             }
         }