yb11.6

src/views/myChart/List.vue

@@ -81,20 +81,8 @@ function onLoad(){
                 />
             </el-select>
             </div>
-            
-            <el-popover
-                placement="bottom-start"
-                :width="400"
-                trigger="click"
-                popper-class="top-popper"
-            >
-                <template #reference>
-                    <img style="width:109px;cursor: pointer;" src="@/assets/myChart/btn-img.png" alt="">
-                </template>
-                <template #default>
-                    <SortClassify @change="getMyClassifyOpt"/>
-                </template>
-            </el-popover>
+            <SortClassify @change="getMyClassifyOpt"/>
+                
         </div>
         <SelfList 
             :finished="listState.finished" 
@@ -116,11 +104,7 @@ function onLoad(){
     </div>
 </template>
 
-<style>
-.top-popper{
-    padding: 0 !important;
-}    
-</style>
+
 <style lang="scss" scoped>
 
 .mychart-list-page{

src/views/myChart/components/SortClassify.vue

@@ -1,7 +1,13 @@
 <script setup>
-import {ref} from 'vue'
+import {ref,watch} from 'vue'
 import draggable from 'vuedraggable'
-import {apiMyChartClassifyList,apiMyChartClassifySort} from '@/api/myChart'
+import {
+    apiMyChartClassifyList,
+    apiMyChartClassifySort,
+    apiMyChartClassifyDel,
+    apiMyChartClassifyAdd,
+    apiMyChartClassifyEdit
+} from '@/api/myChart'
 import { ElMessage, ElMessageBox } from 'element-plus'
 const emit=defineEmits(['change'])
 
@@ -33,33 +39,145 @@ async function updateClassifySort(){
     if(res.code===200){
         ElMessage.success('操作成功')
         emit('change')
+    }else{
+        ElMessage.warning(res.msg)
     }
 }
 
+// 删除
+function handleDel(item){
+    ElMessageBox({
+        title:`操作提示`,
+        message:`是否确认删除分类“${item.my_chart_classify_name}”`,
+        center: true,
+        dangerouslyUseHTMLString: true,
+        confirmButtonText:'确定',
+        confirmButtonClass:'self-elmessage-confirm-btn',
+        showCancelButton:true,
+        cancelButtonText:'取消',
+        cancelButtonClass:'self-elmessage-cancel-btn'
+    }).then(()=>{
+        apiMyChartClassifyDel({classify_id:Number(item.my_chart_classify_id)}).then(res=>{
+            if(res.code===200){
+                ElMessage.success('删除成功')
+                emit('change')
+                getMyClassifyOpt()
+            }else{
+                ElMessage.warning(res.msg)
+            }
+        })
+    }).catch(()=>{
+            
+    })
+}
+
+//编辑
+function handleEdit(item){
+    inputText.value=item.my_chart_classify_name
+    cid.value=item.my_chart_classify_id
+    showAdd.value=true
+}
+
+//添加分类
+let showAdd=ref(false)
+let inputText=ref('')
+let cid=ref(0)
+
+watch(
+    ()=>showAdd.value,
+    (n)=>{
+        if(!n){
+            inputText.value=''
+            cid.value=0
+        }
+    }
+)
+
+async function handleConfirmAdd(){
+    if(!inputText.value){
+        ElMessage.warning('请填写分类名称')
+        return
+    }
+    let res=null
+    if(cid.value){
+        res=await apiMyChartClassifyEdit({
+            classify_name:inputText.value,
+            classify_id:cid.value
+        })
+    }else{
+        res=await apiMyChartClassifyAdd({
+            classify_name:inputText.value
+        })
+    }
+    if(res.code===200){
+        ElMessage.success(`${cid?'编辑':'新增'}成功`)
+        emit('change')
+        getMyClassifyOpt()
+        showAdd.value=false
+    }
+}
+
+
 </script>
 
 <template>
-    <div class="sort-classify-wrap">
-        <draggable 
-            class="list"
-            v-model="list" 
-            item-key="my_chart_classify_id"
-            animation="300"
-            @end="onSortEnd"
-        >
-            <template #item="{element}">
-                <div class="item">
-                    <span>{{element.my_chart_classify_name}}</span>
-                    <img src="@/assets/myChart/edit-icon.png" alt="">
-                    <img src="@/assets/myChart/del-icon.png" alt="">
-                    <img src="@/assets/myChart/drag-icon.png" alt="">
-                </div>
-            </template>
-        </draggable>
-        <div class="add-btn">添加分类</div>
-    </div>
+    <el-popover
+        placement="bottom-start"
+        :width="400"
+        trigger="click"
+        popper-class="top-popper"
+    >
+        <template #reference>
+            <img style="width:109px;cursor: pointer;" src="@/assets/myChart/btn-img.png" alt="">
+        </template>
+        <template #default>
+            <div class="sort-classify-wrap">
+                <draggable 
+                    class="list"
+                    v-model="list" 
+                    item-key="my_chart_classify_id"
+                    animation="300"
+                    @end="onSortEnd"
+                >
+                    <template #item="{element}">
+                        <div class="item">
+                            <span>{{element.my_chart_classify_name}}</span>
+                            <img src="@/assets/myChart/edit-icon.png" @click.stop="handleEdit(element)" alt="">
+                            <img src="@/assets/myChart/del-icon.png" alt="" @click.stop="handleDel(element)">
+                            <img src="@/assets/myChart/drag-icon.png" alt="">
+                        </div>
+                    </template>
+                </draggable>
+                <div class="add-btn" @click="showAdd=true">添加分类</div>
+            </div>
+        </template>
+    </el-popover>
+    
+    <!-- 添加分类弹窗 -->
+    <el-dialog
+        v-model="showAdd"
+        :title="cid?'编辑分类':'添加分类'"
+        :width="450"
+        draggable
+        :close-on-click-modal="false"
+        append-to-body
+    >
+        <div class="add-box">
+            <input v-model="inputText" type="text" placeholder="请输入分类名称" maxlength="10">
+            <p style="color:#999">注：字数控制在10个字以内</p>
+            <div style="text-align:center;margin:40px 0 20px 0">
+                <el-button round plain size="large" style="width:100px" @click="showAdd=false">取消</el-button>
+                <el-button round size="large" type="primary" style="width:100px" @click="handleConfirmAdd">确定</el-button>
+            </div>
+        </div>
+    </el-dialog>
 </template>
 
+<style>
+.top-popper{
+    padding: 0 !important;
+}    
+</style>
 <style lang="scss" scoped>
 .sort-classify-wrap{
     .list{
@@ -90,4 +208,18 @@ async function updateClassifySort(){
         cursor: pointer;
     }
 }
+.add-box{
+    input{
+        width: 100%;
+        display: block;
+        line-height: 40px;
+        border: 1px solid #DCDFE6;
+        padding: 0 15px;
+        box-sizing: border-box;
+        border-radius: 40px;
+        &:focus{
+            outline: none;
+        }
+    }
+}
 </style>