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" @menu-tap="contextMenuClick"
                                @change="menuChange"
                            />
                        </el-scrollbar>
                    </div>

                    <!-- 预算分类新增编辑弹窗 -->
                    <HcDialog bg-color="#ffffff" widths="22rem" is-to-body :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-item label="测算一级科目值:">
                                <el-input v-model="priceform.dictValue" />
                            </el-form-item>
                            <el-form-item label="序号:" prop="sort">
                                <el-input v-model="priceform.sort" oninput="value=value.replace(/[^\d]/g,'')" />
                            </el-form-item>
                        </el-form>
                    </HcDialog>
                </div>
            </HcCardItem>

            <div class="hc-page-content-box">
                <HcCardItem ui="hac-card-item" action-size="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" :is-index="false" :loading="tableLoaing">
                        <template #action="{ row }">
                            <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 bg-color="#ffffff" widths="24rem" is-to-body :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-item label="测算一级科目值:">
                                <el-input v-model="formLabelAlign.dictValue" />
                            </el-form-item>
                            <el-form-item label="序号:" prop="sort">
                                <el-input v-model="formLabelAlign.sort" oninput="value=value.replace(/[^\d]/g,'')" />
                            </el-form-item>
                        </el-form>
                    </HcDialog>
                </HcCardItem>
            </div>
        </div>
    </HcCard>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getChildList, getParentList, removeDictionary, submitDictionary } 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, 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, 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>