英文分类

src/views/classify_manage/classifyEnListV2.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="classify-page">
+        <div class="top-wrap">
+            <div class="type-box">
+                <div class="item" @click="$emit('typeChange','1')">中文分类</div>
+                <div class="item active">英文分类</div>
+            </div>
+            <div style="display:flex;padding:10px;gap:10px">
+            <el-button 
+                type="primary"
+                @click="showEditBreed=true;getParentVarietyList()"
+            >添加分类</el-button>
+            <el-input placeholder="品种名称" v-model="searchVal" style="max-width: 262px;" @change="handleSearch" clearable>
+                <i slot="prefix" class="el-input__icon el-icon-search"></i>
+            </el-input>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="list-item-wrap">
+                <draggable
+                    v-model="level1_list"
+                    class="drag_list-wrap"
+                    animation="300"
+                    tag="ul"
+                    @start="dragStart"
+                @update="dragenter"
+                @end="menuDragOver"
+                >
+                    <li class="item" v-for="item in level1_list" :key="item.Id">
+                        <span class="tag open-tag">启用</span>
+                        <div style="flex:1">{{item.ClassifyName}}</div>
+                        <div>
+                            <span class="edit-btn" style="color:#0052D9">编辑</span>
+                            <span class="edit-btn" style="color:#D54941">禁用</span> 
+                        </div>
+                    </li>
+                </draggable>
+            </div>
+            <div class="list-item-wrap">
+                <span class="placehoder-text">请选择一级分类</span>
+            </div>
+            <div class="list-item-wrap">
+                <span class="placehoder-text">请选择二级分类</span>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import draggable from 'vuedraggable';
+import * as classifyEnInterface from "@/api/modules/classifyEnApi.js";
+export default {
+    components:{draggable},
+    data() {
+        return {
+            typeVal:1,
+            searchVal:'',
+            level1_list:[],
+            level2_list:[],
+            level2_list:[]
+        }
+    },
+    mounted(){
+        this.getList()
+    },
+    methods: {
+        async getList(){
+            const res=await classifyEnInterface.classifyList({
+                KeyWord:this.searchVal
+            })
+            if(res.Ret===200){
+                this.level1_list=res.Data.List||[]
+            }
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.top-wrap{
+    display: flex;
+    justify-content: space-between;
+    background: #FFFFFF;
+    border-radius: 4px;
+    .type-box{
+        display: flex;
+        .item{
+            position: relative;
+            cursor: pointer;
+            color: #666;
+            min-width: 88px;
+            line-height: 60px;
+            text-align: center;
+        }
+        .active{
+            color: #0052D9;
+            &::after{
+                content: '';
+                display: block;
+                width: 100%;
+                height: 2px;
+                position: absolute;
+                bottom: 0px;
+                left: 0;
+                background-color: #0052D9;
+            }
+        }
+    }
+}
+.content-box{
+    margin-top: 30px;
+    display: flex;
+    gap: 0 30px;
+    .list-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;
+        }
+        .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;
+                }
+            }
+        }
+    } 
+}
+</style>

src/views/classify_manage/indexList.vue

@@ -7,7 +7,7 @@
 
 <script>
 import classifyZH from './classifylist.vue'
-import classifyEN from './classifyEnlist.vue'
+import classifyEN from './classifyEnlistV2.vue'
 export default {
     components:{
         classifyZH,
@@ -15,7 +15,7 @@ export default {
     },
     data() {
         return {
-            type:'1',//1 中文研报分类 2英文研报分类
+            type:'2',//1 中文研报分类 2英文研报分类
         }
     },
     methods:{
@@ -26,7 +26,7 @@ export default {
     mounted(){
         const {classifyBtn,enClassifyBtn,checkPermissionBtn} = this.permissionBtn
         if(checkPermissionBtn(classifyBtn.classifyList_cnClassify)){
-            this.type = '1'
+            this.type = '2'
         }else if(checkPermissionBtn(enClassifyBtn.classifyList_enClassify)){
             this.type = '2'
         }