dzhh-frontend/.svn/pristine/6c/6caea054cfec840911b0897050717f69a2657243.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="12">
                            <a-form-model-item label="项目名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xmmc">
                                <a-input v-model="model.xmmc" placeholder="请输入项目名称"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="所在水系" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="szsx">
                                <j-dict-select-tag type="list" v-model="model.szsx" dictCode="shuixi"
                                                   placeholder="请选择所在水系"/>
                            </a-form-model-item>
                        </a-col>
                      <a-col :span="12">
                        <a-form-model-item label="项目类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xangmlx">
                          <j-dict-select-tag type="list" v-model="model.xmlx" dictCode="xangmlx"
                                             placeholder="请选择项目类型"/>
                        </a-form-model-item>
                      </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="行政区划" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xzqh">
                                <!--              <a-input v-model="model.xzqh" placeholder="请输入行政区划" ></a-input>-->
                                <j-area-linkage type="cascader" v-model="model.xzqh" placeholder="请输入省市区"
                                                @change="xzqhChange"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="区划代码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xjqhdm">
                                <a-input v-model="model.xjqhdm" placeholder="请输入区划代码" disabled></a-input>
                            </a-form-model-item>
                        </a-col>
                      <a-col :span="12">
                        <a-form-model-item label="主要工程涉及河道" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zygcsjhd">
                          <j-popup placeholder="请选择主要工程涉及河道" v-model="model.zygcsjhd" code="hllist"  field="zygcsjhd"
                                   org-fields="hlmc" dest-fields="zygcsjhd"
                                   :multi="true"/>
                        </a-form-model-item>
                      </a-col>
                                  <a-col :span="12">
                                    <a-form-model-item label="主要工程位置经度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="hzb">
                                      <a-input v-model="model.hzb" placeholder="请输入经度" style="width: 100%" />
                                    </a-form-model-item>
                                  </a-col>
                                  <a-col :span="12">
                                    <a-form-model-item label="主要工程位置纬度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zzb">
                                      <a-input v-model="model.zzb" placeholder="请输入纬度" style="width: 100%" />
                                    </a-form-model-item>
                                  </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="项目负责人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="xmfzr">
                                <a-input v-model="model.xmfzr" placeholder="请输入项目负责人"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <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="12">
                            <a-form-model-item label="审批文号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spwh">
                                <a-input v-model="model.spwh" placeholder="请输入审批文号"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="立项情况" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="lxqk">
                                <a-input v-model="model.lxqk" placeholder="请输入立项情况"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="审批年度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spnd">
                                <j-year-picker placeholder="请选择审批年度" v-model="model.spnd"
                                               style="width: 100%"></j-year-picker>
                            </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="spdw">
                                <a-input v-model="model.spdw" placeholder="请输入审批单位"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <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="12">
                            <a-form-model-item label="审批情况" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spzt">
                                <j-dict-select-tag type="list" v-model="model.spzt" dictCode="spzt"
                                                   placeholder="请选择审批情况"/>
                            </a-form-model-item>
                        </a-col>
                        <!--          <a-col :span="24">-->
                        <!--            <a-form-model-item label="是否批建不符" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sfpjbf">-->
                        <!--              <j-dict-select-tag type="list" v-model="model.sfpjbf" dictCode="yn" placeholder="请选择是否批建不符" />-->
                        <!--            </a-form-model-item>-->
                        <!--          </a-col>-->
                        <!--          <a-col :span="24">-->
                        <!--            <a-form-model-item label="是否为无审批" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sfpjbf">-->
                        <!--              <j-dict-select-tag type="list" v-model="model.sfwsp" dictCode="yn" placeholder="请选择是否无审批" />-->
                        <!--            </a-form-model-item>-->
                        <!--          </a-col>-->
                        <!--          <a-col :span="24">-->
                        <!--            <a-form-model-item label="是否补办审批" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sfbbsp">-->
                        <!--              <j-dict-select-tag type="list" v-model="model.sfbbsp" dictCode="yn" placeholder="请选择是否补办审批" />-->
                        <!--            </a-form-model-item>-->
                        <!--          </a-col>-->
                        <a-col :span="12">
                            <a-form-model-item label="总体布置简述" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                               prop="ztbzjs">

                                <a-input v-model="model.ztbzjs" placeholder="请输入总体布置简述"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="审批级别" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spjb">
                                <j-dict-select-tag type="list" v-model="model.spjb" dictCode="spjb"
                                                   placeholder="请选择审批级别"/>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="其他" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="qt">
                                <a-input v-model="model.qt" placeholder="请输入其他" rows="4"></a-input>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="审批文件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wjsc">
                                <j-upload biz-path="xmrk" v-model="model.wjsc"></j-upload>
                            </a-form-model-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-model-item label="防洪(输水)影响评价报告" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fhpjbg">
                                <j-upload biz-path="xmrk" v-model="model.fhpjbg"></j-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>
      <span class="message">注意：填写完项目信息后，请继续填写单位信息，河段主要指标，涉河工程主要指标，涉河工程主要指标，分析计算主要成果，影响情况及消除或减轻影响措施信息表</span>
    </j-modal>
</template>

<script>

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

export default {
    name: "RmAxxmxxModal",
    components: {
        JYearPicker,
        BasicMap
    },
    data() {
        return {
            title: "操作",
            width: 1200,
            visible: false,
            model: {},
            disableSubmit: false,
            labelCol: {
                xs: {span: 24},
                sm: {span: 5},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },

            confirmLoading: false,
            validatorRules: {
              xmmc: [
                { required: true, message: '请输入项目名称!'},
              ],
              szsx:[
                {
                  required: true, message: '请输入所在水系!'
                }
              ],
              hzb:[
                {
                  required: true, message: '请输入主要工程位置横坐标!'
                }
              ],
              zzb:[
                {
                  required: true, message: '请输入主要工程位置纵坐标!'
                }
              ],
              jszt:[
                {
                  required: true, message: '请输入建设状态!'
                }
              ],
              spnd:[
                {
                  required: true, message: '请输入审批年度!'
                }
              ],
              spjb:[
                {
                  required: true, message: '请输入审批级别!'
                }
              ],
              dh:[
                {
                  required: true, message: '请输入电话!'
                }
              ],
              zygcsjhd:[
                {
                  required: true, message: '请输入主要涉及河道（可多选）!'
                }
              ],
              xmfzr:[
                {
                  required: true, message: '请输入项目负责人!'
                }
              ],
            },
            url: {
                add: "/hzz.shjsgc.xmrk/rmAxxmxx/add",
                edit: "/hzz.shjsgc.xmrk/rmAxxmxx/edit",
            }

        }
    },
    created() {
        //备份model原始值
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    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';
                    }
                    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()
        },
      tabsChange(key) {
        let that = this;
        if (key == "map") {
          this.$nextTick(() => {
            this.$refs.locMap.locateByCoords({...that.model});
          })
        }
      },
      locateByCoords() {
        let loc_x = this.hzb;
        let loc_y = this.zzb;
        this.$refs.locMap.locateByCoords(loc_x, loc_y);
      },
        xzqhChange(value) {
            this.model.xjqhdm = value;
        },


    }
}
</script>
<style type="text/css">
  .message {
    margin-left: 18%;
    font-size: 16px;
    color:red
  }
</style>