chooseProductsModal.vue 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseProducts-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="选择产品"
  8. v-model="isShow"
  9. @cancle="isShow=false"
  10. :width="900">
  11. <div class="products-con">
  12. <div>
  13. <!-- 搜索条件 -->
  14. <div class="table-page-search-wrapper">
  15. <a-form-model
  16. ref="ruleForm"
  17. class="form-model-con"
  18. layout="inline"
  19. :model="queryParam"
  20. :rules="rules"
  21. @keyup.enter.native="getProductList(1)"
  22. :label-col="formItemLayout.labelCol"
  23. :wrapper-col="formItemLayout.wrapperCol">
  24. <a-row :gutter="15">
  25. <a-col :md="6" :sm="24">
  26. <a-form-model-item label="产品编码" prop="code">
  27. <a-input id="chooseProducts-code" v-model.trim="queryParam.code" allowClear placeholder="请输入产品编码"/>
  28. </a-form-model-item>
  29. </a-col>
  30. <a-col :md="6" :sm="24">
  31. <a-form-model-item label="产品品牌" :prop="type=='dealership'?'productBrandSn':''">
  32. <a-select
  33. placeholder="请选择产品品牌"
  34. id="chooseProducts-productBrandSn"
  35. allowClear
  36. v-model="queryParam.productBrandSn"
  37. :showSearch="true"
  38. option-filter-prop="children"
  39. :filter-option="filterOption">
  40. <a-select-option v-for="item in productBrandList" :key="item.brandSn" :value="item.brandSn">{{ item.brandName }}</a-select-option>
  41. </a-select>
  42. </a-form-model-item>
  43. </a-col>
  44. <a-col :md="6" :sm="24">
  45. <a-form-model-item label="产品分类" :prop="type=='dealership'?'productType':''">
  46. <a-cascader
  47. @change="changeProductType"
  48. change-on-select
  49. v-model="queryParam.productType"
  50. expand-trigger="hover"
  51. :options="productTypeList"
  52. :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
  53. id="chooseProducts-productType"
  54. placeholder="请选择产品分类"
  55. allowClear />
  56. </a-form-model-item>
  57. </a-col>
  58. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  59. <a-button type="primary" @click="handleSearch" :disabled="disabled" id="chooseProducts-refresh">查询</a-button>
  60. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="chooseProducts-reset">重置</a-button>
  61. </a-col>
  62. </a-row>
  63. </a-form-model></a-form>
  64. </div>
  65. <p style="font-weight: bold;">当前已选:{{ selectedRowKeys.length }}个</p>
  66. <!-- 列表 -->
  67. <a-table
  68. class="sTable"
  69. ref="table"
  70. size="small"
  71. :rowKey="(record) => record.productSn"
  72. :row-selection="{
  73. selectedRowKeys: selectedRowKeys,
  74. onChange: onChange,
  75. onSelect: onSelectChange,
  76. onSelectAll: onSelectAllChange,
  77. getCheckboxProps:record =>({props: {
  78. disabled: (this.type == 'supplier') && (this.selectedRowKeys.indexOf(record.productSn) > -1)
  79. }})
  80. }"
  81. :data-source="loadData"
  82. :columns="columns"
  83. :pagination="false"
  84. :loading="loading"
  85. :scroll="{ y: 450 }"
  86. bordered>
  87. </a-table>
  88. <!-- 分页 -->
  89. <tablePagination
  90. ref="tablePagination"
  91. :total="paginationProps.total"
  92. :current="paginationProps.current"
  93. :pageSize="paginationProps.pageSize"
  94. @changePageSize="changePageSize"
  95. @changePage="changePage" />
  96. </div>
  97. <!-- 按钮 -->
  98. <div class="btn-con">
  99. <a-button
  100. type="primary"
  101. id="chooseProducts-save"
  102. size="large"
  103. class="button-primary"
  104. @click="handleSave"
  105. style="padding: 0 60px;">保存</a-button>
  106. <a-button
  107. id="chooseProducts-cancel"
  108. size="large"
  109. class="button-cancel"
  110. @click="isShow=false"
  111. style="padding: 0 60px;margin-left: 15px;">取消</a-button>
  112. </div>
  113. </div>
  114. </a-modal>
  115. </template>
  116. <script>
  117. import { STable } from '@/components'
  118. import tablePagination from '@/views/common/tablePagination.vue'
  119. import { productBrandQuery } from '@/api/productBrand'
  120. import { productTypeQuery, productTypeQueryAll } from '@/api/productType'
  121. import { dealerScopeValidProduct } from '@/api/dealerScope'
  122. import { productPricedList, productPricingList } from '@/api/product'
  123. export default {
  124. name: 'ChooseProductsModal',
  125. components: { STable, tablePagination },
  126. props: {
  127. openModal: { // 弹框显示状态
  128. type: Boolean,
  129. default: false
  130. },
  131. chooseData: {
  132. type: Array,
  133. default: () => {
  134. return []
  135. }
  136. },
  137. type: { // 类型,经销权设置dealership, 供应商添加产品supplier
  138. type: String,
  139. default: ''
  140. },
  141. dealerSn: {
  142. type: String || Number,
  143. default: ''
  144. }
  145. },
  146. data () {
  147. return {
  148. isShow: this.openModal, // 是否打开弹框
  149. formItemLayout: {
  150. labelCol: { span: 4 },
  151. wrapperCol: { span: 20 }
  152. },
  153. queryParam: { // 查询条件
  154. code: '', // 产品编码
  155. productBrandSn: undefined, // 产品品牌
  156. productType: [],
  157. productTypeSn1: '', // 产品一级分类
  158. productTypeSn2: '', // 产品二级分类
  159. productTypeSn3: '' // 产品三级分类
  160. },
  161. rules: {
  162. productBrandSn: [ { required: true, message: '请选择产品品牌', trigger: 'change' } ],
  163. productType: [ { required: true, message: '请选择产品分类', trigger: 'change' } ]
  164. },
  165. disabled: false, // 查询、重置按钮是否可操作
  166. loading: false, // 表格加载中
  167. columns: [
  168. { title: '序号', dataIndex: 'no', width: 80, align: 'center' },
  169. { title: '产品编码', dataIndex: 'code', align: 'center' },
  170. { title: '产品名称', dataIndex: 'name', align: 'center', ellipsis: true, customRender: function (text) { return text || '--' } }
  171. ],
  172. loadData: [],
  173. paginationProps: {
  174. total: 0, // 分页总条数
  175. current: 1,
  176. pageSize: 20
  177. },
  178. productBrandList: [], // 品牌下拉数据
  179. productTypeList: [], // 分类下拉数据
  180. selectedRowKeys: [],
  181. selectedRows: []
  182. }
  183. },
  184. methods: {
  185. // 查询
  186. handleSearch () {
  187. const _this = this
  188. _this.$refs.ruleForm.validate(valid => {
  189. if (valid) {
  190. if (_this.type == 'dealership') { // 设置经销权时选择产品
  191. // 校验产品是否被包含在品牌分类中
  192. const params = []
  193. if (_this.queryParam.productBrandSn) {
  194. params.push({
  195. dealerSn: _this.dealerSn,
  196. goodsType: 'BRAND',
  197. goodsSn: _this.queryParam.productBrandSn
  198. })
  199. }
  200. if (_this.queryParam.productTypeSn1) {
  201. params.push({
  202. dealerSn: _this.dealerSn,
  203. goodsType: 'CATEGORY',
  204. goodsSn: _this.queryParam.productTypeSn1
  205. })
  206. }
  207. if (_this.queryParam.productTypeSn2) {
  208. params.push({
  209. dealerSn: _this.dealerSn,
  210. goodsType: 'CATEGORY',
  211. goodsSn: _this.queryParam.productTypeSn2
  212. })
  213. }
  214. if (_this.queryParam.productTypeSn3) {
  215. params.push({
  216. dealerSn: _this.dealerSn,
  217. goodsType: 'CATEGORY',
  218. goodsSn: _this.queryParam.productTypeSn3
  219. })
  220. }
  221. dealerScopeValidProduct(params).then(res => {
  222. if (res.status == 200) {
  223. _this.getProductList(1)
  224. }
  225. })
  226. } else {
  227. _this.getProductList(1)
  228. }
  229. } else {
  230. return false
  231. }
  232. })
  233. },
  234. // 重置数据
  235. resetData () {
  236. this.queryParam.code = ''
  237. this.queryParam.productBrandSn = undefined
  238. this.queryParam.productTypeSn1 = ''
  239. this.queryParam.productTypeSn2 = ''
  240. this.queryParam.productTypeSn3 = ''
  241. this.queryParam.productType = []
  242. this.paginationProps.total = 0
  243. this.paginationProps.current = 1
  244. this.paginationProps.pageSize = 20
  245. },
  246. // 重置
  247. resetSearchForm () {
  248. this.resetData()
  249. this.loadData = []
  250. this.disabled = false
  251. },
  252. // 保存
  253. handleSave () {
  254. const _this = this
  255. if (this.selectedRowKeys.length < 1) {
  256. this.$message.warning('请在列表勾选后再进行操作!')
  257. return
  258. }
  259. if (this.type == 'supplier') { // 供应商增加产品
  260. const arr = []
  261. this.selectedRowKeys.map(item => {
  262. if (_this.chooseData.indexOf(item) == -1) {
  263. arr.push(item)
  264. }
  265. })
  266. this.$emit('ok', arr)
  267. } else {
  268. this.$emit('ok', this.selectedRows)
  269. }
  270. this.isShow = false
  271. },
  272. onChange (selectedRowKeys, selectedRows) {
  273. this.selectedRowKeys = selectedRowKeys
  274. },
  275. onSelectChange (record, selected, selectedRows, nativeEvent) {
  276. const _this = this
  277. if (this.type != 'supplier') { // 供应商增加产品
  278. if (selected) { // 选择
  279. this.selectedRows.push(record)
  280. } else { // 取消
  281. const arrId = []
  282. this.selectedRows.map((item, index) => {
  283. if (item.productSn == record.productSn) {
  284. arrId.push(index)
  285. }
  286. })
  287. arrId.map((item, index) => {
  288. _this.selectedRows = _this.selectedRows.slice(item, item + 1)
  289. })
  290. }
  291. }
  292. },
  293. // 本页全选/取消全选
  294. onSelectAllChange (selected, selectedRows, changeRows) {
  295. const _this = this
  296. if (this.type != 'supplier') { // 供应商增加产品
  297. if (selected) { // 选择
  298. this.selectedRows = [...this.selectedRows, ...changeRows]
  299. } else { // 取消
  300. const arrId = []
  301. this.selectedRows.map((item, index) => {
  302. this.selectedRows.map((subItem, ind) => {
  303. if (item.productSn == subItem.productSn) {
  304. arrId.push(index)
  305. }
  306. })
  307. })
  308. arrId.map((item, index) => {
  309. _this.selectedRows = _this.selectedRows.slice(item, item + 1)
  310. })
  311. }
  312. }
  313. },
  314. // 产品列表
  315. getProductList (pageNo) {
  316. this.paginationProps.current = pageNo || this.paginationProps.current
  317. this.disabled = true
  318. const params = {
  319. pageNo: this.paginationProps.current,
  320. pageSize: this.paginationProps.pageSize
  321. }
  322. this.loading = true
  323. let url = productPricedList // 获取定过价的产品
  324. if (this.type == 'supplier') { // 供应商增加产品
  325. url = productPricingList // 获取定价产品
  326. }
  327. if (this.type != 'supplier' && this.type != 'dealership') { // 促销
  328. params.onlineFalg = 1
  329. }
  330. url(Object.assign(params, this.queryParam)).then(res => {
  331. this.loading = false
  332. if (res.status == 200) {
  333. const data = res.data
  334. this.paginationProps.total = Number(res.data.count) || 0
  335. this.paginationProps.current = data.pageNo
  336. const no = (data.pageNo - 1) * data.pageSize
  337. for (var i = 0; i < data.list.length; i++) {
  338. data.list[i].no = no + i + 1
  339. }
  340. this.loadData = data.list
  341. this.disabled = false
  342. } else {
  343. this.paginationProps.total = 0
  344. this.paginationProps.current = 1
  345. this.paginationProps.pageSize = 20
  346. this.loadData = []
  347. }
  348. })
  349. },
  350. // 已选产品 分页 一页多少条change
  351. changePageSize (current, pageSize) {
  352. this.paginationProps.current = current
  353. this.paginationProps.pageSize = pageSize
  354. this.getProductList()
  355. },
  356. // 已选产品 分页 页码change
  357. changePage (current) {
  358. this.paginationProps.current = current
  359. this.getProductList()
  360. },
  361. // 产品分类 change
  362. changeProductType (val, opt) {
  363. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  364. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  365. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  366. },
  367. filterOption (input, option) {
  368. return (
  369. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  370. )
  371. },
  372. // 产品品牌 列表
  373. getProductBrand () {
  374. productBrandQuery({}).then(res => {
  375. if (res.status == 200) {
  376. this.productBrandList = res.data
  377. } else {
  378. this.productBrandList = []
  379. }
  380. })
  381. },
  382. // 产品分类 列表
  383. getProductType () {
  384. if (this.type != 'supplier' && this.type != 'dealership') { // 促销
  385. productTypeQueryAll({}).then(res => {
  386. if (res.status == 200) {
  387. this.productTypeList = res.data
  388. } else {
  389. this.productTypeList = []
  390. }
  391. })
  392. } else {
  393. productTypeQuery({}).then(res => {
  394. if (res.status == 200) {
  395. this.productTypeList = res.data
  396. } else {
  397. this.productTypeList = []
  398. }
  399. })
  400. }
  401. }
  402. },
  403. watch: {
  404. // 父页面传过来的弹框状态
  405. openModal (newValue, oldValue) {
  406. this.isShow = newValue
  407. },
  408. // 重定义的弹框状态
  409. isShow (newValue, oldValue) {
  410. if (!newValue) {
  411. this.$emit('close')
  412. this.loadData = []
  413. this.disabled = false
  414. this.resetData()
  415. } else {
  416. if (this.type == 'supplier') { // 供应商增加产品
  417. this.selectedRows = []
  418. this.selectedRowKeys = this.chooseData
  419. } else {
  420. this.selectedRows = this.chooseData
  421. this.selectedRowKeys = []
  422. this.chooseData.map(item => {
  423. this.selectedRowKeys.push(item.goodsSn)
  424. })
  425. }
  426. if (this.productBrandList.length == 0) {
  427. this.getProductBrand()
  428. }
  429. if (this.productTypeList.length == 0) {
  430. this.getProductType()
  431. }
  432. }
  433. }
  434. }
  435. }
  436. </script>
  437. <style lang="less" scoped>
  438. .chooseProducts-modal{
  439. .products-con{
  440. .btn-con{
  441. text-align: center;
  442. margin: 30px 0 20px;
  443. .button-cancel{
  444. font-size: 12px;
  445. }
  446. }
  447. }
  448. }
  449. </style>