mp-ui-pc/src/views/business/exchange/components/GoodsAdd.vue

<template>
  <div>
    <el-dialog
      title="添加实物商品"
      width="1000px"
      :visible.sync="dialogVisible"
      :before-close="close"
    >
      <div class="dialog-search">
        <div>商品名称：</div>
        <el-input
          v-model="goodsTitle"
          placeholder="请输入商品名称"
          clearable
          size="small"
          style="width: 220px" @clear="pageParams.pageNum = 1;getGoodsList()"
          @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"
        />
        <div style="margin-left: 20px">商品价格：</div>
        <el-input style="width: 220px" v-model="queryParams.minValue"  @clear="pageParams.pageNum = 1;getGoodsList()" placeholder="最低价格" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
        <div style="width: 20px;text-align: center">-</div>
        <el-input style="width: 220px" v-model="queryParams.maxValue"  @clear="pageParams.pageNum = 1;getGoodsList()" placeholder="最高价格" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
      </div>
      <div class="dialog-search">
        <div>商品类型：</div>
        <el-select v-model="queryParams.type" placeholder="请选择商品类型" clearable @change="pageParams.pageNum = 1;getGoodsList()">
          <el-option label="全部" value=""/>
          <el-option label="实物商品" value="1"/>
          <el-option label="卡密商品" value="2"/>
        </el-select>
        <div class="ge"></div>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getGoodsList()"
          >查询</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="goodsList"
        row-key="goodsId"
        @selection-change="handleSelectionGoods"
        class="el-table"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
          :reserve-selection="true"
        />
        <el-table-column label="商品ID" prop="goodsId" />
        <el-table-column label="商品图片">
          <template slot-scope="{ row }">
            <div v-if="row.picUrl">
              <el-image
                style="width: 100px; height: 100px"
                :src="row.picUrl.split(',')[0]"
                :preview-src-list="row.picUrl.split(',')"
              >
              </el-image>
            </div>
            <p v-else>-</p>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="title" min-width="85" />
        <el-table-column label="商品类型" min-width="85">
          <template slot-scope="scope">
            <div>{{ scope.row.type == 1 ? '实物商品':'卡密商品' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品价格" min-width="85">
          <template slot-scope="scope">
            <div>￥{{ $numberFormat(scope.row.value) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="商品库存" prop="quantity" width="80" />
      </el-table>
      <pagination
        v-show="goodsTotal > 0"
        :total="goodsTotal"
        :page.sync="pageParams.pageNum"
        :limit.sync="pageParams.pageSize"
        @pagination="getGoodsList"
      />
      <div class="dialog-btn">
        <el-button size="small" @click="close"> 取 消 </el-button>
        <div class="ge"></div>
        <el-button type="primary" size="small" @click="confirmGoods">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { publicFileGetUrl } from "@/api/common";
import { getGoodsList } from "@/api/business/goods";
import { accMul } from '@/utils/util'
export default {
  name: "GoodsAdd",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      goodsTitle: "", // 商品名称
      queryParams:{},

      goodsList: [], // 商品列表
      goodsTotal: 0, // 商品总数
      selectGoodsList: [], // 选中商品
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    // 商品列表
    getGoodsList() {
      this.loading = true;
      getGoodsList(
        "pageNum=" +
          this.pageParams.pageNum +
          "&pageSize=" +
          this.pageParams.pageSize +
          "&",
        { title: this.goodsTitle, type: this.queryParams.type, status: "on", minValue: this.queryParams.minValue?accMul(this.queryParams.minValue, 100):this.queryParams.minValue, maxValue: this.queryParams.maxValue?accMul(this.queryParams.maxValue, 100):this.queryParams.maxValue,}
      ).then((res) => {
        this.goodsList = res.rows.map((item) => {
          return {
            ...item,
            picUrl: publicFileGetUrl + item.picUrl.split(",")[0],
          };
        });
        this.goodsTotal = res.total;
        this.loading = false;
      });
    },

    // 选中商品
    handleSelectionGoods(e) {
      this.selectGoodsList = e.map((item) => {
        return {
          type: "goods",
          // quantity: 1,
          goodsId: item.goodsId,
          picUrl: item.picUrl,
          title: item.title,
          sortWeight: 100
        };
      });
    },

    // 确认选中商品
    confirmGoods() {
      if(!this.selectGoodsList.length) {
        this.msgInfo('请选择商品')
        return
      }
      this.$emit("confirmGoods", this.selectGoodsList);
    },

    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog-search {
  display: flex;
  line-height: 32px;
  margin-bottom: 20px;
  .ge {
    width: 20px;
  }
}
.dialog-btn {
  display: flex;
  align-content: center;
  justify-content: flex-end;
  padding: 40px 0 0;
  .ge {
    width: 20px;
  }
}
</style>