queryPart.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
  1. <template>
  2. <div class="productInfoList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form-model
  6. ref="ruleForm"
  7. class="form-model-con"
  8. layout="inline"
  9. :rules="rules"
  10. :model="queryParam"
  11. @keyup.enter.native="$refs.table.refresh(true)" >
  12. <a-row :gutter="5">
  13. <a-col :md="6" :sm="24">
  14. <a-form-model-item label="车架号(VIN)" prop="vinCode">
  15. <a-input id="productInfoList-vinCode" v-model.trim="queryParam.vinCode" allowClear placeholder="请输入车架号(VIN)">
  16. <a-icon @click="uploadFun" :type="vinLoading?'loading':'camera'" slot="addonAfter" :style="{ fontSize: '18px', verticalAlign: 'bottom' }" />
  17. </a-input>
  18. <input type="file" id="filed" hidden="" @change="filePreview">
  19. </a-form-model-item>
  20. </a-col>
  21. <a-col :md="5" :sm="24">
  22. <a-form-model-item label="产品编码">
  23. <a-input id="productInfoList-code" v-model.trim="queryParam.productCode" allowClear placeholder="请输入产品编码"/>
  24. </a-form-model-item>
  25. </a-col>
  26. <a-col :md="5" :sm="24">
  27. <a-form-model-item label="产品名称">
  28. <a-input id="productInfoList-name" v-model.trim="queryParam.productName" allowClear placeholder="请输入产品名称"/>
  29. </a-form-model-item>
  30. </a-col>
  31. <template v-if="advanced">
  32. <a-col :md="8" :sm="24">
  33. <a-form-model-item label="原厂编码">
  34. <a-input id="productInfoList-origCode" v-model.trim="queryParam.productOrigCode" allowClear placeholder="请输入原厂编码"/>
  35. </a-form-model-item>
  36. </a-col>
  37. <a-col :md="6" :sm="24">
  38. <a-form-model-item label="产品分类">
  39. <a-cascader
  40. @change="changeProductType"
  41. change-on-select
  42. v-model="productType"
  43. expand-trigger="hover"
  44. :options="productTypeList"
  45. :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
  46. id="productInfoList-productType"
  47. placeholder="请选择产品分类"
  48. allowClear />
  49. </a-form-model-item>
  50. </a-col>
  51. <a-col :md="5" :sm="24">
  52. <a-form-model-item label="产品品牌">
  53. <a-select
  54. placeholder="请选择产品品牌"
  55. id="productInfoList-productBrandSn"
  56. allowClear
  57. v-model="queryParam.brandSn"
  58. :showSearch="true"
  59. option-filter-prop="children"
  60. :filter-option="filterOption">
  61. <a-select-option v-for="item in productBrandList" :key="item.brandSn" :value="item.brandSn">{{ item.brandName }}</a-select-option>
  62. </a-select>
  63. </a-form-model-item>
  64. </a-col>
  65. <a-col :md="5" :sm="24">
  66. <a-form-model-item label="仓库">
  67. <a-select
  68. placeholder="请选择仓库"
  69. id="productInfoList-warehouseSn"
  70. allowClear
  71. v-model="queryParam.warehouseSn"
  72. :showSearch="true"
  73. option-filter-prop="children"
  74. :filter-option="filterOption">
  75. <a-select-option v-for="item in warehouseList" :key="item.warehouseSn" :value="item.warehouseSn">{{ item.name }}</a-select-option>
  76. </a-select>
  77. </a-form-model-item>
  78. </a-col>
  79. </template>
  80. <a-col :md="8" :sm="24" style="margin-bottom: 10px;">
  81. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="productInfoList-refresh">查询</a-button>
  82. <a-button style="margin-left: 5px" @click="resetSearchForm" id="productInfoList-reset">重置</a-button>
  83. <a @click="advanced=!advanced" style="margin:0 5px">
  84. {{ advanced ? '收起' : '展开' }}
  85. <a-icon :type="advanced ? 'up' : 'down'"/>
  86. </a>
  87. <a-checkbox v-model="cost" id="salesQuery-cost">成本价</a-checkbox>
  88. <a-checkbox v-model="cityPrice" id="salesQuery-cityPrice">市级价</a-checkbox>
  89. </a-col>
  90. </a-row>
  91. </a-form-model>
  92. </div>
  93. <a-alert type="error" style="margin-bottom: 10px;" v-if="vinInfoData&&!vinInfoData.vinInfo">
  94. <template slot="message"><a-icon type="exclamation-circle" theme="filled" :style="{ color: '#E70012', fontSize: '15px', verticalAlign: 'sub', marginRight: '3px' }" />抱歉!暂未找到匹配VIN码的车型!</template>
  95. </a-alert>
  96. <a-alert type="warning" style="margin-bottom: 10px;cursor: pointer;" v-if="vinInfoData&&vinInfoData.vinInfo" @click="openCarInfoModal=true">
  97. <template slot="message">
  98. <div style="display: flex;justify-content: space-between;align-items: center;" @click="openCarInfoModal=true">
  99. <div>
  100. <img :src="vinInfoData.vinInfo && vinInfoData.vinInfo.icon?(vinInfoData.vinInfo.icon+'?x-oss-process=image/resize,h_30,m_lfit'):defImg" width="30" height="30" class="imageUrl" style="border-radius: 50%;vertical-align: middle;margin-right: 3px;" />
  101. <span style="vertical-align: middle;">{{ vinInfoData.vinInfo.text }}</span>
  102. </div>
  103. <div style="color: #f90;">
  104. <span>查看更多</span> >
  105. </div>
  106. </div>
  107. </template>
  108. </a-alert>
  109. <!-- 列表 -->
  110. <s-table
  111. class="sTable"
  112. ref="table"
  113. size="small"
  114. :rowKey="(record) => record.productSn+record.currentQty+record.warehouseSn+record.warehouseLocationSn"
  115. :columns="columns"
  116. :data="loadData"
  117. :customRow="handleClickRow"
  118. :defaultLoadData="false"
  119. :scroll="{ y: 300 }"
  120. bordered>
  121. <!-- 售价 -->
  122. <template slot="salePrice" slot-scope="text, record">
  123. <div @dblclick.stop>
  124. <a-input-number
  125. size="small"
  126. v-model="record.salePrice"
  127. :precision="2"
  128. :min="0"
  129. :max="999999"
  130. style="width: 100%;"
  131. placeholder="请输入" />
  132. </div>
  133. </template>
  134. <!-- 销售数量 -->
  135. <template slot="nums" slot-scope="text, record">
  136. <div @dblclick.stop>
  137. <a-input-number
  138. size="small"
  139. v-model="record.salesNums"
  140. :precision="0"
  141. :min="0"
  142. :max="999999"
  143. style="width: 100%;"
  144. placeholder="请输入" />
  145. </div>
  146. </template>
  147. <!-- 操作 -->
  148. <template slot="action" slot-scope="text, record">
  149. <a-button
  150. size="small"
  151. type="primary"
  152. class="button-info"
  153. @click="handleAdd(record)"
  154. id="productInfoList-edit-btn">添加</a-button>
  155. <a-button
  156. size="small"
  157. type="primary"
  158. class="button-success"
  159. @click="handleDetail(record)"
  160. id="productInfoList-detail-btn"
  161. style="margin-left: 5px;">销售记录</a-button>
  162. </template>
  163. </s-table>
  164. <!-- 销售记录 -->
  165. <product-salesRecord-modal ref="salseRecord" :openModal="openModal" @close="closeModal" />
  166. <!-- 查看车辆信息 -->
  167. <car-info-modal ref="carInfoModal" :openModal="openCarInfoModal" :infoData="vinInfoData&&vinInfoData.vinInfo" @close="openCarInfoModal=false" />
  168. </div>
  169. </template>
  170. <script>
  171. import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
  172. import { dealerProductTypeList } from '@/api/dealerProductType'
  173. import { querySumByProductLocation } from '@/api/stock'
  174. import { warehouseAllList } from '@/api/warehouse'
  175. import productSalesRecordModal from './productSalesRecordModal.vue'
  176. import carInfoModal from './carInfoModal.vue'
  177. import { STable, VSelect, Upload } from '@/components'
  178. import { supperCodeByVin, vinCodeParse } from '@/api/sales'
  179. import defImg from '@/assets/def_img@2x.png'
  180. export default {
  181. name: 'QueryPart',
  182. components: { STable, VSelect, Upload, productSalesRecordModal, carInfoModal },
  183. props: {
  184. // buyerSn: {
  185. // type: [Number, String],
  186. // default: ''
  187. // },
  188. // priceType: {
  189. // type: [Number, String],
  190. // default: ''
  191. // },
  192. newLoading: Boolean
  193. },
  194. data () {
  195. return {
  196. advanced: false, // 高级搜索 展开/关闭
  197. vinLoading: false,
  198. productType: [],
  199. defImg,
  200. queryParam: { // 查询条件
  201. customerSn: '',
  202. salePriceType: '',
  203. productCode: '', // 产品编码
  204. productName: '', // 产品名称
  205. productOrigCode: '', // 原厂编码
  206. vinCode: '',
  207. productCodeList: undefined, // 车架号
  208. brandSn: undefined, // 产品品牌
  209. productTypeSn1: '', // 产品一级分类
  210. productTypeSn2: '', // 产品二级分类
  211. productTypeSn3: '', // 产品三级分类
  212. warehouseSn: undefined // 仓库
  213. },
  214. priceType: '',
  215. buyerSn: '',
  216. rules: {
  217. vinCode: [ { len: 17, message: '请输入正确的车架号(VIN)', trigger: 'change' } ]
  218. },
  219. disabled: false, // 查询、重置按钮是否可操作
  220. productBrandList: [], // 下拉数据
  221. productTypeList: [], // 产品分类 下拉数据
  222. warehouseList: [], // 仓库列表
  223. vinInfoData: null,
  224. // 加载数据方法 必须为 Promise 对象
  225. loadData: parameter => {
  226. const _this = this
  227. _this.queryParam.salePriceType = _this.priceType
  228. _this.queryParam.customerSn = _this.buyerSn
  229. // 排序
  230. if (parameter.sortField == 'productCode') {
  231. parameter.sortField = 'code'
  232. parameter.sortAlias = 'product '
  233. }
  234. if (parameter.sortField == 'brandName') {
  235. parameter.sortField = 'firstChar'
  236. parameter.sortAlias = 'brand'
  237. }
  238. if (parameter.sortField == 'warehouseName') {
  239. parameter.sortField = 'warehouseSn'
  240. parameter.sortAlias = 'sd'
  241. }
  242. const params = Object.assign(parameter, _this.queryParam)
  243. if (_this.queryParam.vinCode && _this.queryParam.vinCode.length == 17) { // 输入vin,查出vin码信息后请求列表数据
  244. _this.disabled = true
  245. return supperCodeByVin({ vin: _this.queryParam.vinCode }).then(res => {
  246. if (res.status == 200) {
  247. _this.vinInfoData = res.data
  248. params.productCodeList = res.data.partCodeList || []
  249. return _this.getList(params)
  250. } else {
  251. _this.vinInfoData = null
  252. _this.$refs.table.localLoading = false
  253. _this.$refs.table.clearTable()
  254. }
  255. })
  256. } else if (_this.queryParam.vinCode && _this.queryParam.vinCode.length < 17) { // 输入vin,但vin码不符合标准,不查vin码信息,不请求列表数据
  257. _this.$refs.table.localLoading = false
  258. _this.$refs.table.clearTable()
  259. } else { // 未输入vin码信息,只查列表数据
  260. _this.disabled = true
  261. return _this.getList(params)
  262. }
  263. },
  264. openModal: false, // 查看客户详情 弹框
  265. cost: false,
  266. cityPrice: false,
  267. openCarInfoModal: false
  268. }
  269. },
  270. computed: {
  271. columns () {
  272. const arr = [
  273. { title: '产品编码', dataIndex: 'productCode', width: '14%', align: 'center', sorter: true, customRender: function (text) { return text || '--' } },
  274. { title: '产品名称', dataIndex: 'productName', width: '14%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  275. { title: '原厂编码', dataIndex: 'productOrigCode', width: '10%', align: 'center', customRender: function (text) { return text || '--' } },
  276. { title: '品牌', dataIndex: 'brandName', width: '10%', align: 'center', sorter: true, customRender: function (text) { return text || '--' } },
  277. { title: '库存数量', dataIndex: 'currentQty', width: '7%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  278. { title: '单位', dataIndex: 'unit', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
  279. { title: '售价', dataIndex: 'salePrice', scopedSlots: { customRender: 'salePrice' }, width: '9%', align: 'center' },
  280. { title: '销售数量', dataIndex: 'salesNums', scopedSlots: { customRender: 'nums' }, width: '9%', align: 'center' },
  281. { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, width: '13%', align: 'center' }
  282. ]
  283. if (this.cost) {
  284. arr.splice(6, 0, { title: '成本价', dataIndex: 'putCost', width: '5%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
  285. }
  286. if (this.cityPrice) {
  287. arr.splice(this.cost ? 7 : 6, 0, { title: '市级价', dataIndex: 'dealerProduct.cityPrice', width: '5%', align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
  288. }
  289. return arr
  290. }
  291. },
  292. created () {
  293. // 产品品牌
  294. if (this.productBrandList.length == 0) {
  295. this.getProductBrand()
  296. }
  297. // 产品分类
  298. if (this.productTypeList.length == 0) {
  299. this.getProductType()
  300. }
  301. // 仓库
  302. if (this.warehouseList.length == 0) {
  303. this.getWarehouse()
  304. }
  305. },
  306. methods: {
  307. getList (params) {
  308. const _this = this
  309. return querySumByProductLocation(params).then(res => {
  310. let data
  311. if (res.status == 200) {
  312. data = res.data
  313. data.list = data.list.filter(item => item != null)
  314. const no = (data.pageNo - 1) * data.pageSize
  315. for (var i = 0; i < data.list.length; i++) {
  316. data.list[i].no = no + i + 1
  317. data.list[i].salesNums = 1
  318. data.list[i].currentQty = data.list[i].currentQty || 0
  319. }
  320. if (!params.vinCode) {
  321. _this.vinInfoData = null
  322. }
  323. } else {
  324. data = {
  325. list: [],
  326. pageNo: 1,
  327. pageSize: 20
  328. }
  329. }
  330. _this.disabled = false
  331. return data
  332. })
  333. },
  334. // vin change
  335. vinCodeChange (e) {
  336. if (e.target.value.length == 17) {
  337. supperCodeByVin({ vin: e.target.value }).then(res => {
  338. if (res.status == 200) {
  339. this.queryParam.productCodeList = res.data
  340. } else {
  341. this.queryParam.productCodeList = undefined
  342. }
  343. })
  344. } else {
  345. this.queryParam.productCodeList = undefined
  346. }
  347. },
  348. // 双击列表
  349. handleClickRow (record) {
  350. const _this = this
  351. return {
  352. on: {
  353. dblclick: (event) => {
  354. event.stopPropagation()
  355. _this.$emit('add', record)
  356. }
  357. }
  358. }
  359. },
  360. // 重置
  361. resetSearchForm () {
  362. this.queryParam.productCode = ''
  363. this.queryParam.productName = ''
  364. this.queryParam.productOrigCode = ''
  365. this.queryParam.brandSn = undefined
  366. this.queryParam.productTypeSn1 = ''
  367. this.queryParam.productTypeSn2 = ''
  368. this.queryParam.productTypeSn3 = ''
  369. this.queryParam.warehouseSn = undefined
  370. this.queryParam.productCodeList = undefined
  371. this.queryParam.vinCode = ''
  372. this.productType = []
  373. this.$refs.ruleForm.resetFields()
  374. this.$refs.table.refresh(true)
  375. this.vinInfoData = null
  376. },
  377. pageInit (buyerSn, priceType) {
  378. this.priceType = priceType
  379. this.buyerSn = buyerSn
  380. this.resetSearchForm()
  381. },
  382. // 刷新当前页面
  383. resetCurForm () {
  384. this.$refs.table.refresh()
  385. },
  386. filterOption (input, option) {
  387. return (
  388. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  389. )
  390. },
  391. // 选择配件
  392. handleAdd (row) {
  393. this.$emit('add', row)
  394. },
  395. // 销售记录
  396. handleDetail (row) {
  397. this.openModal = true
  398. this.$refs.salseRecord.getDetail(this.buyerSn, row.productSn)
  399. },
  400. // 关闭弹框
  401. closeModal () {
  402. this.openModal = false
  403. },
  404. uploadFun () {
  405. document.getElementById('filed').click()
  406. },
  407. filePreview (e) {
  408. const _this = this
  409. var files = e.target.files[0]
  410. const formData = new FormData()
  411. formData.append('savePathType', 'local')
  412. formData.append('file', files)
  413. this.vinLoading = true
  414. vinCodeParse(formData).then(res => {
  415. if (res.type == 'application/json') {
  416. var reader = new FileReader()
  417. reader.addEventListener('loadend', function () {
  418. const obj = JSON.parse(reader.result)
  419. if (obj.status == 200) {
  420. _this.queryParam.vinCode = obj.data || ''
  421. // 移除表单项的校验结果
  422. _this.$refs.ruleForm.clearValidate('vinCode')
  423. } else {
  424. _this.$notification.error({
  425. message: '提示',
  426. description: obj.message
  427. })
  428. }
  429. _this.vinLoading = false
  430. document.getElementById('filed').value = ''
  431. })
  432. reader.readAsText(res)
  433. } else {
  434. _this.vinLoading = false
  435. }
  436. })
  437. },
  438. // 仓库
  439. getWarehouse () {
  440. warehouseAllList({}).then(res => {
  441. if (res.status == 200) {
  442. this.warehouseList = res.data
  443. } else {
  444. this.warehouseList = []
  445. }
  446. })
  447. },
  448. // 产品品牌 列表
  449. getProductBrand () {
  450. dealerProductBrandQuery({}).then(res => {
  451. if (res.status == 200) {
  452. this.productBrandList = res.data
  453. } else {
  454. this.productBrandList = []
  455. }
  456. })
  457. },
  458. // 产品分类 列表
  459. getProductType () {
  460. dealerProductTypeList({}).then(res => {
  461. if (res.status == 200) {
  462. this.productTypeList = res.data
  463. } else {
  464. this.productTypeList = []
  465. }
  466. })
  467. },
  468. // 产品分类 change
  469. changeProductType (val, opt) {
  470. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  471. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  472. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  473. }
  474. },
  475. watch: {
  476. cost (newValue, oldValue) {
  477. this.$emit('isCost', newValue)
  478. }
  479. }
  480. }
  481. </script>