erp/resources/frontend/src/views/shuju/record.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-input v-model="input"
                      placeholder="输入商品编号"></el-input>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="input"
                      placeholder="输入商品名称"></el-input>
          </el-form-item>
          <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.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.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-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-form-item>

        </el-form>

      </div>

    </el-card>
    <el-card style="margin-top:30px"
             class="box-card">
      <div>
        <span></span>
        <span>历史记录</span>
        <span>（共800条）</span>
        <span>——玫瑰花</span>
      </div>
      <el-table :data="tableData"
                style="width: 100%">
        <el-table-column prop="date"
                         label="序号"
                         width="180">
        </el-table-column>
        <el-table-column prop="name"
                         label="时间"
                         width="180">
        </el-table-column>
        <el-table-column prop="address"
                         label="类别">
        </el-table-column>
        <el-table-column prop="address"
                         label="操作前">
        </el-table-column>
        <el-table-column prop="address"
                         label="操作后">
        </el-table-column>
        <el-table-column prop="address"
                         label="操作人">
        </el-table-column>
      </el-table>

    </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>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕',
        },
        {
          value: '选项2',
          label: '双皮奶',
        },
        {
          value: '选项3',
          label: '蚵仔煎',
        },
        {
          value: '选项4',
          label: '龙须面',
        },
        {
          value: '选项5',
          label: '北京烤鸭',
        },
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      currentPage4: 4,
      form: {
        name1: '',
        name2: '',
        name3: '',
        name4: '',
        name5: '',
        name6: '',
      },
      input: '',
      value1: '',
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style>
</style>