Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
uuai
test_git
提交
616bd57c
T
test_git
项目概览
uuai
/
test_git
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
test_git
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
616bd57c
编写于
5月 07, 2022
作者:
W
wuyb@phxg.cn
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
table
上级
bb5d5920
变更
18
隐藏空白更改
内联
并排
Showing
18 changed file
with
408 addition
and
210 deletion
+408
-210
vite-demo/mock/table.js
vite-demo/mock/table.js
+31
-12
vite-demo/mock/user.js
vite-demo/mock/user.js
+4
-3
vite-demo/src/api/commonApi/index.js
vite-demo/src/api/commonApi/index.js
+49
-0
vite-demo/src/api/list.js
vite-demo/src/api/list.js
+10
-0
vite-demo/src/components/configForm/form.vue
vite-demo/src/components/configForm/form.vue
+27
-16
vite-demo/src/components/popups/drawer.vue
vite-demo/src/components/popups/drawer.vue
+7
-2
vite-demo/src/components/popups/modal.vue
vite-demo/src/components/popups/modal.vue
+13
-22
vite-demo/src/components/popups/popups.js
vite-demo/src/components/popups/popups.js
+6
-4
vite-demo/src/hook/useModal.js
vite-demo/src/hook/useModal.js
+62
-9
vite-demo/src/hook/useTableMdal.js
vite-demo/src/hook/useTableMdal.js
+68
-102
vite-demo/src/store/getters.js
vite-demo/src/store/getters.js
+2
-1
vite-demo/src/store/modules/user.js
vite-demo/src/store/modules/user.js
+1
-1
vite-demo/src/utils/request.js
vite-demo/src/utils/request.js
+9
-3
vite-demo/src/views/antd/table/components/fromModal.vue
vite-demo/src/views/antd/table/components/fromModal.vue
+81
-11
vite-demo/src/views/antd/table/index.vue
vite-demo/src/views/antd/table/index.vue
+25
-15
vite-demo/src/views/skills/components/jsx/btn1.vue
vite-demo/src/views/skills/components/jsx/btn1.vue
+3
-3
vite-demo/src/views/skills/components/jsx/index.vue
vite-demo/src/views/skills/components/jsx/index.vue
+6
-3
vite-demo/src/views/skills/components/jsx/renderFn.js
vite-demo/src/views/skills/components/jsx/renderFn.js
+4
-3
未找到文件。
vite-demo/mock/table.js
浏览文件 @
616bd57c
import
{
mock
}
from
"
mockjs
"
;
let
data
=
{
'
list
|1-10
'
:
[{
'
rows
|1-10
'
:
[{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'
id|+1
'
:
1
'
id|+1
'
:
1
,
'
name
'
:
'
@cname()
'
,
"
age|1-30
"
:
18
,
"
address
"
:
'
@county(true)
'
,
"
tags
"
:
'
@shuffle([
\'
LOSER
\'
,
\'
TEACHER
\'
,
\'
DEVELOPER
\'
,
\'
NICE
\'
,
\'
COOL
\'
], 1, 3)
'
}]
}
module
.
exports
=
[
//
登录
//
获取列表
{
url
:
'
/api/table/all
'
,
type
:
'
pos
t
'
,
type
:
'
ge
t
'
,
response
:
config
=>
{
const
{
token
}
=
config
.
body
if
(
!
token
)
{
const
{
token
}
=
config
.
headers
if
(
token
)
{
return
{
code
:
60204
,
message
:
'
token失效
'
code
:
200
,
data
:
data
}
}
return
{
code
:
200
,
data
:
{
count
:
data
.
length
,
rows
:
data
code
:
60204
,
data
:
token
,
message
:
'
token失效
'
}
}
},
{
url
:
'
/api/table/add
'
,
type
:
'
get
'
,
response
:
config
=>
{
const
{
token
}
=
config
.
headers
if
(
token
)
{
return
{
code
:
200
,
msg
:
'
ok
'
}
}
}
},
]
vite-demo/mock/user.js
浏览文件 @
616bd57c
...
...
@@ -54,14 +54,15 @@ module.exports = [
url
:
'
/api/user/info
'
,
type
:
'
get
'
,
response
:
config
=>
{
const
{
token
}
=
config
.
query
console
.
log
(
'
/api/user/info - config
'
,
config
);
const
{
token
}
=
config
.
headers
const
info
=
users
[
token
]
// mock error
if
(
!
info
)
{
return
{
code
:
50008
,
message
:
'
Login failed, unable to get user details.
'
message
:
'
获取信息失败
'
}
}
...
...
@@ -88,7 +89,7 @@ module.exports = [
url
:
'
/api/menu/getRouter
'
,
type
:
'
get
'
,
response
:
config
=>
{
const
{
token
}
=
config
.
query
const
{
token
}
=
config
.
headers
if
(
token
)
{
return
{
code
:
200
,
...
...
vite-demo/src/api/commonApi/index.js
0 → 100644
浏览文件 @
616bd57c
/**
* 封装一些公用的接口
*/
import
request
from
'
@/utils/request
'
;
// post
export
const
postAction
=
(
url
,
data
,
params
,
option
)
=>
{
return
request
({
url
,
method
:
'
post
'
,
data
,
params
,
...
option
});
};
// put
export
const
putAction
=
(
url
,
data
,
params
,
option
)
=>
{
return
request
({
url
,
method
:
'
put
'
,
data
,
params
,
...
option
});
};
// delete
export
const
deleteAction
=
(
url
,
data
,
params
,
option
)
=>
{
return
request
({
url
,
method
:
'
delete
'
,
data
,
params
,
...
option
});
};
// 所有查询方法 默认get
export
const
httpAction
=
(
url
,
params
,
data
,
method
=
'
get
'
,
option
)
=>
{
console
.
log
(
'
httpAction
'
,
url
,
params
,
data
,
method
=
'
get
'
,
option
);
return
request
({
url
,
method
,
data
,
params
,
...
option
});
};
vite-demo/src/api/list.js
0 → 100644
浏览文件 @
616bd57c
import
request
from
'
@/utils/request
'
export
function
tabelAll
(
data
)
{
console
.
log
(
data
);
return
request
({
url
:
'
/api/table/all
'
,
method
:
'
get
'
,
data
})
}
\ No newline at end of file
vite-demo/src/components/configForm/form.vue
浏览文件 @
616bd57c
...
...
@@ -13,8 +13,8 @@
<a-input-number
v-if=
"item.inputType === 'number'"
:disabled=
"item.disabled || hasDisabled"
v-model:value=
"formState[`$
{item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请输入'"
:min="item.min
?item.min:Infinity
"
:max="item.max
?item.max:Infinity
"/>
:min="item.min"
:max="item.max"/>
<!--多行文本-->
<a-textarea
v-if=
"item.inputType === 'textarea'"
:disabled=
"item.disabled || hasDisabled"
v-model:value=
"formState[`$
{item.fieldName}`]"
...
...
@@ -24,7 +24,8 @@
<!--单选-->
<a-radio-group
v-if=
"item.inputType === 'radio'"
:disabled=
"item.disabled || hasDisabled"
v-model:value=
"formState[`$
{item.fieldName}`]">
<a-radio
v-for=
"radio in item.options"
:key=
"radio.value"
:value=
"radio.value"
>
{{
radio
.
name
}}
<a-radio
v-for=
"radio in item.options"
:key=
"radio.value"
:value=
"radio.value"
>
{{
radio
.
name
}}
</a-radio>
</a-radio-group>
<!-- 多选-->
...
...
@@ -39,7 +40,7 @@
<a-select
v-if=
"item.inputType == 'select'"
allowClear
v-model=
"formState[`$
{item.fieldName}`]"
v-model
:value
=
"formState[`$
{item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请选择'"
:show-search="item.showSearch"
:options="item.options"
...
...
@@ -91,7 +92,7 @@
props
:
{
config
:
Object
,
},
setup
(
props
)
{
setup
(
props
,
{
emit
}
)
{
// 表单数据
const
formRef
=
ref
(
null
);
const
dateFormat
=
'
YYYY-MM-DD
'
;
...
...
@@ -101,7 +102,7 @@
const
initForm
=
()
=>
{
props
.
config
.
data
.
forEach
(
item
=>
{
if
(
item
.
inputType
!==
"
range
"
)
{
let
defaultVal
=
item
.
defaultVal
?
item
.
defaultVal
:
''
let
defaultVal
=
item
.
defaultVal
?
item
.
defaultVal
:
undefined
formState
[
`
${
item
.
fieldName
}
`
]
=
defaultVal
;
}
else
{
if
(
item
.
fieldName
)
{
...
...
@@ -122,25 +123,27 @@
let
validator
=
typeof
item
.
validator
===
'
function
'
?
item
.
validator
:
null
if
(
!
validator
)
{
rulesForm
[
item
.
fieldName
]
=
[{
whitespace
:
true
,
whitespace
:
item
.
required
?
item
.
required
:
false
,
// 必选时,空格是否会被视为错误
required
:
item
.
required
,
message
:
`
${
item
.
label
}
内容不能为空`
,
trigger
:
'
blur
'
,
message
:
`
${
item
.
label
}
不能为空`
,
// trigger: 'change',
type
:
item
.
inputType
===
'
number
'
?
'
number
'
:
'
string
'
}]
}
else
{
// 自定义效验内容
rulesForm
[
item
.
fieldName
]
=
[{
whitespace
:
tru
e
,
whitespace
:
item
.
required
?
item
.
required
:
fals
e
,
required
:
item
.
required
,
validator
:
validator
,
trigger
:
'
blur
'
,
// trigger: 'change
',
}]
}
}
}
});
console
.
log
(
'
rules
'
,
rulesForm
);
console
.
log
(
'
formState
'
,
formState
);
console
.
log
(
'
form -
rules
'
,
rulesForm
);
console
.
log
(
'
form
- form
State
'
,
formState
);
}
onMounted
(()
=>
{
...
...
@@ -149,7 +152,7 @@
// 时间选择
function
onInputChange
(
fieldName
,
date
,
dateStrings
,
type
)
{
//
console.log(fieldName, date, dateStrings, type);
console
.
log
(
fieldName
,
date
,
dateStrings
,
type
);
if
(
type
)
{
if
(
fieldName
&&
type
===
'
range
'
)
{
let
arr
=
fieldName
.
split
(
'
,
'
);
...
...
@@ -162,26 +165,34 @@
formState
.
endTime
=
dateStrings
[
1
];
}
}
else
{
formState
[
fieldName
]
=
date
?
moment
(
date
,
dateFormat
)
:
null
// moment(val).format("YYYY-MM-DD HH:mm:ss")
formState
[
fieldName
]
=
date
?
moment
(
date
).
format
(
dateFormat
)
:
null
// console.log('formState - moment', moment(date).format(dateFormat));
console
.
log
(
'
formState - str
'
,
moment
(
date
,
dateFormat
));
// console.log('formState', formState);
}
}
// 重置表单
const
resetForm
=
()
=>
{
formRef
.
value
.
resetFields
();
console
.
log
(
'
resetForm
'
,
formState
);
for
(
let
key
in
formState
)
{
formState
[
key
]
=
''
;
formState
[
key
]
=
undefined
;
}
emit
(
'
close
'
)
}
// 数据提交
const
onSubmit
=
()
=>
{
console
.
log
(
'
formRef
'
,
formRef
);
formRef
.
value
.
validate
()
.
then
(()
=>
{
console
.
log
(
'
values
'
,
toRaw
(
formState
));
let
data
=
getQuery
();
console
.
log
(
data
);
emit
(
'
ok
'
,
data
)
})
.
catch
((
error
)
=>
{
console
.
log
(
'
error
'
,
error
);
...
...
vite-demo/src/components/popups/drawer.vue
浏览文件 @
616bd57c
<
template
>
<a-drawer
:title=
"drawerTitle"
:title=
"title"
:width=
"drawerWidth"
:placement=
"drawerPlacement"
:closable=
"drawerClosable"
v-model:visible=
"isShow"
...
...
@@ -18,8 +19,12 @@
type
:
Boolean
,
default
:
false
},
drawerWidth
:{
type
:
[
Number
,
String
],
default
:
700
},
// 标题
drawerT
itle
:
{
t
itle
:
{
type
:
String
,
default
:
''
},
...
...
vite-demo/src/components/popups/modal.vue
浏览文件 @
616bd57c
...
...
@@ -2,19 +2,20 @@
<a-modal
:width=
"800"
:title=
"title"
:visible=
"isShow"
v-model
:visible=
"isShow"
:maskClosable=
"false"
:confirmLoading=
"confirmLoading"
@
ok=
"
handle
Ok"
@
cancel=
"
handle
Cancel"
@
ok=
"
modal
Ok"
@
cancel=
"
modal
Cancel"
>
<slot></slot>
<slot>
默认插槽
</slot>
</a-modal>
</
template
>
<
script
>
import
{
ref
,
watch
}
from
'
vue
'
import
{
useModal
}
from
"
@/hook/useModal
"
;
export
default
{
name
:
"
modalIndex
"
,
...
...
@@ -28,27 +29,17 @@
default
:
false
},
},
setup
(
props
,
content
)
{
console
.
log
(
'
props - modal
'
,
props
);
let
confirmLoading
=
ref
(
false
)
const
handleOk
=
(
e
)
=>
{
confirmLoading
.
value
=
true
content
.
emit
(
'
modalOk
'
);
handleCancel
()
setTimeout
(()
=>
{
confirmLoading
.
value
=
false
},
300
)
}
setup
(
props
,
{
emit
})
{
const
{
modalOk
,
modalCancel
,
}
=
useModal
(
emit
)
const
handleCancel
=
()
=>
{
content
.
emit
(
'
modalCancel
'
);
content
.
emit
(
'
update:isShow
'
,
false
);
}
return
{
handle
Ok
,
handle
Cancel
,
confirmLoading
modal
Ok
,
modal
Cancel
,
confirmLoading
:
false
}
}
}
...
...
vite-demo/src/components/popups/popups.js
浏览文件 @
616bd57c
...
...
@@ -3,7 +3,9 @@ import modal from './modal.vue'
import
{
h
}
from
'
vue
'
export
const
renderPopups
=
function
(
props
,
{
slots
})
{
console
.
log
(
'
renderPopups
'
,
props
);
return
props
.
type
===
'
modal
'
?
h
(
modal
,
slots
.
default
())
:
h
(
drawer
,
slots
.
default
())
}
const
paramsProps
=
{
isShow
:
props
.
isShow
,
title
:
props
.
title
,
}
return
props
.
type
===
'
modal
'
?
h
(
modal
,
paramsProps
,
slots
.
default
())
:
h
(
drawer
,
paramsProps
,
slots
.
default
())
}
\ No newline at end of file
vite-demo/src/hook/useModal.js
浏览文件 @
616bd57c
import
{
ref
,
reactive
,
computed
}
from
'
vue
'
import
{
ref
,
reactive
,
toRefs
,
computed
}
from
'
vue
'
import
{
postAction
,
putAction
,
deleteAction
,
httpAction
}
from
'
@/api/commonApi/index
'
;
// 设置模态框
export
function
useModal
()
{
const
isShow
=
ref
(
false
)
const
isModalLoading
=
ref
(
false
)
export
function
useModal
(
emit
)
{
const
useModalData
=
reactive
({
isShow
:
false
,
confirmLoading
:
false
})
const
onModalShow
=
()
=>
{
isShow
.
value
=
true
console
.
log
(
'
打开弹框
'
)
useModalData
.
isShow
=
true
console
.
log
(
'
modal - use
'
,
useModalData
.
isShow
);
}
const
modalOk
=
()
=>
{
console
.
log
(
'
确认
'
)
useModalData
.
isShow
=
false
}
const
modalCancel
=
()
=>
{
console
.
log
(
'
取消
'
)
console
.
log
(
'
modal - use - 取消
'
)
useModalData
.
isShow
=
false
console
.
log
(
useModalData
.
isShow
);
emit
(
'
update:isShow
'
,
false
)
}
const
handleOk
=
({
url
,
formItem
,
otherValues
=
{},
type
=
'
add
'
,
path
})
=>
{
useModalData
.
confirmLoading
=
true
;
let
axios
;
let
formData
=
Object
.
assign
(
formItem
,
otherValues
);
if
(
type
===
'
edit
'
)
{
// 修改
if
(
!
this
.
url
.
edit
)
{
message
.
error
(
'
请设置url.edit属性!
'
);
console
.
error
(
'
请设置url.edit属性!
'
);
return
;
}
axios
=
putAction
(
`
${
url
.
edit
}
/
${
path
}
`
,
formData
);
}
else
{
// 新增
if
(
!
url
.
add
)
{
message
.
error
(
'
请设置url.add属性!
'
);
console
.
error
(
'
请设置url.add属性!
'
);
return
;
}
axios
=
postAction
(
url
.
add
,
formData
);
}
axios
.
then
((
res
)
=>
{
if
(
res
.
code
===
201
||
res
.
code
===
202
)
{
this
.
$emit
(
'
ok
'
);
this
.
close
();
}
}).
catch
(
err
=>
{
console
.
error
(
err
);
}).
finally
(()
=>
{
useModalData
.
confirmLoading
=
false
;
});
}
// 根据屏幕变化,设置抽屉尺寸
// const resetScreenSize = () => {
// const screenWidth = document.body.clientWidth;
// if (screenWidth < 500) {
// this.drawerWidth = screenWidth;
// } else {
// this.drawerWidth = 700;
// }
// }
return
{
modalOk
,
modalCancel
,
onModalShow
,
isShow
...
toRefs
(
useModalData
),
handleOk
}
}
...
...
vite-demo/src/hook/useTableMdal.js
浏览文件 @
616bd57c
...
...
@@ -3,10 +3,10 @@
* useTable 表格查询,分页, 删除
* @modalMixin 弹窗新增,修改,详情
*/
import
{
ref
,
reactive
,
compu
ted
}
from
'
vue
'
import
{
message
,
confirm
}
from
'
ant-design-vue
'
// import { postAction, putAction, deleteAction, httpAction } from '
api/commonApi/index';
let
postAction
,
putAction
,
deleteAction
,
httpAction
;
import
{
ref
,
reactive
,
toRefs
,
computed
,
onMoun
ted
}
from
'
vue
'
import
{
message
,
Modal
}
from
'
ant-design-vue
'
import
{
postAction
,
putAction
,
deleteAction
,
httpAction
}
from
'
@/
api/commonApi/index
'
;
//
let postAction, putAction, deleteAction, httpAction;
let
filterObjByKey
,
parseDate
,
getMoment
,
formatObjDate
,
getTreeKeys
;
// import { filterObjByKey, parseDate, getMoment, formatObjDate, getTreeKeys } from 'utils/util';
...
...
@@ -61,15 +61,19 @@ export function usePaging() {
}
}
// 表格
export
function
useTable
(
url
)
{
const
{
ipagination
}
=
usePaging
()
let
tableData
=
reactive
({
// 数据源
dataSource
:
[],
})
let
isInitTable
=
true
,
// 是否初始化表格
// 查询条件
queryParam
=
{},
// 折叠区域查询条件
subQueryParam
=
{},
// 数据源
dataSource
=
[],
// 表格加载状态
tableLoading
=
ref
(
false
),
...
...
@@ -114,9 +118,9 @@ export function useTable(url) {
if
(
url
.
dataAll
)
{
// 数据和表格总数一起请求
httpAction
(
url
.
dataAll
,
data
).
then
((
res
)
=>
{
// 列表数据
if
(
res
.
code
===
200
)
{
dataSource
=
res
.
data
.
rows
;
tableData
.
dataSource
=
res
.
data
.
rows
;
ipagination
.
total
=
Number
(
res
.
data
.
count
);
console
.
log
(
dataSource
)
console
.
log
(
'
tableData.
'
,
tableData
.
dataSource
)
}
tableLoading
.
value
=
false
;
}).
catch
(
error
=>
{
...
...
@@ -126,7 +130,7 @@ export function useTable(url) {
}
else
{
// 数据和表格总数分开请求请求
httpAction
(
url
.
list
,
data
).
then
((
res
)
=>
{
// 列表数据
if
(
res
.
code
===
200
)
{
dataSource
=
res
.
data
;
tableData
.
dataSource
=
res
.
data
;
console
.
log
(
dataSource
)
}
tableLoading
.
value
=
false
;
...
...
@@ -157,7 +161,6 @@ export function useTable(url) {
return
params
;
}
// 表格行选择
const
onSelectChange
=
(
selectedRowKeys
,
selectionRows
)
=>
{
console
.
log
(
selectedRowKeys
,
selectionRows
)
...
...
@@ -214,7 +217,7 @@ export function useTable(url) {
// }
const
openModal
=
()
=>
{
this
.
showModal
=
true
;
showModal
.
value
=
true
;
}
// 批量删除
...
...
@@ -268,7 +271,7 @@ export function useTable(url) {
console
.
error
(
'
请设置url.delete属性!
'
);
return
;
}
confirm
({
Modal
.
confirm
({
title
:
'
确认删除
'
,
content
:
tip
,
centered
:
true
,
...
...
@@ -295,16 +298,19 @@ export function useTable(url) {
// 排序 分页
const
handleTableChange
=
(
pagination
,
filters
,
sorter
)
=>
{
ipagination
=
pagination
;
//
ipagination = pagination;
loadData
();
}
if
(
isInitTable
)
{
onMounted
(()
=>
{
loadData
();
}
}
)
return
{
ipagination
,
loadData
,
...
toRefs
(
tableData
),
// ipagination,
onSelectChange
};
};
...
...
@@ -331,7 +337,7 @@ const props = {
}
export
function
useModal
()
{
return
{
const
useModalData
=
reactive
(
{
// 弹窗设置
drawerWidth
:
700
,
// 布局
...
...
@@ -344,8 +350,7 @@ export function useModal() {
sm
:
{
span
:
16
}
},
confirmLoading
:
false
,
form
:
this
.
$form
.
createForm
(
this
)
}
})
const
disableSubmit
=
computed
({
get
:
()
=>
{
if
(
type
===
'
detail
'
)
{
...
...
@@ -353,95 +358,56 @@ export function useModal() {
}
return
false
;
},
set
:
()
=>
{
}
// 查看详情,禁用所有表单
})
const
close
=
()
=>
{
this
.
confirmLoading
=
false
;
this
.
disableSubmit
=
false
;
this
.
$emit
(
'
close
'
);
this
.
$emit
(
'
update:show
'
,
false
);
}
methods
:
{
// 回填数据
backfillData
()
{
this
.
resetScreenSize
();
// 回填数据
this
.
$nextTick
().
finally
(()
=>
{
this
.
form
.
resetFields
();
// 日期处理
if
(
this
.
type
!==
'
add
'
)
{
this
.
data
=
parseDate
(
this
.
data
);
setTimeout
(()
=>
{
this
.
form
.
setFieldsValue
(
this
.
data
);
}
)
}
})
;
}
,
handleOk
(
otherValues
=
{},
path
,
dateFormat
=
'
YYYY-MM-DD
'
)
{
this
.
confirmLoading
=
true
;
// 触发表单验证
this
.
form
.
validateFields
((
err
,
values
)
=>
{
if
(
!
err
)
{
let
formData
=
Object
.
assign
(
values
,
otherValues
);
formData
=
formatObjDate
(
formData
,
dateFormat
);
Object
.
keys
(
formData
).
forEach
(
item
=>
{
// 清空字符串前后空格
if
(
typeof
formData
[
item
]
===
'
string
'
)
{
formData
[
item
]
=
formData
[
item
].
trim
();
}
})
let
axios
;
if
(
this
.
type
===
'
edit
'
)
{
// 修改
if
(
!
this
.
url
.
edit
)
{
this
.
$message
.
error
(
'
请设置url.edit属性!
'
);
console
.
error
(
'
请设置url.edit属性!
'
);
return
;
}
axios
=
putAction
(
`
${
this
.
url
.
edit
}
/
${
path
}
`
,
formData
);
}
else
{
// 新增
if
(
!
this
.
url
.
add
)
{
this
.
$message
.
error
(
'
请设置url.add属性!
'
);
console
.
error
(
'
请设置url.add属性!
'
);
return
;
}
axios
=
postAction
(
this
.
url
.
add
,
formData
);
}
axios
.
then
((
res
)
=>
{
if
(
res
.
code
===
201
||
res
.
code
===
202
)
{
this
.
$emit
(
'
ok
'
);
this
.
close
();
}
}).
catch
(
err
=>
{
console
.
error
(
err
);
}).
finally
(()
=>
{
this
.
confirmLoading
=
false
;
});
}
else
{
this
.
confirmLoading
=
false
;
}
})
}
,
close
()
{
this
.
confirmLoading
=
false
;
this
.
disableSubmit
=
false
;
this
.
$emit
(
'
close
'
);
this
.
$emit
(
'
update:show
'
,
false
);
}
,
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize
()
{
const
screenWidth
=
document
.
body
.
clientWidth
;
if
(
screenWidth
<
500
)
{
this
.
drawerWidth
=
screenWidth
;
}
else
{
this
.
drawerWidth
=
700
;
const
handleOk
=
(
otherValues
=
{},
path
,
dateFormat
=
'
YYYY-MM-DD
'
)
=>
{
useModalData
.
confirmLoading
=
true
;
let
axios
;
if
(
this
.
type
===
'
edit
'
)
{
// 修改
if
(
!
this
.
url
.
edit
)
{
this
.
$message
.
error
(
'
请设置url.edit属性!
'
);
console
.
error
(
'
请设置url.edit属性!
'
);
return
;
}
axios
=
putAction
(
`
${
this
.
url
.
edit
}
/
${
path
}
`
,
formData
);
}
else
{
// 新增
if
(
!
this
.
url
.
add
)
{
this
.
$message
.
error
(
'
请设置url.add属性!
'
);
console
.
error
(
'
请设置url.add属性!
'
);
return
;
}
axios
=
postAction
(
this
.
url
.
add
,
formData
);
}
,
axios
.
then
((
res
)
=>
{
if
(
res
.
code
===
201
||
res
.
code
===
202
)
{
this
.
$emit
(
'
ok
'
);
this
.
close
();
}
}).
catch
(
err
=>
{
console
.
error
(
err
);
}).
finally
(()
=>
{
this
.
confirmLoading
=
false
;
});
}
// 根据屏幕变化,设置抽屉尺寸
const
resetScreenSize
=
()
=>
{
const
screenWidth
=
document
.
body
.
clientWidth
;
if
(
screenWidth
<
500
)
{
this
.
drawerWidth
=
screenWidth
;
}
else
{
this
.
drawerWidth
=
700
;
}
}
};
vite-demo/src/store/getters.js
浏览文件 @
616bd57c
const
getters
=
{
roles
:
state
=>
state
.
user
.
roles
,
// 用户权限
router
:
state
=>
state
.
permission
.
router
// 用户路由
router
:
state
=>
state
.
permission
.
router
,
// 用户路由
token
:
state
=>
state
.
user
.
token
// 用户路由
}
export
default
getters
\ No newline at end of file
vite-demo/src/store/modules/user.js
浏览文件 @
616bd57c
...
...
@@ -34,7 +34,7 @@ const user = {
// 获取用户信息
getUserInfo
({
commit
},
token
)
{
return
new
Promise
((
resolve
,
reject
)
=>
{
getInfo
(
token
).
then
(
res
=>
{
getInfo
().
then
(
res
=>
{
const
{
data
}
=
res
;
console
.
log
(
'
res
'
,
data
.
roles
)
commit
(
'
SER_USER_ROLES
'
,
data
.
roles
)
...
...
vite-demo/src/utils/request.js
浏览文件 @
616bd57c
import
axios
from
'
axios
'
import
{
Modal
,
message
}
from
'
ant-design-vue
'
import
store
from
'
@/store
'
import
store
from
'
@/store
/index
'
import
{
getToken
}
from
'
@/utils/auth
'
// create an axios instance
const
service
=
axios
.
create
({
baseURL
:
import
.
meta
.
env
.
BASE_API
,
// url = base url + request url
...
...
@@ -14,13 +15,15 @@ const service = axios.create({
service
.
interceptors
.
request
.
use
(
config
=>
{
// do something before request is sent
console
.
log
(
'
store
'
,
store
);
console
.
log
(
'
store.getters.token
'
,
store
.
getters
.
token
);
if
(
store
.
getters
.
token
)
{
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config
.
headers
[
'
X-T
oken
'
]
=
getToken
()
config
.
headers
[
'
t
oken
'
]
=
getToken
()
}
console
.
log
(
'
config
'
,
config
);
return
config
},
error
=>
{
...
...
@@ -34,6 +37,8 @@ service.interceptors.request.use(
service
.
interceptors
.
response
.
use
(
response
=>
{
const
res
=
response
.
data
console
.
log
(
'
response
'
,
response
);
if
(
res
.
code
!==
200
)
{
message
.
error
({
content
:
res
.
message
||
'
Error
'
,
...
...
@@ -57,6 +62,7 @@ service.interceptors.response.use(
}
return
Promise
.
reject
(
new
Error
(
res
.
message
||
'
Error
'
))
}
else
{
console
.
log
(
'
response
'
,
res
);
return
res
}
},
...
...
vite-demo/src/views/antd/table/components/fromModal.vue
浏览文件 @
616bd57c
<
template
>
<!--
<modal
>
-->
<!--
<div>
1232
</div>
-->
<!--
</modal>
-->
<renderPopups
:isShow=
"isShow"
:type=
"2"
>
<template>
drawer
</
template
>
<renderPopups
v-model:isShow=
"isShow"
:title=
"title"
type=
"drawer"
>
<a-spin
:spinning=
"confirmLoading"
>
<configForm
:config=
"configListForm"
ref=
"getQueryRef"
@
ok=
"query"
@
close=
"modalCancel"
></configForm>
</a-spin>
</renderPopups>
</
template
>
<
script
>
import
{
ref
,
reactive
}
from
'
vue
'
import
modal
from
'
@c/modal/index.vue
'
import
{
renderPopups
}
from
'
@c/popups/popups
'
import
{
useModal
}
from
"
@/hook/useModal
"
;
import
configForm
from
'
@c/configForm/form.vue
'
export
default
{
name
:
"
fromModal
"
,
props
:
{
isShow
:
Boolean
title
:
String
},
components
:
{
modal
,
renderPopups
renderPopups
,
configForm
},
setup
()
{
setup
(
props
,
{
emit
})
{
const
{
onModalShow
,
isShow
,
modalCancel
,
handleOk
,
confirmLoading
}
=
useModal
(
emit
)
let
spinning
=
ref
(
false
)
let
getQueryRef
=
ref
(
null
)
const
query
=
(
data
)
=>
{
console
.
log
(
'
spinning
'
,
data
);
handleOk
({
url
:
{
add
:
'
/api/table/add
'
},
formItem
:
data
})
}
let
configListForm
=
reactive
({
data
:
[
{
inputType
:
"
text
"
,
fieldName
:
"
name
"
,
required
:
true
,
label
:
"
姓名
"
,
placeholder
:
"
请输入姓名
"
},
{
inputType
:
"
number
"
,
fieldName
:
"
age
"
,
label
:
"
年龄
"
,
required
:
true
,
placeholder
:
"
请输入年龄
"
},
{
inputType
:
"
text
"
,
fieldName
:
"
address
"
,
label
:
"
地址
"
,
required
:
true
,
placeholder
:
"
请输入地址
"
},
{
inputType
:
"
date
"
,
fieldName
:
"
time
"
,
label
:
"
时间
"
,
required
:
true
,
placeholder
:
"
请选择时间
"
},
{
inputType
:
"
select
"
,
fieldName
:
"
tags
"
,
label
:
"
标签
"
,
required
:
true
,
placeholder
:
"
请选择
"
,
options
:
[
{
value
:
"
0
"
,
label
:
"
LOSER
"
},
{
value
:
"
1
"
,
label
:
"
TEACHER
"
},
{
value
:
"
2
"
,
label
:
"
DEVELOPER
"
},
{
value
:
"
3
"
,
label
:
"
NICE
"
},
{
value
:
"
4
"
,
label
:
"
COOL
"
},
]
}
],
})
return
{
onModalShow
,
isShow
,
modalCancel
,
//
confirmLoading
,
configListForm
,
getQueryRef
,
query
}
}
}
</
script
>
...
...
vite-demo/src/views/antd/table/index.vue
浏览文件 @
616bd57c
<
template
>
<a-space
direction=
"vertical"
style=
"width: 100%"
>
<a-button
@
click=
"onModalShow"
>
新增
</a-button>
<a-table
:columns=
"columns"
:data-source=
"data"
>
<a-button
@
click=
"bindModalShow"
>
新增
</a-button>
<a-table
:columns=
"columns"
:data-source=
"dataSource"
:rowKey=
"(row,index) => index"
>
<template
#name
="
{ text }">
{{
text
}}
</
template
>
<!--设置表头信息-->
<
template
#customTitle
>
...
...
@@ -32,7 +33,8 @@
</
template
>
</a-table>
</a-space>
<fromModal
v-model:isShow=
"isShow"
:title=
"13"
></fromModal>
<fromModal
ref=
"fromModalRef"
title=
"jsx组价"
></fromModal>
</template>
<
script
>
...
...
@@ -91,26 +93,34 @@
},
];
import
{
SmileOutlined
,
DownOutlined
}
from
'
@ant-design/icons-vue
'
;
import
{
useModal
}
from
"
@/hook/useModal
"
;
import
fromModal
from
'
./components/fromModal.vue
'
import
{
ref
}
from
'
vue
'
// import {tabelAll} from '@/api/list'
import
{
useTable
}
from
'
@/hook/useTableMdal
'
export
default
{
name
:
"
tableIndex
"
,
setup
()
{
const
{
modalOk
,
modalCancel
,
onModalShow
,
isShow
}
=
useModal
()
setup
(
props
,
{
emit
})
{
const
fromModalRef
=
ref
()
const
bindModalShow
=
()
=>
{
console
.
log
(
fromModalRef
.
value
);
fromModalRef
.
value
.
onModalShow
()
}
const
{
dataSource
}
=
useTable
({
dataAll
:
'
/api/table/all
'
})
console
.
log
(
'
dataSource
'
,
dataSource
);
return
{
data
,
columns
,
modalOk
,
modalCancel
,
onModalShow
,
isShow
dataSource
,
fromModalRef
,
bindModalShow
,
};
},
components
:
{
...
...
vite-demo/src/views/skills/components/jsx/btn1.vue
浏览文件 @
616bd57c
...
...
@@ -10,7 +10,7 @@
</div>
</
template
>
<
script
>
import
{
ref
,
defineComponent
}
from
'
vue
'
import
{
ref
,
defineComponent
,
watch
}
from
'
vue
'
export
default
defineComponent
({
name
:
'
btn1
'
,
...
...
@@ -22,9 +22,9 @@
setup
(
props
,
{
emit
})
{
console
.
log
(
'
props - btn
'
,
props
);
const
num
=
ref
(
1
)
const
close
=
()
=>
{
console
.
log
(
'
close
'
)
emit
(
'
close
'
);
console
.
log
(
'
props - close
'
,
'
close
'
)
emit
(
'
update:show
'
,
false
)
}
return
{
num
,
close
}
...
...
vite-demo/src/views/skills/components/jsx/index.vue
浏览文件 @
616bd57c
<
template
>
<button
@
click=
"componentsToggle"
>
切换
</button>
<button
@
click=
"onShow"
>
显示
</button>
<renderFn
:type=
"componentsType"
title=
"自定义title"
:show.sync
=
"isShow"
>
<renderFn
:type=
"componentsType"
title=
"自定义title"
v-model:show
=
"isShow"
>
<div
default=
"
{text}">
<p>
默认插槽: 111111
</p>
</div>
...
...
@@ -11,18 +11,21 @@
<!--
</
template
>
-->
</renderFn>
<!-- <btn1 title="自定义title" v-model:show="isShow"></btn1>-->
</template>
<
script
>
import
renderFn
from
'
./renderFn.js
'
import
vnode
from
"
./vnode
"
import
{
ref
}
from
'
vue
'
import
btn1
from
'
./btn1.vue
'
export
default
{
name
:
"
index
"
,
components
:
{
renderFn
,
vnode
vnode
,
btn1
},
setup
()
{
let
isShow
=
ref
(
false
)
...
...
vite-demo/src/views/skills/components/jsx/renderFn.js
浏览文件 @
616bd57c
import
btn1
from
'
./btn1.vue
'
import
btn2
from
'
./btn2.vue
'
import
{
h
,
watch
}
from
'
vue
'
import
{
h
}
from
'
vue
'
// export const renderFn = function (props, {slots}) {
//
...
...
@@ -14,13 +14,14 @@ import {h, watch} from 'vue'
export
default
{
props
:
[
'
type
'
,
'
show
'
,
'
title
'
],
setup
(
props
,
{
slots
})
{
setup
(
props
,
{
slots
,
emit
})
{
console
.
log
(
'
props - renderFn
'
,
props
);
return
()
=>
[
props
.
type
===
1
?
h
(
btn1
,
{
title
:
props
.
title
,
type
:
props
.
type
,
show
:
props
.
show
show
:
props
.
show
,
'
onUpdate:show
'
:
(
value
)
=>
emit
(
'
update:show
'
,
false
)
},
slots
.
default
)
:
h
(
btn2
)
]
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录