|  |  | 
 |  |  |       </el-form-item> | 
 |  |  |       <section> | 
 |  |  |         <el-button type="primary" @click="search">搜索</el-button> | 
 |  |  | <!-- | 
 |  |  |         <el-button type="primary" :loading="isWorking.export" v-permissions="['business:basedata:exportExcel']" @click="exportExcel">导出</el-button> | 
 |  |  | --> | 
 |  |  |         <el-button @click="reset">重置</el-button> | 
 |  |  |       </section> | 
 |  |  |     </el-form> | 
 |  |  |     <!-- 表格和分页 --> | 
 |  |  |     <template v-slot:table-wrap> | 
 |  |  |       <ul class="toolbar" v-permissions="['business:basedata:create', 'business:basedata:delete']"> | 
 |  |  | <!-- | 
 |  |  |         <li><el-button type="primary" @click="$refs.operaBaseDataWindow.open('新建商品源数据信息表')" icon="el-icon-plus" v-permissions="['business:basedata:create']">新建</el-button></li> | 
 |  |  | --> | 
 |  |  |         <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" v-permissions="['business:basedata:delete']">批量删除</el-button></li> | 
 |  |  |         <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete" | 
 |  |  |             v-permissions="['business:basedata:delete']">批量删除</el-button></li> | 
 |  |  |       </ul> | 
 |  |  |       <el-table | 
 |  |  |         v-loading="isWorking.search" | 
 |  |  |         :data="tableData.list" | 
 |  |  |         stripe | 
 |  |  |         @selection-change="handleSelectionChange" | 
 |  |  |       > | 
 |  |  |       <el-table v-loading="isWorking.search" :data="tableData.list" border stripe @selection-change="handleSelectionChange"> | 
 |  |  |         <el-table-column type="selection" width="55"></el-table-column> | 
 |  |  |         <el-table-column prop="id" label="主键" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="createDate" label="创建时间" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="name" label="商品主图" min-width="80px"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |            <a :href="`${row.url}`" target="_blank"> | 
 |  |  |              <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.imgurl" | 
 |  |  |                            :preview-src-list="[row.imgurl]" fit="cover"></el-image> | 
 |  |  |                </div> | 
 |  |  |              </div> </a> | 
 |  |  |               <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.imgurl" | 
 |  |  |                     :preview-src-list="[row.imgurl]" fit="cover"></el-image> | 
 |  |  |                 </div> | 
 |  |  |               </div> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column prop="name" label="商品名称" min-width="150px"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |            <a :href="`${row.url}`" target="_blank">{{row.name}}</a> | 
 |  |  |             <a :href="`${row.url}`" target="_blank">{{ row.name }}</a> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  | <!--        <el-table-column prop="title" label="标题" min-width="100px"></el-table-column>--> | 
 |  |  |         <!--        <el-table-column prop="title" label="标题" min-width="100px"></el-table-column>--> | 
 |  |  |         <el-table-column prop="sku" label="京东sku" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="brand" label="品牌" min-width="120px"></el-table-column> | 
 |  |  |         <el-table-column prop="category" label="类别" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="price" label="价格(元)" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="saleprice" label="采购价格(元)" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="haveStock" label="库存情况" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="bgImg" label="大图1" min-width="80px"> | 
 |  |  |         <el-table-column prop="bgImgs" label="大图" min-width="80px"> | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  |             <div style="display: flex; align-items: center;"> | 
 |  |  |             <el-button type="text" @click="showImage(row.bgImgs)">查看大图</el-button> | 
 |  |  |             <!-- <div style="display: flex; align-items: center;"> | 
 |  |  |               <div style="width: 70px; height: 70px; flex-shrink: 0;"> | 
 |  |  |                 <el-image v-if="row.bgImg" style="width: 70px; height: 70px" :src="row.bgImg" | 
 |  |  |                           :preview-src-list="[row.bgImg]" fit="cover"></el-image> | 
 |  |  |                 <el-image v-if="row.bgImgs" style="width: 70px; height: 70px" :src="row.bgImgs" | 
 |  |  |                   :preview-src-list="row.bgImgs" fit="cover"></el-image> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |             </div> --> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column prop="bgImg2" label="大图2" min-width="80px"> | 
 |  |  |         <el-table-column prop="status" label="处理状态" min-width="100px"> | 
 |  |  |           <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.bgImg2" style="width: 70px; height: 70px" :src="row.bgImg2" | 
 |  |  |                           :preview-src-list="[row.bgImg2]" fit="cover"></el-image> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |             {{ row.status == 1 ? "已处理" : "未处理" }} | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |         <el-table-column prop="bgImg3" label="大图3" min-width="80px"> | 
 |  |  |         <el-table-column v-if="containPermissions(['business:basedata:update', 'business:basedata:delete'])" label="操作" | 
 |  |  |           min-width="80" fixed="right"> | 
 |  |  |           <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.bgImg3" style="width: 70px; height: 70px" :src="row.bgImg3" | 
 |  |  |                           :preview-src-list="[row.bgImg3]" fit="cover"></el-image> | 
 |  |  |               </div> | 
 |  |  |             </div> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  | <!--        <el-table-column prop="attr1" label="属性1" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr2" label="属性2" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr3" label="属性3" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr4" label="属性4" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr5" label="属性5" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr6" label="属性6" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr7" label="属性7" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr8" label="属性8" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr9" label="属性9" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr10" label="属性10" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr11" label="属性11" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr12" label="属性12" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr13" label="属性13" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr14" label="属性14" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr15" label="属性15" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr16" label="属性16" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr17" label="属性17" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr18" label="属性18" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr19" label="属性19" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr20" label="属性20" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr21" label="属性21" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr22" label="属性22" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr23" label="属性23" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr24" label="属性24" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr25" label="属性25" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr26" label="属性26" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr27" label="属性27" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr28" label="属性28" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr29" label="属性29" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr30" label="属性30" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr31" label="属性31" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr32" label="属性32" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr33" label="属性33" min-width="100px"></el-table-column> | 
 |  |  |         <el-table-column prop="attr34" label="属性34" min-width="100px"></el-table-column> | 
 |  |  |         --><el-table-column prop="status" label="处理状态" min-width="100px"> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           {{row.status==1?"已处理":"未处理"}} | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |         <el-table-column | 
 |  |  |           v-if="containPermissions(['business:basedata:update', 'business:basedata:delete'])" | 
 |  |  |           label="操作" | 
 |  |  |           min-width="80" | 
 |  |  |           fixed="right" | 
 |  |  |         > | 
 |  |  |           <template slot-scope="{row}"> | 
 |  |  | <!-- | 
 |  |  |             <!-- | 
 |  |  |             <el-button type="text" @click="$refs.operaBaseDataWindow.open('编辑商品源数据信息表', row)" icon="el-icon-edit" v-permissions="['business:basedata:update']">编辑</el-button> | 
 |  |  | --> | 
 |  |  |             <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" v-permissions="['business:basedata:delete']">删除</el-button> | 
 |  |  |             <el-button type="text" @click="deleteById(row)" icon="el-icon-delete" | 
 |  |  |               v-permissions="['business:basedata:delete']">删除</el-button> | 
 |  |  |           </template> | 
 |  |  |         </el-table-column> | 
 |  |  |       </el-table> | 
 |  |  |       <pagination | 
 |  |  |         @size-change="handleSizeChange" | 
 |  |  |         @current-change="handlePageChange" | 
 |  |  |         :pagination="tableData.pagination" | 
 |  |  |       > | 
 |  |  |       <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> | 
 |  |  |       </pagination> | 
 |  |  |     </template> | 
 |  |  |     <!-- 新建/修改 --> | 
 |  |  |     <OperaBaseDataWindow ref="operaBaseDataWindow" @success="handlePageChange"/> | 
 |  |  |     <OperaBaseDataWindow ref="operaBaseDataWindow" @success="handlePageChange" /> | 
 |  |  |     <el-image-viewer  | 
 |  |  |       v-if="showViewer"  | 
 |  |  |       :on-close="closeViewer" | 
 |  |  |       :initialIndex="0" | 
 |  |  |       :url-list="srcList" | 
 |  |  |       :z-index="3000" | 
 |  |  |     /> | 
 |  |  |   </TableLayout> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | 
 |  |  | import TableLayout from '@/layouts/TableLayout' | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import OperaBaseDataWindow from '@/components/business/OperaBaseDataWindow' | 
 |  |  | import ElImageViewer from 'element-ui/packages/image/src/image-viewer' | 
 |  |  | export default { | 
 |  |  |   name: 'BaseData', | 
 |  |  |   extends: BaseTable, | 
 |  |  |   components: { TableLayout, Pagination, OperaBaseDataWindow }, | 
 |  |  |   data () { | 
 |  |  |   components: { TableLayout, Pagination, OperaBaseDataWindow, ElImageViewer }, | 
 |  |  |   data() { | 
 |  |  |     return { | 
 |  |  |       showViewer: false, | 
 |  |  |       srcList: [], | 
 |  |  |       // 搜索 | 
 |  |  |       searchForm: { | 
 |  |  |         name: '', | 
 |  |  | 
 |  |  |       ] | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created () { | 
 |  |  |   created() { | 
 |  |  |     this.config({ | 
 |  |  |       module: '商品源数据信息表', | 
 |  |  |       api: '/business/baseData', | 
 |  |  | 
 |  |  |       'field.main': 'id' | 
 |  |  |     }) | 
 |  |  |     this.search() | 
 |  |  |   } | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     showImage(imgs) { | 
 |  |  |       this.srcList = [] | 
 |  |  |       this.srcList = imgs | 
 |  |  |       this.showViewer = true | 
 |  |  |     }, | 
 |  |  |     closeViewer() { | 
 |  |  |       this.showViewer = false | 
 |  |  |     } | 
 |  |  |      | 
 |  |  |   }, | 
 |  |  | } | 
 |  |  | </script> |