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> 全部商品(共{{ total }}条) </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"
          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>
</template>

<script>
import axios from "axios";
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: "",
    };
  },
  methods: {
    list() {
      axios.get("/api/goods").then((res) => {
        console.log("我是商品", res);
      });
    },

    // 列表编辑
    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) => {
        console.log(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("/index/yingyeting/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>