elizebeth/src/xt_pages/stock/stockWarning.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
        <div style="display: flex;align-items: center;justify-content: space-between;margin-bottom:10px;">
            <div>
                <el-select v-model="value" size="small" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-input
                size="small"
                style="width: 200px;"
                class="filter-item"
                v-model.trim="searchKey"
                placeholder=""
                />
                <el-button
                size="small"
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="search"
                >搜索</el-button
                >
                <el-select v-model="value" size="small" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div>
                <el-button size="small" type="primary">导出</el-button>
            </div>
        </div>
        <el-table :data="tableData" border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)' }">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
            fixed="left"
            prop="date"
            label="耗材ID"
            width="80">
            </el-table-column>
            <el-table-column
            prop="date"
            label="耗材名称"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="规格型号"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="单位"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="零售价"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="进货价"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="库存数量"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="库存预警"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="生产厂商"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="产地"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="批准文号"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="供应商"
            width="100">
            </el-table-column>
            <el-table-column
            prop="name"
            label="状态"
            width="80">
            </el-table-column>
            <el-table-column
            label="备注">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 50, 100]"
            :page-size="5"
            background
            style="margin-top:20px;text-align: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
  
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";

export default {
    name: "stockModifyPrice",
    components:{
        BreadCrumb
    },
    data() {
        return{
            crumbs: [
                { path: false, name: "库存管理" },
                { path: false, name: "耗材管理" },
                { path: false, name: "耗材预警" }
            ],
            searchKey:'',
            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 弄'
            }],
            total: 0,
            options: [{
                value: '选项1',
                label: '黄金糕'
                }, {
                value: '选项2',
                label: '双皮奶'
                }, {
                value: '选项3',
                label: '蚵仔煎'
                }, {
                value: '选项4',
                label: '龙须面'
                }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
        }
    },
    methods:{
        search(){

        },
        handleSizeChange(){},
        handleCurrentChange(){}

    },
    created(){
    },
    mounted() {
    },
};
</script>

<style rel="stylesheet/scss" lang="scss">
.app-container {
  // margin: 20px;
  font-size: 15px;
}
.modifyDialog{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .el-form-item{
        width: 33%;
    }
}
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
::-webkit-scrollbar{
    height: 20px !important;
}
</style>