dzhh-frontend/.svn/pristine/1a/1a88aafef87474ae22b3136c66d2e923728ef30a.svn-base

<template>
    <j-modal
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        switchFullscreen
        @ok="handleOk"
        :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
        @cancel="handleCancel"
        cancelText="关闭">
        <a-tabs default-active-key="attrs" @change="tabsChange">
            <a-tab-pane key="attrs" tab="属性信息">
                <a-spin :spinning="confirmLoading">
                    <j-form-container :disabled="disableSubmit">
                        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                            <a-row>
                                <a-col :span="12">
                                    <a-form-model-item label="河道名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="hdmc">
                                        <a-input v-model="hdmc" placeholder="请输入河道名称" disabled></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="断面桩号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="dmzh">
                                        <a-input v-model="model.dmzh" placeholder="请输入断面桩号"
                                                 @change="autoGenDmmc"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="断面名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="dmmc">
                                        <a-input v-model="model.dmmc" placeholder="请输入断面名称" disabled></a-input>
                                    </a-form-model-item>
                                </a-col>
                              <a-col :span="12">
                                <a-form-model-item label="断面别名" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="dmbm">
                                  <a-input v-model="model.dmbm" placeholder="请输入断面别名" ></a-input>
                                </a-form-model-item>
                              </a-col>
                              <a-col :span="12">
                                <a-form-model-item label="显示顺序" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="yxjxs">
                                  <a-input v-model="model.yxjxs" placeholder="请输入断面显示顺序" style="width: 100%" ></a-input>
                                </a-form-model-item>
                              </a-col>
                              <a-col :span="12">
                                <a-form-model-item label="流域面积" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="lymj">
                                  <a-input v-model="model.lymj" placeholder="请输入断面以上流域面积" style="width: 100%"/>
                                </a-form-model-item>
                              </a-col>
                              <a-col :span="12">
                                <a-form-model-item label="断面中心经度" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="jd">
                                  <a-input v-model="model.jd" placeholder="请输入断面中心经度" ></a-input>
                                </a-form-model-item>
                              </a-col>
                              <a-col :span="12">
                                <a-form-model-item label="断面中心纬度" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="wd">
                                  <a-input v-model="model.wd" placeholder="请输入断面中心纬度" ></a-input>
                                </a-form-model-item>
                              </a-col>

                                <a-col :span="12">
                                    <a-form-model-item label="防洪标准" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="fhbz">
                                        <a-input v-model="model.fhbz" placeholder="请输入防洪标准"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="除涝标准" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="clbz">
                                        <a-input v-model="model.clbz" placeholder="请输入除涝标准"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="防洪流量" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="fhll">
                                        <a-input v-model="model.fhll" placeholder="请输入防洪流量" style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="除涝流量" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="clll">
                                        <a-input v-model="model.clll" placeholder="请输入除涝流量" style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="防洪水位（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="fhsw">
                                        <a-input v-model="model.fhsw" placeholder="请输入防洪水位（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="除涝水位（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="clsw">
                                        <a-input v-model="model.clsw" placeholder="请输入除涝水位（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="河道比降" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="hdbj">
                                        <a-input v-model="model.hdbj" placeholder="请输入河道比降" style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="河底宽（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="hdk">
                                        <a-input v-model="model.hdk" placeholder="请输入河底宽（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="河道边坡" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="hdbp">
                                        <a-input v-model="model.hdbp" placeholder="请输入河道边坡"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="河底高程（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="hdgc">
                                        <a-input v-model="model.hdgc" placeholder="请输入河底高程（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="堤内坡比" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="dnpb">
                                        <a-input v-model="model.dnpb" placeholder="请输入堤内坡比"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="堤外坡比" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="dwpb">
                                        <a-input v-model="model.dwpb" placeholder="请输入堤外坡比"></a-input>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="左堤顶高程（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="zddgc">
                                        <a-input v-model="model.zddgc" placeholder="请输入左堤顶高程（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="右堤顶高程（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="yddgc">
                                        <a-input v-model="model.yddgc" placeholder="请输入右堤顶高程（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="左堤顶宽（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="zddk">
                                        <a-input v-model="model.zddk" placeholder="请输入左堤顶宽（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="右堤顶宽（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="yddk">
                                        <a-input v-model="model.yddk" placeholder="请输入右堤顶宽（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="左滩地高程（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="ztdgc">
                                        <a-input v-model="model.ztdgc" placeholder="请输入左滩地高程（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="右滩地高程（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="ytdgc">
                                        <a-input v-model="model.ytdgc" placeholder="请输入右滩地高程（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="左滩地宽度（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="ztdkd">
                                        <a-input v-model="model.ztdkd" placeholder="请输入左滩地宽度（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="右滩地宽度（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="ytdkd">
                                        <a-input v-model="model.ytdkd" placeholder="请输入右滩地宽度（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="堤外地面高程（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="dwdmgc">
                                        <a-input v-model="model.dwdmgc" placeholder="请输入堤外地面高程（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="弃土区宽度（m）" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="qtqkd">
                                        <a-input v-model="model.qtqkd" placeholder="请输入弃土区宽度（m）"
                                                        style="width: 100%"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="bz">
                                        <a-textarea v-model="model.bz" rows="4" placeholder="请输入备注"/>
                                    </a-form-model-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-model-item label="横断面图片" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                       prop="hdmtp">
                                        <j-image-upload isMultiple v-model="model.hdmtp"></j-image-upload>
                                    </a-form-model-item>
                                </a-col>
                            </a-row>
                        </a-form-model>
                    </j-form-container>
                </a-spin>
            </a-tab-pane>
            <a-tab-pane key="map" tab="位置信息">
                <basic-map ref="locMap" layersUrl='/resManager.catalog/rescatalog/resList'
                           :model="{...model,layerName:'河道横断面,管理范围线'}"></basic-map>
            </a-tab-pane>
        </a-tabs>
    </j-modal>
</template>

<script>

import {httpAction} from '@/api/manage'
import {validateDuplicateValue} from '@/utils/util'
import BasicMap from "@comp/BasicMap/BasicMap";

export default {
    name: "RmPmtxxModal",
    components: {
        BasicMap
    },
    props: {
        mainId: {
            type: String,
            required: false,
            default: ''
        },
        hdmc: {
            type: String,
            required: false,
            default: ''
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            title: "操作",
            width: 800,
            visible: false,
            model: {},
            labelCol: {
                xs: {span: 24},
                sm: {span: 5},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
            disableSubmit: false,
            confirmLoading: false,
            validatorRules: {},
            url: {
                add: "/hzz.xxgl.hdmx/rmHdmxb/addRmPmtxx",
                edit: "/hzz.xxgl.hdmx/rmHdmxb/editRmPmtxx",
            }

        }
    },
    created() {
        //备份model原始值
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
        this.modelDefault.hdmc = this.hdmc;
    },
    methods: {
        add() {
            this.edit(this.modelDefault);
        },
        edit(record) {
            this.model = Object.assign({}, record);
            this.visible = true;
        },
        close() {
            this.$emit('close');
            this.visible = false;
            this.$refs.form.clearValidate();
        },
        handleOk() {
            const that = this;
            // 触发表单验证
            this.$refs.form.validate(valid => {
                if (valid) {
                    that.confirmLoading = true;
                    let httpurl = '';
                    let method = '';
                    if (!this.model.id) {
                        httpurl += this.url.add;
                        method = 'post';
                    } else {
                        httpurl += this.url.edit;
                        method = 'post';
                    }
                    this.model['rvid'] = this.mainId;
                    this.model['hdmc'] = this.hdmc;
                    httpAction(httpurl, this.model, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            that.$emit('ok');
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                        that.close();
                    })
                } else {
                    return false
                }
            })
        },
        handleCancel() {
            this.close()
        },
        autoGenDmmc() {
            this.model.dmmc = this.hdmc + " " + this.model.dmzh;
        },
        tabsChange(key) {
            if (key == "map") {
                this.$nextTick(() => {
                    this.$refs.locMap.locateByCoords({...this.model});
                })
            }
        }

    }
}
</script>