mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
🎉app国际化
This commit is contained in:
32189
parent
54d455fb3e
commit
b41e7f1857
@ -1,131 +1,131 @@
|
||||
<template>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.name')" prop="name">
|
||||
<el-input :placeholder="t('i18n.inputKeyTip')" v-model="form.name" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.zhCn')" prop="zhCn">
|
||||
<el-input :placeholder="t('i18n.inputZhCnTip')" v-model="form.zhCn" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.en')" prop="en">
|
||||
<el-input :placeholder="t('i18n.inputEnTip')" v-model="form.en" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" draggable
|
||||
v-model="visible">
|
||||
<el-form :model="form" :rules="dataRules" formDialogRef label-width="90px" ref="dataFormRef">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.name')" prop="name">
|
||||
<el-input :placeholder="t('i18n.inputKeyTip')" v-model="form.name"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.zhCn')" prop="zhCn">
|
||||
<el-input :placeholder="t('i18n.inputZhCnTip')" v-model="form.zhCn"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24" class="mb20">
|
||||
<el-form-item :label="t('i18n.en')" prop="en">
|
||||
<el-input :placeholder="t('i18n.inputEnTip')" v-model="form.en"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="SysI18nDialog" setup>
|
||||
// 定义子组件向父组件传值/事件
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { addObj, getObj, putObj } from '/@/api/admin/i18n';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { rule } from '/@/utils/validate';
|
||||
// 定义子组件向父组件传值/事件
|
||||
import {useMessage} from '/@/hooks/message';
|
||||
import {addObj, getObj, putObj} from '/@/api/admin/i18n';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {rule} from '/@/utils/validate';
|
||||
|
||||
const emit = defineEmits(['refresh']);
|
||||
const emit = defineEmits(['refresh']);
|
||||
|
||||
const { t } = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false);
|
||||
// 定义字典
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false);
|
||||
// 定义字典
|
||||
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
zhCn: '',
|
||||
en: '',
|
||||
});
|
||||
// 提交表单数据
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
zhCn: '',
|
||||
en: '',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
name: [
|
||||
{ required: true, message: 'name不能为空', trigger: 'blur' },
|
||||
{ validator: rule.noChinese, trigger: 'blur' },
|
||||
],
|
||||
zhCn: [
|
||||
{ required: true, message: '中文不能为空', trigger: 'blur' },
|
||||
{ validator: rule.chinese, trigger: 'blur' },
|
||||
],
|
||||
en: [
|
||||
{ required: true, message: '英文不能为空', trigger: 'blur' },
|
||||
{ validator: rule.letter, trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
// 定义校验规则
|
||||
const dataRules = ref({
|
||||
name: [
|
||||
{required: true, message: 'name不能为空', trigger: 'blur'},
|
||||
{validator: rule.noChinese, trigger: 'blur'},
|
||||
],
|
||||
zhCn: [
|
||||
{required: true, message: '中文不能为空', trigger: 'blur'},
|
||||
],
|
||||
en: [
|
||||
{required: true, message: '英文不能为空', trigger: 'blur'},
|
||||
{validator: rule.letter, trigger: 'blur'},
|
||||
],
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true;
|
||||
form.id = '';
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true;
|
||||
form.id = '';
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 获取sysI18n信息
|
||||
if (id) {
|
||||
form.id = id;
|
||||
getsysI18nData(id);
|
||||
}
|
||||
};
|
||||
// 获取sysI18n信息
|
||||
if (id) {
|
||||
form.id = id;
|
||||
getsysI18nData(id);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.editSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err: any) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
} else {
|
||||
addObj(form)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.addSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err: any) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
// 更新
|
||||
if (form.id) {
|
||||
putObj(form)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.editSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err: any) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
} else {
|
||||
addObj(form)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.addSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err: any) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化表单数据
|
||||
const getsysI18nData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data);
|
||||
});
|
||||
};
|
||||
// 初始化表单数据
|
||||
const getsysI18nData = (id: string) => {
|
||||
// 获取数据
|
||||
getObj(id).then((res: any) => {
|
||||
Object.assign(form, res.data);
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,221 +1,224 @@
|
||||
<template>
|
||||
<el-dialog :close-on-click-modal="false" :title="state.ruleForm.menuId ? $t('common.editBtn') : $t('common.addBtn')" draggable v-model="visible">
|
||||
<el-form :model="state.ruleForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.menuType')" prop="menType">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio-button label="0">页面</el-radio-button>
|
||||
<el-radio-button label="1">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.parentId')" prop="parentId">
|
||||
<el-tree-select
|
||||
:data="state.parentData"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
check-strictly
|
||||
class="w100"
|
||||
clearable
|
||||
default-expand-all
|
||||
placeholder="请选择上级菜单"
|
||||
v-model="state.ruleForm.parentId"
|
||||
>
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.name')" prop="name">
|
||||
<el-input clearable placeholder="请输入菜单名称" v-model="state.ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.path')" prop="path">
|
||||
<el-input placeholder="请输入路由地址" v-model="state.ruleForm.path" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType == '1'">
|
||||
<el-form-item :label="$t('sysmenu.permission')" prop="permission">
|
||||
<el-input maxlength="50" placeholder="请输入权限标识" v-model="state.ruleForm.permission" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.sortOrder')" prop="sortOrder">
|
||||
<el-input-number :min="0" controls-position="right" v-model="state.ruleForm.sortOrder" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.visible')" prop="visible">
|
||||
<el-radio-group v-model="state.ruleForm.visible">
|
||||
<el-radio-button label="1">显示</el-radio-button>
|
||||
<el-radio-button label="0">隐藏</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-dialog :close-on-click-modal="false" :title="state.ruleForm.menuId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="state.ruleForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.menuType')" prop="menType">
|
||||
<el-radio-group v-model="state.ruleForm.menuType">
|
||||
<el-radio-button label="0">页面</el-radio-button>
|
||||
<el-radio-button label="1">按钮</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.parentId')" prop="parentId">
|
||||
<el-tree-select
|
||||
:data="state.parentData"
|
||||
:props="{ value: 'id', label: 'name', children: 'children' }"
|
||||
check-strictly
|
||||
class="w100"
|
||||
clearable
|
||||
default-expand-all
|
||||
placeholder="请选择上级菜单"
|
||||
v-model="state.ruleForm.parentId"
|
||||
>
|
||||
</el-tree-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.name')" prop="name">
|
||||
<el-input :placeholder="$t('sysmenu.inputMenuNameTip')" clearable
|
||||
v-model="state.ruleForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.path')" prop="path">
|
||||
<el-input :placeholder="$t('sysmenu.inputPathTip')" v-model="state.ruleForm.path"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType == '1'">
|
||||
<el-form-item :label="$t('sysmenu.permission')" prop="permission">
|
||||
<el-input :placeholder="$t('sysmenu.inputPermissionTip')" maxlength="50"
|
||||
v-model="state.ruleForm.permission"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('sysmenu.sortOrder')" prop="sortOrder">
|
||||
<el-input-number :min="0" controls-position="right" v-model="state.ruleForm.sortOrder"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20" v-if="state.ruleForm.menuType !== '1'">
|
||||
<el-form-item :label="$t('sysmenu.visible')" prop="visible">
|
||||
<el-radio-group v-model="state.ruleForm.visible">
|
||||
<el-radio-button label="1">显示</el-radio-button>
|
||||
<el-radio-button label="0">隐藏</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="systemMenuDialog" setup>
|
||||
import { addObj, info, pageList, update, validateByName, validatePermission } from '/@/api/app/appmenu';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { rule } from '/@/utils/validate';
|
||||
import {addObj, info, pageList, update, validateByName, validatePermission} from '/@/api/app/appmenu';
|
||||
import {useMessage} from '/@/hooks/message';
|
||||
import {rule} from '/@/utils/validate';
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
// 引入组件
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['refresh']);
|
||||
// 引入组件
|
||||
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false);
|
||||
const loading = ref(false);
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
|
||||
// 定义需要的数据
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
menuId: '',
|
||||
name: '',
|
||||
permission: '',
|
||||
parentId: '',
|
||||
icon: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
menuType: '0',
|
||||
visible: '1',
|
||||
id: '',
|
||||
},
|
||||
parentData: [] as any[], // 上级菜单数据
|
||||
});
|
||||
// 定义需要的数据
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
menuId: '',
|
||||
name: '',
|
||||
permission: '',
|
||||
parentId: '',
|
||||
icon: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
menuType: '0',
|
||||
visible: '1',
|
||||
id: '',
|
||||
},
|
||||
parentData: [] as any[], // 上级菜单数据
|
||||
});
|
||||
|
||||
// 从后端获取菜单信息
|
||||
const getMenuData = () => {
|
||||
state.parentData = [];
|
||||
loading.value = true;
|
||||
pageList()
|
||||
.then((res) => {
|
||||
let menu = {
|
||||
createBy: '',
|
||||
createTime: '',
|
||||
delFlag: '',
|
||||
icon: '',
|
||||
keepAlive: '',
|
||||
menuId: '',
|
||||
menuType: '',
|
||||
parentId: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
updateBy: '',
|
||||
updateTime: '',
|
||||
visible: '',
|
||||
id: '-1',
|
||||
name: '根菜单',
|
||||
children: [] as any[],
|
||||
};
|
||||
menu.children = res.data;
|
||||
state.parentData.push(menu);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 从后端获取菜单信息
|
||||
const getMenuData = () => {
|
||||
state.parentData = [];
|
||||
loading.value = true;
|
||||
pageList()
|
||||
.then((res) => {
|
||||
let menu = {
|
||||
createBy: '',
|
||||
createTime: '',
|
||||
delFlag: '',
|
||||
icon: '',
|
||||
keepAlive: '',
|
||||
menuId: '',
|
||||
menuType: '',
|
||||
parentId: '',
|
||||
path: '',
|
||||
sortOrder: 0,
|
||||
updateBy: '',
|
||||
updateTime: '',
|
||||
visible: '',
|
||||
id: '-1',
|
||||
name: '根菜单',
|
||||
children: [] as any[],
|
||||
};
|
||||
menu.children = res.data;
|
||||
state.parentData.push(menu);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const dataRules = reactive({
|
||||
name: [
|
||||
{ required: true, message: '菜单名称不能为空', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateByName(rule, value, callback, state.ruleForm.menuId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
path: [
|
||||
{ required: true, message: '路由路径不能为空', trigger: 'blur' },
|
||||
{ validate: rule.noChinese, trigger: 'blur' },
|
||||
],
|
||||
permission: [
|
||||
{ required: true, message: '权限标识不能为空', trigger: 'blur' },
|
||||
{ validator: rule.validatorLowercase, trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePermission(rule, value, callback, state.ruleForm.menuId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row?: any) => {
|
||||
if (row?.id && type === 'edit') {
|
||||
state.ruleForm.id = row.id;
|
||||
// 模拟数据，实际请走接口
|
||||
loading.value = true;
|
||||
info(row.id)
|
||||
.then((res) => {
|
||||
Object.assign(state.ruleForm, res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
dataFormRef?.value?.resetFields();
|
||||
state.ruleForm.parentId = row?.id || '-1';
|
||||
});
|
||||
}
|
||||
visible.value = true;
|
||||
getMenuData();
|
||||
};
|
||||
const dataRules = reactive({
|
||||
name: [
|
||||
{required: true, message: '菜单名称不能为空', trigger: 'blur'},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateByName(rule, value, callback, state.ruleForm.menuId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
path: [
|
||||
{required: true, message: '路由路径不能为空', trigger: 'blur'},
|
||||
{validate: rule.noChinese, trigger: 'blur'},
|
||||
],
|
||||
permission: [
|
||||
{required: true, message: '权限标识不能为空', trigger: 'blur'},
|
||||
{validator: rule.validatorLowercase, trigger: 'blur'},
|
||||
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePermission(rule, value, callback, state.ruleForm.menuId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
});
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row?: any) => {
|
||||
if (row?.id && type === 'edit') {
|
||||
state.ruleForm.id = row.id;
|
||||
// 模拟数据，实际请走接口
|
||||
loading.value = true;
|
||||
info(row.id)
|
||||
.then((res) => {
|
||||
Object.assign(state.ruleForm, res.data);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
nextTick(() => {
|
||||
dataFormRef?.value?.resetFields();
|
||||
state.ruleForm.parentId = row?.id || '-1';
|
||||
});
|
||||
}
|
||||
visible.value = true;
|
||||
getMenuData();
|
||||
};
|
||||
|
||||
// 保存数据
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
// 保存 调用刷新
|
||||
if (state.ruleForm.id) {
|
||||
loading.value = true;
|
||||
update(state.ruleForm)
|
||||
.then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
loading.value = true;
|
||||
addObj(state.ruleForm)
|
||||
.then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 保存数据
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
// 保存 调用刷新
|
||||
if (state.ruleForm.id) {
|
||||
loading.value = true;
|
||||
update(state.ruleForm)
|
||||
.then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
loading.value = true;
|
||||
addObj(state.ruleForm)
|
||||
.then(() => {
|
||||
visible.value = false;
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
// 暴露变量 只有暴漏出来的变量 父组件才能使用
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,9 @@ export default {
|
||||
menuType: 'menuType',
|
||||
visible: 'visible',
|
||||
permission: 'permission',
|
||||
inputNameTip: 'input name',
|
||||
inputMenuNameTip: 'input menuName',
|
||||
inputPathTip: 'input path',
|
||||
inputPermissionTip: 'input permission',
|
||||
parentId: 'parent menu',
|
||||
},
|
||||
};
|
||||
|
||||
@ -7,7 +7,9 @@ export default {
|
||||
menuType: '菜单类型',
|
||||
visible: '显示状态',
|
||||
permission: '权限标识',
|
||||
inputNameTip: '请输入菜单名称',
|
||||
inputMenuNameTip: '请输入菜单名称',
|
||||
inputPathTip: '请输入路由路径',
|
||||
inputPermissionTip: '请输入权限标识',
|
||||
parentId: '上级菜单',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,236 +1,247 @@
|
||||
<template>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')" draggable v-model="visible">
|
||||
<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.username')" prop="username">
|
||||
<el-input :disabled="dataForm.userId !== ''" placeholder="请输入用户名" v-model="dataForm.username"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.password')" prop="password">
|
||||
<el-input clearable placeholder="请输入密码" type="password" v-model="dataForm.password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.name')" prop="name">
|
||||
<el-input clearable placeholder="请输入姓名" v-model="dataForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.phone')" prop="phone">
|
||||
<el-input clearable placeholder="请输入手机号" v-model="dataForm.phone"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.role')" prop="role">
|
||||
<el-select class="w100" clearable multiple placeholder="请选择角色" v-model="dataForm.role">
|
||||
<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId" v-for="item in roleData" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.email')" prop="email">
|
||||
<el-input clearable placeholder="请输入邮箱" v-model="dataForm.email"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.nickname')" prop="nickname">
|
||||
<el-input clearable placeholder="请输入昵称" v-model="dataForm.nickname"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.lockFlag')" prop="lockFlag">
|
||||
<el-radio-group v-model="dataForm.lockFlag">
|
||||
<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">{{ item.label }} </el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="system-user-dialog-container">
|
||||
<el-dialog :close-on-click-modal="false" :title="dataForm.userId ? $t('common.editBtn') : $t('common.addBtn')"
|
||||
draggable v-model="visible">
|
||||
<el-form :model="dataForm" :rules="dataRules" label-width="90px" ref="dataFormRef" v-loading="loading">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.username')" prop="username">
|
||||
<el-input :disabled="dataForm.userId !== ''" :placeholder="$t('appuser.inputUserNameTip')"
|
||||
v-model="dataForm.username"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.password')" prop="password">
|
||||
<el-input :placeholder="$t('appuser.inputPasswordTip')" clearable type="password"
|
||||
v-model="dataForm.password"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.name')" prop="name">
|
||||
<el-input :placeholder="$t('appuser.inputNameTip')" clearable
|
||||
v-model="dataForm.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.phone')" prop="phone">
|
||||
<el-input :placeholder="$t('appuser.inputPhoneTip')" clearable
|
||||
v-model="dataForm.phone"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.role')" prop="role">
|
||||
<el-select :placeholder="$t('appuser.inputRoleTip')" class="w100" clearable multiple
|
||||
v-model="dataForm.role">
|
||||
<el-option :key="item.roleId" :label="item.roleName" :value="item.roleId"
|
||||
v-for="item in roleData"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.email')" prop="email">
|
||||
<el-input :placeholder="$t('appuser.inputEmailTip')" clearable
|
||||
v-model="dataForm.email"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.nickname')" prop="nickname">
|
||||
<el-input :placeholder="$t('appuser.inputNickNameTip')" clearable
|
||||
v-model="dataForm.nickname"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mb20">
|
||||
<el-form-item :label="$t('appuser.lockFlag')" prop="lockFlag">
|
||||
<el-radio-group v-model="dataForm.lockFlag">
|
||||
<el-radio :key="index" :label="item.value" border v-for="(item, index) in lock_flag">{{
|
||||
item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="visible = false">{{ $t('common.cancelButtonText') }}</el-button>
|
||||
<el-button @click="onSubmit" type="primary">{{ $t('common.confirmButtonText') }}</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="systemUserDialog" setup>
|
||||
import { addObj, getObj, putObj, validatePhone, validateUsername } from '/@/api/app/appuser';
|
||||
import { list as roleList } from '/@/api/app/approle';
|
||||
import { useDict } from '/@/hooks/dict';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMessage } from '/@/hooks/message';
|
||||
import { rule } from '/@/utils/validate';
|
||||
import {addObj, getObj, putObj, validatePhone, validateUsername} from '/@/api/app/appuser';
|
||||
import {list as roleList} from '/@/api/app/approle';
|
||||
import {useDict} from '/@/hooks/dict';
|
||||
import {useI18n} from 'vue-i18n';
|
||||
import {useMessage} from '/@/hooks/message';
|
||||
import {rule} from '/@/utils/validate';
|
||||
|
||||
const { t } = useI18n();
|
||||
const {t} = useI18n();
|
||||
|
||||
// 定义刷新表格emit
|
||||
const emit = defineEmits(['refresh']);
|
||||
// @ts-ignore
|
||||
const { lock_flag } = useDict('lock_flag');
|
||||
// 定义刷新表格emit
|
||||
const emit = defineEmits(['refresh']);
|
||||
// @ts-ignore
|
||||
const {lock_flag} = useDict('lock_flag');
|
||||
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false);
|
||||
const roleData = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
// 定义变量内容
|
||||
const dataFormRef = ref();
|
||||
const visible = ref(false);
|
||||
const roleData = ref<any[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
const dataForm = reactive({
|
||||
userId: '',
|
||||
username: '',
|
||||
password: '' as String | undefined,
|
||||
salt: '',
|
||||
wxOpenid: '',
|
||||
qqOpenid: '',
|
||||
lockFlag: '0',
|
||||
phone: '' as String | undefined,
|
||||
deptId: '',
|
||||
roleList: [],
|
||||
postList: [],
|
||||
nickname: '',
|
||||
name: '',
|
||||
email: '',
|
||||
post: [] as string[],
|
||||
role: [] as string[],
|
||||
});
|
||||
const dataForm = reactive({
|
||||
userId: '',
|
||||
username: '',
|
||||
password: '' as String | undefined,
|
||||
salt: '',
|
||||
wxOpenid: '',
|
||||
qqOpenid: '',
|
||||
lockFlag: '0',
|
||||
phone: '' as String | undefined,
|
||||
deptId: '',
|
||||
roleList: [],
|
||||
postList: [],
|
||||
nickname: '',
|
||||
name: '',
|
||||
email: '',
|
||||
post: [] as string[],
|
||||
role: [] as string[],
|
||||
});
|
||||
|
||||
const dataRules = ref({
|
||||
username: [
|
||||
{ required: true, message: '用户名不能为空', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '用户名称长度必须介于 3 和 20 之间', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateUsername(rule, value, callback, dataForm.userId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
const dataRules = ref({
|
||||
username: [
|
||||
{required: true, message: '用户名不能为空', trigger: 'blur'},
|
||||
{min: 3, max: 20, message: '用户名称长度必须介于 3 和 20 之间', trigger: 'blur'},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validateUsername(rule, value, callback, dataForm.userId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
|
||||
password: [
|
||||
{ required: true, message: '密码不能为空', trigger: 'blur' },
|
||||
{
|
||||
min: 6,
|
||||
max: 20,
|
||||
message: '用户密码长度必须介于 6 和 20 之间',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
name: [
|
||||
{ required: true, message: '姓名不能为空', trigger: 'blur' },
|
||||
{ validator: rule.chinese, trigger: 'blur' },
|
||||
],
|
||||
role: [{ required: true, message: '角色不能为空', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ required: true, message: '手机号不能为空', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePhone(rule, value, callback, dataForm.userId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
|
||||
nickname: [{ required: true, message: '姓名不能为空', nickname: 'blur' }],
|
||||
});
|
||||
password: [
|
||||
{required: true, message: '密码不能为空', trigger: 'blur'},
|
||||
{
|
||||
min: 6,
|
||||
max: 20,
|
||||
message: '用户密码长度必须介于 6 和 20 之间',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
name: [
|
||||
{required: true, message: '姓名不能为空', trigger: 'blur'},
|
||||
{validator: rule.chinese, trigger: 'blur'},
|
||||
],
|
||||
role: [{required: true, message: '角色不能为空', trigger: 'blur'}],
|
||||
phone: [
|
||||
{required: true, message: '手机号不能为空', trigger: 'blur'},
|
||||
{
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
message: '请输入正确的手机号码',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{
|
||||
validator: (rule: any, value: any, callback: any) => {
|
||||
validatePhone(rule, value, callback, dataForm.userId !== '');
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
email: [{type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}],
|
||||
nickname: [{required: true, message: '姓名不能为空', nickname: 'blur'}],
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true;
|
||||
dataForm.userId = '';
|
||||
// 打开弹窗
|
||||
const openDialog = (id: string) => {
|
||||
visible.value = true;
|
||||
dataForm.userId = '';
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields();
|
||||
}
|
||||
|
||||
// 修改获取用户信息
|
||||
if (id) {
|
||||
dataForm.userId = id;
|
||||
getUserData(id);
|
||||
}
|
||||
getRoleData();
|
||||
};
|
||||
// 修改获取用户信息
|
||||
if (id) {
|
||||
dataForm.userId = id;
|
||||
getUserData(id);
|
||||
}
|
||||
getRoleData();
|
||||
};
|
||||
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
// 更新方法
|
||||
if (dataForm.userId) {
|
||||
if (dataForm.phone && dataForm.phone.indexOf('*') >= 0) {
|
||||
dataForm.phone = undefined;
|
||||
}
|
||||
if (dataForm.password && dataForm.password.indexOf('******') >= 0) {
|
||||
dataForm.password = undefined;
|
||||
}
|
||||
putObj(dataForm)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.editSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
} else {
|
||||
// 新增方法
|
||||
if (dataForm.phone && dataForm.phone.indexOf('*') > 0) {
|
||||
dataForm.phone = undefined;
|
||||
}
|
||||
addObj(dataForm)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.addSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
// 更新方法
|
||||
if (dataForm.userId) {
|
||||
if (dataForm.phone && dataForm.phone.indexOf('*') >= 0) {
|
||||
dataForm.phone = undefined;
|
||||
}
|
||||
if (dataForm.password && dataForm.password.indexOf('******') >= 0) {
|
||||
dataForm.password = undefined;
|
||||
}
|
||||
putObj(dataForm)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.editSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
} else {
|
||||
// 新增方法
|
||||
if (dataForm.phone && dataForm.phone.indexOf('*') > 0) {
|
||||
dataForm.phone = undefined;
|
||||
}
|
||||
addObj(dataForm)
|
||||
.then(() => {
|
||||
useMessage().success(t('common.addSuccessText'));
|
||||
visible.value = false; // 关闭弹窗
|
||||
emit('refresh');
|
||||
})
|
||||
.catch((err) => {
|
||||
useMessage().error(err.msg);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化部门数据
|
||||
const getUserData = (id: string) => {
|
||||
// 获取部门数据
|
||||
loading.value = true;
|
||||
getObj(id)
|
||||
.then((res) => {
|
||||
Object.assign(dataForm, res.data);
|
||||
dataForm.password = '******';
|
||||
if (res.data.roleList) {
|
||||
dataForm.role = [];
|
||||
res.data.roleList.map((item: any) => {
|
||||
dataForm.role.push(item.roleId);
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 初始化部门数据
|
||||
const getUserData = (id: string) => {
|
||||
// 获取部门数据
|
||||
loading.value = true;
|
||||
getObj(id)
|
||||
.then((res) => {
|
||||
Object.assign(dataForm, res.data);
|
||||
dataForm.password = '******';
|
||||
if (res.data.roleList) {
|
||||
dataForm.role = [];
|
||||
res.data.roleList.map((item: any) => {
|
||||
dataForm.role.push(item.roleId);
|
||||
});
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 角色数据
|
||||
const getRoleData = () => {
|
||||
roleList().then((res) => {
|
||||
roleData.value = res.data;
|
||||
});
|
||||
};
|
||||
// 角色数据
|
||||
const getRoleData = () => {
|
||||
roleList().then((res) => {
|
||||
roleData.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -12,9 +12,13 @@ export default {
|
||||
dept: 'dept',
|
||||
email: 'email',
|
||||
nickname: 'nickname',
|
||||
inputUsernameTip: 'input username',
|
||||
inputPhoneTip: 'input phone',
|
||||
inputNameTip: 'input name',
|
||||
importUserTip: 'user import',
|
||||
inputNameTip:'input name',
|
||||
inputRoleTip:'input role',
|
||||
inputUserNameTip:'input username',
|
||||
inputPasswordTip:'input Password',
|
||||
inputPhoneTip:'input phone',
|
||||
inputEmailTip:'input Email',
|
||||
inputNickNameTip:'input NickName'
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
@ -12,9 +12,12 @@ export default {
|
||||
dept: '部门',
|
||||
email: '邮箱',
|
||||
nickname: '昵称',
|
||||
inputUsernameTip: '请输入用户名',
|
||||
inputPhoneTip: '请输入手机号',
|
||||
inputNameTip: '请输入姓名',
|
||||
importUserTip: '用户导入',
|
||||
inputNameTip:'请输入姓名',
|
||||
inputRoleTip:'请选择角色',
|
||||
inputUserNameTip:'请输入用户名',
|
||||
inputPasswordTip:'请输入密码',
|
||||
inputEmailTip:'请输入邮箱',
|
||||
inputPhoneTip:'请输入手机号码',
|
||||
inputNickNameTip:'请输入昵称'
|
||||
},
|
||||
};
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
key: '',
|
||||
name: '',
|
||||
category: '',
|
||||
desc: 'vvv',
|
||||
desc: 'create_time',
|
||||
});
|
||||
|
||||
// 定义校验规则
|
||||
@ -65,6 +65,7 @@
|
||||
category: [
|
||||
{required: true, message: '模型分类不能为空', trigger: 'blur'}
|
||||
]
|
||||
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user