MingGao_vue/minggao/src/page/forecasting/trap/bait.vue

<!--  -->
<template>
  <div class="cbdbox">
    <div class="cbdboxs_search">
      <el-input
        v-model="queryInfo.inducer_name"
        placeholder="请输入诱剂名称"
        size="mini"
      ></el-input>
      <el-button type="info" @click="search" size="mini">搜索</el-button>
      <el-button
        type="info"
        size="mini"
        @click="
          addtraptf = true;
          addtitle = '新增诱剂';
        "
        >添加诱剂</el-button
      >
    </div>
    <el-card class="box-card" style="margin-top: 15px">
      <div class="cbdboxs_table" v-loading="loading">
        <el-table
          :data="tableData"
          style="width: 100%"
          :stripe="true"
          :height="48 * 13"
        >
          <el-table-column prop="index" label="序号"> </el-table-column>
          <el-table-column
            prop="inducer_name"
            label="引诱剂名称"
          ></el-table-column>
          <!-- <el-table-column prop="expire" label="引诱剂有效天数">
          </el-table-column> -->
          <el-table-column prop="messages" label="描述"> </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <span
                style="color: #409eff; margin-right: 5px; cursor: pointer;"
                @click="alter(scope.row)"
                >编辑</span
              >
              <span
                style="color: #409eff; margin-right: 5px; cursor: pointer;"
                @click="deletes(scope.row)"
                >删除</span
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next,jumper"
        :total="total"
        :page-size="20"
        @current-change="pageChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      :title="addtitle"
      :visible.sync="addtraptf"
      width="30%"
      @close="resetForm('ruleForm')"
    >
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="诱剂名称" prop="inducer_name">
            <el-input type="text" v-model="ruleForm.inducer_name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="有效期天数" prop="expire">
            <el-input v-model="ruleForm.expire"></el-input>
          </el-form-item> -->
          <el-form-item label="诱剂描述" prop="messages">
            <el-input type="textarea" v-model="ruleForm.messages"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini"
        :disabled="releaseTF"
          >{{ releaseTF ? "发布中..." : "确 定" }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    var checklnglat = (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };
    return {
      tableData: [],
      queryInfo: {
        page: 1,
        inducer_name: "",
      },
      total: 10,
      loading: false,
      //新增诱剂
      addtraptf: false, //弹框开关
      ruleForm: {
        //验证
        inducer_name: "",
        expire: "",
        messages: "",
        inducer_id: "",
      },
      rules: {
        inducer_name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        expire: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { validator: checklnglat, trigger: "blur" },
        ],
        messages: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
      addtitle: "新增诱剂",
      releaseTF:false
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getcbdlist() {
      //获取设备列表
      this.loading = true;
      this.$axios({
        method: "POST",
        url: "/api/api_gateway?method=monitor_manage.maintain.inducer_list",
        data: this.qs.stringify({
          page_size: 20,
          page: this.queryInfo.page,
          inducer_name: this.queryInfo.inducer_name, //              非必传(string)     诱剂名称 搜索项
        }),
      }).then((res) => {
        this.loading = false;
        console.log(res.data.data);
        this.total = res.data.data.total_item;
        this.tableData = res.data.data.page_list;
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i]["index"] = i + 1;
        }
      });
    },
    search() {
      this.getcbdlist();
    },
    pageChange(e) {
      // console.log(e)
      this.queryInfo.page = e;
      this.getcbdlist();
    },
    alter(events) {
      this.addtitle = "修改诱剂";
      this.addtraptf = true;
      for (var key in this.ruleForm) {
        this.ruleForm[key] = events[key];
      }
      // console.log(this.ruleForm)
    }, //修改
    deletes(events) {
      //删除
      //删除诱捕器
      console.log(events);
      var str = "您确定删除<" + events.inducer_name + ">吗？";
      this.$confirm(str, "删除诱剂", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "/api/api_gateway?method=monitor_manage.maintain.inducer_delete",
            data: this.qs.stringify({
              inducer_id: events.inducer_id,
            }),
          }).then((res) => {
            console.log(res);
            if (res.data.data) {
              this.$message({
                showClose: true,
                message: "删除成功!",
                type: "success",
              });
              this.getcbdlist();
            } else {
              this.$message({
                showClose: true,
                message: "删除失败，" + res.data.message,
                type: "warning",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitForm(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addtitle == "修改诱剂") {
            this.releaseTF = true
            this.$axios({
              method: "POST",
              url: "/api/api_gateway?method=monitor_manage.maintain.inducer_modify",
              data: this.qs.stringify({
                inducer_id: this.ruleForm.inducer_id,
                inducer_name: this.ruleForm.inducer_name,
                expire: Number(this.ruleForm.expire),
                messages: this.ruleForm.messages,
              }),
            }).then((res) => {
              console.log(res);
              if (res.data.data) {
                this.$message({
                  showClose: true,
                  message: "修改成功！",
                  type: "success",
                });
                this.addtraptf = false;
                this.getcbdlist();
                this.$refs[formName].resetFields();
              } else {
                this.$message({
                  showClose: true,
                  message: "修改失败" + res.data.message,
                  type: "warning",
                });
              }
              this.releaseTF = false
            });
          } else if (this.addtitle == "新增诱剂") {
            this.releaseTF = true
            this.$axios({
              method: "POST",
              url: "/api/api_gateway?method=monitor_manage.maintain.inducer_add",
              data: this.qs.stringify({
                inducer_name: this.ruleForm.inducer_name,
                expire: this.ruleForm.expire,
                messages: this.ruleForm.messages,
              }),
            }).then((res) => {
              console.log(res);
              if (res.data.data) {
                this.$message({
                  showClose: true,
                  message: "新增成功！",
                  type: "success",
                });
                this.addtraptf = false;
                this.getcbdlist();
                this.$refs[formName].resetFields();
              } else {
                this.$message({
                  showClose: true,
                  message: "添加失败" + res.data.message,
                  type: "warning",
                });
              }
              this.releaseTF = false
            });
          }
        } else {
          // console.log("error submit!!");
          // this.$refs[formName].resetFields();
          return false;
        }
      });
    },
    resetForm(formName) {
      this.addtraptf = false;
      this.$refs[formName].resetFields();
      for (var key in this.ruleForm) {
        this.ruleForm[key] = "";
      }
    },
    dioclose() {
      console.log(111);
      // this.$refs[formName].resetFields();
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getcbdlist();
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.cbdboxs_search {
  display: flex;
  justify-content: flex-start;
  // height: 40px;
  /deep/.el-select {
    width: 220px;
    margin-right: 15px;
  }
  /deep/.el-input {
    width: 220px;
    margin-right: 15px;
  }
  /deep/.el-date-editor {
    width: 250px !important;
    margin-right: 15px;
  }
}
.cbdboxs_table {
  /deep/.el-table__header-wrapper {
    th {
      background-color: #fafafa;
    }
  }
}
/deep/.el-button--info {
  background-color: #409eff;
  border-color: #409eff;
}

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