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

<template>
    <div>
        <div class="title">
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="upload">执行</el-button>
            </div>
            <el-descriptions title="手动创建任务">
            </el-descriptions>
            <el-form :inline="true" :model="updata" class="demo-form-inline" ref="updata">
                <el-form-item label="任务名称">
                    <el-input v-model="updata.routeName"></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 class="chufatitle">
                <span>触发条件</span>
                <el-button type="primary" plain size="mini" @click="addtriggerCondition">添加触发条件</el-button>
            </div>
            <el-form ref="updata" :model="updata" label-width="80px">
                <div class="node" v-for="(item, index) in updata.triggerConditionList" :key="index"
                    :style="updata.triggerConditionList.length > 1 ? '' : 'margin:0'">
                    <div style="display: inline-block;margin-right:20px;font-size:14px">触发条件{{ index + 1 }}</div>
                    <el-select v-model="item.triggerConditionName" style="width:120px">
                        <el-option label="诊断" value="DIAGNOSIS" />
                        <el-option label="换药日期" value="DRESSING_CHANGE_DATE" />
                        <el-option label="治疗方式" value="TREATMENT_METHOD" />
                        <el-option label="手术名称" value="SURGICAL_NAME" />
                        <el-option label="药品名称" value="DRUG_NAME" />
                    </el-select>
                    <el-select v-model="item.triggerConditionOperator" style="width: 100px;">
                        <el-option label="包含" value="CONTAIN" />
                        <el-option label="不包含" value="NOT_CONTAIN" />
                        <el-option label="等于" value="EQUAL_TO" />
                        <el-option label="不等于" value="NOT_EQUAL_TO" />
                    </el-select>
                    <el-input v-model="item.triggerConditionValue" style="width: 300px;"
                        placeholder="请输入触发条件"></el-input>
                </div>
            </el-form>
        </div>
        <div class="nodes">
            <div class="nodenames">
                <div class="timetitle">
                    管理路径节点({{ list.length }})
                    <i class="el-icon-circle-plus-outline" @click="additem"></i>
                </div>
                <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:90px" v-model="item.routeNodeName">
                                    <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: 70px;" v-model="item.routeNodeDay"></el-input>
                                <span>天</span>
                            </div>
                            <div>
                                <i class="el-icon-delete" @click="delitem(item, index)"></i>
                            </div>
                        </div>
                        <el-card :class="listindex == index ? 'cards' : ''">
                            <h3 style="height: 20px;">
                                {{ item.taskType == 'PHONE_OUTBOUND' ? "电话外呼" : "" }}
                                {{ item.taskType == 'QUESTIONNAIRE_SCALE' ? "问卷量表" : "" }}
                                {{ item.taskType == 'PROPAGANDA_ARTICLE' ? "宣教文案" : "" }}
                                {{ item.taskType == 'TEXT_REMIND' ? "文字提醒" : "" }}
                                {{ item.taskType == 'ARTIFICIAL_FOLLOW_UP' ? "人工随访" : "" }}
                            </h3>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <div class="nodetexts">
                <div style=" background-color: #fff; border-radius: 10px;padding:20px;"
                :style="formInline.taskType=='TEXT_REMIND'?'':'height:160px'">
                    <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'">
                            <scriptphone @on-template="scriptphoneontemplate"></scriptphone>
                        </el-form-item>
                        <el-form-item label="宣教模板" v-if="formInline.taskType == 'PROPAGANDA_ARTICLE'">
                            <propaganda @on-template="propagandaontemplate"></propaganda>
                        </el-form-item>
                        <el-form-item label="提醒内容" v-if="formInline.taskType == 'TEXT_REMIND'">
                            <el-input type="textarea" v-model="formInline.textRemindContent" :rows="6"
                                placeholder="请输入内容" />
                        </el-form-item>
                        <el-form-item label="人工随访模板" v-if="formInline.taskType == 'ARTIFICIAL_FOLLOW_UP'">
                            <question @on-template="questionontemplate"></question>
                        </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="问卷模板">
                            <question @on-template="questionontemplate"></question>
                        </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
                    v-if="formInline.taskType == 'TEXT_REMIND' || formInline.taskType == 'PROPAGANDA_ARTICLE' || formInline.taskType == 'QUESTIONNAIRE_SCALE'">
                    <div class="PushMethod">
                        <span>推送方式：短信</span>
                        <el-switch v-model="formInline.messagePushSign" active-color="#13ce66" active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </div>
                    <div class="PushMethod">
                        <span>推送方式：公众号</span>
                        <el-switch v-model="formInline.officialPushSign" active-color="#13ce66" active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </div>
                    <div class="PushMethod">
                        <span>推送方式：小程序</span>
                        <el-switch v-model="formInline.appletPushSign" active-color="#13ce66" active-value="1"
                            inactive-value="0">
                        </el-switch>
                    </div>
                </div>
                <div class="PushMethod" v-if="formInline.taskType == 'PHONE_OUTBOUND'">
                    <span>推送方式：人工电话</span>
                    <el-switch v-model="formInline.phonePushSign" active-color="#13ce66" active-value="1"
                            inactive-value="0">
                        </el-switch>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import propaganda from '../components/propaganda.vue'
import scriptphone from '../components/script.vue'
import question from '../components/question.vue'
import {
    signrouteadd
} from '@/api/system/ManuallyCreatingTasks'
export default {
    components: { scriptphone, question, propaganda },
    name: "ManuallyCreatingTasks",
    data() {
        return {
            updata: {
                routeName: '',
                suitRange: '',
                routeNodeList: [],
                triggerConditionList: [{
                    routeId: '',
                    routeName: '',
                    triggerConditionName: '',
                    triggerConditionOperator: '',
                    triggerConditionValue: '',
                }],
            },
            formInline: {
                routeNodeDay: '',
                taskType: '',
                routeNodeName: '',
                questionExpirationDate: 7,
                questionInfoId: "",
                questionnaireName: "",
                phoneTemplateId: "",
                phoneTemplateName: "",
                propagandaInfoId: '',
                propagandaTitle: "",
                textRemindContent: '',
                officialPushSign: '0',
                messagePushSign: '0',
                appletPushSign: '0',
                phonePushSign:'0',
            },
            list: [
                {
                    routeNodeDay: '',
                    taskType: '',
                    routeNodeName: '',
                    questionExpirationDate: 7,
                    questionInfoId: "",
                    questionnaireName: "",
                    phoneTemplateId: "",
                    phoneTemplateName: "",
                    propagandaInfoId: '',
                    propagandaTitle: "",
                    textRemindContent: '',
                    officialPushSign: '0',
                    messagePushSign: '0',
                    appletPushSign: '0',
                phonePushSign:'0',
                }
            ],
            listindex: 0,
        }
    },
    created() {
        this.formInline = this.list[0]
    },
    methods: {
        addtriggerCondition() {
            this.updata.triggerConditionList.push({
                routeId: '',
                routeName: '',
                triggerConditionName: '',
                triggerConditionOperator: '',
                triggerConditionValue: '',
            })
        },
        //宣教传值
        propagandaontemplate(item) {
            this.formInline.propagandaInfoId = item.templateId
            this.formInline.propagandaTitle = item.templateName
        },
        //问卷传值
        questionontemplate(item) {
            this.formInline.questionInfoId = item.templateId
            this.formInline.questionnaireName = item.templateName
        },
        //话术传值
        scriptphoneontemplate(item) {
            this.formInline.phoneTemplateId = item.templateId
            this.formInline.phoneTemplateName = item.templateName
        },
        clicktimelineitem(item, index) {
            this.formInline = item
            this.listindex = index
        },
        additem(item) {
            this.list.push({
                routeNodeDay: '',
                taskType: '',
                routeNodeName: '',
                questionExpirationDate: 7,
                questionInfoId: "",
                questionnaireName: "",
                phoneTemplateId: "",
                phoneTemplateName: "",
                propagandaInfoId: '',
                propagandaTitle: "",
                textRemindContent: '',
                officialPushSign: '0',
                messagePushSign: '0',
                appletPushSign: '0',
                phonePushSign:'0',
            })
        },
        delitem(item, index) {
            this.list.splice(index, 1)
        },
        upload() {
            this.updata.routeNodeList = this.list
            signrouteadd(this.updata).then(res => {

            })
        },
    }
};
</script>
<style lang="scss" scoped>
.chufatitle {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    span {
        margin-right: 30px;
        font-size: 16px;
        font-weight: bold;
    }
}

.node {
    margin-bottom: 10px;
}

.PushMethod {
    height: 100px;
    padding: 20px;
    line-height: 60px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    padding: 20px;
}

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

    .nodenames {
        border-radius: 10px;
        background-color: #fff;
        height: 700px;
        width: 25%;
        padding: 0 40px 0 40px;
        background-color: #fff;
        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;
        }
    }

    .nodetexts {
        border-radius: 10px;
        width: 73%;
        height: 700px;
    }
}


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