list.vue 28 KB

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