yf_tjq/yfbch/src/components/insectName/insectName.vue

<template>
  <div class="insectName-box">
    <el-container>
      <!-- 页头 -->
      <el-header>
        <el-page-header title @back="goBack" content="昆虫名称设置"></el-page-header>

        <!-- 添加框 -->
        <el-button type="text" @click="dialogFormVisible = true">
          <img src="../../assets/imageOne/23.png" alt class="insectName-img" />
        </el-button>

        <el-dialog title="添加昆虫名称" :visible.sync="dialogFormVisible" :before-close="handleCloseA">
          <el-form :model="form">
            <el-form-item label :label-width="formLabelWidth">
              <el-input v-model.trim="form.newName" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false,cancel()">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false,add()">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 添加框 -->

        <!-- 编辑框 -->
        <el-dialog title="编辑昆虫名称" :visible.sync="dialogFormVisible1" :before-close="handleCloseA">
          <el-form :model="form">
            <el-form-item label :label-width="formLabelWidth">
              <el-input
                v-model.trim="form.newName"
                ref="input1"
                autocomplete="off"
                :placeholder="inputText"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false,cancel()">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible1 = false,bianjijian()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 编辑框 -->

        <!-- 删除框 -->
        <el-dialog title="提示" :visible.sync="dialogVisibleshan" :before-close="handleCloseshanchu">
          <span>确定删除此条信息吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleshan = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisibleshan = false,shanchuque()">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 删除框 -->
      </el-header>

      <!-- 页面主内容 -->
      <el-main
        :style="'height:' + fullHeight + 'px'"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        style="width: 100%"
      >
        <ul class="insectName-ul">
          <li
            class="insectName-li"
            v-if="item.insect_name !== null && item.insect_name !== ''"
            v-for="(item,index) in this.redata"
            :key="index"
          >
            <img src="../../assets/imageOne/22.png" alt class="insectName-li-img" />
            <div class="insectName-li-div">
              <div
                class="insectName-li-text"
                @click="dianji($event,index,item.id,item.insect_name)"
              >{{item.insect_name}}</div>
            </div>
          </li>
        </ul>

        <!-- 编辑删除添加框 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" :before-close="handleClose">
          <div class="tanchuk1" @click="tianjia()">添加</div>
          <div class="tanchuk1" @click="dialogFormVisible1 = true,bianji()">编辑</div>
          <div class="tanchuk1" @click="dialogVisibleshan = true,shanchu()">删除</div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" class="xuxiaobtn">取 消</el-button>
          </span>
        </el-dialog>
        <!-- 编辑删除添加框 -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "insectName",
  data() {
    return {
      form: {
        newName: "" //添加中input的双向绑定
      },
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisibleshan: false, //删除
      formLabelWidth: "120px",
      dialogTableVisible: false,
      dialogFormVisible1: false, //编辑
      inputText: "",
      current: "", //点击list的下标
      fullHeight: document.documentElement.clientHeight,
      redata: {}, //后端获取的数据
      loading: true
    };
  },
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    this.get_boderHeight();
  },
  created() {
    let _this = this;
    //进入页面就获取后端数据
    let postData = _this.$qs.parse({
      insect_type: localStorage.getItem('kunchongInsect'), //昆虫种类
    })
    _this
      .$axios({
        method: "post",
        url: "bigservers/check_insect_leve",
        data: postData,
        headers: {
          "Content-Type": "application/json"
        }
      })
      .then(res => {
        _this.redata = res.data;
        _this.loading = false;
      })
      .catch(error => {
        alert("失败");
        console.log(error);
      });
  },

  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    //点击返回系统设置页面
    goBack() {
      let _this = this;
      localStorage.removeItem("kunNames");
      localStorage.removeItem("kunNameID");
      _this.$router.push("/system");
      location.reload();
    },

    //编辑框
    handleClose(done) {
      let _this = this;
      _this.dialogVisible = false;
    },

    //删除框
    handleCloseshanchu(done) {
      let _this = this;
      _this.dialogVisibleshan = false;
    },

    add() {
      let _this = this;
      let postData = _this.$qs.parse({
        insect_name: _this.form.newName,
        insect_type: localStorage.getItem('kunchongInsect'), //昆虫种类
      });
      if (_this.form.newName !== "") {
        _this
          .$axios({
            method: "post",
            url: "bigservers/addr_insect_type",
            data: postData,
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            if (res.data !== 0) {
              this.$message({
                type: "success",
                message: "添加成功!"
              });
              const timer = setInterval(() => {
                location.reload();
              }, 1000);
            } else {
              this.$message({
                type: "warning",
                message: "数据已存在!"
              });
            }
            _this.cancel();
          })
          .catch(error => {
            this.$message({
              showClose: true,
              message: "失败",
              type: "error"
            });
          });
      } else {
        this.$message({
          type: "warning",
          message: "不能为空!"
        });
      }
    },

    //点击list跳出弹框
    dianji(e, index, id, insect_name) {
      let _this = this;
      _this.current = index;
      if (e.target.className === "insectName-li-text") {
        let el = e.currentTarget;
        let data = el.innerHTML;
        let dataID = id;
        (_this.dialogVisible = true), (_this.inputText = data);
        let dataNames = insect_name;
        localStorage.setItem("kunNames", dataNames);
        localStorage.setItem("kunNameID", dataID);
      }
    },

    //点击小弹框中的添加
    tianjia() {
      let _this = this;
      _this.dialogFormVisible = true;
      _this.dialogVisible = false;
    },

    //点击小弹框中的编辑
    bianji() {
      let _this = this;
      _this.dialogVisible = false;
    },

    //点击小弹框中的删除
    shanchu() {
      let _this = this;
      _this.dialogVisible = false;
    },

    //删除确定事件
    shanchuque() {
      let _this = this;
      let postData = _this.$qs.parse({
        insect_type: localStorage.getItem('kunchongInsect'), //昆虫种类
        id: localStorage.kunNameID,
        insect_name: localStorage.kunNames, //昆虫名称
        ret: "del"
      });
      _this
        .$axios({
          method: "post",
          url: "bigservers/modify_insect_leve",
          data: postData,
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(res => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          const timer = setInterval(() => {
            location.reload();
          }, 1000);
        })
        .catch(error => {
          this.$message({
            type: "error",
            message: "删除失败!"
          });
        });
    },

    //编辑确定事件
    bianjijian() {
      let _this = this;
      let postData = _this.$qs.parse({
        insect_type: localStorage.getItem('kunchongInsect'), //昆虫种类
        id: localStorage.kunNameID,
        insect_name: _this.form.newName, //用户编辑时填写的数据
        ret: "edit"
      });
      if (_this.form.newName) {
        _this
          .$axios({
            method: "post",
            url: "bigservers/modify_insect_leve",
            data: postData,
            headers: {
              "Content-Type": "application/json"
            }
          })
          .then(res => {
            if (res.data !== 0) {
              this.$message({
                type: "success",
                message: "编辑成功!"
              });
              const timer = setInterval(() => {
                location.reload();
              }, 1000);
            } else {
              this.$message({
                type: "warning",
                message: "数据已存在!"
              });
            }
            _this.cancel();
          })
          .catch(error => {
            this.$message({
              type: "error",
              message: "失败!"
            });
          });
      } else {
        this.$message({
          type: "warning",
          message: "不能为空!"
        });
      }
    },

    //取消清空input框中数据
    cancel() {
      let _this = this;
      _this.form.newName = "";
    },

    //弹出框右上角关闭按钮回调
    handleCloseA() {
      let _this = this;
      _this.dialogFormVisible1 = false;
      _this.dialogFormVisible = false;
      _this.cancel();
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/style/bus.scss";
@import "../../assets/style/scss/insectName.scss";
</style>