index.vue

<template>
  <div>
    <el-row class="mt30">
      <el-col :span="4" class="ml50">
        <el-input  v-model="groupname" placeholder="部门名称"></el-input>
      </el-col>
      <el-col :span="4" class="ml50">
        <el-button type="primary" icon="el-icon-search"  @click="searchGroup()">查询</el-button>
        <el-button type="primary" icon="el-icon-plus"  @click="addgroupdialog=true">创建</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table :data="grtableData" style="width:98%;margin:20px auto;" class="mt20">
        <el-table-column type="index" width="">
        </el-table-column>
        <el-table-column prop="name" label="部门名称" width="">
        </el-table-column>
        <el-table-column label="创建时间" width="">
          <template slot-scope="scope">
            <span>{{showLocalTime(scope.row.create_dt)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="">
          <template slot-scope="scope">
            <div class="tab-btn-box">
              <span class="table-btn dengers" size="" @click="DeleteGroup(scope.$index, scope.row)">删除部门</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination class="grouppage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page.sync="currentPage" :page-size="page.limit" layout="total,prev, pager, next, jumper" :total="page.total">
      </el-pagination>
    </el-row>
    <div class="creategrop-box">
      <el-dialog title="添加部门" :visible.sync="addgroupdialog" width="30%">
        <div>
          <el-form ref="addgroupform" :model="addform" label-width="80px">
            <el-form-item label="部门名称" prop="name" :rules="[{ required: true, message: '部门不能为空'}]">
              <el-input v-model="addform.name"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addgroupdialog = false">取 消</el-button>
          <el-button type="primary" @click="addGroup">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        groupname: "",
        grtableData: [],
        currentPage: 1,
        addressData: [],
        curEditData: "",
        page: {
          total: 0,
          offset: 0,
          limit: 20
        },
        dialogVisible: false,
        addgroupdialog: false,
        form: {
          name: "",
          org: "",
          worktime: ""
        },
        addform: {
          name: ""
        },
        editData: "",
        gridData: []
      };
    },
    methods: {
      //搜索
      searchGroup() {
        this.getGroups();
      },
      /**删除部门 */
      DeleteGroup(index, row) {
        var data = {
          name: row.name,
          is_active: false
        };
        var Vthis = this;
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.axios
              .post(this.API.auth.delugrps(row.ugrp_unid), data)
              .then(function (response) {
                Vthis.$message({
                  type: "info",
                  message: "删除成功!"
                });
                Vthis.getGroups();
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      handleSizeChange(val) {},
      handleCurrentChange(val) {
        this.currentPage = val;
        this.page.offset = (val - 1) * this.page.limit;
      },


      addGroup() {
        this.$refs["addgroupform"].validate(valid => {
          if (valid) {
            var Vthis = this;
            this.axios
              .post(this.API.auth.ugrps, this.addform)
              .then(function (response) {
                Vthis.$message({
                  type: "info",
                  message: "创建成功!"
                });
                Vthis.addgroupdialog = false;
                Vthis.getGroups();
                Vthis.$refs["addgroupform"].resetFields();
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },

      getGroups() {
        var Vthis = this;
        this.axios
          .get(this.API.auth.ugrps, {
            params: {
              offset: Vthis.offset,
              limit: Vthis.page.limit,
              name__like: Vthis.groupname,
              is_active: true
            }
          })
          .then(function (response) {
            Vthis.grtableData = response.data.list_data;
            Vthis.page.total = response.data.total_num;
          });
      },
    },
    created() {
      this.getGroups();
    }
  };
</script>
<style lang="stylus" scoped>
  .grouppage {
    float: right;
    margin-right: 20px;
  }

  .g-btn {
    width: 100%;
  }
</style>