chooseDepartUserModal.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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. import { queryLastFinishDingUser } from '@/api/salesReturn'
  85. export default {
  86. name: 'ChooseDepartUserModal',
  87. components: { dingDepartUser, employee, VSelect, Upload },
  88. props: {
  89. openModal: { // 弹框显示状态
  90. type: Boolean,
  91. default: false
  92. },
  93. showDefUser: { // 是否显示默认值
  94. type: Boolean,
  95. default: true
  96. }
  97. },
  98. data () {
  99. return {
  100. uploading: false,
  101. spinning: false,
  102. isShow: this.openModal, // 是否打开弹框
  103. title: '',
  104. formItemLayout: {
  105. labelCol: { span: 4 },
  106. wrapperCol: { span: 16 }
  107. },
  108. form: {
  109. salesReturnType: undefined,
  110. applyPersonSn: undefined,
  111. approvers: [], // 审批人
  112. ccList: [] // 抄送人
  113. },
  114. attachList: [],
  115. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
  116. rules: {
  117. salesReturnType: [
  118. { required: true, message: '请选择退货类型', trigger: 'change' }
  119. ],
  120. applyPersonSn: [
  121. { required: true, message: '请选择申请人员', trigger: 'change' }
  122. ],
  123. approvers: [
  124. { required: true, type: 'array', message: '请选择审批人', trigger: 'change' }
  125. ]
  126. }
  127. }
  128. },
  129. methods: {
  130. // 申请人员
  131. employeeChange (v, r) {
  132. this.$nextTick(() => {
  133. this.$refs.ruleForm.validateField(['applyPersonSn'])
  134. })
  135. },
  136. // 附件上传
  137. changeAttach (file) {
  138. this.attachList = JSON.parse(file)
  139. this.attachList.map(item => {
  140. item.fileType = item.extName
  141. })
  142. },
  143. updateUser () {
  144. this.uploading = true
  145. this.$refs.departUserApp.updateDeptUser()
  146. // this.$refs.departUserCc.updateDeptUser()
  147. },
  148. changeApprovers (value) {
  149. this.form.approvers = value
  150. this.$refs.ruleForm.clearValidate()
  151. },
  152. getTreeVal (data) {
  153. const ret = []
  154. data.map(item => {
  155. ret.push(item.value)
  156. })
  157. return ret.join(',')
  158. },
  159. // 确定
  160. handleSave (e) {
  161. e.preventDefault()
  162. const _this = this
  163. this.$refs.ruleForm.validate(valid => {
  164. if (valid) {
  165. const form = JSON.parse(JSON.stringify(_this.form))
  166. form.attachmentList = this.attachList
  167. if (form.approvers) {
  168. form.approvers = this.getTreeVal(form.approvers)
  169. }
  170. if (form.ccList) {
  171. form.ccList = this.getTreeVal(form.ccList)
  172. }
  173. console.log(form)
  174. this.$emit('submit', form)
  175. this.$emit('close')
  176. } else {
  177. return false
  178. }
  179. })
  180. },
  181. getDetail (data) {
  182. this.form = Object.assign(this.form, {
  183. salesReturnType: data.salesReturnType,
  184. applyPersonSn: data.applyPersonSn
  185. })
  186. // 获取附件列表
  187. this.form.attachmentList = ''
  188. this.attachList = data.attachmentList
  189. this.$nextTick(() => {
  190. if (this.attachList.length) {
  191. this.$refs.attachList.setFileList(this.attachList)
  192. }
  193. })
  194. },
  195. resetForm () {
  196. this.$nextTick(() => {
  197. this.$refs.ruleForm.resetFields()
  198. this.$refs.attachList.setFileList('')
  199. })
  200. this.attachList = []
  201. this.form = {
  202. salesReturnType: undefined,
  203. applyPersonSn: undefined,
  204. ccList: undefined,
  205. approvers: undefined,
  206. attachmentList: ''
  207. }
  208. },
  209. cancel () {
  210. this.isShow = false
  211. },
  212. pageInit () {
  213. // 获取审批人员默认值
  214. if (this.showDefUser) {
  215. queryLastFinishDingUser({}).then(res => {
  216. if (res.status == 200) {
  217. if (res.data.approversTaskList) {
  218. const newApprovers = res.data.approversTaskList.map(item => {
  219. return { label: item.userName, value: item.userId || item.userid }
  220. })
  221. this.form.approvers = this.getTreeVal(newApprovers)
  222. }
  223. if (res.data.ccTaskList) {
  224. const newCcTaskList = res.data.ccTaskList.map(item => {
  225. return { label: item.userName, value: item.userId || item.userid }
  226. })
  227. this.form.ccList = this.getTreeVal(newCcTaskList)
  228. }
  229. }
  230. })
  231. }
  232. }
  233. },
  234. watch: {
  235. // 父页面传过来的弹框状态
  236. openModal (newValue, oldValue) {
  237. this.isShow = newValue
  238. },
  239. // 重定义的弹框状态
  240. isShow (newValue, oldValue) {
  241. if (!newValue) {
  242. this.$emit('close')
  243. this.resetForm()
  244. } else {
  245. this.pageInit()
  246. }
  247. }
  248. }
  249. }
  250. </script>
  251. <style lang="less">
  252. .departUser-modal{
  253. .ant-modal-body {
  254. padding: 30px 40px 24px;
  255. }
  256. .btn-cont {
  257. text-align: center;
  258. margin: 35px 0 10px;
  259. }
  260. }
  261. </style>