chooseDepartUserModal.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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. import { getFinishDingUser } from '@/api/pickUp.js'
  61. export default {
  62. name: 'ChooseDepartUserModal',
  63. components: { dingDepartUser },
  64. props: {
  65. openModal: { // 弹框显示状态
  66. type: Boolean,
  67. default: false
  68. },
  69. type: {
  70. type: String,
  71. default: ''
  72. },
  73. showDefUser: { // 是否显示默认值
  74. type: Boolean,
  75. default: true
  76. }
  77. },
  78. data () {
  79. return {
  80. uploading: false,
  81. spinning: false,
  82. isShow: this.openModal, // 是否打开弹框
  83. title: '',
  84. formItemLayout: {
  85. labelCol: { span: 4 },
  86. wrapperCol: { span: 16 }
  87. },
  88. form: {
  89. approvers: [], // 审批人
  90. ccList: [] // 抄送人
  91. },
  92. rules: {
  93. approvers: [
  94. { required: true, type: 'array', message: '请选择审批人', trigger: 'change' }
  95. ]
  96. // ccList: [
  97. // { required: true, message: '请选择抄送人', trigger: 'change' }
  98. // ]
  99. }
  100. }
  101. },
  102. methods: {
  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. console.log(data)
  114. const ret = []
  115. data.map(item => {
  116. ret.push(item.value)
  117. })
  118. return ret.join(',')
  119. },
  120. // 确定
  121. handleSave (e) {
  122. e.preventDefault()
  123. const _this = this
  124. this.$refs.ruleForm.validate(valid => {
  125. if (valid) {
  126. const form = JSON.parse(JSON.stringify(_this.form))
  127. if (form.approvers) {
  128. form.approvers = this.getTreeVal(form.approvers)
  129. }
  130. if (form.ccList) {
  131. form.ccList = this.getTreeVal(form.ccList)
  132. }
  133. console.log(form)
  134. this.$emit('submit', form)
  135. this.$emit('close')
  136. } else {
  137. return false
  138. }
  139. })
  140. },
  141. getFormatUser (list) {
  142. const ret = []
  143. list.map(item => {
  144. ret.push({ label: item.userName, value: item.userId || item.userid })
  145. })
  146. return ret
  147. },
  148. async getDefAudit () {
  149. // 费用单'' 提货单'billOfLading' 财务单'financeOrder'
  150. if (!this.type) {
  151. // 默认写死的人员
  152. const data = await getDefaultCofig({ code: 'EXPENSE_ACCOUNT_DING_USER' }).then(res => res.data)
  153. const ret = JSON.parse(data.value)
  154. console.log(ret)
  155. this.form.approvers = this.getFormatUser(ret.approvers)
  156. this.form.ccList = this.getFormatUser(ret.ccList)
  157. } else if (this.type && this.type == 'financeOrder') {
  158. // 取最新一次审核通过值
  159. const data = await queryLastFinishDingUser().then(res => res.data)
  160. if (data.approversTaskList) {
  161. this.form.approvers = this.getFormatUser(data.approversTaskList)
  162. }
  163. if (data.ccTaskList) {
  164. this.form.ccList = this.getFormatUser(data.ccTaskList)
  165. }
  166. } else if (this.type && this.type == 'billOfLading') {
  167. const data = await getFinishDingUser().then(res => res.data)
  168. if (data.approversTaskList) {
  169. this.form.approvers = this.getFormatUser(data.approversTaskList)
  170. }
  171. if (data.ccTaskList) {
  172. this.form.ccList = this.getFormatUser(data.ccTaskList)
  173. }
  174. }
  175. },
  176. resetForm () {
  177. this.$nextTick(() => {
  178. this.$refs.ruleForm.resetFields()
  179. })
  180. this.form = {
  181. ccList: undefined,
  182. approvers: undefined
  183. }
  184. }
  185. },
  186. watch: {
  187. // 父页面传过来的弹框状态
  188. openModal (newValue, oldValue) {
  189. this.isShow = newValue
  190. },
  191. // 重定义的弹框状态
  192. isShow (newValue, oldValue) {
  193. if (!newValue) {
  194. this.$emit('close')
  195. this.resetForm()
  196. } else {
  197. if (this.showDefUser) {
  198. this.getDefAudit()
  199. }
  200. }
  201. }
  202. }
  203. }
  204. </script>
  205. <style lang="less">
  206. .departUser-modal{
  207. .ant-modal-body {
  208. padding: 30px 40px 24px;
  209. }
  210. .btn-cont {
  211. text-align: center;
  212. margin: 35px 0 10px;
  213. }
  214. }
  215. </style>