功能变化: 修复部分bug
This commit is contained in:
@@ -13,12 +13,12 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
||||
/**
|
||||
* 处理crud警告:Invalid prop: type check failed for prop "name". Expected String with value "2", got Number with value 2.
|
||||
*/
|
||||
res.data.forEach((item: any) => {
|
||||
item.dept = String(item.dept);
|
||||
if (item.role && Array.isArray(item.role) && item.role.length > 0) {
|
||||
item.role = item.role.map((r: number) => String(r));
|
||||
}
|
||||
});
|
||||
// res.data.forEach((item: any) => {
|
||||
// item.dept = String(item.dept);
|
||||
// if (item.role && Array.isArray(item.role) && item.role.length > 0) {
|
||||
// item.role = item.role.map((r: number) => String(r));
|
||||
// }
|
||||
// });
|
||||
return res;
|
||||
};
|
||||
const editRequest = async ({ form, row }: EditReq) => {
|
||||
@@ -218,13 +218,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
||||
url: '/api/system/dept/all_dept/',
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
getData: async ({ url }: { url: string }) => {
|
||||
return request({
|
||||
url: url,
|
||||
}).then((ret: any) => {
|
||||
return ret.data;
|
||||
});
|
||||
},
|
||||
}),
|
||||
column: {
|
||||
minWidth: 150, //最小列宽
|
||||
@@ -264,17 +257,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
|
||||
url: '/api/system/role/',
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
getData: async ({ url }: { url: string }) => {
|
||||
return request({
|
||||
url: url,
|
||||
params: {
|
||||
page: 1,
|
||||
limit: 10,
|
||||
},
|
||||
}).then((ret: any) => {
|
||||
return ret.data;
|
||||
});
|
||||
},
|
||||
}),
|
||||
column: {
|
||||
minWidth: 100, //最小列宽
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<div class="right">
|
||||
<img
|
||||
src="https://img-blog.csdnimg.cn/9eb1d85a417f4ed1ba7107f149ce3da1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbHl0LXRvcA==,size_16,color_FFFFFF,t_70,g_se,x_16"
|
||||
src="./img404.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BIN
web/src/views/system/error/img404.png
Normal file
BIN
web/src/views/system/error/img404.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -62,7 +62,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item v-if="!menuFormData.is_catalog" required label="框外显示">
|
||||
<el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" required label="是否内嵌">
|
||||
<el-switch v-model="menuFormData.is_iframe" width="60" inline-prompt active-text="是" inactive-text="否" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
@@ -151,6 +151,10 @@ export const createCrudOptions = function ({
|
||||
placeholder: '输入权限标识',
|
||||
},
|
||||
},
|
||||
valueBuilder(context){
|
||||
const {row,key} = context
|
||||
return row[key]
|
||||
}
|
||||
},
|
||||
sort: {
|
||||
title: '排序',
|
||||
|
||||
@@ -1,59 +1,69 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<el-row class="mx-2">
|
||||
<el-col xs="24" :sm="8" :md="6" :lg="4" :xl="4" class="p-1">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<p class="font-mono font-black text-center text-xl pb-5">
|
||||
部门列表
|
||||
<el-tooltip effect="dark" :content="content" placement="right">
|
||||
<el-icon>
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</p>
|
||||
<el-input v-model="filterText" :placeholder="placeholder" />
|
||||
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
|
||||
:filter-node-method="filterNode" icon="ArrowRightBold" :indent="12" @node-click="onTreeNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
<span class="text-center font-black font-normal">{{ node.label }}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col xs="24" :sm="16" :md="18" :lg="20" :xl="20" class="p-1">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<importExcel api="api/system/user/">导入 </importExcel>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<fs-page>
|
||||
<el-row class="mx-2">
|
||||
<el-col xs="24" :sm="8" :md="6" :lg="4" :xl="4" class="p-1">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<p class="font-mono font-black text-center text-xl pb-5">
|
||||
部门列表
|
||||
<el-tooltip effect="dark" :content="content" placement="right">
|
||||
<el-icon>
|
||||
<QuestionFilled/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</p>
|
||||
<el-input v-model="filterText" :placeholder="placeholder"/>
|
||||
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
|
||||
:filter-node-method="filterNode" icon="ArrowRightBold" :indent="38" highlight-current @node-click="onTreeNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
<element-tree-line :node="node" :showLabelLine="false" :indent="32">
|
||||
<span v-if="data.status" class="text-center font-black font-normal">
|
||||
<SvgIcon name="iconfont icon-shouye" color="var(--el-color-primary)"/> {{ node.label }}
|
||||
</span>
|
||||
<span v-else color="var(--el-color-primary)"> <SvgIcon name="iconfont icon-shouye"/> {{
|
||||
node.label
|
||||
}} </span>
|
||||
</element-tree-line>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col xs="24" :sm="16" :md="18" :lg="20" :xl="20" class="p-1">
|
||||
<el-card :body-style="{ height: '100%' }">
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding">
|
||||
<template #actionbar-right>
|
||||
<importExcel api="api/system/user/">导入</importExcel>
|
||||
</template>
|
||||
</fs-crud>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</fs-page>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="user">
|
||||
import { useExpose, useCrud } from '@fast-crud/fast-crud';
|
||||
import { createCrudOptions } from './crud';
|
||||
import {useExpose, useCrud} from '@fast-crud/fast-crud';
|
||||
import {createCrudOptions} from './crud';
|
||||
import * as api from './api';
|
||||
import { ElTree } from 'element-plus';
|
||||
import { ref, onMounted, watch, toRaw } from 'vue';
|
||||
import {ElTree} from 'element-plus';
|
||||
import {ref, onMounted, watch, toRaw, h} from 'vue';
|
||||
import XEUtils from 'xe-utils';
|
||||
import {getElementLabelLine} from 'element-tree-line';
|
||||
import importExcel from '/@/components/importExcel/index.vue'
|
||||
|
||||
const ElementTreeLine = getElementLabelLine(h);
|
||||
|
||||
interface Tree {
|
||||
id: number;
|
||||
name: string;
|
||||
status: boolean;
|
||||
children?: Tree[];
|
||||
id: number;
|
||||
name: string;
|
||||
status: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
interface APIResponseData {
|
||||
code?: number;
|
||||
data: [];
|
||||
msg?: string;
|
||||
code?: number;
|
||||
data: [];
|
||||
msg?: string;
|
||||
}
|
||||
|
||||
// 引入组件
|
||||
@@ -62,18 +72,18 @@ const filterText = ref('');
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>();
|
||||
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
icon: 'icon',
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
icon: 'icon',
|
||||
};
|
||||
|
||||
watch(filterText, (val) => {
|
||||
treeRef.value!.filter(val);
|
||||
treeRef.value!.filter(val);
|
||||
});
|
||||
|
||||
const filterNode = (value: string, data: Tree) => {
|
||||
if (!value) return true;
|
||||
return toRaw(data).name.indexOf(value) !== -1;
|
||||
if (!value) return true;
|
||||
return toRaw(data).name.indexOf(value) !== -1;
|
||||
};
|
||||
|
||||
let data = ref([]);
|
||||
@@ -83,27 +93,27 @@ const content = `
|
||||
`;
|
||||
|
||||
const getData = () => {
|
||||
api.GetDept({}).then((ret: APIResponseData) => {
|
||||
const responseData = ret.data;
|
||||
const result = XEUtils.toArrayTree(responseData, {
|
||||
parentKey: 'parent',
|
||||
children: 'children',
|
||||
strict: true,
|
||||
});
|
||||
api.GetDept({}).then((ret: APIResponseData) => {
|
||||
const responseData = ret.data;
|
||||
const result = XEUtils.toArrayTree(responseData, {
|
||||
parentKey: 'parent',
|
||||
children: 'children',
|
||||
strict: true,
|
||||
});
|
||||
|
||||
data.value = result;
|
||||
});
|
||||
data.value = result;
|
||||
});
|
||||
};
|
||||
|
||||
//树形点击事件
|
||||
const onTreeNodeClick = (node: any) => {
|
||||
const { id } = node;
|
||||
crudExpose.doSearch({ form: { dept: id } });
|
||||
const {id} = node;
|
||||
crudExpose.doSearch({form: {dept: id}});
|
||||
};
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
getData();
|
||||
getData();
|
||||
});
|
||||
|
||||
// crud组件的ref
|
||||
@@ -111,32 +121,32 @@ const crudRef = ref();
|
||||
// crud 配置的ref
|
||||
const crudBinding = ref();
|
||||
// 暴露的方法
|
||||
const { crudExpose } = useExpose({ crudRef, crudBinding });
|
||||
const {crudExpose} = useExpose({crudRef, crudBinding});
|
||||
// 你的crud配置
|
||||
const { crudOptions } = createCrudOptions({ crudExpose });
|
||||
const {crudOptions} = createCrudOptions({crudExpose});
|
||||
// 初始化crud配置
|
||||
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
|
||||
const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-row {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
|
||||
.el-col {
|
||||
height: 100%;
|
||||
}
|
||||
.el-col {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-card {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.font-normal {
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user