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" actionSize="lg">
                    <template #header>
                        <span class="mr-2">流程设置:</span>
                    </template>
                    <template #extra>
                        <el-button size="large" type="primary" hc-btn @click="saveApprove" :disabled="menuKey.length<1" :loading="saveApprovelaoding">
                        <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 :column="tableColumn" :datas="tableData" ui="hc-test-drop-table" isRowDrop isSort  @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 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>
</template>

<script setup>
import {onMounted, ref, watch,nextTick} from "vue";
import {submitDictionary,removeDictionary,getParentList,getApproveList,submitApproveList} 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()
    getcheckData()
   
})
const menuItem=ref({})
//获取一级科目
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
            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,msg } = 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 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 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
       
    })
    if (!error && code === 200) {
        checkData.value = getArrValue(data['records'])
        
    } 
    else {
        checkData.value =[]
        window.$message?.warning(msg)
    }
}


// 行拖拽
const rowDropTap = (rows) => {
    tableData.value = 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, data,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;
            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>