refactor(删除框架升级遗留文件): 🔥 删除多余vue文件
This commit is contained in:
H0nGzA1
@@ -1,167 +0,0 @@
|
|||||||
<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.ruleForm" size="default" label-width="90px">
|
|
||||||
<el-row :gutter="35">
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="上级部门">
|
|
||||||
<el-cascader
|
|
||||||
:options="state.deptData"
|
|
||||||
:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
|
|
||||||
placeholder="请选择部门"
|
|
||||||
clearable
|
|
||||||
class="w100"
|
|
||||||
v-model="state.ruleForm.deptLevel"
|
|
||||||
>
|
|
||||||
<template #default="{ node, data }">
|
|
||||||
<span>{{ data.deptName }}</span>
|
|
||||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
||||||
</template>
|
|
||||||
</el-cascader>
|
|
||||||
</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.ruleForm.deptName" placeholder="请输入部门名称" clearable></el-input>
|
|
||||||
</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.ruleForm.person" placeholder="请输入负责人" clearable></el-input>
|
|
||||||
</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.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
|
||||||
</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.ruleForm.email" placeholder="请输入" clearable></el-input>
|
|
||||||
</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.ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="部门状态">
|
|
||||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="部门描述">
|
|
||||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入部门描述" maxlength="150"></el-input>
|
|
||||||
</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>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="systemDeptDialog">
|
|
||||||
import { reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
// 定义子组件向父组件传值/事件
|
|
||||||
const emit = defineEmits(['refresh']);
|
|
||||||
|
|
||||||
// 定义变量内容
|
|
||||||
const deptDialogFormRef = ref();
|
|
||||||
const state = reactive({
|
|
||||||
ruleForm: {
|
|
||||||
deptLevel: [] as string[], // 上级部门
|
|
||||||
deptName: '', // 部门名称
|
|
||||||
person: '', // 负责人
|
|
||||||
phone: '', // 手机号
|
|
||||||
email: '', // 邮箱
|
|
||||||
sort: 0, // 排序
|
|
||||||
status: true, // 部门状态
|
|
||||||
describe: '', // 部门描述
|
|
||||||
},
|
|
||||||
deptData: [] as DeptTreeType[], // 部门数据
|
|
||||||
dialog: {
|
|
||||||
isShowDialog: false,
|
|
||||||
type: '',
|
|
||||||
title: '',
|
|
||||||
submitTxt: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 打开弹窗
|
|
||||||
const openDialog = (type: string, row: RowDeptType) => {
|
|
||||||
if (type === 'edit') {
|
|
||||||
row.deptLevel = ['vueNextAdmin'];
|
|
||||||
row.person = 'lyt';
|
|
||||||
row.phone = '12345678910';
|
|
||||||
row.email = 'vueNextAdmin@123.com';
|
|
||||||
state.ruleForm = row;
|
|
||||||
state.dialog.title = '修改部门';
|
|
||||||
state.dialog.submitTxt = '修 改';
|
|
||||||
} else {
|
|
||||||
state.dialog.title = '新增部门';
|
|
||||||
state.dialog.submitTxt = '新 增';
|
|
||||||
// 清空表单，此项需加表单验证才能使用
|
|
||||||
// nextTick(() => {
|
|
||||||
// deptDialogFormRef.value.resetFields();
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
state.dialog.isShowDialog = true;
|
|
||||||
getMenuData();
|
|
||||||
};
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeDialog = () => {
|
|
||||||
state.dialog.isShowDialog = false;
|
|
||||||
};
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 提交
|
|
||||||
const onSubmit = () => {
|
|
||||||
closeDialog();
|
|
||||||
emit('refresh');
|
|
||||||
// if (state.dialog.type === 'add') { }
|
|
||||||
};
|
|
||||||
// 初始化部门数据
|
|
||||||
const getMenuData = () => {
|
|
||||||
state.deptData.push({
|
|
||||||
deptName: 'vueNextAdmin',
|
|
||||||
createTime: new Date().toLocaleString(),
|
|
||||||
status: true,
|
|
||||||
sort: Math.random(),
|
|
||||||
describe: '顶级部门',
|
|
||||||
id: Math.random(),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
deptName: 'IT外包服务',
|
|
||||||
createTime: new Date().toLocaleString(),
|
|
||||||
status: true,
|
|
||||||
sort: Math.random(),
|
|
||||||
describe: '总部',
|
|
||||||
id: Math.random(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deptName: '资本控股',
|
|
||||||
createTime: new Date().toLocaleString(),
|
|
||||||
status: true,
|
|
||||||
sort: Math.random(),
|
|
||||||
describe: '分部',
|
|
||||||
id: Math.random(),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 暴露变量
|
|
||||||
defineExpose({
|
|
||||||
openDialog,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-add-dic-container">
|
|
||||||
<el-dialog title="新增字典" v-model="isShowDialog" width="769px">
|
|
||||||
<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert>
|
|
||||||
<el-form :model="ruleForm" size="default" label-width="90px">
|
|
||||||
<el-row :gutter="35">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="字典名称">
|
|
||||||
<el-input v-model="ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input>
|
|
||||||
</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="ruleForm.fieldName" placeholder="请输入字段名，拼接 ruleForm.list" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="字典状态">
|
|
||||||
<el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-row :gutter="35" v-for="(v, k) in ruleForm.list" :key="k">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item :prop="`list[${k}].label`">
|
|
||||||
<template #label>
|
|
||||||
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
|
|
||||||
<el-icon>
|
|
||||||
<ele-Plus />
|
|
||||||
</el-icon>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
|
|
||||||
<el-icon>
|
|
||||||
<ele-Delete />
|
|
||||||
</el-icon>
|
|
||||||
</el-button>
|
|
||||||
<span class="ml10">字段</span>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"> </el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="属性" :prop="`list[${k}].value`">
|
|
||||||
<el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"> </el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="字典描述">
|
|
||||||
<el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
|
|
||||||
</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">新 增</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { reactive, toRefs, defineComponent } from 'vue';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'systemAddDic',
|
|
||||||
setup() {
|
|
||||||
const state = reactive({
|
|
||||||
isShowDialog: false,
|
|
||||||
ruleForm: {
|
|
||||||
dicName: '', // 字典名称
|
|
||||||
fieldName: '', // 字段名
|
|
||||||
status: true, // 字典状态
|
|
||||||
list: [
|
|
||||||
// 子集字段 + 属性值
|
|
||||||
{
|
|
||||||
id: Math.random(),
|
|
||||||
label: '',
|
|
||||||
value: '',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
describe: '', // 字典描述
|
|
||||||
fieldNameList: [], // 字段名: [{子集字段 + 属性值}]
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 打开弹窗
|
|
||||||
const openDialog = () => {
|
|
||||||
state.isShowDialog = true;
|
|
||||||
};
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeDialog = () => {
|
|
||||||
state.isShowDialog = false;
|
|
||||||
};
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 新增
|
|
||||||
const onSubmit = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 新增行
|
|
||||||
const onAddRow = () => {
|
|
||||||
state.ruleForm.list.push({
|
|
||||||
id: Math.random(),
|
|
||||||
label: '',
|
|
||||||
value: '',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 删除行
|
|
||||||
const onDelRow = (k: number) => {
|
|
||||||
state.ruleForm.list.splice(k, 1);
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
openDialog,
|
|
||||||
closeDialog,
|
|
||||||
onCancel,
|
|
||||||
onSubmit,
|
|
||||||
onAddRow,
|
|
||||||
onDelRow,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,162 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-edit-dic-container">
|
|
||||||
<el-dialog title="修改字典" v-model="isShowDialog" width="769px">
|
|
||||||
<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert>
|
|
||||||
<el-form :model="ruleForm" size="default" label-width="90px">
|
|
||||||
<el-row :gutter="35">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="字典名称">
|
|
||||||
<el-input v-model="ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input>
|
|
||||||
</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="ruleForm.fieldName" placeholder="请输入字段名，拼接 ruleForm.list" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="字典状态">
|
|
||||||
<el-switch v-model="ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-row :gutter="35" v-for="(v, k) in ruleForm.list" :key="k">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item :prop="`list[${k}].label`">
|
|
||||||
<template #label>
|
|
||||||
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
|
|
||||||
<el-icon>
|
|
||||||
<ele-Plus />
|
|
||||||
</el-icon>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
|
|
||||||
<el-icon>
|
|
||||||
<ele-Delete />
|
|
||||||
</el-icon>
|
|
||||||
</el-button>
|
|
||||||
<span class="ml10">字段</span>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"> </el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="属性" :prop="`list[${k}].value`">
|
|
||||||
<el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"> </el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="字典描述">
|
|
||||||
<el-input v-model="ruleForm.describe" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
|
|
||||||
</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">修 改</el-button>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { reactive, toRefs, defineComponent } from 'vue';
|
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
|
||||||
interface RuleFormList {
|
|
||||||
id: number;
|
|
||||||
label: string;
|
|
||||||
value: string;
|
|
||||||
}
|
|
||||||
interface RuleFormState {
|
|
||||||
dicName: string;
|
|
||||||
fieldName: string;
|
|
||||||
status: boolean;
|
|
||||||
list: RuleFormList[];
|
|
||||||
describe: string;
|
|
||||||
fieldNameList: Array<any>;
|
|
||||||
}
|
|
||||||
interface DicState {
|
|
||||||
isShowDialog: boolean;
|
|
||||||
ruleForm: RuleFormState;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'systemEditDic',
|
|
||||||
setup() {
|
|
||||||
const state = reactive<DicState>({
|
|
||||||
isShowDialog: false,
|
|
||||||
ruleForm: {
|
|
||||||
dicName: '', // 字典名称
|
|
||||||
fieldName: '', // 字段名
|
|
||||||
status: true, // 字典状态
|
|
||||||
list: [
|
|
||||||
// 子集字段 + 属性值
|
|
||||||
{
|
|
||||||
id: Math.random(),
|
|
||||||
label: '',
|
|
||||||
value: '',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
describe: '', // 字典描述
|
|
||||||
fieldNameList: [], // 字段名: [{子集字段 + 属性值}]
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 打开弹窗
|
|
||||||
const openDialog = (row: RuleFormState) => {
|
|
||||||
if (row.fieldName === 'SYS_UERINFO') {
|
|
||||||
row.list = [
|
|
||||||
{ id: Math.random(), label: 'sex', value: '1' },
|
|
||||||
{ id: Math.random(), label: 'sex', value: '0' },
|
|
||||||
];
|
|
||||||
} else {
|
|
||||||
row.list = [
|
|
||||||
{ id: Math.random(), label: 'role', value: 'admin' },
|
|
||||||
{ id: Math.random(), label: 'role', value: 'common' },
|
|
||||||
{ id: Math.random(), label: 'roleName', value: '超级管理员' },
|
|
||||||
{ id: Math.random(), label: 'roleName', value: '普通用户' },
|
|
||||||
];
|
|
||||||
}
|
|
||||||
state.ruleForm = row;
|
|
||||||
state.isShowDialog = true;
|
|
||||||
};
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeDialog = () => {
|
|
||||||
state.isShowDialog = false;
|
|
||||||
};
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 新增
|
|
||||||
const onSubmit = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 新增行
|
|
||||||
const onAddRow = () => {
|
|
||||||
state.ruleForm.list.push({
|
|
||||||
id: Math.random(),
|
|
||||||
label: '',
|
|
||||||
value: '',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 删除行
|
|
||||||
const onDelRow = (k: number) => {
|
|
||||||
state.ruleForm.list.splice(k, 1);
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
openDialog,
|
|
||||||
closeDialog,
|
|
||||||
onCancel,
|
|
||||||
onSubmit,
|
|
||||||
onAddRow,
|
|
||||||
onDelRow,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,150 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-dic-dialog-container">
|
|
||||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
|
||||||
<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert>
|
|
||||||
<el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
|
||||||
<el-row :gutter="35">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="字典名称">
|
|
||||||
<el-input v-model="state.ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input>
|
|
||||||
</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.ruleForm.fieldName" placeholder="请输入字段名，拼接 ruleForm.list" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="字典状态">
|
|
||||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-row :gutter="35" v-for="(v, k) in state.ruleForm.list" :key="k">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item :prop="`list[${k}].label`">
|
|
||||||
<template #label>
|
|
||||||
<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
|
|
||||||
<el-icon>
|
|
||||||
<ele-Plus />
|
|
||||||
</el-icon>
|
|
||||||
</el-button>
|
|
||||||
<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
|
|
||||||
<el-icon>
|
|
||||||
<ele-Delete />
|
|
||||||
</el-icon>
|
|
||||||
</el-button>
|
|
||||||
<span class="ml10">字段</span>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"> </el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="属性" :prop="`list[${k}].value`">
|
|
||||||
<el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"> </el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="字典描述">
|
|
||||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
|
|
||||||
</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>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="systemDicDialog">
|
|
||||||
import { reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
// 定义子组件向父组件传值/事件
|
|
||||||
const emit = defineEmits(['refresh']);
|
|
||||||
|
|
||||||
// 定义变量内容
|
|
||||||
const dicDialogFormRef = ref();
|
|
||||||
const state = reactive({
|
|
||||||
ruleForm: {
|
|
||||||
dicName: '', // 字典名称
|
|
||||||
fieldName: '', // 字段名
|
|
||||||
status: true, // 字典状态
|
|
||||||
list: [] as ListType[], // 子集字段 + 属性值
|
|
||||||
describe: '', // 字典描述
|
|
||||||
},
|
|
||||||
dialog: {
|
|
||||||
isShowDialog: false,
|
|
||||||
type: '',
|
|
||||||
title: '',
|
|
||||||
submitTxt: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 打开弹窗
|
|
||||||
const openDialog = (type: string, row: RowDicType) => {
|
|
||||||
if (type === 'edit') {
|
|
||||||
if (row.fieldName === 'SYS_UERINFO') {
|
|
||||||
row.list = [
|
|
||||||
{ id: Math.random(), label: 'sex', value: '1' },
|
|
||||||
{ id: Math.random(), label: 'sex', value: '0' },
|
|
||||||
];
|
|
||||||
} else {
|
|
||||||
row.list = [
|
|
||||||
{ id: Math.random(), label: 'role', value: 'admin' },
|
|
||||||
{ id: Math.random(), label: 'role', value: 'common' },
|
|
||||||
{ id: Math.random(), label: 'roleName', value: '超级管理员' },
|
|
||||||
{ id: Math.random(), label: 'roleName', value: '普通用户' },
|
|
||||||
];
|
|
||||||
}
|
|
||||||
state.ruleForm = row;
|
|
||||||
state.dialog.title = '修改字典';
|
|
||||||
state.dialog.submitTxt = '修 改';
|
|
||||||
} else {
|
|
||||||
state.dialog.title = '新增字典';
|
|
||||||
state.dialog.submitTxt = '新 增';
|
|
||||||
// 清空表单，此项需加表单验证才能使用
|
|
||||||
// nextTick(() => {
|
|
||||||
// dicDialogFormRef.value.resetFields();
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
state.dialog.isShowDialog = true;
|
|
||||||
};
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeDialog = () => {
|
|
||||||
state.dialog.isShowDialog = false;
|
|
||||||
};
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 提交
|
|
||||||
const onSubmit = () => {
|
|
||||||
closeDialog();
|
|
||||||
emit('refresh');
|
|
||||||
// if (state.dialog.type === 'add') { }
|
|
||||||
};
|
|
||||||
// 新增行
|
|
||||||
const onAddRow = () => {
|
|
||||||
state.ruleForm.list.push({
|
|
||||||
id: Math.random(),
|
|
||||||
label: '',
|
|
||||||
value: '',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
// 删除行
|
|
||||||
const onDelRow = (k: number) => {
|
|
||||||
state.ruleForm.list.splice(k, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 暴露变量
|
|
||||||
defineExpose({
|
|
||||||
openDialog,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,159 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-dic-container">
|
|
||||||
<el-card shadow="hover">
|
|
||||||
<div class="system-user-search mb15">
|
|
||||||
<el-input size="default" placeholder="请输入字典名称" style="max-width: 180px"> </el-input>
|
|
||||||
<el-button size="default" type="primary" class="ml10">
|
|
||||||
<el-icon>
|
|
||||||
<ele-Search />
|
|
||||||
</el-icon>
|
|
||||||
查询
|
|
||||||
</el-button>
|
|
||||||
<el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
|
|
||||||
<el-icon>
|
|
||||||
<ele-FolderAdd />
|
|
||||||
</el-icon>
|
|
||||||
新增字典
|
|
||||||
</el-button>
|
|
||||||
</div>
|
|
||||||
<el-table :data="tableData.data" style="width: 100%">
|
|
||||||
<el-table-column type="index" label="序号" width="50" />
|
|
||||||
<el-table-column prop="dicName" label="字典名称" show-overflow-tooltip></el-table-column>
|
|
||||||
<el-table-column prop="fieldName" label="字段名" show-overflow-tooltip></el-table-column>
|
|
||||||
<el-table-column prop="status" label="字典状态" show-overflow-tooltip>
|
|
||||||
<template #default="scope">
|
|
||||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
|
||||||
<el-tag type="info" v-else>禁用</el-tag>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column prop="describe" label="字典描述" show-overflow-tooltip></el-table-column>
|
|
||||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
|
|
||||||
<el-table-column label="操作" width="100">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">修改</el-button>
|
|
||||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<el-pagination
|
|
||||||
@size-change="onHandleSizeChange"
|
|
||||||
@current-change="onHandleCurrentChange"
|
|
||||||
class="mt15"
|
|
||||||
:pager-count="5"
|
|
||||||
:page-sizes="[10, 20, 30]"
|
|
||||||
v-model:current-page="tableData.param.pageNum"
|
|
||||||
background
|
|
||||||
v-model:page-size="tableData.param.pageSize"
|
|
||||||
layout="total, sizes, prev, pager, next, jumper"
|
|
||||||
:total="tableData.total"
|
|
||||||
>
|
|
||||||
</el-pagination>
|
|
||||||
</el-card>
|
|
||||||
<AddDic ref="addDicRef" />
|
|
||||||
<EditDic ref="editDicRef" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
|
|
||||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
|
||||||
import AddDic from '/@/views/system/dic/component/addDic.vue';
|
|
||||||
import EditDic from '/@/views/system/dic/component/editDic.vue';
|
|
||||||
|
|
||||||
// 定义接口来定义对象的类型
|
|
||||||
interface TableDataRow {
|
|
||||||
dicName: string;
|
|
||||||
fieldName: string;
|
|
||||||
describe: string;
|
|
||||||
status: boolean;
|
|
||||||
createTime: string;
|
|
||||||
}
|
|
||||||
interface TableDataState {
|
|
||||||
tableData: {
|
|
||||||
data: Array<TableDataRow>;
|
|
||||||
total: number;
|
|
||||||
loading: boolean;
|
|
||||||
param: {
|
|
||||||
pageNum: number;
|
|
||||||
pageSize: number;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'systemDic',
|
|
||||||
components: { AddDic, EditDic },
|
|
||||||
setup() {
|
|
||||||
const addDicRef = ref();
|
|
||||||
const editDicRef = ref();
|
|
||||||
const state = reactive<TableDataState>({
|
|
||||||
tableData: {
|
|
||||||
data: [],
|
|
||||||
total: 0,
|
|
||||||
loading: false,
|
|
||||||
param: {
|
|
||||||
pageNum: 1,
|
|
||||||
pageSize: 10,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// 初始化表格数据
|
|
||||||
const initTableData = () => {
|
|
||||||
const data: Array<TableDataRow> = [];
|
|
||||||
for (let i = 0; i < 2; i++) {
|
|
||||||
data.push({
|
|
||||||
dicName: i === 0 ? '角色标识' : '用户性别',
|
|
||||||
fieldName: i === 0 ? 'SYS_ROLE' : 'SYS_UERINFO',
|
|
||||||
describe: i === 0 ? '这是角色字典' : '这是用户性别字典',
|
|
||||||
status: true,
|
|
||||||
createTime: new Date().toLocaleString(),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
state.tableData.data = data;
|
|
||||||
state.tableData.total = state.tableData.data.length;
|
|
||||||
};
|
|
||||||
// 打开新增字典弹窗
|
|
||||||
const onOpenAddDic = () => {
|
|
||||||
addDicRef.value.openDialog();
|
|
||||||
};
|
|
||||||
// 打开修改字典弹窗
|
|
||||||
const onOpenEditDic = (row: TableDataRow) => {
|
|
||||||
editDicRef.value.openDialog(row);
|
|
||||||
};
|
|
||||||
// 删除字典
|
|
||||||
const onRowDel = (row: TableDataRow) => {
|
|
||||||
ElMessageBox.confirm(`此操作将永久删除字典名称：“${row.dicName}”，是否继续?`, '提示', {
|
|
||||||
confirmButtonText: '确认',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
ElMessage.success('删除成功');
|
|
||||||
})
|
|
||||||
.catch(() => {});
|
|
||||||
};
|
|
||||||
// 分页改变
|
|
||||||
const onHandleSizeChange = (val: number) => {
|
|
||||||
state.tableData.param.pageSize = val;
|
|
||||||
};
|
|
||||||
// 分页改变
|
|
||||||
const onHandleCurrentChange = (val: number) => {
|
|
||||||
state.tableData.param.pageNum = val;
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
initTableData();
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
addDicRef,
|
|
||||||
editDicRef,
|
|
||||||
onOpenAddDic,
|
|
||||||
onOpenEditDic,
|
|
||||||
onRowDel,
|
|
||||||
onHandleSizeChange,
|
|
||||||
onHandleCurrentChange,
|
|
||||||
...toRefs(state),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,260 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-menu-dialog-container">
|
|
||||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
|
||||||
<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="80px">
|
|
||||||
<el-row :gutter="35">
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="上级菜单">
|
|
||||||
<el-cascader
|
|
||||||
:options="state.menuData"
|
|
||||||
:props="{ checkStrictly: true, value: 'path', label: 'title' }"
|
|
||||||
placeholder="请选择上级菜单"
|
|
||||||
clearable
|
|
||||||
class="w100"
|
|
||||||
v-model="state.ruleForm.menuSuperior"
|
|
||||||
>
|
|
||||||
<template #default="{ node, data }">
|
|
||||||
<span>{{ data.title }}</span>
|
|
||||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
||||||
</template>
|
|
||||||
</el-cascader>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="菜单类型">
|
|
||||||
<el-radio-group v-model="state.ruleForm.menuType">
|
|
||||||
<el-radio label="menu">菜单</el-radio>
|
|
||||||
<el-radio label="btn">按钮</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</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.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<template v-if="state.ruleForm.menuType === 'menu'">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="路由名称">
|
|
||||||
<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
|
|
||||||
</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.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
|
|
||||||
</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.ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="菜单图标">
|
|
||||||
<IconSelector placeholder="请输入菜单图标" v-model="state.ruleForm.meta.icon" />
|
|
||||||
</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.ruleForm.component" placeholder="组件路径" clearable></el-input>
|
|
||||||
</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.ruleForm.meta.isLink"
|
|
||||||
placeholder="外链/内嵌时链接地址（http:xxx.com）"
|
|
||||||
clearable
|
|
||||||
:disabled="!state.ruleForm.isLink"
|
|
||||||
>
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="权限标识">
|
|
||||||
<el-select v-model="state.ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
|
|
||||||
<el-option label="admin" value="admin"></el-option>
|
|
||||||
<el-option label="common" value="common"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</template>
|
|
||||||
<template v-if="state.ruleForm.menuType === 'btn'">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="权限标识">
|
|
||||||
<el-input v-model="state.ruleForm.btnPower" placeholder="请输入权限标识" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</template>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="菜单排序">
|
|
||||||
<el-input-number v-model="state.ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<template v-if="state.ruleForm.menuType === 'menu'">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="是否隐藏">
|
|
||||||
<el-radio-group v-model="state.ruleForm.meta.isHide">
|
|
||||||
<el-radio :label="true">隐藏</el-radio>
|
|
||||||
<el-radio :label="false">不隐藏</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="页面缓存">
|
|
||||||
<el-radio-group v-model="state.ruleForm.meta.isKeepAlive">
|
|
||||||
<el-radio :label="true">缓存</el-radio>
|
|
||||||
<el-radio :label="false">不缓存</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="是否固定">
|
|
||||||
<el-radio-group v-model="state.ruleForm.meta.isAffix">
|
|
||||||
<el-radio :label="true">固定</el-radio>
|
|
||||||
<el-radio :label="false">不固定</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="是否外链">
|
|
||||||
<el-radio-group v-model="state.ruleForm.isLink" :disabled="state.ruleForm.meta.isIframe">
|
|
||||||
<el-radio :label="true">是</el-radio>
|
|
||||||
<el-radio :label="false">否</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="是否内嵌">
|
|
||||||
<el-radio-group v-model="state.ruleForm.meta.isIframe" @change="onSelectIframeChange">
|
|
||||||
<el-radio :label="true">是</el-radio>
|
|
||||||
<el-radio :label="false">否</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
</template>
|
|
||||||
</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>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="systemMenuDialog">
|
|
||||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
|
||||||
import { storeToRefs } from 'pinia';
|
|
||||||
import { useRoutesList } from '/@/stores/routesList';
|
|
||||||
import { i18n } from '/@/i18n/index';
|
|
||||||
// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";
|
|
||||||
|
|
||||||
// 定义子组件向父组件传值/事件
|
|
||||||
const emit = defineEmits(['refresh']);
|
|
||||||
|
|
||||||
// 引入组件
|
|
||||||
const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
|
|
||||||
|
|
||||||
// 定义变量内容
|
|
||||||
const menuDialogFormRef = ref();
|
|
||||||
const stores = useRoutesList();
|
|
||||||
const { routesList } = storeToRefs(stores);
|
|
||||||
const state = reactive({
|
|
||||||
// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
|
|
||||||
ruleForm: {
|
|
||||||
menuSuperior: [], // 上级菜单
|
|
||||||
menuType: 'menu', // 菜单类型
|
|
||||||
name: '', // 路由名称
|
|
||||||
component: '', // 组件路径
|
|
||||||
isLink: false, // 是否外链
|
|
||||||
menuSort: 0, // 菜单排序
|
|
||||||
path: '', // 路由路径
|
|
||||||
redirect: '', // 路由重定向，有子集 children 时
|
|
||||||
meta: {
|
|
||||||
title: '', // 菜单名称
|
|
||||||
icon: '', // 菜单图标
|
|
||||||
isHide: false, // 是否隐藏
|
|
||||||
isKeepAlive: true, // 是否缓存
|
|
||||||
isAffix: false, // 是否固定
|
|
||||||
isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
|
|
||||||
isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
|
|
||||||
roles: '', // 权限标识，取角色管理
|
|
||||||
},
|
|
||||||
btnPower: '', // 菜单类型为按钮时，权限标识
|
|
||||||
},
|
|
||||||
menuData: [] as RouteItems, // 上级菜单数据
|
|
||||||
dialog: {
|
|
||||||
isShowDialog: false,
|
|
||||||
type: '',
|
|
||||||
title: '',
|
|
||||||
submitTxt: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 获取 pinia 中的路由
|
|
||||||
const getMenuData = (routes: RouteItems) => {
|
|
||||||
const arr: RouteItems = [];
|
|
||||||
routes.map((val: RouteItem) => {
|
|
||||||
val['title'] = i18n.global.t(val.meta?.title as string);
|
|
||||||
arr.push({ ...val });
|
|
||||||
if (val.children) getMenuData(val.children);
|
|
||||||
});
|
|
||||||
return arr;
|
|
||||||
};
|
|
||||||
// 打开弹窗
|
|
||||||
const openDialog = (type: string, row?: any) => {
|
|
||||||
if (type === 'edit') {
|
|
||||||
// 模拟数据，实际请走接口
|
|
||||||
row.menuType = 'menu';
|
|
||||||
row.menuSort = Math.random();
|
|
||||||
row.component = `${row.component} `
|
|
||||||
.match(/\'(.+)\'/g)
|
|
||||||
?.join('')
|
|
||||||
.replace(/\'/g, '');
|
|
||||||
state.ruleForm = row;
|
|
||||||
state.dialog.title = '修改菜单';
|
|
||||||
state.dialog.submitTxt = '修 改';
|
|
||||||
} else {
|
|
||||||
state.dialog.title = '新增菜单';
|
|
||||||
state.dialog.submitTxt = '新 增';
|
|
||||||
// 清空表单，此项需加表单验证才能使用
|
|
||||||
// nextTick(() => {
|
|
||||||
// menuDialogFormRef.value.resetFields();
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
state.dialog.type = type;
|
|
||||||
state.dialog.isShowDialog = true;
|
|
||||||
};
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeDialog = () => {
|
|
||||||
state.dialog.isShowDialog = false;
|
|
||||||
};
|
|
||||||
// 是否内嵌下拉改变
|
|
||||||
const onSelectIframeChange = () => {
|
|
||||||
if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
|
|
||||||
else state.ruleForm.isLink = false;
|
|
||||||
};
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 提交
|
|
||||||
const onSubmit = () => {
|
|
||||||
closeDialog(); // 关闭弹窗
|
|
||||||
emit('refresh');
|
|
||||||
// if (state.dialog.type === 'add') { }
|
|
||||||
// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
|
|
||||||
};
|
|
||||||
// 页面加载时
|
|
||||||
onMounted(() => {
|
|
||||||
state.menuData = getMenuData(routesList.value);
|
|
||||||
});
|
|
||||||
|
|
||||||
// 暴露变量
|
|
||||||
defineExpose({
|
|
||||||
openDialog,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
@@ -1,236 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-role-dialog-container">
|
|
||||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
|
||||||
<el-form ref="roleDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
|
||||||
<el-row :gutter="35">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="角色名称">
|
|
||||||
<el-input v-model="state.ruleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="角色标识">
|
|
||||||
<template #label>
|
|
||||||
<el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
|
|
||||||
<span>角色标识</span>
|
|
||||||
</el-tooltip>
|
|
||||||
</template>
|
|
||||||
<el-input v-model="state.ruleForm.roleSign" placeholder="请输入角色标识" clearable></el-input>
|
|
||||||
</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.ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="角色状态">
|
|
||||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="角色描述">
|
|
||||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="菜单权限">
|
|
||||||
<el-tree :data="state.menuData" :props="state.menuProps" show-checkbox class="menu-data-tree" />
|
|
||||||
</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>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="systemRoleDialog">
|
|
||||||
import { reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
// 定义子组件向父组件传值/事件
|
|
||||||
const emit = defineEmits(['refresh']);
|
|
||||||
|
|
||||||
// 定义变量内容
|
|
||||||
const roleDialogFormRef = ref();
|
|
||||||
const state = reactive({
|
|
||||||
ruleForm: {
|
|
||||||
roleName: '', // 角色名称
|
|
||||||
roleSign: '', // 角色标识
|
|
||||||
sort: 0, // 排序
|
|
||||||
status: true, // 角色状态
|
|
||||||
describe: '', // 角色描述
|
|
||||||
},
|
|
||||||
menuData: [] as TreeType[],
|
|
||||||
menuProps: {
|
|
||||||
children: 'children',
|
|
||||||
label: 'label',
|
|
||||||
},
|
|
||||||
dialog: {
|
|
||||||
isShowDialog: false,
|
|
||||||
type: '',
|
|
||||||
title: '',
|
|
||||||
submitTxt: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 打开弹窗
|
|
||||||
const openDialog = (type: string, row: RowRoleType) => {
|
|
||||||
if (type === 'edit') {
|
|
||||||
state.ruleForm = row;
|
|
||||||
state.dialog.title = '修改角色';
|
|
||||||
state.dialog.submitTxt = '修 改';
|
|
||||||
} else {
|
|
||||||
state.dialog.title = '新增角色';
|
|
||||||
state.dialog.submitTxt = '新 增';
|
|
||||||
// 清空表单，此项需加表单验证才能使用
|
|
||||||
// nextTick(() => {
|
|
||||||
// roleDialogFormRef.value.resetFields();
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
state.dialog.isShowDialog = true;
|
|
||||||
getMenuData();
|
|
||||||
};
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeDialog = () => {
|
|
||||||
state.dialog.isShowDialog = false;
|
|
||||||
};
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 提交
|
|
||||||
const onSubmit = () => {
|
|
||||||
closeDialog();
|
|
||||||
emit('refresh');
|
|
||||||
// if (state.dialog.type === 'add') { }
|
|
||||||
};
|
|
||||||
// 获取菜单结构数据
|
|
||||||
const getMenuData = () => {
|
|
||||||
state.menuData = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
label: '系统管理',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 11,
|
|
||||||
label: '菜单管理',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 111,
|
|
||||||
label: '菜单新增',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 112,
|
|
||||||
label: '菜单修改',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 113,
|
|
||||||
label: '菜单删除',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 114,
|
|
||||||
label: '菜单查询',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 12,
|
|
||||||
label: '角色管理',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 121,
|
|
||||||
label: '角色新增',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 122,
|
|
||||||
label: '角色修改',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 123,
|
|
||||||
label: '角色删除',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 124,
|
|
||||||
label: '角色查询',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 13,
|
|
||||||
label: '用户管理',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 131,
|
|
||||||
label: '用户新增',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 132,
|
|
||||||
label: '用户修改',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 133,
|
|
||||||
label: '用户删除',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 134,
|
|
||||||
label: '用户查询',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
label: '权限管理',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 21,
|
|
||||||
label: '前端控制',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 211,
|
|
||||||
label: '页面权限',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 212,
|
|
||||||
label: '页面权限',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 22,
|
|
||||||
label: '后端控制',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
id: 221,
|
|
||||||
label: '页面权限',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
};
|
|
||||||
|
|
||||||
// 暴露变量
|
|
||||||
defineExpose({
|
|
||||||
openDialog,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.system-role-dialog-container {
|
|
||||||
.menu-data-tree {
|
|
||||||
width: 100%;
|
|
||||||
border: 1px solid var(--el-border-color);
|
|
||||||
border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,187 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="system-user-dialog-container">
|
|
||||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
|
||||||
<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
|
||||||
<el-row :gutter="35">
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="账户名称">
|
|
||||||
<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
|
|
||||||
</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.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="关联角色">
|
|
||||||
<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100">
|
|
||||||
<el-option label="超级管理员" value="admin"></el-option>
|
|
||||||
<el-option label="普通用户" value="common"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="部门">
|
|
||||||
<el-cascader
|
|
||||||
:options="state.deptData"
|
|
||||||
:props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
|
|
||||||
placeholder="请选择部门"
|
|
||||||
clearable
|
|
||||||
class="w100"
|
|
||||||
v-model="state.ruleForm.department"
|
|
||||||
>
|
|
||||||
<template #default="{ node, data }">
|
|
||||||
<span>{{ data.deptName }}</span>
|
|
||||||
<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
|
|
||||||
</template>
|
|
||||||
</el-cascader>
|
|
||||||
</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.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
|
|
||||||
</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.ruleForm.email" placeholder="请输入" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="性别">
|
|
||||||
<el-select v-model="state.ruleForm.sex" placeholder="请选择" clearable class="w100">
|
|
||||||
<el-option label="男" value="男"></el-option>
|
|
||||||
<el-option label="女" value="女"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</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.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="账户过期">
|
|
||||||
<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
|
||||||
<el-form-item label="用户状态">
|
|
||||||
<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
|
||||||
</el-form-item>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
|
||||||
<el-form-item label="用户描述">
|
|
||||||
<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
|
|
||||||
</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>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="systemUserDialog">
|
|
||||||
import { reactive, ref } from 'vue';
|
|
||||||
|
|
||||||
// 定义子组件向父组件传值/事件
|
|
||||||
const emit = defineEmits(['refresh']);
|
|
||||||
|
|
||||||
// 定义变量内容
|
|
||||||
const userDialogFormRef = ref();
|
|
||||||
const state = reactive({
|
|
||||||
ruleForm: {
|
|
||||||
userName: '', // 账户名称
|
|
||||||
userNickname: '', // 用户昵称
|
|
||||||
roleSign: '', // 关联角色
|
|
||||||
department: [] as string[], // 部门
|
|
||||||
phone: '', // 手机号
|
|
||||||
email: '', // 邮箱
|
|
||||||
sex: '', // 性别
|
|
||||||
password: '', // 账户密码
|
|
||||||
overdueTime: '', // 账户过期
|
|
||||||
status: true, // 用户状态
|
|
||||||
describe: '', // 用户描述
|
|
||||||
},
|
|
||||||
deptData: [] as DeptTreeType[], // 部门数据
|
|
||||||
dialog: {
|
|
||||||
isShowDialog: false,
|
|
||||||
type: '',
|
|
||||||
title: '',
|
|
||||||
submitTxt: '',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// 打开弹窗
|
|
||||||
const openDialog = (type: string, row: RowUserType) => {
|
|
||||||
if (type === 'edit') {
|
|
||||||
state.ruleForm = row;
|
|
||||||
state.dialog.title = '修改用户';
|
|
||||||
state.dialog.submitTxt = '修 改';
|
|
||||||
} else {
|
|
||||||
state.dialog.title = '新增用户';
|
|
||||||
state.dialog.submitTxt = '新 增';
|
|
||||||
// 清空表单，此项需加表单验证才能使用
|
|
||||||
// nextTick(() => {
|
|
||||||
// userDialogFormRef.value.resetFields();
|
|
||||||
// });
|
|
||||||
}
|
|
||||||
state.dialog.isShowDialog = true;
|
|
||||||
getMenuData();
|
|
||||||
};
|
|
||||||
// 关闭弹窗
|
|
||||||
const closeDialog = () => {
|
|
||||||
state.dialog.isShowDialog = false;
|
|
||||||
};
|
|
||||||
// 取消
|
|
||||||
const onCancel = () => {
|
|
||||||
closeDialog();
|
|
||||||
};
|
|
||||||
// 提交
|
|
||||||
const onSubmit = () => {
|
|
||||||
closeDialog();
|
|
||||||
emit('refresh');
|
|
||||||
// if (state.dialog.type === 'add') { }
|
|
||||||
};
|
|
||||||
// 初始化部门数据
|
|
||||||
const getMenuData = () => {
|
|
||||||
state.deptData.push({
|
|
||||||
deptName: 'vueNextAdmin',
|
|
||||||
createTime: new Date().toLocaleString(),
|
|
||||||
status: true,
|
|
||||||
sort: Math.random(),
|
|
||||||
describe: '顶级部门',
|
|
||||||
id: Math.random(),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
deptName: 'IT外包服务',
|
|
||||||
createTime: new Date().toLocaleString(),
|
|
||||||
status: true,
|
|
||||||
sort: Math.random(),
|
|
||||||
describe: '总部',
|
|
||||||
id: Math.random(),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
deptName: '资本控股',
|
|
||||||
createTime: new Date().toLocaleString(),
|
|
||||||
status: true,
|
|
||||||
sort: Math.random(),
|
|
||||||
describe: '分部',
|
|
||||||
id: Math.random(),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 暴露变量
|
|
||||||
defineExpose({
|
|
||||||
openDialog,
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user