basicInfoModal.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
  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.fetchUser = debounce(this.fetchUser, 800)
  138. return {
  139. isShow: this.openModal, // 是否打开弹框
  140. spinning: false,
  141. formItemLayout: {
  142. labelCol: { span: 8 },
  143. wrapperCol: { span: 16 }
  144. },
  145. productType: [],
  146. attachList: [],
  147. attachAction: process.env.VUE_APP_API_BASE_URL + '/uploadGetFileInfo',
  148. form: {
  149. targetType: 'DEALER',
  150. targetSn: undefined,
  151. targetName: '',
  152. costTypeSn: '',
  153. allocateTypeSn: '',
  154. allocateSortSn: '',
  155. warehouseSn: undefined, // 仓库
  156. productBrandSn: undefined, // 产品品牌
  157. productTypeSn1: '', // 产品一级分类
  158. productTypeSn2: '', // 产品二级分类
  159. productTypeSn3: '', // 产品三级分类
  160. time: [],
  161. promoStartDate: '',
  162. promoEndDate: '',
  163. remark: '',
  164. attachmentList: ''
  165. },
  166. rules: {
  167. targetType: [{ required: true, message: '请选择调往对象', trigger: 'change' }],
  168. targetSn: [{ required: true, message: '请选择调往对象名称', trigger: 'change' }],
  169. costTypeSn: [{ required: true, message: '请选择费用/调拨类型', trigger: 'change' }],
  170. warehouseSn: [{ required: true, message: '请选择调出仓库', trigger: 'change' }],
  171. targetName: [{ required: true, message: '请输入调往对象名称', trigger: 'blur' }]
  172. },
  173. fetching: false,
  174. dealerData: [], // 经销商 下拉数据
  175. targetTypeList: [], // 调往对象类型
  176. allocateTypeVal: [],
  177. dateFormat: 'YYYY-MM-DD',
  178. isEdit: false
  179. }
  180. },
  181. computed: {
  182. // 当前所选调往对象是否为经销商
  183. isDealer () {
  184. return this.form.targetType == 'DEALER'
  185. },
  186. isDepartment () {
  187. return this.form.targetType == 'DEPARTMENT'
  188. }
  189. },
  190. methods: {
  191. // 日期 change
  192. dateChange (date, dateStrings) {
  193. console.log(date, dateStrings)
  194. this.form.time = dateStrings
  195. this.form.promoStartDate = date.length ? dateStrings[0] : ''
  196. this.form.promoEndDate = date.length ? dateStrings[1] : ''
  197. },
  198. // 附件上传
  199. changeAttach (file) {
  200. this.attachList = JSON.parse(file)
  201. this.attachList.map(item => {
  202. item.fileType = item.extName
  203. })
  204. },
  205. departementChange (v, row) {
  206. console.log(v,row)
  207. this.form.targetName = row.name
  208. },
  209. // 调拨类别 change
  210. allocateTypeChange (val, opt) {
  211. console.log(val, opt, '------------')
  212. this.allocateTypeVal = val || ''
  213. this.form.costTypeSn = val && val[0] ? val[0] : ''
  214. this.form.allocateSortSn = val && val[1] ? val[1] : ''
  215. this.form.allocateTypeSn = val && val[2] ? val[2] : ''
  216. // 名称
  217. this.form.costTypeName = opt && opt[0] ? opt[0].name : ''
  218. this.form.allocateSortName = opt && opt[1] ? opt[1].name : ''
  219. this.form.allocateTypeName = opt && opt[2] ? opt[2].name : ''
  220. },
  221. // 产品分类 change
  222. changeProductType (val, id, opt) {
  223. console.log(val, opt, '------------')
  224. this.form.productTypeSn1 = val && val[0] ? val[0] : ''
  225. this.form.productTypeSn2 = val && val[1] ? val[1] : ''
  226. this.form.productTypeSn3 = val && val[2] ? val[2] : ''
  227. // 名称
  228. this.form.productTypeName1 = opt && opt[0] ? opt[0].productTypeName : ''
  229. this.form.productTypeName2 = opt && opt[1] ? opt[1].productTypeName : ''
  230. this.form.productTypeName3 = opt && opt[2] ? opt[2].productTypeName : ''
  231. },
  232. // 品牌
  233. changeBrand (val, id, opt) {
  234. console.log(val, opt, '------------')
  235. this.form.productBrandName = opt ? opt.brandName : ''
  236. },
  237. // 搜索经销商
  238. fetchUser (value) {
  239. console.log('fetching user', value)
  240. this.fetching = true
  241. dealerSubareaScopeList({ nameLike: value, pageNo: 1, pageSize: 20 }).then(res => {
  242. if (res.status == 200) {
  243. this.dealerData = res.data && res.data.list ? res.data.list : []
  244. this.fetching = false
  245. } else {
  246. this.dealerData = []
  247. this.fetching = false
  248. }
  249. })
  250. },
  251. // 调往对象名称经销商 change
  252. handleChange (value) {
  253. const ind = this.dealerData.findIndex(item => item.dealerSn == value)
  254. console.log(this.dealerData[ind])
  255. this.form.targetName = this.dealerData[ind].dealerName
  256. this.form.warehouseSn = this.dealerData[ind].warehouseSn
  257. },
  258. // 保存
  259. handleSave () {
  260. const _this = this
  261. this.$refs.ruleForm.validate(valid => {
  262. if (valid) {
  263. const form = JSON.parse(JSON.stringify(_this.form))
  264. if (!form.productBrandName) {
  265. form.productBrandSn = ''
  266. }
  267. form.attachmentList = this.attachList
  268. _this.spinning = true
  269. allocateBillSave(form).then(res => {
  270. if (res.status == 200) {
  271. _this.$message.success(res.message)
  272. _this.isShow = false
  273. _this.$emit('ok', res.data)
  274. }
  275. _this.spinning = false
  276. })
  277. } else {
  278. _this.spinning = false
  279. return false
  280. }
  281. })
  282. },
  283. // 调往对象 change
  284. targetTypeChange (e) {
  285. this.$refs.ruleForm.resetFields()
  286. this.form.targetSn = undefined
  287. this.form.targetName = ''
  288. this.form.warehouseSn = undefined
  289. this.form.targetType = e.target.value
  290. },
  291. // 调往对象类型
  292. getTargetTypeList () {
  293. const _this = this
  294. getLookUpData({
  295. pageNo: 1,
  296. pageSize: 1000,
  297. lookupCode: 'TARGET_TYPE'
  298. }).then(res => {
  299. if (res.status == 200) {
  300. _this.targetTypeList = res.data.list
  301. } else {
  302. _this.targetTypeList = []
  303. }
  304. })
  305. }
  306. },
  307. watch: {
  308. // 父页面传过来的弹框状态
  309. openModal (newValue, oldValue) {
  310. this.isShow = newValue
  311. },
  312. // 重定义的弹框状态
  313. isShow (newValue, oldValue) {
  314. if (!newValue) {
  315. this.$emit('close')
  316. this.$refs.ruleForm.resetFields()
  317. this.allocateTypeVal = []
  318. this.productType = []
  319. this.attachList = []
  320. this.form.attachmentList = ''
  321. this.$refs.attachList.setFileList('')
  322. this.form = {
  323. targetType: 'DEALER',
  324. targetSn: undefined,
  325. targetName: '',
  326. costTypeSn: '',
  327. allocateTypeSn: '',
  328. allocateSortSn: '',
  329. warehouseSn: undefined,
  330. productBrandSn: undefined, // 产品品牌
  331. productTypeSn1: '', // 产品一级分类
  332. productTypeSn2: '', // 产品二级分类
  333. productTypeSn3: '', // 产品三级分类
  334. time: [],
  335. promoStartDate: '',
  336. promoEndDate: '',
  337. remark: ''
  338. }
  339. } else {
  340. this.getTargetTypeList()
  341. // 编辑
  342. if (this.detailData) {
  343. this.isEdit = true
  344. this.form = Object.assign(this.form, this.detailData)
  345. // 获取附件列表
  346. this.form.attachmentList = ''
  347. this.attachList = this.detailData.attachmentList
  348. this.$nextTick(() => {
  349. this.$refs.attachList.setFileList(this.attachList)
  350. })
  351. this.allocateTypeVal = [this.detailData.costTypeSn, this.detailData.allocateSortSn, this.detailData.allocateTypeSn]
  352. if (this.detailData.productTypeSn1) {
  353. this.productType = [this.detailData.productTypeSn1, this.detailData.productTypeSn2, this.detailData.productTypeSn3]
  354. }
  355. if (this.form.promoStartDate && this.form.promoEndDate) {
  356. this.form.time = [this.form.promoStartDate, this.form.promoEndDate]
  357. }
  358. if (!this.form.productBrandSn) {
  359. this.form.productBrandSn = undefined
  360. }
  361. }
  362. }
  363. }
  364. }
  365. }
  366. </script>
  367. <style lang="less">
  368. .allocateBill-basicInfo-modal {
  369. .ant-modal-body {
  370. padding: 40px 40px 24px;
  371. }
  372. .btn-cont {
  373. text-align: center;
  374. margin: 35px 0 10px;
  375. }
  376. }
  377. </style>