index.vue

<template>
  <d2-container class="pRelative">
    <div class="searchs">
      <!-- 搜索区 -->
      <div>
        <el-button  class="button buttondark" size="small">批量上架</el-button>
      </div>
      <el-form class="searchzone" :inline="true" :model="formData" label-width="auto">
        <el-form-item label="门店">
          <el-select
            size="small"
            v-model="formData.store"
            placeholder="请选择门店"
            style="width:160px;"
          >
            <el-option
              v-for="item in  statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            size="small"
            v-model="formData.status"
            placeholder="请选择状态"
            style="width:160px;"
          >
            <el-option
              v-for="item in  statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键词">
          <el-input size="small" v-model="formData.keys" style="width:160px" placeholder="请输入关键词" />
        </el-form-item>
        <el-button class="button buttondark" size="small">搜索</el-button>
      </el-form>
    </div>

    <el-table
      :data="data"
      class="list"
      style="width: 100%"
      empty-text="暂无商品信息"
      height="calc(100% - 120px)"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="goodName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="goodPrice" label="门店" align="center"></el-table-column>
      <el-table-column prop="goodNum" label="门店id" align="center"></el-table-column>
      <el-table-column prop="goodBackMoney" label="价格" align="center"></el-table-column>
      <el-table-column prop="goodStatus" label="佣金" align="center"></el-table-column>
      <el-table-column prop="goodStatus" label="状态" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.goodStatus === 'up' ? '上架' : '下架'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodStatus" label="上架时间" align="center"></el-table-column>
      <!-- 查看详情 -->
      <el-table-column
        fixed="right"
        align="center"
        label="操作"
        width="140"
        @selection-change="listPick"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleAdd">{{scope.row.goodStatus === 'up' ? '下架' : '上架'}}</el-button>
          <el-button type="text" @click="handleAdd">佣金配置</el-button>       
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-size="page.size"
      layout="total, prev, pager, next, jumper"
      :total="page.total"
    ></el-pagination>
    <add-goods ref="addGoods"></add-goods>
  </d2-container>
</template>
<script>
import addGoods from "./components/add_goods";
export default {
  data() {
    return {
      formData: {
        status: "",
        keys: ""
      },
      statusList: [],
      data: [
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "象印",
          goodPrice: "180元",
          goodNum: "14",
          goodBackMoney: "18元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "Dior",
          goodPrice: "240元",
          goodNum: "60",
          goodBackMoney: "40元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "ASICS",
          goodPrice: "450元",
          goodNum: "120",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "NIKE",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "Adidas",
          goodPrice: "540元",
          goodNum: "210",
          goodBackMoney: "30元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "down"
        },
        {
          imgUrl:
            "http://wework.qpic.cn/bizmail/FLjpJB8Od58W5ULAIYTRstTvFOJEFUnKQ3tRCdkicxorh6dEHcpNqVw/100",
          goodName: "膳魔师",
          goodPrice: "200元",
          goodNum: "44",
          goodBackMoney: "20元",
          goodStatus: "up"
        }
      ],
      page: {
        currentPage: 1,
        size: 20,
        total: 100
      }
    };
  },
  components: { addGoods },
  methods: {
    handleCurrentChange(val) {
      this.page.currentPage = val
      console.log(`当前页: ${val}`);
    },
    listPick() {},
    handleAdd() {
      this.$refs.addGoods.dialogVisible = true;
    },
    handleSelectionChange(val) {
      console.log(val,'批量选择');
      
    }
  }
};
</script>
<style lang="scss">
</style>