dzhh-frontend/.svn/pristine/c9/c93c71a6d2200d317192c36d0b2c049d7003d9f6.svn-base

<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <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="xzqh">
                            <j-area-linkage type="cascader" v-model="model.xzqh" placeholder="请输入省市区"/>
                        </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="xjqhdm">
                            <a-input v-model="model.xjqhdm" placeholder="请输入县级区划代码"></a-input>
                        </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="请输入横坐标"></a-input>
                        </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="请输入纵坐标"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dha">
                            <a-input v-model="model.dha" 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-date placeholder="请选择审批年度" v-model="model.spnd" style="width: 100%"/>
                        </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="spjb">
                            <a-input v-model="model.spjb" placeholder="请输入审批级别"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="审批情况" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="spqk">
                            <j-dict-select-tag type="list" v-model="model.spqk" dictCode="spzt" placeholder="请选择审批情况"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="总体布置简述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ztbzjs">
                            <a-textarea v-model="model.ztbzjs" placeholder="请输入总体布置简述" rows="4"></a-textarea>
                        </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="qt">
                            <a-textarea v-model="model.qt" placeholder="请输入其他" rows="4"></a-textarea>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <div v-for="user in obj1" :key="user.id">
                    <a-divider dashed>涉河工程信息</a-divider>
                    <a-col :span="6">
                        <a-form-model-item label="涉河工程名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fhbzXz">
                            <a-input v-model="user.gcmc" placeholder="请输入涉河工程名称"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="涉河类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fhbzSj">
                            <j-category-select placeholder="请选择涉河类型" v-model="user.shlx" pcode="A02"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="所在河道" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fhbzGh">
                            <a-input v-model="user.sjhd" placeholder="请输入所在河道"></a-input>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="6">
                        <a-form-model-item label="位置信息" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="fhbzGh">
                            <a-input v-model="user.jd+','+user.wd" placeholder="请输入位置信息"></a-input>
                        </a-form-model-item>
                    </a-col>
                </div>
            </a-form-model>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="监管记录" :key="refKeys[0]" :forceRender="true">
                <j-editable-table
                    :ref="refKeys[0]"
                    :loading="rmJgjlTable.loading"
                    :columns="rmJgjlTable.columns"
                    :dataSource="rmJgjlTable.dataSource"
                    :maxHeight="300"
                    :disabled="formDisabled"
                    :rowNumber="true"
                    :rowSelection="true"
                    :actionButton="true"/>
            </a-tab-pane>
        </a-tabs>
    </a-spin>
</template>

<script>

import {postAction, getAction} from '@/api/manage'
import {FormTypes, getRefPromise, VALIDATE_NO_PASSED} from '@/utils/JEditableTableUtil'
import {JEditableTableModelMixin} from '@/mixins/JEditableTableModelMixin'
import {validateDuplicateValue} from '@/utils/util'

export default {
    name: 'RmXmxxForm',
    mixins: [JEditableTableModelMixin],
    components: {},
    data() {
        return {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
            labelCol2: {
                xs: {span: 24},
                sm: {span: 3},
            },
            wrapperCol2: {
                xs: {span: 24},
                sm: {span: 20},
            },
            model: {},
            obj1: [],
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            validatorRules: {},
            refKeys: ['rmJgjl',],
            tableKeys: ['rmJgjl',],
            activeKey: 'rmJgjl',
            // 监管记录
            rmJgjlTable: {
                loading: false,
                dataSource: [],
                columns: [

                    {
                        title: '项目名称',
                        key: 'jcmc',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '日期',
                        key: 'jcsj',
                        type: FormTypes.date,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '监管单位',
                        key: 'jgdw',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '监管负责人',
                        key: 'jgfzr',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                    {
                        title: '存在问题及处理情况',
                        key: 'czwtjclqk',
                        type: FormTypes.input,
                        width: "200px",
                        placeholder: '请输入${title}',
                        defaultValue: '',
                    },
                ]
            },
            url: {
                add: "/hzz.shjsgc.xmxx/rmXmxx/add",
                edit: "/hzz.shjsgc.xmxx/rmXmxx/edit",
                queryById: "/hzz.shjsgc.xmxx/rmXmxx/queryById",
                SelectById: "/hzz.shjsgc.xmxx/rmXmxx/SelectById",
                rmJgjl: {
                    list: '/hzz.shjsgc.xmxx/rmXmxx/queryRmJgjlByMainId'
                },
            }
        }
    },
    props: {
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            return this.disabled
        },
    },
    created() {
    },
    mounted() {
        // this.SelectById();
    },
    methods: {
        addBefore() {
            this.rmJgjlTable.dataSource = []
        },
        getAllTable() {
            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
            this.SelectById();
            this.$nextTick(() => {
            })
            // 加载子表数据
            if (this.model.id) {
                let params = {id: this.model.id}
                this.requestSubTableData(this.url.rmJgjl.list, params, this.rmJgjlTable)
            }
        },
        //校验所有一对一子表表单
        validateSubForm(allValues) {
            return new Promise((resolve, reject) => {
                Promise.all([]).then(() => {
                    resolve(allValues)
                }).catch(e => {
                    if (e.error === VALIDATE_NO_PASSED) {
                        // 如果有未通过表单验证的子表，就自动跳转到它所在的tab
                        this.activeKey = e.index == null ? this.activeKey : this.refKeys[e.index]
                    } else {
                        console.error(e)
                    }
                })
            })
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
            let main = Object.assign(this.model, allValues.formValue)
            return {
                ...main, // 展开
                rmJgjlList: allValues.tablesValue[0].values,
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        SelectById() {
            getAction(this.url.SelectById, {id: this.model.id}).then((res) => {
                let arr = res.result
                this.obj1 = arr
                // this.loadData()
                console.log("结果:", this.obj1)
            })
        },

    }
}
</script>

<style scoped>
</style>