docking-vue/src/views/user_management/department/index.vue

<template>
  <div>
    <app-search
      v-model="searchForm"
      label-width="80px"
      @submit="resetPagination"
    >
      <el-col :span="6">
        <el-form-item label="名称" prop="name">
          <el-input v-model="searchForm.name" placeholder="请输入名称" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="部门级别" prop="level">
          <el-select v-model="searchForm.level" placeholder="请选择部门级别">
            <el-option label="公司级" value="1" />
            <el-option label="部门级" value="2" />
            <el-option label="小组级" value="3" />
          </el-select>
        </el-form-item>
      </el-col>
    </app-search>
    <app-table
      v-model:pagination="pagination"
      :data="list"
      @get-data="fnGetData"
    >
      <el-table-column label="名称">
        <template #default="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="
              router.push({
                path: '/user_management/department',
                query: {
                  parentName: row.name,
                  parentId: row.departmentId,
                },
              })
            "
          >
            {{ row.name }} <el-icon><arrow-right /></el-icon>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="部门级别">
        <template #default="{ row }">
          <span v-if="row.level === '1'">公司级</span>
          <span v-if="row.level === '2'">部门级</span>
          <span v-if="row.level === '3'">小组级</span>
        </template>
      </el-table-column>
      <el-table-column prop="headman" label="主管领导" />
      <el-table-column label="操作" width="120">
        <template #default="{ row }">
          <el-button
            type="primary"
            text
            link
            @click="fnAddOrEdit(row.departmentId, 'edit')"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            text
            link
            @click="fnDelete(row.departmentId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <template #button>
        <el-button type="primary" @click="fnAddOrEdit('', 'add')">
          新增
        </el-button>
        <el-button
          v-if="parentId !== '0'"
          :icon="ArrowLeft"
          @click="router.back()"
        >
          返回
        </el-button>
      </template>
    </app-table>
    <add
      v-model:form="addOrEditDialog.form"
      v-model:visible="addOrEditDialog.visible"
      :parent-name="parentName"
      :parent-id="parentId"
      :type="addOrEditDialog.type"
      @get-data="resetPagination"
    />
  </div>
</template>

<script setup>
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { nextTick, ref } from "vue";
import {
  getDepartmentList,
  setDepartmentDelete,
  getDepartmentView,
} from "@/request/user_management.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { debounce } from "throttle-debounce";
import AppTable from "@/components/table/index.vue";
import AppSearch from "@/components/search/index.vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import Add from "./components/add.vue";
import useListData from "@/assets/js/useListData.js";

const router = useRouter();
const route = useRoute();
const parentIdDefault = "0";
const parentNameDefault = "（无）此项为顶级菜单";
const parentId = ref(route.query.parentId || parentIdDefault);
const parentName = ref(route.query.parentName || parentNameDefault);
const { list, pagination, searchForm, getData, resetPagination } = useListData(
  getDepartmentList,
  {
    params: { parentId: parentId.value },
  }
);
const addOrEditDialog = ref({
  visible: false,
  type: "",
  form: {
    name: "",
    level: "",
    headman: "",
    phone: "",
    orderBy: "",
  },
});
const fnGetData = () => {
  getData({ parentId: parentId.value });
};
onBeforeRouteUpdate((to) => {
  parentId.value = to.query.parentId || parentIdDefault;
  parentName.value = to.query.parentName || parentNameDefault;
  fnGetData();
});
const fnDelete = debounce(
  1000,
  async (departmentId) => {
    await ElMessageBox.confirm(`确定要删除吗？`, {
      type: "warning",
    });
    await setDepartmentDelete({ departmentId });
    ElMessage.success("删除成功");
    await resetPagination();
  },
  { atBegin: true }
);
const fnAddOrEdit = async (departmentId, type) => {
  addOrEditDialog.value.visible = true;
  addOrEditDialog.value.type = type;
  await nextTick();
  if (type === "edit") {
    const resData = await getDepartmentView({ departmentId });
    addOrEditDialog.value.form = resData.department;
  }
};
</script>

<style scoped></style>