queryPart.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422
  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. <!-- 列表 -->
  94. <s-table
  95. class="sTable"
  96. ref="table"
  97. size="small"
  98. :rowKey="(record) => record.productSn+record.currentQty"
  99. :columns="columns"
  100. :data="loadData"
  101. :customRow="handleClickRow"
  102. :defaultLoadData="false"
  103. :scroll="{ x: 1290, y: 300 }"
  104. bordered>
  105. <!-- 售价 -->
  106. <template slot="salePrice" slot-scope="text, record">
  107. <div @dblclick.stop>
  108. <a-input-number
  109. size="small"
  110. v-model="record.salePrice"
  111. :precision="2"
  112. :min="0"
  113. :max="999999"
  114. placeholder="请输入" />
  115. </div>
  116. </template>
  117. <!-- 销售数量 -->
  118. <template slot="nums" slot-scope="text, record">
  119. <div @dblclick.stop>
  120. <a-input-number
  121. size="small"
  122. v-model="record.salesNums"
  123. :precision="0"
  124. :min="0"
  125. :max="999999"
  126. placeholder="请输入" />
  127. </div>
  128. </template>
  129. <!-- 操作 -->
  130. <template slot="action" slot-scope="text, record">
  131. <a-button
  132. size="small"
  133. type="primary"
  134. class="button-info"
  135. @click="handleAdd(record)"
  136. id="productInfoList-edit-btn">添加</a-button>
  137. <a-button
  138. size="small"
  139. type="primary"
  140. class="button-success"
  141. @click="handleDetail(record)"
  142. id="productInfoList-detail-btn"
  143. style="margin-left: 5px;">销售记录</a-button>
  144. </template>
  145. </s-table>
  146. <!-- 销售记录 -->
  147. <product-salesRecord-modal ref="salseRecord" :openModal="openModal" @close="closeModal" />
  148. </div>
  149. </template>
  150. <script>
  151. import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
  152. import { dealerProductTypeList } from '@/api/dealerProductType'
  153. import { querySumByProductLocation } from '@/api/stock'
  154. import { warehouseAllList } from '@/api/warehouse'
  155. import productSalesRecordModal from './productSalesRecordModal.vue'
  156. import { STable, VSelect, Upload } from '@/components'
  157. import { supperCodeByVin, vinCodeParse } from '@/api/sales'
  158. export default {
  159. name: 'QueryPart',
  160. components: { STable, VSelect, Upload, productSalesRecordModal },
  161. props: {
  162. buyerSn: {
  163. type: [Number, String],
  164. default: ''
  165. },
  166. priceType: {
  167. type: [Number, String],
  168. default: ''
  169. },
  170. newLoading: Boolean
  171. },
  172. data () {
  173. return {
  174. advanced: false, // 高级搜索 展开/关闭
  175. vinLoading: false,
  176. productType: [],
  177. queryParam: { // 查询条件
  178. customerSn: '',
  179. salePriceType: '',
  180. productCode: '', // 产品编码
  181. productName: '', // 产品名称
  182. productOrigCode: '', // 原厂编码
  183. vinCode: '',
  184. productCodeList: undefined, // 车架号
  185. brandSn: undefined, // 产品品牌
  186. productTypeSn1: '', // 产品一级分类
  187. productTypeSn2: '', // 产品二级分类
  188. productTypeSn3: '', // 产品三级分类
  189. warehouseSn: undefined // 仓库
  190. },
  191. rules: {
  192. vinCode: [ { len: 17, message: '请输入正确的车架号(VIN)', trigger: 'change' } ]
  193. },
  194. disabled: false, // 查询、重置按钮是否可操作
  195. productBrandList: [], // 下拉数据
  196. productTypeList: [], // 产品分类 下拉数据
  197. warehouseList: [], // 仓库列表
  198. // 加载数据方法 必须为 Promise 对象
  199. loadData: parameter => {
  200. this.disabled = true
  201. this.queryParam.salePriceType = this.priceType
  202. this.queryParam.customerSn = this.buyerSn
  203. // 排序
  204. if (parameter.sortField == 'productCode') {
  205. parameter.sortField = 'code'
  206. parameter.sortAlias = 'product '
  207. }
  208. if (parameter.sortField == 'brandName') {
  209. parameter.sortField = 'firstChar'
  210. parameter.sortAlias = 'brand'
  211. }
  212. if (parameter.sortField == 'warehouseName') {
  213. parameter.sortField = 'warehouseSn'
  214. parameter.sortAlias = 'sd'
  215. }
  216. return querySumByProductLocation(Object.assign(parameter, this.queryParam)).then(res => {
  217. let data
  218. if (res.status == 200) {
  219. data = res.data
  220. data.list = data.list.filter(item => item != null)
  221. const no = (data.pageNo - 1) * data.pageSize
  222. for (var i = 0; i < data.list.length; i++) {
  223. data.list[i].no = no + i + 1
  224. data.list[i].salesNums = 1
  225. data.list[i].currentQty = data.list[i].currentQty || 0
  226. }
  227. } else {
  228. data = {
  229. list: [],
  230. pageNo: 1,
  231. pageSize: 20
  232. }
  233. }
  234. this.disabled = false
  235. return data
  236. })
  237. },
  238. openModal: false, // 查看客户详情 弹框
  239. cost: false,
  240. cityPrice: false
  241. }
  242. },
  243. computed: {
  244. columns () {
  245. const arr = [
  246. { title: '产品编码', dataIndex: 'productCode', align: 'center', sorter: true, customRender: function (text) { return text || '--' } },
  247. { title: '产品名称', dataIndex: 'productName', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  248. { title: '原厂编码', dataIndex: 'productOrigCode', align: 'center', customRender: function (text) { return text || '--' } },
  249. { title: '品牌', dataIndex: 'brandName', width: 100, align: 'center', sorter: true, customRender: function (text) { return text || '--' } },
  250. { title: '库存数量', dataIndex: 'currentQty', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } },
  251. { title: '单位', dataIndex: 'unit', width: 60, align: 'center', customRender: function (text) { return text || '--' } },
  252. { title: '售价', dataIndex: 'salePrice', scopedSlots: { customRender: 'salePrice' }, width: 100, align: 'center' },
  253. { title: '销售数量', dataIndex: 'salesNums', scopedSlots: { customRender: 'nums' }, width: 100, align: 'center' },
  254. { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, width: 150, align: 'center', fixed: 'right' }
  255. ]
  256. if (this.cost) {
  257. arr.splice(6, 0, { title: '成本价', dataIndex: 'putCost', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
  258. }
  259. if (this.cityPrice) {
  260. arr.splice(this.cost ? 7 : 6, 0, { title: '市级价', dataIndex: 'dealerProduct.cityPrice', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } })
  261. }
  262. return arr
  263. }
  264. },
  265. created () {
  266. // 产品品牌
  267. if (this.productBrandList.length == 0) {
  268. this.getProductBrand()
  269. }
  270. // 产品分类
  271. if (this.productTypeList.length == 0) {
  272. this.getProductType()
  273. }
  274. // 仓库
  275. if (this.warehouseList.length == 0) {
  276. this.getWarehouse()
  277. }
  278. },
  279. methods: {
  280. // vin change
  281. vinCodeChange (e) {
  282. if (e.target.value.length == 17) {
  283. supperCodeByVin({ vin: e.target.value }).then(res => {
  284. if (res.status == 200) {
  285. this.queryParam.productCodeList = res.data
  286. } else {
  287. this.queryParam.productCodeList = undefined
  288. }
  289. })
  290. } else {
  291. this.queryParam.productCodeList = undefined
  292. }
  293. },
  294. // 双击列表
  295. handleClickRow (record) {
  296. const _this = this
  297. return {
  298. on: {
  299. dblclick: (event) => {
  300. event.stopPropagation()
  301. _this.$emit('add', record)
  302. }
  303. }
  304. }
  305. },
  306. // 重置
  307. resetSearchForm () {
  308. this.queryParam.productCode = ''
  309. this.queryParam.productName = ''
  310. this.queryParam.productOrigCode = ''
  311. this.queryParam.brandSn = undefined
  312. this.queryParam.productTypeSn1 = ''
  313. this.queryParam.productTypeSn2 = ''
  314. this.queryParam.productTypeSn3 = ''
  315. this.queryParam.warehouseSn = undefined
  316. this.queryParam.productCodeList = undefined
  317. this.queryParam.vinCode = ''
  318. this.productType = []
  319. this.$refs.table.refresh(true)
  320. this.$refs.ruleForm.resetFields()
  321. },
  322. // 刷新当前页面
  323. resetCurForm () {
  324. this.$refs.table.refresh()
  325. },
  326. filterOption (input, option) {
  327. return (
  328. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  329. )
  330. },
  331. // 选择配件
  332. handleAdd (row) {
  333. this.$emit('add', row)
  334. },
  335. // 销售记录
  336. handleDetail (row) {
  337. this.openModal = true
  338. this.$refs.salseRecord.getDetail(this.buyerSn, row.productSn)
  339. },
  340. // 关闭弹框
  341. closeModal () {
  342. this.openModal = false
  343. },
  344. uploadFun () {
  345. document.getElementById('filed').click()
  346. },
  347. filePreview (e) {
  348. const _this = this
  349. var files = e.target.files[0]
  350. const formData = new FormData()
  351. formData.append('savePathType', 'local')
  352. formData.append('file', files)
  353. this.vinLoading = true
  354. vinCodeParse(formData).then(res => {
  355. if (res.type == 'application/json') {
  356. var reader = new FileReader()
  357. reader.addEventListener('loadend', function () {
  358. const obj = JSON.parse(reader.result)
  359. if (obj.status == 200) {
  360. _this.queryParam.vinCode = obj.data || ''
  361. // 移除表单项的校验结果
  362. _this.$refs.ruleForm.clearValidate('vinCode')
  363. } else {
  364. _this.$notification.error({
  365. message: '提示',
  366. description: obj.message
  367. })
  368. }
  369. _this.vinLoading = false
  370. document.getElementById('filed').value = ''
  371. })
  372. reader.readAsText(res)
  373. } else {
  374. _this.vinLoading = false
  375. }
  376. })
  377. },
  378. // 仓库
  379. getWarehouse () {
  380. warehouseAllList({}).then(res => {
  381. if (res.status == 200) {
  382. this.warehouseList = res.data
  383. } else {
  384. this.warehouseList = []
  385. }
  386. })
  387. },
  388. // 产品品牌 列表
  389. getProductBrand () {
  390. dealerProductBrandQuery({}).then(res => {
  391. if (res.status == 200) {
  392. this.productBrandList = res.data
  393. } else {
  394. this.productBrandList = []
  395. }
  396. })
  397. },
  398. // 产品分类 列表
  399. getProductType () {
  400. dealerProductTypeList({}).then(res => {
  401. if (res.status == 200) {
  402. this.productTypeList = res.data
  403. } else {
  404. this.productTypeList = []
  405. }
  406. })
  407. },
  408. // 产品分类 change
  409. changeProductType (val, opt) {
  410. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  411. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  412. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  413. }
  414. },
  415. watch: {
  416. cost (newValue, oldValue) {
  417. this.$emit('isCost', newValue)
  418. }
  419. }
  420. }
  421. </script>