work_notes
/
任务协同
/
components
/
create-task
/
component
/
task-form-20001.vue

<template>
    <section class="task-form">
        <el-form-item
            :prop="`taskData.importantMsg`"
            :rules="[{ required: true, message: '请填写任务的重要性', trigger: ['blur'] },{ min: 0, max: 100, message: '不能超过100个字', trigger: ['blur', 'change'] }]"
            label="告知患者该任务的重要性" class="w600">
            <el-input v-model="taskData.importantMsg" :rows="3" type="textarea"
                      placeholder="包含为什么做这件事、做完后会得到什么样的帮助。有助于提升患者完成任务的依从性，不超过100字。" />
            <p class="example">样例：甲钴胺片通常只服用1个月，超过1个月未见好转，应与医生明确是否继续治疗，有无必要进一步检查。</p>
        </el-form-item>
        <div class="inquiry-form">
            <h5 class="inquiry-form-title">问诊单</h5>
            <div class="inquiry-form-content">
                <el-form-item
                    :prop="`taskData.patientCondition`"
                    :rules="[{ min: 0, max: 512, message: '不能超过512个字', trigger: ['blur', 'change'] }]" label="病情描述">
                    <el-input v-model="taskData.patientCondition" :rows="3" type="textarea" placeholder="" />
                    <p class="example">样例：手术时间：2018年5月23日<br>手术方式：右侧甲状腺根治术<br>病理结果：“左”甲状腺乳头状癌(1.2xlcm)。2.“右”结节性甲状腺肿。3.“左侧中央区”淋巴结(0/4)未见转移性癌。</p>
                </el-form-item>
                <el-form-item :prop="`taskData.questions`" required label="患者问题">
                    <div v-for="(item,index) in taskData.questions" :key="index" class="question-area">
                        <el-form-item
                            :prop="`taskData.questions[${index}].name`"
                            :rules="[{required:true, message:'患者问题为必填', trigger:['blur','change']}]"
                            :ref="'questions' + index">
                            <el-input v-model="item.name" placeholder="请输入问题" />
                            <el-button v-if="taskData.questions.length>1" icon="el-icon-minus" size="small" @click="handleDelQues(index)" />
                        </el-form-item>
                    </div>
                    <el-button @click="addQuestion">添加问题</el-button>
                    <el-button type="text" @click="showQuesFlag = true">
                        <i class="el-icon-plus" />从问题清单中导入</el-button>
                </el-form-item>
                <el-form-item label="图片资料">
                    <image-upload v-model="taskData.images" :img-class="$style.img" />
                </el-form-item>
                <el-form-item
                    :prop="`taskData.inquiry`"
                    :rules="[{ min: 0, max: 512, message: '不能超过512个字', trigger: ['blur', 'change'] }]"
                    label="随访问诊补充">
                    <el-input v-model="taskData.inquiry" :rows="3" type="textarea" placeholder="">该内容只展示给医生，患者端不可见</el-input>
                    <p class="example">样例：患者未按标准使用优甲乐：<br>1、未与豆制品、牛奶等间隔4小时以上<br>2、8月22~8月25日因出差停药4天</p>
                </el-form-item>
            </div>
        </div>
        <el-form-item
            :prop="`taskData.myChoseList`"
            :rules="[{validator:validateChoseList(),trigger:'change'}]"
            label="建议咨询的医生">
            <p class="title border">患者的医生团队</p>
            <el-table ref="patientTable" :data="taskData.myDoctorList" :header-row-style="{color:'#1F2D3D'}"
                      style="width: 700px" border @selection-change="handleDoctorChange">
                <el-table-column prop="doctorUserName" label="医生姓名" />
                <el-table-column label="优惠情况" width="100">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.priceType" placeholder="请选择优惠情况">
                            <el-option v-for="v in discountsList" :key="v.id" :label="v.name" :value="v.id" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="医生标签" width="140">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.doctorTag" placeholder="请选择医生标签">
                            <el-option v-for="v in tagList" :key="v.id" :label="v.name" :value="v.id" />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column type="selection" label="选择" width="60" />
            </el-table>
            <template v-if="taskData.otherDoctorList && taskData.otherDoctorList.length">
                <p class="title">添加的医生</p>
                <el-table ref="multipleTable" :data="taskData.otherDoctorList" :header-row-style="{color:'#1F2D3D'}"
                          style="width: 700px" border>
                    <el-table-column prop="doctorUserName" label="医生姓名" />
                    <el-table-column label="优惠情况" width="100">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.priceType" placeholder="请选择优惠情况">
                                <el-option v-for="v in discountsList" :key="v.id" :label="v.name" :value="v.id" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="医生标签" width="140">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.doctorTag" placeholder="请选择医生标签">
                                <el-option v-for="v in tagList" :key="v.id" :label="v.name" :value="v.id" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60">
                        <template slot-scope="scope">
                            <el-button type="text" @click="delDoc(scope.$index, taskData.otherDoctorList)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-button type="text" icon="el-icon-plus" @click="showDocFlag = true">添加医生</el-button>
            <template v-if="taskData.itemList && taskData.itemList.length">
                <p class="title">推荐相关科室其他医生</p>
                <el-radio-group v-model="taskData.itemId" class="w600">
                    <el-radio v-for="item in taskData.itemList" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
                </el-radio-group>
            </template>
        </el-form-item>

        <select-question v-if="showQuesFlag" :visible.sync="showQuesFlag" :handle-submit="addLoadQues" />
        <select-doctors v-if="showDocFlag" :visible.sync="showDocFlag" :handle-submit="addDoctor" />
    </section>
</template>
<script>
import imageUpload from 'src/components/image-upload';
import selectQuestion from 'src/components/select-question';
import selectDoctors from 'src/components/select-doctors';
import { getDoctorAndItemList } from '../fetch';

export default {
    name: 'TaskForm20001',
    components: {
        imageUpload,
        selectQuestion,
        selectDoctors,
    },
    props: {
        taskData: Object,
        ruleTaskId: Number,
    },
    inject: ['setLoading'],
    data() {
        return {
            showQuesFlag: false,
            showDocFlag: false,
            // 医生标签
            tagList: [{ id: 1, name: '无标签' }, { id: 2, name: '主刀医生' }, { id: 3, name: '家庭医生' }],
            // 优惠情况
            discountsList: [{ id: 1, name: '原价' }, { id: 2, name: '半价' }, { id: 3, name: '免费' }],
        };
    },
    async mounted() {
        this.setLoading(true);
        if (this.ruleTaskId) {
            // 编辑
            const { taskData } = this;
            this.taskData.images = taskData.imageList;
            this.taskData.myChoseList = taskData.myDoctorList;
            this.$nextTick(() => {
                taskData.myChoseList.forEach(row => {
                    this.$refs.patientTable.toggleRowSelection(row, !!row.isChosen);
                });
            });
        } else {
            // 创建
            const { doctorList, itemGroupList } = await getDoctorAndItemList(+this.$route.query.patientId);
            // 患者的医生团队
            this.taskData.myDoctorList = doctorList.map(item => ({
                doctorUserName: item.name,
                doctorUserId: item.id,
                doctorTag: 1,
                priceType: 1,
                isChosen: 0,
            }));
            // 推荐科室列表
            this.taskData.itemList = itemGroupList;
        }
        this.setLoading(false);
    },
    methods: {
        // 删除问题
        handleDelQues(index) {
            this.$refs[`questions${index}`][0].clearValidate();
            this.taskData.questions.splice(index, 1);
        },
        // 添加问题
        addQuestion() {
            this.taskData.questions.push({});
        },
        // 导入问题
        addLoadQues(item) {
            const addList = item.map(v => ({ id: v.id || null, name: v.question }));
            // 去空
            const trimList = this.taskData.questions.filter(v => v.name);
            // 去重
            this.taskData.questions = _.uniqWith([...trimList, ...addList], _.isEqual);
        },
        // 添加医生
        addDoctor(item) {
            const list = item.map(v => ({
                doctorUserName: `${v.name} ${v.hospitalName} ${v.itemName}`,
                doctorUserId: v.doctorUserId,
                doctorTag: 1,
                priceType: 1,
                isChosen: 1,
            }));
            // 去重
            this.taskData.otherDoctorList = _.uniqWith([...this.taskData.otherDoctorList, ...list], _.isEqual);
        },
        // 选择患者的医生
        handleDoctorChange(val) {
            this.taskData.myChoseList = val;
        },
        // 删除添加的医生
        delDoc(index, rows) {
            rows.splice(index, 1);
        },
        // 校验医生是否已选
        validateChoseList() {
            return (rule, value, callback) => {
                const { myChoseList, otherDoctorList, itemId } = this.taskData;
                if (!myChoseList.length && !otherDoctorList.length && !itemId) {
                    callback(new Error('建议咨询的医生为必填！'));
                    return;
                }
                callback();
            };
        },
        // 处理需要提交的数据
        handlePostData() {
            const { questions, images, myDoctorList, myChoseList, otherDoctorList } = this.taskData;
            // 处理患者医生团队，注入已选未选信息
            myDoctorList.forEach(item => {
                item.isChosen = 0;
                myChoseList.forEach(sub => {
                    item.isChosen = +(sub.doctorUserId === item.doctorUserId);
                });
            });

            return {
                ...this.taskData,
                // 去重
                questions: _.uniqWith(questions, _.isEqual),
                // 去重
                otherDoctorList: _.uniqWith(otherDoctorList, _.isEqual),
                images: images.map(item => item.imageKey),
                myDoctorList,
            };
        },
    },
};
</script>
<style lang="less" scoped>
@import '../style.less';
.inquiry-form {
    &-title {
        color: #3d3d3d;
    }
    &-content {
        width: 600px;
        margin: 16px 0;
        border: 1px solid #c0ccda;
        padding: 6px 12px;
        background-color: #f2f4f7;
        .question-area {
            margin-bottom: 18px;
            /deep/ .el-input {
                width: 90%;
            }
        }
    }
}
.title {
    color: #99a9bf;
    margin-top: 12px;
}
</style>
<style lang="less" module>
.img {
    width: 88px !important;
    height: 88px !important;
}
</style>