chooseDepartUserModal.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  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="cancel"
  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="salesReturnType">
  22. <v-select
  23. v-model="form.salesReturnType"
  24. id="departUser-salesReturnType"
  25. code="SALES_RETURN_TYPE"
  26. placeholder="请选择退货类型"
  27. allowClear></v-select>
  28. </a-form-model-item>
  29. <a-form-model-item label="申请人员" prop="applyPersonSn">
  30. <employee style="width: 100%;" @change="employeeChange" id="departUser-Employee" v-model="form.applyPersonSn"></employee>
  31. </a-form-model-item>
  32. <a-form-model-item label="审批人员" prop="approvers">
  33. <dingDepartUser
  34. ref="departUserApp"
  35. @loaded="uploading=false"
  36. id="departUser-approvers"
  37. :disabled="uploading"
  38. v-model="form.approvers"
  39. @change="changeApprovers"
  40. allowClear
  41. placeholder="请选择审批人员"
  42. ></dingDepartUser>
  43. </a-form-model-item>
  44. <a-form-model-item label="抄送人" prop="ccList">
  45. <dingDepartUser
  46. ref="departUserCc"
  47. @loaded="uploading=false"
  48. :disabled="uploading"
  49. id="departUser-ccList"
  50. v-model="form.ccList"
  51. allowClear
  52. placeholder="请选择抄送人"
  53. ></dingDepartUser>
  54. </a-form-model-item>
  55. <a-form-model-item label="附件" help="(支持图片、word、excel、PDF等格式,最多10个附件)">
  56. <Upload
  57. style="height: 100%;"
  58. v-model="form.attachmentList"
  59. ref="attachList"
  60. :fileSize="10"
  61. :maxNums="10"
  62. fileType="*"
  63. uploadType="attach"
  64. :action="attachAction"
  65. @change="changeAttach"
  66. upText="上传附件"></Upload>
  67. </a-form-model-item>
  68. </a-form-model>
  69. </div>
  70. <div class="btn-cont">
  71. <a-button type="primary" id="departUser-save" @click="handleSave">确定</a-button>
  72. <a-button :loading="uploading" style="margin-left: 15px;" @click="updateUser">刷新人员</a-button>
  73. <a-button id="departUser-back" @click="cancel" style="margin-left: 15px;">取消</a-button>
  74. </div>
  75. </div>
  76. </a-spin>
  77. </a-modal>
  78. </template>
  79. <script>
  80. import { VSelect, Upload } from '@/components'
  81. import dingDepartUser from '@/views/common/dingDepartUser.js'
  82. import employee from '@/views/expenseManagement/expenseReimbursement/employee.js'
  83. import { sign } from 'core-js/fn/number'
  84. export default {
  85. name: 'ChooseDepartUserModal',
  86. components: { dingDepartUser, employee, VSelect, Upload },
  87. props: {
  88. openModal: { // 弹框显示状态
  89. type: Boolean,
  90. default: false
  91. }
  92. },
  93. data () {
  94. return {
  95. uploading: false,
  96. spinning: false,
  97. isShow: this.openModal, // 是否打开弹框
  98. title: '',
  99. formItemLayout: {
  100. labelCol: { span: 4 },
  101. wrapperCol: { span: 16 }
  102. },
  103. form: {
  104. salesReturnType: undefined,
  105. applyPersonSn: undefined,
  106. approvers: [], // 审批人
  107. ccList: [] // 抄送人
  108. },
  109. attachList: [],
  110. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
  111. rules: {
  112. salesReturnType: [
  113. { required: true, message: '请选择退货类型', trigger: 'change' }
  114. ],
  115. applyPersonSn: [
  116. { required: true, message: '请选择申请人员', trigger: 'change' }
  117. ],
  118. approvers: [
  119. { required: true, type: 'array', message: '请选择审批人', trigger: 'change' }
  120. ]
  121. }
  122. }
  123. },
  124. methods: {
  125. // 申请人员
  126. employeeChange (v, r) {
  127. this.$nextTick(() => {
  128. this.$refs.ruleForm.validateField(['applyPersonSn'])
  129. })
  130. },
  131. // 附件上传
  132. changeAttach (file) {
  133. this.attachList = JSON.parse(file)
  134. this.attachList.map(item => {
  135. item.fileType = item.extName
  136. })
  137. },
  138. updateUser () {
  139. this.uploading = true
  140. this.$refs.departUserApp.updateDeptUser()
  141. // this.$refs.departUserCc.updateDeptUser()
  142. },
  143. changeApprovers (value) {
  144. this.form.approvers = value
  145. this.$refs.ruleForm.clearValidate()
  146. },
  147. getTreeVal (data) {
  148. const ret = []
  149. data.map(item => {
  150. ret.push(item.value)
  151. })
  152. return ret.join(',')
  153. },
  154. // 确定
  155. handleSave (e) {
  156. e.preventDefault()
  157. const _this = this
  158. this.$refs.ruleForm.validate(valid => {
  159. if (valid) {
  160. const form = JSON.parse(JSON.stringify(_this.form))
  161. form.attachmentList = this.attachList
  162. if (form.approvers) {
  163. form.approvers = this.getTreeVal(form.approvers)
  164. }
  165. if (form.ccList) {
  166. form.ccList = this.getTreeVal(form.ccList)
  167. }
  168. console.log(form)
  169. this.$emit('submit', form)
  170. this.$emit('close')
  171. } else {
  172. return false
  173. }
  174. })
  175. },
  176. getDetail (data) {
  177. this.form = Object.assign(this.form, {
  178. salesReturnType: data.salesReturnType,
  179. applyPersonSn: data.applyPersonSn
  180. })
  181. // 获取附件列表
  182. this.form.attachmentList = ''
  183. this.attachList = data.attachmentList
  184. this.$nextTick(() => {
  185. if (this.attachList.length) {
  186. this.$refs.attachList.setFileList(this.attachList)
  187. }
  188. })
  189. },
  190. resetForm () {
  191. this.$nextTick(() => {
  192. this.$refs.ruleForm.resetFields()
  193. this.$refs.attachList.setFileList('')
  194. })
  195. this.attachList = []
  196. this.form = {
  197. salesReturnType: undefined,
  198. applyPersonSn: undefined,
  199. ccList: undefined,
  200. approvers: undefined,
  201. attachmentList: ''
  202. }
  203. },
  204. cancel () {
  205. this.isShow = false
  206. }
  207. },
  208. watch: {
  209. // 父页面传过来的弹框状态
  210. openModal (newValue, oldValue) {
  211. this.isShow = newValue
  212. },
  213. // 重定义的弹框状态
  214. isShow (newValue, oldValue) {
  215. if (!newValue) {
  216. this.$emit('close')
  217. this.resetForm()
  218. }
  219. }
  220. }
  221. }
  222. </script>
  223. <style lang="less">
  224. .departUser-modal{
  225. .ant-modal-body {
  226. padding: 30px 40px 24px;
  227. }
  228. .btn-cont {
  229. text-align: center;
  230. margin: 35px 0 10px;
  231. }
  232. }
  233. </style>