basicInfoModal.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. <template>
  2. <a-modal
  3. centered
  4. class="allocateBill-basicInfo-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. :title="isEdit?'编辑':'新增'"
  8. v-model="isShow"
  9. @cancel="isShow = false"
  10. :width="900">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <a-form-model
  13. id="allocateBill-basicInfo-form"
  14. ref="ruleForm"
  15. :model="form"
  16. :rules="rules"
  17. :label-col="formItemLayout.labelCol"
  18. :wrapper-col="formItemLayout.wrapperCol"
  19. >
  20. <a-row :gutter="15">
  21. <a-col :md="12" :sm="24" v-if="!isEdit">
  22. <a-form-model-item label="调往对象" prop="targetType">
  23. <a-radio-group v-model="form.targetType" @change="targetTypeChange">
  24. <a-radio v-for="(item,index) in targetTypeList" :key="index" :value="item.code">{{ item.dispName }}</a-radio>
  25. </a-radio-group>
  26. </a-form-model-item>
  27. </a-col>
  28. <a-col :md="12" :sm="24" v-if="!isEdit">
  29. <a-form-model-item label="调往对象名称" :prop="isDealer||isDepartment ? 'targetSn' : 'targetName'">
  30. <a-select
  31. v-if="isDealer"
  32. show-search
  33. id="allocateBill-basicInfo-dealerName"
  34. v-model="form.targetSn"
  35. placeholder="请选择经销商"
  36. :filter-option="false"
  37. :not-found-content="fetching ? undefined : null"
  38. @search="fetchUser"
  39. @change="handleChange"
  40. >
  41. <a-spin v-if="fetching" slot="notFoundContent" size="small" />
  42. <a-select-option v-for="item in dealerData" :key="item.dealerSn" :value="item.dealerSn">{{ item.dealerName }}</a-select-option>
  43. </a-select>
  44. <department v-else-if="isDepartment" style="width: 100%;" placeholder="请选择部门" @change="departementChange" v-model="form.targetSn"></department>
  45. <a-input v-else v-model="form.targetName" placeholder="请输入调往对象名称(最多30个字符)" :maxLength="30"></a-input>
  46. </a-form-model-item>
  47. </a-col>
  48. <a-col :md="12" :sm="24" v-if="!isEdit">
  49. <a-form-model-item label="调出仓库" prop="warehouseSn">
  50. <warehouse
  51. v-model="form.warehouseSn"
  52. id="allocateBill-basicInfo-warehouseSn"
  53. placeholder="请选择调出仓库"
  54. />
  55. </a-form-model-item>
  56. </a-col>
  57. <a-col :md="12" :sm="24">
  58. <a-form-model-item label="费用/调拨类型" prop="costTypeSn">
  59. <AllocateType id="allocateBill-basicInfo-allocateTypeSn" v-model="allocateTypeVal" placeholder="请选择费用/调拨类型" @change="allocateTypeChange"></AllocateType>
  60. </a-form-model-item>
  61. </a-col>
  62. <a-col :md="12" :sm="24">
  63. <a-form-model-item label="费用归属品牌">
  64. <ProductBrand id="allocateBill-basicInfo-productBrandSn" @change="changeBrand" v-model="form.productBrandSn" placeholder="请选择费用归属品牌(单选)"></ProductBrand>
  65. </a-form-model-item>
  66. </a-col>
  67. <a-col :md="12" :sm="24">
  68. <a-form-model-item label="费用归属品类">
  69. <productTypeAll placeholder="请选择费用归属品类(单选,可选二级或三级)" @change="changeProductType" v-model="productType" id="allocateBill-basicInfo-productType"></productTypeAll>
  70. </a-form-model-item>
  71. </a-col>
  72. <a-col :md="12" :sm="24">
  73. <a-form-model-item label="起止时间" prop="time">
  74. <a-range-picker
  75. style="width:100%"
  76. v-model="form.time"
  77. :format="dateFormat"
  78. @change="dateChange"
  79. :placeholder="['开始时间', '结束时间']" />
  80. </a-form-model-item>
  81. </a-col>
  82. <a-col :md="24" :sm="24">
  83. <a-form-model-item style="margin-bottom:10px;" label="备注" prop="remark" :wrapperCol="{ span: 20 }" :labelCol="{ span: 4 }">
  84. <a-textarea id="allocateBill-basicInfo-remark" :maxLength="120" v-model="form.remark" placeholder="请输入备注(最多120个字符)" allowClear />
  85. </a-form-model-item>
  86. </a-col>
  87. <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
  88. <a-form-model-item label="附件" help="(支持图片、word、excel、PDF等格式,最多10个附件)" :label-col="{span:4}" :wrapper-col="{span:18}">
  89. <Upload
  90. style="height: 100%;"
  91. id="allocateBill-attachList"
  92. v-model="form.attachmentList"
  93. ref="attachList"
  94. :fileSize="10"
  95. :maxNums="10"
  96. fileType="*"
  97. uploadType="attach"
  98. :action="attachAction"
  99. @change="changeAttach"
  100. upText="上传附件"></Upload>
  101. </a-form-model-item>
  102. </a-col>
  103. </a-row>
  104. </a-form-model>
  105. <div class="btn-cont">
  106. <a-button type="primary" :loading="spinning" id="allocateBill-basicInfo-modal-save" @click="handleSave">保存</a-button>
  107. <a-button id="allocateBill-basicInfo-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  108. </div>
  109. </a-spin>
  110. </a-modal>
  111. </template>
  112. <script>
  113. import { commonMixin } from '@/utils/mixin'
  114. import debounce from 'lodash/debounce'
  115. import { VSelect, Upload } from '@/components'
  116. import { allocateBillSave } from '@/api/allocateBill'
  117. import { dealerSubareaScopeList } from '@/api/dealer'
  118. import { getLookUpData } from '@/api/data'
  119. import ProductBrand from '@/views/common/productBrand.js'
  120. import productTypeAll from '@/views/common/productTypeAll.js'
  121. import AllocateType from '@/views/common/allocateType.js'
  122. import warehouse from '@/views/common/chooseWarehouse.js'
  123. import department from '@/views/expenseManagement/expenseReimbursement/department.js'
  124. export default {
  125. name: 'TransferOutBasicInfoModal',
  126. mixins: [commonMixin],
  127. components: { VSelect, Upload, ProductBrand, productTypeAll, AllocateType, department, warehouse },
  128. props: {
  129. openModal: {
  130. // 弹框显示状态
  131. type: Boolean,
  132. default: false
  133. },
  134. detailData: Object
  135. },
  136. data () {
  137. this.lastFetchId = 0
  138. this.fetchUser = debounce(this.fetchUser, 800)
  139. return {
  140. isShow: this.openModal, // 是否打开弹框
  141. spinning: false,
  142. formItemLayout: {
  143. labelCol: { span: 8 },
  144. wrapperCol: { span: 16 }
  145. },
  146. productType: [],
  147. attachList: [],
  148. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
  149. form: {
  150. targetType: 'DEALER',
  151. targetSn: undefined,
  152. targetName: '',
  153. costTypeSn: '',
  154. allocateTypeSn: '',
  155. allocateSortSn: '',
  156. warehouseSn: undefined, // 仓库
  157. productBrandSn: undefined, // 产品品牌
  158. productTypeSn1: '', // 产品一级分类
  159. productTypeSn2: '', // 产品二级分类
  160. productTypeSn3: '', // 产品三级分类
  161. time: [],
  162. promoStartDate: '',
  163. promoEndDate: '',
  164. remark: '',
  165. attachmentList: ''
  166. },
  167. rules: {
  168. targetType: [{ required: true, message: '请选择调往对象', trigger: 'change' }],
  169. targetSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }],
  170. costTypeSn: [{ required: true, message: '请选择费用/调拨类型', trigger: 'change' }],
  171. warehouseSn: [{ required: true, message: '请选择调出仓库', trigger: 'change' }],
  172. targetName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }]
  173. },
  174. fetching: false,
  175. dealerData: [], // 经销商 下拉数据
  176. targetTypeList: [], // 调往对象类型
  177. allocateTypeVal: [],
  178. dateFormat: 'YYYY-MM-DD',
  179. isEdit: false
  180. }
  181. },
  182. computed: {
  183. // 当前所选调往对象是否为经销商
  184. isDealer () {
  185. return this.form.targetType == 'DEALER'
  186. },
  187. isDepartment () {
  188. return this.form.targetType == 'DEPARTMENT'
  189. }
  190. },
  191. methods: {
  192. // 日期 change
  193. dateChange (date, dateStrings) {
  194. console.log(date, dateStrings)
  195. this.form.time = dateStrings
  196. this.form.promoStartDate = date.length ? dateStrings[0] : ''
  197. this.form.promoEndDate = date.length ? dateStrings[1] : ''
  198. },
  199. // 附件上传
  200. changeAttach (file) {
  201. this.attachList = JSON.parse(file)
  202. this.attachList.map(item => {
  203. item.fileType = item.extName
  204. })
  205. },
  206. departementChange (v, row) {
  207. console.log(v,row)
  208. this.form.targetName = row.name
  209. },
  210. // 调拨类别 change
  211. allocateTypeChange (val, opt) {
  212. console.log(val, opt, '------------')
  213. this.allocateTypeVal = val || ''
  214. this.form.costTypeSn = val && val[0] ? val[0] : ''
  215. this.form.allocateSortSn = val && val[1] ? val[1] : ''
  216. this.form.allocateTypeSn = val && val[2] ? val[2] : ''
  217. // 名称
  218. this.form.costTypeName = opt && opt[0] ? opt[0].name : ''
  219. this.form.allocateSortName = opt && opt[1] ? opt[1].name : ''
  220. this.form.allocateTypeName = opt && opt[2] ? opt[2].name : ''
  221. },
  222. // 产品分类 change
  223. changeProductType (val, id, opt) {
  224. console.log(val, opt, '------------')
  225. this.form.productTypeSn1 = val && val[0] ? val[0] : ''
  226. this.form.productTypeSn2 = val && val[1] ? val[1] : ''
  227. this.form.productTypeSn3 = val && val[2] ? val[2] : ''
  228. // 名称
  229. this.form.productTypeName1 = opt && opt[0] ? opt[0].productTypeName : ''
  230. this.form.productTypeName2 = opt && opt[1] ? opt[1].productTypeName : ''
  231. this.form.productTypeName3 = opt && opt[2] ? opt[2].productTypeName : ''
  232. },
  233. // 品牌
  234. changeBrand (val, id, opt) {
  235. console.log(val, opt, '------------')
  236. this.form.productBrandName = opt ? opt.brandName : ''
  237. },
  238. fetchUser (dealerName) {
  239. if (dealerName == '') return
  240. this.lastFetchId += 1
  241. const fetchId = this.lastFetchId
  242. this.dealerData = []
  243. this.fetching = true
  244. dealerSubareaScopeList({ nameLike: dealerName.replace(/\s+/g, ''), pageNo: 1, pageSize: 20 }).then(res => {
  245. if (fetchId !== this.lastFetchId) {
  246. return
  247. }
  248. this.dealerData = res.data && res.data.list ? res.data.list : []
  249. this.fetching = false
  250. })
  251. },
  252. // 调往对象名称经销商 change
  253. handleChange (value) {
  254. const ind = this.dealerData.findIndex(item => item.dealerSn == value)
  255. console.log(this.dealerData[ind])
  256. this.form.targetName = this.dealerData[ind].dealerName
  257. this.form.warehouseSn = this.dealerData[ind].defaultWarehouseSn
  258. },
  259. // 保存
  260. handleSave () {
  261. const _this = this
  262. this.$refs.ruleForm.validate(valid => {
  263. if (valid) {
  264. const form = JSON.parse(JSON.stringify(_this.form))
  265. if (!form.productBrandName) {
  266. form.productBrandSn = ''
  267. }
  268. form.attachmentList = this.attachList
  269. _this.spinning = true
  270. allocateBillSave(form).then(res => {
  271. if (res.status == 200) {
  272. _this.$message.success(res.message)
  273. _this.isShow = false
  274. _this.$emit('ok', res.data)
  275. }
  276. _this.spinning = false
  277. })
  278. } else {
  279. _this.spinning = false
  280. return false
  281. }
  282. })
  283. },
  284. // 调往对象 change
  285. targetTypeChange (e) {
  286. this.$refs.ruleForm.resetFields()
  287. this.form.targetSn = undefined
  288. this.form.targetName = ''
  289. this.form.warehouseSn = undefined
  290. this.form.targetType = e.target.value
  291. },
  292. // 调往对象类型
  293. getTargetTypeList () {
  294. const _this = this
  295. getLookUpData({
  296. pageNo: 1,
  297. pageSize: 1000,
  298. lookupCode: 'TARGET_TYPE'
  299. }).then(res => {
  300. if (res.status == 200) {
  301. _this.targetTypeList = res.data.list
  302. } else {
  303. _this.targetTypeList = []
  304. }
  305. })
  306. }
  307. },
  308. watch: {
  309. // 父页面传过来的弹框状态
  310. openModal (newValue, oldValue) {
  311. this.isShow = newValue
  312. },
  313. // 重定义的弹框状态
  314. isShow (newValue, oldValue) {
  315. if (!newValue) {
  316. this.$emit('close')
  317. this.$refs.ruleForm.resetFields()
  318. this.allocateTypeVal = []
  319. this.productType = []
  320. this.attachList = []
  321. this.form.attachmentList = ''
  322. this.$refs.attachList.setFileList('')
  323. this.form = {
  324. targetType: 'DEALER',
  325. targetSn: undefined,
  326. targetName: '',
  327. costTypeSn: '',
  328. allocateTypeSn: '',
  329. allocateSortSn: '',
  330. warehouseSn: undefined,
  331. productBrandSn: undefined, // 产品品牌
  332. productTypeSn1: '', // 产品一级分类
  333. productTypeSn2: '', // 产品二级分类
  334. productTypeSn3: '', // 产品三级分类
  335. time: [],
  336. promoStartDate: '',
  337. promoEndDate: '',
  338. remark: ''
  339. }
  340. } else {
  341. this.getTargetTypeList()
  342. // 编辑
  343. if (this.detailData) {
  344. this.isEdit = true
  345. this.form = Object.assign(this.form, this.detailData)
  346. // 获取附件列表
  347. this.form.attachmentList = ''
  348. this.attachList = this.detailData.attachmentList
  349. this.$nextTick(() => {
  350. this.$refs.attachList.setFileList(this.attachList)
  351. })
  352. this.allocateTypeVal = [this.detailData.costTypeSn, this.detailData.allocateSortSn, this.detailData.allocateTypeSn]
  353. if (this.detailData.productTypeSn1) {
  354. this.productType = [this.detailData.productTypeSn1, this.detailData.productTypeSn2, this.detailData.productTypeSn3]
  355. }
  356. if (this.form.promoStartDate && this.form.promoEndDate) {
  357. this.form.time = [this.form.promoStartDate, this.form.promoEndDate]
  358. }
  359. if (!this.form.productBrandSn) {
  360. this.form.productBrandSn = undefined
  361. }
  362. }
  363. }
  364. }
  365. }
  366. }
  367. </script>
  368. <style lang="less">
  369. .allocateBill-basicInfo-modal {
  370. .ant-modal-body {
  371. padding: 40px 40px 24px;
  372. }
  373. .btn-cont {
  374. text-align: center;
  375. margin: 35px 0 10px;
  376. }
  377. }
  378. </style>