erp/resources/frontend/src/views/yingyeting/yingyeting.vue

<template>
  <!-- 商品管理页面 -->
  <div>
    <el-card class="box-card">
      <div class="goods"
           style="margin:20px">
        <el-form ref="form"
                 :inline="true"
                 :model="form">
          <el-form-item label="商品名称：">
            <el-input v-model="form.goods_title"
                      placeholder="商品名称">
            </el-input>
          </el-form-item>
          <el-form-item label="商品种类：">
            <el-select v-model="form.type_id"
                       placeholder="商品种类">
              <el-option v-for="item in cate"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品规格：">
            <el-input v-model="form.sku_title"
                      placeholder="商品规格">

            </el-input>
          </el-form-item>
          <el-form-item label="商品品牌：">
            <el-select v-model="form.brand_id"
                       placeholder="商品品牌">
              <el-option v-for="item in brand"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品库存：">
            <el-input v-model="form.keyword_type"
                      placeholder="商品库存">

            </el-input>
          </el-form-item>
          <el-form-item label="商品状态：">
            <el-select v-model="form.status"
                       placeholder="商品状态">
              <el-option v-for="item in options"
                         :key="item.id"
                         :label="item.label"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker v-model="timer"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right"
                            value-format="yyyy-MM-DD hh:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="handleChoose">筛选</el-button>
            <el-button plain
                       @click="handleReChoose">重置筛选</el-button>
          </el-form-item>

        </el-form>

      </div>

    </el-card>

    <el-card class="box-card1"
             style="margin-top:30px">
      <div>
        <!-- 表格头部操作 -->
        <div>
          <span>
            全部商品(共800条)
          </span>
          <div class="btn">
            <el-button type="primary"
                       plain
                       @click="addNewgoods">新建商品</el-button>
            <el-button type="primary"
                       @click="update()"
                       plain>上新</el-button>
            <el-button type="primary"
                       plain>库存盘点</el-button>
            <el-button type="primary"
                       plain
                       @click="handleImport">导入商品</el-button>
            <el-button type="primary"
                       plain
                       @click="handleExport">表格导出</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <el-table ref="multipleTable"
                  :data="tableData"
                  border
                  class="table"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="55">
          </el-table-column>
          <el-table-column label="商品信息">
            <template slot-scope="scope">
              <div>{{ scope.row.goods.img_url}}</div>
              <div>{{ scope.row.goods.title}}</div>
            </template>
          </el-table-column>
          <el-table-column label="品类">
            <template slot-scope="scope">
              <div>{{ scope.row.goods.type?scope.row.goods.type.name:''}}</div>
            </template>
          </el-table-column>
          <el-table-column label="规格"
                           prop="title">
          </el-table-column>
          <el-table-column label="品牌">
            <template slot-scope="scope">
              <div>{{ scope.row.goods.brand?scope.row.goods.brand.name:''}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="two_days_ago_num"
                           sortable
                           label="2天前库存">
          </el-table-column>
          <el-table-column prop="yesterday_num"
                           sortable
                           label="1天前库存">
          </el-table-column>
          <el-table-column sortable
                           label="今日到货">
            <template slot-scope="scope">
              <div>
                <div v-if="true">
                  <el-input v-model="input"></el-input>
                </div>
                <div>{{ scope.row.daily!=null?scope.row.daily.arrived_today_num:0}}</div>
              </div>
            </template>

          </el-table-column>
          <el-table-column prop="cost"
                           sortable
                           label="成本">
            <template>
              <div v-if="isShow">
                <el-input v-model="input"></el-input>
              </div>
            </template>

          </el-table-column>
          <el-table-column prop="reference_price"
                           sortable
                           label="参考售价">

          </el-table-column>
          <el-table-column prop="num"
                           sortable
                           label="总量">
          </el-table-column>
          <el-table-column prop="reserve"
                           sortable
                           label="预留量">
          </el-table-column>
          <!-- <el-table-column prop="name"
                           sortable
                           label="店铺订单">
          </el-table-column> -->
          <el-table-column sortable
                           label="损耗">

            <template slot-scope="scope">

              <el-popover width="200"
                          placement="right"
                          trigger="hover">
                <div class="detail">
                  <span>损耗：</span>
                  <el-input></el-input>
                </div>
                <el-radio-group v-model="radio">
                  <el-radio :label="3">48h以上</el-radio>
                  <el-radio :label="6">到货错误</el-radio>
                  <el-radio :label="9">灰霉</el-radio>
                  <el-radio :label="2">长度</el-radio>
                  <el-radio :label="4">花朵</el-radio>
                  <el-radio :label="5">其他</el-radio>
                </el-radio-group>

                <div class="list_btn">
                  <el-button type="primary">保存</el-button>
                  <el-button>取消</el-button>
                </div>
                <div class="loss"
                     slot="reference">{{ scope.row.daily?scope.row.daily.arrived_loss_num:0}}</div>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column prop="stock"
                           sortable
                           label="库存">
          </el-table-column>
          <el-table-column prop="address"
                           sortable
                           label="库存盘点">
            <template slot-scope="scope">
              <div>{{ scope.row.daily?scope.row.daily.inventory:0}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="status"
                           label="状态">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text">库存</el-button>
              </div>
              <div>
                <el-button type="text"
                           @click="handleEdit(scope.row.id)">编辑</el-button>
              </div>
              <div>
                <el-button type="text">记录</el-button>
              </div>

            </template>

          </el-table-column>
        </el-table>
      </div>
      <el-button type="primary">确定</el-button>
    </el-card>
    <div class="page-pagination">
      <el-pagination :total="total"
                     class="mt-4"
                     :current-page="form.page"
                     :page-size="form.per_page"
                     @current-change="handleCurrentChange"
                     @size-change="handleSizeChange"
                     layout="total, prev, pager, next, jumper">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { goods } from '../../api/goods'
import { goods_types, Brand_goods_types } from '../../api/rankingData.js'
export default {
  data() {
    return {
      total: 0, // 总条数
      timer: '', // 筛选的时间
      radio: '', // 损耗选择的原因
      brand: [], // 品牌列表
      cate: [], // 种类列表
      isShow: false, // 点击上新显示输入框
      tableData: [], // 商品列表
      // 商品状态
      options: [
        {
          id: '1',
          label: '在售',
        },
        {
          id: '2',
          label: '预警',
        },
        {
          id: '0',
          label: '下架',
        },
      ],

      // 请求商品列表的参数
      form: {
        goods_title: '', // 商品名称
        type_id: '', // 商品种类id
        brand_id: '', // 商品品牌id
        sku_title: '', // 商品规格
        status: '', // 商品状态
        keyword_type: '', // 库存
        keyword_value: '',
        page: 1,
        per_page: 5,
      },
      input: '',
      value1: '',
      currentPage4: 4,
    }
  },
  methods: {
    // 列表编辑
    handleEdit(id) {
      this.$router.push('/addgoods?id=' + id)
    },
    // 获取商品列表
    getList() {
      this.form.keyword_value = this.timer[0] + '-' + this.timer[1]
      const forms = { ...this.form }
      console.log(forms, 'opopo')
      goods(forms).then((res) => {
        this.tableData = res.data.data
        console.log(res, 111)
        // console.log(this.tableData, 'ppp')
      })
    },
    // 筛选
    handleChoose() {
      this.getList()
    },
    // 分页-当前页改变
    handleCurrentChange(e) {
      this.form.page = e
      this.handleChoose()
    },
    // 分页
    handleSizeChange(e) {
      this.form.per_page = e
      this.getList()
    },
    // 重置筛选
    handleReChoose() {
      this.form = {
        goods_title: '', // 商品名称
        type_id: '', // 商品种类id
        brand_id: '', // 商品品牌id
        sku_title: '', // 商品规格
        status: '', // 商品状态
        keyword_type: '',
      }
      this.timer = ''
    },

    // 导入商品
    handleImport() {},
    // 导出商品
    handleExport() {},
    // 点击上新
    update() {
      this.isShow = true
      console.log(this.isShow, 8888)
    },
    // 复选框按钮
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 新增商品
    addNewgoods() {
      this.$router.push({ path: '/addgoods' })
    },
  },
  mounted() {
    // 获取商品种类
    goods_types().then((res) => {
      this.cate = res.data.data
    })
    // 获取商品品牌
    Brand_goods_types().then((res) => {
      this.brand = res.data.data
    })
    // 获取商品列表
    this.getList()
  },
}
</script>

<style lang="css" scoped>
.loss {
  position: relative;
}

/deep/ .detail .el-button,
/deep/ .detail .el-button--primary {
  width: 20px;
  height: 20px;
  line-height: 5px;
}
/deep/ .detail .el-input,
/deep/ .detail .el-input__inner {
  width: 20px;
  height: 20px;
}

.goods {
}
.table {
  margin-top: 40px;
}
.btn {
  float: right;
}
</style>