| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div> |
| | | <div class="search-list"> |
| | | <span class="search-input"> |
| | | <span class="search-label"> |
| | | <span style="width: 120px;font-size: 14px;line-height: 32px">人ååç§°ï¼</span> |
| | | <el-input v-model="entity.name" clearable placeholder="请è¾å
¥" size="small" style="width: 100%;" |
| | | @keyup.enter.native="refreshTable()"> |
| | | </el-input> |
| | | </span> |
| | | <el-button size="small" style="margin-left: 10px" @click="refresh()">é ç½®</el-button> |
| | | <el-button size="small" type="primary" @click="refreshTable()">æ¥ è¯¢</el-button> |
| | | </span> |
| | | <span> |
| | | <el-button :loading="synchronousLoading" size="small" type="primary" @click="synchronous" |
| | | :v-show="departId">åæ¥ç¬¬ä¸æ¹äººåä¿¡æ¯</el-button> |
| | | <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导åº</el-button> |
| | | <el-button size="small" type="primary" |
| | | @click="selectUserDia = true, getList(), queryParams.name = '', multipleSelection = []">æ°å»º</el-button> |
| | | </span> |
| | | </div> |
| | | <div class="search-table"> |
| | | <el-table v-loading="tableLoading" :data="tableData" border height="calc(100vh - 20em)" style="width: 100%;"> |
| | | <el-table-column align="center" label="åºå·" width="60"> |
| | | <template v-slot="scope"> |
| | | <span>{{ (page.current - 1) * page.size + scope.$index + 1 }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="åå·¥ç¼å·" prop="account" width="150"></el-table-column> |
| | | <el-table-column label="å§å" prop="name" width="120"></el-table-column> |
| | | <el-table-column label="å
¥é墿¶é´" prop="groupTime" width="120"></el-table-column> |
| | | <el-table-column label="ç±è´¯" prop="nativePlace" width="120"></el-table-column> |
| | | <el-table-column label="è¯ä»¶å·ç " prop="identityCard" show-overflow-tooltip width="300"></el-table-column> |
| | | <el-table-column label="è¯ä»¶å°å" prop="idAddress" show-overflow-tooltip width="100"></el-table-column> |
| | | <el-table-column label="ææºå·" prop="telephone" show-overflow-tooltip width="100"></el-table-column> |
| | | <el-table-column label="æ¯ä¸é¢æ ¡" prop="graduatedInstitutions1" width="100"></el-table-column> |
| | | <el-table-column label="æå¦ä¸ä¸" prop="major1" width="100"></el-table-column> |
| | | <el-table-column label="æ¯ä¸æ¶é´" prop="graduationTime1" width="100"></el-table-column> |
| | | <el-table-column label="æé«å¦å" prop="officialAcademicRedentials" width="100"></el-table-column> |
| | | <el-table-column label="æé«å¦ä½" prop="highestDegree" width="100"></el-table-column> |
| | | <el-table-column label="èç§°" prop="professionalTitle" width="100"></el-table-column> |
| | | <el-table-column label="ç´§æ¥è系人" prop="emergencyContact" width="120"></el-table-column> |
| | | <el-table-column label="ç´§æ¥èç³»çµè¯" prop="emergencyContactPhone" width="120"></el-table-column> |
| | | <el-table-column fixed="right" label="æä½" width="140"> |
| | | <template slot-scope="scope"> |
| | | <el-button size="small" type="text" @click="downPerson(scope.row)">ä¸è½½</el-button> |
| | | <el-button size="small" type="text" @click="$emit('updatePerson', scope.row)">ç¼è¾ |
| | | </el-button> |
| | | <el-button size="small" type="text" @click="deletePerson(scope.row)">å é¤ |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-pagination :current-page="1" :current-page.sync="page.current" :page-size="page.size" |
| | | :page-sizes="[10, 20, 30, 50, 100]" :total="page.total" layout="->,total, sizes, prev, pager, next, jumper" |
| | | style="margin-top: 16px" @size-change="handleSizeChange" @current-change="handleCurrentChange"> |
| | | </el-pagination> |
| | | </div> |
| | | <el-dialog :visible.sync="selectUserDia" title="éæ©ç¨æ·" width="70%"> |
| | | <div class="search" style="margin-bottom: 9px;"> |
| | | <div class="search_thing" style="display: flex;"> |
| | | <div class="search_label">ç¨æ·åï¼</div> |
| | | <div class="search_input"> |
| | | <el-input v-model="queryParams.name" clearable placeholder="请è¾å
¥" size="small" |
| | | @keyup.enter.native="getList()" style="width: 150px;"></el-input> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-if="selectUserDia" class="body" style="height: 60vh;"> |
| | | <lims-table :tableData="personTableData" :column="column" :tableLoading="tableLoading" |
| | | :height="'calc(100vh - 290px)'" :page="personPage" :isSelection="true" |
| | | :handleSelectionChange="handleSelectionChange"></lims-table> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="selectUserDia = false">å æ¶</el-button> |
| | | <el-button type="primary" @click="selectUser">ç¡® å®</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import limsTable from "@/components/Table/lims-table.vue"; |
| | | import { |
| | | getEmployees, |
| | | basicInformationOfPersonnelSelectPage, |
| | | delUserDepardLimsId, |
| | | upUserDepardLimsId, |
| | | exportPersonBasicInfo, |
| | | exportPersonBasicInfoById, |
| | | selectUserList, |
| | | } from '@/api/cnas/personnel/personnelInfo.js' |
| | | export default { |
| | | name: 'PersonnelList', |
| | | // import å¼å
¥çç»ä»¶éè¦æ³¨å
¥å°å¯¹è±¡ä¸æè½ä½¿ç¨ |
| | | components: { limsTable }, |
| | | props: { |
| | | departId: { |
| | | type: Number, |
| | | default: () => { |
| | | return null; |
| | | } |
| | | }, |
| | | isDepartment: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | currentCompaniesList: { |
| | | type: Array, |
| | | default: [] |
| | | } |
| | | }, |
| | | data() { |
| | | // è¿éåæ¾æ°æ® |
| | | return { |
| | | entity: {}, |
| | | multipleSelection: [], |
| | | synchronousLoading: false, |
| | | page: { |
| | | size: 20, |
| | | current: 1, |
| | | }, |
| | | outLoading: false, |
| | | tableLoading: false, |
| | | tableData: [], // äººåæ»åè¡¨æ°æ® |
| | | selectUserDia: false, // æ·»å 人åå¼¹æ¡, |
| | | stateList: [ |
| | | { |
| | | value: 1, |
| | | type: 'success', |
| | | label: 'å¯ç¨' |
| | | }, |
| | | { |
| | | value: 0, |
| | | type: 'danger', |
| | | label: 'åç¨' |
| | | } |
| | | ], |
| | | queryParams: { |
| | | name: '' |
| | | }, |
| | | personTableData: [], |
| | | column: [ |
| | | { label: "å§å", prop: "name" }, |
| | | { label: "è´¦å·", prop: "account" }, |
| | | { |
| | | label: "è§è²", |
| | | prop: "roleName", |
| | | }, |
| | | { |
| | | label: "ç¶æ", prop: "state", dataType: "tag", |
| | | formatData: (params) => { |
| | | let index = this.stateList.findIndex( |
| | | (item) => item.value == params |
| | | ); |
| | | if (index > -1) { |
| | | return this.stateList[index].label; |
| | | } else { |
| | | return null; |
| | | } |
| | | }, |
| | | formatType: (params) => { |
| | | let index = this.stateList.findIndex( |
| | | (item) => item.value == params |
| | | ); |
| | | if (index > -1) { |
| | | return this.stateList[index].type; |
| | | } else { |
| | | return null; |
| | | } |
| | | }, |
| | | }, |
| | | { label: "çµè¯å·ç ", prop: "phone" }, |
| | | ], |
| | | personPage: { |
| | | total: 0, |
| | | size: 10, |
| | | current: 0, |
| | | }, |
| | | tableLoading: false, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.refreshTable(); |
| | | }, |
| | | // æ¹æ³éå |
| | | methods: { |
| | | synchronous() { |
| | | console.log('departId', this.departId); |
| | | this.$message.warning("æ£å¨åæ¥ï¼è¯·ç¨å...") |
| | | this.synchronousLoading = true |
| | | getEmployees({ departId: this.departId }).then(res => { |
| | | this.synchronousLoading = false |
| | | this.$message.success("忥æå") |
| | | }) |
| | | }, |
| | | /** |
| | | * @desc è·å设å¤id |
| | | */ |
| | | // éç½® |
| | | refresh() { |
| | | this.page = { |
| | | size: 20, |
| | | current: 1, |
| | | }; |
| | | this.entity.name = '' |
| | | this.refreshTable(); |
| | | }, |
| | | // æ¥è¯¢äººååè¡¨æ°æ® |
| | | refreshTable(entity, type) { |
| | | try { |
| | | this.tableLoading = true; |
| | | this.entity.departmentId = this.departId; |
| | | let params = { ...this.page, ...this.entity } |
| | | delete params.total |
| | | basicInformationOfPersonnelSelectPage(params).then(res => { |
| | | this.tableLoading = false; |
| | | if (res.code === 201) { |
| | | return; |
| | | } |
| | | this.page.total = res.data.total; |
| | | this.tableData = res.data.records; |
| | | }); |
| | | } catch (e) { |
| | | this.tableLoading = false; |
| | | } |
| | | }, |
| | | // å é¤äººå |
| | | deletePerson(row) { |
| | | this.$confirm('æ¯å¦å é¤å½åæ°æ®?', 'è¦å', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }) |
| | | .then(() => { |
| | | delUserDepardLimsId({ id: row.id }).then(res => { |
| | | if (res.code === 201) { |
| | | return; |
| | | } |
| | | this.$message.success('å 餿å'); |
| | | this.refreshTable(); |
| | | }) |
| | | .catch(e => { |
| | | this.$message.error('å é¤å¤±è´¥'); |
| | | }); |
| | | }) |
| | | .catch(() => { |
| | | }); |
| | | }, |
| | | handleSizeChange(val) { |
| | | this.page.size = val; |
| | | this.refreshTable(); |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.page.current = val; |
| | | this.refreshTable(); |
| | | }, |
| | | handleSelectionChange(val) { |
| | | this.multipleSelection = val |
| | | }, |
| | | selectUser() { |
| | | if (!this.currentCompaniesList.length > 0) { |
| | | this.$message.warning("è¯·éæ©é¨é¨ï¼") |
| | | return; |
| | | } |
| | | let selects = this.multipleSelection; |
| | | if (selects.length == 0) { |
| | | this.$message.error('æªéæ©æ°æ®'); |
| | | return; |
| | | } |
| | | let ids = []; |
| | | selects.forEach(a => { |
| | | ids.push(a.id); |
| | | }); |
| | | let str = ''; |
| | | this.currentCompaniesList.forEach(a => { |
| | | if (a) { |
| | | str += a + ','; |
| | | } |
| | | }); |
| | | this.selectUserDia = false; |
| | | upUserDepardLimsId({ |
| | | ids: JSON.stringify(ids), |
| | | id: str |
| | | }).then(res => { |
| | | if (res.code === 201) { |
| | | return; |
| | | } |
| | | this.$message.success('æ·»å æå'); |
| | | this.refreshTable(); |
| | | }); |
| | | this.$emit('refreshTree') |
| | | }, |
| | | getList() { |
| | | this.tableLoading = true; |
| | | let param = { ...this.queryParams, ...this.personPage }; |
| | | delete param.total; |
| | | selectUserList({ ...param }) |
| | | .then((res) => { |
| | | this.tableLoading = false; |
| | | if (res.code === 200) { |
| | | this.personTableData = res.data; |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | this.tableLoading = false; |
| | | }); |
| | | }, |
| | | pagination({ page, limit }) { |
| | | this.personPage.current = page; |
| | | this.personPage.size = limit; |
| | | this.getList(); |
| | | }, |
| | | handleDown() { |
| | | this.outLoading = true; |
| | | let entity = this.HaveJson(this.entity) |
| | | exportPersonBasicInfo(entity).then(res => { |
| | | this.outLoading = false; |
| | | if (res.code === 201) { |
| | | return; |
| | | } |
| | | const blob = new Blob([res], { type: 'application/octet-stream' }); |
| | | this.$download.saveAs(blob, '人åä¿¡æ¯.xlsx') |
| | | }); |
| | | }, |
| | | downPerson(row) { |
| | | exportPersonBasicInfoById({ id: row.userId }).then(res => { |
| | | this.$download.saveAs(res.data, res.data) |
| | | this.$message.success('ä¸è½½æå') |
| | | }); |
| | | } |
| | | }, |
| | | watch: { |
| | | departId: { |
| | | handler(newId, oldId) { |
| | | if (newId) { |
| | | this.page.current = 1 |
| | | this.refreshTable(); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .search-list { |
| | | padding: 0 16px 16px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .search-table { |
| | | padding: 0 16px; |
| | | } |
| | | |
| | | .search-input { |
| | | display: flex; |
| | | } |
| | | |
| | | .search-label { |
| | | display: flex; |
| | | } |
| | | </style> |