hac/src/views/system/components/tab-approve.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>
                </div>
            </HcCardItem>

            <div class="hc-page-content-box">
                <HcCardItem ui="hac-card-item" action-size="lg">
                    <template #header>
                        <span class="mr-2">流程设置:</span>
                    </template>
                    <template #extra>
                        <el-button size="large" type="primary" hc-btn :disabled="menuKey.length < 1" :loading="saveApprovelaoding" @click="saveApprove">
                            <HcIcon name="save" />
                            <span>保存</span>
                        </el-button>
                    </template>
                    <div class="approve-box">
                        <el-checkbox-group v-model="checkList" @change="handleCheckedApproveChange">
                            <el-checkbox v-for="item in checkData" :key="item" :label="item.dictName" />
                        </el-checkbox-group>
                        <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" ui="hc-test-drop-table" is-row-drop is-sort @row-drop="rowDropTap" @row-sort="rowSortTap" />
                    </div>

                    <div class="approve-box mt-4">
                        <el-checkbox-group v-model="checkList1" @change="handleCheckedApproveChange1">
                            <el-checkbox v-for="item in checkData" :key="item" :label="item.dictName" />
                        </el-checkbox-group>
                        <HcTable :column="tableColumn1" :datas="tableData1" ui="hc-test-drop-table" class="mt-4" />
                    </div>
                </HcCardItem>
            </div>
        </div>
    </HcCard>
    <!-- 预算分类新增编辑弹窗 -->
    <HcDialog bg-color="#ffffff" widths="22rem" is-to-body :show="priceModal" :title="priceTitle" @close="priceModalClose" @save="saveparentClick">
        <el-form ref="formRef" :model="priceform" label-position="top" label-width="auto" size="large" :rules="formRules"> 
            <el-form-item label="一级科目名称:" prop="dictName">
                <el-input v-model="priceform.dictName" />
            </el-form-item>
        </el-form>
    </HcDialog>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getApproveList, getParentList, removeDictionary, submitApproveList, submitDictionary } from '~api/system/parameter.js'
import { formValidate, 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()
    getcheckData()

})
const menuItem = ref({})
//获取一级科目
const getParentListData = async ()=>{
    const { error, code, data, msg } = await getParentList({
        type:tabsType.value,
        size:1000,

    })
    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
            getApproveListData()

        }
    } else {
        menuOptions.value = []
        window.$message?.warning(msg)
    }
}

const checkList = ref([])
const checkList1 = ref([])

//左侧菜单
const menuKey = ref('')
const menuOptions = ref([])
const menuChange = (item) => {
    console.log(item)
    menuKey.value = item?.id
    menuItem.value = item
    getApproveListData()

}
const getApproveListData = async ()=>{
    checkList.value = []
    checkList1.value = []
    const { error, code, data } = await getApproveList({
       id:menuKey.value,
    })
    if (!error && code === 200) {
      tableData.value = data?.审批岗位 || []
      tableData1.value = data?.抄送信息 || []
      if (tableData.value.length > 0) {
        tableData.value.forEach((ele)=>{
        checkList.value.push(ele.roleName)
        })
      } else {
        checkList.value = []
      }
    if (tableData1.value.length > 0) {
        tableData1.value.forEach((ele)=>{
        checkList1.value.push(ele.roleName)
      })
    } else {
        checkList1.value = []
    }

    } else {
        tableData.value = []
        tableData1.value = []
    }

}
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 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 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 formRef = ref(null)
const formRules = {
    dictName: [
        { required: true, message: '请输入名称', trigger: 'blur' },
    ],
}   

  

const saveparentClick = async ()=>{
    const res = await formValidate(formRef.value)
    if (res) {
        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()
        } 
    }
  
}
const tableColumn = [
    { key: 'roleName', name: '审批岗位', align:'center' },

]
const tableData = ref([])
const tableData1 = ref([])
const handleCheckedApproveChange = (val)=>{
    console.log(val, 'val')
    let tabarr = []
    checkData.value.forEach((item)=>{
        val.forEach((ele)=>{
            if (item.dictName === ele) {
                tabarr.push({ roleName:ele, roleId: item.id })
            }

        })
    })

    tableData.value = tabarr
}
const handleCheckedApproveChange1 = (val)=>{
    let tabarr = []
    checkData.value.forEach((item)=>{
        val.forEach((ele)=>{
            if (item.dictName === ele) {
                tabarr.push({ roleName:ele, roleId: item.id })
            }

        })
    })
    tableData1.value = tabarr
}
const tableColumn1 = [
    { key: 'roleName', name: '抄送信息', align:'center' },

]
const checkData = ref([])
const getcheckData = async ()=>{
    const { error, code, data, msg } = await getParentList({
        code:'dept_info',
        type:11,
        size:1000,

    })
    if (!error && code === 200) {
        checkData.value = getArrValue(data['records'])

    } else {
        checkData.value = []
        window.$message?.warning(msg)
    }
}


// 行拖拽
const tableRef = ref(null)
const rowDropTap = (rows) => {
  
    tableRef.value?.setData(rows)
}
// 点击排序
const rowSortTap = (rows) => {
    tableData.value = rows
}

const saveApprovelaoding = ref(false)
const subObj = ref({})
//保存流程
const saveApprove = ()=>{
    console.log(tableData.value, '审批岗位')
    console.log(tableData1.value, '抄送信息')
    subObj.value.approveRoleList = tableData.value
    subObj.value.ccRoleList = tableData1.value
    subObj.value.dictId = menuKey.value
    console.log( subObj.value, ' subObj.value')
    submitApprove()


}
const submitApprove = async ()=>{
    saveApprovelaoding.value = true
    const { error, code, msg } = await submitApproveList( subObj.value)
    saveApprovelaoding.value = false
    if (!error && code === 200) {
        window.$message.success(msg)
    }

}
</script>

<style scoped 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;
            padding-bottom: 30px;
            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;
    }
}
.approve-box{
    border: 1px dashed rgb(187, 187, 187);
    padding: 20px;
}
</style>