<!--产品列表--> <template> <div class="product"> <div class="product-inputs"> <div style="margin-top: 10px"> <span>产品型号</span> <el-input v-model="listQuery.productCode" placeholder="请输入产品型号" clearable class="product-input" /> <span>产品名称</span> <el-input v-model="listQuery.productName" placeholder="请输入产品名称" clearable class="product-input" /> <span>产品品类</span> <el-select v-model="listQuery.categoryId" class="product-select" filterable placeholder="请选择产品品类"> <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categoryName" :value="item.categoryId" /> </el-select> </div> <div style="margin-top: 10px"> <el-button type="primary" icon="el-icon-search" @click="searchClick"> 搜索 </el-button> <el-button type="primary" icon="el-icon-refresh-right" @click="reset"> 重置 </el-button> <el-button type="danger" icon="el-icon-delete" @click="BatchDeleteClick"> 删除 </el-button> <el-button type="success" icon="el-icon-circle-plus-outline" @click="addDialog"> 新增 </el-button> <el-button type="primary" icon="el-icon-folder-opened" @click="exportToExcel"> 导出 </el-button> </div> </div> <div class="product-list"> <el-table id="out-table" ref="multipleTable" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :header-cell-style="{ background: '#2483b3', color: 'white' }" > <el-table-column type="selection" width="55" /> <!-- <el-table-column type="index" label="编号" width="55" />--> <el-table-column header-align="center" align="center" prop="id" label="序号" /> <el-table-column header-align="center" align="center" prop="productCode" label="产品型号" /> <el-table-column header-align="center" align="center" prop="productName" label="产品名称" /> <el-table-column header-align="center" align="center" prop="brandName" label="产品品牌" /> <el-table-column header-align="center" align="center" prop="categoryId" label="产品品类" /> <el-table-column header-align="center" align="center" prop="internationalCode" label="国际69码" /> <el-table-column header-align="center" align="center" fixed="right" label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="handleDetail(scope.row)"> 查看 </el-button> <el-button type="text" size="small" @click="handleClick(scope.row)"> 编辑 </el-button> <el-button type="text" size="small" @click="handleDelete(scope.row)"> 删除 </el-button> <el-button type="text" size="small" @click="handleBind(scope.row)"> 绑定服务 </el-button> </template> </el-table-column> </el-table> <group-page :limit="limit" :total="page" :offset="offset" :count="total" @setOffset="setOffset" @setLimit="setLimit" /> </div> <productDetailDialog v-if="isShowDetail" :data-info="dataInfo" @close="DetailDialogClose" /> <product-list-add-dialog v-show="isShowDialog" ref="addProduct" :title="dialogTitle" @close="addDialogClose" @refresh="refresh" /> <productBindDialog v-if="isBindShow" :data-info="dataInfo" @close="BindDialogClose" /> </div> </template> <script> import { tableRowClassName } from '../../utils/myUtils/changeTableTr' import { listPage, productDelete, batchDelete, list, d_firmwareUpgrade } from '../../api/product/product' import { C_list } from '../../api/product/category' import { export_json_to_excel } from '../../utils/Export2Excel' import productListAddDialog from '../../components/mycomponent/dialog/productListAddDialog.vue' import GroupPage from '../../components/mycomponent/groupPage.vue' import productDetailDialog from '../../components/mycomponent/dialog/productDetailDialog.vue' import productBindDialog from '../../components/mycomponent/dialog/productBindDialog.vue' export default { components: { productListAddDialog, GroupPage, productDetailDialog, productBindDialog }, data() { return { listQuery: { productCode: '', productName: '', categoryId: '' }, categoryList: [], // 品类列表 dataInfo: {}, // 当前行的数据 limit: 10, // 当前的行数 offset: 1, // 当前页 total: 0, isShowDialog: false, isShowDetail: false, isBindShow: false, dialogTitle: '', value: '', input: '', options: [{ label: '热水器类', value: '热水器类' }], tableData: null, queryInfo: {}, ExportTable: []// 导出表格 } }, computed: { page() { const index = this.total / this.limit return Math.ceil(index) } }, watch: { limit(newVls) { this.limit = newVls this.getProductList() }, offset(newVls) { this.offset = newVls this.getProductList() } }, mounted() { const params = { categoryCode: '', categoryName: '' } C_list(params).then(res => { this.categoryList = res.data }) this.refresh() }, methods: { // 改变行的样式 tableRowClassName: tableRowClassName, addDialog() { this.isShowDialog = true this.dialogTitle = '新增产品' this.$refs.addProduct.initDialog('add') }, getProductList() { listPage(`limit=${this.limit}&offset=${this.offset}`, this.listQuery).then(res => { this.tableData = res.rows this.total = res.total }) }, setLimit(crrentSize) { this.limit = crrentSize }, setOffset(offset) { this.offset = offset }, // 刷新 refresh() { this.getProductList() }, // 编辑 handleClick(row) { console.log(row) this.isShowDialog = true this.dialogTitle = '编辑产品' this.$refs.addProduct.initDialog('edit', row) }, // 详情 handleDetail(row) { console.log(row) this.isShowDetail = true this.dataInfo = row }, DetailDialogClose() { this.isShowDetail = false }, // 搜索 searchClick() { this.offset = 1 this.refresh() }, // 重置 reset() { this.productName = '' this.productType = '' this.productCategory = '' this.queryInfo = { productName: '', productCode: '', categoryId: '' } this.refresh() }, // 删除当前行 handleDelete(row) { productDelete({ id: row.id }).then(res => { console.log(res) this.refresh() }) }, // 批量删除 BatchDeleteClick() { const DelAry = this.$refs.multipleTable.selection console.log(DelAry) const ids = [] DelAry.forEach(ele => { ids.push(ele.id) }) console.log(ids) batchDelete({ ids: ids }).then(res => { console.log(res) this.refresh() }) }, handleBind(row) { console.log(row) this.isBindShow = true this.dataInfo = row }, BindDialogClose() { this.isBindShow = false }, // 导出表格 // 导出 exportToExcel() { listPage('offset=1', {}).then(res => { console.log(res.rows, '全部数据') this.ExportTable = res.rows const header = Object.keys(res.rows[0]) console.log(header) const data = res.rows.map((user, index) => { const userArr = [] console.log(user, index) for (const key in res.rows[0]) { // console.log(res.rows[key]); const item = user[key] userArr.push(item) } return userArr }) console.log(data) // //把定义好的header和data放进export_json_to_excel的函数里作为参数 export_json_to_excel({ header, data }) }) } } } </script> <style lang="scss" scoped> .product { position: relative; width: 100%; min-height: 700px; height: 823px; overflow: auto; } .product-inputs { display: flex; justify-content: space-between; .product-input, .product-select { margin: 0px 10px; width: 150px; } } .product-list { margin-top: 1rem; .editable-row-operations a { margin-right: 0.2rem; } } .product-list-item-gray { background-color: rgb(167, 163, 163); text-align: center; } .product-list-item-white { background-color: white; text-align: center; } </style>