addFolviteDistribution.vue

<template>
    <div>
        <a-spin tip="加载中..." :spinning="spinning">
            <a-card>
            <div style="font-size: 18px;font-weight: 600">
                <span>叶酸发放登记</span>
            </div>
            <a-form-model ref="formRef" :model="formData" :rules="formRules" :labelCol="{span: 6}"
                          :wrapperCol="{span: 16}">

                <div style="margin: 30px 0px">
                    <div class="divider_my"><span class="midText">居民信息</span></div>
                </div>
                <div style="clear: both"></div>
                <a-card size="small" :headStyle="{background: '#FAFAFA'}">
                    <div slot="title">
                        <img class="title_img" src="../../../../../static/images/user_info_index.png">
                        <span class="title_font">女方信息</span>
                    </div>
                    <a-button slot="extra">身份证识别</a-button>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="姓名" prop="sendContact">
                                <a-input placeholder="请输入姓名" v-model="formData.sendContact"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="证件类型" prop="sendPhone">
                                <a-select v-model="formData.receiveUnitId" placeholder="请选择"
                                          @click.native="getChildUnitList">
                                    <a-select-option v-for="item in childUnitList"
                                                     :key="item.id" :value="item.id"
                                    >
                                        {{item.unitName}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>

                        <a-col :span="12">
                            <a-form-model-item label="证件号码" prop="sendDate">
                                <a-input placeholder="请输入证件号码" v-model="formData.sendContact"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="是否曾经怀孕" prop="receiveUnitId">
                                <a-radio-group v-model="formData.sendContact" @change="onChangePregnant">
                                    <a-radio :value="1">
                                        否
                                    </a-radio>
                                    <a-radio :value="2">
                                        是
                                    </a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="孕次" prop="sendContact" v-if="womanPregnant">
                                <a-input v-toInt placeholder="请输入" v-model="formData.sendContact"></a-input>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-card>
                <a-card size="small" :headStyle="{background: '#FAFAFA'}" style="margin-top: 16px">
                    <div slot="title">
                        <img class="title_img" src="../../../../../static/images/user_info_index.png">
                        <span class="title_font">男方信息</span>
                    </div>
                    <a-button slot="extra">身份证识别</a-button>
                    <a-row :gutter="16">
                        <a-col :span="12">
                            <a-form-model-item label="姓名" prop="sendContact">
                                <a-input placeholder="请输入姓名" v-model="formData.sendContact"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="证件类型" prop="sendPhone">
                                <a-select v-model="formData.receiveUnitId" placeholder="请选择"
                                          @click.native="getChildUnitList">
                                    <a-select-option v-for="item in childUnitList"
                                                     :key="item.id" :value="item.id"
                                    >
                                        {{item.unitName}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>

                        <a-col :span="12">
                            <a-form-model-item label="证件号码" prop="sendDate">
                                <a-input placeholder="请输入证件号码" v-model="formData.sendContact"></a-input>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-card>
                <a-card size="small" :headStyle="{background: '#FAFAFA'}" style="margin-top: 16px">
                    <div slot="title">
                        <img class="title_img" src="../../../../../static/images/user_info_index.png">
                        <span class="title_font">其他信息</span>
                    </div>
                    <a-row :gutter="16">
                        <a-col :span="24">
                            <a-form-model-item label="联系电话" prop="sendContact" :labelCol="{span: 3}"
                                               :wrapperCol="{span: 8}">
                                <a-input placeholder="请输入联系电话" v-model="formData.sendContact"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-model-item label="现住地址" prop="sendPhone" :labelCol="{span: 3}"
                                               :wrapperCol="{span: 20}">
                                <a-input placeholder="请输入现住地址" v-model="formData.sendPhone"></a-input>
                            </a-form-model-item>
                        </a-col>

                        <a-col :span="24">
                            <a-form-model-item label="详细地址" prop="sendDate" :labelCol="{span: 3}"
                                               :wrapperCol="{span: 20}">
                                <a-input placeholder="请输入详细地址" v-model="formData.sendPhone"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="签署方式" prop="receiveUnitId">
                                <a-select v-model="formData.receiveUnitId" placeholder="请选择"
                                          @click.native="getChildUnitList">
                                    <a-select-option v-for="item in childUnitList"
                                                     :key="item.id" :value="item.id"
                                    >
                                        {{item.unitName}}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="签署日期" prop="sendContact">
                                <a-date-picker v-model="formData.produceDate" format="YYYY-MM-DD" style="width: 100%"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="21" :offset="3">
                            <a-form-model-item  :wrapperCol="{span: 23}">
                                <a-card class="book" :headStyle="{background: '#FAFAFA'}">
                                    <div slot="title" style="text-align: center;padding: 10px 0px">
                                        <span style="color: #262626;font-size: 14px">知情同意书</span>
                                    </div>
                                </a-card>
                            </a-form-model-item>
                        </a-col>

                        <a-col :span="21" :offset="3">
                            <a-form-model-item  :wrapperCol="{span: 23}">
                                <div style="border: 1px dashed #EEEEEE">
                                    <div class="sign">签字</div>
                                    <vue-signature-pad
                                            id="signature"
                                            width="100%"
                                            height="200px"
                                            ref="signaturePad"
                                            :options="options"
                                    />
                                    <div class="opt">
                                        <a-button @click="reWrite">重写</a-button>
                                        <a-button type="primary" @click="save" style="margin-left: 10px">确定签字</a-button>
                                    </div>
                                </div>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-card>
                <div style="margin: 30px 0px">
                    <div class="divider_my"><span class="midText">发放信息</span></div>
                </div>
                <div style="clear: both"></div>

                <a-col :span="12">
                    <a-form-model-item label="发放日期" prop="sendContact">
                        <a-date-picker v-model="formData.produceDate" format="YYYY-MM-DD" style="width: 100%"/>
                    </a-form-model-item>
                </a-col>
                <a-col :span="12">
                    <a-form-model-item label="发放医生" prop="receiveUnitId">
                        <a-select v-model="formData.receiveUnitId" placeholder="请选择" @click.native="getChildUnitList">
                            <a-select-option v-for="item in childUnitList"
                                             :key="item.id" :value="item.id"
                            >
                                {{item.unitName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-col>
                <a-col :span="21" :offset="3">
                    <a-form-model-item  :wrapperCol="{span: 23}">
                        <a-button type="primary" @click="openStockModel" style="margin-bottom: 10px">请选择要发放的叶酸种类</a-button>
                        <a-table :dataSource="formData.detailedList" rowKey="id" :pagination="false" class="modal_table"
                                 bordered>
                            <a-table-column title="供应商名称" data-index="typeName"></a-table-column>
                            <a-table-column title="品牌" data-index="factoryName"></a-table-column>
                            <a-table-column title="批次号" data-index="batchNumber"></a-table-column>
                            <a-table-column title="当前库存" data-index="stockNum"></a-table-column>
                            <a-table-column title="发放数量" width="190px" fixed="right">
                                <template slot-scope="text, record, index">
                                    <a-form-model-item :prop="'detailedList.' + index + '.sendNum'"
                                                       :rules="formRules.sendNum" class="tab_input_r">
                                        <a-input type="number"
                                                 v-toInt
                                                 v-model="record.sendNum"
                                                 placeholder="请输入分配数量"
                                                 style="width: 150px;margin-top: 20px"
                                                 @change="getChangeRecord(record)"
                                        >

                                        </a-input>
                                    </a-form-model-item>
                                </template>
                            </a-table-column>
                            <a-table-column title="操作" align="center" fixed="right" width="70px">
                                <template slot-scope="text, record, index">
                                    <!-- <a-button type="link" class="table_delbtn" @click="deleteGoodsList(index)">删除</a-button> -->
                                    <a-popconfirm
                                            title="确定移除该物资吗？"
                                            ok-text="是"
                                            cancel-text="否"
                                            @confirm="confirm(index)"
                                    >
                                        <a href="#" class="table_delbtn">删除</a>
                                    </a-popconfirm>
                                </template>
                            </a-table-column>
                        </a-table>
                    </a-form-model-item>
                </a-col>
                <a-col :span="24">
                    <a-form-model-item label="备注" prop="sendDate" :labelCol="{span: 3}" :wrapperCol="{span: 20}">
                        <a-textarea placeholder="请输入备注" v-model="formData.sendPhone" :rows="5"></a-textarea>
                    </a-form-model-item>
                </a-col>
            </a-form-model>
            <div style="text-align: center;margin-top: 16px">
                <a-button @click="goBack">取消</a-button>
                <a-button type="primary" @click="addMaterialDis" style="margin-left: 8px">发放</a-button>
            </div>
            </a-card>
        </a-spin>
    </div>

</template>

<script>
    import {checkPhone, closedDetail} from "../../../utils/common";
    import moment from 'moment'

    let vm = this
    let recordInfo = {}
    export default {
        components: {},
        data() {
            return {
                unitInfo: JSON.parse(window.sessionStorage.getItem('networkInfo')),
                routerParams: [],
                spinning: false,
                // 弹窗内表单
                formData: {
                    detailedList: [],
                    sendUnitId: undefined,
                    sendUnitName: undefined,
                    receiveUnitId: undefined,
                    sendDate: undefined,
                    sendContact: undefined,
                    sendPhone: undefined,
                    relationType: undefined,
                    purchasePhone: undefined,
                },
                childUnitList: [],
                formRules: {
                    sendUnitName: [
                        {required: true, message: '请选择发货单位'}
                    ],
                    relationType: [
                        {required: true, message: '请选择出库类型'}
                    ],
                    purchasePhone: [
                        {required: true, message: '请填写收货人电话'},
                        {validator: checkPhone},
                    ],
                    receiveUnitId: [
                        {required: true, message: '请选择收货单位'}
                    ],
                    sendDate: [
                        {required: true, message: '请选择出库日期'}
                    ],
                    sendNum: [
                        {required: true, message: '请填写分配数量'},
                        {
                            validator: (rule, value, callback) => {
                                if (value == '' || value == undefined) {
                                    callback()
                                }
                                if (value <= recordInfo.stockNum) {
                                    callback()
                                } else {
                                    callback(new Error('超出当前库存！'));
                                }
                            },
                        },
                    ],
                    sendContact: [
                        {required: true, message: '请填写发货人'}
                    ],
                    sendPhone: [
                        {required: true, message: '请填写联系电话'},
                        {validator: checkPhone},
                    ],
                },
                womanPregnant: false,//是否怀孕
                options: {
                    penColor: "#000",//画笔颜色
                },
            }
        },
        created() {
            this.getSelectedMedical()
            this.formData.sendUnitId = this.unitInfo.id
            this.formData.sendUnitName = this.unitInfo.unitName
        },
        methods: {
            //------签字-----------
            reWrite() {
                this.$refs.signaturePad.clearSignature();
            },
            save() {
                const {isEmpty, data} = this.$refs.signaturePad.saveSignature();
                console.log(isEmpty);
                console.log(data);
            },
            // 删除药具
            confirm(index) {
                this.formData.detailedList.splice(index, 1);
            },
            //获取改变的当前项
            getChangeRecord(record) {
                recordInfo = record
            },
            getSelectedMedical() {//获取被选中的药具
                let par = {
                    idList: this.$route.query.selected
                }
                this.$api.stockManage.fetchMedicalListByIds(par).then(({data = []}) => {
                    this.formData.detailedList = data
                })

            },
            // 获取当前单位的下级单位
            getChildUnitList() {
                if (this.formData.relationType == 11) {
                    let par = {
                        areaCode: JSON.parse(window.sessionStorage.getItem('networkInfo')).areaCode,
                    }
                    this.$api.networkManage.fetchNetworkListByAreaCode(par).then(({code, data}) => {
                        if (code === 'SUCCESS') {
                            data.forEach(item => {
                                item['unitName'] = item.netName
                            })
                            this.childUnitList = data;
                        }
                    })

                } else {
                    let params = {
                        id: JSON.parse(window.sessionStorage.getItem('userInfo')).unitId,
                    };
                    this.$api.common.fetchUnitInfo(params).then(({code, data}) => {
                        if (code === 'SUCCESS') {
                            this.childUnitList = data;
                        }
                    });
                }
            },
            addMaterialDis() {//发放
                this.$refs.formRef.validate(valid => {
                    if (valid) {
                        if (this.formData.detailedList.length === 0) {
                            this.$message.warning('分配物资不能为空！');
                        } else {
                            this.spinning = true;
                            let reviceUnitName = undefined
                            let receiveNetworkId = undefined
                            let receiveNetworkName = undefined
                            let params = {}
                            if (this.formData.relationType == 11) {
                                receiveNetworkId = this.formData.receiveUnitId
                                receiveNetworkName = this.childUnitList.filter(item => item.id == this.formData.receiveUnitId)[0].unitName
                                this.formData.receiveUnitId = undefined
                                reviceUnitName = undefined
                                params = {
                                    ...this.formData,
                                    sendDate: moment(this.formData.sendDate).format('yyyy-MM-DD'),
                                    purchaseUnitId: receiveNetworkId,
                                    purchaseUnitName: receiveNetworkName,
                                    receiveNetworkId: receiveNetworkId,
                                    receiveNetworkName: receiveNetworkName
                                };
                            } else {
                                reviceUnitName = this.childUnitList.filter(item => item.id == this.formData.receiveUnitId)[0].unitName
                                params = {
                                    ...this.formData,
                                    sendDate: moment(this.formData.sendDate).format('yyyy-MM-DD'),
                                    purchaseUnitId: this.formData.receiveUnitId,
                                    purchaseUnitName: reviceUnitName,
                                    receiveUnitName: reviceUnitName
                                };
                            }

                            let detailedList = [];
                            this.formData.detailedList.forEach(item => {
                                detailedList.push({
                                    medicalId: item.medicalId,
                                    breedId: item.breedId,
                                    batchId: item.batchId,
                                    batchNumber: item.batchNumber,
                                    produceDate: item.produceDate,
                                    expireDate: item.expireDate,
                                    sendNum: item.sendNum,
                                    matSpecs: item.specs
                                });
                            });
                            params.detailedList = detailedList;
                            this.$api.stockManage.fetchDispatchGoods(params).then(({code}) => {
                                this.spinning = false;
                                if (code === 'SUCCESS') {
                                    this.$message.success('调拨分配成功！');
                                    // window.history.go(-1)
                                    this.goBack()
                                } else {
                                    // this.$message.error('调拨分配失败！')
                                }
                            });
                        }
                    } else {
                        return false;
                    }
                });
            },
            onChangePregnant(e) {
                let val = e.target.value
                if (val == 2) {
                    this.womanPregnant = true
                } else {
                    this.womanPregnant = false
                }
            },
            //打开库存弹框
            openStockModel() {

            },
            goBack() {
                closedDetail('/inStock/addMaterialDistribution', '/Home/folviteDistribution')
            }
        }
    }
</script>

<style scoped lang="less">
    .title_img {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-top: -5px;
        margin-left: 20px;
    }

    .title_font {
        font-family: PingFang SC;
        color: #595959;
        font-weight: 600;
        font-size: 16px;
        line-height: 22px;
        margin: 16px 0px 16px 18px;
    }

</style>

<style lang="less">

    .book {
        .ant-card-head-title {
            padding: 0px!important;
        }
    }
    .sign {
        position: absolute;
        background: #FFF1F0;
        border-radius: 0px 0px 24px 0px;
        width: 60px;
        height: 40px;
        padding: 0px 16px;
    }

    .opt {
        float: right;
        margin-top: 10px;
    }
</style>