|  |  | 
 |  |  |  | 
 |  |  | <template> | 
 |  |  |   <TableLayout :permissions="['business:goods:query']"> | 
 |  |  |   <TableLayout :permissions="['business:basegoods:query']"> | 
 |  |  |     <!-- 搜索表单 --> | 
 |  |  |     <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> | 
 |  |  |       <el-form-item label="商品名称" prop="name"> | 
 |  |  | 
 |  |  |     </el-form> | 
 |  |  |     <!-- 表格和分页 --> | 
 |  |  |     <template v-slot:table-wrap> | 
 |  |  |       <ul class="toolbar" v-permissions="['business:goods:create', 'business:goods:delete']"> | 
 |  |  |         <li><el-button type="primary" @click="$refs.operaGoodsWindow.open('新建商品')" icon="el-icon-plus" | 
 |  |  |             v-permissions="['business:goods:create']">新建</el-button></li> | 
 |  |  |       <ul class="toolbar" v-permissions="['business:basegoods:create', 'business:basegoods:delete']"> | 
 |  |  |         <li v-permissions="['business:basegoods:create']"> | 
 |  |  |           <el-button type="primary" @click="$refs.operaGoodsWindow.open('新建商品')" icon="el-icon-plus">新建</el-button> | 
 |  |  |         </li> | 
 |  |  |         <!-- <el-button type="primary" :loading="isWorking.export" | 
 |  |  |           @click="$refs.selectProduct.open('选择平台商品')">选择平台商品</el-button> --> | 
 |  |  |         <el-button type="primary" :loading="isWorking.export" v-permissions="['business:goods:exportExcel']" | 
 |  |  |           @click="importFile">导入</el-button> | 
 |  |  |         <el-button type="primary" :loading="isWorking.export" @click="downloadFile">下载模板</el-button> | 
 |  |  |  | 
 |  |  |         <li v-permissions="['business:basegoods:exportExcel']"> | 
 |  |  |           <ImportButton text="导入" template-name="goods_import_modle.xlsx" | 
 |  |  |             template-path="/template/goods_import_modle.xlsx" action="/business/baseGoods/importExcel" | 
 |  |  |             @success="search" /> | 
 |  |  |         </li> | 
 |  |  |         <el-button type="primary" :loading="isWorking.export" @click="bulkOperation(0)">批量上架</el-button> | 
 |  |  |         <el-button type="primary" :loading="isWorking.export" @click="bulkOperation(1)">批量下架</el-button> | 
 |  |  |         <!-- <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:goods:delete']">删除</el-button></li> --> | 
 |  |  | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <div style="display: flex; align-items: center;"> | 
 |  |  |               <div style="width: 70px; height: 70px; flex-shrink: 0;"> | 
 |  |  |                 <el-image v-if="row.imgurl" style="width: 70px; height: 70px" :src="row.prefixUrl + row.imgurl" | 
 |  |  |                   :preview-src-list="[row.prefixUrl + row.imgurl]" fit="cover"></el-image> | 
 |  |  |                 <el-image v-if="row.imgurl" style="width: 70px; height: 70px" :src="row.fullImgUrl" | 
 |  |  |                   :preview-src-list="[row.fullImgUrl]" fit="cover"></el-image> | 
 |  |  |               </div> | 
 |  |  |               {{ row.name }} | 
 |  |  |               <span style="margin-left: 15px">{{ row.name }}</span> | 
 |  |  |             </div> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column prop="brandName" label="品牌" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="categoryName" label="类别" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="baseZdPrice" label="指导价(元)" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="basePrice" label="采购价(元)" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="price" label="入手价(元)" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="zdPrice" label="指导价(元)" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="price" label="采购价(元)" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="createDate" label="创建时间" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="status" label="状态" min-width="100px"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  | 
 |  |  |             </el-switch> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column v-if="containPermissions(['business:goods:update', 'business:goods:delete'])" label="操作" | 
 |  |  |         <el-table-column v-if="containPermissions(['business:basegoods:update', 'business:basegoods:delete'])" label="操作" | 
 |  |  |           min-width="120" fixed="right"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <el-button type="text" @click="edit(row.id)" icon="el-icon-edit" | 
 |  |  |               v-permissions="['business:goods:update']">编辑</el-button> | 
 |  |  |               v-permissions="['business:basegoods:update']">编辑</el-button> | 
 |  |  |             <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" | 
 |  |  |               v-permissions="['business:goods:delete']">删除</el-button> | 
 |  |  |               v-permissions="['business:basegoods:delete']">删除</el-button> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |       </el-table> | 
 |  |  |       <input type="file" ref="upload" style="display: none;" @change="uplaodFile" /> | 
 |  |  |       <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> | 
 |  |  |       </pagination> | 
 |  |  |     </template> | 
 |  |  | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import OperaGoodsWindow from '@/components/business/OperaGoodsWindow' | 
 |  |  | import selectProduct from '@/components/business/selectProduct' | 
 |  |  | import { brand, category, importExcel } from '@/api/system/common.js' | 
 |  |  | import { updateDisableById, queryById, exportDoc, batchUpdateDisableById } from '@/api/business/goods.js' | 
 |  |  | import ImportButton from '@/components/common/ImportButton' | 
 |  |  | import { brand, baseCategory, importExcel } from '@/api/system/common.js' | 
 |  |  | import { updateStatus, queryById, exportDoc } from '@/api/business/goods.js' | 
 |  |  | export default { | 
 |  |  |   name: 'Goods', | 
 |  |  |   extends: BaseTable, | 
 |  |  |   components: { TableLayout, Pagination, OperaGoodsWindow, selectProduct }, | 
 |  |  |   components: { TableLayout, Pagination, OperaGoodsWindow, selectProduct, ImportButton }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       // 搜索 | 
 |  |  | 
 |  |  |         brandId: '' | 
 |  |  |       }, | 
 |  |  |       ids: '', | 
 |  |  |       idList: [], | 
 |  |  |       categoryList: [], | 
 |  |  |       brandList: [], | 
 |  |  |       statusList: [ | 
 |  |  |         { name: '启用', id: 0 }, | 
 |  |  |         { name: '禁用', id: 1 } | 
 |  |  |       ] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   provide() { | 
 |  |  |     return { | 
 |  |  |       brandList: () => this.brandList, | 
 |  |  |       categoryList: () => this.categoryList | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  | 
 |  |  |     handleSelectionChange(e) { | 
 |  |  |       let arr = e.map(item => item.id) | 
 |  |  |       this.ids = arr.join(',') | 
 |  |  |       console.log(this.ids) | 
 |  |  |       this.idList = arr; | 
 |  |  |     }, | 
 |  |  |     // 批量上下架 | 
 |  |  |     bulkOperation(type) { | 
 |  |  | 
 |  |  |         this.$message.warning({ message: '至少选择一项内容' }) | 
 |  |  |         return | 
 |  |  |       } | 
 |  |  |       batchUpdateDisableById({ | 
 |  |  |         ids: this.ids, | 
 |  |  |       updateStatus({ | 
 |  |  |         idList: this.idList, | 
 |  |  |         status: type | 
 |  |  |       }).then(res => { | 
 |  |  |         this.$message.success({ message: res }) | 
 |  |  |         this.$tip.apiSuccess('操作成功'); | 
 |  |  |         // this.$message.success({ message:res.message }) | 
 |  |  |         this.search() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  | 
 |  |  |     rowStyle() { | 
 |  |  |       return "text-align:center"; | 
 |  |  |     }, | 
 |  |  |     importFile() { | 
 |  |  |       this.$refs.upload.click() | 
 |  |  |     }, | 
 |  |  |     uplaodFile(e) { | 
 |  |  |       const FORMDATE = new FormData() | 
 |  |  |       FORMDATE.append('file', e.target.files[0]) | 
 |  |  |       // 请求接口 | 
 |  |  |       importExcel(FORMDATE) | 
 |  |  |         .then(res => { | 
 |  |  |           console.log(res) | 
 |  |  |           this.search() | 
 |  |  |         }) | 
 |  |  |         .catch((err) => { | 
 |  |  |           this.$message.error(err.message) | 
 |  |  |         }) | 
 |  |  |       this.$refs.upload.value = null | 
 |  |  |     }, | 
 |  |  |     edit(id) { | 
 |  |  |       queryById(id) | 
 |  |  |         .then(res => { | 
 |  |  |           let obj = { | 
 |  |  |             id: res.id, | 
 |  |  |             name: res.name, | 
 |  |  |             categoryId: res.categoryId, | 
 |  |  |             brandId: res.brandId, | 
 |  |  |             zdPrice: res.zdPrice, | 
 |  |  |             price: res.price, | 
 |  |  |             attrFirstIds: res.attrFirstIds ? this.turnNum(res.attrFirstIds.split(',')) : [], | 
 |  |  |             attrFirstNames: res.attrFirstNames, | 
 |  |  |             attrSecodIds: res.attrSecodIds ? this.turnNum(res.attrSecodIds.split(',')) : [], | 
 |  |  |             attrSecodNames: res.attrSecodNames, | 
 |  |  |             imgurl: res.imgurl, | 
 |  |  |             multifileList: [], | 
 |  |  |             files: [], | 
 |  |  |             ztList: res.imgurl ? [{ url: res.prefixUrl + res.imgurl }] : [], | 
 |  |  |             pzList: [], | 
 |  |  |             attrFirstList: [], | 
 |  |  |             attrSecodList: [] | 
 |  |  |           } | 
 |  |  |           if (res.multifileList.length > 0) { | 
 |  |  |             res.multifileList.forEach(item => { | 
 |  |  |               obj.multifileList.push({ fileurl: item.fileurl, name: item.name, url: res.prefixUrl + item.fileurl }) | 
 |  |  |               obj.files.push({ fileurl: item.fileurl, name: item.name, url: res.prefixUrl + item.fileurl }) | 
 |  |  |             }) | 
 |  |  |           } | 
 |  |  |           this.$refs.operaGoodsWindow.open('编辑商品', obj) | 
 |  |  |           this.$refs.operaGoodsWindow.open('编辑商品', res) | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     changeStatus(item) { | 
 |  |  |       updateDisableById({ | 
 |  |  |         id: item.id, | 
 |  |  |       updateStatus({ | 
 |  |  |         idList: [item.id], | 
 |  |  |         status: item.status | 
 |  |  |       }).then(res => { | 
 |  |  |         this.$tip.apiSuccess('更新成功') | 
 |  |  | 
 |  |  |         // this.search() | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     turnNum(nums) { | 
 |  |  |       for (let i = 0; i < nums.length; i++) { | 
 |  |  |         nums[i] = parseInt(nums[i]) | 
 |  |  |       } | 
 |  |  |       return nums; | 
 |  |  |     }, | 
 |  |  |     getbrand() { | 
 |  |  |       brand({}) | 
 |  |  |       brand({ type: 1 }) | 
 |  |  |         .then(res => { | 
 |  |  |           this.brandList = res | 
 |  |  |         }) | 
 |  |  |     }, | 
 |  |  |     getcategory() { | 
 |  |  |       category({}) | 
 |  |  |       baseCategory({}) | 
 |  |  |         .then(res => { | 
 |  |  |           this.categoryList = res | 
 |  |  |         }) |