hlt_gis_admin/src/views/systemAdmin/system/zhiwei/index copy.vue

<template>
    <div class="p-4">
        <div class="zhiwei-header">
            <div class="zhiwei-title">职位管理</div>
            <div class="handle-btns">
                <a-button class="btn" type="primary" @click="addHandle">新增</a-button>
                <a-button class="btn" @click="editHandle">修改</a-button>
                <a-button class="btn" danger @click="delHandle">删除</a-button>
            </div>
        </div>
        <div class="zhiwei-body">
            <div class="structure-tree list-items">
                <div class="item-title">部门列表</div>
                <a-tree :replaceFields="replaceFields" :treeData="treeData" v-if="treeData" @select="nodeSelect"></a-tree>
            </div>
            <div class="posts-list list-items">
                <div class="item-title">职位列表</div>
                <div class="posts-box item-box">
                    <div class="posts item" v-for="(item, index) in posts.data" :key="index">
                        <span :class="{ 'chosed': item.departid === posts.currentId }" @click="chooseHandle(item, 'posts')">{{ item.departName }}</span>
                        <span v-if="item.departid === posts.currentId" style="color: red;" @click="openDetailModal(item)">查看</span>
                    </div>
                </div>
            </div>
        </div>
        <ZhiweiDrawer :formData="formData" :drawerTitle="drawerTitle" @onSubmit="onSubmit" ref="drawerRef"></ZhiweiDrawer>
        <ZhiweiModal v-if="showModal" @closeModal="showModal = false" :positionDetail="positionDetail"/>
    </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs, computed, onMounted, watch, createVNode } from 'vue';
import ZhiweiDrawer from './ZhiweiDrawer.vue';
import ZhiweiModal from './ZhiweiModal.vue';
import { structureList, getPostsList, delPosts } from '/@/api/sys/zhiwei';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

export default defineComponent({
    name: 'zhiwei',
    components: { ZhiweiDrawer, ZhiweiModal, ExclamationCircleOutlined },
    setup(props, { emit }) {
        const drawerRef = ref(null)
        const data = reactive({
            replaceFields: {
                children: 'children',
                title: 'name',
                key: 'id'
            },
            treeData: [],//单位列表树
            currentNode: "",//当前选中的树节点
            posts: {
                currentId: "",
                data: []
            },//职位数据
            formData: {
                departid: "",
                parentId: "",
                departName: "",
                orderId: 0,
                orgId: ""
            },
            drawerTitle: '新增职位',
            showModal:false,
            positionDetail:{}
        });
        /**
         * 点击树节点触发
         */
        const nodeSelect = (selectkey, { selectedNodes, node }) => {
            if (node.dataRef.departid === data.currentNode) {
                return;
            } else {
                data.currentNode = node.dataRef.departid
            }
            resetDatas()
            let params = {
                departmentId: node.dataRef.departid
            }
            getPostsList(params).then(res => {
                if (res.datas) {
                    data.posts.data = res.datas
                    !res.datas.length && message.info('该部门下无职位数据')
                }else{
                    message.info('该部门下无职位数据')
                }
            })
        };
        const resetDatas = () => {
            data.posts.data = []
            data.posts.currentId = ""
        }
        const chooseHandle = (item) => {
            if (data.posts.currentId === item.departid) {
                return;
            }
            data.posts.currentId = item.departid
        }
        const openDetailModal = (item) => {
            data.positionDetail = item
            data.showModal = true
        }
        onMounted(() => {
            structureList().then(res => {
                res.length && (data.treeData = res)
            })
        });
        /**
         * 对职位的操作
         */
        const addHandle = () => {
            if (data.currentNode === "") {
                message.error('请先选择机构！')
            } else {
                data.formData = {
                    departid: "",
                    parentId: "",
                    departName: "",
                    orderId: data.posts.data.length + 1,
                    orgId: data.currentNode
                }
                data.drawerTitle = '新增职位'
                drawerRef.value.showDrawer()
            }
        }
        const editHandle = () => {
            if (data.currentNode === "") {
                message.error('请先选择机构！')
            } else if (data.posts.currentId === "") {
                message.error('请先选择职位！')
            } else {
                data.posts.data.forEach(item => {
                    if (item.departid === data.posts.currentId) {
                        data.formData = {
                            departid: data.posts.currentId,
                            parentId: item.parentId,
                            departName: item.departName,
                            orderId: item.orderId
                        }
                        data.drawerTitle = '修改职位'
                        drawerRef.value.showDrawer()
                    }
                })
            }
        }
        const delHandle = () => {
            if (data.currentNode === "") {
                message.error('请先选择机构！')
            } else if (data.posts.currentId === "") {
                message.error('请先选择职位！')
            } else {
                Modal.confirm({
                    title: '删除提示',
                    icon: createVNode(ExclamationCircleOutlined),
                    content: '确定删除岗位？',
                    centered: true,
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk: (() => {
                        let params = {
                            orgId: data.currentNode,
                            departid: data.posts.currentId
                        }
                        delPosts(params).then(res => {
                            if (res.datas === 1) {
                                message.success('操作成功')
                                onSubmit(true)
                            } else {
                                message.error('操作失败')
                            }
                        })
                    })
                });

            }
        }
        const onSubmit = (e) => {
            if (e) {
                data.posts.data = []
                data.posts.currentId = ""
                let params = {
                    departmentId: data.currentNode
                }
                getPostsList(params).then(res => {
                    if (res.datas) {
                        data.posts.data = res.datas
                    }
                })
            }
        }
        return {
            drawerRef,
            ...toRefs(data),
            nodeSelect,
            chooseHandle,
            addHandle,
            editHandle,
            delHandle,
            openDetailModal,
            onSubmit
        };
    },
});
</script>

<style lang="less" scoped>
.p-4 {
    height: 100%;

    .zhiwei-header {
        padding: 10px;
        width: 100%;
        height: 70px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .zhiwei-title {
            font-size: 16px;
            font-weight: 500;
            margin-left: 20px;
            user-select: none;
        }

        .handle-btns {
            margin-right: 20px;
            display: flex;

            .btn {
                margin-right: 10px;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    .zhiwei-body {
        margin-top: 20px;
        width: 100%;
        // height: 800px;
        height: calc(100% - 90px);
        display: flex;

        .list-items {
            margin-right: 20px;
            padding: 10px;
            height: 100%;
            overflow: auto;
            flex: 1;
            background-color: #fff;

            &:last-child {
                margin-right: 0;
            }

            .item-title {
                padding-left: 10px;
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                background-color: #9eafe7;
            }

            .item-box {
                margin-top: 7px;

                .item {
                    width: fit-content;
                    height: 32px;
                    display: flex;
                    align-items: center;

                    span {
                        padding: 4px;
                        cursor: pointer;
                        user-select: none;

                        &:hover {
                            background-color: #f5f5f5;
                        }
                        margin-right: 30px;
                    }

                    .chosed {
                        background-color: #dbedff;
                    }
                }
            }
        }
    }
}
</style>