elizebeth/src/xt_pages/device/group_main.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>

      <el-button
        size="small"
        icon="el-icon-circle-plus-outline"
        :disabled="$store.getters.xt_user.subscibe.state == 3 ? true : false"
        type="primary"
        @click="addGroupAction"
        >新增</el-button
      >
    </div>
    <div class="app-container" v-loading="loading">
      <el-row>
        <el-col :span="24">
          <el-table
            :data="groups"
            border
            :row-style="{ color: '#303133' }"
            :header-cell-style="{
              backgroundColor: 'rgb(245, 247, 250)',
              color: '#606266'
            }"
          >
            <el-table-column
              prop="name"
              label="分组名称"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button
                    :disabled="
                      $store.getters.xt_user.subscibe.state == 3 ? true : false
                    "
                    type="primary"
                    icon="el-icon-edit-outline"
                    size="small"
                    @click="modifyGroupAt(scope.row)"
                  ></el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button
                    :disabled="
                      $store.getters.xt_user.subscibe.state == 3 ? true : false
                    "
                    type="danger"
                    icon="el-icon-delete"
                    size="small"
                    @click="deleteGroupAt(scope.row)"
                  ></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <el-dialog
        width="800px"
        :title="group_form.id == 0 ? '新增分组' : '修改分组'"
        :visible.sync="showEditGroup"
      >
        <el-form
          :model="group_form"
          ref="form_group"
          :label-width="formLabelWidth"
        >
          <el-form-item
            label="分组名称 : "
            prop="name"
            :rules="[
              { required: true, message: '请输入分组名', trigger: 'blur' }
            ]"
          >
            <el-input v-model="group_form.name" style="width: 220px"></el-input>
          </el-form-item>
          <!-- <el-form-item>
                    <el-button @click="cancelModifyGroup">取 消</el-button>
                    <el-button :disabled="$store.getters.xt_user.subscibe.state==3?true:false" type="primary" @click="editGroupSubmitAction">保 存</el-button>
                </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelModifyGroup">取 消</el-button>
          <el-button
            :disabled="
              $store.getters.xt_user.subscibe.state == 3 ? true : false
            "
            type="primary"
            @click="editGroupSubmitAction"
            >保 存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getGroups,
  createGroup,
  modifyGroup,
  disableGroup
} from "@/api/device/device";
import BreadCrumb from "@/xt_pages/components/bread-crumb";

export default {
  name: "DeviceGroupMain",
  data() {
    return {
      crumbs: [
        { path: false, name: "设备管理" },
        { path: "/device/groups", name: "分组管理" }
      ],
      loading: false,
      groups: [],
      group_form: {
        id: 0,
        name: ""
      },
      showEditGroup: false,
      formLabelWidth: "90px"
    };
  },
  components: {
    BreadCrumb
  },
  created() {
    this.loading = true;
    getGroups().then(rs => {
      this.loading = false;
      var resp = rs.data;
      if (resp.state === 1) {
        this.groups.push(...resp.data.groups);
      } else {
        this.$message.error(resp.msg);
      }
    });
  },
  methods: {
    addGroupAction() {
      this.showEditGroup = true;
    },
    modifyGroupAt(row) {
      this.group_form.id = row.id;
      this.group_form.name = row.name;
      this.showEditGroup = true;
    },
    cancelModifyGroup() {
      this.group_form.id = 0;
      this.group_form.name = "";
      this.$refs.form_group.clearValidate();
      this.showEditGroup = false;
    },
    editGroupSubmitAction() {
      this.$refs.form_group.validate(valid => {
        if (valid) {
          if (this.group_form.id === 0) {
            createGroup(this.group_form.name).then(rs => {
              var resp = rs.data;
              if (resp.state === 1) {
                var newGroup = resp.data.group;
                this.groups.push(newGroup);
                this.cancelModifyGroup();
              } else {
                this.$message.error("分组名称已存在!");
              }
            });
          } else {
            modifyGroup(this.group_form.id, this.group_form.name).then(rs => {
              var resp = rs.data;
              if (resp.state === 1) {
                for (let index = 0; index < this.groups.length; index++) {
                  const group = this.groups[index];
                  if (group.id == this.group_form.id) {
                    group.name = this.group_form.name;
                    break;
                  }
                }
                this.cancelModifyGroup();
              } else {
                this.$message.error("分组名称已存在!");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    deleteGroupAt: function(row) {
      this.$confirm("删除后将无法恢复，确定继续删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        disableGroup(row.id).then(rs => {
          this.loading = false;
          var resp = rs.data;
          if (resp.state == 1) {
            var index = this.groups.indexOf(row);
            if (index > -1) {
              this.groups.splice(index, 1);
            }
          } else {
            this.$message.error(resp.msg);
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
</style>
<style>
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>