个人技术集锦
2025-06-09
<template>
<Dialog v-model="dialogVisible" title="井权限" width="800">
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="auto">
<el-form-item :label="t('searchbar.roleNameLabel')">
<el-tag>{{ formData.name }}</el-tag>
</el-form-item>
<el-form-item :label="t('searchbar.roleCodeLabel')">
<el-tag>{{ formData.code }}</el-tag>
</el-form-item>
<el-form-item :label="t('action.permissionScope')">
<el-select v-model="formData.dataScope">
<el-option value="" />
<el-input
v-model="queryParams.wellName"
placeholder="搜索井名"
clearable
style="margin-left: 10px; width: 200px"
/>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
{{ t('action.search') }}
</el-button>
<el-table
:data="wellList"
style="width: 100%"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
ref="wellTable"
:row-key="getRowKeys"
:reserve-selection="true"
>
<el-table-column type="selection" width="55" :reserve-selection="true" />
<el-table-column prop="wellName" label="井名" width="150" />
<el-table-column prop="builder" label="建设方" width="200" />
<el-table-column prop="servePlace" label="服务地区" width="200" />
<el-table-column prop="oilProduction" label="采油厂" />
</el-table>
</el-select>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">
{{ t('action.confirm') }}
</el-button>
<el-button @click="dialogVisible = false">{{ t('action.cancel') }}</el-button>
</template>
</Dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
import * as RoleApi from '@/api/system/role';
import * as PermissionApi from '@/api/system/permission';
import { SiteApi } from '@/api/base/site';
import { SystemDataScopeEnum } from '@/utils/constants';
defineOptions({ name: 'SystemRoleDataPermissionForm' });
const { t } = useI18n();
const message = useMessage();
const dialogVisible = ref(false);
const formLoading = ref(false);
const formData = reactive({
id: 0,
name: '',
code: '',
dataScope: '',
dataScopeDeptIds: [],
selection: undefined,
});
const queryParams = reactive({
reportIndex: 1,
pageNo: 1,
pageSize: 10,
wellName: '',
});
const formRef = ref();
const wellList = ref([]);
const wellTable = ref(null);
const selectedRows = ref<any[]>([]);
/** 打开弹窗 */
const open = async (row: RoleApi.RoleVO) => {
dialogVisible.value = true;
resetForm();
formData.id = row.id;
formData.name = row.name;
formData.code = row.code;
formData.dataScope = '';
const wellCodes = await PermissionApi.getRoleWellList(row.id);
wellList.value = await SiteApi.getSiteList(queryParams.wellName);
// 根据 wellCodes 筛选选中行
selectedRows.value = wellList.value.filter((well) => wellCodes.includes(well.wellCode));
// 设置 formData.dataScope 为选中行的 wellName，用逗号分隔
formData.dataScope = selectedRows.value.map((row) => row.wellName).join(',');
// 使用 nextTick 确保表格渲染完成后再设置选中状态
await nextTick();
selectedRows.value.forEach((row) => {
wellTable.value.toggleRowSelection(row, true);
});
};
defineExpose({ open });
/** 提交表单 */
const emit = defineEmits(['success']);
/** 搜索按钮操作 */
const handleQuery = async () => {
wellList.value = await SiteApi.getSiteList(queryParams.wellName);
};
/** 确定按钮操作 */
const submitForm = async () => {
formLoading.value = true;
try {
const data = {
roleId: formData.id,
dataScope: 1,
selection: formData.selection,
dataScopeDeptIds:
formData.dataScope !== SystemDataScopeEnum.DEPT_CUSTOM ? [] : treeRef.value.getCheckedKeys(false),
};
await PermissionApi.assignRoleWellScope(data);
message.success(t('common.updateSuccess'));
dialogVisible.value = false;
emit('success');
} finally {
formLoading.value = false;
}
};
/** 选中操作 */
const handleSelectionChange = (selection) => {
formData.selection = selection;
formData.dataScope = selection.map((i) => i.wellName).join(',');
selectedRows.value = selection;
};
/** 行点击事件 */
const handleRowClick = (row) => {
const index = selectedRows.value.findIndex((item) => item.wellCode === row.wellCode);
if (index === -1) {
selectedRows.value.push(row);
} else {
selectedRows.value.splice(index, 1);
}
};
/** 获取唯一键 */
const getRowKeys = (row) => {
return row.wellCode;
};
/** 重置表单 */
const resetForm = () => {
formData.id = 0;
formData.name = '';
formData.code = '';
formData.dataScope = '';
formData.dataScopeDeptIds = [];
formRef.value?.resetFields();
};
</script>getRowKeys为关键
Copyright © 2019- zgxue.com 版权所有 京ICP备2021021884号-5
违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务
