MingGao_vue/minggao/src/page/systemmanger/harmfulBiology.vue

<!--  -->
<template>
  <div class="harmfulBiology_box">
    <!-- 筛选 -->
    <el-row>
      <el-col>
        <!-- 组织搜索 -->
        <div class="search_box">
          <el-input
            size="mini"
            placeholder="请输入有害生物名称"
            v-model.trim="input"
            @change="searchData"
            clearable
          >
          </el-input>
          <div class="btn_box">
            <el-button type="primary" size="mini" @click="searchData"
              >搜索</el-button
            >
            <el-button type="primary" size="mini" @click="addrHarmfulBiology"
              >添加有害生物</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
    <el-card style="margin-top: 15px">
      <!-- 列表 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        stripe
        :height="48 * 13"
        style="width: 100%"
      >
        <el-table-column prop="ind" label="序号" width="120"> </el-table-column>
        <el-table-column
          prop="pest_name"
          :show-overflow-tooltip="true"
          label="有害生物名称"
          width="280"
        >
        </el-table-column>
        <el-table-column
          prop="quarantine"
          label="检疫性有害生物(是/否)"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="alien_specie" label="是否外来物种" width="180">
        </el-table-column>
        <el-table-column
          prop="messages"
          :show-overflow-tooltip="true"
          label="备注"
          width="280"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.messages || "无" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="添加时间" width="180">
        </el-table-column>
        <el-table-column prop="modify_time" label="最后修改时间" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a class="reset" href="javascript:;" @click="actionFunc(scope.row)"
              >编辑</a
            >
            <i class="line"></i>
            <a class="delete" href="javascript:;" @click="deleteFunc(scope.row)"
              >删除</a
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-if="tableData.length !== 0"
        @current-change="changeList"
        background
        :page-size="20"
        layout="prev, pager, next, jumper"
        :current-page="page"
        :total="pageSum"
      >
      </el-pagination>
    </el-card>

    <!-- 添加、编辑弹出框 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="tltData"
      :visible.sync="addrInsectVisible"
      width="30%"
    >
      <el-form ref="form" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="有害生物名称: " prop="name">
          <el-input
            style="width: 80%"
            size="mini"
            v-model.trim="form.name"
          ></el-input>
        </el-form-item>

        <el-form-item label="检疫性有害生物: " prop="judge">
          <el-select v-model="form.judge" placeholder="请选择检疫性有害生物">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否外来入侵物种: " prop="judge2">
          <el-select v-model="form.judge2" placeholder="请选择否外来入侵物种">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注: " prop="remark">
          <el-input
            style="width: 80%"
            size="mini"
            type="textarea"
            resize="none"
            v-model.trim="form.remark"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            :disabled="submitBtn"
            size="small"
            type="primary"
            @click="submitForm"
            >{{ submitBtn == true ? "发布中..." : "发布" }}</el-button
          >
          <el-button size="small" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      fullHeight: document.documentElement.clientHeight - 116, //
      input: "", // 搜索
      page: 1, //当前页码
      pageSum: 0, // 总数量

      // 列表
      tableData: [
        {
          ind: "1",
          name: "冥蛾引诱剂",
          judge: "是",
          judge2: "是",
          remark: "这是一个有害虫类",
          addDate: "2016-05-02 10:00:00",
          endDate: "2021-01-06 10:00:00"
        }
      ],
      loading: false, // 加载

      // 编辑、 添加
      tltData: "添加有害生物",
      addrInsectVisible: false,
      form: {
        name: "", //有害生物名称
        judge: "", // 检疫性有害生物
        judge2: "", //是否外来入侵物种
        remark: "" // 备注
      },
      rules: {
        name: [
          { required: true, message: "请输入有害生物名称", trigger: "blur" }
          //   { min: 3, max: 5, message: "长度在 1 到 15 个字符", trigger: "blur" },
        ],
        judge: [
          { required: true, message: "请选检疫性有害生物", trigger: "blur" }
          //   { min: 3, max: 5, message: "长度在 1 到 15 个字符", trigger: "blur" },
        ],
        judge2: [
          {
            required: true,
            message: "请选择是否外来入侵物种",
            trigger: "blur"
          }
          //   { min: 3, max: 5, message: "长度在 1 到 30 个字符", trigger: "blur" },
        ]
        // remark: [
        //   { required: true, message: "请输入备注", trigger: "blur" },
        //   //   { min: 3, max: 5, message: "长度在 1 到 30 个字符", trigger: "blur" },
        // ],
      },
      insectObj: {},
      isClick: true, // 防止重复弹框
      submitBtn: false // 防止弹框确定按钮重复请求
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          //防止过度调用监测事件，导致卡顿
          that.timer = false;
        }, 400);
      }
    },

    addrInsectVisible(val) {
      if (val == false) {
        console.log("gsjdgsjdgjsgdjsgdghj");
        this.form.name = ""; // 有害生物名称
        this.form.judge = ""; // 检疫性有害生物
        this.form.judge2 = ""; // 是否外来入侵物种
        this.form.remark = ""; // 备注
        // this.$refs["form"].resetFields();
      }
    }
  },
  //方法集合
  methods: {
    //动态获取浏览器高度
    get_boderHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },

    // 搜索
    searchData() {
      this.harmfulBiologyList();
    },

    // 添加有害生物
    addrHarmfulBiology() {
      this.tltData = "添加有害生物";
      this.addrInsectVisible = true;
    },

    // 获取有害生物列表
    harmfulBiologyList() {
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=sysmenage.maintain.pest_list",
        data: this.qs.stringify({
          page: this.page,
          page_item: "10",
          pest_name: this.input
        })
      })
        .then(res => {
          if (res.data.data.total_item !== 0) {
            var data = res.data.data;
            this.pageSum = data.total_item;
            var list = [];
            data.page_list.forEach((item, index) => {
              item.ind = index + 1;
              list.push(item);
            });
            this.tableData = list;
          } else {
            this.tableData = [];
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
        });
    },

    // 分页
    changeList(page) {
      this.page = page;
      this.loading = true;
      this.tableData = [];
      this.harmfulBiologyList();
    },

    // 编辑
    actionFunc(data) {
      this.tltData = "编辑有害生物";
      this.insectObj = data;
      this.form = {
        name: data.pest_name, //有害生物名称
        judge: data.quarantine, // 检疫性有害生物
        judge2: data.alien_specie, //是否外来入侵物种
        remark: data.messages // 备注
      };
      this.addrInsectVisible = true;
    },

    // 删除
    deleteFunc(data) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=sysmenage.maintain.pest_delete",
            data: this.qs.stringify({
              pest_id: data.pest_id
            })
          }).then(res => {
            console.log(res.data.data);
            if (res.data.data == true) {
              this.$message({
                type: "success",
                message: "成功",
                duration: 1500
              });
            } else {
              this.$message({
                type: "error",
                message: "失败",
                duration: 1500
              });
            }
            this.harmfulBiologyList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    // 添加 - 编辑 确定
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.submitBtn = true;
          if (this.tltData == "添加有害生物") {
            var url = "/api/api_gateway?method=sysmenage.maintain.pest_add";
            var postData = this.qs.stringify({
              pest_name: this.form.name,
              alien_specie: this.form.judge2,
              quarantine: this.form.judge,
              messages: this.form.remark
            });
          } else if (this.tltData == "编辑有害生物") {
            var url = "/api/api_gateway?method=sysmenage.maintain.pest_modify";
            var postData = this.qs.stringify({
              pest_id: this.insectObj.pest_id,
              pest_name: this.form.name,
              alien_specie: this.form.judge2,
              quarantine: this.form.judge,
              messages: this.form.remark
            });
          }
          this.$axios({
            method: "POST",
            url,
            data: postData
          })
            .then(res => {
              if (res.data.message == "") {
                this.$message({
                  type: "success",
                  message: "成功",
                  duration: 1500
                });
              }

              this.$refs["form"].resetFields();
              this.addrInsectVisible = false;
              this.harmfulBiologyList();
              this.submitBtn = false;
            })
            .catch(err => {
              this.submitBtn = false;
            });
        } else {
          return false;
        }
      });
    },
    cancel() {
      this.$refs["form"].resetFields();
      this.addrInsectVisible = false;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.loading = true;
    this.harmfulBiologyList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.harmfulBiology_box {
  .search_box {
    display: flex;
    /deep/.el-input {
      width: 300px;
    }
    .btn_box {
      margin: 0 0 0 15px;
    }
  }
  a {
    text-decoration: none;
  }
  .reset {
    color: #1890ff;
  }
  .delete {
    color: #f56c6c;
  }
  .line {
    display: inline-block;
    width: 1px;
    background: rgba(0, 0, 0, 0.09);
    margin: 0 11px;
    height: 14px;
  }

  // 弹框
  /deep/.el-select {
    width: 80%;
  }
}

// 文本域样式更改
/deep/.el-textarea__inner {
  font-family:  "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
</style>