vueCMS3.0/src/components/page-order/src/form/consultation...

<template>
    <el-form :model="form" ref="orderRef" label-width="150" style="width: 800px" :rules="rules">

        <el-form-item label="工单类别" prop="workordercate">
            <el-cascader ref="workOrderRef" v-model="form.workordercate" :props="{value: 'id',}" placeholder="请选择工单类别" @change="workordercateChange" :options="childrenTypes" filterable />
        </el-form-item>
        <el-form-item label="申请科室" prop="applicantDept">
            <el-tree-select
                  style="width: 100%"
                  v-model="form.applicantDept"
                  filterable
                  :data="deptData"
                  check-strictly
                  @change="deptChange"
                  :render-after-expand="false"
                />
        </el-form-item>
        <el-form-item label="联系人姓名" prop="callcode">
            <el-select v-model="form.callcode" filterable placeholder="请选择联系人姓名" @change="userChange" style="width: 214px;">
                <el-option v-for="item in deptUsers" :key="item.userName" :label="item.nickName" :value="item.userName" />
            </el-select>
        </el-form-item>
        <el-form-item label="联系人电话" prop="callnum">
            <el-input v-model="form.callnum" placeholder="请输入联系人电话" />
        </el-form-item>
        <el-form-item label="患者姓名" prop="patientName">
            <el-input v-model="form.patientName" placeholder="请输入患者姓名" />
        </el-form-item>


        <el-form-item label="住院号" prop="hospitalNum">
            <el-input v-model="form.hospitalNum" placeholder="请输入住院号" />
        </el-form-item>
        <el-form-item label="管床医师" prop="attendingDoctor">
            <el-input v-model="form.attendingDoctor" placeholder="请输入管床医师" />
        </el-form-item>
        <el-form-item v-if="workOrderCode !== YCHZ" label="邀请科室" prop="applicantDept">
            <el-tree-select
                  style="width: 100%"
                  v-model="form.inviteDept"
                  filterable
                  :data="deptData"
                  check-strictly
                  :render-after-expand="false"
                />
        </el-form-item>
        
        <el-form-item v-if="workOrderCode !== YCHZ" label="会诊地点" prop="consultationLocation">
            <el-input v-model="form.consultationLocation" placeholder="请输入会诊地点" />
        </el-form-item>

        <el-form-item v-if="workOrderCode === YCHZ" label="邀请医院" prop="inviteHospital">
            <el-input v-model="form.inviteHospital" placeholder="请输入邀请医院" />
        </el-form-item>

        <el-form-item v-if="workOrderCode === YCHZ" label="邀请医师" prop="inviteDoctor">
            <el-input v-model="form.inviteDoctor" placeholder="请输入邀请医师" />
        </el-form-item>

        <el-form-item label="会诊时间" prop="consultationTime">
            <el-date-picker v-model="form.consultationTime" type="datetime" placeholder="请选择会诊时间"/>
        </el-form-item>
        
        <el-form-item label="备注" prop="content">
            <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item label="是否完结" prop="delivery">
            <el-switch v-model="form.isend" />
        </el-form-item>
    </el-form>
    <div class="order-layout" style=" width: 100%;">
        <div style="text-align: center; margin: 0 auto; margin-bottom: 100px;">
            <el-button type="primary" @click="onStage(orderRef)" v-if="stageFlag">暂存</el-button>
            <el-button @click="resetForm()">重置</el-button>
            <el-button type="primary" @click="onSubmit(orderRef)">提交</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref,toRaw } from 'vue'
import useSelectStore from '@/store/commonSelect/common';
import { createPageData, editPageData,getPageListData } from '@/api/main/system/system';
import { getUnprefixNuber } from '@/utils';
import moment from 'moment';
import { userDecryptToAsterisk, userToAsterisk } from '@/utils/aes'
import useSocketStore from '@/store/modules/socket'

import { initDb } from '@/utils/indexdb'
import { getInstance } from "@michaelray/indexdb";
const lineState = computed(() => {
  return useSocketStore().lineState
})
const { proxy } = getCurrentInstance();
const workOrderCode = ref('')
const workOrderRef: any = ref(null)

// do not use same name with ref
const form = ref({
    firsttype:1000,
    workordercate: [],   // 工单类型
    callnum: '', // 申请人电话
    callcode: '', // 申请人编号
    caller: '', // 患者姓名
    patientName: '', // 患者姓名
    content: '',   // 咨询内容
    isend: 0, // 是否完结 
    applicantName: '', // 申请人员
    hospitalNum: '', // 住院号
    // applicantPhone: '', // 申请人员电话
    applicantDept: '', // 申请部门
    attendingDoctor: '', // 管床医师
    inviteDept: '', // 邀请科室
    consultationLocation: '', // 会诊地点
    inviteHospital: '', // 邀请医院
    inviteDoctor: '', // 邀请医师
    consultationTime: '', // 会诊时间
});


const YCHZ = 'hz_ychz';

const getRequired = () => {
    return workOrderCode.value === YCHZ
}


const rules = reactive({
    workordercate: [
        { required: true, message: '请选择工单类型', trigger: 'blur' },
    ],
    applicantDept: [
        { required: true, message: '请选择申请科室', trigger: 'blur' },
    ],
    callcode: [
        { required: true, message: '请选择申请人', trigger: 'blur' },
    ],
    // callnum: [
    //     { required: true, message: '请输入申请人电话', trigger: 'blur' },
    // ],
    patientName: [
        { required: true, message: '请输入患者姓名', trigger: 'blur' },
    ],
    hospitalNum: [
        { required: true, message: '请输入住院号', trigger: 'blur' },
    ],
    attendingDoctor: [
        { required: true, message: '请输入管床医师', trigger: 'blur' },
    ],
    inviteDept: [
        { required: !getRequired(), message: '请选择邀请科室', trigger: 'blur' },
    ],
    consultationLocation: [
        { required: !getRequired(), message: '请输入会诊地点', trigger: 'blur' },
    ],
    inviteHospital: [
        { required: getRequired(), message: '请输入邀请医院', trigger: 'blur' },
    ],
    inviteDoctor: [
        { required: getRequired(), message: '请输入邀请医师', trigger: 'blur' },
    ],
    consultationTime: [
        { required: true, message: '请选择会诊时间', trigger: 'blur' },
    ],
    // content: [
    //     { required: true, message: '请输入内容', trigger: 'blur' },
    // ]
});

const childrenTypes = ref([]);
const orderRef = ref();
const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => ({}),
    }
});
const emit = defineEmits([ "updateSuccess" ]);

const deptData = ref([])

const userData =ref([])

watch(props, (nweProps) => {
    initMethod(nweProps)
});
onMounted(() => {
    initMethod(props)
});
const stageState = computed(() => {
  return useSocketStore().stageState
})
const stageFlag = ref(true)
const initMethod = async (props) => {
    userData.value =  useSelectStore().userData;
    deptData.value = useSelectStore().deptListData;
    if (props.orderInfo && props.orderInfo.type) {
        getOrderType(props.orderInfo.type)
    }
    if (!props.orderInfo.callId) {
        stageFlag.value = false
    }
    if (props.orderInfo.workordercode || props.orderInfo.callId) {
        if (props.orderInfo.id || props.orderInfo.workordercode) {
            stageFlag.value = false
        }
        form.value.workorderId = props.orderInfo.workorderId
        form.value.workordercode = props.orderInfo.workordercode
        workOrderCode.value = props.orderInfo.workordercatecode
        workordercateChange();

        form.value.firsttype = props.orderInfo.firsttype
        // form.value.customerno = props.orderInfo.customerno
        form.value.workordercate = props.orderInfo.workordercate
        form.value.applicantDept = props.orderInfo.applicantDept
        await deptChange(form.value.applicantDept);
        form.value.callnum = userToAsterisk(props.orderInfo.callnum)

        form.value.callcode = props.orderInfo.callcode
        form.value.patientName = props.orderInfo.patientName
        form.value.hospitalNum = props.orderInfo.hospitalNum
        form.value.attendingDoctor = props.orderInfo.attendingDoctor
        form.value.inviteDept = props.orderInfo.inviteDept
        form.value.consultationLocation = props.orderInfo.consultationLocation
        form.value.inviteHospital = props.orderInfo.inviteHospital
        form.value.inviteDoctor = props.orderInfo.inviteDoctor
        form.value.consultationTime = props.orderInfo.consultationTime
        // form.value.callnum = userToAsterisk(props.orderInfo.callnum)
        // form.value.caller = props.orderInfo.caller
        form.value.content = props.orderInfo.content
        form.value.isend = props.orderInfo.isend?true:false
    }
    if (props.orderInfo && props.orderInfo.caller) form.value.caller = props.orderInfo.caller
    if (props.orderInfo && props.orderInfo.callnum) form.value.callnum = props.orderInfo.callnum
    // if (form.value.callnum) {
    //     customerDetail(form.value.callnum)
    // }
    if (props.orderInfo.callId) {
        form.value.callId = props.orderInfo.callId
        // form.value.callnum = getUnprefixNuber(props.orderInfo.callnum) 
        if (props.orderInfo.callnum.length>12) {
            form.value.callnum = userToAsterisk(props.orderInfo.callnum)
        } else{
            form.value.callnum = getUnprefixNuber(props.orderInfo.callnum) 
        }
        customerDetail(form.value.callnum)
       
    }
}
async function getOrderType(id) {
    const resultData = await getPageListData('/worker/type/getTreeselectById',{id});
    childrenTypes.value =  resultData.data ?? []
}
async function customerDetail(customerno) {
    const resultData = await getPageListData('/system/addressbook/Affiliation/'+customerno);
    console.log(resultData.data,'consultation')
    patientName.value.caller =  resultData.data.name
}
defineExpose({
    onStage
})

function onStage(type) {
    const params = form.value
    // params.consultationLocation = form.value.consultationLocation
    // params.inviteHospital = form.value.inviteHospital
    // params.inviteDoctor = form.value.inviteDoctor
    params.workordercatecode =   workOrderCode.value
    params.firsttype = props.orderInfo.type*1 
    params.customerno = params.callnum
    params.caller = params.caller
    if (params.workordercate) {
        params.workordercate.length && (params.workordercate = params.workordercate[params.workordercate.length-1] )
    }
    if (params.consultationTime) {
        params.consultationTime = moment(params.consultationTime).format('YYYY-MM-DD HH:mm:ss')
      }
    params.isend && (params.isend = params.isend ?1:0)
    params.createtime =  moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
    setDb(params,type)
}   
async function setDb(data,type){
    await initDb();
	{
		await getInstance().insert({
			tableName: 'orderList',
			data:toRaw(data)
		})
	}
    proxy.$modal.msgSuccess('暂存成功！');
    if (type === 2) {
        emit('updateSuccess');
        useSocketStore().setStageState(0)
    }
}

const onSubmit = (formEl) => {
    if (!formEl) return
   formEl.validate((valid, fields) => {
    
    if (valid) {
        const params: any = {
            ...form.value,    
        };
        params.firsttype =props.orderInfo.type*1
    //   form.value.customerno = form.value.callnum
        if (params.workordercate) {
            if (params.workordercate.length) {
                params.workordercate = params.workordercate[params.workordercate.length-1]
            }
        }

      if (params.consultationTime) {
        params.consultationTime = moment(params.consultationTime).format('YYYY-MM-DD HH:mm:ss')
      }
      params.isend = params.isend ? 1:0
      if (props.orderInfo.workorderId) {
        editPageData('/order/workorder', params).then((data) => {
            proxy.$modal.msgSuccess('编辑成功！');
            resetForm()
            useSocketStore().setStageState(0)
            emit('updateSuccess');
          });
      }else{
        if (lineState.value === '通话中') {
          proxy.$modal.msgSuccess('正在通话中');
          return   
        }
        createPageData('/order/workorder', params).then((data) => {
            proxy.$modal.msgSuccess('提交成功！');
            resetForm()
            emit('updateSuccess');
            if (params.callId) {
                useSocketStore().setStageState(0)
                emit('stageSuccess',params.callId);
            }
        })
      }
      
    } else {
      console.log('error submit!', fields)
    }
  })
}
function resetForm() {
    if (!orderRef.value) return
    orderRef.value.resetFields()
}

const userChange = (val) => {
    const obj: any = userData.value.find(function(i: any){
        return i.userName === val
    });
    form.value.callnum = obj.phonenumber

}

const deptUsers = ref([]);

const deptChange = async (val) => {

    const users = await useSelectStore().userData.filter((o: any) => {
        return o.deptId === val;
    });
    if (users && users.length > 0) {
        deptUsers.value = users
    } else {
        deptUsers.value = []
    }
}

// 工单类型变更，切换对应数据
const workordercateChange = () => {
    const node = workOrderRef.value.getCheckedNodes();
    if (node && node.length > 0) {
        workOrderCode.value = node[0].data.code
    } else {
        form.value.teshuyaopin = 0;
        form.value.contactPhone = '';
        form.value.diagnosis = '';
        form.value.huxiji = '';
        form.value.weiliangbeng = 0;
    }
}
</script>