no message

package.json

@@ -37,7 +37,7 @@
         "echarts": "^5.1.1",
         "element-ui": "^2.15.2",
         "tinymce": "^5.8.1",
-        "view-design-hi": "^4.5.0-11",
+        "view-design-hi": "^4.5.0-12",
         "vue-clipboard2": "^0.3.1",
         "vue-emoji-picker": "^1.0.1",
         "vue-kityminder-gg": "^1.3.6",

resources/assets/js/components/TEditor.vue

@@ -1,7 +1,8 @@
 <template>
     <div>
         <div class="teditor-box" :class="[spinShow?'teditor-loadstyle':'teditor-loadedstyle']">
-            <textarea ref="myTextarea" :id="id">{{ content }}</textarea>
+            <div v-if="inline" ref="myTextarea" :id="id">{{ content }}</div>
+            <textarea v-else ref="myTextarea" :id="id">{{ content }}</textarea>
             <Spin fix v-if="spinShow">
                 <Icon type="ios-loading" size=18 class="upload-control-spin-icon-load"></Icon>
                 <div>{{$L('加载组件中...')}}</div>
@@ -100,6 +101,10 @@
                     return {};
                 }
             },
+            inline: {
+                type: Boolean,
+                default: false
+            },
             readonly: {
                 type: Boolean,
                 default: false
@@ -189,6 +194,7 @@
 
             option(isFull) {
                 return {
+                    inline: isFull ? false : this.inline,
                     selector: (isFull ? '#T_' : '#') + this.id,
                     base_url: $A.serverUrl('js/tinymce'),
                     language: "zh_CN",

resources/assets/js/pages/manage.vue

@@ -105,6 +105,10 @@
         <Modal
             v-model="projectTask._show"
             :mask-closable="false"
+            :styles="{
+                width: '90%',
+                maxWidth: '640px'
+            }"
             footer-hide>
             <TaskDetail/>
         </Modal>

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -1,18 +1,141 @@
 <template>
     <div class="task-detail">
-        {{projectTask}}
+        <div class="task-info">
+            <div class="head">
+                <Icon class="radio" type="md-radio-button-off"/>
+                <div class="nav">
+                    <p>项目名称</p>
+                    <p>列表名称</p>
+                    <p>2222</p>
+                </div>
+                <Icon class="menu" type="ios-more"/>
+            </div>
+            <div class="title">
+                <Input
+                    v-model="projectTask.name"
+                    type="textarea"
+                    :rows="1"
+                    :autosize="{ minRows: 1, maxRows: 8 }"
+                    :maxlength="255"/>
+            </div>
+            <div class="desc">
+                <TEditor
+                    v-model="content"
+                    :plugins="taskPlugins"
+                    :options="taskOptions"
+                    :option-full="taskOptionFull"
+                    :placeholder="$L('详细描述...')"
+                    inline></TEditor>
+            </div>
+            <Form class="items" label-position="left" label-width="auto" @submit.native.prevent>
+                <FormItem>
+                    <div class="item-label" slot="label">
+                        <i class="iconfont">&#xe6ec;</i>
+                        {{$L('优先级')}}
+                    </div>
+                    <ul class="item-content">
+                        <li>紧急且重要</li>
+                    </ul>
+                </FormItem>
+                <FormItem>
+                    <div class="item-label" slot="label">
+                        <i class="iconfont">&#xe6e4;</i>
+                        {{$L('负责人')}}
+                    </div>
+                    <ul class="item-content">
+                        <li><UserAvatar :userid="1"/></li>
+                    </ul>
+                </FormItem>
+                <FormItem>
+                    <div class="item-label" slot="label">
+                        <i class="iconfont">&#xe6e8;</i>
+                        {{$L('截止时间')}}
+                    </div>
+                    <ul class="item-content">
+                        <li>2020/10/11 10:00</li>
+                    </ul>
+                </FormItem>
+                <FormItem>
+                    <div class="item-label" slot="label">
+                        <i class="iconfont">&#xe6e6;</i>
+                        {{$L('附件')}}
+                    </div>
+                    <ul class="item-content file">
+                        <li>文件11</li>
+                        <li>文件22</li>
+                        <li>文件33</li>
+                        <li>
+                            <div class="add-button">
+                                <i class="iconfont">&#xe6f2;</i>{{$L('添加附件')}}
+                            </div>
+                        </li>
+                    </ul>
+                </FormItem>
+                <FormItem>
+                    <div class="item-label" slot="label">
+                        <i class="iconfont">&#xe6f0;</i>
+                        {{$L('子任务')}}
+                    </div>
+                    <ul class="item-content subtask">
+                        <li>文件11</li>
+                        <li>文件22</li>
+                        <li>文件33</li>
+                        <li>
+                            <div class="add-button">
+                                <i class="iconfont">&#xe6f2;</i>{{$L('添加子任务')}}
+                            </div>
+                        </li>
+                    </ul>
+                </FormItem>
+            </Form>
+            <div class="add">
+                <div class="add-button">
+                    <i class="iconfont">&#xe6f2;</i>{{$L('添加模块')}}
+                </div>
+            </div>
+        </div>
+        <div class="task-dialog">
+
+        </div>
     </div>
 </template>
 
 <script>
 import {mapState} from "vuex";
+import TEditor from "../../../components/TEditor";
 
 export default {
     name: "TaskDetail",
-
+    components: {TEditor},
     data() {
         return {
+            content: '随着互联网的发展,生活智能化越来越普及,各类智能产品逐渐出现到人们面前,在体验的过程中,其实里面有 很多细节需要深挖和思考。很多产品细节的背后都是为了提升用户操作效率、兼容用户使用场景、满足用户情感 表达,以最终达到对用户体验的提升。作为智能产品的设计师只有充分了解市面上的智能产品,才能设计出更好',
 
+            taskPlugins: [
+                'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
+                'searchreplace visualblocks visualchars code',
+                'insertdatetime media nonbreaking save table contextmenu directionality',
+                'emoticons paste textcolor colorpicker imagetools codesample',
+                'autoresize'
+            ],
+            taskOptions: {
+                statusbar: false,
+                menubar: false,
+                forced_root_block : false,
+                remove_trailing_brs: false,
+                autoresize_bottom_margin: 2,
+                min_height: 200,
+                max_height: 380,
+                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img,pre[class],code',
+                toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
+            },
+            taskOptionFull: {
+                menubar: 'file edit view',
+                forced_root_block : false,
+                remove_trailing_brs: false,
+                valid_elements : 'a[href|target=_blank],em,strong/b,div[align],span[style],a,br,img,pre[class],code',
+                toolbar: 'uploadImages | uploadFiles | bold italic underline forecolor backcolor | codesample | preview screenload'
+            },
         }
     },
     computed: {

resources/assets/sass/components/t-editor.scss

@@ -96,3 +96,7 @@
     height: 0;
     overflow: hidden;
 }
+
+.tox-tinymce-inline {
+    z-index: 100000;
+}

resources/assets/sass/iconfont.scss

@@ -1,8 +1,8 @@
 @font-face {
     font-family: 'iconfont';  /* Project id 2583385 */
-    src: url('//at.alicdn.com/t/font_2583385_e77s2y4tokk.woff2?t=1623151884621') format('woff2'),
+    src: url('//at.alicdn.com/t/font_2583385_xuuhcu42k99.woff2?t=1623393761654') format('woff2'),
-    url('//at.alicdn.com/t/font_2583385_e77s2y4tokk.woff?t=1623151884621') format('woff'),
+    url('//at.alicdn.com/t/font_2583385_xuuhcu42k99.woff?t=1623393761654') format('woff'),
-    url('//at.alicdn.com/t/font_2583385_e77s2y4tokk.ttf?t=1623151884621') format('truetype');
+    url('//at.alicdn.com/t/font_2583385_xuuhcu42k99.ttf?t=1623393761654') format('truetype');
 }
 
 .iconfont {

resources/assets/sass/pages/components/task-detail.scss

@@ -1,3 +1,123 @@
 .task-detail {
-    padding-bottom: 22px;
+    display: flex;
+    padding-bottom: 36px;
+    .task-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .head {
+            display: flex;
+            align-items: center;
+            height: 40px;
+            padding-bottom: 10px;
+            color: #888888;
+            position: relative;
+            &:before {
+                content: "";
+                position: absolute;
+                left: 36px;
+                right: -12px;
+                bottom: 0;
+                height: 1px;
+                background-color: #f4f5f5;
+            }
+            .radio {
+                width: 18px;
+                font-size: 16px;
+            }
+            .nav {
+                flex: 1;
+                display: flex;
+                align-items: center;
+                padding-left: 18px;
+                font-size: 12px;
+                > p {
+                    display: flex;
+                    align-items: center;
+                    padding-right: 5px;
+                    &:after {
+                        content: "/";
+                        padding-left: 5px;
+                    }
+                    &:last-child {
+                        &:after {
+                            display: none;
+                        }
+                    }
+                }
+            }
+            .menu {
+                font-size: 22px;
+                margin: 0 18px;
+            }
+        }
+        .title {
+            margin: 12px 36px 0;
+            .ivu-input {
+                font-weight: 500;
+                font-size: 24px;
+                padding: 4px 0;
+                resize: none;
+                border-color: transparent;
+                &:focus {
+                    box-shadow: none
+                }
+            }
+        }
+        .desc {
+            margin: 12px 36px 0;
+            div[contenteditable="true"] {
+                outline: none
+            }
+        }
+        .items {
+            margin: 12px 36px 0;
+            .ivu-form-item {
+                margin-bottom: 10px;
+            }
+            .item-label {
+                display: flex;
+                align-items: center;
+                color: #aaaaaa;
+                .iconfont {
+                    margin-right: 3px;
+                }
+            }
+            .item-content {
+                margin-top: 5px;
+                margin-left: 12px;
+                > li {
+                    display: flex;
+                    align-items: center;
+                    list-style: none;
+                    line-height: 26px;
+                }
+                &.file {
+
+                }
+                &.subtask {
+
+                }
+            }
+        }
+        .add {
+            margin: 12px 36px 0;
+        }
+        .add-button {
+            cursor: pointer;
+            color: #aaaaaa;
+            display: flex;
+            align-items: center;
+            > i {
+                font-size: 14px;
+                padding-right: 8px;
+            }
+            &:hover {
+                color: #999999;
+            }
+        }
+    }
+    .task-dialog {
+        display: none;
+    }
 }