This commit is contained in:
GYYM
2024-11-18 22:05:18 +08:00
14 changed files with 355 additions and 292 deletions

View File

@@ -3,11 +3,13 @@
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' >
<el-form-item label="上级菜单" prop="pid" :label-width="100">
<el-tree-select
v-model="formContent.pid"
v-model="displayPid"
:data="functionList"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
@@ -20,7 +22,7 @@
<el-form-item label="图标" prop="icon" :label-width="100">
<IconSelect
:iconValue="formContent.icon"
@update:iconValue="(value) => formContent.icon = value"
@update:icon-value="iconValue => formContent.icon = iconValue"
placeholder="选择一个图标"
/>
</el-form-item>
@@ -37,8 +39,8 @@
<el-select v-model="formContent.type" clearable placeholder="请选择资源类型">
<el-option label="菜单" :value="0"></el-option>
<el-option label="按钮" :value="1"></el-option>
<el-option label="公共资源" :value="2"></el-option>
<el-option label="服务间调用资源" :value="3"></el-option>
<!-- <el-option label="公共资源" :value="2"></el-option>
<el-option label="服务间调用资源" :value="3"></el-option> -->
</el-select>
</el-form-item>
<el-form-item label="描述" prop="remark" :label-width="100">
@@ -67,8 +69,9 @@
const defaultProps = {
children: 'children',
label: 'name',
value: 'id'
};
const functionList = ref<Function.ResFunction[]>([])
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
@@ -91,7 +94,7 @@
})
return { dialogVisible, titleType, formContent }
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
@@ -136,12 +139,29 @@ const close = () => {
dialogFormRef.value?.resetFields()
}
// 计算属性,用于控制显示的 pid
const displayPid = computed({
get: () => {
return formContent.value.pid === '0' ? '' : formContent.value.pid;
},
set: (value) => {
formContent.value.pid = value;
}
});
// 保存数据
const save = () => {
try {
console.log(formContent.value)
dialogFormRef.value?.validate(async (valid: boolean) => {
console.log(formContent.value)
if (formContent.value.pid === undefined || formContent.value.pid === null || formContent.value.pid === '') {
formContent.value.pid = '0';
}
if (formContent.value.pids === undefined || formContent.value.pids === null || formContent.value.pids === '') {
formContent.value.pids = '0';
}
if (valid) {
if (formContent.value.id) {
await updateFunction(formContent.value);
@@ -152,20 +172,26 @@ const close = () => {
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
//console.error('验证过程中出现错误', err)
console.error('验证过程中出现错误', err)
}
}
const functionList = ref<Function.ResFunction[]>([])
// 打开弹窗,可能是新增,也可能是编辑
const open = async (sign: string, data: Function.ResFunction) => {
const response = await getFunctionListNoButton()
functionList.value = response.data as unknown as Function.ResFunction[]
titleType.value = sign
dialogVisible.value = true
if (formContent.value.pid ==='0') {
formContent.value.pid = '';
}
if (data.id) {
formContent.value = { ...data }
} else {

View File

@@ -28,11 +28,12 @@
import { useHandleData } from '@/hooks/useHandleData'
import type { Function } from "@/api/user/interface/function"
import ProTable from '@/components/ProTable/index.vue'
import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
import {Back, CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { useDictStore } from '@/stores/modules/dict'
import ResourcePopup from './components/resourcePopup.vue'
import {deleteFunction,getFunctionList} from '@/api/user/function/index'
import * as Icons from '@element-plus/icons-vue'
const dictStore = useDictStore()
const resourcePopup = ref()
// ProTable 实例
@@ -45,6 +46,8 @@
prop: 'name',
label: '名称',
minWidth: 150,
align:'left',
headerAlign: 'center',
search: { el: 'input' },
},
{
@@ -73,7 +76,18 @@
prop: 'icon',
label: '图标',
minWidth: 100,
render: scope => {
const customIcons: { [key: string]: any } = Icons
const iconKey = scope.row.icon; //
if (!iconKey || !customIcons[iconKey]) {
// 如果 iconKey 为空或未定义,或者 customIcons 中找不到对应的图标,返回一个空的 <span> 标签
return <span></span>;
}
const icon = customIcons[iconKey]; // 如果找不到图标,使用默认图标
return (
<el-button icon={icon} />
);
},
},
{
prop: 'path',
@@ -97,6 +111,7 @@
minWidth: 70,
render: scope => {
return (
<el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '禁用'} </el-tag>
)
},

View File

@@ -9,8 +9,8 @@
<el-form-item label="用户名" prop='name' :label-width="100">
<el-input v-model="formContent.name" placeholder="请输入用户名" autocomplete="off" />
</el-form-item>
<el-form-item label="登录名" prop='loginName' :label-width="100">
<el-input v-model="formContent.loginName" placeholder="请输入登录名" autocomplete="off" />
<el-form-item label="登录名" prop='loginName' :label-width="100" >
<el-input v-model="formContent.loginName" placeholder="请输入登录名" autocomplete="off" :disabled="LoginNameIsShow"/>
</el-form-item>
<el-form-item label="密码" prop='password' :label-width="100" v-if="IsPasswordShow">
<el-input type="password" v-model="formContent.password" show-password placeholder="请输入密码" autocomplete="off" />
@@ -64,6 +64,7 @@
const dialogFormRef = ref()
const IsPasswordShow = ref(false)
const roleList = ref<Role.RoleBO[]>([])
const LoginNameIsShow = ref(false)
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
@@ -112,7 +113,7 @@
// 指定正则,此处是数字正则
{ pattern: /^[A-Za-z\u4e00-\u9fa5]{1,16}$/, message: '名称需1~16位的英文或汉字', trigger: 'blur' }],
loginName: [{ required: true, message: '登录名必填!', trigger: 'blur' },
{ pattern: /^[a-zA-Z_.]{1}[a-zA-Z0-9_.]{2,15}$/, message: '登录名需2-15位的字母数字符号', trigger: 'blur' }],
{ pattern: /^[a-zA-Z]{1}[a-zA-Z0-9]{2,15}$/, message: '格式错误需以字母开头长度为3-16位的字母数字', trigger: 'blur' }],
password: [{ required: true, message: '密码必填!', trigger: 'blur' },
{ pattern: /^(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/, message: '密码长度为8-16需包含特殊字符', trigger: 'blur' }],
})
@@ -156,12 +157,14 @@
dialogVisible.value = true
if (data.id) {
IsPasswordShow.value = false
LoginNameIsShow.value = true
formContent.value = { ...data }
console.log(formContent.value,111);
} else {
IsPasswordShow.value = true
LoginNameIsShow.value = false
resetFormContent()
}
}