wszhyWx/src/views/vrcode/plantingPlan.vue

<template>
  <div class="plantingPlan">
    <div class="page-content">
      <div class="table-title">
        <img src="../../assets/img/plan.png" alt="" />
        种植计划
      </div>
      <div class="flex-view">
        <div class="btn green" @click="addModel = true,edit=false"><img src="../../assets/img/add.png" alt="">新增种植计划</div>
      </div>
      <div class="flex-view border-none">
        <div class="plan-view" v-for="item, index in 10">
          <img class="plan-view-left" src="../../assets/img/image.png" alt="">
          <div class="plan-view-right">
            <div class="name">西红柿温室种植</div>
            <div class="vrcode-btn blue-btn"  @click="addModel = true,edit=true"><img src="../../assets/img/look.png" alt="">查看</div>
            <el-popconfirm
  title="这是一段内容确定删除吗？"
>
<div class="vrcode-btn red-btn" slot="reference"><img src="../../assets/img/del.png" alt="">删除</div>

</el-popconfirm>
           
          </div>
        </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-input">
            <div class="input-title">新增种植计划</div>
            <input type="text" placeholder="请输入种植计划全称">
          </div>
          <div class="vrcode-input">
            <div class="input-title">种植计划简称</div>
            <input type="text" placeholder="请输入种植计划简称">
          </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 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-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">
            <div class="input-title">品种介绍</div>
            <input type="text" placeholder="请输入品种介绍">
          </div>
          <div class="vrcode-input">
            <div class="input-title">种植规模(亩)</div>
            <input type="text" placeholder="请输入种植规模">
          </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-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-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">
            <div class="input-title">种子来源</div>
            <input type="text" placeholder="请输入种子来源">
          </div>
          <div class="vrcode-input">
            <div class="input-title">数量(粒)</div>
            <input type="text" placeholder="请输入种子数量">
          </div>
          <div class="vrcode-input">
            <div class="input-title">价格</div>
            <input type="text" placeholder="请输入价格">
          </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-selimage">
            <div class="title">实物图片</div>
            <div class="sel-image-view">
              <div class="sel-img sel-div" v-for="item, index in imgList" :key="index">
                <el-image :src="item"></el-image>
                <div class="del-img" @click="delImage(index)">
                  <img src="../../assets/img/del-image.png" alt="">
                </div>
              </div>
              <label for="sel-img">
                <div class="sel-image-sel sel-div" v-if="imgList.length < 6">
                  <img src="../../assets/img/add-image.png" alt="">
                </div>
              </label>
              <input ref="fileInput" type="file" multiple id="sel-img" accept="image/*" @change="handleImageChange" />
            </div>
          </div>
        </div>
        <div class="vrcode-view">
          <div class="vrcode-title">播种信息</div>
          <div class="vrcode-input">
            <div class="input-title">灌溉水处理</div>
            <input type="text" placeholder="请输入灌溉水处理">
          </div>
          <div class="vrcode-input">
            <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,
      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: '',
      imgList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
    }
  },
  mounted() { },
  methods: {
    handleCommand() {

    },
    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>