| | |
| | | <!-- 奖惩记录 --> |
| | | <template> |
| | | <div> |
| | | <div style="text-align: left; margin-bottom: 15px;"> |
| | | <label>姓名</label> |
| | | <el-input v-model="search.userName" clearable placeholder="请输入关键字" size="small" style="width: 20vh;"></el-input> |
| | | <label style="margin-left: 1em">奖惩日期</label> |
| | | <el-date-picker |
| | | v-model="search.searchTimeList" |
| | | :picker-options="pickerOptions" |
| | | align="right" |
| | | clearable |
| | | end-placeholder="结束日期" |
| | | format="yyyy-MM-dd" |
| | | range-separator="至" |
| | | size="small" |
| | | start-placeholder="开始日期" |
| | | style="width: 20%" |
| | | type="daterange" |
| | | unlink-panels |
| | | value-format="yyyy-MM-dd 00:00:00"> |
| | | </el-date-picker> |
| | | <el-button size="small" type="primary" @click="getPersonnelTraining(departId)">查询</el-button> |
| | | <div style="float: right;"> |
| | | <div style="display: flex;justify-content: space-between"> |
| | | <div style="display: flex;"> |
| | | <div style="margin-bottom: 18px;margin-right: 10px;display: flex;align-items: center;line-height: 32px;"> |
| | | <span style="width: 48px;font-size: 14px;font-weight: 700;color: #606266;">姓名</span> |
| | | <el-input size="small" placeholder="请输入" clearable v-model="search.userName" |
| | | @keyup.enter.native="getPersonnelTraining(departId)"></el-input> |
| | | </div> |
| | | <div style="margin-bottom: 18px;margin-right: 10px;display: flex;align-items: center;line-height: 32px;"> |
| | | <span style="width: 88px;font-size: 14px;font-weight: 700;color: #606266;">奖惩日期</span> |
| | | <el-date-picker v-model="search.searchTimeList" :picker-options="pickerOptions" align="right" clearable |
| | | @change="getPersonnelTraining(departId)" |
| | | end-placeholder="结束日期" format="yyyy-MM-dd" range-separator="至" size="small" start-placeholder="开始日期" |
| | | style="width: 100%" type="daterange" unlink-panels value-format="yyyy-MM-dd 00:00:00"> |
| | | </el-date-picker> |
| | | </div> |
| | | <div style="line-height: 30px;"> |
| | | <el-button size="mini" type="primary" @click="getPersonnelTraining(departId)">查询</el-button> |
| | | </div> |
| | | </div> |
| | | <div style="line-height: 30px;"> |
| | | <el-button :loading="outLoading" size="small" type="primary" @click="handleDown">导出</el-button> |
| | | <el-button size="small" type="primary" @click="addRow">新增</el-button> |
| | | </div> |
| | | </div> |
| | | <div class="table"> |
| | | <el-table :data="tableData" height="70vh" style="width: 100%"> |
| | | <el-table :data="tableData" v-loading="tableLoading" |
| | | :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border |
| | | height="66.5vh" style="width: 100%"> |
| | | <el-table-column label="序号" type="index" width="120"> |
| | | <template v-slot="scope"> |
| | | <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span> |
| | |
| | | </el-table-column> |
| | | <el-table-column label="创建人" min-width="180" prop="createUserName"> |
| | | </el-table-column> |
| | | <el-table-column fixed="right" label="操作" width="100"> |
| | | <el-table-column fixed="right" label="操作" width="100" align="center"> |
| | | <template v-slot="scope"> |
| | | <el-button size="small" type="text" @click="editForm(scope.row)">编辑</el-button> |
| | | <el-button size="small" type="text" @click="deleteRow(scope.row)">删除</el-button> |
| | | <el-button size="small" type="text" style="color: #f56c6c" @click="deleteRow(scope.row)">删除</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]" |
| | | :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange"> |
| | | :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" background style="margin-top: 10px" |
| | | @size-change="handleSizeChange" @current-change="handleCurrentChange"> |
| | | </el-pagination> |
| | | </div> |
| | | <el-dialog |
| | | :visible.sync="dialogVisible" |
| | | title="提示" |
| | | width="50%" |
| | | @open="getUserList"> |
| | | <el-dialog :visible.sync="dialogVisible" title="奖惩记录" width="50%" @open="getUserList"> |
| | | <div style="height: 40vh"> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="120px"> |
| | | <el-col :span="12"> |
| | |
| | | <el-col :span="12"> |
| | | <el-form-item label="员工姓名" prop="userId"> |
| | | <el-select v-model="form.userId" placeholder="请选择" size="small" style="width: 100%" value-key="id" |
| | | @change="selectUserChange" :disabled="!isDepartment"> |
| | | @change="selectUserChange" :disabled="!isDepartment"> |
| | | <el-option v-for="item in responsibleOptions" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="奖惩时间" prop="rewardPunishTime"> |
| | | <el-date-picker |
| | | v-model="form.rewardPunishTime" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | placeholder="选择日期" |
| | | size="small" |
| | | style="width: 100%" |
| | | type="datetime" |
| | | value-format="yyyy-MM-dd HH:mm:ss"> |
| | | <el-date-picker v-model="form.rewardPunishTime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" |
| | | size="small" style="width: 100%" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | </el-form> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="dialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="saveOrUpdate">确 定</el-button> |
| | | </span> |
| | | <el-button @click="dialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="saveOrUpdate">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | addOrUpdateRewardPunishment, deleteRewardPunishment, |
| | | rewardPunishmentExport, |
| | | rewardPunishmentPage |
| | | } from "@/api/cnas/personal/personRewardPunishmentRecord"; |
| | | import { selectUserCondition } from "@/api/system/user"; |
| | | import { delCustomById } from "@/api/system/customer"; |
| | | |
| | | export default { |
| | | props: { |
| | | departId: { |
| | |
| | | data() { |
| | | return { |
| | | tableData: [], |
| | | tableLoading: false, |
| | | search: { |
| | | size: 20, |
| | | current: 1, |
| | |
| | | this.getPersonnelTraining(this.departId); |
| | | }, |
| | | async getPersonnelTraining() { |
| | | const {code, data} = await this.$axios({ |
| | | method: 'get', |
| | | url: rewardPunishmentPageApi, |
| | | params: { |
| | | userId: this.isDepartment ? '' : this.departId, |
| | | departmentId: this.isDepartment ? this.departId : '', |
| | | current: this.search.curent, |
| | | size: this.search.size, |
| | | userName: this.search.userName, |
| | | startTime: this.search.searchTimeList && this.search.searchTimeList[0], |
| | | endTime: this.search.searchTimeList && this.search.searchTimeList[1], |
| | | } |
| | | }) |
| | | if (code == 200) { |
| | | this.tableData = data.records |
| | | this.search.total = data.total |
| | | const params = { |
| | | userId: this.isDepartment ? '' : this.departId, |
| | | departmentId: this.isDepartment ? this.departId : '', |
| | | current: this.search.curent, |
| | | size: this.search.size, |
| | | userName: this.search.userName, |
| | | startTime: this.search.searchTimeList && this.search.searchTimeList[0], |
| | | endTime: this.search.searchTimeList && this.search.searchTimeList[1], |
| | | } |
| | | this.tableLoading = true |
| | | rewardPunishmentPage(params).then(res => { |
| | | this.tableLoading = false |
| | | this.tableData = res.data.records |
| | | this.search.total = res.data.total |
| | | }).catch(err => { |
| | | this.tableLoading = false |
| | | }) |
| | | }, |
| | | addRow () { |
| | | addRow() { |
| | | this.dialogVisible = true |
| | | if (!this.isDepartment) { |
| | | this.form.userId = this.departId |
| | | this.selectUserChange(this.form.userId) |
| | | } |
| | | }, |
| | | handleDown(){ |
| | | handleDown() { |
| | | this.outLoading = true |
| | | this.$axios.post(this.$api.deviceCheck.rewardPunishmentExport,{ |
| | | rewardPunishmentExport({ |
| | | userId: this.isDepartment ? '' : this.departId, |
| | | departmentId: this.isDepartment ? this.departId : '', |
| | | userName: this.search.userName, |
| | | startTime: this.search.searchTimeList && this.search.searchTimeList[0], |
| | | endTime: this.search.searchTimeList && this.search.searchTimeList[1] |
| | | },{responseType: 'blob'}).then(res => { |
| | | }).then(res => { |
| | | this.outLoading = false |
| | | const blob = new Blob([res], { |
| | | type: 'application/force-download' |
| | | }) |
| | | //将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 elink = document.createElement('a') |
| | | elink.download = decodeURI('奖惩记录'+'.xlsx') |
| | | elink.style.display = 'none' |
| | | elink.href = URL.createObjectURL(blob) |
| | | document.body.appendChild(elink) |
| | | elink.click(); |
| | | URL.revokeObjectURL(elink.href) // 释放URL 对象 |
| | | document.body.removeChild(elink) |
| | | this.$message.success('导出成功') |
| | | } |
| | | } catch (err) { |
| | | console.log(err); |
| | | // 创建一个超链接,将文件流赋进去,然后实现这个超链接的单击事件 |
| | | const elink = document.createElement('a') |
| | | elink.download = decodeURI('奖惩记录'+'.xlsx') |
| | | elink.style.display = 'none' |
| | | elink.href = URL.createObjectURL(blob) |
| | | document.body.appendChild(elink) |
| | | elink.click(); |
| | | URL.revokeObjectURL(elink.href) // 释放URL 对象 |
| | | document.body.removeChild(elink) |
| | | this.$message.success('导出成功') |
| | | } |
| | | } |
| | | this.$download.saveAs(blob, '奖惩记录.xlsx') |
| | | }) |
| | | }, |
| | | // 获取负责人信息接口 |
| | | getUserList() { |
| | | this.$axios.get(this.$api.deviceScope.selectUserList).then(res => { |
| | | selectUserCondition({type: 2}).then(res => { |
| | | if (res.code == 200) { |
| | | this.responsibleOptions = res.data |
| | | } |
| | | }) |
| | | }); |
| | | }, |
| | | selectUserChange(val) { |
| | | const index = this.responsibleOptions.findIndex(item => item.id === val) |
| | |
| | | this.form.account = this.responsibleOptions[index].account |
| | | } |
| | | }, |
| | | // 打开表单弹框 |
| | | editForm(row) { |
| | | this.dialogVisible = true |
| | | this.form = {...row}; |
| | | this.form = { ...row }; |
| | | }, |
| | | // 提交表单数据 |
| | | saveOrUpdate() { |
| | | this.$refs.form.validate(async (valid) => { |
| | | if (valid) { |
| | | this.dialogVisible = false |
| | | const {code, data} = await this.$axios({ |
| | | method: 'post', |
| | | url: addOrUpdateRewardPunishmentApi, |
| | | data: this.form, |
| | | headers: { |
| | | 'Content-Type': 'application/json' |
| | | }, |
| | | noQs: true |
| | | }) |
| | | if (code == 200) { |
| | | this.$message.success("操作成功!") |
| | | addOrUpdateRewardPunishment(this.form).then(res => { |
| | | this.dialogVisible = false |
| | | this.$message.success("操作成功") |
| | | this.getPersonnelTraining(this.departId); |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | }, |
| | | async deleteRow(row) { |
| | | const {code, data} = await this.$axios({ |
| | | method: 'delete', |
| | | url: deleteRewardPunishmentApi, |
| | | params: { |
| | | id: row.id |
| | | } |
| | | }) |
| | | if (code == 200) { |
| | | this.$message.success("操作成功!") |
| | | this.getPersonnelTraining(this.departId); |
| | | } |
| | | deleteRow(row) { |
| | | this.$confirm('是否删除当前数据?', "警告", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning" |
| | | }).then(() => { |
| | | deleteRewardPunishment({ id: row.id }).then(res => { |
| | | if (res.code === 500) { |
| | | return |
| | | } |
| | | this.$message.success('删除成功') |
| | | this.getPersonnelTraining(this.departId); |
| | | }).catch(e => { |
| | | this.$message.error('删除失败') |
| | | }) |
| | | }).catch(() => { }) |
| | | |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | } |
| | | }; |
| | | </script> |
| | | <style scoped> |
| | | .dateTime >>>.el-form-item__content { |
| | | width: 260px; |
| | | } |
| | | </style> |