postdischarge-ui/src/views/manage/continueSigning/index.vue

<template>
    <div class="app-container">
        <div class="interval">

        </div>
        <div class="header">
            <div class="btns">
                <el-button>取消</el-button>
                <el-button type="primary" @click="signupload">签约</el-button>
            </div>
            <el-descriptions title="服务包续约详情" class="descriptions">
            </el-descriptions>
            <el-descriptions title="患者信息" style="padding:0 30px">
                <el-descriptions-item label="患者姓名">{{ $route.query.patientName }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{ $route.query.sex }}</el-descriptions-item>
                <el-descriptions-item label="年龄">{{ $route.query.age }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{ $route.query.patientPhone }}</el-descriptions-item>
                <el-descriptions-item label="就诊方式">{{
                    $route.query.visitMethod == 'OUTPATIENT_SERVICE' ? '门诊' : $route.query.visitMethod == 'BE_IN_HOSPITAL' ?
                    '住院' : ''
                }}
                </el-descriptions-item>
                <el-descriptions-item label="诊断">{{ $route.query.mainDiagnosis }}</el-descriptions-item>
                <el-descriptions-item label="住院/门诊号">{{ $route.query.admissionNumber }}{{ $route.query.outpatientNumber
                }}</el-descriptions-item>
                <el-descriptions-item label="医院">{{ $route.query.hospitalAgencyName }}</el-descriptions-item>
                <el-descriptions-item label="科室">{{ $route.query.departmentName }}</el-descriptions-item>
                <el-descriptions-item label="服务包缴费状态">{{ $route.query.paymentStatus == 'PAID' ? '已缴费' : '' }}
                    {{ $route.query.paymentStatus == 'UNPAID_FEES' ? '未缴费' : '' }}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="出院/门诊时间">{{ $route.query.patientName }}</el-descriptions-item> -->
                <!-- <el-descriptions-item label="注册时间">{{ $route.query.patientName }}</el-descriptions-item> -->
            </el-descriptions>
            <el-descriptions title="服务包信息" style="padding:20px 30px 10px" class="descriptions">
            </el-descriptions>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" :inline="true"
                style="padding-left:40px">
                <el-form-item label="选择服务包" prop="packageName">
                    <el-input v-model="form.packageName" style="width:700px"></el-input>
                </el-form-item>
                <el-form-item label="签约月数" prop="">
                    <el-input v-model="form.packageName"></el-input>
                </el-form-item>
                <el-form-item label="服务时长" prop="packageName">
                    <el-input v-model="form.packageName" style="width:150px"></el-input>
                    至
                    <el-input v-model="form.packageName" style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="服务包价格" prop="">
                    <el-input v-model="form.packageName"></el-input>
                </el-form-item>
            </el-form>
            <el-descriptions title="硬件信息" style="padding:20px 30px 10px" class="descriptions">
            </el-descriptions>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" :inline="true"
                style="padding-left:40px">
                <div v-for="(item, index) in form.hardwarelist" :key="index">
                    <el-form-item label="硬件类型" :prop="`hardwarelist[${index}].hardwareType`"
                        :rules="rules.hardwarelist.hardwareType">
                        <el-select v-model="item.hardwareType" placeholder="请选择硬件类型" clearable style="width:208px">
                            <el-option v-for="dict in dict.type.hardware_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="SN码" :prop="`hardwarelist[${index}].snCode`" :rules="rules.hardwarelist.snCode">
                        <el-input v-model="item.snCode" placeholder="请输入设备SN码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" @click="delhardware(index)">删除</el-button>
                    </el-form-item>
                </div>
                <el-button class="addbtn" type="primary" size="mini" @click="addhardware">新增硬件</el-button>
            </el-form>
            <el-descriptions title="知情同意书" style="padding:20px 30px 10px" class="descriptions">
            </el-descriptions>
            <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                style="margin-left:70px" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>
    </div>
</template>
    
<script>
import {
    addsign
} from '@/api/manage/newSigning.js'
export default {
    dicts: ['hardware_type'],
    name: "newSigning",
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            form: {
                packageName: undefined,
                hardwarelist: [
                    {
                        snCode: '',
                        hardwareType: '',
                    }
                ],
            },
            rules: {
                packageName: [
                    { required: true, message: '请选择服务包', trigger: 'change' }
                ],
                hardwarelist: {
                    snCode: [
                        { required: true, message: '请输入SN码', trigger: 'change' }
                    ],
                    hardwareType: [
                        { required: true, message: '请选择硬件类型', trigger: 'change' }
                    ],
                },
            }
        };
    },
    created() {
    },
    methods: {
        //签约
        signupload() {
            addsign(this.form).then(res => {

            })
        },
        //新增硬件
        addhardware() {
            this.form.hardwarelist.push({
                snCode: '',
                hardwareType: '',
            })
        },
        delhardware(index) {
            this.form.hardwarelist.splice(index, 1);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
    padding: 14px 0 0;
    background-color: #F2F3F5 !important;
    width: 100%;
    display: flex;
    justify-content: center;

    .descriptions {
        padding: 20px 20px 10px;
    }

    .descriptions {
        ::v-deep .el-descriptions-item__label.has-colon::after {
            display: none;
        }
    }

    .interval {
        width: 23%;
        background-color: #fff;
        border-radius: 8px 0 0 8px;
        border-right: 1px solid #e5e5e5;
    }

    .header {
        background-color: #fff;
        width: 73%;
        border-radius: 0 8px 8px 0;
        position: relative;
    }

    .btns {
        position: absolute;
        top: 30px;
        right: 30px;
    }

    .addbtn {
        margin-right: 100px;
        float: right;
        transform: translateY(-200%);
    }
}
</style>