mp-ui-pc/src/views/business/ticket/components/GoodsAddForm.vue

<template>
  <div>
    <el-dialog
      title="添加实物奖品"
      width="1000px"
      :visible.sync="dialogVisible"
      :before-close="close"
    >
      <div class="dialog-search">
        <div style="margin:0 0 10px 20px">商品名称：</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 type="number" 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 type="number" style="width: 220px" v-model="queryParams.maxValue" @clear="pageParams.pageNum = 1;getGoodsList()"
                  placeholder="最高价格" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
        <br>
        <div style="margin:0 0 10px 20px">盲豆兑换数量：</div>
        <el-input type="number" style="width: 220px" v-model="queryParams.minExchange" @clear="pageParams.pageNum = 1;getGoodsList()"
                  placeholder="最低盲豆数量" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
        <div style="width: 20px;text-align: center">-</div>
        <el-input type="number" style="width: 220px" v-model="queryParams.maxExchange" @clear="pageParams.pageNum = 1;getGoodsList()"
                  placeholder="最高盲豆数量" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
        <br>
        <div style="margin:0 0 10px 20px">商品成本：</div>
        <el-input type="number" style="width: 220px" v-model="queryParams.minCost" @clear="pageParams.pageNum = 1;getGoodsList()"
                  placeholder="最低成本" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
        <div style="width: 20px;text-align: center">-</div>
        <el-input type="number" style="width: 220px" v-model="queryParams.maxCost" @clear="pageParams.pageNum = 1;getGoodsList()"
                  placeholder="最高成本" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>

        <div class="ge"></div>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="pageParams.pageNum = 1;getGoodsList()"
        >查询
        </el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery()">重置</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>￥{{ $numberFormat(scope.row.value) }}</div>
          </template>
        </el-table-column>

        <el-table-column label="盲豆兑换数量" prop="exchangePrice" min-width="85"/>

        <el-table-column label="商品成本" min-width="85">
          <template slot-scope="scope">
            <div>￥{{ $numberFormat(scope.row.cost) }}</div>
          </template>
        </el-table-column>

        <el-table-column label="是否支持兑换" prop="exchangeShow" min-width="85">
          <template slot-scope="scope">
            <div>{{scope.row.exchangeShow == 1 ? '支持兑换':'不支持兑换' }}</div>
          </template>
        </el-table-column>

        <el-table-column label="商品库存" prop="quantity" width="80"/>
      </el-table>
      <div style="width: 700px;"></div>
      <pagination
        v-show="goodsTotal > 0"
        :total="goodsTotal"
        :page.sync="pageParams.pageNum"
        :limit.sync="pageParams.pageSize"
        @pagination="getGoodsList"
      />
      <div class="dialog-btn">
        <div style="width: 20px;"></div>
        <el-button size="small" @click="close"> 取 消</el-button>
        <div style="width: 20px;"></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'
import log from "../../../monitor/job/log";

export default {
  name: "GoodsAddForm",
  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,
          status: "on",
          exchangeShow: 2,
          minValue: this.queryParams.minValue ? accMul(this.queryParams.minValue, 100) : this.queryParams.minValue,
          maxValue: this.queryParams.maxValue ? accMul(this.queryParams.maxValue, 100) : this.queryParams.maxValue,
          minExchange:this.queryParams.minExchange,
          maxExchange:this.queryParams.maxExchange,
          minCost: this.queryParams.minCost ? accMul(this.queryParams.minCost, 100) : this.queryParams.minCost,
          maxCost: this.queryParams.maxCost ? accMul(this.queryParams.maxCost, 100) : this.queryParams.maxCost,
        }
      ).then((res) => {
        this.goodsList = res.rows.map((item) => {
          return {
            ...item,
            picUrl: publicFileGetUrl + item.picUrl.split(",")[0],
          };
        });
        this.goodsTotal = res.total;
        this.loading = false;
      });
    },
    //重置
    resetQuery(){
      this.goodsTitle = ''
      this.queryParams = {}
      this.pageParams.pageNum = 1
      this.getGoodsList();
    },

    // 选中商品
    handleSelectionGoods(e) {
      this.selectGoodsList = e.map((item) => {
        return {
          prizeType: "goods",
          refId: item.goodsId,
          picUrl: item.picUrl,
          title: item.title,
          value: item.value,
          cost: item.cost
        };
      });
    },

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

    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
div {
  display: inline-block;
}
.dialog-search {
  //display: flex;
  line-height: 32px;
  margin-bottom: 20px;

  .ge {
    width: 20px;
  }
}

</style>