|
|
@@ -0,0 +1,211 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog :title="title" width="80%" top="10vh" center :before-close="dialogClose" :visible.sync="visible"
|
|
|
+ @open="handleOpen" @close="handleClose">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-tree v-if="treeData.length !== 0" :data="treeData" :props="defaultProps" node-key="id"
|
|
|
+ default-expand-all @node-click="handleNodeClick">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <i class="el-icon-folder" style="color: #DFBA49; margin-right: 5px;"></i>
|
|
|
+ <span style="font-size: 15px;">{{ node.label }}</span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="19">
|
|
|
+ <!-- 搜索信息 -->
|
|
|
+ <el-form ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="80px">
|
|
|
+ <el-form-item label="姓名" prop="staffName">
|
|
|
+ <el-input v-model="queryParams.staffName" placeholder="请输入姓名" clearable style="width: 230px" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search" size="mini" @click="searchEvent">查询</el-button>
|
|
|
+ <el-button ref="btn" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 数据组表格信息 -->
|
|
|
+ <CommonTable ref="staffTable" :tableHeaderTitle="tableHeaderTitle" :tableData="tableData"
|
|
|
+ :isShowCheckbox="isShowCheckbox" :isShowIndex="isShowIndex" :tableHight="tableHight"
|
|
|
+ :tableOperate="tableOperate" @receiveCheckedData="receiveCheckedData"
|
|
|
+ @chooseStaffEvent="chooseStaffEvent">
|
|
|
+ </CommonTable>
|
|
|
+ <!-- 分页信息 -->
|
|
|
+ <pagination v-show="tableTotal > 0" small :total="tableTotal" :page.sync="queryParams.page"
|
|
|
+ :limit.sync="queryParams.limit" align="right" @pagination="getStaffPage" />
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <!-- 设备台账，新增修改详情界面 -->
|
|
|
+ <Staff ref="staff" @getStaffPage="getStaffPage"></Staff>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import CommonTable from '@/components/CommonTable/index.vue'
|
|
|
+import Staff from './staff.vue'
|
|
|
+import { getDepartmentTree } from '@/api/system/dept'
|
|
|
+import { getStaffPage } from '@/api/system/staff'
|
|
|
+import { getDictListByType } from '@/api/system/dict';
|
|
|
+export default {
|
|
|
+ name: 'Index',
|
|
|
+ components: {
|
|
|
+ CommonTable,
|
|
|
+ Staff
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDictListByType('post', (data) => {
|
|
|
+ this.postList = data
|
|
|
+ })
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false,
|
|
|
+ title: '选择人员',
|
|
|
+ //字典回显参数
|
|
|
+ postList: [],
|
|
|
+ //部门机构树参数
|
|
|
+ treeData: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'departmentName'
|
|
|
+ },
|
|
|
+ //表格参数
|
|
|
+ isShowCheckbox: false,
|
|
|
+ isShowIndex: false,
|
|
|
+ tableHight: '45vh',
|
|
|
+ tableHeaderTitle: [
|
|
|
+ {
|
|
|
+ propName: "staffName",
|
|
|
+ labelName: "姓名",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ propName: "sex",
|
|
|
+ labelName: "性别",
|
|
|
+ formatter: (row, column, cellValue, index) => {
|
|
|
+ let sex = row.sex
|
|
|
+ if (sex == 0) {
|
|
|
+ return '男'
|
|
|
+ }
|
|
|
+ if (sex == 1) {
|
|
|
+ return '女'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ propName: "postId",
|
|
|
+ labelName: "岗位",
|
|
|
+ formatter: (row, column, cellValue, index) => {
|
|
|
+ let postId = row.postId
|
|
|
+ for (let a of this.postList) {
|
|
|
+ if (a.id == postId) {
|
|
|
+ return a.dictValue
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tableData: [],
|
|
|
+ tableOperate: [
|
|
|
+ {
|
|
|
+ btnName: '选择',
|
|
|
+ size: "mini",
|
|
|
+ style: '',
|
|
|
+ icon: 'el-icon-search',
|
|
|
+ methodName: "chooseStaffEvent",
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ limit: 10,
|
|
|
+ deptId: null,
|
|
|
+ staffName: null
|
|
|
+ },
|
|
|
+ tableTotal: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 关闭弹出层 */
|
|
|
+ dialogClose() {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ /** 弹窗打开事件 */
|
|
|
+ handleOpen() {
|
|
|
+ this.getDepartmentTree()
|
|
|
+ },
|
|
|
+ /** 弹窗关闭事件 */
|
|
|
+ handleClose() {
|
|
|
+ this.deviceLedgerList = []
|
|
|
+ this.isSelectAllLedgerItem = false
|
|
|
+ this.ledgerItemList = []
|
|
|
+ this.currentLedgerItem = []
|
|
|
+ this.isSelectAllSelectedItem = false
|
|
|
+ this.selectedItemList = []
|
|
|
+ },
|
|
|
+ /** 多选框的结果 */
|
|
|
+ receiveCheckedData(checked) {
|
|
|
+ // this.checkItemList = checked
|
|
|
+ },
|
|
|
+ /** 搜索 */
|
|
|
+ searchEvent() {
|
|
|
+ this.queryParams.page = 1
|
|
|
+ this.queryParams.limit = 10
|
|
|
+ this.getStaffPage()
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery(event) {
|
|
|
+ this.$refs['queryForm'].resetFields()
|
|
|
+ },
|
|
|
+ /** 获取字典数据 */
|
|
|
+ getDictListByType(params, callback) {
|
|
|
+ getDictListByType({ keyType: params }).then(res => {
|
|
|
+ callback(res.data);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 获取部门机构树 */
|
|
|
+ getDepartmentTree() {
|
|
|
+ getDepartmentTree().then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.treeData = res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 处理节点点击 */
|
|
|
+ handleNodeClick(event, data, node) {
|
|
|
+ this.queryParams.deptId = event.id
|
|
|
+ this.getStaffPage()
|
|
|
+ },
|
|
|
+ /** 分页查询人员信息 */
|
|
|
+ getStaffPage() {
|
|
|
+ if (!this.queryParams.deptId) {
|
|
|
+ this.$message({
|
|
|
+ message: '请先选中部门！',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = JSON.parse(JSON.stringify(this.queryParams))
|
|
|
+ getStaffPage(params).then(res => {
|
|
|
+ if (!res || !res.data) {
|
|
|
+ this.$message({
|
|
|
+ message: '数据查询失败！',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.tableTotal = res.data.count
|
|
|
+ this.tableData = res.data.staffList
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /** 选择人员事件 */
|
|
|
+ chooseStaffEvent(row){
|
|
|
+ this.$emit('receiveChooseStaff', row)
|
|
|
+ this.visible = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
+// @import './index.css';
|
|
|
+</style>
|
zhoupeng