chooseDepartUserModal.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <template>
  2. <a-modal
  3. centered
  4. class="departUser-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择审批人员"
  8. v-model="isShow"
  9. @cancel="cancel"
  10. :width="700">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <div>
  13. <div class="departUser-con">
  14. <a-form-model
  15. id="departUser-form"
  16. ref="ruleForm"
  17. :model="form"
  18. :rules="rules"
  19. :label-col="formItemLayout.labelCol"
  20. :wrapper-col="formItemLayout.wrapperCol">
  21. <a-form-model-item label="申请人员" prop="applyPersonSn">
  22. <employee style="width: 100%;" @change="employeeChange" id="departUser-Employee" v-model="form.applyPersonSn"></employee>
  23. </a-form-model-item>
  24. <a-form-model-item label="审批人员" prop="approvers">
  25. <dingDepartUser
  26. ref="departUserApp"
  27. @loaded="uploading=false"
  28. id="departUser-approvers"
  29. :disabled="uploading"
  30. v-model="form.approvers"
  31. @change="changeApprovers"
  32. allowClear
  33. placeholder="请选择审批人员"
  34. ></dingDepartUser>
  35. </a-form-model-item>
  36. <a-form-model-item label="抄送人" prop="ccList">
  37. <dingDepartUser
  38. ref="departUserCc"
  39. @loaded="uploading=false"
  40. :disabled="uploading"
  41. id="departUser-ccList"
  42. v-model="form.ccList"
  43. allowClear
  44. placeholder="请选择抄送人"
  45. ></dingDepartUser>
  46. </a-form-model-item>
  47. </a-form-model>
  48. </div>
  49. <div class="btn-cont">
  50. <a-button type="primary" id="departUser-save" @click="handleSave">确定</a-button>
  51. <a-button :loading="uploading" style="margin-left: 15px;" @click="updateUser">刷新人员</a-button>
  52. <a-button id="departUser-back" @click="cancel" style="margin-left: 15px;">取消</a-button>
  53. </div>
  54. </div>
  55. </a-spin>
  56. </a-modal>
  57. </template>
  58. <script>
  59. import { VSelect, Upload } from '@/components'
  60. import dingDepartUser from '@/views/common/dingDepartUser.js'
  61. import employee from '@/views/expenseManagement/expenseReimbursement/employee.js'
  62. import { sign } from 'core-js/fn/number'
  63. export default {
  64. name: 'ChooseDepartUserModal',
  65. components: { dingDepartUser, employee, VSelect, Upload },
  66. props: {
  67. openModal: { // 弹框显示状态
  68. type: Boolean,
  69. default: false
  70. }
  71. },
  72. data () {
  73. return {
  74. uploading: false,
  75. spinning: false,
  76. isShow: this.openModal, // 是否打开弹框
  77. formItemLayout: {
  78. labelCol: { span: 4 },
  79. wrapperCol: { span: 16 }
  80. },
  81. form: {
  82. applyPersonSn: undefined,
  83. approvers: [], // 审批人
  84. ccList: [] // 抄送人
  85. },
  86. rules: {
  87. applyPersonSn: [
  88. { required: true, message: '请选择申请人员', trigger: 'change' }
  89. ],
  90. approvers: [
  91. { required: true, type: 'array', message: '请选择审批人员', trigger: 'change' }
  92. ]
  93. }
  94. }
  95. },
  96. methods: {
  97. // 申请人员
  98. employeeChange (v, r) {
  99. this.$nextTick(() => {
  100. this.$refs.ruleForm.validateField(['applyPersonSn'])
  101. })
  102. },
  103. updateUser () {
  104. this.uploading = true
  105. this.$refs.departUserApp.updateDeptUser()
  106. this.$refs.departUserCc.updateDeptUser()
  107. },
  108. changeApprovers (value) {
  109. this.form.approvers = value
  110. this.$refs.ruleForm.clearValidate()
  111. },
  112. getTreeVal (data) {
  113. const ret = []
  114. data.map(item => {
  115. ret.push(item.value)
  116. })
  117. return ret.join(',')
  118. },
  119. // 确定
  120. handleSave (e) {
  121. e.preventDefault()
  122. const _this = this
  123. this.$refs.ruleForm.validate(valid => {
  124. if (valid) {
  125. const form = JSON.parse(JSON.stringify(_this.form))
  126. if (form.approvers) {
  127. form.approvers = this.getTreeVal(form.approvers)
  128. }
  129. if (form.ccList) {
  130. form.ccList = this.getTreeVal(form.ccList)
  131. }
  132. this.$emit('submit', form)
  133. this.$emit('close')
  134. } else {
  135. return false
  136. }
  137. })
  138. },
  139. getDetail (data) {
  140. this.form = Object.assign(this.form, {
  141. applyPersonSn: data.applyPersonSn
  142. })
  143. },
  144. resetForm () {
  145. this.$nextTick(() => {
  146. this.$refs.ruleForm.resetFields()
  147. })
  148. this.form = {
  149. applyPersonSn: undefined,
  150. ccList: undefined,
  151. approvers: undefined
  152. }
  153. },
  154. cancel () {
  155. this.isShow = false
  156. }
  157. },
  158. watch: {
  159. // 父页面传过来的弹框状态
  160. openModal (newValue, oldValue) {
  161. this.isShow = newValue
  162. },
  163. // 重定义的弹框状态
  164. isShow (newValue, oldValue) {
  165. if (!newValue) {
  166. this.$emit('close')
  167. this.resetForm()
  168. }
  169. }
  170. }
  171. }
  172. </script>
  173. <style lang="less">
  174. .departUser-modal{
  175. .ant-modal-body {
  176. padding: 30px 40px 24px;
  177. }
  178. .btn-cont {
  179. text-align: center;
  180. margin: 35px 0 10px;
  181. }
  182. }
  183. </style>