maochaoying
2 years ago
6 changed files with 595 additions and 8 deletions
-
7src/components/Debug.vue
-
290src/components/Publish.vue
-
2src/components/Task.vue
-
213src/components/User.vue
-
90src/pages/index.vue
-
1src/service/request.js
@ -0,0 +1,7 @@ |
|||
<template> |
|||
<div>debug</div> |
|||
</template> |
|||
|
|||
<script setup></script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,290 @@ |
|||
<template> |
|||
<!-- scrollToFirstError="smooth" --> |
|||
<t-form |
|||
:data="formData" |
|||
:rules="rules" |
|||
ref="form" |
|||
@reset="onReset" |
|||
@submit="onSubmit" |
|||
> |
|||
<t-form-item label="用户名" help="这里可以展示一段说明文字" name="account"> |
|||
<t-input v-model="formData.account" placeholder="请输入用户名"></t-input> |
|||
</t-form-item> |
|||
<t-form-item label="年龄" name="age"> |
|||
<t-input-number v-model="formData.age" placeholder="年龄" /> |
|||
</t-form-item> |
|||
<t-form-item label="籍贯" name="region"> |
|||
<t-cascader |
|||
v-model="formData.region" |
|||
placeholder="请选择籍贯" |
|||
:options="regionOptions" |
|||
clearable |
|||
filterable |
|||
/> |
|||
</t-form-item> |
|||
<t-form-item label="密码" name="password"> |
|||
<t-input |
|||
type="password" |
|||
v-model="formData.password" |
|||
placeholder="请输入密码" |
|||
></t-input> |
|||
</t-form-item> |
|||
<t-form-item label="邮箱" name="email"> |
|||
<t-input v-model="formData.email" placeholder="请输入邮箱"></t-input> |
|||
</t-form-item> |
|||
<t-form-item label="性别" name="gender"> |
|||
<t-radio-group v-model="formData.gender"> |
|||
<t-radio value="male">男</t-radio> |
|||
<t-radio value="female">女</t-radio> |
|||
</t-radio-group> |
|||
</t-form-item> |
|||
<t-form-item label="课程" name="course"> |
|||
<t-checkbox-group |
|||
v-model="formData.course" |
|||
:options="courseOptions" |
|||
></t-checkbox-group> |
|||
</t-form-item> |
|||
<t-form-item label="学院" name="college"> |
|||
<t-select |
|||
v-model="formData.college" |
|||
class="demo-select-base" |
|||
clearable |
|||
filterable |
|||
placeholder="请选择所在学院" |
|||
> |
|||
<t-option |
|||
v-for="(item, index) in options" |
|||
:value="item.value" |
|||
:label="item.label" |
|||
:key="index" |
|||
> |
|||
{{ item.label }} |
|||
</t-option> |
|||
</t-select> |
|||
</t-form-item> |
|||
<t-form-item |
|||
label="入学时间" |
|||
name="date" |
|||
:rules="[ |
|||
{ required: true, message: '此项必填' }, |
|||
{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }, |
|||
]" |
|||
> |
|||
<t-date-picker v-model="formData.date"></t-date-picker> |
|||
</t-form-item> |
|||
<t-form-item label="个人网站" name="content.url"> |
|||
<t-input |
|||
v-model="formData.content.url" |
|||
placeholder="请输入个人网站地址" |
|||
></t-input> |
|||
</t-form-item> |
|||
<t-form-item label="个人简介" help="请用一句话介绍自己" name="description"> |
|||
<t-textarea |
|||
v-model="formData.description" |
|||
placeholder="请用一句话介绍自己" |
|||
></t-textarea> |
|||
</t-form-item> |
|||
<t-form-item label="兴趣爱好" name="hobby"> |
|||
<t-tree-select |
|||
v-model="formData.hobby" |
|||
filterable |
|||
:data="hobbyOptions" |
|||
placeholder="请选择你的兴趣爱好" |
|||
></t-tree-select> |
|||
</t-form-item> |
|||
|
|||
<t-form-item> |
|||
<t-space size="10px"> |
|||
<t-button theme="primary" type="submit">提交</t-button> |
|||
<t-button theme="default" variant="base" type="reset">重置</t-button> |
|||
</t-space> |
|||
</t-form-item> |
|||
</t-form> |
|||
</template> |
|||
<script> |
|||
const INITIAL_DATA = { |
|||
account: '', |
|||
password: '', |
|||
// description: '', |
|||
age: undefined, |
|||
region: '', |
|||
email: '', |
|||
gender: '', |
|||
college: '', |
|||
date: '', |
|||
content: { |
|||
url: '', |
|||
}, |
|||
hobby: [], |
|||
course: [], |
|||
} |
|||
export default { |
|||
data() { |
|||
return { |
|||
formData: { ...INITIAL_DATA }, |
|||
hobbyOptions: [ |
|||
{ |
|||
label: '运动', |
|||
value: 'sports', |
|||
children: [ |
|||
{ |
|||
label: '足球', |
|||
value: 'soccer', |
|||
}, |
|||
{ |
|||
label: '篮球', |
|||
value: 'basketball', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '娱乐', |
|||
value: 'entertainment', |
|||
children: [ |
|||
{ |
|||
label: '电影', |
|||
value: 'movie', |
|||
}, |
|||
{ |
|||
label: '旅游', |
|||
value: 'trip', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
regionOptions: [ |
|||
{ |
|||
label: '广东', |
|||
value: '1', |
|||
children: [ |
|||
{ |
|||
label: '深圳', |
|||
value: '1.1', |
|||
}, |
|||
{ |
|||
label: '广州', |
|||
value: '1.2', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
label: '湖南', |
|||
value: '2', |
|||
children: [ |
|||
{ |
|||
label: '长沙', |
|||
value: '2.1', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
courseOptions: [ |
|||
{ label: '语文', value: '1' }, |
|||
{ label: '数学', value: '2' }, |
|||
{ label: '英语', value: '3' }, |
|||
{ label: '体育', value: '4' }, |
|||
], |
|||
options: [ |
|||
{ label: '计算机学院', value: '1' }, |
|||
{ label: '软件学院', value: '2' }, |
|||
{ label: '物联网学院', value: '3' }, |
|||
], |
|||
// FormItem.rules 优先级大于 Form.rules |
|||
rules: { |
|||
account: [ |
|||
{ |
|||
required: true, |
|||
message: '姓名必填', |
|||
type: 'error', |
|||
trigger: 'blur', |
|||
}, |
|||
// trigger 默认为 'change' |
|||
{ required: true, message: '姓名必填', type: 'error' }, |
|||
{ whitespace: true, message: '姓名不能为空' }, |
|||
{ |
|||
min: 2, |
|||
message: '至少需要两个字符，一个中文等于两个字符', |
|||
type: 'warning', |
|||
trigger: 'blur', |
|||
}, |
|||
{ |
|||
max: 10, |
|||
message: '姓名字符长度超出', |
|||
type: 'warning', |
|||
trigger: 'blur', |
|||
}, |
|||
], |
|||
description: [ |
|||
{ |
|||
validator: val => val.length >= 5, |
|||
message: '至少 5 个字，中文长度等于英文长度', |
|||
type: 'warning', |
|||
}, |
|||
{ |
|||
validator: val => val.length < 20, |
|||
message: '不能超过 20 个字，中文长度等于英文长度', |
|||
type: 'warning', |
|||
}, |
|||
], |
|||
age: [{ required: true, message: '年龄必填', type: 'error' }], |
|||
region: [{ required: true, message: '籍贯必填', type: 'error' }], |
|||
|
|||
password: [ |
|||
{ required: true, message: '密码必填', type: 'error' }, |
|||
{ len: 8, message: '请输入 8 位密码', type: 'warning' }, |
|||
{ |
|||
pattern: /[A-Z]+/, |
|||
message: '密码必须包含大写字母', |
|||
type: 'warning', |
|||
}, |
|||
], |
|||
college: [{ required: true, message: '此项必填' }], |
|||
email: [ |
|||
{ required: true, message: '邮箱必填' }, |
|||
{ |
|||
email: { ignore_max_length: true }, |
|||
message: '请输入正确的邮箱地址', |
|||
}, |
|||
], |
|||
gender: [{ required: true, message: '性别必填' }], |
|||
course: [ |
|||
{ required: true, message: '课程必填' }, |
|||
{ |
|||
validator: val => val.length <= 2, |
|||
message: '最多选择 2 门课程', |
|||
type: 'warning', |
|||
}, |
|||
], |
|||
hobby: [{ required: true, message: '爱好必填', type: 'error' }], |
|||
'content.url': [ |
|||
{ required: true, message: '个人网站必填' }, |
|||
{ |
|||
url: { |
|||
protocols: ['http', 'https', 'ftp'], |
|||
require_protocol: true, |
|||
}, |
|||
message: '请输入正确的个人主页', |
|||
}, |
|||
], |
|||
}, |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
onReset() { |
|||
this.$message.success('重置成功') |
|||
console.log('formData', this.formData) |
|||
}, |
|||
onSubmit({ validateResult, firstError }) { |
|||
if (validateResult === true) { |
|||
this.$message.success('提交成功') |
|||
} else { |
|||
console.log('Errors: ', validateResult) |
|||
this.$message.warning(firstError) |
|||
} |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,213 @@ |
|||
<template> |
|||
<div class="user_component"> |
|||
<t-card> |
|||
<template #title> |
|||
<t-space direction="vertical"> |
|||
<t-breadcrumb> |
|||
<t-breadcrumbItem>首页</t-breadcrumbItem> |
|||
<t-breadcrumbItem>用户管理中心</t-breadcrumbItem> |
|||
</t-breadcrumb> |
|||
</t-space> |
|||
</template> |
|||
<t-table |
|||
bordered |
|||
hover |
|||
tableLayout="auto" |
|||
row-key="id" |
|||
:data="data" |
|||
:columns="columns" |
|||
resizable |
|||
/> |
|||
<t-pagination class="page" :total="30" /> |
|||
</t-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="jsx"> |
|||
import { MessagePlugin } from 'tdesign-vue-next' |
|||
import { |
|||
FileCopyIcon, |
|||
ErrorCircleFilledIcon, |
|||
CheckCircleFilledIcon, |
|||
CloseCircleFilledIcon, |
|||
} from 'tdesign-icons-vue-next' |
|||
function copyToClipboard(text) { |
|||
if (navigator.clipboard) { |
|||
navigator.clipboard.writeText(text) |
|||
} else { |
|||
const textarea = document.createElement('textarea') |
|||
document.body.appendChild(textarea) |
|||
textarea.style.position = 'fixed' |
|||
textarea.style.clip = 'rect(0 0 0 0)' |
|||
textarea.style.top = '10px' |
|||
textarea.value = text |
|||
textarea.select() |
|||
document.execCommand('copy', true) |
|||
document.body.removeChild(textarea) |
|||
} |
|||
MessagePlugin.success('文本复制成功') |
|||
} |
|||
|
|||
const data = [] |
|||
const total = 5 |
|||
for (let i = 0; i < total; i++) { |
|||
data.push({ |
|||
id: i + 1, |
|||
applicant: ['贾明（kyrieJia）', '张三（threeZhang)', '王芳（fangWang)'][ |
|||
i % 3 |
|||
], |
|||
status: i % 3, |
|||
channel: ['电子签署', '纸质签署', '纸质签署'][i % 3], |
|||
desc: ['单元格文本超出省略设置', '这是普通文本的超出省略'][i % 2], |
|||
link: '点击查看审批详情', |
|||
something: '仅标题省略', |
|||
// 透传 Tooltip Props 到浮层组件 |
|||
ellipsisProps: [ |
|||
'w.cezkdudy@lhll.au', |
|||
'r.nmgw@peurezgn.sl', |
|||
'p.cumx@rampblpa.ru', |
|||
][i % 3], |
|||
// 完全自定义超出省略的 Tips 内容 |
|||
ellipsisContent: [ |
|||
'宣传物料制作费用', |
|||
'algolia 服务报销', |
|||
'相关周边制作费', |
|||
'激励奖品快递费', |
|||
][i % 4], |
|||
propsAndContent1: [ |
|||
'2021-11-01', |
|||
'2021-12-01', |
|||
'2022-01-01', |
|||
'2022-02-01', |
|||
'2022-03-01', |
|||
][i % 4], |
|||
propsAndContent2: [2, 3, 1, 4][i % 4], |
|||
}) |
|||
} |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
data, |
|||
columns: [ |
|||
{ |
|||
colKey: 'applicant', |
|||
title: '申请人', |
|||
ellipsis: true, |
|||
}, |
|||
{ |
|||
colKey: 'status', |
|||
title: '审批状态', |
|||
width: 120, |
|||
cell: (h, { row }) => { |
|||
const statusNameListMap = { |
|||
0: { |
|||
label: '审批通过', |
|||
theme: 'success', |
|||
icon: <CheckCircleFilledIcon />, |
|||
}, |
|||
1: { |
|||
label: '审批失败', |
|||
theme: 'danger', |
|||
icon: <CloseCircleFilledIcon />, |
|||
}, |
|||
2: { |
|||
label: '审批过期', |
|||
theme: 'warning', |
|||
icon: <ErrorCircleFilledIcon />, |
|||
}, |
|||
} |
|||
return ( |
|||
<t-tag |
|||
shape="round" |
|||
theme={statusNameListMap[row.status].theme} |
|||
variant="light-outline" |
|||
> |
|||
{statusNameListMap[row.status].icon} |
|||
{statusNameListMap[row.status].label} |
|||
</t-tag> |
|||
) |
|||
}, |
|||
}, |
|||
{ |
|||
title: '签署方式（超长标题示例）', |
|||
colKey: 'channel', |
|||
width: 120, |
|||
ellipsisTitle: true, |
|||
}, |
|||
{ |
|||
title: '邮箱地址', |
|||
colKey: 'ellipsisProps', |
|||
// 浮层浅色背景，方向默认朝下出现 |
|||
ellipsis: { |
|||
theme: 'light', |
|||
placement: 'bottom', |
|||
}, |
|||
}, |
|||
{ |
|||
title: '申请事项', |
|||
colKey: 'ellipsisContent', |
|||
// ellipsis 定义超出省略的浮层内容，cell 定义单元格内容 |
|||
ellipsis: (h, { row }) => ( |
|||
<div> |
|||
{row.ellipsisContent} |
|||
<FileCopyIcon |
|||
style={{ cursor: 'pointer', marginLeft: '4px' }} |
|||
onClick={() => copyToClipboard(row.ellipsisContent)} |
|||
/> |
|||
</div> |
|||
), |
|||
}, |
|||
{ |
|||
title: '审核时间', |
|||
colKey: 'propsAndContent1', |
|||
// 支持同时设置 tooltipProps 和 浮层内容, |
|||
width: 100, |
|||
ellipsis: { |
|||
props: { |
|||
theme: 'light', |
|||
placement: 'bottom-right', |
|||
}, |
|||
content: (h, { row }) => ( |
|||
<div> |
|||
<p> |
|||
<b>创建日期:</b> {row.propsAndContent1} |
|||
</p> |
|||
<p> |
|||
<b>审核时长(天):</b> {row.propsAndContent2} |
|||
</p> |
|||
</div> |
|||
), |
|||
}, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
colKey: 'link', |
|||
// 超出省略的内容显示纯文本，不带任何样式和元素 |
|||
ellipsis: (h, { row }) => row.link, |
|||
// 注意这种 JSX 写法需设置 <script lang="jsx" setup> |
|||
cell: (h, { row }) => ( |
|||
<a href="/vue-next/components/table" target="_blank"> |
|||
{row.link} |
|||
</a> |
|||
), |
|||
}, |
|||
], |
|||
} |
|||
}, |
|||
|
|||
// methods: { |
|||
// getAttach() { |
|||
// return document.body; |
|||
// }, |
|||
// }, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.user_component { |
|||
.page { |
|||
margin-top: 30px; |
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue