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

<template>
    <div>
        <div class="title">
            <div slot="footer" class="dialog-footer">
                <el-button type="primary">执行</el-button>
            </div>
            <el-descriptions title="手动创建任务">
            </el-descriptions>
            <el-form :inline="true" :model="updata" class="demo-form-inline">
                <el-form-item label="任务名称">
                    <el-input v-model="updata.routeName" placeholder="审批人"></el-input>
                </el-form-item>
                <el-form-item label="适用范围">
                    <el-select v-model="updata.suitRange">
                        <el-option label="在院" value="IN_THE_HOSPITAL" />
                        <el-option label="出院" value="DISCHARGE" />
                        <el-option label="门诊" value="OUTPATIENT_SERVICE" />
                        <el-option label="门诊+出院" value="OUTPATIENT_SERVICE_DISCHARGE" />
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="nodes">
            <div class="nodenames">
                <el-timeline>
                    <el-timeline-item v-for="(item, index) in list" :key="index"
                        :color="listindex == index ? '#409EFF' : ''" @click.native='clicktimelineitem(item, index)'>
                        <div class="top">
                            <div class="toptop">
                                <el-select style="width:87px" v-model="formInline">
                                    <el-option label="出院后" value="AFTER_DISCHARGE" />
                                    <el-option label="入院后" value="AFTER_ADMISSION" />
                                    <el-option label="就诊后" value="AFTER_CONSULTATION" />
                                    <el-option label="就诊/出院后" value="AFTER_VISIT_DISCHARGE" />
                                    <el-option label="术前" value="PREOPERATIVE" />
                                    <el-option label="术后" value="POSTOPERATIVE" />
                                </el-select>
                                <el-input style="width: 50px;"></el-input>
                                <span>天</span>
                            </div>
                            <div>
                                <i class="el-icon-delete" @click="delitem(item, index)"></i>
                                <i class="el-icon-circle-plus-outline" @click="additem(item)"></i>
                            </div>
                        </div>
                        <el-card :class="listindex == index ? 'cards' : ''">
                            <h3 style="height: 20px;">2</h3>
                            <p style="height: 16px;">3333333</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="nodetexts">
                <el-form :model="formInline" class="demo-form-inline">
                    <el-form-item label="任务内容">
                        <el-radio-group v-model="formInline.taskType">
                            <el-radio label="PHONE_OUTBOUND">电话外呼</el-radio>
                            <el-radio label="QUESTIONNAIRE_SCALE">问卷量表</el-radio>
                            <el-radio label="PROPAGANDA_ARTICLE">宣教文案</el-radio>
                            <el-radio label="TEXT_REMIND">文字提醒</el-radio>
                            <el-radio label="ARTIFICIAL_FOLLOW_UP">人工随访</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="电话模板" v-if="formInline.taskType == 'PHONE_OUTBOUND'">

                    </el-form-item>
                    <el-form-item label="宣教模板" v-if="formInline.taskType == 'PROPAGANDA_ARTICLE'">

                    </el-form-item>
                    <el-form-item label="提醒内容" v-if="formInline.taskType == 'TEXT_REMIND'">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" />
                    </el-form-item>
                    <el-form-item label="人工随访模板" v-if="formInline.taskType == 'ARTIFICIAL_FOLLOW_UP'">
                    </el-form-item>
                </el-form>
                <el-form :model="formInline" class="demo-form-inline" :inline="true"
                    v-if="formInline.taskType == 'QUESTIONNAIRE_SCALE'">
                    <el-form-item label="问卷模板">

                    </el-form-item>
                    <el-form-item label="问卷有效期">
                        <el-input-number v-model="formInline.questionExpirationDate" :min="1" :max="99"
                            label="描述文字"></el-input-number>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ManuallyCreatingTasks",
    data() {
        return {
            updata: {
                routeName: '',
                suitRange: ''
            },
            formInline: {
                taskType: '',
                questionExpirationDate: "",
            },
            list: [{

            }, {}],
            listindex: 0,
        }
    },
    created() {
    },
    methods: {
        clicktimelineitem(item, index) {
            this.formInline = item
            this.listindex = index
        },
        additem(item) {
            item.push({
            })
        },
        delitem(item, index) {
            this.list.splice(index, 1)
        },
    }
};
</script>
<style lang="scss" scoped>
.title {
    padding: 20px;
}

.nodes {
    background-color: #F1F3F5;
    height: 700px;
    display: flex;
    justify-content: space-evenly;
    padding-top: 20px;

    .nodenames {
        border-radius: 10px;
        background-color: #fff;
        height: 700px;
        width: 25%;
        padding: 20px 40px 0 0;
    }

    .nodetexts {
        border-radius: 10px;
        width: 70%;
        background-color: #fff;
        height: 700px;
        padding: 20px;
    }
}


.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;
}

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

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

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

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

.dialog-footer {
    display: inline-block;
    float: right;
}
</style>