master

分支 (3)

管理

管理

master

jjfzcl

msh

elm-forest
/
加药记录.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #id {
            position: relative;
        }

        .d1 {
            margin-top: 15px;
            margin-bottom: 15px;
            height: 30px;
        }

        img {
            position: absolute;
            top: 20px;
        }

        .s1 {
            position: absolute;
            top: 17px;
            left: 30px;
            font-size: 18px;
            padding-left: 5px;
        }

        .b1 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 120px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .b2 {
            position: absolute;
            border: 1px #dcdfe6 solid;
            top: 10px;
            right: 20px;
            padding: 7px 18px;
            font-size: 14px;
            border-radius: 5px;
            background-color: #fff;
        }

        .el-dropdown {
            vertical-align: top;
        }

        .el-dropdown+.el-dropdown {
            margin-left: 15px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .block {
            position: absolute;
            top: 440px;
            right: 0px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="d1">
            <img src="文件-名册.png" width="20" height="20">
            <span class="s1">加药记录</span>
            <button class="b1">新增</button>
            <button class="b2">批量导入</button>
        </div>
        <template>
            <el-table :data="tableData" border style="width: 100%" :header-cell-style="
            {
                background:'#f5f7fa',
            }">
                <el-table-column prop="num" label="序号" width="40" align="center">
                </el-table-column>
                <el-table-column prop="month" label="月份" width="150" align="center">
                </el-table-column>
                <el-table-column prop="name" label="药剂名称" width="150" align="center">
                </el-table-column>
                <el-table-column prop="time" label="入库时间" width="120" align="center">
                </el-table-column>
                <el-table-column prop="number" label="入库量" width="100" align="center">
                </el-table-column>
                <el-table-column prop="use" label="月消耗" width="100" align="center">
                </el-table-column>
                <el-table-column prop="have" label="月底库存" width="100" align="center">
                </el-table-column>
                <el-table-column prop="people" label="检查人" width="80" align="center">
                </el-table-column>
                <el-table-column prop="bz" label="备注" width="80" align="center">
                </el-table-column>

                <el-table-column fixed="right" label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="dialog = true" type="text" size="small">查看</el-button>
                        <el-button @click="dialog = true" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer title="加药记录表" :before-close="handleClose" :visible.sync="dialog" direction="ttb"
                custom-class="demo-drawer" ref="drawer" style="width: 600px;margin: auto;font-size: 18px;" size="80%">
                <div class="demo-drawer__content">
                    <el-form ref="form" :model="form" label-width="120px">

                        <div>
                            <p class="p1">加药记录表</p>
                            <el-form-item label="药剂名称">
                                <el-input v-model="form.name" placeholder="请输入药剂名称"></el-input>
                            </el-form-item>
                            <el-form-item label="入库时间">
                                <el-input v-model="form.num" placeholder="请输入入库时间"></el-input>
                            </el-form-item>
                            <el-form-item label="入库量">
                                <el-input v-model="form.id" placeholder="请输入入库量"></el-input>
                            </el-form-item>
                            <el-form-item label="月消耗">
                                <el-input v-model="form.id" placeholder="请输入入库量"></el-input>
                            </el-form-item>
                            <el-form-item label="月底库存">
                                <el-input v-model="form.id" placeholder="请输入入库量"></el-input>
                            </el-form-item>
                            <el-form-item label="检查人">
                                <el-input v-model="form.edu" placeholder="请输入检查人"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input v-model="form.hde" placeholder="请输入备注"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">取消</el-button>
                                <el-button>确定</el-button>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
            </el-drawer>

            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[5, 10, 20, 30]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="50">
                </el-pagination>
            </div>
        </template>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var Main = {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            handleClose(done) {
                if (this.loading) {
                    return;
                }
                this.$confirm('确定要提交表单吗？')
                    .then(_ => {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            done();
                            // 动画关闭需要一定的时间
                            setTimeout(() => {
                                this.loading = false;
                            }, 400);
                        }, 2000);
                    })
                    .catch(_ => { });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            }
        },

        data() {
            return {
                tableData: [{
                    num: 1,
                    month: '2021.11.30',
                    name: '阻垢剂',
                    time: ' ',
                    number: ' ',
                    use: '870kg',
                    have: '937kg',
                    people: '涂冲',
                    bz: ' ',

                }, {
                    num: 2,
                    month: '2021.11.30',
                    name: '阻垢剂',
                    time: ' ',
                    number: ' ',
                    use: '870kg',
                    have: '937kg',
                    people: '涂冲',
                    bz: ' ',
                }, {
                    num: 3,
                    month: '2021.11.30',
                    name: '阻垢剂',
                    time: ' ',
                    number: ' ',
                    use: '870kg',
                    have: '937kg',
                    people: '涂冲',
                    bz: ' ',
                }, {
                    num: 4,
                    month: '2021.11.30',
                    name: '阻垢剂',
                    time: ' ',
                    number: ' ',
                    use: '870kg',
                    have: '937kg',
                    people: '涂冲',
                    bz: ' ',
                }],
                table: false,
                dialog: false,
                loading: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '80px',
                timer: null,
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>

</html>