crmeb/admin/src/views/sys/dept/index.vue

<template>
  <div class="divBox">
    <el-card class="box-card">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="部门名称" prop="deptName">
        <el-input
          v-model="queryParams.deptName"
          placeholder="请输入部门名称"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="部门状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['autogencode:sysdept:save']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-sort"
          size="mini"
          @click="toggleExpandAll"
        >展开/折叠</el-button>
      </el-col>
    </el-row>

    <el-table
      v-if="refreshTable"
      v-loading="listLoading"
      :data="deptList"
      row-key="deptId"
      :default-expand-all="isExpandAll"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :header-cell-style=" {fontWeight:'bold'}"
      style="width: 100%;">
      <el-table-column
        prop="deptName"
        label="部门名称"
        :show-overflow-tooltip="true"
        width="160"
      ></el-table-column>
      <el-table-column prop="orderNum" label="显示顺序" width="100" align="center"></el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 0 ? '' : 'danger'">
            {{ scope.row.status == 0 ? '正常' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="isWorkArea" label="是否作业区" width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.isWorkArea ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleUpdate(scope.row.deptId)">{{ '修改' }}</el-button>
          <el-button v-hasPermi="['autogencode:sysdept:delete']" type="text" size="small" @click="handleDelete(scope.row.deptId)" style="color: #f56c6c;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表单弹窗, 新增数据和修改数据 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </div>
</template>

<script>
  import AddOrUpdate from './sysdept-add-and-update'
  import * as api from '@/api/sysdept.js'
  import {Debounce} from '@/utils/validate'
  export default {
    name: "Dept",
    components: {
      AddOrUpdate
    },
    data () {
      return {
        // 遮罩层
        listLoading: true,
        // 显示搜索条件
        showSearch: true,
        // 部门表格树数据
        deptList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 是否展开，默认全部折叠
        isExpandAll: false,
        // 重新渲染表格状态
        refreshTable: true,
        // 查询参数
        queryParams: {
          deptName: '',
          status: ''
        },
        // 请求到的部门数据
        deptDataList: [],
        // 分页信息
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        // 表单弹窗
        addOrUpdateVisible: false,
        // 状态选项
        statusOptions: [
          {value: 0, label: '正常'},
          {value: 1, label: '停用'}
        ]
      }
    },
    activated () {
      this.getDataList()
    },
    mounted() {
      // 确保页面加载时自动查询
      this.getDataList()
    },
    methods: {
      /** 查询部门列表 */
      getDataList() {
        this.listLoading = true;
        // 传递搜索参数到后端
        api.deptTreeSelect(this.queryParams).then(res => {
          this.deptList = res;
          this.listLoading = false;
        }).catch(e => {
          this.listLoading = false;
          this.$message.error('获取部门列表失败');
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getDataList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          deptName: '',
          status: ''
        };
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(null);
        });
      },
      /** 展开/折叠操作 */
      toggleExpandAll() {
        this.refreshTable = false;
        this.isExpandAll = !this.isExpandAll;
        this.$nextTick(() => {
          this.refreshTable = true;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(id) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      },
      /** 删除按钮操作 */
      handleDelete(id) {
        this.$confirm(`确定删除部门吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 调用删除API
          api.sysdeptDeleteApi([id]).then(res => {
            this.$message.success('删除成功');
            this.getDataList();
          });
        }).catch(() => {});
      }
    }
  }
</script>