chooseDepartUserModal.vue 5.5 KB

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