perf: 任务详细描述、添加任务
This commit is contained in:
parent
1801ea7873
commit
834c8cc7d5
@ -85,10 +85,10 @@
|
|||||||
type: Array,
|
type: Array,
|
||||||
default: () => {
|
default: () => {
|
||||||
return [
|
return [
|
||||||
'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
|
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
|
||||||
'searchreplace visualblocks visualchars code',
|
'searchreplace visualblocks visualchars code',
|
||||||
'insertdatetime media nonbreaking save table contextmenu directionality',
|
'insertdatetime media nonbreaking save table directionality',
|
||||||
'emoticons paste textcolor colorpicker imagetools codesample'
|
'emoticons paste codesample'
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -120,6 +120,10 @@
|
|||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
|
placeholderFull: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -216,7 +220,7 @@
|
|||||||
language: "zh_CN",
|
language: "zh_CN",
|
||||||
toolbar: this.toolbar,
|
toolbar: this.toolbar,
|
||||||
plugins: this.plugin(isFull),
|
plugins: this.plugin(isFull),
|
||||||
placeholder: this.placeholder,
|
placeholder: isFull && this.placeholderFull ? this.placeholderFull : this.placeholder,
|
||||||
save_onsavecallback: (e) => {
|
save_onsavecallback: (e) => {
|
||||||
this.$emit('editorSave', e);
|
this.$emit('editorSave', e);
|
||||||
},
|
},
|
||||||
@ -247,7 +251,6 @@
|
|||||||
resize: !isFull,
|
resize: !isFull,
|
||||||
convert_urls:false,
|
convert_urls:false,
|
||||||
toolbar_mode: 'sliding',
|
toolbar_mode: 'sliding',
|
||||||
toolbar_drawer: 'floating',
|
|
||||||
setup: (editor) => {
|
setup: (editor) => {
|
||||||
editor.ui.registry.addMenuButton('uploadImages', {
|
editor.ui.registry.addMenuButton('uploadImages', {
|
||||||
text: this.$L('图片'),
|
text: this.$L('图片'),
|
||||||
|
@ -172,7 +172,7 @@
|
|||||||
</EDropdown>
|
</EDropdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="item.desc" class="task-desc" v-html="item.desc"></div>
|
<div v-if="item.desc" class="task-desc"><pre v-html="item.desc"></pre></div>
|
||||||
<div v-if="item.task_tag.length > 0" class="task-tags">
|
<div v-if="item.task_tag.length > 0" class="task-tags">
|
||||||
<Tag v-for="(tag, keyt) in item.task_tag" :key="keyt" :color="tag.color">{{tag.name}}</Tag>
|
<Tag v-for="(tag, keyt) in item.task_tag" :key="keyt" :color="tag.color">{{tag.name}}</Tag>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,25 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="task-add">
|
<div class="task-add">
|
||||||
<Form class="task-add-form" label-position="top" @submit.native.prevent>
|
<div class="task-add-form">
|
||||||
<FormItem :label="$L('任务描述')">
|
<div class="title">
|
||||||
<Input
|
<Input
|
||||||
v-model="addData.name"
|
v-model="addData.name"
|
||||||
ref="input"
|
ref="input"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="1"
|
:rows="1"
|
||||||
:autosize="{ minRows: 1, maxRows: 3 }"
|
:autosize="{ minRows: 1, maxRows: 8 }"
|
||||||
:maxlength="255"
|
:maxlength="255"
|
||||||
:placeholder="$L('必填')"
|
:placeholder="$L('任务描述')"
|
||||||
@on-keydown="onKeydown"/>
|
@on-keydown="onKeydown"/>
|
||||||
</FormItem>
|
</div>
|
||||||
<FormItem :label="$L('任务详情')">
|
<div class="desc">
|
||||||
<TEditor
|
<TEditor
|
||||||
v-model="addData.content"
|
v-model="addData.content"
|
||||||
:plugins="taskPlugins"
|
:plugins="taskPlugins"
|
||||||
:options="taskOptions"
|
:options="taskOptions"
|
||||||
:option-full="taskOptionFull"
|
:option-full="taskOptionFull"
|
||||||
:placeholder="$L('选填...')"/>
|
:placeholder="$L('详细描述,选填...(点击右键使用工具栏)')"
|
||||||
</FormItem>
|
:placeholderFull="$L('详细描述...')"
|
||||||
|
inline/>
|
||||||
|
</div>
|
||||||
<div class="advanced-option">
|
<div class="advanced-option">
|
||||||
<Button :class="{advanced: advanced}" @click="advanced=!advanced">{{$L('高级选项')}}</Button>
|
<Button :class="{advanced: advanced}" @click="advanced=!advanced">{{$L('高级选项')}}</Button>
|
||||||
<ul class="advanced-priority">
|
<ul class="advanced-priority">
|
||||||
@ -34,7 +36,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</div>
|
||||||
<Form v-if="advanced" class="task-add-advanced" label-width="auto" @submit.native.prevent>
|
<Form v-if="advanced" class="task-add-advanced" label-width="auto" @submit.native.prevent>
|
||||||
<FormItem :label="$L('任务列表')">
|
<FormItem :label="$L('任务列表')">
|
||||||
<Select
|
<Select
|
||||||
@ -141,28 +143,25 @@ export default {
|
|||||||
columnAdd: [],
|
columnAdd: [],
|
||||||
|
|
||||||
taskPlugins: [
|
taskPlugins: [
|
||||||
'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
|
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
|
||||||
'searchreplace visualblocks visualchars code',
|
'searchreplace visualblocks visualchars code',
|
||||||
'insertdatetime media nonbreaking save table directionality',
|
'insertdatetime media nonbreaking save table directionality',
|
||||||
'emoticons paste imagetools codesample',
|
'emoticons paste codesample',
|
||||||
'autoresize'
|
'autoresize'
|
||||||
],
|
],
|
||||||
taskOptions: {
|
taskOptions: {
|
||||||
statusbar: false,
|
statusbar: false,
|
||||||
menubar: false,
|
menubar: false,
|
||||||
forced_root_block : false,
|
|
||||||
remove_trailing_brs: false,
|
|
||||||
autoresize_bottom_margin: 2,
|
autoresize_bottom_margin: 2,
|
||||||
min_height: 200,
|
min_height: 200,
|
||||||
max_height: 380,
|
max_height: 380,
|
||||||
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
|
contextmenu: 'bold italic underline forecolor backcolor | codesample | uploadImages uploadFiles | preview screenload',
|
||||||
toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
|
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
|
||||||
|
toolbar: false
|
||||||
},
|
},
|
||||||
taskOptionFull: {
|
taskOptionFull: {
|
||||||
menubar: 'file edit view',
|
menubar: 'file edit view',
|
||||||
forced_root_block : false,
|
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
|
||||||
remove_trailing_brs: false,
|
|
||||||
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
|
|
||||||
toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
|
toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -171,6 +170,9 @@ export default {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$refs.input.focus();
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['userId', 'projectId', 'columns', 'taskPriority']),
|
...mapState(['userId', 'projectId', 'columns', 'taskPriority']),
|
||||||
|
|
||||||
@ -301,6 +303,7 @@ export default {
|
|||||||
content: "",
|
content: "",
|
||||||
subtasks: [],
|
subtasks: [],
|
||||||
});
|
});
|
||||||
|
this.$refs.input.focus();
|
||||||
} else {
|
} else {
|
||||||
this.addData = {
|
this.addData = {
|
||||||
name: "",
|
name: "",
|
||||||
|
@ -456,28 +456,25 @@ export default {
|
|||||||
sendLoad: false,
|
sendLoad: false,
|
||||||
|
|
||||||
taskPlugins: [
|
taskPlugins: [
|
||||||
'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
|
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
|
||||||
'searchreplace visualblocks visualchars code',
|
'searchreplace visualblocks visualchars code',
|
||||||
'insertdatetime media nonbreaking save table directionality',
|
'insertdatetime media nonbreaking save table directionality',
|
||||||
'emoticons paste imagetools codesample',
|
'emoticons paste codesample',
|
||||||
'autoresize'
|
'autoresize'
|
||||||
],
|
],
|
||||||
taskOptions: {
|
taskOptions: {
|
||||||
statusbar: false,
|
statusbar: false,
|
||||||
menubar: false,
|
menubar: false,
|
||||||
forced_root_block : false,
|
|
||||||
remove_trailing_brs: false,
|
|
||||||
autoresize_bottom_margin: 2,
|
autoresize_bottom_margin: 2,
|
||||||
min_height: 200,
|
min_height: 200,
|
||||||
max_height: 380,
|
max_height: 380,
|
||||||
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
|
contextmenu: 'bold italic underline forecolor backcolor | codesample | uploadImages uploadFiles | preview screenload',
|
||||||
toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
|
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
|
||||||
|
toolbar: false
|
||||||
},
|
},
|
||||||
taskOptionFull: {
|
taskOptionFull: {
|
||||||
menubar: 'file edit view',
|
menubar: 'file edit view',
|
||||||
forced_root_block : false,
|
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,p,img[src|alt|witdh|height],pre[class],code',
|
||||||
remove_trailing_brs: false,
|
|
||||||
valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img[src|alt|witdh|height],pre[class],code',
|
|
||||||
toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
|
toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
@ -46,6 +46,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tox-tbtn--bespoke {
|
||||||
|
.tox-tbtn__select-label {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -359,11 +359,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.task-desc {
|
.task-desc {
|
||||||
|
> pre {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
margin-top: 10px;
|
padding: 0;
|
||||||
|
margin: 10px 0 0 0;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.task-tags {
|
.task-tags {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
.ivu-tag {
|
.ivu-tag {
|
||||||
|
@ -1,36 +1,38 @@
|
|||||||
.task-add {
|
.task-add {
|
||||||
|
margin-bottom: 6px;
|
||||||
.task-add-form,
|
.task-add-form,
|
||||||
.task-add-advanced {
|
.task-add-advanced {
|
||||||
margin: 0 0 -18px;
|
.title {
|
||||||
.ivu-form-item-label {
|
.ivu-input {
|
||||||
font-weight: 600;
|
font-weight: 500;
|
||||||
|
font-size: 24px;
|
||||||
|
padding: 4px 0;
|
||||||
|
line-height: 1.4;
|
||||||
|
resize: none;
|
||||||
|
border-color: transparent;
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none
|
||||||
}
|
}
|
||||||
.teditor-box {
|
|
||||||
.tox-tinymce {
|
|
||||||
border-color: #e8e8e8;
|
|
||||||
}
|
}
|
||||||
.tox .tox-statusbar,
|
|
||||||
.tox .tox-menubar+.tox-toolbar,
|
|
||||||
.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary,
|
|
||||||
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
|
|
||||||
border-color: #e8e8e8;
|
|
||||||
}
|
}
|
||||||
.tox .tox-toolbar,
|
.desc {
|
||||||
.tox .tox-toolbar__overflow,
|
margin-top: 24px;
|
||||||
.tox .tox-toolbar__primary {
|
div[contenteditable="true"] {
|
||||||
background-image: none;
|
outline: none
|
||||||
border-bottom: 1px solid #e8e8e8;
|
}
|
||||||
|
.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
|
||||||
|
color: #bbbbbb;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.advanced-option {
|
.advanced-option {
|
||||||
margin-top: -6px;
|
margin-top: 24px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
> button {
|
> button {
|
||||||
transition: margin 0.2s;
|
transition: margin 0.2s;
|
||||||
&.advanced {
|
&.advanced {
|
||||||
margin-left: 22px;
|
margin-left: 24px;
|
||||||
}
|
}
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@ -53,7 +55,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.task-add-advanced {
|
.task-add-advanced {
|
||||||
margin: 1px 0 0;
|
margin: -16px 0 0;
|
||||||
padding: 34px 32px 6px;
|
padding: 34px 32px 6px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid #e8e8e8;
|
border: 1px solid #e8e8e8;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user