个人中心重置及校验问题,部分表单增加校验

This commit is contained in:
周建 2023-08-16 17:31:28 +08:00
parent fd46445147
commit 7eced09de0
6 changed files with 69 additions and 7 deletions

View File

@ -1,12 +1,12 @@
<template> <template>
<el-form ref="formRef" :model="password" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="password" :rules="rules" label-width="80px">
<el-form-item :label="t('profile.password.oldPassword')"> <el-form-item :label="t('profile.password.oldPassword')" prop="oldPassword">
<InputPassword v-model="password.oldPassword" /> <InputPassword v-model="password.oldPassword" />
</el-form-item> </el-form-item>
<el-form-item :label="t('profile.password.newPassword')"> <el-form-item :label="t('profile.password.newPassword')" prop="newPassword">
<InputPassword v-model="password.newPassword" strength /> <InputPassword v-model="password.newPassword" strength />
</el-form-item> </el-form-item>
<el-form-item :label="t('profile.password.confirmPassword')"> <el-form-item :label="t('profile.password.confirmPassword')" prop="confirmPassword">
<InputPassword v-model="password.confirmPassword" strength /> <InputPassword v-model="password.confirmPassword" strength />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@ -31,7 +31,7 @@ const password = reactive({
}) })
// //
const equalToPassword = (value, callback) => { const equalToPassword = (rule, value, callback) => {
if (password.newPassword !== value) { if (password.newPassword !== value) {
callback(new Error(t('profile.password.diffPwd'))) callback(new Error(t('profile.password.diffPwd')))
} else { } else {

View File

@ -6,6 +6,7 @@ const { t } = useI18n() // 国际化
export const rules = reactive({ export const rules = reactive({
name: [required], name: [required],
sort: [required], sort: [required],
status: [required],
// email: [required], // email: [required],
email: [ email: [
{ required: true, message: t('profile.rules.mail'), trigger: 'blur' }, { required: true, message: t('profile.rules.mail'), trigger: 'blur' },

View File

@ -5,7 +5,8 @@ const { t } = useI18n()
export const dictDataRules = reactive({ export const dictDataRules = reactive({
label: [required], label: [required],
value: [required], value: [required],
sort: [required] sort: [required],
status: [required]
}) })
// crudSchemas // crudSchemas
export const crudSchemas = reactive<VxeCrudSchema>({ export const crudSchemas = reactive<VxeCrudSchema>({

View File

@ -4,7 +4,8 @@ const { t } = useI18n() // 国际化
// 表单校验 // 表单校验
export const dictTypeRules = reactive({ export const dictTypeRules = reactive({
name: [required], name: [required],
type: [required] type: [required],
status: [required]
}) })
// 新增 + 修改 // 新增 + 修改
const crudSchemas = reactive<VxeCrudSchema>({ const crudSchemas = reactive<VxeCrudSchema>({

View File

@ -38,7 +38,7 @@
</XTable> </XTable>
</ContentWrap> </ContentWrap>
<!-- 添加或修改菜单对话框 --> <!-- 添加或修改菜单对话框 -->
<XModal id="menuModel" v-model="dialogVisible" :title="dialogTitle"> <XModal id="menuModel" height="70%" v-model="dialogVisible" :title="dialogTitle">
<!-- 对话框(添加 / 修改) --> <!-- 对话框(添加 / 修改) -->
<el-form <el-form
ref="formRef" ref="formRef"

View File

@ -12,6 +12,8 @@
</template> </template>
<template #actionbtns_default="{ row }"> <template #actionbtns_default="{ row }">
<XTextButton preIcon="ep:edit" :title="t('action.edit')" @click="handleUpdate(row.id)" /> <XTextButton preIcon="ep:edit" :title="t('action.edit')" @click="handleUpdate(row.id)" />
<!-- 操作详情 -->
<XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row.id)" />
<XTextButton preIcon="ep:delete" :title="t('action.del')" @click="deleteData(row.id)" /> <XTextButton preIcon="ep:delete" :title="t('action.del')" @click="deleteData(row.id)" />
</template> </template>
</XTable> </XTable>
@ -48,6 +50,37 @@
</el-card> </el-card>
</template> </template>
</Form> </Form>
<!-- 对话框(详情) -->
<Descriptions
v-if="actionType === 'detail'"
:schema="allSchemas.detailSchema"
:data="detailData"
>
<template #menuIds>
<el-card class="cardHeight">
<template #header>
<div class="card-header">
全选/全不选:
<el-switch
v-model="treeNodeAll"
inline-prompt
active-text="是"
inactive-text="否"
disabled
/>
</div>
</template>
<el-tree
ref="treeRefDetail"
node-key="id"
show-checkbox
:props="defaultProps"
:data="menuOptionsDetail"
empty-text="加载中,请稍候"
/>
</el-card>
</template>
</Descriptions>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<template #footer> <template #footer>
<!-- 按钮保存 --> <!-- 按钮保存 -->
@ -77,9 +110,11 @@ const { t } = useI18n() // 国际化
const message = useMessage() // const message = useMessage() //
const menuOptions = ref<any[]>([]) // const menuOptions = ref<any[]>([]) //
const menuOptionsDetail = ref<any[]>([]) // -
const menuExpand = ref(false) const menuExpand = ref(false)
const menuNodeAll = ref(false) const menuNodeAll = ref(false)
const treeRef = ref<InstanceType<typeof ElTree>>() const treeRef = ref<InstanceType<typeof ElTree>>()
const treeRefDetail = ref<InstanceType<typeof ElTree>>()
const treeNodeAll = ref(false) const treeNodeAll = ref(false)
const formRef = ref<FormExpose>() // Ref const formRef = ref<FormExpose>() // Ref
const loading = ref(false) // const loading = ref(false) //
@ -100,10 +135,21 @@ const validateCategory = (rule: any, value: any, callback: any) => {
} }
} }
rules.menuIds = [{ required: true, validator: validateCategory, trigger: 'blur' }] rules.menuIds = [{ required: true, validator: validateCategory, trigger: 'blur' }]
const dealTreeData = (item) => {
for (var i = 0; i < item.length; i++) {
item[i].disabled = true
if (item[i].children) {
dealTreeData(item[i].children)
}
}
return item
}
const getTree = async () => { const getTree = async () => {
const res = await listSimpleMenusApi() const res = await listSimpleMenusApi()
menuOptions.value = handleTree(res) menuOptions.value = handleTree(res)
let treeData = JSON.parse(JSON.stringify(handleTree(res)))
menuOptionsDetail.value = dealTreeData(treeData)
} }
const [registerTable, { reload, deleteData }] = useXTable({ const [registerTable, { reload, deleteData }] = useXTable({
@ -140,6 +186,19 @@ const handleUpdate = async (rowId: number) => {
}) })
} }
//
let detailData = ref()
const handleDetail = async (rowId: number) => {
setDialogTile('detail')
//
const res = await TenantPackageApi.getTenantPackageApi(rowId)
//
res.menuIds?.forEach((item: any) => {
unref(treeRefDetail)?.setChecked(item, true, false)
})
detailData.value = res
}
// //
const submitForm = async () => { const submitForm = async () => {
const elForm = unref(formRef)?.getElFormRef() const elForm = unref(formRef)?.getElFormRef()