从业人员管理页面

guanqb

2024-03-14 bda9133b8767d946cab2c7ebc4924820633a520d

从业人员管理页面

 src/api/practitionersManage/index.js

New file
@@ -0,0 +1,48 @@
import request from "@/router/axios.js"

/**
 * 获取从业人员列表
 * @returns
 */
export const getPlacePractitionerPage = (params) => {
    return request({
        url: "/api/blade-placePractitioner/placePractitioner/page",
        method: "get",
        params
    })
}

/**
 * 获取从业人员有前科数量
 * @returns
 */
export const getCountByType = (params) => {
    return request({
        url: "/api/blade-placePractitioner/placePractitioner/countByType",
        method: "get",
        params
    })
}

/**
 * 获取从业人员详情
 * @returns
 */
export const getDetail = (params) => {
    return request({
        url: "/api/blade-placePractitioner/placePractitioner/getDetail",
        method: "get",
        params
    })
}

/**
 * 获取证件类型字典
 * @returns
 */
export const getCardType = () => {
    return request({
        url: "/api/blade-system/dict-biz/tree?code=cardType",
        method: "get",
    })
}

 src/components/pomDialog/index.vue

@@ -187,7 +187,8 @@
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                    return 'http://10.141.11.11/place/' + ele
                    // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []

 src/components/prmDialog/index.vue

New file
@@ -0,0 +1,188 @@
<template>
    <el-dialog class="syld-details-box prm-dialog-popup business-detail-box" :title="'从业人员详情'" append-to-body
        :close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
        <div class="all-box">
            <div class="item-box">
                <div class="label">工作场所名称：</div>
                <div class="value">{{ rowDetail.placeName }}</div>
            </div>
            <div class="item-box">
                <div class="label">工作场所地址：</div>
                <div class="value">{{ rowDetail.location }}</div>
            </div>
            <div class="item-box">
                <div class="label">工作场所负责人：</div>
                <div class="value">{{ rowDetail.principal }}</div>
            </div>
            <div class="item-box">
                <div class="label">负责人电话：</div>
                <div class="value">{{ rowDetail.principalPhone }}</div>
            </div>
            <div class="item-box">
                <div class="label">电话：</div>
                <div class="value">{{ rowDetail.telephone }}</div>
            </div>
            <div class="item-box">
                <div class="label">暂住地：</div>
                <div class="value">{{ rowDetail.tempAddress }}</div>
            </div>
            <div class="item-box">
                <div class="label">年龄：</div>
                <div class="value">{{ rowDetail.age }}</div>
            </div>
            <div class="item-box">
                <div class="label">性别：</div>
                <div class="value">{{ rowDetail.gender }}</div>
            </div>
            <div class="item-box">
                <div class="label">身份证：</div>
                <div class="value">{{ rowDetail.idCard }}</div>
            </div>
            <div class="item-box">
                <div class="label">证件类型：</div>
                <div class="value">{{ rowDetail.cardType }}</div>
            </div>
            <div class="item-box">
                <div class="label">工作单位：</div>
                <div class="value">{{ rowDetail.employer }}</div>
            </div>
            <div class="item-box">
                <div class="label">户籍地址：</div>
                <div class="value">{{ rowDetail.registeredAddress }}</div>
            </div>
            <div class="item-box">
                <div class="label">岗位性质：</div>
                <div class="value">{{ rowDetail.jobNature }}</div>
            </div>
            <div class="item-box">
                <div class="label">微信号：</div>
                <div class="value">{{ rowDetail.wxAcccount }}</div>
            </div>
            <div class="item-box">
                <div class="label">生日：</div>
                <div class="value">{{ rowDetail.birthday }}</div>
            </div>
            <div class="item-box">
                <div class="label">民族：</div>
                <div class="value">{{ rowDetail.ethnicty }}</div>
            </div>
            <div class="item-box">
                <div class="label">是否有前科：</div>
                <div class="value">{{ rowDetail.criminalRecordFlag == 1 ? '是' : '否' }}</div>
            </div>
            <div class="item-box">
                <div class="label">前科类型：</div>
                <div class="value">{{ rowDetail.anoTypeName }}</div>
            </div>
            <div class="item-box">
                <div class="label">从业人员照片：</div>
                <div class="value">
                    <el-image style="width: 100px; height: 100px" :src="rowDetail.employerImg"
                        :preview-src-list="rowDetail.employerImg">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i> 暂无图片
                        </div>
                    </el-image>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { getDetail, getCardType } from "@/api/practitionersManage/index.js"

export default {
    name: 'PrmDialogPopup',

    data () {
        return {
            popupShow: false,
            rowDetail: {},
            cardTypeOptions: []
        }
    },

    created () {
        this.getCardType()
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (row) {
            this.popupShow = true
            getDetail({ id: row.id }).then(res => {
                let data = res.data.data
                data.employerImg = this.getImgUrls(data.employerImg)
                this.cardTypeOptions.forEach(item => {
                    if (item.key == data.cardType) {
                        data.cardType = item.title
                    }
                })
                this.rowDetail = data
            })
        },

        // 关闭弹窗按钮
        popupClose () {
            this.popupShow = false
        },

        // 图片转换
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'http://10.141.11.11/place/' + ele
                    // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

        // 获取证件类型字典
        getCardType () {
            getCardType().then(res => {
                this.cardTypeOptions = res.data.data
            })
        },
    },
}
</script>

<style lang="scss" scoped>
:deep(.el-image__error) {
    height: 120px;
}

.flex {
    display: flex;
}

.f-d-c {
    flex-direction: column;
}

.flex-1 {
    height: 0;
    flex: 1;
}

.all-box {
    display: flex;
    flex-wrap: wrap;

    .item-box {
        width: 50%;
        display: flex;
        // height: 40px;
        margin-bottom: 20px;


        .label {
            min-width: 120px;
            text-align: right;
            padding-right: 10px;
        }
    }
}
</style>

 src/styles/media/index.scss

@@ -3275,7 +3275,8 @@
        }
    }

    .site-dialog-popup {
    .site-dialog-popup,
    .prm-dialog-popup {
        .el-dialog {
            width: countSizeVw(860, 1920);
            height: countSizeVh(500);
@@ -3546,6 +3547,13 @@
        }
    }

    .prm-dialog-popup {
        .el-dialog {
            width: countSizeVw(860, 1920);
            height: countSizeVh(600);
        }
    }

    .scan-or-code-page,
    .site-page-home {
        .time-select {

 src/views/layout/index.vue

@@ -68,7 +68,7 @@
                            :style="{ color: currentUrl == '/layout/practitionersManage' ? '#fcbd56' : '#fff' }"
                            @click="goToCYRY">
                            <i class="el-icon-s-custom"></i>
                            从业人员管理
                            从业人员
                        </div>
                        <div class="back-system" v-if="permission.operation_manager" @click="goToBack">
                            <i class="el-icon-user-back"></i>

 src/views/practitionersManage/index.vue

@@ -17,7 +17,7 @@
                <div class="search-item-box">
                    <span>关键字：</span>

                    <el-input style="flex: 1;" size="small" placeholder="请输入（姓名、联系电话、工作场所）" v-model="placeName"
                    <el-input style="flex: 1;" size="small" placeholder="请输入（姓名、联系电话、工作场所）" v-model="keyword"
                        @change="searchChange" clearable></el-input>
                </div>

@@ -26,7 +26,10 @@
                    <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <div class="search-item-box" style="justify-content: center;">
                    <el-button @click="filterBtn" icon="el-icon-notebook-2" class="bjnr-btn">有前科（数量）</el-button>
                    <el-button @click="filterBtn" icon="el-icon-notebook-2" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">有前科（{{ scycNum ? scycNum :
            '0'
                        }}）</el-button>
                </div>
            </div>

@@ -35,9 +38,9 @@
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
                    :row-class-name="tableRowClassName" class="police-infor-table">
                    <el-table-column prop="placeName" :show-overflow-tooltip="true" label="姓名"></el-table-column>
                    <el-table-column prop="location" :show-overflow-tooltip="true" label="联系电话"></el-table-column>
                    <el-table-column prop="frontName" :show-overflow-tooltip="true" label="工作场所"></el-table-column>
                    <el-table-column prop="name" :show-overflow-tooltip="true" label="姓名"></el-table-column>
                    <el-table-column prop="telephone" :show-overflow-tooltip="true" label="联系电话"></el-table-column>
                    <el-table-column prop="placeName" :show-overflow-tooltip="true" label="工作场所"></el-table-column>
                    <el-table-column width="80" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
@@ -57,13 +60,13 @@

        </div>

        <PomDialogPopup ref="PomDialogPopup"></PomDialogPopup>
        <PrmDialogPopup ref="PrmDialogPopup"></PrmDialogPopup>
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { getFrontTypeTree, getFrontPage } from "@/api/site/index.js"
import { getPlacePractitionerPage, getCountByType } from "@/api/practitionersManage/index.js"

let loading = null

@@ -73,25 +76,22 @@
    data () {
        return {
            boxShow: false,

            placeName: '',
            typeValue: '',
            typeOptions: [],

            keyword: '',
            tableData: [],

            pages: {
                current: 1,
                size: 22,
                total: 0,
                count: 0,
            },
            scycNum: 0,
            criminalRecordFlag: '',
        }
    },

    created () {
        this.getFrontTypeTree()
        this.getFrontPage()
        this.getCountByType()
        this.getPlacePractitionerPage()
        const that = this

        that.$nextTick(() => {
@@ -132,44 +132,42 @@
    methods: {
        // 有前科筛选按钮
        filterBtn () {

            if (this.criminalRecordFlag == '1') {
                this.criminalRecordFlag = ''
            } else {
                this.criminalRecordFlag = 1
            }
            this.getPlacePractitionerPage()
        },

        getFrontTypeTree () {
            getFrontTypeTree().then(res => {
                this.typeOptions = res.data.data
            })
        },

        // 切换登记类型
        typeChange () {
            this.pages.current = 1
            this.getFrontPage()
        },

        // 搜索条件改变
        searchChange () {
            if (this.placeName.trim() == '') {
            if (this.keyword.trim() == '') {
                this.pages.current = 1
                this.getFrontPage()
                this.getCountByType()
                this.getPlacePractitionerPage()
            }
        },

        // 点击搜索
        searchBtn () {
            this.pages.current = 1
            this.getFrontPage()
            this.getCountByType()
            this.getPlacePractitionerPage()
        },

        // 重置搜索
        resetSearch () {
            this.pages.current = 1
            this.typeValue = ''
            this.placeName = ''
            this.getFrontPage()
            this.keyword = ''
            this.getCountByType()
            this.getPlacePractitionerPage()
        },

        // 分页处理
        handleCurrentChange (current) {
            this.pages.current = current
            this.getFrontPage()
            this.getPlacePractitionerPage()
        },

        // 加载动画
@@ -182,24 +180,24 @@
            })
        },

        getFrontPage () {
        // 获取有前科数量
        getCountByType () {
            getCountByType({ searchKey: this.keyword }).then(res => {
                this.scycNum = res.data.data.scycNum
            })
        },

        // 获取列表数据
        getPlacePractitionerPage () {
            this.loading()

            getFrontPage({
            getPlacePractitionerPage({
                current: this.pages.current,
                size: this.pages.size,
                frontType: this.typeValue,
                isFront: 1,
                placeName: this.placeName
                searchKey: this.keyword,
                criminalRecordFlag: this.criminalRecordFlag
            }).then(res => {
                const data = res.data.data
                data.records.forEach(element => {
                    this.typeOptions.forEach(item => {
                        if (item.key == element.frontType) {
                            element.frontName = item.title
                        }
                    })
                })
                this.tableData = data.records
                this.pages.total = data.total

@@ -242,11 +240,12 @@
                incident: this.siteClick
            })

            this.$refs.PomDialogPopup.initOpen(row)
            this.$refs.PrmDialogPopup.initOpen(row)
        },

        // 点击图标
        siteClick (e) {
            this.$refs.PomDialogPopup.initOpen(e.overlay.attrParams)
            this.$refs.PrmDialogPopup.initOpen(e.overlay.attrParams)
        },

        // 清空按钮-清除图标图层
@@ -301,4 +300,8 @@
        justify-content: center;
    }
}

.isOneClick {
    color: #fcbd56 !important;
}
</style>