mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-23 05:40:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ Introducing new features. 部门管理增加i18n

Browse Source
This commit is contained in:
aeizzz 2023-02-07 10:08:08 +08:00
parent 619c08d2dd
commit bd489d6756
4 changed files with 93 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/views/admin/dept/form.vue
View File

@ -1,32 +1,31 @@
<template> <template>
<div class="system-dept-dialog-container"> <div class="system-dept-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px"> <el-dialog :title="dataForm.deptId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="769px">
<el-form ref="deptDialogFormRef" :model="state.form" size="default" label-width="90px"> <el-form ref="deptDialogFormRef" :model="dataForm" size="default" label-width="90px" :rules="dataRules">
<el-row :gutter="35"> <el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级部门"> <el-form-item :label="$t('sysdept.parentId')" prop="parentId">
<el-tree-select v-model="state.form.parentId" :data="state.parentData" <el-tree-select v-model="dataForm.parentId" :data="parentData"
:props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly :props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly
placeholder="请选择上级部门"> :placeholder="$t('sysdept.inputparentIdTip')"/>
</el-tree-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="部门名称"> <el-form-item :label="$t('sysdept.name')" prop="name">
<el-input v-model="state.form.name" placeholder="请输入部门名称" clearable></el-input> <el-input v-model="dataForm.name" :placeholder="$t('sysdept.inputnameTip')" clearable/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"> <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="排序"> <el-form-item :label="$t('sysdept.sortOrder')" prop="sortOrder">
<el-input-number v-model="state.form.sortOrder" placeholder="请输入部门名称" clearable></el-input-number> <el-input-number v-model="dataForm.sortOrder" :placeholder="$t('sysdept.inputsortOrderTip')" clearable/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
</el-form> </el-form>
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button> <el-button @click="onCancel" size="default">{{ $t('common.cancelButtonText') }}</el-button>
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button> <el-button type="primary" @click="onSubmit" size="default">{{ $t('common.confirmButtonText') }}</el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -42,51 +41,45 @@ const emit = defineEmits(['refresh']);
// 定义变量内容 // 定义变量内容
const deptDialogFormRef = ref(); const deptDialogFormRef = ref();
const state = reactive({ const dataForm = reactive({
form: {
parentId: '', parentId: '',
deptId: '', deptId: '',
name: '', name: '',
sortOrder: 9999 sortOrder: 9999
}, })
parentData: [] as any[], // 部门数据 const parentData = ref<any[]>([])
dialog: { const visible = ref(false)
isShowDialog: false,
type: '',
title: '', const dataRules = ref({
submitTxt: '', parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
}, name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
}); sortOrder: [{ required: true, message: "排序不能为空", trigger: "blur" }],
})
// 打开弹窗 // 打开弹窗
const openDialog = (type: string, id: string) => { const openDialog = (type: string, id: string) => {
if (type === 'edit') { if (type === 'edit') {
getObj(id).then(res => { getObj(id).then(res => {
state.form = Object.assign({},res.data) Object.assign(dataForm,res.data)
}).catch(err => { }).catch(err => {
useMessage().error(err.msg) useMessage().error(err.msg)
}) })
state.dialog.title = '修改部门';
state.dialog.submitTxt = '修 改';
} else { } else {
state.dialog.title = '新增部门';
state.dialog.submitTxt = '新 增';
// 清空表单，此项需加表单验证才能使用 // 清空表单，此项需加表单验证才能使用
nextTick(() => { nextTick(() => {
deptDialogFormRef.value.resetFields(); deptDialogFormRef?.value?.resetFields();
state.form = Object.assign({ dataForm.parentId = id
sortOrder: 9999
})
state.form.parentId = id
}); });
} }
state.dialog.isShowDialog = true; visible.value = true
getDeptData() getDeptData()
}; };
// 关闭弹窗 // 关闭弹窗
const closeDialog = () => { const closeDialog = () => {
state.dialog.isShowDialog = false; visible.value = false;
}; };
// 取消 // 取消
const onCancel = () => { const onCancel = () => {
@ -94,32 +87,38 @@ const onCancel = () => {
}; };
// 提交 // 提交
const onSubmit = () => { const onSubmit = () => {
if (state.dialog.type === 'edit') { deptDialogFormRef.value.validate((valid: boolean) => {
putObj(state.form).then(() => { if (!valid) {
closeDialog(); // 关闭弹窗 return false
emit('refresh'); }
}).catch(err => { if (dataForm.deptId) {
useMessage().error(err.msg) putObj(dataForm).then(() => {
}) closeDialog(); // 关闭弹窗
} else { emit('refresh');
addObj(state.form).then(() => { }).catch(err => {
closeDialog(); // 关闭弹窗 useMessage().error(err.msg)
emit('refresh'); })
}).catch(err => { } else {
useMessage().error(err.msg) addObj(dataForm).then(() => {
}) closeDialog(); // 关闭弹窗
} emit('refresh');
}).catch(err => {
useMessage().error(err.msg)
})
}
})
}; };
// 从后端获取菜单信息 // 从后端获取菜单信息
const getDeptData = async () => { const getDeptData = async () => {
depttree().then(res => { depttree().then(res => {
state.parentData = [] parentData.value = []
const dept = { const dept = {
id: '-1', name: '根部门', children: [] as any[] id: '-1', name: '根部门', children: [] as any[]
}; };
dept.children = res.data; dept.children = res.data;
state.parentData.push(dept) parentData.value.push(dept)
}) })
}; };

13
src/views/admin/dept/i18n/en.ts Normal file
View File

@ -0,0 +1,13 @@
export default {
sysdept: {
name: 'dept name',
parentId: 'parent dept',
createTime: 'createTime',
weight: 'weight',
sortOrder: 'sortOrder',
inputdeptNameTip: 'input deptName',
inputnameTip: 'input deptName',
inputparentIdTip: 'select deptName',
inputsortOrderTip: 'input sortOrder',
}
}

15
src/views/admin/dept/i18n/zh-cn.ts Normal file
View File

@ -0,0 +1,15 @@
export default {
sysdept: {
name: '部门名称',
parentId: '上级部门',
createTime: '创建时间',
weight: '排序',
sortOrder: '排序',
inputdeptNameTip: '请输入部门名称',
inputnameTip: '请输入部门名称',
inputparentIdTip: '请选择上级部门',
inputsortOrderTip: '请输入排序',
},
}

27
src/views/admin/dept/index.vue
View File

@ -2,12 +2,12 @@
<div class="system-dept-container layout-padding"> <div class="system-dept-container layout-padding">
<el-card shadow="hover" class="layout-padding-auto"> <el-card shadow="hover" class="layout-padding-auto">
<div class="mb15"> <div class="mb15">
<el-input size="default" placeholder="请输入部门名称" style="max-width: 180px" v-model="state.queryForm.deptName"> </el-input> <el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px" v-model="state.queryForm.deptName"> </el-input>
<el-button size="default" icon="search" type="primary" class="ml10" @click="getDataList"> <el-button icon="search" type="primary" class="ml10" @click="getDataList">
查询 {{ $t('common.queryBtn') }}
</el-button> </el-button>
<el-button size="default" icon="folder-add" type="success" class="ml10" @click="deptDialogRef.openDialog('add');"> <el-button icon="folder-add" type="success" class="ml10" @click="deptDialogRef.openDialog('add');" v-auth="'sys_dept_add'">
新增菜单 {{ $t('common.addBtn') }}
</el-button> </el-button>
</div> </div>
<el-table <el-table
@ -18,15 +18,14 @@
default-expand-all default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
> >
<el-table-column prop="name" label="部门名称" show-overflow-tooltip> </el-table-column> <el-table-column :label="$t('sysdept.name')" prop="name" width="400" show-overflow-tooltip> </el-table-column>
<el-table-column prop="weight" label="排序" show-overflow-tooltip width="80"> <el-table-column :label="$t('sysdept.weight')" prop="weight" show-overflow-tooltip width="80"></el-table-column>
</el-table-column> <el-table-column prop="createTime" :label="$t('sysdept.createTime')" show-overflow-tooltip></el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> <el-table-column :label="$t('common.action')" show-overflow-tooltip width="200">
<el-table-column label="操作" show-overflow-tooltip width="200">
<template #default="scope"> <template #default="scope">
<el-button text type="primary" @click="onOpenAddDept('add',scope.row)">新增</el-button> <el-button text type="primary" @click="onOpenAddDept('add',scope.row)" v-auth="'sys_dept_add'"> {{ $t('common.addBtn') }}</el-button>
<el-button text type="primary" @click="onOpenEditDept('edit', scope.row)">修改</el-button> <el-button text type="primary" @click="onOpenEditDept('edit', scope.row)" v-auth="'sys_dept_edit'">{{$t('common.editBtn') }}</el-button>
<el-button text type="primary" @click="onTabelRowDel(scope.row)">删除</el-button> <el-button text type="primary" @click="onTabelRowDel(scope.row)" v-auth="'sys_dept_del'"> {{ $t('common.delBtn') }}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -49,7 +48,7 @@ const { t } = useI18n()
const deptDialogRef = ref(); const deptDialogRef = ref();
const state: BasicTableProps = reactive<BasicTableProps>({ const state: BasicTableProps = reactive<BasicTableProps>({
pageList: depttree, // H pageList: depttree,
queryForm: { queryForm: {
deptName: '' deptName: ''
}, },