chooseDepartUserModal.vue 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  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 id="departUser-back" @click="isShow = false" style="margin-right: 15px;">取消</a-button>
  49. <a-button id="departUser-refash" :loading="uploading" style="margin-right: 15px;" @click="updateUser">刷新人员</a-button>
  50. <a-button type="primary" id="departUser-save" @click="handleSave">确定</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. // 刷新人员数据
  104. updateUser () {
  105. this.uploading = true
  106. this.$refs.departUserApp.updateDeptUser()
  107. // this.$refs.departUserCc.updateDeptUser()
  108. },
  109. // 选择人员
  110. changeApprovers (value) {
  111. this.form.approvers = value
  112. this.$refs.ruleForm.clearValidate()
  113. },
  114. // 获取人员组织树数据
  115. getTreeVal (data) {
  116. const ret = []
  117. data.map(item => {
  118. ret.push(item.value)
  119. })
  120. return ret.join(',')
  121. },
  122. // 确定
  123. handleSave (e) {
  124. e.preventDefault()
  125. const _this = this
  126. this.$refs.ruleForm.validate(valid => {
  127. if (valid) {
  128. const form = JSON.parse(JSON.stringify(_this.form))
  129. if (form.approvers) {
  130. form.approvers = this.getTreeVal(form.approvers)
  131. }
  132. if (form.ccList) {
  133. form.ccList = this.getTreeVal(form.ccList)
  134. }
  135. this.$emit('submit', form)
  136. this.$emit('close')
  137. } else {
  138. return false
  139. }
  140. })
  141. },
  142. // 格式化人员数据
  143. getFormatUser (list) {
  144. const ret = []
  145. list.map(item => {
  146. ret.push({ label: item.userName, value: item.userId || item.userid })
  147. })
  148. return ret
  149. },
  150. // 获取默认人员选项
  151. async getDefAudit () {
  152. // 费用单时 type = ''
  153. if (!this.type) {
  154. // 默认写死的人员
  155. const data = await getDefaultCofig({ code: 'EXPENSE_ACCOUNT_DING_USER' }).then(res => res.data)
  156. const ret = JSON.parse(data.value)
  157. this.form.approvers = this.getFormatUser(ret.approvers)
  158. this.form.ccList = this.getFormatUser(ret.ccList)
  159. } else if (this.type && this.type == 'financeOrder') { // 财务单 type = 'financeOrder'
  160. // 取最新一次审核通过值
  161. const data = await queryLastFinishDingUser().then(res => res.data)
  162. if (data.approversTaskList) {
  163. this.form.approvers = this.getFormatUser(data.approversTaskList)
  164. }
  165. if (data.ccTaskList) {
  166. this.form.ccList = this.getFormatUser(data.ccTaskList)
  167. }
  168. } else if (this.type && this.type == 'billOfLading') { // 提货单 type = 'billOfLading'
  169. // 取最新一次审核通过值
  170. const data = await getFinishDingUser().then(res => res.data)
  171. if (data.approversTaskList) {
  172. this.form.approvers = this.getFormatUser(data.approversTaskList)
  173. }
  174. if (data.ccTaskList) {
  175. this.form.ccList = this.getFormatUser(data.ccTaskList)
  176. }
  177. }
  178. },
  179. // 重置
  180. resetForm () {
  181. this.$nextTick(() => {
  182. this.$refs.ruleForm.resetFields()
  183. })
  184. this.form = {
  185. ccList: undefined,
  186. approvers: undefined
  187. }
  188. }
  189. },
  190. watch: {
  191. // 父页面传过来的弹框状态
  192. openModal (newValue, oldValue) {
  193. this.isShow = newValue
  194. },
  195. // 重定义的弹框状态
  196. isShow (newValue, oldValue) {
  197. if (!newValue) {
  198. this.$emit('close')
  199. this.resetForm()
  200. } else {
  201. if (this.showDefUser) {
  202. this.getDefAudit()
  203. }
  204. }
  205. }
  206. }
  207. }
  208. </script>
  209. <style lang="less">
  210. .departUser-modal{
  211. .ant-modal-body {
  212. padding: 30px 40px 24px;
  213. }
  214. .btn-cont {
  215. text-align: center;
  216. margin: 35px 0 10px;
  217. }
  218. }
  219. </style>