sharingClaimDetailsClaim.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <m-dialog title="分润认领" ref="dialog" append-to-body @sure="onSure">
  3. <m-form :items="formItems" v-model="formValues" v-loading="loading" label-width="140px">
  4. <template #msg>
  5. <el-descriptions :column="2" border>
  6. <el-descriptions-item label="客户编号">{{ formValues.customerId }}</el-descriptions-item>
  7. <el-descriptions-item label="机构名称">{{ formValues.organizationName }}</el-descriptions-item>
  8. <el-descriptions-item label="总金额">{{ formValues.residualAmount }}</el-descriptions-item>
  9. <el-descriptions-item label="当前已分配">{{ count }}</el-descriptions-item>
  10. </el-descriptions>
  11. </template>
  12. <template #sharing>
  13. <el-form ref="form" :model="formQuery">
  14. <m-table
  15. clearHeader
  16. shadow="never"
  17. :headers="headers"
  18. :items="formQuery.items"
  19. >
  20. <template #unifiedCertificationNumber="scope">
  21. <el-form-item
  22. :prop="`items.${scope.$index}.unifiedCertificationNumber`"
  23. :rules="{ required: true, message: '请选择员工', trigger: 'change' }"
  24. >
  25. <el-cascader
  26. v-model="scope.row.unifiedCertificationNumber"
  27. placeholder="请选择员工"
  28. filterable
  29. :options="employeeItems"
  30. :props="{
  31. emitPath: false,
  32. value: 'id',
  33. label: 'title',
  34. children: 'child'
  35. }"
  36. ></el-cascader>
  37. <!-- <el-select v-model="scope.row.unifiedCertificationNumber" filterable placeholder="请选择员工">
  38. <el-option
  39. v-for="item in employeeItems"
  40. :key="item.personnelCode"
  41. :label="item.employeeName"
  42. :value="item.personnelCode">
  43. </el-option>
  44. </el-select> -->
  45. </el-form-item>
  46. </template>
  47. <template #amount="scope">
  48. <el-form-item
  49. :prop="`items.${scope.$index}.amount`"
  50. :rules="employeeProfitSharingRatioRules"
  51. >
  52. <el-input v-model="scope.row.amount" placeholder="请输入分配金额">
  53. <!-- <template #append>
  54. %
  55. </template> -->
  56. </el-input>
  57. </el-form-item>
  58. </template>
  59. <template #actions="{ $index }">
  60. <m-button v-if="formQuery.items.length > 1" type="danger" text size="small" @click="removeItem($index)">移除</m-button>
  61. </template>
  62. <!-- <template #employeeProfitSharingRatio="{ row }">
  63. <el-tag>{{ row.employeeProfitSharingRatio }} %</el-tag>
  64. </template> -->
  65. <div class="d-flex justify-center pa-3">
  66. <m-button size="small" type="orange" icon="el-icon-plus" @click="addItem">新增一个分润</m-button>
  67. </div>
  68. </m-table>
  69. </el-form>
  70. </template>
  71. </m-form>
  72. </m-dialog>
  73. </template>
  74. <script>
  75. import { getOrganizationAtlasAll } from '@/api/system'
  76. import {
  77. claimPerformanceMore
  78. } from '@/api/salary'
  79. const defaultItem = {
  80. unifiedCertificationNumber: null
  81. // employeeProfitSharingRatio: null
  82. }
  83. export default {
  84. name: 'sharingClaimDetailsClaim',
  85. data () {
  86. return {
  87. formValues: {},
  88. loading: false,
  89. employeeItems: [],
  90. formQuery: {
  91. items: []
  92. },
  93. headers: [
  94. { label: '员工姓名', prop: 'unifiedCertificationNumber' },
  95. { label: '分润金额', prop: 'amount' },
  96. { label: '操作', prop: 'actions' }
  97. // { label: '分润占比', prop: 'employeeProfitSharingRatio' }
  98. ],
  99. formItems: [
  100. {
  101. label: '分润信息',
  102. prop: 'msg'
  103. },
  104. {
  105. label: '分润',
  106. prop: 'sharing'
  107. }
  108. ],
  109. employeeProfitSharingRatioRules: [
  110. {
  111. validator: (rule, value, callback) => {
  112. if (!value) {
  113. return callback(new Error('请输入分润金额'))
  114. }
  115. if (isNaN(value) || isNaN(parseFloat(value))) {
  116. callback(new Error('请输入数字值'))
  117. } else {
  118. callback()
  119. }
  120. },
  121. trigger: ['blur', 'change']
  122. }
  123. ]
  124. }
  125. },
  126. computed: {
  127. count () {
  128. return this.formQuery.items.reduce((sum, e) => {
  129. return sum + +(e.amount || 0)
  130. }, 0)
  131. }
  132. },
  133. methods: {
  134. open (item) {
  135. this.formValues = {
  136. organizationName: item.organizationName,
  137. customerId: item.customerId,
  138. serialNumber: item.serialNumber,
  139. residualAmount: item.residualAmount
  140. }
  141. this.formQuery.items = [{ ...defaultItem }]
  142. this.$refs.dialog.open()
  143. this.getEmployeeItems()
  144. // this.getEmployeeItems(item.organizationNo)
  145. },
  146. async getEmployeeItems () {
  147. this.loading = true
  148. try {
  149. const { data } = await getOrganizationAtlasAll({ type: 0 })
  150. this.employeeItems = [data]
  151. } catch (error) {
  152. this.employeeItems = []
  153. this.$message.error(error)
  154. } finally {
  155. this.loading = false
  156. }
  157. },
  158. removeItem (index) {
  159. this.formQuery.items.splice(index, 1)
  160. },
  161. // async getEmployeeItems (organizationNo) {
  162. // if (!organizationNo) {
  163. // this.employeeItems = []
  164. // return
  165. // }
  166. // this.loading = true
  167. // try {
  168. // const params = {
  169. // organizationNo,
  170. // page: { current: 1, size: 9999 }
  171. // }
  172. // const { data } = await getRosterList(params)
  173. // this.employeeItems = data.records
  174. // } catch (error) {
  175. // this.employeeItems = []
  176. // this.$message.error(error)
  177. // } finally {
  178. // this.loading = false
  179. // }
  180. // },
  181. addItem () {
  182. this.formQuery.items.push({ ...defaultItem })
  183. },
  184. onSure () {
  185. this.$refs.form.validate(async (valid) => {
  186. if (!valid) {
  187. this.$message.error('请填写完整')
  188. return
  189. }
  190. if (this.count > this.formValues.residualAmount) {
  191. this.$message.error('分润金额不能超过可分配金额')
  192. return
  193. }
  194. try {
  195. await claimPerformanceMore({
  196. serialNumber: this.formValues.serialNumber,
  197. items: this.formQuery.items.map(e => {
  198. return {
  199. serialNumber: this.formValues.serialNumber,
  200. amount: e.amount,
  201. unifiedCertificationNumber: e.unifiedCertificationNumber
  202. }
  203. })
  204. })
  205. this.$message.success('分润成功')
  206. this.$refs.dialog.close()
  207. this.$emit('success')
  208. } catch (error) {
  209. this.$message.error(error)
  210. }
  211. })
  212. }
  213. }
  214. }
  215. </script>
  216. <style lang="scss" scoped>
  217. </style>