list.vue 25 KB

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