sasp-admin 0.2.57

package/src/views/param/sysParam.vue

@@ -0,0 +1,987 @@
+<template>
+    <el-container class="top_contain" v-loading="initLoading"  element-loading-text="加载中" element-loading-background="rgba(0, 0, 0, 0.8)">
+        <el-header size="medium" class="button_header">
+            <el-button type="primary" size="small" round icon="el-icon-circle-plus" @click="add()">新增
+            </el-button>
+            <el-button type="primary" size="small" round icon="el-icon-success" @click="formSave()">保存
+            </el-button>
+            <el-button type="primary" size="small" round icon="el-icon-refresh" @click="transParamKeyVal()">一键转化参数名/键
+            </el-button>
+        </el-header>
+        <el-main style="height:100%;padding: 0 0 60px;box-sizing:border-box;overflow-y: hidden;">
+            <el-tabs v-model="activeNames" accordion type="border-card" class="el-tabs-rel" style="height:100%;">
+                 <el-tab-pane :label="tabOption.label" v-for="(tabOption,tabindex) in tabparamOptions" :key="tabindex" :name="''+tabindex">
+                     <el-row style="width: 100%">
+                         <el-col :span="24" v-for="(typeitem,optIndex) in tabOption.value" :key="optIndex">
+                             <el-card shadow="always" style="margin-bottom: 10px">
+                                 <fieldset style="padding: 0 5px 0 0;border: 1px solid #DCDFE6;">
+                                 <legend style="font-size: 15px;color: gray;margin-left: 10px">{{typeitem.label}}</legend>
+                                 <el-form label-width="100%" :ref="crud.tableRef">
+                                     <el-row :gutter="0">
+                                         <el-col :md="24" :lg="item.paramType == 'textarea'?24:12" :xl="item.paramType == 'textarea'?24:8" :key="index" v-for = "(item,index) in paramFormData">
+                                             <div v-if="item.sysParamType == typeitem.value">
+                                                 <el-form-item :label="item.paramRealName" :class="isEqual(originData[index].paramVal,paramFormData[index].paramVal)?'black':'green'" label-position="left" label-width="230px">
+                                                     <div v-if="item.paramType == 'multiSelect'" class="control_box">
+                                                        <el-select v-model="item.paramVal" placeholder="请选择" multiple style="width: 100%">
+                                                             <el-option
+                                                             v-for="option in item.paramBackup"
+                                                             :key="option.key"
+                                                             :label="option.value"
+                                                             :value="option">
+                                                             </el-option>
+                                                         </el-select>
+                                                     </div>
+                                                     <div v-else-if="item.paramType == 'select'" class="control_box">
+                                                         <el-select v-model="item.paramVal" placeholder="请选择" style="width: 100%">
+                                                             <el-option
+                                                             v-for="option in item.paramBackup"
+                                                             :key="option.key"
+                                                             :label="option.value"
+                                                             :value="option">
+                                                             </el-option>
+                                                         </el-select>
+                                                     </div>
+                                                     <div v-else-if="item.paramType == 'checkbox'" class="control_box">
+                                                         <el-checkbox-group v-model="item.paramVal" size="medium" style="width: 100%">
+                                                             <el-checkbox-button v-for="boxOption in item.paramBackup" :label="boxOption" :key="boxOption">
+                                                             {{boxOption}}
+                                                             </el-checkbox-button>
+                                                         </el-checkbox-group>
+                                                     </div>
+                                                     <div v-else-if="item.paramType == 'radio'" class="control_box">
+                                                         <div v-if="item.paramBackup.length==2 && item.paramVal==item.paramBackup[1]">
+                                                             <el-radio-group v-model="item.paramVal" size="medium" style="width: 100%" fill="gray">
+                                                                 <el-radio-button :label="option" :key="option" v-for = "option in item.paramBackup"></el-radio-button>
+                                                             </el-radio-group>
+                                                         </div>
+                                                         <div v-else>
+                                                             <el-radio-group v-model="item.paramVal" size="medium" style="width: 100%">
+                                                                 <el-radio-button :label="option" :key="option" v-for = "option in item.paramBackup"></el-radio-button>
+                                                             </el-radio-group>
+                                                         </div>
+                                                     </div>
+                                                     <div v-else-if="item.paramType == 'textarea'" class="control_box">
+                                                         <el-input v-model="item.paramVal" spellcheck="false" type="textarea" :autosize="{ maxRows: 2}" style="width: 100%"></el-input>
+                                                     </div>
+                                                     <div v-else class="control_box">
+                                                        <el-input v-model="item.paramVal" spellcheck="false" style="width: 100%"></el-input>
+                                                     </div>
+                                                     <div class="operate_div">
+                                                         <el-tooltip class="item" effect="dark" content="设置" placement="right">
+                                                            <i class="el-icon-setting" size="medium" @click="updateForm(index)"></i>
+                                                         </el-tooltip>
+                                                         <div v-if="item.sysParamType.indexOf('serve') > -1">
+                                                         <el-tooltip class="item" effect="dark" content="删除" placement="right">
+                                                            <i class="el-icon-delete" size="medium" @click="doRemove(index)"></i>
+                                                         </el-tooltip>
+                                                     </div>
+                                                     </div>
+                                                 </el-form-item>
+                                             </div>
+                                         </el-col>
+                                     </el-row>
+                                 </el-form>
+                                 </fieldset>
+                             </el-card>
+                         </el-col>
+                     </el-row>
+                </el-tab-pane>
+            </el-tabs>
+        </el-main>
+        <el-dialog :close-on-click-modal=false title="系统参数" :visible.sync="crud.dialogVisible" height="65%" top="18vh" width="60%" lock-scroll>
+            <el-form :model="crud.formData" :ref="crud.addFormRef" label-width="100%" style="width: 90%;margin: 5vh auto">
+                <el-row>
+                    <el-col :span="12">
+                        <div>
+                            <el-form-item label="参数名" prop="paramName" label-width="150px" :rules="[
+                            { required: true, message: '请输入参数名称', trigger: 'blur' }
+                            ]">
+                                <el-input v-model="crud.formData.paramName" :readonly="caseRead"></el-input>
+                            </el-form-item>
+                        </div>
+                    </el-col>
+                    <el-col :span="12">
+                        <div>
+                            <el-form-item label="参数键值" label-width="150px" prop="paramKey" :rules="[
+                            { required: true, message: '请输入参数键值', trigger: 'blur' }
+                            ]">
+                                <el-input v-model="crud.formData.paramKey" :readonly = "caseUpdate"></el-input>
+                            </el-form-item>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="参数类型" label-width="150px" prop="sysParamType"  :rules="[
+                            { required: true, message: '请选择参数类型', trigger: 'blur' }
+                            ]">
+                            <el-cascader
+                                    :options="options"
+                                    v-model="crud.formData.sysParamType" :disabled="caseDisabled" style="width: 100%">
+                            </el-cascader>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="参数说明" label-width="150px">
+                            <el-input v-model="crud.formData.mark"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="12">
+                        <el-form-item label="参数值类型" label-width="150px" prop="paramType" :rules="[
+                            { required: true, message: '请输入参数值', trigger: 'blur' }
+                            ]">
+                            <el-row style="width: 100%;">
+                                <el-col :span="19">
+                                    <el-select v-model="crud.formData['paramType']" placeholder="请选择"
+                                               :disabled="caseRead" @change="paramValChange" style="width:100%">
+                                        <el-option
+                                                v-for="item in typeOptions"
+                                                :key="item.value"
+                                                :label="item.label"
+                                                :value="item.value">
+                                        </el-option>
+                                    </el-select>
+                                </el-col>
+                                <el-col :span="5">
+                                    <el-button @click="settingOption" class="settingClass" :disabled="caseRead">配置</el-button>
+                                </el-col>
+                            </el-row>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="参数排序" label-width="150px" prop="sort" :rules="plValidate('numberInt')">
+                            <el-input v-model="crud.formData.sort"></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <div>
+                            <el-form-item label="参数值" label-width="150px" prop="paramBackup" :rules="[
+                            { required: true, message: '请输入参数值', trigger: 'blur' }
+                            ]">
+                                <el-input type="textarea"  spellcheck="false" :autosize="{ minRows: 2}" :readonly="paramvalRead" v-model="crud.formData.paramBackup"></el-input>
+                            </el-form-item>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="提示" label-width="150px">
+                            <span style="color:red;font-size: 14px">
+                                一：除自定义外，参数值由参数值类型配置生成<span style="padding-left: 10px"></span>
+                                二：单选格式：是，否，或（选中:是）<span style="padding-left: 10px"></span> 三：复选格式：是，否，或（选中:是,否）<br/>
+                                四：下拉格式：{'yes':'是'},{'no':'否'}（选中:{'yes':'是'}）
+                                <span style="padding-left: 10px"></span>五：下拉多选格式：{'yes':'是','no':'否','or':'或'}（选中:{'yes':'是','no':'否'}）</span>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submit()" size="small" icon="el-icon-success">确定</el-button>
+                <el-button @click="crud.dialogVisible = false" size="small" icon="el-icon-error">取 消</el-button>
+            </div>
+        </el-dialog>
+        <el-dialog :close-on-click-modal=false :visible.sync="settingshow" title="配置" height="50%" top="25vh" width="40%" lock-scroll>
+                <el-form v-for="(item,index) in settingOptions" :key="index" :model="item" ref="settingForm">
+                    <div v-if="caseSelect">
+                         <el-row>
+                             <el-col :span="10">
+                                 <el-form-item :label="'选项'+(index+1)+'键'" label-width="100px" prop="key" :rules="[
+                                    { required: true, message: '请填写内容', trigger: 'blur' }
+                                    ]">
+                                     <el-input v-model="item.key" style="width: 100%"></el-input>
+                                 </el-form-item>
+                             </el-col>
+                             <el-col :span="10">
+                                 <el-form-item :label="'选项'+(index+1)+'值'" label-width="100px" prop="value" :rules="[
+                                    { required: true, message: '请填写内容', trigger: 'blur' }
+                                    ]">
+                                     <el-input v-model="item.value" style="width: 100%"></el-input>
+                                 </el-form-item>
+                             </el-col>
+                             <el-col :span="4" style="text-align: center">
+                                 <el-button @click="removeOption(index)">删除选项</el-button>
+                             </el-col>
+                         </el-row>
+                    </div>
+                    <div v-else>
+                            <el-row>
+                                <el-col :span="24">
+                                    <el-form-item :label="'选项'+(index+1)" label-width="180px" prop="value" :rules="[
+                                    { required: true, message: '请填写内容', trigger: 'blur' }
+                                    ]">
+                                        <el-input v-model="item.value" style="width: 60%"></el-input>
+                                        <el-button @click="removeOption(index)">删除选项</el-button>
+                                    </el-form-item>
+                                </el-col>
+                            </el-row>
+                    </div>
+                </el-form>
+                <div style="text-align: center"><el-button @click="appendOption">添加选项</el-button></div>
+                <div slot="footer" class="dialog-footer">
+                    <el-button type="primary" @click="sure()" size="small" icon="el-icon-success">确定</el-button>
+                    <el-button @click="settingshow = false" size="small" icon="el-icon-error">取 消</el-button>
+                </div>
+            </el-dialog>
+    </el-container>
+</template>
+
+<script>
+    export default {
+        name:"sys-param",
+        data(){
+            return {
+                crud: new this.CrudUtil({
+                    vue: this,
+                    entityName: "sysParam",
+                    url: this.api.param.url,
+                    initNoSearch:true,
+                }),
+                loginUser:{},
+                activeNames: '0',//初始化选中tab页
+                paramFormData:[],//页面表单数据
+                removeIds:[],//删除的数据ids
+                originData:[],//初始化请求数据，与修改后比对值，确定是否修改
+                editFormId:"",//当前编辑的数据Id
+                updateIds:[],//修改的参数ids
+                editIndex:'',//当前编辑的数据index
+                settingshow:false,//控制设置页面显示
+                caseSelect:true,//根据下拉框类型生成配置选项
+                caseDisabled:false,//是否禁用对应控件
+                caseUpdate:true,//参数键值只能添加时能修改
+                tabparamOptions:[{"label":"系统参数","value":[]}],//tab页表单数据类型
+                allKind:[],//所有分类
+                options:[],//级联下拉数据
+                settingOptions:[],//参数值类型下拉选项配置
+                caseRead:false,//输入框等是否能够编辑
+                paramvalRead:true,//参数配置值是否能够编辑
+                typeOptions:[{value: 'radio',label: '单选'},{value: 'checkbox',label: '复选'},{value: 'select',label: '下拉选'},
+                    {value: 'multiSelect',label: '下拉多选'},{value: 'diy',label: '自定义文本'},{value: 'textarea',label: '自定义长文本'}],
+                clickType:false,//控制编辑类型
+                initLoading:true,
+                showKey:false, // 到底是展示参数名还是参数键值(默认参数名)
+            };
+        },
+        created(){
+            this.loginUser = this.USER_GLOBAL.getLoginUser();
+            this.initoriginData(); // 初始化仅加载一次的数据
+        },
+        watch: {
+            loginUser(){
+                let vm = this;
+                if(vm.loginUser){
+                    if(vm.loginUser.userType != 'sup'){
+                        vm.caseDisabled = true;
+                        for(let elem of vm.options){
+                            if(elem.value == 'system'){
+                                elem.disabled = true;
+                            }
+                        }
+                    }else{
+                        vm.caseDisabled = false;
+                        for(let elem of vm.options){
+                            if(elem.value == 'system'){
+                                elem.disabled = false;
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        methods: {
+            init(){
+                let vm = this;
+                vm.initLoading = true;
+                vm.axios.post(vm.api.param.find).then(function (res) {
+                    res.data = res.data.sort(vm.sort);
+                    let countnokind = 0;//计算未分类数据
+                    for(let elem of res.data.values()){
+                        // 替换旧数据
+                        if(elem.sysParamType){
+                            elem.sysParamType = elem.sysParamType.replace("3a87acf3d7f844c2bc429e701bc00538","业务参数");
+                            elem.sysParamType = elem.sysParamType.replace("dc556d76182c4f518ce12742c26cafce","初始化参数");
+                            elem.sysParamType = elem.sysParamType.replace("07c22fa7807e4ea68490365448c98aa0","权限参数");
+                            elem.sysParamType = elem.sysParamType.replace("81afdb1e4ee344f4844a404a013130cf","地图参数");
+                            elem.sysParamType = elem.sysParamType.replace("a762007266924556be3acd5bf5cedfe4","日志参数");
+                            elem.sysParamType = elem.sysParamType.replace("5b8322428527409cb7a8304e4bbfb82d","其他参数");
+                            elem.sysParamType = elem.sysParamType.replace("6598","附件参数");
+                        }
+
+                        if(vm.showKey){ // 储存参数名称，如果转换后就使用paramKey
+                            elem.paramRealName = elem.paramKey;
+                        }else{
+                            elem.paramRealName = elem.paramName;
+                        }
+                        elem.ifUpdate = false;//修改标记
+                        if(vm.allKind.indexOf(elem.sysParamType) == -1){
+                            countnokind++;
+                            elem.sysParamType = 'serve,nokind';
+                        }
+                        vm.preDeal(elem);
+                        vm.dealData(elem);
+                    }
+                    if(countnokind == 0){
+                        for(let index in vm.tabparamOptions){
+                            if(vm.tabparamOptions[index].label == '未分类'){
+                                vm.tabparamOptions.splice(index,1);
+                            }
+                        }
+                    }
+
+                    vm.originData = JSON.parse(JSON.stringify(res.data));
+                    vm.paramFormData = res.data;
+                    vm.initLoading = false;
+                })
+            },
+            initoriginData(){
+                let vm =this;
+                vm.axios.post(vm.api.param.getSysParams,{key:'sysParamKind'}).then(res => {
+                    let kind = res.data;
+                    if(!kind){
+                        kind = "{'system':'初始化参数，权限参数，地图参数，日志参数，其他参数','serve':'业务参数','upload':'附件参数'}";
+                    }
+                    kind = vm.platStringUtil.replaceAll(kind,"，",",");
+                    let sysParamKind = JSON.parse(vm.platStringUtil.replaceAll(kind,"'","\""));
+                    let resData = {};
+                    resData["system"] = [];
+                    resData["serve"] = [];
+                    resData["upload"] = [];
+                    (sysParamKind["system"] || "").split(",").forEach(name => {
+                        if(name){
+                            resData["system"].push({
+                                id:name,
+                                dataName:name,
+                            })
+                        }
+                    });
+                    (sysParamKind["serve"] || "").split(",").forEach(name => {
+                        if(name){
+                            resData["serve"].push({
+                                id:name,
+                                dataName:name,
+                            })
+                        }
+                    });
+                    (sysParamKind["upload"] || "").split(",").forEach(name => {
+                        if(name){
+                            resData["upload"].push({
+                                id:name,
+                                dataName:name,
+                            })
+                        }
+                    });
+
+                    vm.tabparamOptions = [];
+                    let systemOption = {"label":"系统参数","value":[]};
+                    let serveOption = {"label":"业务参数","value":[]};
+                    let uploadOption = {"label":"附件参数","value":[]};
+                    let noKindOption = {"label":"未分类","value":[]};
+                    if(resData && resData.system.length > 0){
+                        let result = resData.system;
+                        let option = {value: 'system', label: '系统参数',children:[]};
+                        for(let item of result){//子数据
+                            if(vm.allKind.indexOf('system,'+item.id) == -1){//确定所有参数类型
+                                vm.allKind.push('system,'+item.id);
+                            }
+                            systemOption.value.push({"value":'system,'+item.id,"label":item.dataName});
+                            option.children.push({"value":item.id,"label":item.dataName});
+                        }
+                        vm.options.push(option);
+                    }
+                    if(resData && resData.serve.length > 0){
+                        let result = resData.serve;
+                        let option = {value: 'serve', label: '业务参数',children:[]};
+                        for(let item of result){//子数据
+                            if(vm.allKind.indexOf('serve,'+item.id) == -1){//确定所有参数类型
+                                vm.allKind.push('serve,'+item.id);
+                            }
+                            serveOption.value.push({"value":'serve,'+item.id,"label":item.dataName});
+                            option.children.push({"value":item.id,"label":item.dataName});
+                        }
+                        vm.options.push(option);
+                    }
+                    if(resData && resData.upload.length > 0){
+                        let result = resData.upload;
+                        let option = {value: 'upload', label: '附件参数',children:[]};
+                        for(let item of result){//子数据
+                            if(vm.allKind.indexOf('upload,'+item.id) == -1){//确定所有参数类型
+                                vm.allKind.push('upload,'+item.id);
+                            }
+                            uploadOption.value.push({"value":'upload,'+item.id,"label":item.dataName});
+                            option.children.push({"value":item.id,"label":item.dataName});
+                        }
+                        vm.options.push(option);
+                    }
+                    noKindOption.value.push({"value":'serve,nokind',"label":"未分类"});//有些元数据删除后数据无归属将不显示
+                    vm.tabparamOptions.push(systemOption);
+                    vm.tabparamOptions.push(serveOption);
+                    vm.tabparamOptions.push(uploadOption);
+                    vm.tabparamOptions.push(noKindOption);
+                    if(vm.loginUser.userType != 'sup'){
+                        vm.caseDisabled = true;
+                        for(let elem of vm.options){
+                            if(elem.value == 'system'){
+                                elem.disabled = true;
+                            }
+                        }
+                    }else{
+                        vm.caseDisabled = false;
+                        for(let elem of vm.options){
+                            if(elem.value == 'system'){
+                                elem.disabled = false;
+                            }
+                        }
+                    }
+                    vm.init();
+                })
+            },
+            preDeal(elem){//预处理数据，将部分系统参数转化显示方式
+                let temArr = [{'logOperationLog':'1'},{'errorJavaLog':'1'},{'errorFrontLog':'1'},{'logLoginLog':'1'},
+                              {'SysOperation':'是'},{'SysDataOperation':'是'},{'rememberUserName':'Y'} ];
+                for(let tempElem of temArr){
+                    if(tempElem[elem.paramKey]){
+                        elem.paramBackup = '是,否';
+                        if(elem.paramVal.indexOf(tempElem[elem.paramKey]) > -1){
+                            elem.paramVal = '是';
+                        }else{
+                            elem.paramVal = '否';
+                        }
+                    }
+                }
+                if(elem.paramKey == 'uploadPath'){
+                    elem.paramVal = JSON.parse(elem.paramVal.replace(/\'/g,"\"")).url;
+                }
+                return elem;
+            },
+            afterDeal(elem){//保存时转回数据至数据库
+                let temArr = [{'logOperationLog':{'是':'1','否':'0',}},{'errorJavaLog':{'是':'1','否':'0'}},{'errorFrontLog':{'是':'1','否':'0'}},
+                              {'logLoginLog':{'是':'1','否':'0',}}, {'SysOperation':{'是':'{\'opt\':\'是\'}','否':'{\'opt\':\'否\'}'}},
+                              {'SysDataOperation':{'是':'{\'opt\':\'是\'}','否':'{\'opt\':\'否\'}'}},{'rememberUserName':{'是':'Y','否':'N'}}];
+                        let result = elem.paramVal;
+                for(let tempElem of temArr){
+                    if(tempElem[elem.paramKey]){
+                        result = tempElem[elem.paramKey][elem.paramVal];
+                    }
+                }
+                if(elem.paramKey == 'uploadPath'){
+                    let obj = {};
+                    obj['url'] = elem.paramVal;
+                    return JSON.stringify(obj);
+                }
+                return result;
+            },
+            dealData(elem){//处理数据库中String数据，转化为JSON,将控件展示于页面
+                let arr = [];
+                let arrval = [];
+                switch (elem.paramType) {
+                    case 'multiSelect':
+                    case 'select':
+                        elem.paramBackup = elem.paramBackup && JSON.parse(elem.paramBackup.replace(/\'/g,"\""));
+                        try{
+                            elem.paramVal = elem.paramVal && JSON.parse(elem.paramVal.replace(/\'/g,"\""));//由于填写的值不合select规范
+                        }catch (e) {
+                            elem.paramVal = '';//设置为''
+                        }
+                        elem.paramBackup && Object.keys(elem.paramBackup).forEach(function (key) {
+                            let tempObj = {};
+                            tempObj["key"] = key;
+                            tempObj["value"] = elem.paramBackup[key];
+                            arr.push(tempObj);
+                        });
+                        elem.paramVal && Object.keys(elem.paramVal).forEach(function (key) {
+                            let tempvalObj = {};
+                            tempvalObj["key"] = key;
+                            tempvalObj["value"] = elem.paramVal[key];
+                            if(elem.paramType == 'select'){
+                                elem.paramVal = tempvalObj;
+                            }
+                            arrval.push(tempvalObj);
+                        });
+                        elem.paramBackup = arr;
+                        if(elem.paramType == 'multiSelect'){
+                            elem.paramVal = arrval;
+                        }
+                        break;
+                    case 'radio':
+                        elem.paramBackup = elem.paramBackup && elem.paramBackup.split(',');
+                        break;
+                    case 'checkbox':
+                        elem.paramBackup = elem.paramBackup && elem.paramBackup.split(',');
+                        elem.paramVal = elem.paramVal && elem.paramVal.split(',');
+                        break;
+                }
+                return elem;
+            },
+            sort(a,b){
+                let obj = {"radio":0,"checkbox":1,"select":2,"multiSelect":3,"diy":4,"textarea":5};
+                if(a.paramType == b.paramType){
+                    return a.sort - b.sort;
+                }else{
+                    return obj[a.paramType] - obj[b.paramType];
+                }
+            },
+            paramValChange(newValue){//值类型变化时，如果是自定义则参数值可以自定义修改，否则设置为只读，并清空数据
+                let vm = this;
+                vm.paramvalRead = !(newValue == 'diy' || newValue == 'textarea');
+                vm.$set(vm.crud.formData,"paramBackup","");
+            },
+            endEdit() {
+                let vm = this;
+                //先执行删除，再执行数据更新
+                if(vm.removeIds.length>0){
+                    vm.axios.post(vm.api.param.delete,{'ids':vm.removeIds.join(",")}).then(function () {
+                        vm.removeIds = [];
+                        vm.init();
+                    });
+                }
+                if(vm.updateIds.length>0){
+                    let submitArr = [];
+                    for(let elem of vm.paramFormData){
+                        if(vm.updateIds.indexOf(elem.id) > -1){//如果在更新ids中。执行update
+                            elem.sysParamType = elem.sysParamType.join(',');
+                            let submitData = {};
+                            let tempObj = {};
+                            let tempvalObj = {};
+                            let tempElem = JSON.parse(JSON.stringify(elem));
+                            switch (tempElem.paramType) {
+                                case 'multiSelect':
+                                    for(let arrVal of tempElem.paramBackup){
+                                        tempObj[arrVal['key']] = arrVal['value'];
+                                    }
+                                    for(let arrVal of tempElem.paramVal){
+                                        tempvalObj[arrVal['key']] = arrVal['value'];
+                                    }
+                                    tempElem.paramBackup = JSON.stringify(tempObj);
+                                    tempElem.paramVal = JSON.stringify(tempvalObj);
+                                    break;
+                                case 'select':
+                                    for(let arrVal of tempElem.paramBackup){
+                                        tempObj[arrVal['key']] = arrVal['value'];
+                                    }
+                                    tempvalObj[tempElem.paramVal.key] = tempElem.paramVal.value;
+                                    tempElem.paramBackup = JSON.stringify(tempObj);
+                                    tempElem.paramVal = JSON.stringify(tempvalObj);
+                                    break;
+                                case 'radio':
+                                    tempElem.paramBackup = tempElem.paramBackup && tempElem.paramBackup.join(',');
+                                    tempElem.paramVal = vm.afterDeal(tempElem);
+                                    break;
+                                case 'checkbox':
+                                    tempElem.paramBackup = tempElem.paramBackup && tempElem.paramBackup.join(',');
+                                    tempElem.paramVal = tempElem.paramVal && tempElem.paramVal.join(',');
+                                    break;
+                                default:
+                                    tempElem.paramVal = vm.afterDeal(tempElem);
+                                    break;
+                            }
+                            Object.keys(tempElem).forEach(function (key) {
+                                if(key != "paramRealName"){
+                                    submitData[key] = tempElem[key];
+                                }
+                            });
+                            submitArr.push(submitData);
+                        }
+                    }
+                    vm.axios.post(vm.api.param.batchUpdate,{'updateObj':JSON.stringify(submitArr)}).then(res => {
+                        if(res.data.operateSuccess){
+                            vm.$message({
+                                duration: 1000,
+                                type: 'success',
+                                message: res.data.operateMessage
+                            });
+                            vm.updateIds = [];
+                            vm.init();
+                        }else{
+                            vm.$message({
+                                duration: 1000,
+                                type: 'error',
+                                message: res.data.operateMessage
+                            });
+                        }
+                    });
+                }
+            },
+            add(){
+                let vm = this;
+                vm.caseRead = false;//输入框等是否能够编辑
+                vm.caseDisabled = false;//是否禁用控件
+                vm.caseUpdate = false;
+                vm.paramvalRead = false;
+                vm.crud.formData = {
+                    paramType:'diy'
+                };
+                vm.crud.dialogVisible = true;
+                vm.crud.optCode = "add";
+                vm.crud.clearFormValidate();
+            },
+            formSave(){//表单保存，只保存修改的，未修改的不更新
+                let vm = this;
+                let submitArr = [];
+                for(let i = 0 ; i < vm.originData.length ; i++){
+                    if(!vm.isEqual(vm.originData[i].paramVal,vm.paramFormData[i].paramVal)){//数据变化了
+                        let result = '';
+                        let temValObj = {};
+                        let tempObj = {};
+                        switch (vm.paramFormData[i].paramType) {
+                            case 'multiSelect':
+                                for(let elem of vm.paramFormData[i].paramVal.values()){
+                                    tempObj[elem.key] = elem.value;
+                                }
+                                result = JSON.stringify(tempObj);
+                                break;
+                            case 'select':
+                                tempObj[vm.paramFormData[i].paramVal.key] = vm.paramFormData[i].paramVal.value;
+                                result = JSON.stringify(tempObj);
+                                break;
+                            case 'checkbox':
+                                result = vm.paramFormData[i].paramVal && vm.paramFormData[i].paramVal.join(',');
+                                break;
+                            case 'radio':
+                                result = vm.afterDeal(vm.paramFormData[i]);
+                                break;
+                            default:
+                                result = vm.paramFormData[i].paramVal;
+                                if(vm.paramFormData[i].paramKey == 'uploadPath'){
+                                    result = vm.afterDeal(vm.paramFormData[i]);
+                                }
+                                break;
+                        }
+                        temValObj['paramVal'] = result;
+                        temValObj['paramKey'] = vm.paramFormData[i].paramKey;
+                        temValObj['id'] = vm.paramFormData[i].id;
+                        temValObj['sort'] = vm.paramFormData[i].sort; // 后台排序是Int不传会变成0
+                        submitArr.push(temValObj);
+                    }
+                }
+                vm.axios.post(vm.api.param.batchUpdate,{'updateObj':JSON.stringify(submitArr)}).then(function (res) {
+                    vm.crud.vue.$message({
+                        duration: 1000,
+                        type: 'success',
+                        message: res.data.operateMessage
+                    });
+                    vm.init();
+                });
+            },
+            submit(){//表单提交，新增直接提交，update假提交，完成编辑则提交
+                let vm = this;
+                vm.$refs[vm.crud.setting.addFormRef].validate(function (valid) {
+                    if(valid){
+                        if(vm.editFormId){
+                            if(JSON.stringify(vm.crud.formData) == '{}'){
+                                vm.$message('请等待数据加载完成！');
+                                return;
+                            }
+                            vm.crud.optCode = 'update';
+                            if(vm.showKey){
+                                vm.crud.formData.paramRealName = vm.crud.formData.paramKey;
+                            }else{
+                                vm.crud.formData.paramRealName = vm.crud.formData.paramName;
+                            }
+
+                            vm.crud.formData = vm.preDeal(vm.crud.formData);
+                            //将数据使用JSON.parse,stringify转化，这样相当于新对象，不会转换后影响表单数据产生报错
+                            vm.paramFormData[vm.editIndex] = vm.dealData(JSON.parse(JSON.stringify(vm.crud.formData)));
+                            if(vm.updateIds.indexOf(vm.editFormId)  == -1){
+                                vm.updateIds.push(vm.editFormId);//置入更新数据的id
+                            }
+                            vm.endEdit();
+                            vm.crud.dialogVisible = false;
+                            vm.editFormId = '';
+                        }else{
+                            vm.crud.optCode = 'add';
+                            let tempObj = {};
+                            let formObj = JSON.parse(JSON.stringify(vm.crud.formData));
+                            formObj.sysParamType = formObj.sysParamType.join(',');
+                            if(formObj.paramType == 'diy' || formObj.paramType == 'textarea'){// 如果是自定义，我们新增的时候将数据设置为参数值
+                                formObj.paramVal = formObj.paramBackup;
+                            }
+                            for(let elem in formObj){
+                                tempObj[elem] = formObj[elem];
+                            }
+                            vm.axios.post(vm.api.param.add,tempObj).then(function (res) {
+                                vm.crud.vue.$message({
+                                    duration: 1000,
+                                    type: 'success',
+                                    message: res.data.operateMessage
+                                });
+                                vm.endEdit();
+                                vm.crud.dialogVisible = false;
+                                vm.init();
+                            });
+                        }
+                    }
+                })
+            },
+            updateForm(index){//修改指定参数
+                let vm = this;
+                vm.caseUpdate = true;
+                vm.editFormId = vm.paramFormData[index].id;
+                vm.caseRead = false;
+                vm.caseDisabled = false;
+                if(vm.loginUser.userType != 'sup'){
+                    vm.caseRead = true;
+                }
+                vm.editIndex = index;
+                vm.initsysParamForm();
+                vm.crud.dialogVisible = true;
+            },
+            initsysParamForm(){//获取表单数据
+                let vm = this;
+                vm.crud.formData = {};//进入之前先修改数据值，抛弃页面原数据
+                if(!vm.editFormId){
+                    vm.crud.formData = {};
+                    return;
+                }
+                vm.axios.post(vm.api.param.getById,{"id":vm.editFormId}).then(function (res) {
+                    let data = res.data;
+                    if(vm.loginUser.userType != 'sup' && data.sysParamType && data.sysParamType.indexOf('system') > -1){
+                        vm.caseDisabled = true;
+                    }
+
+                    if(data.sysParamType){
+                        data.sysParamType = data.sysParamType.replace("3a87acf3d7f844c2bc429e701bc00538","业务参数");
+                        data.sysParamType = data.sysParamType.replace("dc556d76182c4f518ce12742c26cafce","初始化参数");
+                        data.sysParamType = data.sysParamType.replace("07c22fa7807e4ea68490365448c98aa0","权限参数");
+                        data.sysParamType = data.sysParamType.replace("81afdb1e4ee344f4844a404a013130cf","地图参数");
+                        data.sysParamType = data.sysParamType.replace("a762007266924556be3acd5bf5cedfe4","日志参数");
+                        data.sysParamType = data.sysParamType.replace("5b8322428527409cb7a8304e4bbfb82d","其他参数");
+                        data.sysParamType = data.sysParamType.replace("6598","附件参数");
+                    }
+
+                    if(data.paramType == 'diy' || data.paramType == 'textarea' || !data.paramType){
+                        vm.paramvalRead = false;
+                        data.paramBackup = data.paramVal;
+                    }else{
+                        vm.paramvalRead = true;
+                    }
+                    data.sysParamType = (data.sysParamType || "").split(',');
+                    vm.crud.formData = res.data;
+                })
+            },
+            doRemove(index){//移除参数，假移除，完成编辑则真移除
+                let vm = this;
+                let removeId = vm.paramFormData[index].id;
+                if(removeId){
+                    vm.$confirm('确定要删除吗?', '警告', {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '取消',
+                    }).then(function () {
+                        vm.paramFormData.splice(index,1);//移除dom
+                        vm.originData.splice(index,1);//移除原始数据中的数据，比对的时候index不会错乱
+                        if(vm.removeIds.indexOf(removeId) == -1){
+                            vm.removeIds.push(removeId);
+                        }
+                    });
+                }
+            },
+            settingOption(){//编辑表单配置参数
+                let vm = this;
+                if(!vm.crud.formData.paramType || vm.crud.formData.paramType == 'diy' || vm.crud.formData.paramType == 'textarea'){
+                    vm.$message('当前类型不需要配置！');
+                    return;
+                }
+
+                vm.caseSelect = vm.crud.formData.paramType == 'select' || vm.crud.formData.paramType == 'multiSelect';
+
+                //初始化settingOptions
+                vm.settingOptions = [];
+                if(vm.crud.formData.paramBackup){
+                    if(vm.caseSelect){
+                        let data;
+                        try{
+                            data = JSON.parse(vm.crud.formData.paramBackup);
+                        }catch (e) {
+                            data = {};
+                            vm.settingOptions.push({});vm.settingOptions.push({});
+                        }
+                        Object.keys(data).forEach(function (key) {
+                            let obj = {};
+                            obj["key"] = key;
+                            obj["value"] = data[key];
+                            vm.settingOptions.push(obj);
+                        })
+                    }else{
+                        for(let elem of vm.crud.formData.paramBackup.split(",")){
+                            let obj = {};
+                            obj['value'] = elem;
+                            vm.settingOptions.push(obj);
+                        }
+                    }
+                }else{
+                    vm.settingOptions.push({});vm.settingOptions.push({});
+                }
+
+                vm.settingshow = true;
+            },
+            sure(){//完成后更新表单备选参数
+                let vm = this;
+                vm.$refs.settingForm[0].validate(function (valid) {
+                    if(valid){
+                        if(vm.caseSelect){
+                            let obj = {};
+                            for(let elem of vm.settingOptions){
+                                obj[elem['key']] = elem['value'];
+                            }
+                            vm.$set(vm.crud.formData,"paramBackup",JSON.stringify(obj));
+                        }else{
+                            let arr = [];
+                            for(let elem of vm.settingOptions){
+                                arr.push(elem['value']);
+                            }
+                            vm.$set(vm.crud.formData,"paramBackup",arr.join(','));
+                        }
+                    }
+                    vm.settingshow = false;
+                })
+            },
+            removeOption(index){//移除选项
+                if(this.settingOptions.length <= 2){
+                    this.$message('配置不可低于两个选项！');
+                    return;
+                }
+                this.settingOptions.splice(index,1);
+            },
+            appendOption(){//添加选项
+                this.settingOptions.push({});
+            },
+            isEqual(obj1,obj2){
+                let vm = this;
+                let o1 = obj1 instanceof Object;
+                let o2 = obj2 instanceof Object;
+                if(!o1 || !o2){/*  判断不是对象  */
+                    return obj1 === obj2;
+                }
+
+                if(Array.isArray(obj1) && Array.isArray(obj2)){
+                    return vm.compareArray(obj1,obj2);
+                }
+
+                if(Object.keys(obj1).length !== Object.keys(obj2).length){
+                    return false;
+                }
+
+                for(let attr in obj1){
+                    if (obj1.hasOwnProperty(attr)) {
+                        let t1 = obj1[attr] instanceof Object;
+                        let t2 = obj2[attr] instanceof Object;
+                        if(t1 && t2){
+                            return this.isEqual(obj1[attr],obj2[attr]);
+                        }else if(obj1[attr] !== obj2[attr]){
+                            return false;
+                        }
+                    }
+                }
+                return true;
+            },
+            compareArray(array1,array2){
+                let vm = this;
+                if(array1.length != array2.length){
+                    return false;
+                }
+                let obj = {}; // 记录已经比对过的数组序号
+                for(let i = 0 ; i < array1.length ; i++){
+                    let caculate = true;
+                    for(let j = 0; j < array2.length ; j++){
+                        if(obj[j]){ // 已经比对过，跳过
+                            continue;
+                        }
+                        caculate = vm.isEqual(array1[i],array2[j]);
+                        if(caculate){
+                            obj[j] = i;
+                            break;
+                        }
+                    }
+                    if(!caculate){
+                        break;
+                    }
+                }
+                return Object.keys(obj).length == array1.length;
+            },
+            transParamKeyVal(){
+                let vm = this;
+                vm.showKey = !vm.showKey;
+                (vm.paramFormData || []).forEach(item=>{
+                    if(vm.showKey){
+                        item.paramRealName = item.paramKey;
+                    }else{
+                        item.paramRealName = item.paramName;
+                    }
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    fieldset{
+        margin-top: 10px;
+    }
+    legend{
+        font-size: 14px;
+    }
+    .button_header{
+        position: absolute;
+        height: 60px!important;
+        text-align: center;
+        line-height: 60px;
+        bottom: 0;
+        border-top: 1px solid #f2f2f2;
+        background-color: white;
+        margin: auto;
+        width: 100%;
+        right: 0;
+        z-index: 99;
+    }
+    .control_box{
+        padding-right: 100px;
+        position: relative;
+    }
+    .operate_div{
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width: 100px;
+    }
+    .operate_div i{
+        /*margin-right: 20px;*/
+        cursor: pointer;
+        width: 30px;
+        height: 30px;
+        padding-top: 15px;
+        padding-left: 15px;
+        float: left;
+    }
+    .top_contain{
+        height: 100%;
+        /*border-radius:8px;*/
+        overflow-y: hidden;
+    }
+    .top_contain::-webkit-scrollbar{
+        width: 0;
+    }
+</style>
+<style>
+    .black .el-form-item__label{
+        color: black;
+    }
+    .green .el-form-item__label{
+        color: #27B5C3;
+    }
+    .settingClass{
+        width: 100%;
+        height: 40px;
+        position: relative;
+    }
+    .settingClass span{
+        position: absolute;
+        top:0;left:0;
+        right: 0;bottom: 0;
+        margin: auto;line-height: 40px;
+    }
+</style>