index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295
  1. <template>
  2. <div class="p-2">
  3. <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
  4. <div class="mb-[10px]" v-show="showSearch">
  5. <el-card shadow="hover">
  6. <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="68px">
  7. <el-form-item label="菜单名称" prop="menuName">
  8. <el-input v-model="queryParams.deptName" placeholder="请输入部门名称" clearable @keyup.enter="handleQuery" />
  9. </el-form-item>
  10. <el-form-item label="状态" prop="status">
  11. <el-select v-model="queryParams.status" placeholder="部门状态" clearable>
  12. <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" />
  13. </el-select>
  14. </el-form-item>
  15. <el-form-item>
  16. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  17. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  18. </el-form-item>
  19. </el-form>
  20. </el-card>
  21. </div>
  22. </transition>
  23. <el-card shadow="hover">
  24. <template #header>
  25. <el-row :gutter="10">
  26. <el-col :span="1.5">
  27. <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['system:dept:add']">新增 </el-button>
  28. </el-col>
  29. <el-col :span="1.5">
  30. <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
  31. </el-col>
  32. <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
  33. </el-row>
  34. </template>
  35. <el-table
  36. v-loading="loading"
  37. :data="deptList"
  38. row-key="deptId"
  39. :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  40. ref="deptTableRef"
  41. :default-expand-all="isExpandAll"
  42. >
  43. <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
  44. <el-table-column prop="orderNum" align="center" label="排序" width="200"></el-table-column>
  45. <el-table-column prop="status" align="center" label="状态" width="100">
  46. <template #default="scope">
  47. <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
  48. </template>
  49. </el-table-column>
  50. <el-table-column label="创建时间" align="center" prop="createTime" width="200">
  51. <template #default="scope">
  52. <span>{{ parseTime(scope.row.createTime) }}</span>
  53. </template>
  54. </el-table-column>
  55. <el-table-column fixed="right" align="center" label="操作">
  56. <template #default="scope">
  57. <el-tooltip content="修改" placement="top">
  58. <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']" />
  59. </el-tooltip>
  60. <el-tooltip content="新增" placement="top">
  61. <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']" />
  62. </el-tooltip>
  63. <el-tooltip content="删除" placement="top">
  64. <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']" />
  65. </el-tooltip>
  66. </template>
  67. </el-table-column>
  68. </el-table>
  69. </el-card>
  70. <el-dialog :title="dialog.title" v-model="dialog.visible" destroy-on-close append-to-bod width="600px">
  71. <el-form ref="deptFormRef" :model="form" :rules="rules" label-width="80px">
  72. <el-row>
  73. <el-col :span="24" v-if="form.parentId !== 0">
  74. <el-form-item label="上级部门" prop="parentId">
  75. <el-tree-select
  76. v-model="form.parentId"
  77. :data="deptOptions"
  78. :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
  79. value-key="deptId"
  80. placeholder="选择上级部门"
  81. check-strictly
  82. />
  83. </el-form-item>
  84. </el-col>
  85. <el-col :span="12">
  86. <el-form-item label="部门名称" prop="deptName">
  87. <el-input v-model="form.deptName" placeholder="请输入部门名称" />
  88. </el-form-item>
  89. </el-col>
  90. <el-col :span="12">
  91. <el-form-item label="显示排序" prop="orderNum">
  92. <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
  93. </el-form-item>
  94. </el-col>
  95. <el-col :span="12">
  96. <el-form-item label="负责人" prop="leader">
  97. <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" />
  98. </el-form-item>
  99. </el-col>
  100. <el-col :span="12">
  101. <el-form-item label="联系电话" prop="phone">
  102. <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" />
  103. </el-form-item>
  104. </el-col>
  105. <el-col :span="12">
  106. <el-form-item label="邮箱" prop="email">
  107. <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
  108. </el-form-item>
  109. </el-col>
  110. <el-col :span="12">
  111. <el-form-item label="部门状态">
  112. <el-radio-group v-model="form.status">
  113. <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
  114. }}</el-radio>
  115. </el-radio-group>
  116. </el-form-item>
  117. </el-col>
  118. </el-row>
  119. </el-form>
  120. <template #footer>
  121. <div class="dialog-footer">
  122. <el-button type="primary" @click="submitForm">确 定</el-button>
  123. <el-button @click="cancel">取 消</el-button>
  124. </div>
  125. </template>
  126. </el-dialog>
  127. </div>
  128. </template>
  129. <script setup name="Dept" lang="ts">
  130. import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"
  131. import { ComponentInternalInstance } from 'vue';
  132. import { DeptForm, DeptQuery, DeptVO } from "@/api/system/dept/types";
  133. import { ElTable, ElForm } from "element-plus";
  134. interface DeptOptionsType {
  135. deptId: number | string;
  136. deptName: string;
  137. children: DeptOptionsType[];
  138. }
  139. const { proxy } = getCurrentInstance() as ComponentInternalInstance
  140. const { sys_normal_disable } = toRefs<any>(proxy?.useDict("sys_normal_disable"));
  141. const deptList = ref<DeptVO[]>([])
  142. const loading = ref(true)
  143. const showSearch = ref(true)
  144. const deptOptions = ref<DeptOptionsType[]>([])
  145. const isExpandAll = ref(true)
  146. const dialog = reactive<DialogOption>({
  147. visible: false,
  148. title: ''
  149. });
  150. const deptTableRef = ref(ElTable);
  151. const queryFormRef = ref(ElForm);
  152. const deptFormRef = ref(ElForm);
  153. const initFormData: DeptForm = {
  154. deptId: undefined,
  155. parentId: undefined,
  156. deptName: undefined,
  157. orderNum: 0,
  158. leader: undefined,
  159. phone: undefined,
  160. email: undefined,
  161. status: "0"
  162. }
  163. const data = reactive<PageData<DeptForm, DeptQuery>>({
  164. form: {...initFormData},
  165. queryParams: {
  166. pageNum: 1,
  167. pageSize: 10,
  168. deptName: undefined,
  169. status: undefined
  170. },
  171. rules: {
  172. parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
  173. deptName: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
  174. orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }],
  175. email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
  176. phone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
  177. },
  178. })
  179. const { queryParams, form, rules } = toRefs<PageData<DeptForm, DeptQuery>>(data)
  180. /** 查询菜单列表 */
  181. const getList = async () => {
  182. loading.value = true;
  183. const res = await listDept(queryParams.value);
  184. const data = proxy?.handleTree<DeptVO>(res.data, "deptId")
  185. if (data) {
  186. deptList.value = data
  187. }
  188. loading.value = false
  189. }
  190. /** 取消按钮 */
  191. const cancel = () => {
  192. reset()
  193. dialog.visible = false
  194. }
  195. /** 表单重置 */
  196. const reset = () => {
  197. form.value = {...initFormData};
  198. deptFormRef.value.resetFields();
  199. }
  200. /** 搜索按钮操作 */
  201. const handleQuery = () => {
  202. getList();
  203. }
  204. /** 重置按钮操作 */
  205. const resetQuery = () => {
  206. queryFormRef.value.resetFields();
  207. handleQuery()
  208. }
  209. /** 新增按钮操作 */
  210. const handleAdd = (row?: DeptVO) => {
  211. listDept().then(res => {
  212. const data = proxy?.handleTree<DeptOptionsType>(res.data, "deptId");
  213. if (data) {
  214. deptOptions.value = data
  215. dialog.visible = true;
  216. dialog.title = "添加部门";
  217. nextTick(() => {
  218. reset();
  219. if (row && row.deptId) {
  220. form.value.parentId = row?.deptId;
  221. }
  222. })
  223. }
  224. })
  225. }
  226. /** 展开/折叠操作 */
  227. const handleToggleExpandAll = () => {
  228. isExpandAll.value = !isExpandAll.value;
  229. toggleExpandAll(deptList.value, isExpandAll.value)
  230. }
  231. /** 展开/折叠所有 */
  232. const toggleExpandAll = (data: DeptVO[], status: boolean) => {
  233. data.forEach((item) => {
  234. deptTableRef.value.toggleRowExpansion(item, status)
  235. if(item.children && item.children.length > 0) toggleExpandAll(item.children, status)
  236. })
  237. }
  238. /** 修改按钮操作 */
  239. const handleUpdate = async (row: DeptVO) => {
  240. const res = await getDept(row.deptId);
  241. dialog.visible = true;
  242. dialog.title = "修改部门";
  243. nextTick(async () => {
  244. reset();
  245. form.value = res.data
  246. const response = await listDeptExcludeChild(row.deptId);
  247. const data = proxy?.handleTree<DeptOptionsType>(response.data, "deptId")
  248. if (data) {
  249. deptOptions.value = data;
  250. if (data.length === 0) {
  251. const noResultsOptions: DeptOptionsType = { deptId: res.data.parentId, deptName: res.data.parentName, children: [] };
  252. deptOptions.value.push(noResultsOptions);
  253. }
  254. }
  255. })
  256. }
  257. /** 提交按钮 */
  258. const submitForm = () => {
  259. deptFormRef.value.validate(async (valid: boolean) => {
  260. if (valid) {
  261. form.value.deptId ? await updateDept(form.value) : await addDept(form.value);
  262. proxy?.$modal.msgSuccess("操作成功");
  263. dialog.visible = false;
  264. getList();
  265. }
  266. })
  267. }
  268. /** 删除按钮操作 */
  269. const handleDelete = async (row: DeptVO) => {
  270. await proxy?.$modal.confirm('是否确认删除名称为"' + row.deptName + '"的数据项?');
  271. await delDept(row.deptId);
  272. getList();
  273. proxy?.$modal.msgSuccess("删除成功");
  274. }
  275. onMounted(() => {
  276. getList();
  277. });
  278. </script>