index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. <template>
  2. <div class="white pa-3">
  3. <m-search :items="searchItems" v-model="searchValues" class="mb-3" @search="onSearch">
  4. <template #button>
  5. <el-upload class="el-button pa-0" action="#" :show-file-list="false" :http-request="onImport">
  6. <m-button type="primary" icon="el-icon-upload2" :loading="importLoading">导入手工数据</m-button>
  7. </el-upload>
  8. <m-button type="primary" icon="el-icon-download" :loading="downloadLoading" @click="onExport">导出手工数据模板</m-button>
  9. <!-- <m-button type="primary" icon="el-icon-check" :loading="submitLoading" :disable="checked" @click="onSubmit">薪酬对比确认</m-button> -->
  10. </template>
  11. </m-search>
  12. <m-table
  13. :items="items"
  14. :headers="headers"
  15. :loading="loading"
  16. :total="total"
  17. :page-size="pageInfo.size"
  18. :page-current="pageInfo.current"
  19. @page-change="onPageChange"
  20. @expand-change="onExpandChange"
  21. >
  22. <template #expand="{ row }">
  23. <el-form label-position="left" inline class="demo-table-expand">
  24. <m-card shadow="nerve">
  25. <el-timeline :reverse="reverse">
  26. <el-timeline-item
  27. :hide-timestamp="true">
  28. <el-row>
  29. <el-col :span="4">月份</el-col>
  30. <el-col :span="4">绩效薪资</el-col>
  31. <el-col :span="4">数据来源</el-col>
  32. <el-col :span="4">写入时间</el-col>
  33. <el-col :span="4">操作</el-col>
  34. </el-row>
  35. </el-timeline-item>
  36. <el-timeline-item
  37. v-for="(list, index) in row.childrenList"
  38. :key="index"
  39. :hide-timestamp="true">
  40. <el-row>
  41. <el-col class="col" :span="4">{{ list.month }}</el-col>
  42. <el-col class="col" :span="4">{{ list.performanceSalary || '暂无' }}</el-col>
  43. <el-col class="col" :span="4">{{ list.dataType === 1 ? '手工录入' : '系统数据'}}</el-col>
  44. <el-col class="col" :span="4">{{ list.createDate }}</el-col>
  45. <el-col class="col" :span="4">
  46. <m-button v-if="checked" type="text" size="small" icon="el-icon-check" disabled>已使用当前版本</m-button>
  47. <m-button
  48. v-else
  49. type="primary"
  50. size="small"
  51. @click="onConfirm(list)"
  52. >确认使用该版本</m-button>
  53. </el-col>
  54. </el-row>
  55. </el-timeline-item>
  56. </el-timeline>
  57. </m-card>
  58. </el-form>
  59. </template>
  60. </m-table>
  61. </div>
  62. </template>
  63. <script>
  64. import {
  65. getComparisonPage,
  66. uploadComparisonTemplate,
  67. downloadComparisonTemplate,
  68. getComparisonByEmployee,
  69. getComparisonConfirm,
  70. confirmComparisonVersion
  71. } from '@/api/salary'
  72. import { dateFormat } from '@/utils/date'
  73. import { downloadFile } from '@/utils'
  74. export default {
  75. name: 'salary-comparison',
  76. data () {
  77. return {
  78. importLoading: false,
  79. downloadLoading: false,
  80. submitLoading: false,
  81. searchItems: [
  82. {
  83. label: '月份',
  84. prop: 'month',
  85. type: 'date',
  86. option: {
  87. placeholder: '请选择月份',
  88. type: 'month',
  89. valueFormat: 'yyyy-MM',
  90. format: 'yyyy 年 MM 月'
  91. }
  92. },
  93. { label: '部门', prop: 'organizationName', type: 'input', option: { placeholder: '请输入部门' } },
  94. { label: '姓名', prop: 'employeeName', type: 'input', option: { placeholder: '请输入姓名' } }
  95. ],
  96. searchValues: {
  97. month: dateFormat('YYYY-mm', new Date()),
  98. organizationName: null,
  99. employeeName: null
  100. },
  101. headers: [
  102. { type: 'expand', prop: 'expand' },
  103. { label: '机构', prop: 'organizationName' },
  104. { label: '姓名', prop: 'employeeName' },
  105. { label: '统一认证号', prop: 'unifiedCertificationNumber' },
  106. { label: '月份', prop: 'month' }
  107. // { label: '操作', prop: 'action', align: 'center', width: 100 }
  108. ],
  109. items: [
  110. ],
  111. loading: false,
  112. total: 0,
  113. pageInfo: {
  114. current: 1,
  115. size: 10
  116. },
  117. checked: false
  118. }
  119. },
  120. created () {
  121. this.init()
  122. },
  123. methods: {
  124. async init () {
  125. try {
  126. const { data } = await getComparisonPage({
  127. page: this.pageInfo,
  128. ...this.searchValues
  129. })
  130. // 确认是否已经确认方案
  131. const { data: _data } = await getComparisonConfirm({
  132. page: {
  133. size: 10,
  134. current: 1
  135. },
  136. month: this.searchValues.month
  137. })
  138. this.checked = _data.records[0]?.version ?? false
  139. this.items = data.records.map(e => {
  140. return {
  141. ...e,
  142. childrenList: []
  143. }
  144. })
  145. this.total = data.total
  146. } catch (error) {
  147. this.$message.error(error)
  148. }
  149. },
  150. onSearch () {
  151. this.pageInfo.current = 1
  152. this.init()
  153. },
  154. async onImport (response) {
  155. this.importLoading = true
  156. const formData = new FormData()
  157. formData.append('file', response.file)
  158. try {
  159. await uploadComparisonTemplate(formData)
  160. this.$message.success('导入成功')
  161. this.init()
  162. } catch (error) {
  163. this.$message.error(error)
  164. } finally {
  165. this.importLoading = false
  166. }
  167. },
  168. async onExport () {
  169. this.downloadLoading = true
  170. try {
  171. const { data, name } = await downloadComparisonTemplate()
  172. downloadFile(data, name)
  173. } catch (error) {
  174. this.$message.error(error)
  175. } finally {
  176. this.downloadLoading = false
  177. }
  178. },
  179. async onExpandChange (row, expandedRows) {
  180. if (row.childrenList.length) {
  181. return
  182. }
  183. try {
  184. const { data } = await getComparisonByEmployee({
  185. page: {
  186. size: 999,
  187. current: 1
  188. },
  189. entity: {
  190. unifiedCertificationNumber: row.unifiedCertificationNumber,
  191. month: row.month
  192. }
  193. })
  194. row.childrenList = data.records
  195. } catch (error) {
  196. this.$message.error(error)
  197. }
  198. },
  199. onConfirm (item) {
  200. const h = this.$createElement
  201. this.$confirm(h('div', null, [
  202. h('p', undefined, '确认后将无法修改,是否确认?'),
  203. h('p', { style: 'color: #ff5555' }, '注:版本确认之后所有人将同步使用当前选择的版本')
  204. ]), '提示', {
  205. confirmButtonText: '确定',
  206. cancelButtonText: '取消',
  207. type: 'warning'
  208. }).then(async () => {
  209. try {
  210. await confirmComparisonVersion({
  211. employeePerformanceConfirmation: {
  212. month: item.month,
  213. version: item.version
  214. }
  215. })
  216. this.$message.success('确认成功')
  217. this.checked = true
  218. } catch (error) {
  219. this.$message.error(error)
  220. }
  221. }).catch(_ => {})
  222. },
  223. onSubmit () {
  224. this.submitLoading = true
  225. },
  226. onPageChange (page) {
  227. this.pageInfo.current = page
  228. this.init()
  229. }
  230. }
  231. }
  232. </script>
  233. <style lang="scss" scoped>
  234. .col {
  235. height: 32px;
  236. line-height: 30px;
  237. }
  238. </style>