chooseProductsModal.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  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. this.selectedRows.map((item, index) => {
  282. if (item.productSn == record.productSn) {
  283. _this.selectedRows.splice(index, 1)
  284. }
  285. })
  286. }
  287. }
  288. },
  289. // 本页全选/取消全选
  290. onSelectAllChange (selected, selectedRows, changeRows) {
  291. const _this = this
  292. if (this.type != 'supplier') { // 供应商增加产品
  293. if (selected) { // 选择
  294. this.selectedRows = [...this.selectedRows, ...changeRows]
  295. } else { // 取消
  296. this.selectedRows.map((item, index) => {
  297. this.selectedRows.map((subItem, ind) => {
  298. if (item.productSn == subItem.productSn) {
  299. _this.selectedRows.splice(index, 1)
  300. }
  301. })
  302. })
  303. }
  304. }
  305. },
  306. // 产品列表
  307. getProductList (pageNo) {
  308. this.paginationProps.current = pageNo || this.paginationProps.current
  309. this.disabled = true
  310. const params = {
  311. pageNo: this.paginationProps.current,
  312. pageSize: this.paginationProps.pageSize
  313. }
  314. this.loading = true
  315. let url = productPricedList // 获取定过价的产品
  316. if (this.type == 'supplier') { // 供应商增加产品
  317. url = productPricingList // 获取定价产品
  318. }
  319. if (this.type != 'supplier' && this.type != 'dealership') { // 促销
  320. params.onlineFalg = 1
  321. }
  322. url(Object.assign(params, this.queryParam)).then(res => {
  323. this.loading = false
  324. if (res.status == 200) {
  325. const data = res.data
  326. this.paginationProps.total = Number(res.data.count) || 0
  327. this.paginationProps.current = data.pageNo
  328. const no = (data.pageNo - 1) * data.pageSize
  329. for (var i = 0; i < data.list.length; i++) {
  330. data.list[i].no = no + i + 1
  331. }
  332. this.loadData = data.list
  333. this.disabled = false
  334. } else {
  335. this.paginationProps.total = 0
  336. this.paginationProps.current = 1
  337. this.paginationProps.pageSize = 20
  338. this.loadData = []
  339. }
  340. })
  341. },
  342. // 已选产品 分页 一页多少条change
  343. changePageSize (current, pageSize) {
  344. this.paginationProps.current = current
  345. this.paginationProps.pageSize = pageSize
  346. this.getProductList()
  347. },
  348. // 已选产品 分页 页码change
  349. changePage (current) {
  350. this.paginationProps.current = current
  351. this.getProductList()
  352. },
  353. // 产品分类 change
  354. changeProductType (val, opt) {
  355. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  356. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  357. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  358. },
  359. filterOption (input, option) {
  360. return (
  361. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  362. )
  363. },
  364. // 产品品牌 列表
  365. getProductBrand () {
  366. productBrandQuery({}).then(res => {
  367. if (res.status == 200) {
  368. this.productBrandList = res.data
  369. } else {
  370. this.productBrandList = []
  371. }
  372. })
  373. },
  374. // 产品分类 列表
  375. getProductType () {
  376. if (this.type != 'supplier' && this.type != 'dealership') { // 促销
  377. productTypeQueryAll({}).then(res => {
  378. if (res.status == 200) {
  379. this.productTypeList = res.data
  380. } else {
  381. this.productTypeList = []
  382. }
  383. })
  384. } else {
  385. productTypeQuery({}).then(res => {
  386. if (res.status == 200) {
  387. this.productTypeList = res.data
  388. } else {
  389. this.productTypeList = []
  390. }
  391. })
  392. }
  393. }
  394. },
  395. watch: {
  396. // 父页面传过来的弹框状态
  397. openModal (newValue, oldValue) {
  398. this.isShow = newValue
  399. },
  400. // 重定义的弹框状态
  401. isShow (newValue, oldValue) {
  402. if (!newValue) {
  403. this.$emit('close')
  404. this.loadData = []
  405. this.disabled = false
  406. this.resetData()
  407. } else {
  408. if (this.type == 'supplier') { // 供应商增加产品
  409. this.selectedRows = []
  410. this.selectedRowKeys = this.chooseData
  411. } else {
  412. this.selectedRows = this.chooseData
  413. this.selectedRowKeys = []
  414. this.chooseData.map(item => {
  415. this.selectedRowKeys.push(item.goodsSn)
  416. })
  417. }
  418. if (this.productBrandList.length == 0) {
  419. this.getProductBrand()
  420. }
  421. if (this.productTypeList.length == 0) {
  422. this.getProductType()
  423. }
  424. }
  425. }
  426. }
  427. }
  428. </script>
  429. <style lang="less" scoped>
  430. .chooseProducts-modal{
  431. .products-con{
  432. .btn-con{
  433. text-align: center;
  434. margin: 30px 0 20px;
  435. .button-cancel{
  436. font-size: 12px;
  437. }
  438. }
  439. }
  440. }
  441. </style>