hac/src/views/system/components/tab-cost.vue

<template>
    <HcCard>
        <div class="hc-page-layout-box system-parameter">
            <HcCardItem ui="hac-card-item w-60 mr-5">
                <template #header>
                    <span class="mr-2">成本测算分类:</span>
                    <el-button _icon hc-btn size="small" type="primary" @click="openpriceEdit(1)">
                        <HcIcon name="add"/>
                    </el-button>
                </template>
                <div> <span class="mt-2">测算一级科目:</span></div>
                <div class="hc-layout-left-box menu mt-3">
                    <div class="hc-menu-contents-box">
                        <el-scrollbar>
                            <HcMenuSimple :datas="menuOptions" :keys="menuKey" :props="menusProps"
                                          :menus="contextMenu" @menuTap="contextMenuClick"
                                          @change="menuChange"/>
                        </el-scrollbar>
                    </div>

                    <!--预算分类新增编辑弹窗-->
                    <HcDialog bgColor="#ffffff" widths="22rem" isToBody :show="priceModal" :title="priceTitle" @close="priceModalClose" @save="saveparentClick">
                        <el-form :model="priceform" label-position="top" label-width="auto" size="large">
                            <el-form-item label="预算一级科目名称:">
                                <el-input v-model="priceform.dictName"/>
                            </el-form-item>
                        </el-form>
                    </HcDialog>
                </div>
            </HcCardItem>

            <div class="hc-page-content-box">
                <HcCardItem ui="hac-card-item" actionSize="lg">
                    <template #header>
                        <span class="mr-2">测算二级科目:</span>
                        <el-button _icon hc-btn size="small" type="primary" @click="openEdit(1)">
                            <HcIcon name="add"/>
                        </el-button>
                    </template>
                    <HcTable :column="tableColumn" :datas="tableData"  :isIndex="false" :loading="tableLoaing">
                        <template #action="{row, index}">
                            <el-button size="small" type="primary" @click="openEdit(2,row)">编辑</el-button>
                            <el-button size="small" type="primary" @click="delTask(row)">删除</el-button>
                        </template>
                    </HcTable>

                    <!--任务明细弹窗-->
                    <HcDialog bgColor="#ffffff" widths="24rem" isToBody :show="editTaskModal" :title="taskTitle" @close="testModalClose" @save="savechilidClick">
                        <el-form label-position="top" label-width="auto" :model="formLabelAlign" size="large">
                            <el-form-item label="预算二级科目名称:">
                                <el-input v-model="formLabelAlign.dictName"/>
                            </el-form-item>
                        </el-form>
                    </HcDialog>

                </HcCardItem>
            </div>
        </div>
 
    </HcCard>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import {submitDictionary,removeDictionary,getParentList,getChildList} from '~api/system/parameter.js';
import {getArrValue} from "js-fast-way"

const props = defineProps({
    cur: {
        type: [String,Number],
        default: ''
    },
    type:{
        type: [String,Number],
        default: ''
    }
})

const tabsKey = ref(props.cur)
const tabsType = ref(props.type)

//监听
watch(() => [
    props.cur,
    props.type,
], ([key,type]) => {
    tabsKey.value = key
    tabsType.value = type
   
})

onMounted(() => {
    setContextMenu()
    getParentListData()
   
})

//左侧菜单
const menuKey = ref('')
const menuOptions = ref([]);
const menuItem=ref({})
const menuChange = (item) => {
    console.log(item)
    menuKey.value = item?.id
    menuItem.value=item
    getChildListData()
}
const menusProps = ref({
    key: 'id',
    label: 'dictName'
})

//菜单的右键菜单
const contextMenu = ref([])
const setContextMenu = () => {
    let newArr = [];
    newArr.push({icon: 'draft', label: '编辑分类', key: "edit"})
    newArr.push({icon: 'delete-bin', label: '删除分类', key: "del"})

    contextMenu.value = newArr
}

//菜单的右键菜单被点击
const contextMenuClick = ({key, item}) => {
    console.log(item,'item');
    menuKey.value = item?.id
  
    if (key === 'edit') {
        openpriceEdit(2)
        menuKey.value = item?.id
        priceform.value.dictName=item.dictName
    } else if (key === 'del') {
        window?.$messageBox?.alert('您确定要删除该预算分类信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
            showCancelButton: true,
            confirmButtonText: '确认注销',
            cancelButtonText: '取消',
            type: 'warning',
            callback: async(action) => {
                if (action === 'confirm') {
                        const {error, code, msg} = await removeDictionary({
                            ids: item?.id,
                        })
                        if (!error && code === 200) {
                            window?.$message?.success('删除成功')
                            getParentListData()
                        } else {
                            window?.$message?.warning(msg)
                        }
                }
            }
        })
    }
}

const priceTitle = ref('')
const priceModal = ref(false)
const openpriceEdit = (type) => {
    if (type === 1) {
        priceTitle.value = '新增分类'
        priceform.value={}
        menuKey.value=''
    } else {
        priceTitle.value = '编辑分类'
    }

    priceModal.value = true
}

const priceform = ref({})
const priceModalClose = () => {
    priceModal.value = false
}

const taskTitle = ref('')
const openEdit = (type,row) => {
    
    if (type === 1) {
        formLabelAlign.value.dictName=''
        formLabelAlign.value.id=''
        taskTitle.value = '新增'
    } else {
        formLabelAlign.value.dictName=row.dictName
        formLabelAlign.value.id=row.id
        taskTitle.value = '编辑'
    }
    if(menuKey.value){
       
        editTaskModal.value = true
    }else{
        window.$message.warning('请先选择一级科目')
    }
   
}


const editTaskModal = ref(false)
const testModalClose = () => {
    editTaskModal.value = false
}

const delTask = (item) => {
    window?.$messageBox?.alert('您确定要删除该预算科目信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
            showCancelButton: true,
            confirmButtonText: '确认注销',
            cancelButtonText: '取消',
            type: 'warning',
            callback: async(action) => {
                if (action === 'confirm') {
                        const {error, code, msg} = await removeDictionary({
                            ids: item?.id,
                        })
                        if (!error && code === 200) {
                            window?.$message?.success('删除成功')
                            getParentListData()
                        } else {
                            window?.$message?.warning(msg)
                        }
                }
            }
        })
}

const tableColumn = [
    {key: 'dictName', name: '预算二级科目',align:'center'},
    // {key: 'text', name: '任务内容'},
    // {key: 'color', name: '完成指标'},
    {key: 'action', name: '操作', width: 200}
]
const tableData = ref([])
const tableLoaing=ref(false)
const formLabelAlign = ref({
    name: '',
    region: '',
    type: '',
})


//新增一级科目
const saveparentClick=async()=>{
    const { error, code, data,msg } = await submitDictionary({
        type:tabsType.value,
        dictName:priceform.value?.dictName,
        id:menuKey.value||null,
    })
   
    if (!error && code === 200) {
        window.$message?.success(msg)
        priceModal.value=false
        getParentListData()
    } 
    else {
        window.$message?.warning(msg)
    }
}
//新增二级级科目
const savechilidClick=async()=>{
    const { error, code, data,msg } = await submitDictionary({
        type:tabsType.value,
        dictName:formLabelAlign.value?.dictName,
        id:formLabelAlign.value.id||null,
        parentId:menuKey.value
    })
   
    if (!error && code === 200) {
        window.$message?.success(msg)
        editTaskModal.value=false
        getChildListData()
    } 
    else {
        window.$message?.warning(msg)
    }
}
//获取一级科目
const getParentListData=async()=>{
    const { error, code, data,msg } = await getParentList({
        type:tabsType.value,
       
    })
    if (!error && code === 200) {
        menuOptions.value = getArrValue(data['records'])
        if( menuOptions.value.length>0){
            menuKey.value= menuOptions.value[0]?.id
            menuItem.value.id =   menuOptions.value[0]?.id
            getChildListData()
        }
    } 
    else {
        menuOptions.value =[]
        window.$message?.warning(msg)
    }
}
//获取二级科目
const getChildListData=async()=>{
    tableLoaing.value=true
    const { error, code, data,msg } = await getChildList({
        parentId: menuItem.value.id,
        type:tabsType.value,
    })
    tableLoaing.value=false
    if (!error && code === 200) {
        tableData.value=getArrValue(data)
        // tab.value = getArrValue(data['records'])
    } 
    else {
        window.$message?.warning(msg)
    }
}
</script>

<style lang="scss">
.hc-page-layout-box.system-parameter {
    display: flex;
    position: relative;
    // height: calc(100vh - 228px);
    .hc-layout-left-box.menu {
        width: 100%;
        height: 100%;
        position: relative;
        background: inherit;
        margin-right: auto;
        border-radius: 0;
        box-shadow: none;
        .hc-menu-contents-box {
            position: relative;
            padding: 0;
            height: 100%;
            // height: calc(100% - 60px);
        }
        .hc-menu-simple-box {
            padding: 0;
            .item-box {
                box-shadow: none;
                padding: 8px 10px;
                border-radius: 4px;
                background: var(--el-color-primary-light-8);
                .label-box {
                    color: #8c8c8c;
                }
                .menu-icon {
                    margin-left: 20px;
                    background: inherit;
                    .menu-popover-icon {
                        color: #8c8c8c;
                        .hc-icon-i {
                            font-size: 20px;
                            line-height: initial;
                        }
                    }
                }
            }
            .item-box.active {
                background: var(--el-color-primary-light-5);
                .label-box {
                    color: white;
                }
                .menu-icon .menu-popover-icon {
                    color: white;
                }
            }
        }
        .hc-menu-header-box {
            position: relative;
            padding: 15px 18px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #E9E9E9;
            .name {
                flex: auto;
                position: relative;
            }
        }
    }
    .hc-page-content-box {
        flex: 1;
        position: relative;
    }
}
</style>