|
@@ -1,140 +1,160 @@
|
|
|
<!--人员记录本领导 -->
|
|
<!--人员记录本领导 -->
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="arr_conten">
|
|
|
|
|
- <div v-if="loading" class="loading">加载中...</div>
|
|
|
|
|
- <!-- 空状态 -->
|
|
|
|
|
- <div v-else-if="!lieList || lieList.length === 0" class="empty">
|
|
|
|
|
- 暂无数据
|
|
|
|
|
- </div>
|
|
|
|
|
-<!-- <div v-if="status == 1">-->
|
|
|
|
|
- <div v-else-if="lieList && lieList.length > 0">
|
|
|
|
|
- <ul v-for="(item, i) in lieList" :key="i + ' '">
|
|
|
|
|
- <li v-for="(item1, i1) in item" :key="i1">
|
|
|
|
|
- <div class="names">{{ item1.deptName }}</div>
|
|
|
|
|
- <div class="rens">{{item1.peopleNum}}人</div>
|
|
|
|
|
- <div class="btn">
|
|
|
|
|
- <el-button size="btJS" @click="chaKan(item1.deptId)"
|
|
|
|
|
- >查看</el-button
|
|
|
|
|
- >
|
|
|
|
|
- </div>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
|
|
+ <div class="personnel-roster-container">
|
|
|
|
|
+ <!-- 左侧部门列表 -->
|
|
|
|
|
+ <div class="department-list">
|
|
|
|
|
+ <div class="department-title">部门列表</div>
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="(item, i) in lieList"
|
|
|
|
|
+ :key="i"
|
|
|
|
|
+ class="department-item"
|
|
|
|
|
+ :class="{ active: selectedDeptId === item.deptId }"
|
|
|
|
|
+ @click="selectDepartment(item.deptId)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <div class="dept-name">{{ item.deptName }}</div>
|
|
|
|
|
+ <div class="people-count">{{item.peopleNum}}人</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div v-if="lieList.length === 0" class="empty-tip">暂无部门数据</div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <!-- 查看第一次 -->
|
|
|
|
|
- <!-- <el-dialog
|
|
|
|
|
- :visible.sync="tableStatus"
|
|
|
|
|
- :title="title"
|
|
|
|
|
- append-to-body
|
|
|
|
|
- id="list"
|
|
|
|
|
- :close-on-click-modal="false"
|
|
|
|
|
- custom-class="lieBiao"
|
|
|
|
|
- >
|
|
|
|
|
- <el-table
|
|
|
|
|
- v-loading="loading"
|
|
|
|
|
- :data="bdglevenList"
|
|
|
|
|
- :header-cell-style="{ background: '#003C69', color: 'white' }"
|
|
|
|
|
- >
|
|
|
|
|
- <el-table-column label="序号" type="index" width="50" align="center">
|
|
|
|
|
- <template scope="scope">
|
|
|
|
|
- <span>{{
|
|
|
|
|
- (queryParams.pageNum - 1) * queryParams.pageSize +
|
|
|
|
|
- scope.$index +
|
|
|
|
|
- 1
|
|
|
|
|
- }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- label="单位"
|
|
|
|
|
- align="center"
|
|
|
|
|
- prop="deptName"
|
|
|
|
|
- show-overflow-tooltip
|
|
|
|
|
- width="150"
|
|
|
|
|
- />
|
|
|
|
|
- <el-table-column label="姓名" align="center" prop="name" />
|
|
|
|
|
- <el-table-column label="性别" align="center" prop="sex">
|
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
|
- <dict-tag
|
|
|
|
|
- :options="dict.type.sys_user_sex"
|
|
|
|
|
- :value="scope.row.sex"
|
|
|
|
|
- />
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column label="年龄" align="center" prop="age" />
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- label="身份证号"
|
|
|
|
|
- align="center"
|
|
|
|
|
- prop="idcard"
|
|
|
|
|
- width="170"
|
|
|
|
|
- show-overflow-tooltip
|
|
|
|
|
- />
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- label="部职别"
|
|
|
|
|
- align="center"
|
|
|
|
|
- width="200"
|
|
|
|
|
- prop="duty"
|
|
|
|
|
- show-overflow-tooltip
|
|
|
|
|
- />
|
|
|
|
|
- <el-table-column label="职务" align="center" width="120" prop="postId">
|
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
|
- <dict-tag
|
|
|
|
|
- :options="dict.type.post_Level"
|
|
|
|
|
- :value="scope.row.postId"
|
|
|
|
|
- />
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- label="职务等级时间"
|
|
|
|
|
- align="center"
|
|
|
|
|
- prop="postDate"
|
|
|
|
|
- width="180"
|
|
|
|
|
|
|
+ <!-- 右侧人员详情 -->
|
|
|
|
|
+ <div class="personnel-details">
|
|
|
|
|
+ <div v-if="selectedDeptId" class="details-content">
|
|
|
|
|
+ <div class="details-header">
|
|
|
|
|
+ <h3>{{ currentDeptName }}</h3>
|
|
|
|
|
+ <div class="total-count">共 {{ total }} 人</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ v-loading="loading"
|
|
|
|
|
+ :data="bdglevenList"
|
|
|
|
|
+ :header-cell-style="{ background: '#003C69', color: 'white' }"
|
|
|
|
|
+ style="width: 100%"
|
|
|
>
|
|
>
|
|
|
- <template slot-scope="scope">
|
|
|
|
|
- <span>{{ parseTime(scope.row.postDate, "{y}-{m}-{d}") }}</span>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- label="籍贯"
|
|
|
|
|
- align="center"
|
|
|
|
|
- prop="origin"
|
|
|
|
|
- width="150"
|
|
|
|
|
|
|
+ <el-table-column label="序号" type="index" width="50" align="center">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <span>{{
|
|
|
|
|
+ (queryParams.pageNum - 1) * queryParams.pageSize +
|
|
|
|
|
+ scope.$index +
|
|
|
|
|
+ 1
|
|
|
|
|
+ }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="单位"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="deptName"
|
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
|
+ width="150"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column label="姓名" align="center" prop="name" />
|
|
|
|
|
+ <el-table-column label="性别" align="center" prop="sex">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <dict-tag
|
|
|
|
|
+ :options="dict.type.sys_user_sex"
|
|
|
|
|
+ :value="scope.row.sex"
|
|
|
|
|
+ />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column label="年龄" align="center" prop="age" />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="身份证号"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="idcard"
|
|
|
|
|
+ width="170"
|
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="部职别"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ width="200"
|
|
|
|
|
+ prop="duty"
|
|
|
|
|
+ show-overflow-tooltip
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column label="职务" align="center" width="120" prop="postId">
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <dict-tag
|
|
|
|
|
+ :options="dict.type.post_Level"
|
|
|
|
|
+ :value="scope.row.postId"
|
|
|
|
|
+ />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="职务等级时间"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="postDate"
|
|
|
|
|
+ width="180"
|
|
|
|
|
+ >
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <span>{{ parseTime(scope.row.postDate, "{y}-{m}-{d}") }}</span>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="籍贯"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="origin"
|
|
|
|
|
+ width="150"
|
|
|
|
|
+ />
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="在位情况"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ prop="reign"
|
|
|
|
|
+ width="90"
|
|
|
|
|
+ >
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <dict-tag
|
|
|
|
|
+ :options="dict.type.people_state"
|
|
|
|
|
+ :value="scope.row.reign"
|
|
|
|
|
+ />
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column
|
|
|
|
|
+ label="操作"
|
|
|
|
|
+ align="center"
|
|
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
|
|
+ width="100"
|
|
|
|
|
+ fixed="right"
|
|
|
|
|
+ >
|
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
|
+ <el-button size="btk" type="text" @click="handleChakan(scope.row)"
|
|
|
|
|
+ ><span class="chakan">查看</span>
|
|
|
|
|
+ </el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+
|
|
|
|
|
+ <pagination
|
|
|
|
|
+ v-show="total > 0"
|
|
|
|
|
+ :total="total"
|
|
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
|
|
+ @pagination="handlePagination"
|
|
|
/>
|
|
/>
|
|
|
- <el-table-column
|
|
|
|
|
- label="在位情况"
|
|
|
|
|
- align="center"
|
|
|
|
|
- prop="reign"
|
|
|
|
|
- width="90"
|
|
|
|
|
- >
|
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
|
- <dict-tag
|
|
|
|
|
- :options="dict.type.people_state"
|
|
|
|
|
- :value="scope.row.reign"
|
|
|
|
|
- />
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- <el-table-column
|
|
|
|
|
- label="操作"
|
|
|
|
|
- align="center"
|
|
|
|
|
- class-name="small-padding fixed-width"
|
|
|
|
|
- width="200"
|
|
|
|
|
- fixed="right"
|
|
|
|
|
- >
|
|
|
|
|
- <template slot-scope="scope">
|
|
|
|
|
- <el-button size="btk" type="text" @click="handleChakan(scope.row)"
|
|
|
|
|
- ><span class="chakan">查看</span>
|
|
|
|
|
- </el-button>
|
|
|
|
|
- </template>
|
|
|
|
|
- </el-table-column>
|
|
|
|
|
- </el-table>
|
|
|
|
|
-
|
|
|
|
|
- <pagination
|
|
|
|
|
- v-show="total > 0"
|
|
|
|
|
- :total="total"
|
|
|
|
|
- :page.sync="queryParams.pageNum"
|
|
|
|
|
- :limit.sync="queryParams.pageSize"
|
|
|
|
|
- @pagination="chaKan1"
|
|
|
|
|
- />
|
|
|
|
|
- </el-dialog> -->
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div v-else class="no-selection">
|
|
|
|
|
+ <div class="empty-icon">👥</div>
|
|
|
|
|
+ <div class="empty-text">请选择一个部门查看人员详情</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 人员详情弹窗 -->
|
|
|
|
|
+ <div class="fff">
|
|
|
|
|
+ <el-dialog
|
|
|
|
|
+ :visible.sync="menuRoleVisible"
|
|
|
|
|
+ :title="title"
|
|
|
|
|
+ append-to-body
|
|
|
|
|
+ id="chakan"
|
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
|
+ >
|
|
|
|
|
+ <personnelRoster
|
|
|
|
|
+ v-if="menuRoleVisible"
|
|
|
|
|
+ ref="menuRole"
|
|
|
|
|
+ :message="wordInfo"
|
|
|
|
|
+ :renshu="renshu"
|
|
|
|
|
+ ></personnelRoster>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
<div class="fff">
|
|
<div class="fff">
|
|
|
<el-dialog
|
|
<el-dialog
|
|
@@ -157,24 +177,15 @@
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import personnelRoster from "@/components/look_word/personnelRoster.vue";
|
|
import personnelRoster from "@/components/look_word/personnelRoster.vue";
|
|
|
-import { listTypestatistics } from "@/api/peopleManage/typestatistics";
|
|
|
|
|
import {
|
|
import {
|
|
|
- listPeople,
|
|
|
|
|
- getPeople,
|
|
|
|
|
- delPeople,
|
|
|
|
|
- addPeople,
|
|
|
|
|
- updatePeople,
|
|
|
|
|
- exportPeople,
|
|
|
|
|
getDept,
|
|
getDept,
|
|
|
treeselect,
|
|
treeselect,
|
|
|
} from "@/api/peopleManage/people";
|
|
} from "@/api/peopleManage/people";
|
|
|
-import Treeselect from "@riophae/vue-treeselect";
|
|
|
|
|
import {
|
|
import {
|
|
|
getPersonnelRosterList,
|
|
getPersonnelRosterList,
|
|
|
getPersonnelRosterOnUnitList,
|
|
getPersonnelRosterOnUnitList,
|
|
|
} from "@/api/grassrootsregistration/personnelRoster";
|
|
} from "@/api/grassrootsregistration/personnelRoster";
|
|
|
import {
|
|
import {
|
|
|
- getXiangQis,
|
|
|
|
|
getRenYuanXiangQing,
|
|
getRenYuanXiangQing,
|
|
|
} from "@/api/grassrootsregistration/bdglmeeting";
|
|
} from "@/api/grassrootsregistration/bdglmeeting";
|
|
|
|
|
|
|
@@ -239,8 +250,6 @@ export default {
|
|
|
status: null,
|
|
status: null,
|
|
|
arr: [],
|
|
arr: [],
|
|
|
lieList: [],
|
|
lieList: [],
|
|
|
- //查看页面
|
|
|
|
|
- menuRoleVisible: false,
|
|
|
|
|
// 表单校验
|
|
// 表单校验
|
|
|
rules: {},
|
|
rules: {},
|
|
|
//性别数组
|
|
//性别数组
|
|
@@ -288,6 +297,10 @@ export default {
|
|
|
value: null,
|
|
value: null,
|
|
|
tableStatus: false,
|
|
tableStatus: false,
|
|
|
bdglevenList: [],
|
|
bdglevenList: [],
|
|
|
|
|
+ // 新增:选中的部门ID
|
|
|
|
|
+ selectedDeptId: null,
|
|
|
|
|
+ // 新增:当前选中部门名称
|
|
|
|
|
+ currentDeptName: '',
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
// updated() {
|
|
// updated() {
|
|
@@ -308,47 +321,44 @@ export default {
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
- chaKan(row) {
|
|
|
|
|
- this.opens = false;
|
|
|
|
|
- const deptId = row;
|
|
|
|
|
- getRenYuanXiangQing(deptId).then((response) => {
|
|
|
|
|
- this.renshu = response.data[0];
|
|
|
|
|
- this.wordInfo = response.data[1];
|
|
|
|
|
- this.title = "查看人员名册";
|
|
|
|
|
- this.menuRoleVisible = true;
|
|
|
|
|
- console.log("请求参数是:", this.queryParams);
|
|
|
|
|
- console.log("接口返回的数据:", res);
|
|
|
|
|
- })
|
|
|
|
|
- console.log("请求参数是:", this.queryParams);
|
|
|
|
|
- console.log("接口返回的数据:", res);
|
|
|
|
|
- // this.queryParams.unitId = row;
|
|
|
|
|
- // this.unitId = row;
|
|
|
|
|
- // getPersonnelRosterOnUnitList(this.queryParams).then((res) => {
|
|
|
|
|
- // this.bdglevenList = res.rows;
|
|
|
|
|
- // this.total = res.total;
|
|
|
|
|
- // this.title = "查看人员名册";
|
|
|
|
|
- // this.tableStatus = true;
|
|
|
|
|
- // this.loading = false;
|
|
|
|
|
- // });
|
|
|
|
|
|
|
+ // 选择部门
|
|
|
|
|
+ selectDepartment(deptId) {
|
|
|
|
|
+ this.selectedDeptId = deptId;
|
|
|
|
|
+ // 获取部门名称
|
|
|
|
|
+ const selectedDept = this.lieList.find(item => item.deptId === deptId);
|
|
|
|
|
+ if (selectedDept) {
|
|
|
|
|
+ this.currentDeptName = selectedDept.deptName;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 查询该部门的人员数据
|
|
|
|
|
+ this.queryParams.unitId = deptId;
|
|
|
|
|
+ this.queryParams.pageNum = 1; // 重置页码
|
|
|
|
|
+ this.loading = true;
|
|
|
|
|
+
|
|
|
|
|
+ getPersonnelRosterOnUnitList(this.queryParams).then((res) => {
|
|
|
|
|
+ this.bdglevenList = res.rows || [];
|
|
|
|
|
+ this.total = res.total || 0;
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ }).catch(error => {
|
|
|
|
|
+ console.error("获取部门人员数据失败:", error);
|
|
|
|
|
+ this.bdglevenList = [];
|
|
|
|
|
+ this.total = 0;
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ });
|
|
|
},
|
|
},
|
|
|
- chaKan1(row) {
|
|
|
|
|
- getMeetRecordOnUnitList(this.queryParams).then((res) => {
|
|
|
|
|
- this.bdglevenList = res.rows;
|
|
|
|
|
- this.total = res.total;
|
|
|
|
|
- this.title = "查看人员名册";
|
|
|
|
|
- this.tableStatus = true;
|
|
|
|
|
|
|
+
|
|
|
|
|
+ // 处理分页
|
|
|
|
|
+ handlePagination() {
|
|
|
|
|
+ getPersonnelRosterOnUnitList(this.queryParams).then((res) => {
|
|
|
|
|
+ this.bdglevenList = res.rows || [];
|
|
|
|
|
+ this.total = res.total || 0;
|
|
|
|
|
+ }).catch(error => {
|
|
|
|
|
+ console.error("分页查询失败:", error);
|
|
|
|
|
+ this.bdglevenList = [];
|
|
|
|
|
+ this.total = 0;
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
/** 查询人员管理列表 */
|
|
/** 查询人员管理列表 */
|
|
|
- // getList() {
|
|
|
|
|
- // getPersonnelRosterList().then((res) => {
|
|
|
|
|
- // res.rows.forEach((item) => {
|
|
|
|
|
- // this.status = 1;
|
|
|
|
|
- // });
|
|
|
|
|
- // this.lieList = res.rows;
|
|
|
|
|
- // console.log(res.rows);
|
|
|
|
|
- // });
|
|
|
|
|
- // },
|
|
|
|
|
getList() {
|
|
getList() {
|
|
|
this.loading = true;
|
|
this.loading = true;
|
|
|
getPersonnelRosterList().then((res) => {
|
|
getPersonnelRosterList().then((res) => {
|
|
@@ -388,9 +398,7 @@ export default {
|
|
|
},
|
|
},
|
|
|
//查看按钮操作
|
|
//查看按钮操作
|
|
|
handleChakan(row) {
|
|
handleChakan(row) {
|
|
|
- console.log(row.deptId);
|
|
|
|
|
// 是否隐藏按钮
|
|
// 是否隐藏按钮
|
|
|
- this.opens = false;
|
|
|
|
|
const deptId = row.deptId;
|
|
const deptId = row.deptId;
|
|
|
getRenYuanXiangQing(deptId).then((response) => {
|
|
getRenYuanXiangQing(deptId).then((response) => {
|
|
|
this.renshu = response.data[0];
|
|
this.renshu = response.data[0];
|
|
@@ -418,135 +426,205 @@ export default {
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
-::v-deep .el-dialog {
|
|
|
|
|
- width: 1070px !important;
|
|
|
|
|
|
|
+/* 主容器样式 */
|
|
|
|
|
+.personnel-roster-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: calc(100vh - 60px);
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ gap: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-::v-deep .el-dialog__body {
|
|
|
|
|
- margin: 10px 30px 20px 44px;
|
|
|
|
|
- padding-top: 20px !important;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
|
|
+/* 左侧部门列表样式 */
|
|
|
|
|
+.department-list {
|
|
|
|
|
+ width: 300px;
|
|
|
|
|
+ background: rgba(0, 60, 105, 0.3);
|
|
|
|
|
+ border: 1px solid #718a9d;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-::v-deep .el-dialog__header {
|
|
|
|
|
|
|
+.department-title {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding-bottom: 10px;
|
|
|
border-bottom: 1px solid #718a9d;
|
|
border-bottom: 1px solid #718a9d;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.arr_conten {
|
|
|
|
|
- padding-top: 20px;
|
|
|
|
|
|
|
+.department-item {
|
|
|
|
|
+ background: rgba(0, 60, 105, 0.5);
|
|
|
|
|
+ border: 1px solid #3d83b8;
|
|
|
|
|
+ border-radius: 6px;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.department-item:hover {
|
|
|
|
|
+ background: rgba(0, 60, 105, 0.8);
|
|
|
|
|
+ border-color: #90cef1;
|
|
|
|
|
+ transform: translateX(5px);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.department-item.active {
|
|
|
|
|
+ background: rgba(0, 120, 215, 0.7);
|
|
|
|
|
+ border-color: #90cef1;
|
|
|
|
|
+ box-shadow: 0 0 10px rgba(144, 206, 252, 0.3);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dept-name {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.people-count {
|
|
|
|
|
+ color: #90cef1;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.empty-tip {
|
|
|
|
|
+ color: #90cef1;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ padding: 40px 0;
|
|
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-ul {
|
|
|
|
|
- /* justify-content: space-between; */
|
|
|
|
|
- padding: 0 22px;
|
|
|
|
|
|
|
+/* 右侧人员详情样式 */
|
|
|
|
|
+.personnel-details {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ background: rgba(0, 60, 105, 0.3);
|
|
|
|
|
+ border: 1px solid #718a9d;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ min-width: 0;
|
|
|
}
|
|
}
|
|
|
-.span {
|
|
|
|
|
|
|
+
|
|
|
|
|
+.details-content {
|
|
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ padding: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-li {
|
|
|
|
|
- list-style: none;
|
|
|
|
|
- background: url("../../../assets/images/book.png") no-repeat;
|
|
|
|
|
- height: 140px;
|
|
|
|
|
- width: 222px;
|
|
|
|
|
- /* margin: 20px 0; */
|
|
|
|
|
|
|
+.details-header {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- flex: 0 0 16%;
|
|
|
|
|
- margin-right: 10px;
|
|
|
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
|
+ border-bottom: 1px solid #718a9d;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.names {
|
|
|
|
|
|
|
+.details-header h3 {
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- font-size: 14px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- padding: 26px 26px 38px 26px;
|
|
|
|
|
- letter-spacing: 1px;
|
|
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ margin: 0;
|
|
|
}
|
|
}
|
|
|
-.rens{
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- left: 0%;
|
|
|
|
|
- top: -12%;
|
|
|
|
|
- letter-spacing: 1px;
|
|
|
|
|
|
|
+
|
|
|
|
|
+.total-count {
|
|
|
|
|
+ color: #90cef1;
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ font-weight: 500;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.btn {
|
|
|
|
|
- text-align: center;
|
|
|
|
|
|
|
+.no-selection {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ color: #90cef1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-::v-deep .lieBiao {
|
|
|
|
|
- background: #004d86 !important;
|
|
|
|
|
- min-height: 42vh !important;
|
|
|
|
|
|
|
+.empty-icon {
|
|
|
|
|
+ font-size: 64px;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-::v-deep .el-dialog__title {
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font: 18px;
|
|
|
|
|
|
|
+.empty-text {
|
|
|
|
|
+ font-size: 18px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 表格样式 */
|
|
|
|
|
+::v-deep .el-table {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+::v-deep .el-table__header-wrapper th {
|
|
|
|
|
+ background-color: #003C69 !important;
|
|
|
|
|
+ color: white !important;
|
|
|
|
|
+ border-bottom: 1px solid #718a9d;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+::v-deep .el-table__body-wrapper {
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ flex: 1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-::v-deep .el-dialog__headerbtn .el-dialog__close {
|
|
|
|
|
|
|
+::v-deep .el-table__row {
|
|
|
|
|
+ background-color: rgba(0, 54, 95, 0.8);
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+::v-deep .el-table__row:nth-child(even) {
|
|
|
|
|
+ background-color: rgba(0, 54, 95, 0.6);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+::v-deep .el-table__row:hover {
|
|
|
|
|
+ background-color: #3c749d !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+::v-deep .el-table__body tr:hover > td {
|
|
|
|
|
+ background-color: transparent !important;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+/* 分页样式 */
|
|
|
::v-deep .pagination-container {
|
|
::v-deep .pagination-container {
|
|
|
- /* display: none; */
|
|
|
|
|
- position: relative;
|
|
|
|
|
- height: 49px;
|
|
|
|
|
- margin-bottom: 10px;
|
|
|
|
|
- margin-top: 6vh;
|
|
|
|
|
- padding: 10px 20px !important;
|
|
|
|
|
|
|
+ margin-top: 20px;
|
|
|
|
|
+ padding: 10px 0;
|
|
|
background: transparent !important;
|
|
background: transparent !important;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-pagination .el-select .el-input .el-input__inner {
|
|
::v-deep .el-pagination .el-select .el-input .el-input__inner {
|
|
|
background: #00365f !important;
|
|
background: #00365f !important;
|
|
|
|
|
+ border-color: #718a9d;
|
|
|
|
|
+ color: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-pagination.is-background .btn-prev,
|
|
::v-deep .el-pagination.is-background .btn-prev,
|
|
|
-.el-pagination.is-background .btn-next {
|
|
|
|
|
|
|
+::v-deep .el-pagination.is-background .btn-next {
|
|
|
background: #00365f !important;
|
|
background: #00365f !important;
|
|
|
|
|
+ border-color: #718a9d;
|
|
|
|
|
+ color: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-pagination__editor.el-input .el-input__inner {
|
|
::v-deep .el-pagination__editor.el-input .el-input__inner {
|
|
|
background: #00365f !important;
|
|
background: #00365f !important;
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-::v-deep .el-pagination.is-background .btn-next {
|
|
|
|
|
- background: #00365f !important;
|
|
|
|
|
|
|
+ border-color: #718a9d;
|
|
|
|
|
+ color: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
::v-deep .el-pagination.is-background .el-pager li {
|
|
::v-deep .el-pagination.is-background .el-pager li {
|
|
|
background: #00365f;
|
|
background: #00365f;
|
|
|
|
|
+ color: #fff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-::v-deep .el-table__body tr:hover > td {
|
|
|
|
|
- background-color: #3c749d !important;
|
|
|
|
|
-}
|
|
|
|
|
-::v-deep .el-table tr:nth-child(even) {
|
|
|
|
|
- background: #00365f;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-::v-deep .el-input__inner {
|
|
|
|
|
- cursor: pointer !important;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-::v-deep .el-input__inner {
|
|
|
|
|
- background: transparent;
|
|
|
|
|
|
|
+::v-deep .el-pagination.is-background .el-pager li.active {
|
|
|
|
|
+ background: #3c749d;
|
|
|
color: #fff;
|
|
color: #fff;
|
|
|
- border: 1px solid white !important;
|
|
|
|
|
- border-color: #fff !important;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-::v-deep .el-input--medium .el-input__inner {
|
|
|
|
|
- height: 36px;
|
|
|
|
|
- line-height: 37px;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+/* 弹窗样式保持不变 */
|
|
|
#chakan ::v-deep .el-dialog {
|
|
#chakan ::v-deep .el-dialog {
|
|
|
min-height: 700px;
|
|
min-height: 700px;
|
|
|
background: #fff !important;
|
|
background: #fff !important;
|
|
@@ -555,36 +633,37 @@ li {
|
|
|
#chakan /deep/ .el-dialog__body {
|
|
#chakan /deep/ .el-dialog__body {
|
|
|
padding: 30px 30px 30px 30px;
|
|
padding: 30px 30px 30px 30px;
|
|
|
}
|
|
}
|
|
|
-.divbox {
|
|
|
|
|
- width: 1016px !important;
|
|
|
|
|
- min-height: 540px;
|
|
|
|
|
-}
|
|
|
|
|
-.divbox img {
|
|
|
|
|
- width: 700px;
|
|
|
|
|
- height: 500px;
|
|
|
|
|
- border-radius: 10px;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+
|
|
|
img {
|
|
img {
|
|
|
object-fit: cover;
|
|
object-fit: cover;
|
|
|
}
|
|
}
|
|
|
-/* 添加内部滚动条 */
|
|
|
|
|
-::v-deep .el-dialog__body {
|
|
|
|
|
- overflow: auto;
|
|
|
|
|
- overflow-x: hidden;
|
|
|
|
|
|
|
+
|
|
|
|
|
+/* 滚动条样式 */
|
|
|
|
|
+::-webkit-scrollbar {
|
|
|
|
|
+ width: 8px;
|
|
|
|
|
+ height: 8px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/
|
|
|
|
|
-::v-deep .el-dialog__body ::-webkit-scrollbar {
|
|
|
|
|
- width: 14px;
|
|
|
|
|
- /* height: 2px !important; */
|
|
|
|
|
|
|
+::-webkit-scrollbar-track {
|
|
|
|
|
+ background: rgba(0, 60, 105, 0.3);
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
background: #3d83b8;
|
|
background: #3d83b8;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
+ background: #90cef1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/*定义滑块,内阴影及圆角*/
|
|
|
|
|
-::v-deep .el-dialog__body ::-webkit-scrollbar-thumb {
|
|
|
|
|
- /* border-radius: 20px; */
|
|
|
|
|
- /* height: 1px;
|
|
|
|
|
- width: 3px; */
|
|
|
|
|
- background: rgba(144, 206, 252, 1);
|
|
|
|
|
|
|
+/* 查看按钮样式 */
|
|
|
|
|
+.chakan {
|
|
|
|
|
+ color: #90cef1;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.chakan:hover {
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ text-decoration: underline;
|
|
|
}
|
|
}
|
|
|
-</style>
|
|
|
|
|
|
|
+</style>
|