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-select v-model="form.name1"
                       placeholder="商品名称">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品种类：">
            <el-select v-model="form.name2"
                       placeholder="商品种类">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品规格：">
            <el-select v-model="form.name3"
                       placeholder="商品规格">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品品牌：">
            <el-select v-model="form.name4"
                       placeholder="商品品牌">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品状态：">
            <el-select v-model="form.name5"
                       placeholder="商品状态">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker v-model="value1"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary">筛选</el-button>
            <el-button plain>重置筛选</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>导入商品</el-button>
            <el-button type="primary"
                       plain>表格导出</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">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name"
                           label="品类">
          </el-table-column>
          <el-table-column prop="address"
                           label="规格">
          </el-table-column>
          <el-table-column prop="name"
                           label="品牌">
          </el-table-column>
          <el-table-column prop="address"
                           sortable
                           label="2天前库存">
          </el-table-column>
          <el-table-column prop="name"
                           sortable
                           label="1天前库存">
          </el-table-column>
          <el-table-column prop=""
                           sortable
                           label="今日到货">
            <template>
              <div v-if="isShow">
                <el-input v-model="input"></el-input>
              </div>
            </template>

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

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

          </el-table-column>
          <el-table-column prop="name"
                           sortable
                           label="总量">
          </el-table-column>
          <el-table-column prop="address"
                           sortable
                           label="预留量">
          </el-table-column>
          <el-table-column prop="name"
                           sortable
                           label="店铺订单">
          </el-table-column>
          <el-table-column prop="address"
                           sortable
                           label="损耗">
            <template>
              <div class="loss">66</div>
              <div class="detail">
                <div>损耗数量：<input /></div>
                <el-radio-group v-model="radio">
                  <el-radio :label="3">备选项</el-radio>
                  <el-radio :label="6">备选项</el-radio>
                  <el-radio :label="9">备选项</el-radio>
                </el-radio-group>

              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           sortable
                           label="库存">
          </el-table-column>
          <el-table-column prop="address"
                           sortable
                           label="库存盘点">
            <el-input v-model="input"></el-input>
          </el-table-column>
          <el-table-column prop="name"
                           label="状态">
          </el-table-column>
          <el-table-column label="操作">
            <template>
              <div>
                <el-button type="text">修改</el-button>
              </div>
              <div>
                <el-button type="text">编辑</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>

    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage4"
                   :page-sizes="[100, 200, 300, 400]"
                   :page-size="100"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="400">
    </el-pagination>
  </div>
</template>

<script>
import { goods } from '../../api/goods'
export default {
  data() {
    return {
      isShow: false, // 点击上新显示输入框
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      form: {
        name1: '',
        name2: '',
        name3: '',
        name4: '',
        name5: '',
        name6: '',
      },
      input: '',
      value1: '',
      currentPage4: 4,
    }
  },
  methods: {
    // 点击上新
    update() {
      this.isShow = true
      console.log(this.isShow, 8888)
    },
    // 复选框按钮
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    // 新增商品
    addNewgoods() {
      this.$router.push({ path: '/index/yingyeting/addgoods' })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 商品列表
    getGoods() {
      goods().then((res) => {
        console.log('商品列表', res)
      })
    },
  },
  created() {
    this.getGoods()
  },
}
</script>

<style lang="css" scoped>
.loss {
  position: relative;
}
.detail {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: red;
  right: 0;
}
.goods {
}
.table {
  margin-top: 40px;
}
.btn {
  float: right;
}
</style>