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>
<div class="system-dept-dialog-container">
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
<el-form ref="deptDialogFormRef" :model="state.form" size="default" label-width="90px">
<el-dialog :title="dataForm.deptId ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible" width="769px">
<el-form ref="deptDialogFormRef" :model="dataForm" size="default" label-width="90px" :rules="dataRules">
<el-row :gutter="35">
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="上级部门">
<el-tree-select v-model="state.form.parentId" :data="state.parentData"
<el-form-item :label="$t('sysdept.parentId')" prop="parentId">
<el-tree-select v-model="dataForm.parentId" :data="parentData"
:props="{ value: 'id', label: 'name', children: 'children' }" class="w100" clearable check-strictly
placeholder="请选择上级部门">
</el-tree-select>
:placeholder="$t('sysdept.inputparentIdTip')"/>
</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 v-model="state.form.name" placeholder="请输入部门名称" clearable></el-input>
<el-form-item :label="$t('sysdept.name')" prop="name">
<el-input v-model="dataForm.name" :placeholder="$t('sysdept.inputnameTip')" 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.form.sortOrder" placeholder="请输入部门名称" clearable></el-input-number>
<el-form-item :label="$t('sysdept.sortOrder')" prop="sortOrder">
<el-input-number v-model="dataForm.sortOrder" :placeholder="$t('sysdept.inputsortOrderTip')" clearable/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
<el-button @click="onCancel" size="default">{{ $t('common.cancelButtonText') }}</el-button>
<el-button type="primary" @click="onSubmit" size="default">{{ $t('common.confirmButtonText') }}</el-button>
</span>
</template>
</el-dialog>
@ -42,51 +41,45 @@ const emit = defineEmits(['refresh']);
// 定义变量内容
const deptDialogFormRef = ref();
const state = reactive({
form: {
const dataForm = reactive({
parentId: '',
deptId: '',
name: '',
sortOrder: 9999
},
parentData: [] as any[], // 部门数据
dialog: {
isShowDialog: false,
type: '',
title: '',
submitTxt: '',
},
});
})
const parentData = ref<any[]>([])
const visible = ref(false)
const dataRules = ref({
parentId: [{ required: true, message: "上级部门不能为空", trigger: "blur" }],
name: [{ required: true, message: "部门名称不能为空", trigger: "blur" }],
sortOrder: [{ required: true, message: "排序不能为空", trigger: "blur" }],
})
// 打开弹窗
const openDialog = (type: string, id: string) => {
if (type === 'edit') {
getObj(id).then(res => {
state.form = Object.assign({},res.data)
Object.assign(dataForm,res.data)
}).catch(err => {
useMessage().error(err.msg)
})
state.dialog.title = '修改部门';
state.dialog.submitTxt = '修 改';
} else {
state.dialog.title = '新增部门';
state.dialog.submitTxt = '新 增';
// 清空表单，此项需加表单验证才能使用
nextTick(() => {
deptDialogFormRef.value.resetFields();
state.form = Object.assign({
sortOrder: 9999
})
state.form.parentId = id
deptDialogFormRef?.value?.resetFields();
dataForm.parentId = id
});
}
state.dialog.isShowDialog = true;
visible.value = true
getDeptData()
};
// 关闭弹窗
const closeDialog = () => {
state.dialog.isShowDialog = false;
visible.value = false;
};
// 取消
const onCancel = () => {
@ -94,32 +87,38 @@ const onCancel = () => {
};
// 提交
const onSubmit = () => {
if (state.dialog.type === 'edit') {
putObj(state.form).then(() => {
closeDialog(); // 关闭弹窗
emit('refresh');
}).catch(err => {
useMessage().error(err.msg)
})
} else {
addObj(state.form).then(() => {
closeDialog(); // 关闭弹窗
emit('refresh');
}).catch(err => {
useMessage().error(err.msg)
})
}
deptDialogFormRef.value.validate((valid: boolean) => {
if (!valid) {
return false
}
if (dataForm.deptId) {
putObj(dataForm).then(() => {
closeDialog(); // 关闭弹窗
emit('refresh');
}).catch(err => {
useMessage().error(err.msg)
})
} else {
addObj(dataForm).then(() => {
closeDialog(); // 关闭弹窗
emit('refresh');
}).catch(err => {
useMessage().error(err.msg)
})
}
})
};
// 从后端获取菜单信息
const getDeptData = async () => {
depttree().then(res => {
state.parentData = []
parentData.value = []
const dept = {
id: '-1', name: '根部门', children: [] as any[]
};
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">
<el-card shadow="hover" class="layout-padding-auto">
<div class="mb15">
<el-input size="default" placeholder="请输入部门名称" style="max-width: 180px" v-model="state.queryForm.deptName"> </el-input>
<el-button size="default" icon="search" type="primary" class="ml10" @click="getDataList">
查询
<el-input :placeholder="$t('sysdept.inputdeptNameTip')" style="max-width: 180px" v-model="state.queryForm.deptName"> </el-input>
<el-button icon="search" type="primary" class="ml10" @click="getDataList">
{{ $t('common.queryBtn') }}
</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>
</div>
<el-table
@ -18,15 +18,14 @@
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="name" label="部门名称" show-overflow-tooltip> </el-table-column>
<el-table-column prop="weight" label="排序" show-overflow-tooltip width="80">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column label="操作" show-overflow-tooltip width="200">
<el-table-column :label="$t('sysdept.name')" prop="name" width="400" show-overflow-tooltip> </el-table-column>
<el-table-column :label="$t('sysdept.weight')" prop="weight" show-overflow-tooltip width="80"></el-table-column>
<el-table-column prop="createTime" :label="$t('sysdept.createTime')" show-overflow-tooltip></el-table-column>
<el-table-column :label="$t('common.action')" show-overflow-tooltip width="200">
<template #default="scope">
<el-button text type="primary" @click="onOpenAddDept('add',scope.row)">新增</el-button>
<el-button text type="primary" @click="onOpenEditDept('edit', scope.row)">修改</el-button>
<el-button text type="primary" @click="onTabelRowDel(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)" v-auth="'sys_dept_edit'">{{$t('common.editBtn') }}</el-button>
<el-button text type="primary" @click="onTabelRowDel(scope.row)" v-auth="'sys_dept_del'"> {{ $t('common.delBtn') }}</el-button>
</template>
</el-table-column>
</el-table>
@ -49,7 +48,7 @@ const { t } = useI18n()
const deptDialogRef = ref();
const state: BasicTableProps = reactive<BasicTableProps>({
pageList: depttree, // H
pageList: depttree,
queryForm: {
deptName: ''
},