feat: 🚀 批量修改权限父级

.prettierrc.js

@@ -1,39 +1,38 @@
 // @see: https://www.prettier.cn
 
 export default {
-  // 超过最大值换行
-  printWidth: 200,
-  // 缩进字节数
-  tabWidth: 1,
-  // 使用制表符而不是空格缩进行
-  useTabs: true,
-  // 结尾不用分号(true有，false没有)
-  semi: true,
-  // 使用单引号(true单引号，false双引号)
-  singleQuote: true,
-  // 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
-  quoteProps: "as-needed",
-  // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
-  bracketSpacing: true,
-  // 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
-  trailingComma: "all",
-  // 在JSX中使用单引号而不是双引号
-  jsxSingleQuote: true,
-  //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
-  arrowParens: "avoid",
-  // 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
-  insertPragma: false,
-  // 指定要使用的解析器，不需要写文件开头的 @prettier
-  requirePragma: false,
-  // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
-  proseWrap: "preserve",
-  // 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
-  htmlWhitespaceSensitivity: "css",
-  // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
-  endOfLine: "auto",
-  // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
-  rangeStart: 0,
-  rangeEnd: Infinity,
-
-  vueIndentScriptAndStyle: false // Vue文件脚本和样式标签缩进
+	// 超过最大值换行
+	printWidth: 200,
+	// 缩进字节数
+	tabWidth: 1,
+	// 使用制表符而不是空格缩进行
+	useTabs: true,
+	// 结尾不用分号(true有，false没有)
+	semi: true,
+	// 使用单引号(true单引号，false双引号)
+	singleQuote: true,
+	// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
+	quoteProps: 'as-needed',
+	// 在对象，数组括号与文字之间加空格 "{ foo: bar }"
+	bracketSpacing: true,
+	// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
+	trailingComma: 'all',
+	// 在JSX中使用单引号而不是双引号
+	jsxSingleQuote: true,
+	//  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 ,always：不省略括号
+	arrowParens: 'avoid',
+	// 如果文件顶部已经有一个 doclock，这个选项将新建一行注释，并打上@format标记。
+	insertPragma: false,
+	// 指定要使用的解析器，不需要写文件开头的 @prettier
+	requirePragma: false,
+	// 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
+	proseWrap: 'preserve',
+	// 在html中空格是否是敏感的 "css" - 遵守CSS显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的
+	htmlWhitespaceSensitivity: 'css',
+	// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
+	endOfLine: 'auto',
+	// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
+	rangeStart: 0,
+	rangeEnd: Infinity,
+	vueIndentScriptAndStyle: false, // Vue文件脚本和样式标签缩进
 };

src/api/v1/power.ts

@@ -1,44 +1,37 @@
 import { http } from '@/api/service/request';
 import type { BaseResult, ResultTable } from '@/api/service/types';
 
-/**
- * 权限---获取权限列表
- */
+/** 权限---获取权限列表 */
 export const fetchGetPowerList = (data: any) => {
 	return http.request<BaseResult<ResultTable>>('get', `power/getPowerList/${data.currentPage}/${data.pageSize}`, { params: data });
 };
 
-/**
- * 权限---根据角色id获取权限内容
- */
+/** 权限---根据角色id获取权限内容 */
 export const fetchGetPowerListByRoleId = (data: any) => {
 	return http.request<BaseResult<object>>('get', 'rolePower/getPowerListByRoleId', { params: data });
 };
 
-/**
- * 权限---添加权限
- */
+/** 获取所有权限 */
+export const fetchGetAllPowers = () => {
+	return http.request<BaseResult<any>>('get', `power/getAllPowers`);
+};
+
+/** 权限---添加权限 */
 export const fetchAddPower = (data: any) => {
 	return http.request<BaseResult<object>>('post', 'power/addPower', { data });
 };
 
-/**
- * 权限---更新权限
- */
+/** 权限---更新权限 */
 export const fetchUpdatePower = (data: any) => {
 	return http.request<BaseResult<object>>('put', 'power/updatePower', { data });
 };
 
-/**
- * 权限---删除权限
- */
+/** 权限---更新权限 */
+export const fetchUpdateBatchByPowerWithParentId = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'power/updateBatchByPowerWithParentId', { data });
+};
+
+/** 权限---删除权限 */
 export const fetchDeletePower = (data: any) => {
 	return http.request<BaseResult<object>>('delete', 'power/deletePower', { data });
 };
-
-/**
- * 获取所有权限
- */
-export const fetchGetAllPowers = () => {
-	return http.request<BaseResult<any>>('get', `power/getAllPowers`);
-};

src/components/TableBar/src/bar.tsx

@@ -113,12 +113,12 @@ export default defineComponent({
 			dynamicColumns.value.filter(item => $t(item.label) === $t(label))[0].hide = !val;
 		}
 
-		async function onReset() {
+		function onReset() {
 			checkAll.value = true;
 			isIndeterminate.value = false;
 			dynamicColumns.value = cloneDeep(props?.columns);
 			checkColumnList = [];
-			checkColumnList = await getKeyList(cloneDeep(props?.columns), 'label');
+			checkColumnList = getKeyList(cloneDeep(props?.columns), 'label');
 			checkedColumns.value = getKeyList(cloneDeep(filterColumns), 'label');
 		}
 

src/store/system/power.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { fetchAddPower, fetchDeletePower, fetchGetAllPowers, fetchGetPowerList, fetchUpdatePower } from '@/api/v1/power';
+import { fetchAddPower, fetchDeletePower, fetchGetAllPowers, fetchGetPowerList, fetchUpdateBatchByPowerWithParentId, fetchUpdatePower } from '@/api/v1/power';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
@@ -70,6 +70,15 @@ export const usePowerStore = defineStore('powerStore', {
 			return storeMessage(result);
 		},
 
+		/**
+		 * 批量修改权限父级
+		 * @param data
+		 */
+		async updateBatchByPowerWithParentId(data: any) {
+			const result = await fetchUpdateBatchByPowerWithParentId(data);
+			return storeMessage(result);
+		},
+
 		/**
 		 * * 删除权限
 		 */

src/views/i18n/i18n-type-setting/index.vue

@@ -9,7 +9,7 @@ import { userI18nTypeStore } from '@/store/i18n/i18nType';
 import { onAdd, onDelete, onSearch, onUpdate } from '@/views/i18n/i18n-type-setting/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
-import TableIsDefaultTag from '@/components/TableBar/src/TableIsDefaultTag.vue';
+import TableIsDefaultTag from '@/components/Table/TableIsDefaultTag.vue';
 import Refresh from '@iconify-icons/ep/refresh';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';

src/views/system/adminUser/utils/types.ts

@@ -19,7 +19,7 @@ export interface FormItemProps {
 	// 状态
 	status: boolean;
 	// 部门
-	deptId: string;
+	deptIds: string[];
 }
 
 // 添加或修改表单Props

src/views/system/files/utils/columns.ts

@@ -4,16 +4,15 @@ import { $t } from '@/plugins/i18n';
 // 表格列
 export const columns: TableColumnList = [
 	{ type: 'index', index: (index: number) => index + 1 },
-	// { type: 'selection', align: 'left' },
-	{ label: $t('id'), prop: 'id' },
+	{ type: 'selection', align: 'left' },
 	// 文件的名称
-	{ label: $t('files_filename'), prop: 'filename' },
+	{ label: $t('files_filename'), prop: 'filename', width: 400 },
 	// 文件在服务器上的存储路径
 	{ label: $t('files_filepath'), prop: 'filepath' },
 	// 文件的MIME类型
-	{ label: $t('files_fileType'), prop: 'fileType' },
+	{ label: $t('files_fileType'), prop: 'fileType', width: 100 },
 	// 下载数量
-	{ label: $t('files_downloadCount'), prop: 'downloadCount' },
+	{ label: $t('files_downloadCount'), prop: 'downloadCount', width: 90 },
 	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 },
 	{ label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 },

src/views/system/files/utils/hooks.ts

@@ -1,6 +1,6 @@
 import { addDialog } from '@/components/BaseDialog/index';
 import FilesDialog from '@/views/system/files/files-dialog.vue';
-import { useFilesStore } from '@/store/system/files.ts';
+import { useFilesStore } from '@/store/system/files';
 import { h, ref } from 'vue';
 import { messageBox } from '@/utils/message';
 import type { FormItemProps } from '@/views/system/files/utils/types';

src/views/system/menuIcon/menu-icon-dialog.vue

@@ -9,6 +9,8 @@ import MenuIconSelectIconName from '@/views/system/menuIcon/menu-icon-select-ico
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
+		// icon类名
+		iconCode: undefined,
 		// icon 名称
 		iconName: undefined,
 	}),

src/views/system/power/index.vue

@@ -4,15 +4,16 @@ import { columns } from '@/views/system/power/utils/columns';
 import PureTableBar from '@/components/TableBar/src/bar';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import PureTable from '@pureadmin/table';
-import { deleteIds, onAdd, onDelete, onDeleteBatch, onSearch, onUpdate } from '@/views/system/power/utils/hooks';
+import { onAdd, onDelete, onDeleteBatch, onSearch, onUpdate, onUpdateBatchParent, powerIds } from '@/views/system/power/utils/hooks';
 import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
-import { usePowerStore } from '@/store/system/power.ts';
+import { usePowerStore } from '@/store/system/power';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import { handleTree } from '@pureadmin/utils';
+import { FormInstance } from 'element-plus';
 
 const tableRef = ref();
 const formRef = ref();
@@ -41,14 +42,14 @@ const onPageSizeChange = async (value: number) => {
  * @param rows
  */
 const onSelectionChange = (rows: Array<any>) => {
-	deleteIds.value = rows.map((row: any) => row.id);
+	powerIds.value = rows.map((row: any) => row.id);
 };
 
 /**
  * 重置表单
  * @param formEl
  */
-const resetForm = async formEl => {
+const resetForm = async (formEl: FormInstance) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	await onSearch();
@@ -87,8 +88,13 @@ onMounted(() => {
 				<!-- 添加权限按钮 -->
 				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd()"> {{ $t('add_new') }}</el-button>
 
+				<!-- 批量更新父级id -->
+				<el-button v-show="powerIds.length > 0" :icon="useRenderIcon(EditPen)" type="primary" @click="onUpdateBatchParent">
+					{{ $t('update_batches_parent') }}
+				</el-button>
+
 				<!-- 批量删除按钮 -->
-				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+				<el-button v-show="powerIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
 					{{ $t('delete_batches') }}
 				</el-button>
 			</template>

src/views/system/power/power-dialog.vue

@@ -35,9 +35,7 @@ defineExpose({ formRef });
 <template>
 	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
 		<el-form-item :label="$t('power_parentId')" prop="parentId">
-			<!--<el-cascader v-model="form.parentId" :options="datalist" :props="powerCascadeProps" class="w-full" clearable filterable show-all-levels />-->
 			<el-cascader v-model="form.parentId" :options="handleTree(powerStore.allPowerList)" :props="powerCascadeProps" class="w-full" clearable filterable show-all-levels />
-			<!--<el-input v-model="form.parentId" autocomplete="off" type="text" />-->
 		</el-form-item>
 		<el-form-item :label="$t('power_powerCode')" prop="powerCode">
 			<el-input v-model="form.powerCode" autocomplete="off" type="text" />

src/views/system/power/utils/hooks.tsx

@@ -1,14 +1,18 @@
 import { addDialog } from '@/components/BaseDialog/index';
 import PowerDialog from '@/views/system/power/power-dialog.vue';
-import { usePowerStore } from '@/store/system/power.ts';
-import { h, ref } from 'vue';
+import { usePowerStore } from '@/store/system/power';
+import { h, reactive, ref } from 'vue';
 import { messageBox } from '@/utils/message';
 import type { FormItemProps } from '@/views/system/power/utils/types';
 import { $t } from '@/plugins/i18n';
+import { handleTree } from '@pureadmin/utils';
+import { powerCascadeProps } from '@/views/system/power/utils/columns';
+import { ElCascader, ElForm, ElFormItem } from 'element-plus';
 
 export const formRef = ref();
+// 批量点击id列表
+export const powerIds = ref([]);
 const powerStore = usePowerStore();
-export const deleteIds = ref([]);
 
 /**
  * * 搜索初始化权限
@@ -110,7 +114,7 @@ export const onDelete = async (row: any) => {
  * 批量删除
  */
 export const onDeleteBatch = async () => {
-	const ids = deleteIds.value;
+	const ids = powerIds.value;
 
 	// 是否确认删除
 	const result = await messageBox({
@@ -125,3 +129,41 @@ export const onDeleteBatch = async () => {
 	await powerStore.deletePower(ids);
 	await onSearch();
 };
+
+/**
+ * * 批量更新父级id
+ */
+export const onUpdateBatchParent = async () => {
+	const formUpdateParentRef = ref();
+	const form = reactive({
+		ids: powerIds.value,
+		parentId: undefined,
+	});
+
+	await powerStore.getAllPowers();
+	addDialog({
+		title: $t('update_batches_parent'),
+		width: '30%',
+		draggable: true,
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => (
+			<ElForm ref={formUpdateParentRef} model={form}>
+				<ElFormItem rules={{ required: true, message: `${$t('input')}${$t('power_parentId')}`, trigger: 'blur' }} label={$t('menuIcon_iconName')} prop={'parentId'}>
+					<ElCascader v-model={form.parentId} options={handleTree(powerStore.allPowerList)} props={powerCascadeProps} class={'w-full'} clearable filterable show-all-levels />
+				</ElFormItem>
+			</ElForm>
+		),
+		beforeSure: (done, _) => {
+			formUpdateParentRef.value.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await powerStore.updateBatchByPowerWithParentId(form);
+				if (!result) return;
+
+				done();
+				await onSearch();
+			});
+		},
+	});
+};