basicInfoModal.vue 14 KB

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