dzhh-frontend/.svn/pristine/f5/f57b384ad560d0cff06ba7574bf1d57748503ee3.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" >
        <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="24">
                        <a-form-model-item label="工程名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gcmc">
                            <a-input v-model="model.gcmc" placeholder="请输入工程名称"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="涉及河段" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sjhd">
                            <j-popup placeholder="请选择河段主要指标中的河（渠）名称"
                                v-model="model.sjhd"
                                field="sjhd"
                                org-fields="hqmc"
                                dest-fields="sjhd"
                                code="hqmc"
                                :multi="true"
                                :param="tempParam"
                                @input="popupCallback"
                            />

                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="涉河类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shlx">
                            <j-category-select placeholder="请选择工程分类下的具体工程类型，如桥梁工程!" v-model="model.shlx" pcode="A02"
                                               @change="shlxChange"/>
                        </a-form-model-item>
                    </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="工程位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gcwz">
                      <a-input v-model="model.gcwz" placeholder="请输入工程位置（具体到县、乡、村）"></a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <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="24">
                    <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="24">
                        <a-form-model-item label="工程布置简况" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gcbzqk">
                            <a-input v-model="model.gcbzqk" placeholder="请输入工程布置简况"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="建设状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="jszt">
                            <j-dict-select-tag type="list" v-model="model.jszt" dictCode="gcjsqk"
                                               placeholder="请选择建设状态"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="工期开始日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gqksrq">
                            <j-date placeholder="请选择工期开始日期" v-model="model.gqksrq" style="width: 100%"/>
                        </a-form-model-item>
                    </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="工期结束日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gqjsrq">
                      <j-date placeholder="请选择工期结束日期" v-model="model.gqjsrq" style="width: 100%"/>
                    </a-form-model-item>
                  </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="河道岸线利用情况" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="hdaxlyqk">
<!--                            <a-input v-model="model.hdaxlyqk" placeholder="请输入河道岸线利用情况"></a-input>-->
                          <a-textarea rows="4" v-model="model.hdaxlyqk" placeholder="请输入河道岸线利用情况"></a-textarea>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="占用河道管理范围情况" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="zyhdglfw">
                          <a-textarea rows="4" v-model="model.zyhdglfw" placeholder="请输入占用河道管理范围情况"></a-textarea>

                        </a-form-model-item>
                    </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="河道岸线占用长度m" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                       prop="hdaxzycd">
                      <a-input v-model="model.hdaxzycd" placeholder="请输入河道岸线占用长度m"></a-input>

                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="河道岸线占用面积m²" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                       prop="hdaxzymj">
                      <a-input  v-model="model.hdaxzymj" placeholder="请输入河道岸线占用面积m²"></a-input>
                    </a-form-model-item>
                  </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="建设期临时设施情况" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                           prop="jsqlsssqk">
                          <a-textarea rows="4" v-model="model.jsqlsssqk" placeholder="请输入建设期临时设施情况"></a-textarea>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="现场联系人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xclxr">
                            <a-input v-model="model.xclxr" placeholder="请输入现场联系人"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dh">
                            <a-input v-model="model.dh" placeholder="请输入电话"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-model-item label="其他" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qt">
                            <a-textarea v-model="model.qt" placeholder="请输入其他" rows="4"></a-textarea>
                        </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 {getAction, httpAction} from '@/api/manage'
import {validateDuplicateValue} from '@/utils/util'
import {postAction} from "../../../../../api/manage";
import {loadCategoryData} from '@/api/api'
import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import BasicMap from "../../../../../components/BasicMap/BasicMap";

export default {
    name: "RmAxshbfgcxxbModal",
    components: {
      BasicMap,
    },
    props: {
        mainId: {
            type: String,
            required: false,
            default: ''
        }
    },
    data() {
        return {
            title: "操作",
            width: 800,
            visible: false,
            model: {},
            main_id: '',


            labelCol: {
                xs: {span: 24},
                sm: {span: 5},
            },
          disableSubmit:false,
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },

            confirmLoading: false,
            validatorRules: {
              shlx: [
                { required: true, message: '请选择涉河类型!'},
              ],
                gcmc: [
                { required: true, message: '请输入工程名称!'},
              ],},
            url: {
                add: "/hzz.shjsgc.xmrk/rmAxxmxx/addRmAxshbfgcxxb",
                edit: "/hzz.shjsgc.xmrk/rmAxxmxx/editRmAxshbfgcxxb",
                queryById:'/sys/category/queryById',
            },
            tempParam: {},

        }
    },
    created() {
        //备份model原始值
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
        // this.tabsChange();
    },
    methods: {
        // async loadhlcd() {
        //   this.data1 = await postAction('/hzz.shjsgc.shxmxx/rmShxmxxb/findAllhlcd', {})
        // },

        add() {
            this.tempParam = {main_id: this.mainId}
            this.edit(this.modelDefault);
        },
        edit(record) {
            this.tempParam = {main_id: this.mainId}
            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['mainId'] = this.mainId
                    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()
        },
        popupCallback(value, row) {
            this.model = Object.assign(this.model, row);
        },
        shlxChange(value){
            if(value){
                let param = {
                    id:value
                }
                getAction(this.url.queryById,param).then(res=>{
                    if(res.success){
                        let hasChild = res.result.hasChild;
                        if(hasChild == '1'){
                            this.$message.warn('请选择工程分类下的具体工程类型，如桥梁工程!')
                        }
                    }
                })
            }
        }
    },
    initDictConfig() {
        loadCategoryData({code: 'A02'}).then((res) => {
            if (res.success) {
                this.$set(this.dictOptions, 'shlx', res.result)
            }
        })
    },
     tabsChange(key) {
      let that = this;
     if (key == "map") {
    this.$nextTick(() => {
      this.$refs.locMap.locateByCoords({...this.model});
    })
  }
},
 locateByCoords() {
  let loc_x = this.lng;
  let loc_y = this.lat;
  this.$refs.locMap.locateByCoords(loc_x, loc_y);
},
  beforeMount() {
    if (!this.height) {
      let calcHeight = window.document.documentElement.clientHeight - 225;
      let m_height = calcHeight.toString() + 'px';
      this.mapHeight = m_height;
    }
  },


}
</script>