admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source 
# Conflicts:
#	web/src/router/route.ts
This commit is contained in:
H0nGzA1
2023-02-20 16:04:38 +08:00
parent 0cbcf8caaa 97e3ca72be
commit 5a7e3e5e2f
12 changed files with 1650 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/.eslintrc.js
View File

@@ -37,7 +37,7 @@ module.exports = {
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-redeclare': 'error',
'@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
'@typescript-eslint/no-unused-vars': [2],
'@typescript-eslint/no-unused-vars': ['off'],
'vue/custom-event-name-casing': 'off',
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
@@ -67,7 +67,8 @@ module.exports = {
'generator-star-spacing': 'off',
'no-unreachable': 'off',
'no-multiple-template-root': 'off',
'no-unused-vars': 'error',
'no-unused-vars': 'warn',
'vue/no-unused-vars': "off",
'no-v-model-argument': 'off',
'no-case-declarations': 'off',
'no-console': 'error',

6
web/index.html
View File

@@ -18,11 +18,11 @@
<body>
<div id="app"></div>
<script type="text/javascript">
var _hmt = _hmt || [];
// let _hmt = _hmt || [];
(function () {
var hm = document.createElement('script');
let hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?d9c8b87d10717013641458b300c552e4';
var s = document.getElementsByTagName('script')[0];
let s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

3
web/package.json
View File

@@ -11,6 +11,7 @@
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"@fast-crud/fast-crud": "^1.9.0",
"@fast-crud/fast-extends": "^1.9.0",
"@fast-crud/ui-element": "^1.9.0",
"@vitejs/plugin-vue-jsx": "^3.0.0",
"@wangeditor/editor": "^5.1.23",
@@ -82,4 +83,4 @@
"type": "git",
"url": "https://gitee.com/huge-dream/django-vue3-admin.git"
}
}
}

208
web/src/components/tableSelector/index.vue Normal file
View File

@@ -0,0 +1,208 @@
<template>
<div>{{props.modelValue}}</div>
<el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple"
@remove-tag="removeTag" v-model="data" placeholder="请选择" @visible-change="visibleChange">
<template #empty>
<div class="option">
<el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict"
@clear="getDict">
<template #append>
<el-button type="primary" icon="Search"/>
</template>
</el-input>
<el-table
ref="tableRef"
:data="tableData"
size="mini"
border
row-key="id"
style="width: 400px"
max-height="200"
height="200"
:highlight-current-row="!props.tableConfig.isMultiple"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
>
<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55"/>
<el-table-column fixed type="index" label="#" width="50"/>
<el-table-column :prop="item.prop" :label="item.label" :width="item.width"
v-for="(item,index) in props.tableConfig.columns"/>
</el-table>
<el-pagination style="margin-top: 10px" background
v-model:current-page="pageConfig.page"
v-model:page-size="pageConfig.limit"
layout="prev, pager, next"
:total="pageConfig.total"
@current-change="handlePageChange"
/>
</div>
</template>
</el-select>
</template>
<script setup lang="ts">
import {defineProps, onMounted, reactive, ref, toRaw, watch} from 'vue'
import {dict} from '@fast-crud/fast-crud'
import XEUtils from "xe-utils";
import qs from 'qs'
const props = defineProps({
modelValue: {},
tableConfig: {
url: null,
label: null, //显示值
value: null, //数据值
isTree:false,
data: [],//默认数据
isMultiple: false, //是否多选
columns: [], //每一项对应的列表项
}
} as any)
const emit = defineEmits(['update:modelValue'])
// tableRef
const tableRef = ref()
// template上使用data
const data = ref()
// 多选值
const multipleSelection = ref()
watch(multipleSelection, // 监听multipleSelection的变化，
(value) => {
const {tableConfig} = props
if (!tableConfig.isMultiple) {
data.value = value ? value[tableConfig.label] : null
} else {
const result = value ? value.map((item: any) => {
return item[tableConfig.label]
}) : null
data.value = result
}
}, // 当multipleSelection值触发后，同步修改data.value的值
{immediate: true} // 立即触发一次，给data赋值初始值
)
// 搜索值
const search = ref(undefined)
//表格数据
const tableData = ref()
// 分页的配置
const pageConfig = reactive({
page: 1,
limit: 10,
total: 0
})
/**
* 表格多选
* @param val:Array
*/
const handleSelectionChange = (val: any) => {
multipleSelection.value = val
const {tableConfig} = props
const result = val.map((item: any) => {
return item[tableConfig.value]
})
emit('update:modelValue', result)
}
/**
* 表格单选
* @param val:Object
*/
const handleCurrentChange = (val: any) => {
multipleSelection.value = val
const {tableConfig} = props
emit('update:modelValue', val[tableConfig.value])
}
/**
* 获取字典值
*/
const getDict = async () => {
const url = props.tableConfig.url
const params = {
page: pageConfig.page,
limit: pageConfig.limit,
search: search
}
const dicts = dict({url: url, params: params})
await dicts.reloadDict()
const dictData = dicts.data
const {data, page, limit, total} = dictData
pageConfig.page = page
pageConfig.limit = limit
pageConfig.total = total
if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
if(props.tableConfig.isTree){
tableData.value = XEUtils.toArrayTree(data,{parentKey: 'parent', key: 'id', children: 'children'})
}else{
tableData.value = data
}
} else {
tableData.value = props.tableConfig.data
}
}
/**
* 下拉框展开/关闭
* @param bool
*/
const visibleChange = (bool: any) => {
if (bool) {
getDict()
}
}
/**
* 分页
* @param page
*/
const handlePageChange = (page: any) => {
pageConfig.page = page
getDict()
}
const getDictByValue = async ()=>{
const url = props.tableConfig.url
const dicts = dict({url: url, params: {}})
await dicts.reloadDict()
const dictData = dicts.data
console.log(dictData)
return dictData
}
// 监听modelValue的变化，更新数据
watch(()=>{
return props.modelValue
},(value)=>{
},{immediate: true})
</script>
<style scoped>
.option {
height: auto;
line-height: 1;
padding: 5px;
background-color: #fff;
}
</style>
<style lang="scss">
.popperClass {
height: 320px;
}
.el-select-dropdown__wrap {
max-height: 310px !important;
}
.tableSelector {
.el-icon, .el-tag__close {
display: none;
}
}
</style>

12
web/src/settings.ts
View File

@@ -6,7 +6,9 @@ import { setLogger } from '@fast-crud/fast-crud';
// element
import ui from '@fast-crud/ui-element';
import { request } from '/@/utils/service';
//扩展包
import {FsExtendsEditor} from "@fast-crud/fast-extends";
import "@fast-crud/fast-extends/dist/style.css";
export default {
async install(app: any, options: any) {
// 先安装ui
@@ -16,7 +18,7 @@ export default {
//i18n, //i18n配置，可选，默认使用中文，具体用法请看demo里的 src/i18n/index.js 文件
// 此处配置公共的dictRequest（字典请求）
async dictRequest({ dict }: any) {
return await request({ url: dict.url }); //根据dict的url，异步返回一个字典数组
return await request({ url: dict.url,params:dict.params || {} }); //根据dict的url，异步返回一个字典数组
},
//公共crud配置
commonOptions() {
@@ -52,6 +54,12 @@ export default {
};
},
});
//富文本
app.use(FsExtendsEditor,{
wangEditor:{
width:300,
}
})
setLogger({ level: 'error' });
// 设置自动染色
const dictComponentList = ['dict-cascader', 'dict-checkbox', 'dict-radio', 'dict-select', 'dict-switch', 'dict-tree'];

6
web/src/views/system/log/loginLog/crud.tsx
View File

@@ -54,12 +54,6 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
},
search: {

3
web/src/views/system/menu/crud.tsx
View File

@@ -204,6 +204,9 @@ export const createCrudOptions = function ({ crudExpose,menuButtonRef }: { crudE
},
placeholder: '请输入菜单名称'
},
},
column:{
width:180,
}
},
icon: {

12
web/src/views/system/messageCenter/api.ts
View File

@@ -1,14 +1,16 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import {request} from '/@/utils/service';
import {PageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/message_center/';
export const apiPrefix = '/api/system/dept/';
export function GetList(query: PageQuery) {
return request({
url: apiPrefix,
method: 'get',
data: query,
params: query,
});
}
export function GetObj(id: InfoReq) {
return request({
url: apiPrefix + id,
@@ -36,6 +38,6 @@ export function DelObj(id: DelReq) {
return request({
url: apiPrefix + id + '/',
method: 'delete',
data: { id },
data: {id},
});
}

256
web/src/views/system/messageCenter/crud.tsx
View File

@@ -1,23 +1,26 @@
import * as api from "./api";
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, } from "@fast-crud/fast-crud";
import { request } from "/@/utils/service";
import { dictionary } from "/@/utils/dictionary";
import {dict, compute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
import {request} from "/@/utils/service";
import {dictionary} from "/@/utils/dictionary";
import tableSelector from "/@/components/tableSelector/index.vue"
import {shallowRef} from "vue";
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
export const createCrudOptions = function ({crudExpose}: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
const editRequest = async ({form, row}: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }: DelReq) => {
const delRequest = async ({row}: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
const addRequest = async ({form}: AddReq) => {
return await api.AddObj(form);
};
return {
@@ -29,23 +32,230 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
delRequest
},
columns: {
_index: {
title: '序号',
form: { show: false },
column: {
//type: 'index',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
id: {
title: 'id',
form: {
show: false
}
},
title: {
title: '标题',
search: {
disabled: false
},
type: ["text", "colspan"],
form: {
rules: [ // 表单校验规则
{
required: true,
message: '必填项'
}
],
component: {span: 24, placeholder: '请输入标题'}
}
},
is_read: {
title: '是否已读',
type: 'dict-select',
column: {
show: false
},
dict: dict({
data: [
{label: '已读', value: true, color: 'success'},
{label: '未读', value: false, color: 'danger'}
]
}),
form: {
show: false
}
},
target_type: {
title: '目标类型',
type: ['dict-radio', 'colspan'],
width: 120,
// show() {
// return vm.tabActivted === 'send'
// },
dict: dict({
data: [{value: 0, label: '按用户'}, {value: 1, label: '按角色'}, {
value: 2,
label: '按部门'
}, {value: 3, label: '通知公告'}]
}),
form: {
component: {
optionName: "el-radio-button"
},
rules: [
{
required: true,
message: '必选项',
trigger: ['blur', 'change']
}
]
}
},
target_user: {
title: '目标用户',
search: {
disabled: true
},
width: 130,
disabled: true,
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
tableConfig: {
url: '/api/system/user/',
label: 'name',
value: 'id',
isMultiple: true,
columns: [{
prop: 'name',
label: '用户名称',
width: 120
}, {
prop: 'phone',
label: '用户电话',
width: 120
}]
}
},
show: compute(({form}) => {
return form.target_type === 0
}),
rules: [ // 表单校验规则
{
required: true,
message: '必填项'
}
],
},
component: {
name: 'manyToMany',
valueBinding: 'user_info',
children: 'name'
}
},
target_role: {
title: '目标角色',
search: {
disabled: true
},
disabled: true,
width: 130,
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
tableConfig: {
url: '/api/system/role/',
label: 'name',
value: 'id',
isMultiple: true,
columns: [{
prop: 'name',
label: '角色名称'
},
{
prop: 'key',
label: '权限标识'
}]
}
},
show: compute(({form}) => {
return form.target_type === 1
}),
rules: [ // 表单校验规则
{
required: true,
message: '必填项'
}
]
},
component: {
name: 'manyToMany',
valueBinding: 'role_info',
children: 'name'
}
},
target_dept: {
title: '目标部门',
search: {
disabled: true
},
width: 130,
type: 'table-selector',
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
tableConfig: {
url: '/api/system/dept/all_dept/',
label: 'name',
value: 'id',
isTree: true,
isMultiple: true,
columns: [{
prop: 'name',
label: '部门名称'
},
{
prop: 'status_label',
label: '状态'
},
{
prop: 'parent_name',
label: '父级部门'
}]
}
},
show: compute(({form}) => {
return form.target_type === 2
}),
rules: [ // 表单校验规则
{
required: true,
message: '必填项'
}
]
}
},
content: {
title: '内容',
column: {
width: 300,
show: false
},
type: ["editor-wang5", "colspan"],
form: {
rules: [ // 表单校验规则
{
required: true,
message: '必填项'
}
],
component: {
// disabled: compute(({form}) => {
// return form.disabled;
// }),
id: "1", // 当同一个页面有多个editor时，需要配置不同的id
config: {},
uploader: {
type: "form",
buildUrl(res: any) {
return res.url;
}
}
}
}
}
}
},
}
}
}

20
web/src/views/system/messageCenter/index.vue
View File

@@ -1,26 +1,26 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
</fs-page>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import {ref, onMounted} from 'vue';
import {useExpose, useCrud} from '@fast-crud/fast-crud';
import {createCrudOptions} from './crud';
// crud组件的ref
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>

1149
web/yarn.lock
View File

File diff suppressed because it is too large Load Diff