| | |
| | | <template> |
| | | <div> |
| | | <div class="flex_table"> |
| | | <div v-if="isDepartment" style="width: 50%"> |
| | | <!-- <TableCard :showTitle="false">--> |
| | | <!-- <template v-slot:form>--> |
| | | <!-- <div class="items_center">--> |
| | | <!-- <span>å§å</span>--> |
| | | <!-- <el-input v-model="trainingPagination.userName" class="search" clearable placeholder="请è¾å
¥" size="small"></el-input>--> |
| | | <!-- <el-button size="small" type="primary" @click="getPersonnelTraining(departId)">æ¥è¯¢</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- <div>--> |
| | | <!--<!– <el-button :loading="outLoading" size="small" type="primary" @click="exportExcel">导åº</el-button>–>--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- <template v-slot:table>--> |
| | | <!-- <ZTTable--> |
| | | <!-- :column="trainingColumn"--> |
| | | <!-- :currentChange="currentChange"--> |
| | | <!-- :height="'calc(100vh - 18em)'"--> |
| | | <!-- :highlightCurrentRow="true"--> |
| | | <!-- :table-data="trainingTableData"--> |
| | | <!-- :table-loading="trainingLoading"--> |
| | | <!-- style="padding: 0 15px;">--> |
| | | <!-- </ZTTable>--> |
| | | <!-- <div class="pagination">--> |
| | | <!-- <div></div>--> |
| | | <!-- <el-pagination--> |
| | | <!-- :page-size="trainingPagination.size"--> |
| | | <!-- :page-sizes="[10, 20, 30, 40]"--> |
| | | <!-- :total="trainingPagination.total"--> |
| | | <!-- layout="total, sizes, prev, pager, next, jumper"--> |
| | | <!-- @current-change="handleYearCurrentTraining"--> |
| | | <!-- @size-change="handleYearSizeChangeTraining">--> |
| | | <!-- </el-pagination>--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- </TableCard>--> |
| | | <!-- </div>--> |
| | | <!-- <div :style="`width: ${isDepartment ? '50%' : '100%'};`">--> |
| | | <!-- <TableCard :showTitle="false">--> |
| | | <!-- <template v-slot:form>--> |
| | | <!-- <div class="items_center">--> |
| | | <!-- <span>年份</span>--> |
| | | <!-- <el-date-picker--> |
| | | <!-- v-model="searchForm.trainingDate"--> |
| | | <!-- clearable--> |
| | | <!-- format="yyyy"--> |
| | | <!-- placeholder="鿩年"--> |
| | | <!-- size="small"--> |
| | | <!-- style="margin: 0 10px"--> |
| | | <!-- type="year"--> |
| | | <!-- value-format="yyyy">--> |
| | | <!-- </el-date-picker>--> |
| | | <!-- <el-button size="small" type="primary" @click="queryPersonnelDetailsPage(currentChangeRow.userId)">æ¥è¯¢</el-button>--> |
| | | <!-- <el-button size="small" type="primary" @click="openDownloadDia(currentChangeRow)">导åº</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- <template v-slot:table>--> |
| | | <!-- <ZTTable--> |
| | | <!-- :column="trainingPersonColumn"--> |
| | | <!-- :height="'calc(100vh - 18em)'"--> |
| | | <!-- :table-data="trainingPersonTableData"--> |
| | | <!-- :table-loading="trainingPersonLoading"--> |
| | | <!-- style="padding: 0 15px;">--> |
| | | <!-- </ZTTable>--> |
| | | <!-- <div class="pagination">--> |
| | | <!-- <div></div>--> |
| | | <!-- <el-pagination--> |
| | | <!-- :page-size="trainingPersonPagination.size"--> |
| | | <!-- :page-sizes="[10, 20, 30, 40]"--> |
| | | <!-- :total="trainingPersonPagination.total"--> |
| | | <!-- layout="total, sizes, prev, pager, next, jumper"--> |
| | | <!-- @current-change="handleYearCurrentPagination"--> |
| | | <!-- @size-change="handleYearSizeChangePagination">--> |
| | | <!-- </el-pagination>--> |
| | | <!-- </div>--> |
| | | <!-- </template>--> |
| | | <!-- </TableCard>--> |
| | | <div v-if="isDepartment" style="width: 49%"> |
| | | <div class="title"> |
| | | <span style="font-weight: bold">年度计å</span> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;"> |
| | | <el-form :model="trainingPagination" ref="trainingPagination" size="small" :inline="true"> |
| | | <el-form-item label="å§å"> |
| | | <el-input v-model="trainingPagination.userName" class="search" clearable placeholder="请è¾å
¥" size="small"></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="small" type="primary" @click="getPersonnelTraining(departId)">æ¥è¯¢</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | <lims-table :tableData="trainingTableData" :column="trainingColumn" |
| | | ref="trainingTableData" |
| | | :currentChange="currentChange" :highlightCurrentRow="true" |
| | | @pagination="pagination" :height="'calc(100vh - 22em)'" |
| | | :page="trainingPagination" :tableLoading="trainingLoading"></lims-table> |
| | | </div> |
| | | <div :style="`width: ${isDepartment ? '49%' : '100%'};`"> |
| | | <div class="title"> |
| | | <span style="font-weight: bold">年度计åæç»</span> |
| | | </div> |
| | | <div style="display: flex;justify-content: space-between;"> |
| | | <el-form :model="searchForm" ref="searchForm" size="small" :inline="true"> |
| | | <el-form-item label="年份"> |
| | | <el-date-picker |
| | | v-model="searchForm.trainingDate" |
| | | clearable |
| | | format="yyyy" |
| | | placeholder="鿩年" |
| | | size="small" |
| | | type="year" |
| | | value-format="yyyy"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="small" type="primary" @click="queryPersonnelDetailsPage(currentChangeRow.userId)">æ¥è¯¢</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div> |
| | | <el-button size="small" type="primary" @click="openDownloadDia(currentChangeRow)">导åº</el-button> |
| | | </div> |
| | | </div> |
| | | <lims-table :tableData="trainingPersonTableData" :column="trainingPersonColumn" |
| | | :height="'calc(100vh - 22em)'" @pagination="pagination1" |
| | | :page="trainingPersonPagination" :tableLoading="trainingPersonLoading"></lims-table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | |
| | | import limsTable from "@/components/Table/lims-table.vue"; |
| | | import { |
| | | exportTrainingRecord, |
| | | queryPersonnelDetails, |
| | | trainingSelectTrainingRecord |
| | | } from "@/api/cnas/personal/personTrainingRecord"; |
| | | |
| | | export default { |
| | | components: {}, |
| | | components: {limsTable}, |
| | | props: { |
| | | departId: { |
| | | type: Number, |
| | |
| | | if (!date) { |
| | | date = this.$moment().format('YYYY') |
| | | } |
| | | console.log('date----', date); |
| | | this.$axios.get( this.$api.personnel.exportTrainingRecord+ '?userId=' + row.userId + '&trainingDate=' + date,{responseType: "blob"}).then(res => { |
| | | exportTrainingRecord({userId: row.userId, trainingDate: date}).then(res => { |
| | | this.outLoading = false |
| | | const blob = new Blob([res],{ type: 'application/msword' }); |
| | | //å°Blob å¯¹è±¡è½¬æ¢æå符串 |
| | | let reader = new FileReader(); |
| | | reader.readAsText(blob, 'utf-8'); |
| | | reader.onload = () => { |
| | | try { |
| | | let result = JSON.parse(reader.result); |
| | | if (result.message) { |
| | | this.$message.error(result.message); |
| | | } else { |
| | | const url = URL.createObjectURL(blob); |
| | | const link = document.createElement('a'); |
| | | link.href = url; |
| | | link.download = 'å¹è®è®°å½å¯¼åº' + '.docx'; |
| | | link.click(); |
| | | this.$message.success('å¯¼åºæå') |
| | | } |
| | | } catch (err) { |
| | | console.log(err); |
| | | const url = URL.createObjectURL(blob); |
| | | const link = document.createElement('a'); |
| | | link.href = url; |
| | | link.download = 'å¹è®è®°å½å¯¼åº' + '.docx'; |
| | | link.click(); |
| | | this.$message.success('å¯¼åºæå') |
| | | } |
| | | } |
| | | this.$download.saveAs(blob, 'å¹è®è®°å½å¯¼åº.docx'); |
| | | }) |
| | | }, |
| | | // è·åå®éªå®¤-å¹è®è®¡ååè¡¨ä¿¡æ¯ |
| | | getPersonnelTraining(departId) { |
| | | // const name = this.isDepartment ? 'departmentId' : 'userId'; |
| | | this.$axios.get(`${this.$api.personnel.trainingSelectTrainingRecord}?departmentId=${departId}&size=${this.trainingPagination.size}¤t=${this.trainingPagination.current}&userName=${this.trainingPagination.userName}`).then(res => { |
| | | const params = { |
| | | departmentId: departId, |
| | | size: this.trainingPagination.size, |
| | | current: this.trainingPagination.current, |
| | | userName: this.trainingPagination.userName, |
| | | } |
| | | this.trainingLoading = true |
| | | trainingSelectTrainingRecord(params).then(res => { |
| | | this.trainingLoading = false |
| | | this.trainingTableData = res.data.records; |
| | | this.trainingPagination.total = res.data.total; |
| | | if (this.trainingTableData.length > 0) { |
| | | this.currentChange(this.trainingTableData[0]); |
| | | this.$refs.trainingTableData.setCurrentRow(this.trainingTableData[0]) |
| | | } |
| | | }); |
| | | }).catch(err => { |
| | | this.trainingLoading = false |
| | | }) |
| | | }, |
| | | // è·å个人-å¹è®è®¡ååè¡¨ä¿¡æ¯ |
| | | currentChange(row) { |
| | |
| | | if (this.searchForm.trainingDate === null) { |
| | | this.searchForm.trainingDate = '' |
| | | } |
| | | this.$axios.get(`${this.$api.personnel.queryPersonnelDetails}?userId=${userId}&size=${this.trainingPersonPagination.size}¤t=${this.trainingPersonPagination.current}&trainingDate=${this.searchForm.trainingDate}`).then(res => { |
| | | const params = { |
| | | userId: userId, |
| | | size: this.trainingPersonPagination.size, |
| | | current: this.trainingPersonPagination.current, |
| | | trainingDate: this.searchForm.trainingDate, |
| | | } |
| | | this.trainingPersonLoading = true |
| | | queryPersonnelDetails(params).then(res => { |
| | | this.trainingPersonLoading = false |
| | | this.trainingPersonTableData = res.data.records; |
| | | this.trainingPersonPagination.total = res.data.total; |
| | | }); |
| | | }).catch(err => { |
| | | this.trainingPersonLoading = false |
| | | }) |
| | | }, |
| | | // å页 |
| | | handleYearCurrentTraining(page) { |
| | | this.trainingPagination.curent = page; |
| | | this.getPersonnelTraining(this.departId); |
| | | }, |
| | | handleYearSizeChangeTraining(size) { |
| | | this.trainingPagination.size = size; |
| | | pagination(page) { |
| | | this.trainingPagination.size = page.limit; |
| | | this.getPersonnelTraining(this.departId); |
| | | }, |
| | | // å页 |
| | | handleYearCurrentPagination(page) { |
| | | this.trainingPersonPagination.curent = page; |
| | | pagination1(page) { |
| | | this.trainingPersonPagination.size = page.limit; |
| | | this.queryPersonnelDetailsPage(this.currentChangeRow.userId); |
| | | }, |
| | | handleYearSizeChangePagination(size) { |
| | | this.trainingPersonPagination.size = size; |
| | | this.queryPersonnelDetailsPage(this.currentChangeRow.userId); |
| | | } |
| | | }, |
| | | watch: { |
| | | departId: { |
| | |
| | | }; |
| | | </script> |
| | | <style scoped> |
| | | >>> .el-form-item { |
| | | margin-bottom: 13px; |
| | | } |
| | | |
| | | .flex_table { |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: space-between; |
| | | } |
| | | |
| | | .pagination { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-top: 10px; |
| | | } |
| | | |
| | | .items_center { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .search { |
| | | width: 150px; |
| | | padding: 0 6px; |
| | | } |
| | | .title { |
| | | position: relative; |
| | | font-size: 16px; |
| | | color: #333; |
| | | font-weight: 400; |
| | | padding-left: 10px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .title::before { |
| | | position: absolute; |
| | | left: 0; |
| | | top: 4px; |
| | | content: ''; |
| | | width: 4px; |
| | | height: 16px; |
| | | background-color: #3A7BFA; |
| | | border-radius: 2px; |
| | | } |
| | | </style> |