list.vue 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679
  1. <template>
  2. <div>
  3. <a-card size="small" :bordered="false" class="productInfoList-wrap searchBoxNormal">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form layout="inline" id="productInfoList-form" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="最近修改时间">
  10. <rangeDate id="productInfoList-rangeDate" ref="rangeDate" @change="dateChange" />
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="产品编码/原厂编码">
  15. <a-input id="productInfoList-queryWord" v-model.trim="queryParam.queryWord" allowClear placeholder="请输入产品编码/原厂编码"/>
  16. </a-form-item>
  17. </a-col>
  18. <a-col :md="6" :sm="24">
  19. <a-form-item label="产品名称">
  20. <a-input id="productInfoList-name" v-model.trim="queryParam.name" allowClear placeholder="请输入产品名称"/>
  21. </a-form-item>
  22. </a-col>
  23. <template v-if="advanced">
  24. <a-col :md="6" :sm="24">
  25. <a-form-item label="品牌">
  26. <ProductBrand id="productInfoList-productBrandSn" v-model="queryParam.productBrandSn"></ProductBrand>
  27. </a-form-item>
  28. </a-col>
  29. <a-col :md="6" :sm="24">
  30. <a-form-item label="产品分类">
  31. <productTypeAll placeholder="请选择产品分类" @change="changeProductType" v-model="productType" id="productInfoList-productType"></productTypeAll>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :md="6" :sm="24">
  35. <a-form-item label="产品状态">
  36. <v-select code="PRODUCT_STATUS" id="productInfoList-state" v-model="queryParam.state" allowClear placeholder="请选择产品状态"></v-select>
  37. </a-form-item>
  38. </a-col>
  39. <a-col :md="6" :sm="24">
  40. <a-form-item label="定价状态">
  41. <v-select code="PRICING_STATUS" id="productInfoList-pricingState" v-model="queryParam.pricingState" allowClear placeholder="请选择定价状态"></v-select>
  42. </a-form-item>
  43. </a-col>
  44. <a-col :md="6" :sm="24">
  45. <a-form-item label="停产状态">
  46. <a-select v-model="queryParam.haltProdFlag" id="productInfoList-haltProdFlag" placeholder="请选择停产状态" allowClear>
  47. <a-select-option value="0">
  48. 启用
  49. </a-select-option>
  50. <a-select-option value="1">
  51. 停产
  52. </a-select-option>
  53. </a-select>
  54. </a-form-item>
  55. </a-col>
  56. <a-col :md="6" :sm="24">
  57. <a-form-item label="是否有产品图片">
  58. <a-select id="productInfoList-picFlag" v-model="queryParam.picFlag" allowClear placeholder="请选择是否有产品图片">
  59. <a-select-option value="1">
  60. 有图片
  61. </a-select-option>
  62. <a-select-option value="0">
  63. 无图片
  64. </a-select-option>
  65. </a-select>
  66. </a-form-item>
  67. </a-col>
  68. <a-col :md="6" :sm="24">
  69. <a-form-model-item label="出库仓库">
  70. <chooseWarehouse ref="outWarehouse" id="productInfoList-outWarehouse" isPermission v-model="queryParam.outWarehouseSn"></chooseWarehouse>
  71. </a-form-model-item>
  72. </a-col>
  73. <a-col :md="6" :sm="24">
  74. <a-form-model-item label="退货仓库">
  75. <chooseWarehouse ref="returnWarehouse" id="productInfoList-returnWarehouse" isPermission v-model="queryParam.returnWarehouseSn"></chooseWarehouse>
  76. </a-form-model-item>
  77. </a-col>
  78. </template>
  79. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  80. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="productInfoList-refresh">查询</a-button>
  81. <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="productInfoList-reset">重置</a-button>
  82. <a-button
  83. v-if="$hasPermissions('B_productInfo_export')"
  84. style="margin-left: 5px"
  85. type="primary"
  86. class="button-warning"
  87. @click="handleExport"
  88. :disabled="disabled"
  89. :loading="exportLoading"
  90. id="productInfoList-export">导出</a-button>
  91. <a @click="advanced=!advanced" id="productInfoList-isAdvanced" style="margin-left: 5px">
  92. {{ advanced ? '收起' : '展开' }}
  93. <a-icon :type="advanced ? 'up' : 'down'"/>
  94. </a>
  95. </a-col>
  96. </a-row>
  97. </a-form>
  98. </div>
  99. </a-card>
  100. <a-card size="small" :bordered="false">
  101. <a-spin :spinning="spinning" tip="Loading...">
  102. <!-- 操作按钮 -->
  103. <div class="table-operator">
  104. <a-button type="primary" id="productInfoList-add" v-if="$hasPermissions('B_productInfo_add')" @click="handleEdit()">新增</a-button>
  105. <a-button type="primary" id="productInfoList-addProduct" class="button-info" @click="handleMenuClick({key:'1'})" v-if="$hasPermissions('B_productInfo_batchImport')"> 新增产品导入</a-button>
  106. <a-button type="primary" id="productInfoList-unline-import" class="button-info" @click="handleMenuClick({key:'3'})" v-if="$hasPermissions('B_onlineProduct_import')"> 上线产品导入</a-button>
  107. <a-button type="primary" id="productInfoList-import" class="button-info" @click="handleMenuClick({key:'2'})" v-if="$hasPermissions('B_offlineProduct_import')"> 下线产品导入</a-button>
  108. <a-button
  109. id="productInfoList-batchAudit"
  110. type="primary"
  111. v-if="$hasPermissions('B_productInfo_batchAudit')"
  112. ghost
  113. class="button-info"
  114. :loading="loadingAudit"
  115. @click="handleBatchAudit"
  116. style="margin: 0 5px;">批量审核</a-button>
  117. <a-button
  118. id="productInfoList-batchLaunch"
  119. type="primary"
  120. v-if="$hasPermissions('B_productInfo_batchLaunch')"
  121. ghost
  122. :loading="loadingLaunch"
  123. @click="handleBatchLaunch"
  124. style="margin: 0 5px;">批量上线</a-button>
  125. <a-button
  126. id="productInfoList-batchDownline"
  127. type="primary"
  128. v-if="$hasPermissions('B_productInfo_batchDownline')"
  129. ghost
  130. :loading="loadingDownline"
  131. @click="handleBatchDownline"
  132. style="margin: 0 5px;">批量下线</a-button>
  133. <span style="margin-left: 8px" v-if="$hasPermissions('B_productInfo_batchAudit') || $hasPermissions('B_productInfo_batchLaunch') || $hasPermissions('B_productInfo_batchDownline')">
  134. <template v-if="rowSelectionInfo && rowSelectionInfo.selectedRowKeys.length>0">{{ `已选 ${rowSelectionInfo.selectedRowKeys.length} 项` }}</template>
  135. </span>
  136. </div>
  137. <s-table
  138. class="sTable fixPagination"
  139. ref="table"
  140. :style="{ height: tableHeight+70+'px' }"
  141. size="small"
  142. :row-selection=" showSelect?{ columnWidth: 40 }:null"
  143. :rowKey="(record) => record.id"
  144. @rowSelection="rowSelectionFun"
  145. :columns="columns"
  146. :data="loadData"
  147. :scroll="{ y: tableHeight }"
  148. :defaultLoadData="false"
  149. bordered>
  150. <!-- 自定义表头 -->
  151. <template slot="arrowFalgTitle">
  152. <a-tooltip placement="top">
  153. <template slot="title">
  154. <span>自有即箭冠产品,非自有即非箭冠产品</span>
  155. </template>
  156. 自有<a-icon type="question-circle" :style="{ marginLeft: '10px' }" />
  157. </a-tooltip>
  158. </template>
  159. <!-- 判断是否是自有产品 -->
  160. <template slot="arrowFalg" slot-scope="text, record">
  161. <span v-if="record.arrowFalg">{{ record.arrowFalg == 1 ? '是' : '否' }}</span>
  162. <span v-else>--</span>
  163. </template>
  164. <!-- 产品分类 -->
  165. <template slot="productType" slot-scope="text, record">
  166. <span v-if="record.productTypeName2 || record.productTypeName3">{{ record.productTypeName2 }} {{ record.productTypeName3 ? '>' : '' }} {{ record.productTypeName3 }}</span>
  167. <span v-else>--</span>
  168. </template>
  169. <!-- 停产状态 -->
  170. <template slot="stopStatus" slot-scope="text, record">
  171. <a-switch
  172. checkedChildren="启用"
  173. unCheckedChildren="停产"
  174. :id="'productInfoList-isEnable'+record.id"
  175. v-model="record.stopFlag"
  176. @change="changeFlagHandle(record)" />
  177. </template>
  178. <!-- 产品图片 -->
  179. <template slot="imageUrl" slot-scope="text, record">
  180. <div v-if="record.productPicList && record.productPicList.length>0">
  181. <img
  182. :id="'productInfoList-img'+record.id"
  183. :src="record.productPicList[0].imageUrl+'?x-oss-process=image/resize,h_30,m_lfit' || ''"
  184. width="30"
  185. height="30"
  186. class="imageUrl"
  187. @click="inited(record.productPicList)" />
  188. </div>
  189. <span v-else>--</span>
  190. </template>
  191. <!-- 操作 -->
  192. <template slot="action" slot-scope="text, record">
  193. <a-button
  194. size="small"
  195. type="link"
  196. v-if="record.state=='WAIT' && $hasPermissions('B_productInfo_audit')"
  197. class="button-warning"
  198. @click="handleAudit(record)"
  199. :id="'productInfoList-audit-btn'+record.id">审核</a-button>
  200. <a-button
  201. size="small"
  202. type="link"
  203. v-if="(record.state=='WAIT_ONLINE'||record.state=='OFFLINE') && $hasPermissions('B_productInfo_launch')"
  204. class="button-primary"
  205. @click="handleLaunch(record)"
  206. :id="'productInfoList-launch-btn'+record.id">上线</a-button>
  207. <a-button
  208. size="small"
  209. type="link"
  210. v-if="record.state=='ONLINE' && $hasPermissions('B_productInfo_downline')"
  211. class="button-grey"
  212. @click="handleDownline(record)"
  213. :id="'productInfoList-downline-btn'+record.id">下线</a-button>
  214. <a-button
  215. size="small"
  216. type="link"
  217. v-if="$hasPermissions('B_productInfo_edit')"
  218. class="button-info"
  219. @click="handleEdit(record)"
  220. :id="'productInfoList-edit-btn'+record.id">编辑</a-button>
  221. <a-button
  222. size="small"
  223. type="link"
  224. v-if="$hasPermissions('B_productInfo_detail')"
  225. class="button-success"
  226. @click="handleDetail(record)"
  227. :id="'productInfoList-detail-btn'+record.id">详情</a-button>
  228. <a-button
  229. size="small"
  230. type="link"
  231. v-if="record.state=='WAIT' && $hasPermissions('B_productInfo_del')"
  232. class="button-error"
  233. @click="handleDel(record)"
  234. :id="'productInfoList-del-btn'+record.id">删除</a-button>
  235. <span v-if="!(record.state=='WAIT' && $hasPermissions('B_productInfo_audit')) && !((record.state=='WAIT_ONLINE'||record.state=='OFFLINE') && $hasPermissions('B_productInfo_launch')) && !(record.state=='ONLINE' && $hasPermissions('B_productInfo_downline')) && !$hasPermissions('B_productInfo_edit') && !$hasPermissions('B_productInfo_detail') && !(record.state=='WAIT' && $hasPermissions('B_productInfo_del'))">--</span>
  236. </template>
  237. </s-table>
  238. </a-spin>
  239. <!-- 产品详情 -->
  240. <product-info-detail-modal v-drag :openModal="openModal" :itemSn="itemSn" @close="closeModal" />
  241. <!-- 产品下线 -->
  242. <product-info-offline-modal v-drag :openModal="openOfflineModal" :offlineProductList="offlineProductList" @close="closeOfflineModal" @ok="$refs.table.refresh()" />
  243. <!-- 导入产品 -->
  244. <importGuideModal :guideType="guideModalType" :openModal="openGuideModal" @close="openGuideModal=false" @ok="hanldeOk" />
  245. </a-card>
  246. </div>
  247. </template>
  248. <script>
  249. import { commonMixin } from '@/utils/mixin'
  250. import { exportExcel } from '@/libs/JGPrint.js'
  251. // 组件
  252. import { STable, VSelect } from '@/components'
  253. import productInfoDetailModal from './detailModal.vue'
  254. import productInfoOfflineModal from './offlineModal.vue'
  255. import ProductBrand from '@/views/common/productBrand.js'
  256. import productTypeAll from '@/views/common/productTypeAll.js'
  257. import rangeDate from '@/views/common/rangeDate.vue'
  258. import importGuideModal from './importGuideModal.vue'
  259. import chooseWarehouse from '@/views/common/chooseWarehouse'
  260. // 接口
  261. import { productList, productAudit, productBatchAudit, productDel, productOnline, productBatchOnline, productExport, saveBatchImportProduct, saveBatchImportOnlineProduct, importSaveBatch, updateHaltProdFlag } from '@/api/product'
  262. export default {
  263. name: 'ProductInfoList',
  264. mixins: [commonMixin],
  265. components: { STable, VSelect, productInfoDetailModal, productInfoOfflineModal, ProductBrand, productTypeAll, rangeDate, importGuideModal, chooseWarehouse },
  266. data () {
  267. return {
  268. spinning: false,
  269. advanced: true, // 高级搜索 展开/关闭
  270. tableHeight: 0, // 表格高度
  271. disabled: false, // 查询、重置按钮是否可操作
  272. exportLoading: false, // 导出按钮加载状态
  273. // 查询条件
  274. queryParam: {
  275. haltProdFlag: undefined, // 停产状态
  276. updateBeginDate: '', // 最近修改时间 开始日期
  277. updateEndDate: '', // 最近修改时间 结束日期
  278. name: '', // 产品名称
  279. queryWord: '', // 产品编码/原厂编码
  280. productBrandSn: undefined, // 产品品牌
  281. productTypeSn1: '', // 产品一级分类
  282. productTypeSn2: '', // 产品二级分类
  283. productTypeSn3: '', // 产品三级分类
  284. state: undefined, // 产品状态
  285. pricingState: undefined, // 定价状态
  286. picFlag: undefined, // 产品图片
  287. outWarehouseSn: undefined, // 出库仓库
  288. returnWarehouseSn: undefined// 退货仓库
  289. },
  290. productType: [], // 产品类型
  291. openGuideModal: false, // 导入产品 弹窗
  292. columns: [
  293. { title: '序号', dataIndex: 'no', width: '4%', align: 'center' },
  294. { title: '创建时间', dataIndex: 'createDate', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  295. { title: '产品名称', dataIndex: 'name', align: 'left', width: '12%', ellipsis: true, customRender: function (text) { return text || '--' } },
  296. { title: '产品编码', dataIndex: 'code', width: '10%', align: 'left', customRender: function (text) { return text || '--' } },
  297. { title: '原厂编码', dataIndex: 'origCode', width: '10%', align: 'left', customRender: function (text) { return text || '--' } },
  298. { title: '品牌', dataIndex: 'productBrandName', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  299. { title: '产品分类', scopedSlots: { customRender: 'productType' }, width: '12%', align: 'left' },
  300. { slots: { title: 'arrowFalgTitle' }, scopedSlots: { customRender: 'arrowFalg' }, width: '5%', align: 'center' },
  301. { title: '最近修改时间', dataIndex: 'updateDate', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  302. { title: '最新定价时间', dataIndex: 'pricingTime', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  303. { title: '产品状态', dataIndex: 'stateDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  304. { title: '定价状态', dataIndex: 'pricingStateDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
  305. { title: '停产状态', width: '6%', align: 'center', scopedSlots: { customRender: 'stopStatus' } },
  306. { title: '产品图片', scopedSlots: { customRender: 'imageUrl' }, width: '5%', align: 'center' },
  307. { title: '出库仓库', dataIndex: 'outWarehouseName', width: '8%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  308. { title: '退货仓库', dataIndex: 'returnWarehouseName', width: '8%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
  309. { title: '操作', scopedSlots: { customRender: 'action' }, width: '10%', align: 'center' }
  310. ],
  311. loadingAudit: false, // 审核按钮加载状态
  312. loadingLaunch: false, // 上线按钮加载状态
  313. loadingDownline: false, // 下线按钮加载状态
  314. // 加载数据方法 必须为 Promise 对象
  315. loadData: parameter => {
  316. this.disabled = true
  317. this.spinning = true
  318. // 获取列表数据 有分页
  319. return productList(Object.assign(parameter, this.queryParam)).then(res => {
  320. let data
  321. if (res.status == 200) {
  322. data = res.data
  323. // 计算列表序号
  324. const no = (data.pageNo - 1) * data.pageSize
  325. for (var i = 0; i < data.list.length; i++) {
  326. data.list[i].no = no + i + 1
  327. data.list[i].stopFlag = data.list[i].haltProdFlag == 0
  328. }
  329. this.disabled = false
  330. }
  331. this.spinning = false
  332. return data
  333. })
  334. },
  335. openModal: false, // 查看详情 弹框
  336. itemSn: '', // 当前sn
  337. openOfflineModal: false, // 下线 弹框
  338. offlineProductList: [], // 下线 当前所选数据
  339. pageFromInfo: null, // 页面跳转来源 productInfoAdd
  340. rowSelectionInfo: null, // 表格选中数据
  341. guideModalType: ''// 1 新增产品批量导入 2下线产品批量导入
  342. }
  343. },
  344. computed: {
  345. // 是否显示table选择框
  346. showSelect () {
  347. return this.$hasPermissions('B_productInfo_batchAudit') || this.$hasPermissions('B_productInfo_batchLaunch') || this.$hasPermissions('B_productInfo_batchDownline')
  348. }
  349. },
  350. methods: {
  351. // 批量导入
  352. handleMenuClick (e) {
  353. this.guideModalType = e.key
  354. this.openGuideModal = true
  355. },
  356. // 最近修改时间 change
  357. dateChange (date) {
  358. this.queryParam.updateBeginDate = date[0] || ''
  359. this.queryParam.updateEndDate = date[1] || ''
  360. },
  361. // 表格选中项
  362. rowSelectionFun (obj) {
  363. this.rowSelectionInfo = obj || null
  364. },
  365. // 批量导入产品
  366. hanldeOk (obj) {
  367. this.spinning = true
  368. // importSaveBatch 下线导入
  369. const ajaxName = obj && obj.type && obj.type == 'offline' ? importSaveBatch : (obj && obj.type && obj.type == 'online' ? saveBatchImportOnlineProduct : saveBatchImportProduct)
  370. ajaxName(obj).then(res => {
  371. if (res.status == 200) {
  372. this.resetSearchForm()
  373. }
  374. this.spinning = false
  375. })
  376. },
  377. // 审核
  378. handleAudit (row) {
  379. const _this = this
  380. this.$confirm({
  381. title: '提示',
  382. content: '确认要审核吗?',
  383. centered: true,
  384. onOk () {
  385. _this.spinning = true
  386. productAudit({ sn: row.productSn }).then(res => {
  387. if (res.status == 200) {
  388. _this.$message.success(res.message)
  389. _this.$refs.table.refresh()
  390. }
  391. _this.spinning = false
  392. })
  393. }
  394. })
  395. },
  396. // 批量审核
  397. handleBatchAudit () {
  398. const _this = this
  399. if (!_this.rowSelectionInfo || (_this.rowSelectionInfo && _this.rowSelectionInfo.selectedRowKeys.length < 1)) {
  400. _this.$message.warning('请在列表勾选后再进行批量操作!')
  401. return
  402. }
  403. let num = 0
  404. const obj = []
  405. _this.rowSelectionInfo && _this.rowSelectionInfo.selectedRows.map(item => {
  406. if (item.state == 'WAIT') {
  407. num++
  408. obj.push(item.productSn)
  409. }
  410. })
  411. if (num < 1) {
  412. _this.$message.warning('当前数据不可操作!')
  413. return
  414. }
  415. this.$confirm({
  416. title: '提示',
  417. content: '已选有效数据' + num + '条,确认要批量审核吗?',
  418. centered: true,
  419. onOk () {
  420. _this.loadingAudit = true
  421. _this.spinning = true
  422. productBatchAudit(obj).then(res => {
  423. _this.loadingAudit = false
  424. if (res.status == 200) {
  425. _this.$refs.table.clearSelected() // 清空表格选中项
  426. _this.$message.success(res.message)
  427. _this.$refs.table.refresh()
  428. }
  429. _this.spinning = false
  430. })
  431. }
  432. })
  433. },
  434. // 预览图片
  435. inited (viewer) {
  436. if (viewer) {
  437. const imageUrl = []
  438. viewer.map(item => {
  439. imageUrl.push(item.imageUrl)
  440. })
  441. this.$viewerApi({
  442. images: imageUrl
  443. })
  444. }
  445. },
  446. // 改变停产状态
  447. changeFlagHandle (row) {
  448. const _this = this
  449. _this.spinning = true
  450. updateHaltProdFlag({ productSn: row.productSn, haltProdFlag: row.stopFlag ? 0 : 1 }).then(res => {
  451. if (res.status == 200) {
  452. _this.$message.success(res.message)
  453. _this.$refs.table.refresh()
  454. }
  455. _this.spinning = false
  456. })
  457. },
  458. // 批量上线
  459. handleBatchLaunch () {
  460. const _this = this
  461. if (!_this.rowSelectionInfo || (_this.rowSelectionInfo && _this.rowSelectionInfo.selectedRowKeys.length < 1)) {
  462. _this.$message.warning('请在列表勾选后再进行批量操作!')
  463. return
  464. }
  465. let num = 0
  466. const obj = []
  467. _this.rowSelectionInfo && _this.rowSelectionInfo.selectedRows.map(item => {
  468. if (item.state == 'WAIT_ONLINE' || item.state == 'OFFLINE') {
  469. num++
  470. obj.push(item.productSn)
  471. }
  472. })
  473. if (num < 1) {
  474. _this.$message.warning('当前数据不可操作!')
  475. return
  476. }
  477. this.$confirm({
  478. title: '提示',
  479. content: '已选有效数据' + num + '条,确认要批量上线吗?',
  480. centered: true,
  481. onOk () {
  482. _this.loadingLaunch = true
  483. _this.spinning = true
  484. productBatchOnline(obj).then(res => {
  485. _this.loadingLaunch = false
  486. if (res.status == 200) {
  487. _this.$refs.table.clearSelected() // 清空表格选中项
  488. _this.$message.success(res.message)
  489. _this.$refs.table.refresh()
  490. }
  491. _this.spinning = false
  492. })
  493. }
  494. })
  495. },
  496. // 批量下线
  497. handleBatchDownline () {
  498. const _this = this
  499. if (!_this.rowSelectionInfo || (_this.rowSelectionInfo && _this.rowSelectionInfo.selectedRowKeys.length < 1)) {
  500. _this.$message.warning('请在列表勾选后再进行批量操作!')
  501. return
  502. }
  503. let num = 0
  504. _this.offlineProductList = []
  505. _this.rowSelectionInfo && _this.rowSelectionInfo.selectedRows.map(item => {
  506. if (item.state == 'ONLINE') {
  507. num++
  508. _this.offlineProductList.push({ productSn: item.productSn, code: item.code, commonProductList: [] })
  509. }
  510. })
  511. if (num < 1) {
  512. _this.$message.warning('当前数据不可操作!')
  513. return
  514. }
  515. this.openOfflineModal = true
  516. },
  517. // 重置
  518. resetSearchForm () {
  519. this.queryParam.name = ''
  520. this.queryParam.queryWord = ''
  521. this.queryParam.productBrandSn = undefined
  522. this.queryParam.productTypeSn1 = ''
  523. this.queryParam.productTypeSn2 = ''
  524. this.queryParam.productTypeSn3 = ''
  525. this.queryParam.state = undefined
  526. this.queryParam.pricingState = undefined
  527. this.queryParam.picFlag = undefined
  528. this.queryParam.haltProdFlag = undefined
  529. this.queryParam.outWarehouseSn = undefined
  530. this.queryParam.returnWarehouseSn = undefined
  531. this.productType = []
  532. if (this.advanced) {
  533. this.$refs.rangeDate.resetDate()
  534. this.queryParam.updateBeginDate = ''
  535. this.queryParam.updateEndDate = ''
  536. }
  537. this.$refs.table.refresh(true)
  538. },
  539. // 新增/编辑
  540. handleEdit (row) {
  541. if (row) { // 编辑
  542. this.$router.push({ path: `/productManagement/productInfo/edit/${row.id}/${row.productSn}` })
  543. } else { // 新增
  544. this.$router.push({ path: '/productManagement/productInfo/add' })
  545. }
  546. },
  547. // 上线
  548. handleLaunch (row) {
  549. const _this = this
  550. this.$confirm({
  551. title: '提示',
  552. content: '确认要上线吗?',
  553. centered: true,
  554. onOk () {
  555. _this.spinning = true
  556. productOnline({ sn: row.productSn }).then(res => {
  557. if (res.status == 200) {
  558. _this.$message.success(res.message)
  559. _this.$refs.table.refresh()
  560. }
  561. _this.spinning = false
  562. })
  563. }
  564. })
  565. },
  566. // 下线
  567. handleDownline (row) {
  568. this.offlineProductList.push({ productSn: row.productSn, code: row.code, commonProductList: [] })
  569. this.openOfflineModal = true
  570. },
  571. // 删除
  572. handleDel (row) {
  573. const _this = this
  574. this.$confirm({
  575. title: '提示',
  576. content: '确认要删除吗?',
  577. centered: true,
  578. onOk () {
  579. _this.spinning = true
  580. productDel({ sn: row.productSn }).then(res => {
  581. if (res.status == 200) {
  582. _this.$message.success(res.message)
  583. _this.$refs.table.refresh()
  584. }
  585. _this.spinning = false
  586. })
  587. }
  588. })
  589. },
  590. // 详情
  591. handleDetail (row) {
  592. this.itemSn = row.productSn
  593. this.openModal = true
  594. },
  595. // 关闭弹框
  596. closeModal () {
  597. this.itemSn = ''
  598. this.openModal = false
  599. },
  600. // 关闭下线弹框
  601. closeOfflineModal () {
  602. this.$refs.table.clearSelected() // 清空表格选中项
  603. this.offlineProductList = []
  604. this.openOfflineModal = false
  605. },
  606. // 导出
  607. handleExport () {
  608. const _this = this
  609. const params = this.queryParam
  610. this.spinning = true
  611. exportExcel(productExport, params, '产品列表', function () {
  612. _this.spinning = false
  613. })
  614. },
  615. // 产品分类 change
  616. changeProductType (val, opt) {
  617. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  618. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  619. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  620. },
  621. // 初始化
  622. pageInit () {
  623. const _this = this
  624. this.$nextTick(() => { // 页面渲染完成后的回调
  625. _this.setTableH()
  626. })
  627. },
  628. // 计算表格高度
  629. setTableH () {
  630. const tableSearchH = this.$refs.tableSearch.offsetHeight
  631. this.tableHeight = window.innerHeight - tableSearchH - 240
  632. }
  633. },
  634. watch: {
  635. // 监听 展开关闭时表格高度变化
  636. advanced (newValue, oldValue) {
  637. const _this = this
  638. this.$nextTick(() => { // 页面渲染完成后的回调
  639. _this.setTableH()
  640. })
  641. },
  642. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  643. this.setTableH()
  644. }
  645. },
  646. mounted () {
  647. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  648. this.pageInit()
  649. this.resetSearchForm()
  650. }
  651. },
  652. activated () {
  653. const _this = this
  654. // 如果是新页签打开,则重置当前页面
  655. if (this.$store.state.app.isNewTab) {
  656. this.pageInit()
  657. this.resetSearchForm()
  658. }
  659. // 仅刷新列表,不重置页面
  660. if (this.$store.state.app.updateList) {
  661. this.pageInit()
  662. setTimeout(() => { // 解决 编辑页 返回列表 请求先前页的数据。新增页 返回列表 请求第一页的数据。延迟是为了解决先执行activated 后执行beforeRouteEnter的问题
  663. if (_this.pageFromInfo && _this.pageFromInfo.name == 'productInfoAdd') {
  664. _this.resetSearchForm()
  665. } else {
  666. _this.$refs.table.refresh()
  667. }
  668. }, 100)
  669. }
  670. },
  671. beforeRouteEnter (to, from, next) {
  672. next(vm => {
  673. vm.pageFromInfo = from
  674. })
  675. }
  676. }
  677. </script>