feat: 系统列表禁用启用状态优化

src/api/system/app.ts

@@ -6,7 +6,8 @@ const api = {
 	page: '/sys/app/page',
 	create: '/sys/app/create',
 	update: '/sys/app/update',
-	delete: '/sys/app/delete'
+	delete: '/sys/app/delete',
+	status: 'sys/app/status'
 }
 /**
  * 应用管理 - 列表
@@ -40,8 +41,16 @@ function appDeleteApi(data: any): AxiosPromise {
 		data
 	})
 }
+
+function appStatusApi(data: any): AxiosPromise {
+	return request({
+		url: api.status + `/${data.id}?status=${data.status}`,
+		method: 'post'
+	})
+}
 export default {
 	appPageApi,
 	appAddOrEditSaveApi,
-	appDeleteApi
+	appDeleteApi,
+	appStatusApi
 }

src/api/system/configure.ts

@@ -6,7 +6,8 @@ const api = {
 	page: '/sys/configure/page',
 	create: '/sys/configure/create',
 	update: '/sys/configure/update',
-	delete: '/sys/configure/delete'
+	delete: '/sys/configure/delete',
+	status: 'sys/configure/status'
 }
 /**
  * 扩展配置 - 列表
@@ -40,8 +41,17 @@ function configureDeleteApi(data: any): AxiosPromise {
 		data
 	})
 }
+
+function configureStatusApi(data: any): AxiosPromise {
+	return request({
+		url: api.status + `/${data.id}?status=${data.status}`,
+		method: 'post'
+	})
+}
+
 export default {
 	configurePageApi,
 	configureAddOrEditSaveApi,
-	configureDeleteApi
+	configureDeleteApi,
+	configureStatusApi
 }

src/api/system/department.ts

@@ -7,7 +7,8 @@ const api = {
 	create: '/sys/department/create',
 	update: '/sys/department/update',
 	delete: '/sys/department/delete',
-	listAll: '/sys/department/list-all'
+	listAll: '/sys/department/list-all',
+	status: 'sys/department/status'
 }
 /**
  * 部门管理 - 列表
@@ -46,9 +47,17 @@ function departmentListAllApi(): AxiosPromise {
 	return request({ url: api.listAll, method: 'get' })
 }
 
+function departmentStatusApi(data: any): AxiosPromise {
+	return request({
+		url: api.status + `/${data.id}?status=${data.status}`,
+		method: 'post'
+	})
+}
+
 export default {
 	departmentPageApi,
 	departmentAddOrEditSaveApi,
 	departmentDeleteApi,
-	departmentListAllApi
+	departmentListAllApi,
+	departmentStatusApi
 }

src/api/system/dict.ts

@@ -8,7 +8,8 @@ const api = {
 	listSelectOption: '/sys/dict/list-select-options',
 	create: '/sys/dict/create',
 	update: '/sys/dict/update',
-	delete: '/sys/dict/delete'
+	delete: '/sys/dict/delete',
+	status: 'sys/dict/status'
 }
 /**
  * 字典管理  - 列表
@@ -57,10 +58,19 @@ function dictDeleteApi(data: any): AxiosPromise {
 		data
 	})
 }
+
+function dictStatusApi(data: any): AxiosPromise {
+	return request({
+		url: api.status + `/${data.id}?status=${data.status}`,
+		method: 'post'
+	})
+}
+
 export default {
 	dictPageApi,
 	dictListParentApi,
 	dictListSelectOptionApi,
 	dictAddOrEditSaveApi,
-	dictDeleteApi
+	dictDeleteApi,
+	dictStatusApi
 }

src/api/system/post.ts

@@ -6,7 +6,8 @@ const api = {
 	page: '/sys/post/page',
 	create: '/sys/post/create',
 	update: '/sys/post/update',
-	delete: '/sys/post/delete'
+	delete: '/sys/post/delete',
+	status: 'sys/post/status'
 }
 /**
  * 岗位管理 - 列表
@@ -40,8 +41,17 @@ function postDeleteApi(data: any): AxiosPromise {
 		data
 	})
 }
+
+function postStatusApi(data: any): AxiosPromise {
+	return request({
+		url: api.status + `/${data.id}?status=${data.status}`,
+		method: 'post'
+	})
+}
+
 export default {
 	postPageApi,
 	postAddOrEditSaveApi,
-	postDeleteApi
+	postDeleteApi,
+	postStatusApi
 }

src/api/system/role.ts

@@ -10,7 +10,8 @@ const api = {
 	update: '/sys/role/update',
 	delete: '/sys/role/delete',
 	resourceSet: '/sys/role/resource-set',
-	resourceIds: '/sys/role/resource-ids'
+	resourceIds: '/sys/role/resource-ids',
+	status: 'sys/role/status'
 }
 
 const role = {
@@ -25,6 +26,7 @@ const role = {
 	roleSaveApi: (data): AxiosPromise => request({ url: data.id ? api.update : api.create, method: 'post', data }),
 	roleDeleteApi: (data): AxiosPromise => request({ url: api.delete, method: 'post', data }),
 	roleResourceSetApi: (data): AxiosPromise => request({ url: api.resourceSet, method: 'post', data }),
-	roleResourceIdsApi: (id): AxiosPromise => request({ url: api.resourceIds + '?id=' + id, method: 'get' })
+	roleResourceIdsApi: (id): AxiosPromise => request({ url: api.resourceIds + '?id=' + id, method: 'get' }),
+	roleStatusApi: (data: any): AxiosPromise => request({ url: api.status + `/${data.id}?status=${data.status}`, method: 'post' })
 }
 export default role

src/api/system/user.ts

@@ -10,7 +10,8 @@ const api = {
 	resetPassword: '/sys/user/reset-password',
 	assignRoles: '/sys/user/assign-roles',
 	assignDepartment: '/sys/user/assign-departments',
-	roleIds: '/sys/user/rel-ids'
+	roleIds: '/sys/user/rel-ids',
+	status: 'sys/user/status'
 }
 
 /**
@@ -94,6 +95,13 @@ export function userGetApi(id: string): AxiosPromise {
 	})
 }
 
+export function userStatusApi(data: any): AxiosPromise {
+	return request({
+		url: api.status + `/${data.id}?status=${data.status}`,
+		method: 'post'
+	})
+}
+
 const user = {
 	userPageApi,
 	userAddOrEditSaveApi,
@@ -102,6 +110,7 @@ const user = {
 	userAssignRolesApi,
 	userRoleIdsApi,
 	userGetApi,
-	userAssignDepartmentApi
+	userAssignDepartmentApi,
+	userStatusApi
 }
 export default user

src/views/configure/index.vue

@@ -27,8 +27,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="scope">
@@ -55,11 +54,11 @@
 </template>
 <script lang="tsx" setup>
 import app from '@/api/system/app'
+import configure from '@/api/system/configure'
 import { computed, nextTick, ref, watch } from 'vue'
-import {ElMessage, ElMessageBox, ElTree} from 'element-plus'
+import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
 
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
@@ -204,6 +203,7 @@ const columns = [
 		label: '操作',
 		width: 100,
 		fixed: 'right',
+		align: 'center',
 		slots: {
 			default: 'actionSlot'
 		}
@@ -286,6 +286,22 @@ const addHandler = () => {
 	visible.value = true
 }
 
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await configure.configureStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	queryList()
 })

src/views/setting/app/index.vue

@@ -27,8 +27,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="{ row }">
@@ -59,7 +58,6 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
 
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
@@ -135,22 +133,22 @@ const forms = ref([
 		itemType: 'input',
 		placeholder: '请输入名称'
 	},
-  {
-    prop: 'status',
-    label: '状态：',
-    itemType: 'select',
-    placeholder: '请选择状态',
-    options: [
-      {
-        label: '禁用',
-        value: 0
-      },
-      {
-        label: '正常',
-        value: 1
-      }
-    ]
-  }
+	{
+		prop: 'status',
+		label: '状态：',
+		itemType: 'select',
+		placeholder: '请选择状态',
+		options: [
+			{
+				label: '禁用',
+				value: 0
+			},
+			{
+				label: '正常',
+				value: 1
+			}
+		]
+	}
 ])
 
 // table列表数据请求
@@ -318,6 +316,22 @@ const addHandler = () => {
 	visible.value = true
 }
 
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await app.appStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	queryList()
 })

src/views/setting/configure/index.vue

@@ -27,8 +27,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="{ row }">
@@ -59,7 +58,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
+// import StatusIndicator from '@/components/StatusIndicator'
 
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
@@ -289,6 +288,22 @@ const addHandler = () => {
 	visible.value = true
 }
 
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await configure.configureStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	queryList()
 })

src/views/setting/department/index.vue

@@ -27,8 +27,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="{ row }">
@@ -59,7 +58,6 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
 import user from '@/api/system/user'
 
 const visible = ref(false) // 弹窗显示隐藏
@@ -213,7 +211,7 @@ const columns = [
 	{
 		prop: 'status',
 		label: '状态',
-		minWidth: 50,
+		minWidth: 80,
 		slots: {
 			default: 'statusSlot'
 		}
@@ -360,6 +358,23 @@ const addHandler = () => {
 	activeData.value = {}
 	visible.value = true
 }
+
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await department.departmentStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	queryList()
 	getUserList()

src/views/setting/dict/index.vue

@@ -73,8 +73,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="{ row }">
@@ -105,7 +104,6 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElTree, ElMessageBox } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete, Edit } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
 
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
@@ -404,6 +402,22 @@ const dicEdit = data => {
 	table_edit(data)
 }
 
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await dict.dictStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	getGroup()
 	queryList()

src/views/setting/post/index.vue

@@ -27,8 +27,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="{ row }">
@@ -59,7 +58,6 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
 
 const visible = ref(false) // 弹窗显示隐藏
 const isCreate = ref(true)
@@ -309,6 +307,22 @@ const addHandler = () => {
 	visible.value = true
 }
 
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await post.postStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	queryList()
 })

src/views/setting/role/index.vue

@@ -30,8 +30,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="{ row }">
@@ -70,7 +69,6 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
 import Permission from './permission.vue'
 
 const visible = ref(false) // 弹窗显示隐藏
@@ -314,6 +312,22 @@ const addHandler = () => {
 	visible.value = true
 }
 
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await role.roleStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	queryList()
 })

src/views/setting/user/index.vue

@@ -59,8 +59,7 @@
 				</template>
 
 				<template #statusSlot="scope">
-					<status-indicator v-if="scope.row.status === 1" pulse type="success"></status-indicator>
-					<status-indicator v-else pulse type="danger"></status-indicator>
+					<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="() => handleStatusChange(scope.row)"></el-switch>
 				</template>
 
 				<template #actionSlot="{ row }">
@@ -110,7 +109,6 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { ElMessage, ElMessageBox, ElTree } from 'element-plus'
 import { useTablePage } from '@/hooks/useTablePage'
 import { Plus, Delete } from '@element-plus/icons-vue'
-import StatusIndicator from '@/components/StatusIndicator'
 import AssignRoleDialog from './assign-role.vue'
 import ResetPwd from './reset-pwd.vue'
 
@@ -325,7 +323,7 @@ const columns = [
 	{
 		prop: 'status',
 		label: '状态',
-		minWidth: 60,
+		minWidth: 80,
 		slots: {
 			default: 'statusSlot'
 		}
@@ -470,6 +468,22 @@ const chooseThing = item => {
 	typeModel.value = item
 }
 
+const handleStatusChange = (row: any) => {
+	// 状态 0、禁用 1、正常
+	const status = row.status
+	let text = Number(row.status) === 0 ? '禁用' : '启用'
+	ElMessageBox.confirm('请确认是否' + text + '当前数据?', '提示', { type: 'warning' })
+		.then(async () => {
+			await user.userStatusApi({ id: row.id, status }) // 接口请求
+			ElMessage.success(`${text}成功`)
+		})
+		.catch(status => {
+			if (status == 'cancel') {
+				row.status = Number(row.status) === 0 ? 1 : 0
+			}
+		})
+}
+
 nextTick(() => {
 	getGroup()
 	getRolesList()