<template>
|
<div class="h100 flex-column">
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
|
<el-form :inline="true" :model="queryParams">
|
<el-form-item label="名称" prop="Name">
|
<el-input v-model="queryParams.Name" style="width: 226.4px" placeholder="名称" clearable />
|
</el-form-item>
|
|
<el-form-item>
|
<el-button icon="ele-Refresh" @click="resetQuery">重置 </el-button>
|
<el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 查询 </el-button>
|
<el-button icon="ele-Plus" @click="openOperateDialog()"> 增加 </el-button>
|
</el-form-item>
|
<el-form-item label="排序">
|
<el-switch v-model="isDragStatus" @change="handleDragStatus" inline-prompt active-icon="ele-Check" inactive-icon="ele-Close">
|
</el-switch>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<el-card class="flex-auto scroll-table-card" shadow="hover" style="margin-top: 8px">
|
<el-table
|
v-loading="tableLoading"
|
ref="draggableTableRef"
|
border
|
row-key="ID"
|
:row-class-name="isDragStatus ? 'cursor-move' : 'cursor-pointer'"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="displayTableData"
|
style="width: 100%"
|
highlight-current-row
|
>
|
<el-table-column prop="ID" width="180" label="ID" fixed="left" show-overflow-tooltip />
|
<el-table-column prop="Name" width="220" label="名称" fixed="left" show-overflow-tooltip />
|
<!-- <el-table-column prop="Paras" label="参数" show-overflow-tooltip /> -->
|
<el-table-column prop="Flags" width="290" label="标签" show-overflow-tooltip>
|
<template #default="{ row }">
|
<el-tag class="table-tag-space" v-for="(flagItem, index) in row.Flags" :key="index + ''">{{ flagItem }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="TagName" label="标记" show-overflow-tooltip />
|
<el-table-column prop="Description" width="550" label="说明" show-overflow-tooltip />
|
<el-table-column label="操作" width="200" fixed="right" show-overflow-tooltip>
|
<template #default="scope">
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openOperateDialog(scope.row)"> 编辑 </el-button>
|
<el-button icon="ele-User" size="small" text type="primary" @click="openUserDrawer(scope.row)"> 用户 </el-button>
|
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="deleteCurrentRow(scope.row)"> 删除 </el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
<el-dialog :destroy-on-close="true" v-model="dialogIsShow" width="400" :close-on-click-modal="false" @closed="closeDialog">
|
<template #header>
|
<div style="color: #fff">
|
<SvgIcon :name="dialogHeaderIcon" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span> {{ dialogTitle }} </span>
|
</div>
|
</template>
|
|
<el-form :model="dialogFormValue" ref="dialogFormRef" :rules="dialogFormRules" label-width="55">
|
<el-form-item label="名称" prop="Name">
|
<el-input placeholder="请输入名称" v-model="dialogFormValue.Name"></el-input>
|
</el-form-item>
|
<!-- <el-form-item label="参数" prop="Paras">
|
<el-input v-model="dialogFormValue.Paras"></el-input>
|
</el-form-item> -->
|
<el-form-item label="标签" prop="Flags">
|
<el-select class="w100" placeholder="请选择标签" filterable multiple v-model="dialogFormValue.Flags">
|
<el-option v-for="(item, index) in flagList" :key="index + ''" :value="item"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="标记" prop="TagName">
|
<el-input v-model="dialogFormValue.TagName"></el-input>
|
</el-form-item>
|
<el-form-item label="说明" prop="Description">
|
<el-input placeholder="请输入说明" v-model="dialogFormValue.Description" type="textarea" :rows="3" />
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div>
|
<el-button @click="closeDialog">取 消</el-button>
|
<el-button type="primary" @click="submitFormValue">确 定</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
<div class="custom-drawer">
|
<el-drawer v-model="userDrawerIsShow" direction="rtl" size="30%">
|
<template #header>
|
<div>
|
<SvgIcon name="ele-User" :size="16" style="margin-right: 3px; display: inline; vertical-align: middle" />
|
<span>{{ `【${drawerMapRow?.Name}】用户` }} </span>
|
</div>
|
</template>
|
<el-button type="primary" icon="ele-Setting" @click="openCheckTreeDlg" size="small" class="mt12 mb12 mr12 ml-auto">
|
设置用户
|
</el-button>
|
|
<el-table
|
class="h100"
|
size="small"
|
v-loading="userDrawerTableLoading"
|
ref="userTableRef"
|
border
|
row-key="ID"
|
:cell-style="{ textAlign: 'center' }"
|
:header-cell-style="{ textAlign: 'center' }"
|
:data="userDrawerTableData"
|
style="width: 100%"
|
>
|
<el-table-column prop="Name" label="名称" fixed="left" show-overflow-tooltip />
|
|
<el-table-column prop="AdminType" label="管理类型" show-overflow-tooltip>
|
<template #default="scope">
|
{{ ADMIN_TYPE_MAP[scope.row.AdminType] }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="Tag" label="标签" show-overflow-tooltip>
|
<template #default="scope">
|
<el-tag v-if="scope.row.Tag">{{ scope.row.Tag }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-drawer>
|
</div>
|
<YwDialog
|
v-model="checkTreeIsShow"
|
:title="`设置【${drawerMapRow?.Name}】用户`"
|
headerIcon="ele-Setting"
|
width="400"
|
@close="closeCheckUserDlg"
|
@closed="closeCheckUserDlg"
|
@submit="submitCheckUserDlg"
|
>
|
<CheckTree
|
ref="checkTreeRef"
|
:treeProps="{
|
id: 'ID',
|
label: 'Name',
|
}"
|
:filterCheckedKeys="() => userDrawerTableData.map((item) => item.ID)"
|
:treeData="userList"
|
:submitCheckedApi="SetTenantMappingUser"
|
:showTip="false"
|
></CheckTree>
|
</YwDialog>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type { FormInstance, FormRules, TableInstance } from 'element-plus';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { ref, onMounted, computed, toRefs, nextTick } from 'vue';
|
import { deepClone } from '/@/utils/other';
|
import { useQueryTable } from '/@/hooks/useQueryTable';
|
import { useTableSort } from '/@/hooks/useTableSort';
|
import { DeleteATenant, GetAllTenant, InsertATenant, UpdateATenant, UpdateTenantSorter, GetIsExistTagName } from '/@/api/sqi/tenant';
|
import { useFlagList } from '/@/hooks/useFlagList';
|
import { useValidateUniqueness } from '/@/hooks/useValidateUniqueness';
|
import { TENANT_CODE } from '/@/constants';
|
import { SetTenantMappingUser, getMappingUserByTenantID } from '/@/api/sqi/tenantUserMapping';
|
import { getAuthUserByCorpIDStd } from '/@/api/auth/userStd';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { authRequest } from '/@/utils/request';
|
import YwDialog from '/@/components/dialog/yw-dialog.vue';
|
import CheckTree from '/@/components/tree/checkTree/CheckTree.vue';
|
import { ADMIN_TYPE_MAP } from '/@/views/types';
|
|
const props = defineProps({
|
request: {
|
type: Function as any,
|
},
|
});
|
|
let { request } = toRefs(props);
|
//#region ====================== 表格数据，table init ======================
|
const tableLoading = ref(false);
|
const tableData = ref([]);
|
const isDragStatus = ref(false);
|
const getTableData = async () => {
|
tableLoading.value = true;
|
const res = await GetAllTenant(request.value).finally(() => {
|
tableLoading.value = false;
|
});
|
if (res?.Code === 0) {
|
const resData = (res.Data || []) as [];
|
tableData.value = resData;
|
} else {
|
ElMessage.error('获取租户失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
};
|
const deleteCurrentRow = (row: any) => {
|
ElMessageBox.confirm(`确定删除租户：【${row.Name}】?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await DeleteATenant(
|
{
|
ID: row.ID,
|
},
|
request.value
|
);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
ElMessage.success('删除租户成功');
|
getTableData();
|
} else {
|
ElMessage.error('删除租户失败');
|
}
|
} else {
|
ElMessage.error('删除租户失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
});
|
};
|
//#endregion
|
|
//#region ====================== 表格查询、排序，search form init ======================
|
const queryParams = ref({
|
Name: '',
|
});
|
const { handleDragStatus, draggableTableRef } = useTableSort(
|
tableData,
|
UpdateTenantSorter,
|
getTableData,
|
undefined,
|
false,
|
request.value
|
);
|
|
const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(tableData, queryParams, getTableData);
|
|
//#endregion
|
|
//#region ====================== 增加、修改记录操作, dialog init======================
|
const isEditDialog = ref(false);
|
const dialogTitle = computed(() => {
|
return isEditDialog.value ? '修改租户' : '添加租户';
|
});
|
const dialogHeaderIcon = computed(() => {
|
return isEditDialog.value ? 'ele-Edit' : 'ele-Plus';
|
});
|
const dialogFormValue = ref(null);
|
const dialogIsShow = ref(false);
|
const dialogFormRef = ref<FormInstance>(null);
|
const initialTagName = ref('');
|
const { uniquenessValidator } = useValidateUniqueness(
|
GetIsExistTagName,
|
initialTagName,
|
'标记',
|
'TagName',
|
undefined,
|
true,
|
request.value
|
);
|
const dialogFormRules = ref<FormRules>({
|
Name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
TagName: [{ validator: uniquenessValidator as any, trigger: 'blur' }],
|
});
|
const openOperateDialog = (row?) => {
|
if (row) {
|
isEditDialog.value = true;
|
const { ID, Name, Paras, Flags, TagName, Description } = row;
|
initialTagName.value = TagName;
|
dialogFormValue.value = deepClone({ ID, Name, Paras, Flags, TagName, Description });
|
} else {
|
isEditDialog.value = false;
|
initialTagName.value = '';
|
dialogFormValue.value = { Name: '', Paras: {}, Flags: [], TagName: '', Description: '' };
|
}
|
dialogIsShow.value = true;
|
};
|
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
dialogFormRef.value.clearValidate();
|
};
|
|
const submitFormValue = async () => {
|
const valid = await dialogFormRef.value.validate().catch(() => {});
|
if (!valid) return;
|
|
if (isEditDialog.value) {
|
const res = await UpdateATenant(dialogFormValue.value, request.value);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closeDialog();
|
ElMessage.success('修改租户成功');
|
} else {
|
ElMessage.error('修改租户失败');
|
}
|
} else {
|
ElMessage.error('修改租户失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
} else {
|
const res = await InsertATenant(dialogFormValue.value, request.value);
|
if (res?.Code === 0) {
|
if (res.Data) {
|
getTableData();
|
closeDialog();
|
ElMessage.success('添加租户成功');
|
} else {
|
ElMessage.error('添加租户失败');
|
}
|
} else {
|
ElMessage.error('添加租户失败' + (res?.Message ? `，${JSON.stringify(res.Message)}` : ''));
|
}
|
}
|
};
|
|
//#endregion
|
|
//#region ====================== 租户映射用户 ======================
|
const userDrawerIsShow = ref(false);
|
const userDrawerTableData = ref([]);
|
|
const userDrawerTableLoading = ref(false);
|
const drawerMapRow = ref(null);
|
const userTableRef = ref<TableInstance>(null);
|
|
const getUserDrawerTableDataByID = async () => {
|
userDrawerTableLoading.value = true;
|
const mappingList = await getMappingUserByTenantID({ TenantID: drawerMapRow.value.ID }).finally(() => {
|
userDrawerTableLoading.value = false;
|
});
|
const userIds = mappingList.map((item) => item.UserID);
|
const mapData = [];
|
const unMapData = [];
|
for (const item of userList.value) {
|
if (userIds.includes(item.ID)) {
|
mapData.push(item);
|
}
|
}
|
userDrawerTableData.value = mapData;
|
};
|
|
const openUserDrawer = (row?) => {
|
drawerMapRow.value = row;
|
getUserDrawerTableDataByID();
|
userDrawerIsShow.value = true;
|
};
|
|
//#region ====================== 设置映射用户 ======================
|
const checkTreeRef = ref<InstanceType<typeof CheckTree>>(null);
|
const checkTreeIsShow = ref(false);
|
|
const openCheckTreeDlg = () => {
|
checkTreeIsShow.value = true;
|
nextTick(() => {
|
checkTreeRef.value.getTreeData();
|
});
|
};
|
const closeCheckUserDlg = () => {
|
checkTreeIsShow.value = false;
|
checkTreeRef.value.resetTree();
|
};
|
const submitCheckUserDlg = async () => {
|
const checkedKeys = checkTreeRef.value.treeRef.getCheckedKeys();
|
|
const sendParams = {
|
UserIds: checkedKeys,
|
TenantID: drawerMapRow.value.ID,
|
};
|
|
const isSuccess = await checkTreeRef.value.submitCheckedKeys(sendParams, request.value);
|
if (isSuccess) {
|
ElMessage.success('设置成功');
|
getUserDrawerTableDataByID();
|
closeCheckUserDlg();
|
} else {
|
ElMessage.error('设置失败');
|
}
|
};
|
//#endregion
|
|
//#endregion
|
const userList = ref([]);
|
const { flagList, getFlagListBySysType } = useFlagList(TENANT_CODE, request.value);
|
onMounted(async () => {
|
getFlagListBySysType();
|
getTableData();
|
const stores = useUserInfo();
|
let userInfo = (await stores.getUserInfo()) as any;
|
const corpID = userInfo.SoftWare?.Project?.Corpration?.ID;
|
userList.value = await getAuthUserByCorpIDStd({ CorpID: corpID }, authRequest);
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
