wszhyWx/src/views/vrcode/suyuanBatch.vue

<template>
    <div class="plantingPlan ">
        <div class="page-content">
            <div class="table-title">
                <img src="../../assets/vrcodeImg/suyuanBatch.png" alt="" />
                溯源批次
            </div>
            <div class="flex-view">
                <div class="vrcode-btn save-btn" @click="addModel = true">
                    <img src="../../assets/img/add.png" alt="">新增溯源批次
                </div>
                <div class="vrcode-input-sel">
                    <el-dropdown @command="handleCommand">
                        <div class="el-dropdown-link">
                            <input v-model="TypeSel" type="text" class="input-input" placeholder="请选择操作员">
                            <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
                                item.name
                            }}</el-dropdown-item>

                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="vrcode-table">
                <div class="vrcode-table-view table-view">
                    <el-table :data="tableData" :row-class-name="tableRowClassName" height="520" style="width: 100%">
                        <el-table-column prop="id" label="序号"></el-table-column>
                        <el-table-column prop="data0" label="名称"></el-table-column>
                        <el-table-column prop="data1" label="温室清洁时间"></el-table-column>
                        <el-table-column prop="data3" label="消毒杀菌时间"></el-table-column>
                        <el-table-column prop="data2" label="清洁方式"></el-table-column>
                        <el-table-column prop="data5" label="使用药剂">
                            <template slot-scope="scope">
                                <div class="table-flex">
                                    <div class="isOpen" :class="scope.row.data5 ? 'open-green' : 'open-red'">
                                        {{ scope.row.data5 ? '已公开' : '未公开' }}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="530">
                            <template slot-scope="scope">

                                <div class="vrcode-table-btn">
                                    <div class="vrcode-btn blue-btn" @click="addModel = true">
                                        编辑
                                    </div>
                                    <div class="vrcode-btn save-btn" @click="addModel = true">
                                        二维码
                                    </div>
                                    <div class="vrcode-btn cancle-btn" @click="addModel = true">
                                        合格证二维码
                                    </div>
                                    <div class="vrcode-btn blue-btn" @click="addModel = true">
                                        预览
                                    </div>
                                    <div class="vrcode-btn red-btn">
                                        删除
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <el-dialog title="提示" top="5vh" :visible.sync="addModel" width="80%" class="vrcode-model"
            :append-to-body="true">
            <div class="vrcode-model-title">
                {{ edit ? '查看' : '新增' }}新增溯源批次
            </div>
            <div class="vrcode-content">

                <div class="vrcode-view">
                    <div class="vrcode-title">种植信息</div>
                    <div class="vrcode-input-sel">
                        <div class="title">温室名称</div>
                        <el-dropdown @command="handleCommand">
                            <div class="el-dropdown-link">
                                <input v-model="TypeSel" type="text" class="input-input" placeholder="请选择温室号">
                                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
                                    item.name
                                    }}</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="vrcode-input-seltime">
                        <div class="title">播种日期</div>
                        <div class="seltime">
                            <el-date-picker v-model="value1" type="date" placeholder="请选择播种日期">
                            </el-date-picker>
                            <div class="seltime-icon">
                                <img src="../../assets/img/vrcode-time.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="vrcode-input-seltime">
                        <div class="title">播种日期</div>
                        <div class="seltime">
                            <el-date-picker v-model="value1" type="date" placeholder="请选择播种日期">
                            </el-date-picker>
                            <div class="seltime-icon">
                                <img src="../../assets/img/vrcode-time.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="vrcode-input-sel">
                        <div class="title">作物名称</div>
                        <el-dropdown @command="handleCommand">
                            <div class="el-dropdown-link">
                                <input v-model="TypeSel" type="text" class="input-input" placeholder="请选择作物名称">
                                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
                                    item.name
                                    }}</el-dropdown-item>

                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </div>
                <div class="vrcode-view">
                    <div class="vrcode-title">播种信息</div>
                    
                    <div class="vrcode-input-sel">
                        <div class="title">操作员</div>
                        <el-dropdown @command="handleCommand">
                            <div class="el-dropdown-link">
                                <input v-model="TypeSel" type="text" class="input-input" placeholder="请选择操作人员名称">
                                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="item, index in typeSelList" :key="index" :command="index">{{
                                    item.name
                                    }}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                  
                </div>
                <div class="vrcode-view">
                    <div class="vrcode-title">播种信息</div>
                    <div class="vrcode-input w-50">
                        <div class="input-title">灌溉水处理</div>
                        <input type="text" placeholder="请输入灌溉水处理">
                    </div>
                    <div class="vrcode-input w-50">
                        <div class="input-title">水草的处理</div>
                        <input type="text" placeholder="请输入水草的处理">
                    </div>
                    <div class="vrcode-input w-50">
                        <div class="input-title">水草的处理</div>
                        <input type="text" placeholder="请输入水草的处理">
                    </div>
                    <div class="vrcode-input w-50">
                        <div class="input-title">水草的处理</div>
                        <input type="text" placeholder="请输入水草的处理">
                    </div>
                    <div class="vrcode-input w-50">
                        <div class="input-title">水草的处理</div>
                        <input type="text" placeholder="请输入水草的处理">
                    </div>
                    <div class="vrcode-input w-50">
                        <div class="input-title">水草的处理</div>
                        <input type="text" placeholder="请输入水草的处理">
                    </div>
                    <div class="vrcode-input w-100">
                        <div class="input-title">水草的处理</div>
                        <input type="text" placeholder="请输入水草的处理">
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <div class="vrcode-btn save-btn" @click="addModel = false">保存</div>
                <div class="vrcode-btn cancle-btn" @click="addModel = false">取消</div>
            </span>
        </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
            edit: false,
            addModel: false,
            tableData: [{
                id: '13', data0: '西红柿种植',
                data1: '施肥',
                data2: '刘永强',
                data3: '',
                data4: '2023-04-05 21:00',
                data5: true,
            }, {}, {}, {}, {}, {}, {}, {},],
            typeSelList: [{ name: '1#平均空气温度', value: 1, },
            { name: '2#平均空气温度', value: 2, },
            { name: '1#空气温度', value: 3, },
            { name: '2#空气温度', value: 4, },
            { name: '3#空气温度', value: 5, },
            { name: '4#空气温度', value: 6, },
            { name: '5#空气温度', value: 7, },
            { name: '6#空气温度', value: 8, },
            { name: '7#空气温度', value: 9, },
            { name: '8#空气温度', value: 10, },],
            TypeSel: '',
            value1: '',
            modelisTrue: false,
            imgList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
        }
    },
    mounted() { },
    methods: {
        handleCommand() {

        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 1) {
                return 'warning-row';
            } else if (rowIndex % 2 == 0) {
                return 'success-row';
            }
            return '';
        },
        delImage(index) {
            console.log('删除图片', index);
            this.imgList.splice(index, 1);
        },
        handleImageChange(event) {
            const files = event.target.files;
            if (files.length > 0) {
                for (let i = 0; i < files.length; i++) {
                    const reader = new FileReader();

                    reader.onload = (e) => {
                        this.imgList.push(e.target.result);
                    };

                    reader.readAsDataURL(files[i]);
                }
                this.$refs.fileInput.value = '';
            } else {
                console.log(null);
            }

        }
    },

}
</script>
<style lang="scss"></style>