zhishifufei_php/public/kefu-assets/components/pc/msg-window/index.html

<div class="msg-box">
    <div class="head">
        <div class="tab-bar">
            <a href="javascript:;" class="tab-item" :class="{ on: item.key == tabCur }" v-for="(item, index) in tabList"
                :key="index" @click="bindTab(item)">{{ item.title }}</a>
        </div>
        <div class="search-box">
            <i-input placeholder="搜索快捷回复" style="width: 100%" v-model="searchTxt" @on-enter="bindSearch">
                <Icon type="ios-search" slot="suffix" />
            </i-input>
        </div>
    </div>
    <div class="main">
        <div class="left-box">
            <vue-scroll :ops="ops">
                <div class="left-item" v-if="tabCur">
                    <p>分组</p>
                    <span class="iconfont iconaddto" @click="openAddSort"></span>
                </div>
                <div class="left-item" v-for="(item, index) in sortList" :key="index" :class="{ on: cateId == item.id }"
                    @click="selectSort(item)">
                    <p>{{ item.name }}</p>
                    <template v-if="tabCur">
                        <span class="iconfont iconDot" @click.top="bindEdit(item, index)"></span>

                        <div class="edit-wrapper" v-show="item.isEdit">
                            <div class="edit-item" @click="editSort(item)">编辑</div>
                            <div class="edit-item" @click="delSort(item)">
                                删除
                            </div>
                        </div>
                        <div class="edit-bg" v-show="item.isEdit" @click.stop="item.isEdit = false"></div>
                    </template>
                </div>
            </vue-scroll>
        </div>
        <div class="right-box">
            <Scroll :on-reach-bottom="handleReachBottom" class="right-scroll" height="360">
                <div class="msg-item add-box" v-if="tabCur" style="margin-top: 0">
                    <div class="box2">
                        <i-input class="i-input-box" v-model="addMsg.title" placeholder="输入标题" style="width: 100%"
                            @on-focus="bindFocus" />
                        <div class="conBox" :class="{ active: addMsg.isEdit }">
                            <div class="content">
                                <i-input v-model="addMsg.message" type="textarea" :rows="4" placeholder="请输入内容" />
                            </div>
                            <div class="bom">
                                <div class="select">
                                    <i-select v-model="addMsg.cateId" style="width: 100px" size="small">
                                        <Option v-for="item in sortList" :value="item.id" :key="item.id">{{ item.name }}
                                        </Option>
                                    </i-select>
                                </div>
                                <div class="btns-box">
                                    <i-button @click.stop="addMsg.isEdit = false">取消</i-button>
                                    <i-button type="primary" @click.stop="bindAdd">保存</i-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="msg-item" v-for="(item, index) in list" :key="index" v-if="item.id">
                    <div class="box1" v-if="!item.isEdit">
                        <div class="txt-box" @click="bindRadio(item)">
                            <span class="title" v-if="item.title">{{
                                item.title | filtersTitle
                                }}</span>
                            <span v-if="item.message">{{ item.message | filtersCon }}</span>
                        </div>
                        <div class="edit-box" v-if="tabCur"><span class="iconfont iconbianji"
                                @click.stop="editMsg(item)"></span><span class="iconfont iconshanchu"
                                @click.stop="delMsg(item, index)"></span></div>
                    </div>
                    <div class="box2" v-else>
                        <i-input class="i-input-box" v-model="item.title" placeholder="输入标题（选填）" style="width: 100%" />
                        <div class="content">
                            <i-input v-model="item.message" type="textarea" :rows="4" placeholder="请输入内容" />
                        </div>
                        <div class="bom">
                            <div class="select">
                                <i-select v-model="cateId" style="width: 100px" size="small">
                                    <Option v-for="item in sortList" :value="item.id" :key="item.id">{{ item.name }}
                                    </Option>
                                </i-select>
                            </div>
                            <div class="btns-box">
                                <i-button @click.stop="item.isEdit = false">取消</i-button>
                                <i-button type="primary" @click.stop="updataMsg(item)">保存</i-button>
                            </div>
                        </div>
                    </div>
                </div>
            </Scroll>
        </div>
    </div>
    <Modal v-model="isAddSort" :title="maskTitle" width="304" :mask="false" class="class-box" :footer-hide="true">
        <div class="item">
            <span>分组名称：</span>
            <i-input v-model="classTitle" placeholder="分组名称" />
        </div>
        <div class="item">
            <span>分组排序：</span>
            <i-input v-model="classSort" placeholder="输入排序" />
        </div>
        <div class="btn">
            <i-button type="primary" style="background: #1890ff; width: 100%" @click="addServiceCate">确定</i-button>
        </div>
    </Modal>
</div>