分类管理修改

src/views/classify_manage/classifyEnListV2.vue

@@ -8,9 +8,10 @@
             <div style="display:flex;padding:10px;gap:10px">
             <el-button 
                 type="primary"
-                @click="showEditBreed=true;getParentVarietyList()"
+                @click="addClassify"
+                v-permission="permissionBtn.enClassifyBtn.classifyList_enClassify_rpAddClassify"
             >添加分类</el-button>
-            <el-input placeholder="品种名称" v-model="searchVal" style="max-width: 262px;" @change="handleSearch" clearable>
+            <el-input placeholder="分类名称" v-model="searchVal" style="max-width: 262px;" @change="getList" clearable>
                 <i slot="prefix" class="el-input__icon el-icon-search"></i>
             </el-input>
             </div>
@@ -22,44 +23,146 @@
                     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">
+                    <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">编辑</span>
+                            <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">
-                <span class="placehoder-text">请选择一级分类</span>
+                <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>
             <div class="list-item-wrap">
-                <span class="placehoder-text">请选择二级分类</span>
+                <div v-if="level3_list&&level3_list.length>0">
+                    <div style="padding: 20px 0 0 20px;">三级分类</div>
+                    <draggable
+                        v-model="level3_list"
+                        class="drag_list-wrap"
+                        animation="300"
+                        tag="ul"
+                    >
+                        <li class="item" v-for="item in level3_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,3)">编辑</span>
+                                <span class="edit-btn" style="color:#D54941">禁用</span> 
+                            </div>
+                        </li>
+                    </draggable>
+                </div>
+                <span class="placehoder-text" v-else>请选择二级分类</span>
             </div>
         </div>
 
-
+        <!-- 分类弹窗 -->
+        <m-dialog 
+            :title="classifyForm.id?'编辑分类':'新增分类'" 
+            :show.sync="classifyForm.show" 
+            width="650px"
+        >
+            <div style="padding-left: 50px">
+                <el-form 
+                    :model="classifyForm" 
+                    :rules="formRules" 
+                    ref="formRef" 
+                    label-position="left"
+                    hide-required-asterisk
+                    label-width="80px">
+                    <el-form-item prop="classify_name" label="分类名称">
+                        <el-input 
+                            type="text" 
+                            v-model="classifyForm.classify_name" 
+                            placeholder="请输入分类名称"
+                            style="width:400px;"
+                        />
+                    </el-form-item>
+                    <el-form-item prop="parent_id" label="上级分类">
+                        <el-cascader :options="classifyparentArr" v-model="classifyForm.parent_id" placeholder="请选择"
+                        :props="{value:'Id',label:'ClassifyName',children:'Child',checkStrictly:true,emitPath:true}" style="min-width:400px;"></el-cascader>
+                    </el-form-item>
+                    <el-form-item prop="variety" label="关联品种" v-if="classifyForm.parent_id&&classifyForm.parent_id.length==2">
+                        <el-cascader
+                            :options="classifyparentArr" 
+                            v-model="classifyForm.parent_id" 
+                            placeholder="请选择"
+                            :props="{value:'Id',label:'ClassifyName',children:'Child',checkStrictly:true,emitPath:true}" 
+                            style="min-width:400px;"
+                        ></el-cascader>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div slot="footer" style="margin-top: 20px;">
+                <el-button
+                @click="cancelClassify"
+                style="width: 132px; height: 40px"
+                >取消</el-button>
+                <el-button
+                @click="setClassifyHandle"
+                type="primary"
+                style="width: 132px; height: 40px"
+                >保存</el-button>
+            </div>
+        </m-dialog>
     </div>
 </template>
 
 <script>
 import draggable from 'vuedraggable';
+import mDialog from '@/components/mDialog.vue';
 import * as classifyEnInterface from "@/api/modules/classifyEnApi.js";
 export default {
-    components:{draggable},
+    components:{draggable,mDialog},
+    watch: {
+        'classifyForm.show': {
+            handler(newval) {
+                newval && this.getClassifyOne();
+            }
+        }
+    },
     data() {
         return {
             typeVal:1,
             searchVal:'',
             level1_list:[],
             level2_list:[],
-            level2_list:[]
+            level3_list:[],
+
+            classifyForm:{
+                show:false,
+                classify_id:0,
+                classify_name:"",
+                parent_id: ['0'],
+                variety:'',//关联的品种
+            },
+            formRules: {
+                classify_name: [{ required:true,message:'请输入分类名称',trigger:'blur'}]
+            },
+            classifyparentArr:[]
         }
     },
     mounted(){
@@ -72,12 +175,83 @@ export default {
             })
             if(res.Ret===200){
                 this.level1_list=res.Data.List||[]
+                this.level2_list=[]
+                this.level3_list=[]
             }
-        }
+        },
+        handleSelectLevel1(item){
+            this.level2_list=item.Child||[]
+            this.level3_list=[]
+        },
+        handleSelectLevel2(item){
+            this.level3_list=item.Child||[]
+        },
+        /* 获取一级分类 */
+        getClassifyOne() {
+            classifyEnInterface.classifyOne({ CurrentIndex: 1, PageSize: 9999}).then(res => {
+                if(res.Ret !== 200) return
+
+                this.classifyparentArr=res.Data.List || [];
+
+                this.classifyparentArr.unshift({Id:"0",ClassifyName:'无',Child:null})
+            })
+        },
+        addClassify(){
+            this.classifyForm={
+                show:true,
+                classify_id:0,
+                classify_name:"",
+                parent_id: ['0'],
+                variety:'',//关联的品种
+            }
+        },
+        handleEdit(item,level){
+            let parent_id=['0']
+            if(level===2){
+                parent_id=[item.ParentId]
+            }else if(level===3){
+                parent_id=[item.RootId,item.ParentId]
+            }
+            this.classifyForm={
+                show:true,
+                classify_id:item.Id,
+                classify_name:item.ClassifyName,
+                parent_id: parent_id,
+                variety:level===3?item.EnPermissions:'',//关联的品种
+            }
+        },
+        async setClassifyHandle(){
+            await this.$refs.formRef.validate();
+            const { classify_name,parent_id,sort,classify_id } = this.classifyForm;
+            let params = {
+                ClassifyName: classify_name,
+                ParentId: parent_id&&parent_id[parent_id.length-1]?parseInt(parent_id):0,
+            }
+
+            const { Ret,Msg } = classify_id 
+                ? await classifyEnInterface.classifyEdit({...params,ClassifyId: classify_id}) 
+                : await classifyEnInterface.classifyAdd(params)
+
+            if(Ret !== 200) return
+            this.$message.success(Msg)
+            this.cancelClassify();
+            this.getList();
+        },
+        /* 取消 */
+        cancelClassify() {
+            this.$refs.formRef.resetFields();
+            this.classifyForm.show = false;
+        },
     },
 }
 </script>
 
+<style lang="scss">
+.el-cascader .el-input{
+  width: 100%;
+}
+
+</style>
 <style lang="scss" scoped>
 .top-wrap{
     display: flex;

src/views/classify_manage/classifylistV2.vue

@@ -0,0 +1,305 @@
+<template>
+    <div class="classify-page">
+        <div class="top-wrap">
+            <div class="type-box">
+                <div class="item active" v-permission="permissionBtn.classifyBtn.classifyList_cnClassify">中文分类</div>
+                <div class="item" @click="$emit('typeChange','2')" v-permission="permissionBtn.enClassifyBtn.classifyList_enClassify">英文分类</div>
+            </div>
+            <div style="display:flex;padding:10px;gap:10px">
+            <el-button 
+                type="primary"
+                @click="addClassify"
+                v-permission="permissionBtn.classifyBtn.classifyList_cnClassify_classifyAdd"
+            >添加分类</el-button>
+            <el-input placeholder="分类名称" v-model="searchVal" style="max-width: 262px;" @change="getList" 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"
+                >
+                    <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>
+        </div>
+
+        <!-- 分类弹窗 -->
+        <m-dialog 
+            :title="classifyForm.id?'编辑分类':'新增分类'" 
+            :show.sync="classifyForm.show" 
+            width="650px"
+        >
+            <div style="padding-left: 50px">
+                <el-form 
+                    :model="classifyForm" 
+                    :rules="formRules" 
+                    ref="formRef" 
+                    label-position="left"
+                    hide-required-asterisk
+                    label-width="80px">
+                    <el-form-item prop="classify_name" label="分类名称">
+                        <el-input 
+                            type="text" 
+                            v-model="classifyForm.classify_name" 
+                            placeholder="请输入分类名称"
+                            style="width:400px;"
+                        />
+                    </el-form-item>
+                    <el-form-item prop="parent_id" label="上级分类">
+                        <el-select v-model="classifyForm.parent_id" placeholder="请选择" style="width:400px;">
+                            <el-option label="无" :value="0"></el-option>
+                            <el-option v-for="(item,index) in classifyparentArr" :key="index" :label="item.ClassifyName" :value="item.Id"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item prop="variety" label="关联品种" v-if="classifyForm.parent_id">
+                        <el-cascader
+                            :options="classifyparentArr" 
+                            v-model="classifyForm.parent_id" 
+                            placeholder="请选择"
+                            :props="{value:'Id',label:'ClassifyName',children:'Child',checkStrictly:true,emitPath:true}" 
+                            style="min-width:400px;"
+                        ></el-cascader>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div slot="footer" style="margin-top: 20px;">
+                <el-button
+                @click="cancelClassify"
+                style="width: 132px; height: 40px"
+                >取消</el-button>
+                <el-button
+                @click="setClassifyHandle"
+                type="primary"
+                style="width: 132px; height: 40px"
+                >保存</el-button>
+            </div>
+        </m-dialog>
+    </div>
+</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},
+    watch: {
+        'classifyForm.show': {
+            handler(newval) {
+                newval && this.getClassifyOne();
+            }
+        }
+    },
+    data() {
+        return {
+            typeVal:1,
+            searchVal:'',
+            level1_list:[],
+            level2_list:[],
+            level3_list:[],
+
+            classifyForm:{
+                show:false,
+                classify_id:0,
+                classify_name:"",
+                parent_id: 0,
+                variety:'',//关联的品种
+            },
+            formRules: {
+                classify_name: [{ required:true,message:'请输入分类名称',trigger:'blur'}]
+            },
+            classifyparentArr:[]
+        }
+    },
+    mounted(){
+        this.getList()
+    },
+    methods: {
+        async getList(){
+            const res=await classifylist({
+                KeyWord:this.searchVal
+            })
+            if(res.Ret===200){
+                this.level1_list=res.Data.List||[]
+                this.level2_list=[]
+                this.level3_list=[]
+            }
+        },
+        handleSelectLevel1(item){
+            this.level2_list=item.Child||[]
+            this.level3_list=[]
+        },
+        handleSelectLevel2(item){
+            this.level3_list=item.Child||[]
+        },
+        /* 获取一级分类 */
+        getClassifyOne() {
+            classifyparent({}).then(res => {
+                if(res.Ret !== 200) return
+
+                this.classifyparentArr=res.Data || [];
+            })
+        },
+        addClassify(){
+            this.classifyForm={
+                show:true,
+                classify_id:0,
+                classify_name:"",
+                parent_id: 0,
+                variety:'',//关联的品种
+            }
+        },
+        handleEdit(item,level){
+            this.classifyForm={
+                show:true,
+                classify_id:item.Id,
+                classify_name:item.ClassifyName,
+                parent_id: item.ParentId,
+                variety:level===3?item.EnPermissions:'',//关联的品种
+            }
+        },
+        async setClassifyHandle(){
+            await this.$refs.formRef.validate();
+            const { classify_name,parent_id,classify_id } = this.classifyForm;
+            let params = {
+                ClassifyName: classify_name,
+                ParentId: parent_id,
+            }
+
+            const { Ret,Msg } = classify_id 
+                ? await classifyedit({...params,ClassifyId: classify_id}) 
+                : await classifyadd(params)
+
+            if(Ret !== 200) return
+            this.$message.success(Msg)
+            this.cancelClassify();
+            this.getList();
+        },
+        /* 取消 */
+        cancelClassify() {
+            this.$refs.formRef.resetFields();
+            this.classifyForm.show = false;
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.el-cascader .el-input{
+  width: 100%;
+}
+
+</style>
+<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

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import classifyZH from './classifylist.vue'
+import classifyZH from './classifylistV2.vue'
 import classifyEN from './classifyEnlistV2.vue'
 export default {
     components:{
@@ -26,7 +26,7 @@ export default {
     mounted(){
         const {classifyBtn,enClassifyBtn,checkPermissionBtn} = this.permissionBtn
         if(checkPermissionBtn(classifyBtn.classifyList_cnClassify)){
-            this.type = '2'
+            this.type = '1'
         }else if(checkPermissionBtn(enClassifyBtn.classifyList_enClassify)){
             this.type = '2'
         }