gaoxing/UNIVPLMDataIntegration
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor:机构国际化

Browse Source
This commit is contained in:
PZ688 2025-02-28 18:25:58 +08:00
parent 04951cefbd
commit f39f565932
3 changed files with 63 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
Web/src/views/system/org/component/editOrg.vue
View File

@ -10,8 +10,8 @@
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级机构">
<el-cascader :options="props.orgData" :props="cascaderProps" placeholder="请选择上级机构" clearable filterable class="w100" v-model="state.ruleForm.pid">
<el-form-item :label="$t('message.list.parentOrganization')">
<el-cascader :options="props.orgData" :props="cascaderProps" :placeholder="$t('message.list.pleaseSelectParentOrg')" clearable filterable class="w100" v-model="state.ruleForm.pid">
<template #default="{ node, data }">
<span>{{ data.name }}</span>
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@ -20,51 +20,51 @@
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="机构名称" prop="name" :rules="[{ required: true, message: '机构名称不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.name" placeholder="机构名称" clearable />
<el-form-item :label="$t('message.list.organizationName')" prop="name" :rules="[{ required: true, message: $t('message.list.orgNameRequired'), trigger: 'blur' }]">
<el-input v-model="state.ruleForm.name" :placeholder="$t('message.list.organizationName')" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="机构编码" prop="code" :rules="[{ required: true, message: '机构编码不能为空', trigger: 'blur' }]">
<el-input v-model="state.ruleForm.code" placeholder="机构编码" clearable />
<el-form-item :label="$t('message.list.organizationCode')" prop="code" :rules="[{ required: true, message: $t('message.list.orgCodeRequired'), trigger: 'blur' }]">
<el-input v-model="state.ruleForm.code" :placeholder="$t('message.list.organizationCode')" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="级别">
<el-input-number v-model="state.ruleForm.level" placeholder="级别" class="w100" />
<el-form-item :label="$t('message.list.level')">
<el-input-number v-model="state.ruleForm.level" :placeholder="$t('message.list.level')" class="w100" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="机构类型">
<el-form-item :label="$t('message.list.organizationType')">
<el-select v-model="state.ruleForm.type" filterable clearable class="w100">
<el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.value" :value="item.code" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排序">
<el-input-number v-model="state.ruleForm.orderNo" placeholder="排序" class="w100" />
<el-form-item :label="$t('message.list.orderNo')">
<el-input-number v-model="state.ruleForm.orderNo" :placeholder="$t('message.list.orderNo')" class="w100" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="状态">
<el-form-item :label="$t('message.list.status')">
<el-radio-group v-model="state.ruleForm.status">
<el-radio :value="1">启用</el-radio>
<el-radio :value="2">禁用</el-radio>
<el-radio :value="1">{{ $t('message.list.enable') }}</el-radio>
<el-radio :value="2">{{ $t('message.list.disable') }}</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="备注">
<el-input v-model="state.ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea" />
<el-form-item :label="$t('message.list.remark')">
<el-input v-model="state.ruleForm.remark" :placeholder="$t('message.list.pleaseInputRemark')" clearable type="textarea" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button icon="ele-CircleCloseFilled" @click="cancel">取 消</el-button>
<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">确 定</el-button>
<el-button icon="ele-CircleCloseFilled" @click="cancel">{{ $t('message.list.cancelButtonText') }}</el-button>
<el-button type="primary" icon="ele-CircleCheckFilled" @click="submit">{{ $t('message.list.confirmButtonText') }}</el-button>
</span>
</template>
</el-dialog>
@ -73,6 +73,7 @@
<script lang="ts" setup name="sysEditOrg">
import { onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi, SysDictDataApi } from '/@/api-services/api';
@ -89,6 +90,7 @@ const state = reactive({
ruleForm: {} as UpdateOrgInput,
orgTypeList: [] as any,
});
const i18n = useI18n();
// 级联选择器配置选项
const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'name' };

12
Web/src/views/system/org/component/orgTree.vue
View File

@ -4,7 +4,7 @@
<div class="card-header">
<div class="tree-h-flex">
<div class="tree-h-left">
<el-input :prefix-icon="Search" v-model.lazy="filterText" clearable placeholder="机构名称" />
<el-input :prefix-icon="Search" v-model.lazy="filterText" clearable :placeholder="$t('message.list.organizationName')" />
</div>
<div class="tree-h-right">
<el-dropdown @command="handleCommand">
@ -15,15 +15,15 @@
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="expandAll">全部展开</el-dropdown-item>
<el-dropdown-item command="collapseAll">全部折叠</el-dropdown-item>
<el-dropdown-item command="rootNode">根节点</el-dropdown-item>
<el-dropdown-item command="refresh">刷新</el-dropdown-item>
<el-dropdown-item command="expandAll">{{ $t('message.list.allExpand') }}</el-dropdown-item>
<el-dropdown-item command="collapseAll">{{ $t('message.list.allFold') }}</el-dropdown-item>
<el-dropdown-item command="rootNode">{{ $t('message.list.rootNode') }}</el-dropdown-item>
<el-dropdown-item command="refresh">{{ $t('message.list.refresh') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-checkbox v-if="!props.checkStrictly && state.isShowCheckbox" v-model="state.strictly" label="联动" style="margin-left: 8px" border />
<el-checkbox v-if="!props.checkStrictly && state.isShowCheckbox" v-model="state.strictly" :label="$t('message.list.linkage')" style="margin-left: 8px" border />
</div>
</div>
</template>

69
Web/src/views/system/org/index.vue
View File

@ -9,19 +9,19 @@
<el-form :model="state.queryParams" ref="queryForm" :show-message="false" :inlineMessage="true" label-width="auto" style="flex: 1 1 0%">
<el-row :gutter="10">
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="机构名称" prop="name">
<el-input v-model="state.queryParams.name" placeholder="机构名称" clearable @keyup.enter.native="handleQuery" />
<el-form-item :label="$t('message.list.organizationName')" prop="name">
<el-input v-model="state.queryParams.name" :placeholder="$t('message.list.organizationName')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="机构编码" prop="code">
<el-input v-model="state.queryParams.code" placeholder="机构编码" clearable @keyup.enter.native="handleQuery" />
<el-form-item :label="$t('message.list.organizationCode')" prop="code">
<el-input v-model="state.queryParams.code" :placeholder="$t('message.list.organizationCode')" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col class="mb5" :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="机构类型" prop="type">
<el-form-item :label="$t('message.list.organizationType')" prop="type">
<el-select v-model="state.queryParams.type" filterable clearable class="w100" @clear="state.queryParams.type = undefined">
<el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in state.orgTypeList" :key="item.value" :label="item.value" :value="item.code" />
</el-select>
</el-form-item>
</el-col>
@ -33,8 +33,8 @@
<el-row>
<el-col>
<el-button-group>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" :loading="options.loading"> 查询 </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> 重置 </el-button>
<el-button type="primary" icon="ele-Search" @click="handleQuery(true)" :loading="options.loading"> {{ $t('message.list.query') }} </el-button>
<el-button icon="ele-Refresh" @click="resetQuery" :loading="options.loading"> {{ $t('message.list.reset') }} </el-button>
</el-button-group>
</el-col>
</el-row>
@ -43,10 +43,10 @@
<el-card class="full-table" shadow="hover" style="margin-top: 5px; flex: 1">
<vxe-grid ref="xGrid" class="xGrid-style" v-bind="options" v-on="gridEvents">
<template #toolbar_buttons>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysOrg/add'"> 新增 </el-button>
<el-button type="primary" icon="ele-Plus" @click="handleAdd" v-auth="'sysOrg/add'"> {{ $t('message.list.add') }} </el-button>
<el-button-group style="padding-left: 12px">
<el-button type="primary" icon="ele-Expand" @click="handleExpand"> 全部展开 </el-button>
<el-button type="primary" icon="ele-Fold" @click="handleFold"> 全部折叠 </el-button>
<el-button type="primary" icon="ele-Expand" @click="handleExpand"> {{ $t('message.list.allExpand') }} </el-button>
<el-button type="primary" icon="ele-Fold" @click="handleFold"> {{ $t('message.list.allFold') }} </el-button>
</el-button-group>
</template>
<template #toolbar_tools> </template>
@ -54,16 +54,16 @@
<el-empty :image-size="200" />
</template>
<template #row_status="{ row }">
<el-tag v-if="row.status === 1" type="success">启用</el-tag>
<el-tag v-else type="danger">禁用</el-tag>
<el-tag v-if="row.status === 1" type="success">{{ $t('message.list.enable') }}</el-tag>
<el-tag v-else type="danger">{{ $t('message.list.disable') }}</el-tag>
</template>
<template #row_record="{ row }">
<ModifyRecord :data="row" />
</template>
<template #row_buttons="{ row }">
<el-button icon="ele-Edit" text type="primary" @click="handleEdit(row)" v-auth="'sysOrg/update'"> 编辑 </el-button>
<el-button icon="ele-Delete" text type="danger" @click="handleDelete(row)" v-auth="'sysOrg/delete'"> 删除 </el-button>
<el-button icon="ele-CopyDocument" text type="primary" @click="openCopyOrg(row)" v-auth="'sysOrg/add'"> 复制 </el-button>
<el-button icon="ele-Edit" text type="primary" @click="handleEdit(row)" v-auth="'sysOrg/update'"> {{ $t('message.list.edit') }} </el-button>
<el-button icon="ele-Delete" text type="danger" @click="handleDelete(row)" v-auth="'sysOrg/delete'"> {{ $t('message.list.delete') }} </el-button>
<el-button icon="ele-CopyDocument" text type="primary" @click="openCopyOrg(row)" v-auth="'sysOrg/add'"> {{ $t('message.list.copy') }} </el-button>
</template>
</vxe-grid>
</el-card>
@ -81,6 +81,7 @@ import { VxeGridInstance, VxeGridListeners } from 'vxe-table';
import { useVxeTable } from '/@/hooks/useVxeTableOptionsHook';
import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
import { useI18n } from 'vue-i18n';
import OrgTree from '/@/views/system/org/component/orgTree.vue';
import EditOrg from '/@/views/system/org/component/editOrg.vue';
@ -105,22 +106,24 @@ const state = reactive({
orgTypeList: [] as any,
});
const i18n = useI18n();
// 表格参数配置
const options = useVxeTable<SysOrg>(
{
id: 'sysOrg',
name: '机构',
name: i18n.t('message.list.orgStructure'),
columns: [
// { type: 'checkbox', width: 40, fixed: 'left' },
{ field: 'seq', type: 'seq', title: '序号', width: 60, fixed: 'left' },
{ field: 'name', title: '机构名称', minWidth: 200, showOverflow: 'tooltip', treeNode: true, align: 'left', headerAlign: 'center' },
{ field: 'code', title: '机构编码', minWidth: 200, showOverflow: 'tooltip' },
{ field: 'level', title: '级别', minWidth: 70, showOverflow: 'tooltip' },
{ field: 'type', title: '机构类型', minWidth: 80, formatter: ({ cellValue }: any) => state.orgTypeList.find((u: any) => u.code == cellValue)?.value, showOverflow: 'tooltip' },
{ field: 'orderNo', title: '排序', width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: '状态', width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'record', title: '修改记录', width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ field: 'buttons', title: '操作', fixed: 'right', width: 210, showOverflow: true, slots: { default: 'row_buttons' } },
{ field: 'seq', type: 'seq', title: i18n.t('message.list.seq'), width: 60, fixed: 'left' },
{ field: 'name', title: i18n.t('message.list.organizationName'), minWidth: 200, showOverflow: 'tooltip', treeNode: true, align: 'left', headerAlign: 'center' },
{ field: 'code', title: i18n.t('message.list.organizationCode'), minWidth: 200, showOverflow: 'tooltip' },
{ field: 'level', title: i18n.t('message.list.level'), minWidth: 70, showOverflow: 'tooltip' },
{ field: 'type', title: i18n.t('message.list.organizationType'), minWidth: 80, formatter: ({ cellValue }: any) => state.orgTypeList.find((u: any) => u.code == cellValue)?.value, showOverflow: 'tooltip' },
{ field: 'orderNo', title: i18n.t('message.list.orderNo'), width: 80, showOverflow: 'tooltip' },
{ field: 'status', title: i18n.t('message.list.status'), width: 80, showOverflow: 'tooltip', slots: { default: 'row_status' } },
{ field: 'record', title: i18n.t('message.list.record'), width: 100, showOverflow: 'tooltip', slots: { default: 'row_record' } },
{ field: 'buttons', title: i18n.t('message.list.operation'), fixed: 'right', width: 210, showOverflow: true, slots: { default: 'row_buttons' } },
],
},
// vxeGrid配置参数(此处可覆写任何参数)，参考vxe-table官方文档
@ -182,19 +185,19 @@ const resetQuery = async () => {
// 打开新增页面
const handleAdd = () => {
state.title = '添加机构';
state.title = i18n.t('message.list.addOrg');
editOrgRef.value?.openDialog({ status: 1, orderNo: 100 });
};
// 打开编辑页面
const handleEdit = (row: any) => {
state.title = '编辑机构';
state.title = i18n.t('message.list.editOrg');
editOrgRef.value?.openDialog(row);
};
// 打开复制页面
const openCopyOrg = (row: any) => {
state.title = '复制机构';
state.title = i18n.t('message.list.copyOrg');
var copyRow = JSON.parse(JSON.stringify(row)) as UpdateOrgInput;
copyRow.id = 0;
copyRow.name = '';
@ -203,14 +206,14 @@ const openCopyOrg = (row: any) => {
// 删除
const handleDelete = (row: any) => {
ElMessageBox.confirm(`确定删除机构：【${row.name}】?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
ElMessageBox.confirm(i18n.t('message.list.confirmDeleteOrg', { name: row.name }), i18n.t('message.list.hint'), {
confirmButtonText: i18n.t('message.list.confirmButtonText'),
cancelButtonText: i18n.t('message.list.cancelButtonText'),
type: 'warning',
})
.then(async () => {
await getAPI(SysOrgApi).apiSysOrgDeletePost({ id: row.id });
ElMessage.success('删除成功');
ElMessage.success(i18n.t('message.list.successDelete'));
await handleQuery(true);
})
.catch(() => {});