src/plugins/modal.js

@@ -59,6 +59,33 @@ export default {
       type: "warning",
     })
   },
+  // 删除确认窗体（UI规范）
+  delConfirm(title) {
+    return MessageBox.confirm("确定删除后不可恢复该数据",  `是否确认删除 【${title}】 数据项？`, {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: "warning",
+      showClose:false
+    })
+  },
+  // 关闭页面确认窗体（UI规范）
+  closeConfirm() {
+    return MessageBox.confirm("确定关闭将不保留编辑内容", "是否确认要关闭页面？", {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: "warning",
+      showClose:false
+    })
+  },
+  // 确认窗体（UI规范）
+  newConfirm(content,title) {
+    return MessageBox.confirm(content, title, {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: "warning",
+      showClose:false
+    })
+  },
   // 提交内容
   prompt(content) {
     return MessageBox.prompt(content, "系统提示", {

src/styles/index.scss

@@ -201,3 +201,34 @@ input, textarea{
 .el-form--label-top .el-form-item__label {
   padding: 0;
 }
+
+// 确认弹窗(UI样式修改和原样式有区别--start)
+.el-message-box__status+.el-message-box__message {
+  padding-left: 58px;
+}
+.el-message-box {
+  width: auto;
+  min-width: 424px;
+  .el-message-box__header {
+    padding:32px 32px 0px 72px;
+    .el-message-box__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: rgba(0,0,0,0.85);
+    }
+  }
+  .el-message-box__content {
+    padding-bottom: 24px;
+    .el-message-box__status {
+      top:-72%;
+      left:20px;
+      font-size:21px !important
+    }
+  }
+  .el-message-box__btns {
+    padding-right: 32px;
+    padding-bottom:14px;
+  }
+}
+
+// 确认弹窗(UI样式修改和原样式有区别--end)

src/views/system/dept/index.vue

@@ -1,54 +1,126 @@
 <template>
 	<div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+		<el-form
+			:model="queryParams"
+			ref="queryForm"
+			size="small"
+			:inline="true"
+			v-show="showSearch">
 			<el-form-item label="部门名称" prop="name">
-        <el-input v-model="queryParams.name" placeholder="请输入部门名称" clearable @keyup.enter.native="handleQuery"/>
+				<el-input
+					v-model="queryParams.name"
+					placeholder="请输入部门名称"
+					clearable
+					@keyup.enter.native="handleQuery" />
 			</el-form-item>
 			<el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable>
-          <el-option v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="dict.label" :value="parseInt(dict.value)"/>
+				<el-select
+					v-model="queryParams.status"
+					placeholder="菜单状态"
+					clearable>
+					<el-option
+						v-for="dict in statusDictDatas"
+						:key="parseInt(dict.value)"
+						:label="dict.label"
+						:value="parseInt(dict.value)" />
 				</el-select>
 			</el-form-item>
 			<el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+				<el-button type="primary" icon="el-icon-search" @click="handleQuery">
+					搜索
+				</el-button>
 				<el-button icon="el-icon-refresh" @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="['system:dept:create']">新增</el-button>
+				<el-button
+					type="primary"
+					plain
+					icon="el-icon-plus"
+					size="mini"
+					@click="handleAdd"
+					v-hasPermi="['system:dept:create']">
+					新增
+				</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-button
+					type="info"
+					plain
+					icon="el-icon-sort"
+					size="mini"
+					@click="toggleExpandAll">
+					展开/折叠
+				</el-button>
 			</el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+			<right-toolbar
+				:showSearch.sync="showSearch"
+				@queryTable="getList"></right-toolbar>
 		</el-row>
 
-    <el-table v-if="refreshTable" v-loading="loading" :data="deptList" row-key="id" :default-expand-all="isExpandAll"
-              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-      <el-table-column prop="name" label="部门名称" width="260"></el-table-column>
-      <el-table-column prop="leader" label="负责人" :formatter="userNicknameFormat" width="120"/>
+		<el-table
+			v-if="refreshTable"
+			v-loading="loading"
+			:data="deptList"
+			row-key="id"
+			:default-expand-all="isExpandAll"
+			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
+			<el-table-column
+				prop="name"
+				label="部门名称"
+				width="260"></el-table-column>
+			<el-table-column
+				prop="leader"
+				label="负责人"
+				:formatter="userNicknameFormat"
+				width="120" />
 			<el-table-column prop="sort" label="排序" width="200"></el-table-column>
 			<el-table-column prop="status" label="状态" width="100">
 				<template v-slot="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status"/>
+					<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
 				</template>
 			</el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
+			<el-table-column
+				label="创建时间"
+				align="center"
+				prop="createTime"
+				width="200">
 				<template v-slot="scope">
 					<span>{{ parseTime(scope.row.createTime) }}</span>
 				</template>
 			</el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+			<el-table-column
+				label="操作"
+				align="center"
+				class-name="small-padding fixed-width">
 				<template v-slot="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['system:dept:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)"
-                     v-hasPermi="['system:dept:create']">新增</el-button>
-          <el-button v-if="scope.row.parentId !== 0" size="mini" type="text" icon="el-icon-delete"
-                     @click="handleDelete(scope.row)" v-hasPermi="['system:dept:delete']">删除</el-button>
+					<el-button
+						size="mini"
+						type="text"
+						icon="el-icon-edit"
+						@click="handleUpdate(scope.row)"
+						v-hasPermi="['system:dept:update']">
+						修改
+					</el-button>
+					<el-button
+						size="mini"
+						type="text"
+						icon="el-icon-plus"
+						@click="handleAdd(scope.row)"
+						v-hasPermi="['system:dept:create']">
+						新增
+					</el-button>
+					<el-button
+						v-if="scope.row.parentId !== 0"
+						size="mini"
+						type="text"
+						icon="el-icon-delete"
+						@click="handleDelete(scope.row)"
+						v-hasPermi="['system:dept:delete']">
+						删除
+					</el-button>
 				</template>
 			</el-table-column>
 		</el-table>
@@ -59,7 +131,11 @@
 				<el-row>
 					<el-col :span="24">
 						<el-form-item label="上级部门" prop="parentId">
-              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" />
+							<treeselect
+								v-model="form.parentId"
+								:options="deptOptions"
+								:normalizer="normalizer"
+								placeholder="选择上级部门" />
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">
@@ -69,31 +145,52 @@
 					</el-col>
 					<el-col :span="12">
 						<el-form-item label="显示排序" prop="sort">
-              <el-input-number v-model="form.sort" controls-position="right" :min="0" />
+							<el-input-number
+								v-model="form.sort"
+								controls-position="right"
+								:min="0" />
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">
 						<el-form-item label="负责人" prop="leaderUserId">
-              <el-select v-model="form.leaderUserId" placeholder="请输入负责人" clearable style="width: 100%">
-                <el-option v-for="item in users" :key="parseInt(item.id)" :label="item.nickname" :value="parseInt(item.id)" />
+							<el-select
+								v-model="form.leaderUserId"
+								placeholder="请输入负责人"
+								clearable
+								style="width: 100%">
+								<el-option
+									v-for="item in users"
+									:key="parseInt(item.id)"
+									:label="item.nickname"
+									:value="parseInt(item.id)" />
 							</el-select>
 						</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-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-input
+								v-model="form.email"
+								placeholder="请输入邮箱"
+								maxlength="50" />
 						</el-form-item>
 					</el-col>
 					<el-col :span="12">
 						<el-form-item label="部门状态" prop="status">
 							<el-radio-group v-model="form.status">
-                <el-radio v-for="dict in statusDictDatas" :key="parseInt(dict.value)" :label="parseInt(dict.value)">
-                  {{dict.label}}</el-radio>
+								<el-radio
+									v-for="dict in statusDictDatas"
+									:key="parseInt(dict.value)"
+									:label="parseInt(dict.value)">
+									{{ dict.label }}
+								</el-radio>
 							</el-radio-group>
 						</el-form-item>
 					</el-col>
@@ -108,16 +205,22 @@
 </template>
 
 <script>
-import { listDept, getDept, delDept, addDept, updateDept } from "@/api/system/dept";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import {
+	listDept,
+	getDept,
+	delDept,
+	addDept,
+	updateDept,
+} from '@/api/system/dept';
+import Treeselect from '@riophae/vue-treeselect';
+import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 
-import {CommonStatusEnum} from '@/utils/constants'
-import { getDictDatas, DICT_TYPE } from '@/utils/dict'
-import {listSimpleUsers} from "@/api/system/user";
+import { CommonStatusEnum } from '@/utils/constants';
+import { getDictDatas, DICT_TYPE } from '@/utils/dict';
+import { listSimpleUsers } from '@/api/system/user';
 
 export default {
-  name: "SystemDept",
+	name: 'SystemDept',
 	components: { Treeselect },
 	data() {
 		return {
@@ -132,7 +235,7 @@ export default {
 			// 用户下拉列表
 			users: [],
 			// 弹出层标题
-      title: "",
+			title: '',
 			// 是否显示弹出层
 			open: false,
 			// 是否展开，默认全部展开
@@ -144,47 +247,46 @@ export default {
 			// 查询参数
 			queryParams: {
 				name: undefined,
-        status: undefined
+				status: undefined,
 			},
 			// 表单参数
 			form: {},
 			// 表单校验
 			rules: {
 				name: [
-          { required: true, message: "部门名称不能为空", trigger: "blur" }
+					{ required: true, message: '部门名称不能为空', trigger: 'blur' },
 				],
 				sort: [
-          { required: true, message: "显示排序不能为空", trigger: "blur" }
+					{ required: true, message: '显示排序不能为空', trigger: 'blur' },
 				],
 				email: [
 					{
-            type: "email",
+						type: 'email',
 						message: "'请输入正确的邮箱地址",
-            trigger: ["blur", "change"]
-          }
+						trigger: ['blur', 'change'],
+					},
 				],
 				phone: [
 					{
-            pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
-            message: "请输入正确的手机号码",
-            trigger: "blur"
-          }
+						pattern:
+							/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
+						message: '请输入正确的手机号码',
+						trigger: 'blur',
+					},
 				],
-        status: [
-          { required: true, message: "状态不能为空", trigger: "blur" }
-        ]
+				status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
 			},
 
 			// 枚举
 			CommonStatusEnum: CommonStatusEnum,
 			// 数据字典
-      statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS)
+			statusDictDatas: getDictDatas(DICT_TYPE.COMMON_STATUS),
 		};
 	},
 	created() {
 		this.getList();
 		// 获得用户列表
-    listSimpleUsers().then(response => {
+		listSimpleUsers().then((response) => {
 			this.users = response.data;
 		});
 	},
@@ -192,8 +294,8 @@ export default {
 		/** 查询部门列表 */
 		getList() {
 			this.loading = true;
-      listDept(this.queryParams).then(response => {
-        this.deptList = this.handleTree(response.data, "id");
+			listDept(this.queryParams).then((response) => {
+				this.deptList = this.handleTree(response.data, 'id');
 				this.loading = false;
 			});
 		},
@@ -205,7 +307,7 @@ export default {
 			return {
 				id: node.id,
 				label: node.name,
-        children: node.children
+				children: node.children,
 			};
 		},
 		// 用户昵称展示
@@ -237,7 +339,7 @@ export default {
 				email: undefined,
 				status: CommonStatusEnum.ENABLE,
 			};
-      this.resetForm("form");
+			this.resetForm('form');
 		},
 		/** 搜索按钮操作 */
 		handleQuery() {
@@ -245,7 +347,7 @@ export default {
 		},
 		/** 重置按钮操作 */
 		resetQuery() {
-      this.resetForm("queryForm");
+			this.resetForm('queryForm');
 			this.handleQuery();
 		},
 		/** 新增按钮操作 */
@@ -255,9 +357,9 @@ export default {
 				this.form.parentId = row.id;
 			}
 			this.open = true;
-      this.title = "添加部门";
-      listDept().then(response => {
-	        this.deptOptions = this.handleTree(response.data, "id");
+			this.title = '添加部门';
+			listDept().then((response) => {
+				this.deptOptions = this.handleTree(response.data, 'id');
 			});
 		},
 		/** 展开/折叠操作 */
@@ -271,31 +373,32 @@ export default {
 		/** 修改按钮操作 */
 		handleUpdate(row) {
 			this.reset();
-      getDept(row.id).then(response => {
+			getDept(row.id).then((response) => {
 				this.form = response.data;
-        if (this.form.parentId === 0) { // 无父部门时，标记为 undefined，避免展示为 Unknown
+				if (this.form.parentId === 0) {
+					// 无父部门时，标记为 undefined，避免展示为 Unknown
 					this.form.parentId = undefined;
 				}
 				this.open = true;
-        this.title = "修改部门";
+				this.title = '修改部门';
 			});
-      listDept(row.id).then(response => {
-	        this.deptOptions = this.handleTree(response.data, "id");
+			listDept(row.id).then((response) => {
+				this.deptOptions = this.handleTree(response.data, 'id');
 			});
 		},
 		/** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
+		submitForm: function () {
+			this.$refs['form'].validate((valid) => {
 				if (valid) {
 					if (this.form.id !== undefined) {
-            updateDept(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
+						updateDept(this.form).then((response) => {
+							this.$modal.msgSuccess('修改成功');
 							this.open = false;
 							this.getList();
 						});
 					} else {
-            addDept(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
+						addDept(this.form).then((response) => {
+							this.$modal.msgSuccess('新增成功');
 							this.open = false;
 							this.getList();
 						});
@@ -305,13 +408,18 @@ export default {
 		},
 		/** 删除按钮操作 */
 		handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function() {
+			this.$modal
+				.delConfirm(row.name)
+				.closeConfirm()
+				.then(function () {
 					return delDept(row.id);
-        }).then(() => {
+				})
+				.then(() => {
 					this.getList();
-          this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
-    }
-  }
+					this.$modal.msgSuccess('删除成功');
+				})
+				.catch(() => {});
+		},
+	},
 };
 </script>