hongze_yb_xcx/pages-myChart/classify.vue

<template>
    <view class="classify-list-page">
        <classifyItem :itemData="list.find(i=>i.my_chart_classify_id===-1)"></classifyItem>
        
        <drag
          ref="dragIns"
          generic:item="classify-item"
          :columns="1"
          :list-data="list.filter(i=>i.my_chart_classify_id!==-1)"
          :itemHeight="88"
          @sortend="sortend"
          @click="ItemClick"
          @scroll="chartScroll"
          :scroll-top="scrollTop"
        ></drag>


        <view class="add-classify-btn" @click="showAdd=true">添加分类</view>
        <van-dialog
            use-slot
            :title="editId?'编辑分类名称':'添加分类名称'"
            :show="showAdd"
            confirmButtonText="确定"
            show-cancel-button
            @close="showAdd=false"
            @confirm="handleConfirmAdd"
        >
            <input class="add-input" v-model="inputClassifyVal" maxlength="10" type="text" placeholder="请输入分类名称">
            <view style="color:#999;padding-left:10%;margin-bottom:40rpx;font-size:12px">注：字数控制在10个字以内！</view>
              
        </van-dialog>

        <van-dialog id="van-dialog" />
    </view>
      
</template>

<script>
import classifyItem from './components/classifyItem.vue'
import {
    apiMyChartClassifyAdd,
    apiMyChartClassifyEdit,
    apiMyChartClassifyDel,
    apiMyChartClassifySort,
    apiMyChartClassifyList
} from '@/api/myChart'
export default {
    components:{
        'classify-item':classifyItem
    },
    watch:{
        showAdd(n){
            if(!n){
                this.editId=0
                this.inputClassifyVal=''
            }
        }
    },
    data() {
        return {
            dragIns:null,
            list:[],

            showAdd:false,
            inputClassifyVal:'',
            editId:0,
        }
    },
    onLoad(){
        this.getClassifyList()
    },
    methods: {
        // 获取分类数据
        async getClassifyList(){
            const res=await apiMyChartClassifyList()
            if(res.code===200){
                const arr=res.data||[]
                this.list=arr.map(item=>{
                    return {
                        ...item,
                        dragId:item.my_chart_classify_id
                    }
                })
                setTimeout(() => {
                    this.dragIns=this.$refs.dragIns
                    this.dragIns.init();// 初始化列表
                }, 100);
            }
        },

        ItemClick(e){
            const item=e.detail.data
            const type=e.detail.extra.__args__[0]?.optType||''
            if(type==='del'){
                this.handleDel(item)
            }else if(type==='edit'){
                this.handleEdit(item)
            }else{
                uni.navigateTo({
                    url: `/pages-myChart/list?classifyId=${item.my_chart_classify_id}&classifyName=${item.my_chart_classify_name}`,
                    success: (result) => {},
                    fail: () => {},
                    complete: () => {}
                });
            }
            
        },

        // 删除
        handleDel(item){
            this.$dialog.confirm({
                title: '',
                message: `是否确认删除分类${item.my_chart_classify_name}？`,
                showCancelButton:true,
                confirmButtonText:'确定'
            })
            .then(() => {
                // on confirm
                apiMyChartClassifyDel({
                    classify_id:item.my_chart_classify_id
                }).then(res=>{
                    if(res.code===200){
                        uni.showToast({
                            title:"删除成功",
                            icon:"none"
                        })
                        this.getClassifyList()
                    }else if(res.code===4001){
                        this.$dialog.alert({
                            title: '',
                            message: '删除失败，该分类下有图表',
                            showConfirmButton:false,
                            showCancelButton:true,
                            cancelButtonText:'知道了'
                        }).then(() => {
                        // on close
                        });
                    }
                })
            })
            .catch(() => {
                // on cancel
            });
        },

        //编辑
        handleEdit(item){
            this.editId=item.my_chart_classify_id
            this.inputClassifyVal=item.my_chart_classify_name
            this.showAdd=true
        },

        //排序
        async sortend(e){
            // curIndex 为排序前元素所在位置  listData为排序后的数组
            let {curIndex,listData}=e.detail
            console.log(listData);
            const arr=listData.map((item,index)=>{
                return  {
                    sort:index+1,
                    classify_id:item.my_chart_classify_id
                }
            })
            const res=await apiMyChartClassifySort([...arr])
            if(res.code!==200){
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
            }
        },

        async handleConfirmAdd(){
            if(!this.inputClassifyVal){
                uni.showToast({
                    title: '请输入分类名称',
                    icon: 'none',
                });
                return 
            }
            let res
            if(this.editId){
                res=await apiMyChartClassifyEdit({
                    classify_name:this.inputClassifyVal,
                    classify_id:this.editId
                })
            }else{
                res=await apiMyChartClassifyAdd({
                    classify_name:this.inputClassifyVal
                })
            }
            if(res.code===200){
                uni.showToast({
                    title: `${this.editId?'编辑':'新增'}成功`,
                    icon: 'none',
                });
                this.showAdd=false
                this.getClassifyList()
            }
        }
    },

}
</script>

<style lang="scss" scoped>
.classify-list-page{
    padding: 34rpx 34rpx 120rpx 34rpx;
}

.add-classify-btn{
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 32rpx;
    padding-top: 18rpx;
    text-align: center;
    color: #E3B377;
    background: #333333;
    box-shadow: 0px 4rpx 20rpx rgba(160, 126, 84, 0.25);
    z-index: 99;
    padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
}

.add-input{
    display: block;
    width: 80%;
    background: #F7F8FA;
    border-radius: 8px;
    padding: 20rpx;
    margin: 30rpx auto 10rpx auto;
}

</style>