dzhh-frontend/.svn/pristine/e6/e6504c24cb7cd2ed02f2ec9e67640a039f53aa17.svn-base

<template>
    <j-modal
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        switchFullscreen
        @ok="handleOk"
        @cancel="handleCancel"
        cancelText="关闭">
        <a-spin :spinning="confirmLoading">
            <a-form-model ref="form" :model="model" :rules="validatorRules">
                <a-form-model-item label="父级节点" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pid">
                    <j-tree-select
                        ref="treeSelect"
                        placeholder="请选择父级节点"
                        v-model="model.pid"
                        dict="rescatalog,alias,id"
                        pidField="pid"
                        pidValue="0"
                        hasChildField="has_child"
                    >
                    </j-tree-select>
                </a-form-model-item>
                <a-form-model-item label="图层名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                    <a-input v-model="model.name" placeholder="请输入图层名称"></a-input>
                </a-form-model-item>
                <a-form-model-item label="图层别名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="alias">
                    <a-input v-model="model.alias" placeholder="请输入图层别名"></a-input>
                </a-form-model-item>
                <a-form-model-item label="图层服务地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="url">
                    <a-input v-model="model.url" placeholder="请输入图层服务地址"></a-input>
                </a-form-model-item>
                <a-form-model-item label="数据服务接口" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataport">
                    <a-input v-model="model.dataport" placeholder="请输入数据服务接口"></a-input>
                </a-form-model-item>
                <a-form-model-item label="数据关联字段" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="relfield">
                    <a-input v-model="model.relfield" placeholder="请输入数据关联字段"></a-input>
                </a-form-model-item>
                <a-form-model-item label="是否显示" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="visible">
                    <j-dict-select-tag type="list" v-model="model.visible" dictCode="visible" placeholder="请选择图层是否默认显示"/>
                </a-form-model-item>
                <a-form-model-item label="APP端是否加载" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appvisible">
                    <j-dict-select-tag type="list" v-model="model.appvisible" dictCode="visible" placeholder="请选择APP端是否加载图层"/>
                </a-form-model-item>
                <a-form-model-item label="数据源名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sourcename">
                    <a-input v-model="model.sourcename" placeholder="请输入数据源名称"></a-input>
                </a-form-model-item>
                <a-form-model-item label="显示层级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="zindex">
                    <a-input v-model="model.zindex" placeholder="请输入显示层级" style="width: 100%"/>
                </a-form-model-item>
                <a-form-model-item label="列表显示顺序" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="displayorder">
                    <a-input v-model="model.displayorder" placeholder="请输入列表显示顺序" style="width: 100%"/>
                </a-form-model-item>
                <a-form-model-item label="图例" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="legend">
                    <j-image-upload isMultiple v-model="model.legend"></j-image-upload>
                </a-form-model-item>

            </a-form-model>
        </a-spin>
    </j-modal>
</template>

<script>

import {httpAction} from '@/api/manage'
import {validateDuplicateValue} from '@/utils/util'

export default {
    name: "RescatalogModal",
    components: {},
    data() {
        return {
            title: "操作",
            width: 800,
            visible: false,
            model: {},
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            },

            confirmLoading: false,
            validatorRules: {},
            url: {
                add: "/resManager.catalog/rescatalog/add",
                edit: "/resManager.catalog/rescatalog/edit",
            },
            expandedRowKeys: [],
            pidField: "pid"

        }
    },
    created() {
        //备份model原始值
        this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
        add(obj) {
            this.modelDefault.pid = ''
            this.edit(Object.assign(this.modelDefault, obj));
        },
        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';
                    }
                    if (this.model.id && this.model.id === this.model[this.pidField]) {
                        that.$message.warning("父级节点不能选择自己");
                        that.confirmLoading = false;
                        return;
                    }
                    httpAction(httpurl, this.model, method).then((res) => {
                        if (res.success) {
                            that.$message.success(res.message);
                            this.$emit('ok');
                        } else {
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                        that.close();
                    })
                } else {
                    return false
                }
            })
        },
        handleCancel() {
            this.close()
        },
        submitSuccess(formData, flag) {
            if (!formData.id) {
                let treeData = this.$refs.treeSelect.getCurrTreeData()
                this.expandedRowKeys = []
                this.getExpandKeysByPid(formData[this.pidField], treeData, treeData)
                this.$emit('ok', formData, this.expandedRowKeys.reverse());
            } else {
                this.$emit('ok', formData, flag);
            }
        },
        getExpandKeysByPid(pid, arr, all) {
            if (pid && arr && arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].key == pid) {
                        this.expandedRowKeys.push(arr[i].key)
                        this.getExpandKeysByPid(arr[i]['parentId'], all, all)
                    } else {
                        this.getExpandKeysByPid(pid, arr[i].children, all)
                    }
                }
            }
        }


    }
}
</script>