engineering_admin/src/views/oa_Initiate/index.vue

<template>
    <div class="flex content">
        <el-card style="flex:1" class="mr-5 left">
            <template #header>
                审批新申请
            </template>
            <div v-for="(item, index) in lists.filter(e => e.children.length > 0)" :key="index" class="tit">
                {{ item.name }}
                <div class="tit-content">
                    <div v-for="(e, i) in item.children" :key="i" class="tit-li" @click="handleEdit(e.id, item.value)">{{
                        e.title }}
                    </div>
                </div>
            </div>
        </el-card>
        <el-card style="flex:4">
            <template #header>
                审批列表
            </template>
            <el-form class="mb-[-16px] mt-5" :model="queryParams" inline>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="queryParams.type" clearable placeholder="请选择类型" class="flex-1">
                        <el-option label="全部" :value="1" />
                        <el-option label="待审核" :value="2" />
                        <!-- <el-option label="审核中" :value="2" /> -->
                        <el-option label="审核通过" :value="3" />
                        <el-option label="审核不通过" :value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
            <div class="mt-4">
                <el-table :data="pager.lists">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="申请人" prop="user_name" show-overflow-tooltip />
                    <el-table-column label="申请时间" prop="create_time" show-overflow-tooltip />
                    <el-table-column label="审批类型" prop="type_name" show-overflow-tooltip />
                    <el-table-column label="所属部门" prop="dept_name" show-overflow-tooltip />
                    <el-table-column label="当前审批人" prop="check_admin_users" show-overflow-tooltip />
                    <el-table-column label="审批状态" prop="check_status_text" show-overflow-tooltip />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template #default="{ row }">
                            <el-button link @click="handDetail(row.id)">
                                详情
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="flex mt-4 justify-end">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" :type="type" @close="showEdit = false" />
        <detailPopup v-if="showDetail" ref="detailRef" @reEdit="reEdit" @success="showDetail = false, getLists()"
            @close="showDetail = false, getLists()" />

    </div>
</template>

<script lang="ts" setup >
import { ref, shallowRef, nextTick, reactive } from 'vue'
import { usePaging } from '@/hooks/usePaging';
import { apiOaFlowTypeLists, apiOaoaApproveLists, apiOaoaApproveDetail } from "@/api/oa_Initiate"
import EditPopup from './edit.vue'
import detailPopup from './detail.vue'
import { apiOaFlowTypeDetail } from '@/api/oa_flow_type'


const editRef = shallowRef<InstanceType<typeof EditPopup>>()
// 是否显示编辑框
const showEdit = ref(false)

const detailRef = ref(null)
// 是否显示编辑框
const showDetail = ref(false)
const type = ref(1)

// 查询条件
const queryParams = reactive({
    type: 1
})



// 编辑
const handleEdit = async (id: any, cate = '', extend = '') => {
    type.value = cate
    let res = await apiOaFlowTypeDetail({ id })
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.setFormData(res)
    if (Object.keys(extend).length) {
        editRef.value?.setExtend(extend)
    }
}

const handDetail = async (id: any, data = {}) => {
    let res = await apiOaoaApproveDetail({ id })
    showDetail.value = true
    await nextTick()
    detailRef.value?.open()
    detailRef.value?.setFormData(res)
}

const reEdit = async (data) => {
    showDetail.value = false
    await nextTick()
    handleEdit(data?.flow_info?.flow_cate, '', data.extends)
}

// 删除
const handleDelete = async (id: number) => {
    await apiOaFlowTypeDelete({ id })
    getLists()
}

// 批量删除
const handleBatchDelete = async () => {
    const ids = pager.lists.map((item) => item.id)
    await apiOaFlowTypeDelete({ ids })
    getLists()

}

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiOaoaApproveLists,
    params: queryParams
})
const activeName = ref('first')
getLists()


const lists = ref([])
const getTypeList = async () => {
    const res = await apiOaFlowTypeLists()
    lists.value = res
}
getTypeList()
</script>

<style lang="scss" scoped>
.content {
    height: 82vh;
}

.left {
    overflow-y: auto;
    height: 82vh;
}

.left::-webkit-scrollbar {
    display: none;
}

.tit {
    margin-bottom: 10px;

    .tit-content {
        display: flex;
        // justify-content: space-between;
        flex-wrap: wrap;

        .tit-li {
            width: 60px;
            background: #FF8F4A;
            color: white;
            text-align: center;
            height: 60px;
            line-height: 60px;
            cursor: pointer;
            margin-bottom: 5px;
            margin-right: 5px;

        }
    }

}
</style>