postdischarge-ui/src/views/system/specialDiseaseNode/index.vue

<template>
    <div class="app-container">
        <el-descriptions title="添加主路径" />
        <div class="title">
            <el-tag>主路径</el-tag>
            <div>
                卒中后癫痫
            </div>
            <div class="select">
                <span>
                    适用范围
                </span>
                <el-select v-model="updata.suitRange">
                    <el-option label="出院后" value="item.value">
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="list">
            <div class="timelist">
                <div class="timetitle">
                    管理路径节点({{ timelinelist.length }})
                    <i class="el-icon-circle-plus-outline" @click="additem(item)"></i>
                </div>
                <el-timeline>
                    <el-timeline-item v-for="(item, index) in timelinelist" :key="index"
                        :color="listindex == index ? '#409EFF' : ''">
                        <div class="top" @click="topclickevent(index)">
                            <div class="toptop">
                                <el-select v-model="value" style="width:87px">
                                    <el-option label="出院后" value="item.value">
                                    </el-option>
                                </el-select>
                                <el-input v-model="input" style="width: 50px;"></el-input>
                                <span>天</span>
                            </div>
                            <div>
                                <i class="el-icon-delete" @click="delitem(item)"></i>
                                <i class="el-icon-circle-plus-outline" @click="additem(item)"></i>
                            </div>
                        </div>
                        <el-card v-for="(uitem, uindex) in item.list" :key="uitem.id"
                            @click.native='bottomclickevent(uitem, index, uindex)'
                            :class="listindex == index && itemindex == uindex ? 'cards' : ''">
                            <h4>{{ uitem.title }}</h4>
                            <p>{{ uitem.text }}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="texts">
                <div class="topform" style="height:50px">
                    <el-form ref="form" :inline="true" :model="form" class="form">
                        <el-form-item label="任务类型" prop="">
                            <el-select v-model="value" style="width:110px" @change="changeTaskType">
                                <el-option v-for="item in selectTaskTypeList" :key="item.id" :label="item.taskTypeName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务细分" prop="">
                            <el-select v-model="value" style="width:100px">
                                <el-option v-for="item in taskPartitionList" :key="item.id" :label="item.taskTypeName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="任务状态" prop="">
                            <el-select v-model="value" style="width:100px">
                                <el-option v-for="item in taskStatusDictList" :key="item.id"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="二级分类描述" prop="">
                            <el-input v-model="form.name" style="width:100px"></el-input>
                        </el-form-item>
                        <el-form-item label="执行时间" prop="">
                            <el-time-select v-model="form.value"
                                :picker-options="{ start: '08:30', step: '00:15', end: '18:30' }" placeholder="选择时间">
                            </el-time-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="topform">
                    <el-form ref="form" :inline="true" :model="form" class="form">
                        <el-form-item label="问卷库模板选择" prop="">
                            <question @on-template="ontemplate"></question>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="bottomform">
                    <wangeditor style="width:100%;" ref="editor" v-if="wangeditorshow" />
                    <div class="card">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    短信
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <el-select v-model="value" style="width:200px;">
                                        <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                            :label="item.taskStatusName" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.value" active-color="#13ce66">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                短信预览：
                            </div>
                            <div class="textarea">
                                【医生小助手】医生提醒：<el-input v-model="form.input" placeholder=""></el-input>-
                                <el-input v-model="form.input" placeholder="单位名称" style="width: 150px;"></el-input>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    公众号
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <el-select v-model="value" style="width:200px;">
                                        <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                            :label="item.taskStatusName" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.value" active-color="#13ce66">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                提醒内容：
                            </div>
                            <el-input v-model="form.input" placeholder="" class="textarea"
                                style="border: none;"></el-input>
                        </div>
                    </div>
                    <div class="card">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    小程序
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <el-select v-model="value" style="width:200px;">
                                        <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                            :label="item.taskStatusName" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.value" active-color="#13ce66">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                提醒内容：
                            </div>
                            <el-input v-model="form.input" placeholder="" class="textarea"
                                style="border: none;"></el-input>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                提示说明：
                            </div>
                            <el-input v-model="form.input" placeholder="" class="textarea"
                                style="border: none;"></el-input>
                        </div>
                    </div>
                    <!-- <div class="card" style="height: 250px;">
                        <div class="flex">
                            <div class="pushMethod">
                                推送方式：
                                <span>
                                    AI电话
                                </span>
                            </div>
                            <div class="pushMethod">
                                模板：
                                <span>
                                    <el-select v-model="value" style="width:200px;">
                                        <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                            :label="item.taskStatusName" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </span>
                            </div>
                            <div class="pushMethod">
                                <el-switch v-model="form.value" active-color="#13ce66">
                                </el-switch>
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                机构名称：
                            </div>
                            <div class="text">
                                我是
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:150px;padding:0 10px"></el-input>
                            <div class="text">
                                的工作人员
                            </div>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                重播次数：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                            <div class="text" style="padding-left: 100px;">
                                时间间隔：
                            </div>
                            <el-input v-model="form.input" placeholder="" style="width:200px;"></el-input>
                        </div>
                        <div class="flextwo">
                            <div class="text">
                                短信提醒：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="text" style="padding-left: 100px;">
                                短信模板：
                            </div>
                            <el-select v-model="value" style="width:200px;">
                                <el-option v-for="item in taskStatusDictList" :key="item.id" style="color:black"
                                    :label="item.taskStatusName" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div> -->
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="">暂 存</el-button>
                        <el-button type="primary" @click="">审核完成</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import wangeditor from '../components/wangEditor.vue'
import question from '../components/question.vue'
import {
    selectTaskTypeList, taskPartitionList, taskStatusDictList
} from '@/api/system/specialDiseaseNode'
export default {
    components: { wangeditor, question },
    name: "specialDiseaseNode",
    data() {
        return {
            wangeditorshow: false,
            updata: {
                suitRange: '',
            },
            form: {
                templateId: '',
                templateName: '',
            },
            itemindex: 0,
            listindex: 0,
            timelinelist: [{
                title: '选项1',
                text: '黄金糕',
                list: [
                    {
                        title: '选项1',
                        text: '黄金糕',
                    },
                    {
                        title: '选项1',
                        text: '黄金糕',
                    },
                ],
            }, {
                title: '选项2',
                text: '双皮奶',
                list: [
                    {
                        title: '选项1',
                        text: '黄金糕',
                    },
                ],
            }, {
                title: '选项3',
                text: '蚵仔煎',
                list: [
                    {
                        title: '选项1',
                        text: '黄金糕',
                    },
                    {
                        title: '选项1',
                        text: '黄金糕',
                    },
                ],
            }, {
                title: '选项4',
                text: '龙须面'
            }, {
                title: '选项5',
                text: '北京烤鸭',
                list: [
                    {
                        title: '选项1',
                        text: '黄金糕',
                    },
                    {
                        title: '选项1',
                        text: '黄金糕',
                    },
                ],
            }],
            value: '',
            input: '',
            //任务类型
            selectTaskTypeList: [],
            //任务状态
            taskStatusDictList: [],
            //任务细分
            taskPartitionList: [],
        };
    },
    created() {
        this.taskinfo();
        this.wangeditorshow = true
    },
    beforeDestroy(){
        this.wangeditorshow = false
    },
    watch: {
    },
    mounted() {
        // console.log(this.$refs.editor.html)
    },
    methods: {
        ontemplate(item) {
            this.form.templateId = item.templateId
            this.form.templateName = item.templateName
        },
        topclickevent(index) {
            this.listindex = index
            this.itemindex = 0
        },
        bottomclickevent(uitem, index, uindex) {
            this.form = uitem
            this.listindex = index
            this.itemindex = uindex
        },
        handleStep() {
            this.active = 2
        },
        //任务类型 任务状态
        taskinfo() {
            selectTaskTypeList().then(res => {
                this.selectTaskTypeList = res.data
            })
            taskStatusDictList().then(res => {
                this.taskStatusDictList = res.data
            })
        },
        //任务细分
        changeTaskType(id) {
            taskPartitionList(id).then(res => {
                this.taskPartitionList = res.data
            })
        },
    }
};
</script>
<style scoped lang="scss">
.bottomform {
    background-color: #f2f4f5;

    .dialog-footer {
        padding: 20px 20px;
        text-align: right;
    }

    .card {
        background-color: #fff;
        width: 100%;
        height: 200px;
        margin: 20px 0 0;
        padding: 20px 50px 0px 20px;

        .flextwo {
            display: flex;
            align-items: center;
            margin-top: 20px;

            .text {
                font-size: 13px;
                color: #64666A;
            }

            .textarea {
                width: 90%;
                padding: 0 10px;
                height: 50px;
                line-height: 50px;
                border: 1px solid #DCDFE6;
                border-radius: 5px;
                display: flex;
                align-items: center;

                ::v-deep .el-input {
                    padding: 0 10px;
                    width: 50%;
                    color: black;
                    font-size: 13px;
                    height: 40px;
                    line-height: 40px;
                }

                ::v-deep .el-input__inner {
                    color: black;
                    font-size: 13px;
                }
            }
        }

        .flex {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .pushMethod {
                height: 30px;
                line-height: 30px;
                font-size: 13px;
                color: #64666A;

                ::v-deep .el-input__inner {
                    color: black;
                    font-size: 13px;
                }

                span {
                    color: black;
                    font-size: 13px;
                }
            }
        }
    }
}

.topform {
    padding: 15px 0 0 15px;
    height: 70px;

    .form {
        ::v-deep .el-input__inner {
            height: 30px !important;
            line-height: 30px !important;
        }

        ::v-deep .el-form-item__label {
            font-size: 12px !important;
        }
    }
}

.title {
    display: flex;
    align-items: center;

    div {
        display: flex;
        padding-left: 10px;
        font-weight: 600;
        align-items: center;
    }

    .select {
        font-weight: 550;
        margin-left: 20%;
        font-size: 12px;

        .el-input {
            width: 200px;
            height: 30px !important;
            line-height: 30px !important;
        }
    }
}


.list {
    margin: 20px auto;
    width: 100%;
    background-color: #f2f4f5;
    display: flex;
    padding-top: 15px;
    justify-content: space-evenly;

    .timelist {
        width: 22%;
        background-color: #fff;
        padding: 0 20px 20px;
        height: 680px;
        overflow: scroll;

        .timetitle {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        ::v-deep .el-timeline {
            width: 100%;
            padding: 15px 0 0 !important;
        }
    }

    .texts {
        width: 75%;
        height: 680px;
        overflow: scroll;
        background-color: #fff;
    }
}

.cards {
    border: 1px solid #409EFF;
    border-left: 5px solid #409EFF;
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .toptop {
        display: flex;
        align-items: center;
    }

    span {
        padding: 0 4px;
    }

    i {
        font-size: 17px;
    }

    i:nth-child(2) {
        padding-left: 12px;
    }
}

::v-deep .el-timeline-item__timestamp {
    margin: 0 !important;
    padding: 0 !important;
}

::v-deep .el-timeline-item__wrapper {
    padding-left: 14px !important;
}

::v-deep .el-timeline-item__content {
    transform: translateY(-2%);
}

::v-deep .el-card {
    margin-top: 20px !important;
}
</style>