|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 顶部操作区域 -->
|
|
|
+ <div class="filter-container">
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>商品ID:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="listQuery.productId"
|
|
|
+ placeholder="商品ID"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ @clear="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <span>商品名称:</span>
|
|
|
+ <el-input
|
|
|
+ v-model="listQuery.productName"
|
|
|
+ placeholder="商品名称"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="getList"
|
|
|
+ @clear="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="filter-control">
|
|
|
+ <el-button type="primary" @click="getList"> 查询 </el-button>
|
|
|
+ <el-button type="primary" @click="goodsDialogVisible = true"> 添加商品 </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-table v-loading="isLoading" :data="list" border style="width: 100%" height="660">
|
|
|
+ <el-table-column prop="productId" label="商品ID" align="center" width="80" />
|
|
|
+ <el-table-column prop="mainImage" label="商品图片" align="center" width="120">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <img v-if="row.mainImage" :src="row.mainImage" alt="" style="width: 50px; height: 50px" />
|
|
|
+ <span v-else>---</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="productName" label="商品名称" align="center" />
|
|
|
+ <el-table-column prop="shopName" label="供应商名称" align="center" />
|
|
|
+ <el-table-column label="操作" align="center" width="200">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-button type="danger" size="mini" style="margin: 2px" @click="handleDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 页码 -->
|
|
|
+ <pagination
|
|
|
+ :total="total"
|
|
|
+ :page-sizes="[10, 20, 30, 100]"
|
|
|
+ :page-size="20"
|
|
|
+ :page.sync="listQuery.pageNum"
|
|
|
+ :limit.sync="listQuery.pageSize"
|
|
|
+ @pagination="getShopProduct"
|
|
|
+ />
|
|
|
+ <!-- 选择商品弹窗 -->
|
|
|
+ <goods-dialog v-if="goodsDialogVisible" ref="shopDialog" @confirm="handleAddGoodsConfirm" @cancel="handleCancel" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getProvidersProducts, addProducts, delProduct } from '@/api/serviceSettlement/goods'
|
|
|
+import GoodsDialog from '../components/goods-dialog'
|
|
|
+export default {
|
|
|
+ name: 'RecordList',
|
|
|
+ components: { GoodsDialog },
|
|
|
+ filters: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isLoading: true,
|
|
|
+ listQuery: {
|
|
|
+ providerId: this.$route.query.providersId,
|
|
|
+ productName: '',
|
|
|
+ productId: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ goodsDialogVisible: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ providersId() {
|
|
|
+ return this.$route.query.providersId || false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ // 获取行为记录列表
|
|
|
+ getList() {
|
|
|
+ this.list = []
|
|
|
+ this.listQuery.pageNum = 1
|
|
|
+ this.getProvidersProducts()
|
|
|
+ },
|
|
|
+ // 确认选择商品
|
|
|
+ handleAddGoodsConfirm(data) {
|
|
|
+ console.log('data', data)
|
|
|
+ const productIds = []
|
|
|
+ data.forEach((ele) => {
|
|
|
+ productIds.push(ele.productId)
|
|
|
+ })
|
|
|
+ this.addProducts({ providerId: this.providersId, productIds: productIds.join(',') })
|
|
|
+ },
|
|
|
+ // 取消选择供商品
|
|
|
+ handleCancel() {
|
|
|
+ this.goodsDialogVisible = false
|
|
|
+ this.$refs.shopDialog.visible = false
|
|
|
+ },
|
|
|
+ // 获取服务商商品列表
|
|
|
+ async getProvidersProducts() {
|
|
|
+ try {
|
|
|
+ this.isLoading = true
|
|
|
+ const res = await getProvidersProducts(this.listQuery)
|
|
|
+ this.list = res.data.results
|
|
|
+ this.total = res.data.totalRecord
|
|
|
+ this.isLoading = false
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 保存添加商品
|
|
|
+ async addProducts(params) {
|
|
|
+ try {
|
|
|
+ await addProducts(params)
|
|
|
+ this.goodsDialogVisible = false
|
|
|
+ this.$notify({
|
|
|
+ title: '',
|
|
|
+ message: '添加成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.getList()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 操作删除商品
|
|
|
+ async handleDelete(row) {
|
|
|
+ try {
|
|
|
+ await this.$confirm('确定删除该商品吗?', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ this.delProduct(row)
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.info('已取消删除操作')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 调用删除广告图
|
|
|
+ async delProduct(row) {
|
|
|
+ try {
|
|
|
+ await delProduct({ providerId: this.providersId, productId: row.productId })
|
|
|
+ this.$notify({
|
|
|
+ title: '',
|
|
|
+ message: '删除成功',
|
|
|
+ type: 'success'
|
|
|
+ });
|
|
|
+ this.getList()
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.tags-sms {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 28px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 5px;
|
|
|
+}
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.uploader-tips {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 160px;
|
|
|
+ line-height: 28px;
|
|
|
+ color: red;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+</style>
|