goelia-ai-admin/src/views/auth/org/orgIndex.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="filter-container-lt">
        <el-input
          placeholder="组织名称"
          class="filter-item"
          style="width: 300px;"
          clearable
          v-model="listQuery.searchKey"
          @keyup.enter.native="handleFilter"
        />
        <el-button
          v-waves
          type="primary"
          class="filter-item"
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
      </div>
      <div class="filter-container-rt">
        <el-button
          v-waves
          type="primary"
          class="filter-item"
          icon="el-icon-circle-plus-outline"
          style="margin-left: 10px;"
          @click="handleCreate"
          >新建</el-button
        >
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="index" label="序号" align="center" width="120" />
      <el-table-column label="id" align="center" width="200" prop="id" />

      <el-table-column
        label="组织名称"
        min-width="100"
        align="center"
        prop="name"
      />

      <el-table-column
        label="组织分类"
        align="center"
        width="180"
        prop="category"
      >
        <template slot-scope="scope">
          {{ getValueByKey(scope.row.category, orgCategory) }}
        </template>
      </el-table-column>
      <el-table-column
        label="排序"
        align="center"
        width="150"
        prop="sortCode"
      />
      <el-table-column
        label="创建时间"
        align="center"
        width="150"
        prop="createTime"
      />
      <el-table-column
        label="更新时间"
        align="center"
        width="150"
        prop="updateTime"
      />

      <el-table-column fixed="right" label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            circle
            title="编辑"
            @click="handleUpdate(scope.row)"
          />

          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            title="删除"
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <swPage
      v-if="total > 0"
      key="2"
      :listQuery="listQuery"
      :total="total"
      pos="btmRight"
      @retPage="retPage"
    />

    <!-- 新增或编辑对话框-->
    <addOrEditOrgDialog
      :addOrEditData="addOrEditData"
      @refreshTable="refreshData"
    />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
import addOrEditOrgDialog from "./components/org/addOrEditOrgDialog";
// import authOrgDialog from "./components/org/authOrgDialog";
import swPage from "@/views/common/swPage";
import { orgCategory } from "@/constants/index";
import { getValueByKey } from "@/utils/index";

import { fetchList, deleteOrg } from "@/api/auth/org";

export default {
  name: "orgIndex",
  components: {
    addOrEditOrgDialog,
    swPage
  },
  directives: {
    waves
  },
  data() {
    return {
      orgCategory,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        searchKey: null
      },

      addOrEditData: {
        //添加 或者 编辑 dialog 数据
        status: "create", //[create ,update]
        visible: false,
        orgData: null //选中的组织
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getValueByKey,
    refreshData() {
      this.addOrEditData.status = "create";
      this.addOrEditData.visible = false;
      this.addOrEditData.orgData = null; //选中的组织
      this.handleFilter();
    },
    getList() {
      //查询
      this.listLoading = true;
      fetchList(this.listQuery)
        .then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
    retPage() {
      //分页
      this.getList();
    },
    handleFilter() {
      //查询
      this.listQuery.page = 1;
      this.getList();
    },
    handleCreate() {
      //触发添加dialog
      //查询组织 - 角色
      this.addOrEditData.status = "create";
      this.addOrEditData.visible = true;
      this.addOrEditData.orgData = null;
    },
    handleUpdate(row) {
      //触发更新Dialog和创建的dialog共用一个dialog
      this.addOrEditData.status = "update";
      this.addOrEditData.visible = true;
      this.addOrEditData.orgData = row;
    },

    handleDelete(row) {
      //删除
      this.$confirm("删除此组织与下级组织吗？?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteOrg([{ id: row.id }]).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 3000
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1); //数值删除
        });
      });
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "@/styles/layout.scss";
</style>