From f647709845dcb77510908a200f61dca36e9e5d6c Mon Sep 17 00:00:00 2001
From: chenll <huxin@123.com>
Date: Fri, 21 Mar 2025 19:59:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=84=E8=AD=A6=E4=BF=A1=E6=81=AF=E5=A4=84?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/system/dept/index.vue           | 393 ++++++++++++++++++
 1 file changed, 393 insertions(+)
 create mode 100644 Dkl-vue3-ui-DP/src/views/system/dept/index.vue

diff --git a/Dkl-vue3-ui-DP/src/views/system/dept/index.vue b/Dkl-vue3-ui-DP/src/views/system/dept/index.vue
new file mode 100644
index 0000000..9b0b676
--- /dev/null
+++ b/Dkl-vue3-ui-DP/src/views/system/dept/index.vue
@@ -0,0 +1,393 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+    >
+      <el-row>
+        <el-form-item label="部门名称" prop="deptName">
+          <el-input
+            v-model="queryParams.deptName"
+            placeholder="请输入部门名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="部门状态"
+            clearable
+            style="width: 200px"
+          >
+            <el-option
+              v-for="dict in sys_normal_disable"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-row>
+      <el-row class="dfjb">
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              v-hasPermi="['system:dept:add']"
+              class="circle-plus-btn"
+            >
+              新增
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="info" plain icon="Sort" @click="toggleExpandAll"
+              >展开/折叠</el-button
+            >
+          </el-col>
+        </el-row>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="RefreshLeft" class="Refresh" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <div class="talbebox">
+      <el-table
+        v-if="refreshTable"
+        v-loading="loading"
+        :data="deptList"
+        row-key="deptId"
+        :default-expand-all="isExpandAll"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column
+          prop="deptName"
+          label="部门名称"
+          width="260"
+        ></el-table-column>
+        <el-table-column
+          prop="orderNum"
+          label="排序"
+          width="200"
+        ></el-table-column>
+        <el-table-column prop="status" label="状态" width="100">
+          <template #default="scope">
+            <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createTime"
+          width="200"
+        >
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              icon="Edit"
+              @click="handleUpdate(scope.row)"
+              v-hasPermi="['system:dept:edit']"
+              >修改</el-button
+            >
+            <el-button
+              link
+              type="primary"
+              icon="Plus"
+              @click="handleAdd(scope.row)"
+              v-hasPermi="['system:dept:add']"
+              >新增</el-button
+            >
+            <el-button
+              v-if="scope.row.parentId != 0"
+              link
+              type="primary"
+              icon="Delete"
+              @click="handleDelete(scope.row)"
+              v-hasPermi="['system:dept:remove']"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 添加或修改部门对话框 -->
+    <el-dialog
+      :style="{ height: '420px' }"
+      :title="title"
+      v-model="open"
+      width="600px"
+      append-to-body
+    >
+      <el-form ref="deptRef" :model="form" :rules="rules" label-width="80px">
+        <el-row>
+          <el-col :span="24" v-if="form.parentId !== 0">
+            <el-form-item label="上级部门" prop="parentId">
+              <el-tree-select
+                v-model="form.parentId"
+                :data="deptOptions"
+                :props="{
+                  value: 'deptId',
+                  label: 'deptName',
+                  children: 'children',
+                }"
+                value-key="deptId"
+                placeholder="选择上级部门"
+                check-strictly
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门名称" prop="deptName">
+              <el-input v-model="form.deptName" placeholder="请输入部门名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="显示排序" prop="orderNum">
+              <el-input-number
+                v-model="form.orderNum"
+                controls-position="right"
+                :min="0"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="leader">
+              <el-input
+                v-model="form.leader"
+                placeholder="请输入负责人"
+                maxlength="20"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="联系电话" prop="phone">
+              <el-input
+                v-model="form.phone"
+                placeholder="请输入联系电话"
+                maxlength="11"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="邮箱" prop="email">
+              <el-input
+                v-model="form.email"
+                placeholder="请输入邮箱"
+                maxlength="50"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="部门状态">
+              <el-radio-group v-model="form.status">
+                <el-radio
+                  v-for="dict in sys_normal_disable"
+                  :key="dict.value"
+                  :value="dict.value"
+                  >{{ dict.label }}</el-radio
+                >
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Dept">
+import {
+  listDept,
+  getDept,
+  delDept,
+  addDept,
+  updateDept,
+  listDeptExcludeChild,
+} from "@/api/system/dept";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
+
+const deptList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const title = ref("");
+const deptOptions = ref([]);
+const isExpandAll = ref(true);
+const refreshTable = ref(true);
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    deptName: undefined,
+    status: undefined,
+  },
+  rules: {
+    parentId: [
+      { required: true, message: "上级部门不能为空", trigger: "blur" },
+    ],
+    deptName: [
+      { required: true, message: "部门名称不能为空", trigger: "blur" },
+    ],
+    orderNum: [
+      { required: true, message: "显示排序不能为空", trigger: "blur" },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phone: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+/** 查询部门列表 */
+function getList() {
+  loading.value = true;
+  listDept(queryParams.value).then((response) => {
+    deptList.value = proxy.handleTree(response.data, "deptId");
+    loading.value = false;
+  });
+}
+
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    deptId: undefined,
+    parentId: undefined,
+    deptName: undefined,
+    orderNum: 0,
+    leader: undefined,
+    phone: undefined,
+    email: undefined,
+    status: "0",
+  };
+  proxy.resetForm("deptRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  handleQuery();
+}
+
+/** 新增按钮操作 */
+function handleAdd(row) {
+  reset();
+  listDept().then((response) => {
+    deptOptions.value = proxy.handleTree(response.data, "deptId");
+  });
+  if (row != undefined) {
+    form.value.parentId = row.deptId;
+  }
+  open.value = true;
+  title.value = "添加部门";
+}
+
+/** 展开/折叠操作 */
+function toggleExpandAll() {
+  refreshTable.value = false;
+  isExpandAll.value = !isExpandAll.value;
+  nextTick(() => {
+    refreshTable.value = true;
+  });
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  listDeptExcludeChild(row.deptId).then((response) => {
+    deptOptions.value = proxy.handleTree(response.data, "deptId");
+  });
+  getDept(row.deptId).then((response) => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "修改部门";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["deptRef"].validate((valid) => {
+    if (valid) {
+      if (form.value.deptId != undefined) {
+        updateDept(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addDept(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  proxy.$modal
+    .confirm('是否确认删除名称为"' + row.deptName + '"的数据项?')
+    .then(function () {
+      return delDept(row.deptId);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+
+getList();
+</script>