<template>
|
<el-container>
|
<el-dialog title="系统集成基础信息" v-dialogDrag :visible.sync="showSubmitDialog" class="avue-dialog avue-dialog--top" append-to-body @close="closeSubmitDialog" width="1000px"
|
style="height: 110vh;" top="-5%">
|
<el-form ref="form" :model="formData" show-message="true" inline size="medium" label-suffix=":"
|
class="dockingForm" :rules="rules" status-icon="true">
|
<el-form-item label="接口类型" prop="dataFlowType">
|
<el-select v-model="formData.dataFlowType" placeholder="请选择" @change="dataFlowTypeChange">
|
<el-option v-for="item in dataFlowTypeList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item :label="formData.dataFlowType=='push'?'推送类型':'接收类型'" prop="pushType">
|
<el-select v-model="formData.pushType" placeholder="请选择" @change="pushTypeChange">
|
<el-option v-for="item in pushTypeList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="参数类型" prop="paramType">
|
<el-select v-model="formData.paramType" placeholder="请选择">
|
<el-option v-for="item in paramTypeList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="返回值类型" prop="returnType">
|
<el-select v-model="formData.returnType" placeholder="请选择">
|
<el-option v-for="item in returnTypeList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<div v-if="formData.dataFlowType=='push'">
|
<el-form-item label="分类选择" prop="classifyName">
|
<vciWebRefer
|
:referConfig="{
|
title: '分类选择',
|
showField: 'classifyName',
|
field: 'classifyOid',
|
fieldMap:{'classifyId':'id'},
|
placeholder: '请选择分类选择',
|
options: {isMuti: false, type: 'tree', url: 'api/ubcs-code/codeClassify/treeCodeClassify'},
|
}"
|
:value="formData.classifyOid"
|
:text="formData.classifyName"
|
:disabled="false"
|
:display="true"
|
@setReferValue="setReferValue"
|
></vciWebRefer>
|
</el-form-item>
|
<el-form-item label="集成系统" prop="targetSystemName">
|
<vciWebRefer
|
:referConfig="{
|
title: '集成系统',
|
showField: 'targetSystemName',
|
field: 'targetSystemOid',
|
fieldMap:{'targetSystemId':'id'},
|
placeholder: '请选择',
|
options: {isMuti: false, type: 'default', url: 'api/ubcs-code/dockingManagement/gridDockingSystem'},
|
}"
|
:value="formData.targetSystemOid"
|
:text="formData.targetSystemName"
|
:disabled="false"
|
:display="true"
|
@setReferValue="setReferValue"
|
></vciWebRefer>
|
</el-form-item>
|
</div>
|
<div v-else>
|
<!-- <el-form-item label="分类选择" prop="classifyName" style="display: none">-->
|
<!-- </el-form-item>-->
|
<el-form-item label="分类选择" prop="classifyName" v-if="formData.pushType !='5' && formData.pushType !='6'">
|
<vciWebRefer
|
:referConfig="{
|
title: '分类选择',
|
showField: 'classifyName',
|
field: 'classifyOid',
|
fieldMap:{'classifyId':'id'},
|
placeholder: '请选择分类选择',
|
options: {isMuti: false, type: 'tree', url: 'api/ubcs-code/codeClassify/treeCodeClassify'},
|
}"
|
:value="formData.classifyOid"
|
:text="formData.classifyName"
|
:disabled="false"
|
:display="true"
|
@setReferValue="setReferValue"
|
></vciWebRefer>
|
</el-form-item>
|
<el-form-item label="集成系统" prop="sourceSystemName">
|
<vciWebRefer
|
:referConfig="{
|
title: '集成系统',
|
showField: 'sourceSystemName',
|
field: 'sourceSystemOid',
|
fieldMap:{'sourceSystemId':'id'},
|
placeholder: '请选择',
|
options: {isMuti: false, type: 'default', url: 'api/ubcs-code/dockingManagement/gridDockingSystem'},
|
}"
|
:value="formData.sourceSystemOid"
|
:text="formData.sourceSystemName"
|
:disabled="false"
|
:display="true"
|
@setReferValue="setReferValue"
|
></vciWebRefer>
|
</el-form-item>
|
</div>
|
<el-form-item label="接口方式" prop="interfaceType">
|
<el-select v-model="formData.interfaceType" clearable placeholder="请选择">
|
<el-option v-for="item in interfaceTypeList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="formData.pushType=='1'" label="是否推送集团码" prop="isGroupCodeFlag">
|
<el-switch v-model="formData.isGroupCodeFlag" ></el-switch>
|
</el-form-item>
|
<el-form-item v-if="formData.pushType=='3'" label="是否申请集团码" prop="isGroupCodeFlag">
|
<el-switch v-model="formData.isGroupCodeFlag" ></el-switch>
|
</el-form-item>
|
<el-form-item v-if="formData.pushType=='4'" label="是否维护集团码" prop="isGroupCodeFlag">
|
<el-switch v-model="formData.isGroupCodeFlag" ></el-switch>
|
</el-form-item>
|
<el-form-item v-if="formData.pushType=='7'" label="是否查询集团码" prop="isGroupCodeFlag">
|
<el-switch v-model="formData.isGroupCodeFlag" ></el-switch>
|
</el-form-item>
|
<el-form-item label="系统描述" style="width: 850px;" prop="description">
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" v-model="formData.description" style="width: 740px;"></el-input>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='http'" label="请求方式" prop="requestMethod">
|
<el-select v-model="formData.requestMethod" placeholder="请选择">
|
<el-option v-for="item in requestMethodList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='webService' || formData.interfaceType=='http'" label="请求地址" prop="requestUrl">
|
<el-input v-model="formData.requestUrl" type="text"></el-input>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='webService'" label="接口函数" prop="interfaceFunction">
|
<el-input v-model="formData.interfaceFunction"></el-input>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='webService'" label="命名空间" prop="nameSpace">
|
<el-input v-model="formData.nameSpace"></el-input>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='webService'" label="soapAction" prop="soapAction">
|
<el-input v-model="formData.soapAction" ></el-input>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='webService'" label="参数名称" prop="targName">
|
<el-input v-model="formData.targName" ></el-input>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='webService'" label="cxfaxis" prop="cxfaxis">
|
<el-input v-model="formData.cxfaxis" ></el-input>
|
</el-form-item>
|
<el-form-item v-if="formData.interfaceType=='classPath'" label="类路径" prop="classPath">
|
<el-input v-model="formData.classPath" ></el-input>
|
</el-form-item>
|
<el-tabs v-model="activeName" @tab-click="tabClick">
|
<el-tab-pane label="参数对象" name="paramTab">
|
<avue-crud :option="param.option"
|
:data="formData.sysIntParamVOs"
|
v-model="formData.sysIntParamVOs"
|
ref="paramcrud">
|
<template slot="menuLeft">
|
<el-button type="primary"
|
size="small"
|
plain
|
icon="el-icon-plus"
|
@click="handleParamAdd">添加行
|
</el-button>
|
</template>
|
<template slot="menu" slot-scope="{row,index}">
|
<el-button icon="el-icon-edit" size="small" type="text" v-if="!row.$cellEdit" @click="handleParamEditClick(row,index)">编辑
|
</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" v-if="!row.$cellEdit" @click="handleParamDel(row,index)">移除
|
</el-button>
|
<el-button icon="el-icon-check" size="small" type="text" v-if="row.$cellEdit" @click="handleParamEditSave(row,index)">
|
保存
|
</el-button>
|
</template>
|
</avue-crud>
|
</el-tab-pane>
|
<el-tab-pane label="header对象" name="headerTab">
|
<avue-crud :option="header.option"
|
:data="formData.sysIntHeaderVOs"
|
v-model="formData.sysIntHeaderVOs"
|
ref="headercrud">
|
<template slot="menuLeft">
|
<el-button type="primary"
|
size="small"
|
plain
|
icon="el-icon-plus"
|
@click="handleHeaderAdd">添加行
|
</el-button>
|
</template>
|
<template slot="menu" slot-scope="{row,index}">
|
<el-button icon="el-icon-edit" size="small" type="text" v-if="!row.$cellEdit" @click="handleHeaderEditClick(row,index)">编辑
|
</el-button>
|
<el-button icon="el-icon-delete" size="small" type="text" v-if="!row.$cellEdit" @click="handleHeaderDel(row,index)">移除
|
</el-button>
|
<el-button icon="el-icon-check" size="small" type="text" v-if="row.$cellEdit" @click="handleHeaderEditSave(row,index)">
|
保存
|
</el-button>
|
</template>
|
</avue-crud>
|
</el-tab-pane>
|
</el-tabs>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button type="primary" @click="submitAttribute">确定</el-button>
|
<el-button @click="cancelSubmit">取消</el-button>
|
</div>
|
</el-dialog>
|
|
</el-container>
|
</template>
|
|
<script>
|
import { validatenull } from "@/util/validate";
|
import { getDictionary, getParentList } from '@/api/omd/enum'
|
import {add,edit} from "@/api/docking/info"
|
import vciWebRefer from "@/components/refer/vciWebRefer.vue";
|
|
export default {
|
name: 'infoForm',
|
props: {
|
formData: {
|
type: Object,
|
default:{
|
sysIntParamVOs:[],
|
sysIntHeaderVOs:[]
|
}
|
},
|
},
|
components: { vciWebRefer },
|
data() {
|
return {
|
showSubmitDialog: false,
|
//接口类型下拉
|
interfaceTypeList: [{
|
label: 'webService', value: 'webService'
|
}, {
|
label: '类路径', value: 'classPath'
|
}, {
|
label: 'Http', value: 'http'
|
}],
|
//参数类型下拉
|
paramTypeList: [{
|
label: 'xml', value: 'xml'
|
}, {
|
label: 'Json', value: 'json'
|
}],
|
//返回值类型下拉
|
returnTypeList: [{
|
label: 'xml', value: 'xml'
|
}, {
|
label: 'Json', value: 'json'
|
}],
|
dataFlowTypeList: [{
|
label: '推送', value: 'push'
|
}, {
|
label: '接收', value: 'accept'
|
}],
|
//推送类型
|
pushTypeList: [{value: '1', label: '数据推送'},
|
{value: '2', label: '分类推送'}],
|
//请求方式
|
requestMethodList: [{key: 'post', value: 'post'},
|
{key: 'get', value: 'get'},
|
{key: 'delete', value: 'delete'},
|
{key: 'put', value: 'put'}],
|
// 默认的页签
|
activeName: 'paramTab',
|
// 表单校验规则
|
rules: {
|
paramType: [
|
{required: true, message: '请选择参数类型', trigger: 'blur'}
|
],
|
returnType: [
|
{required: true, message: '请选择返回值类型', trigger: 'blur'}
|
],
|
dataFlowType: [
|
{required: true, message: '请选择', trigger: 'change'}
|
],
|
pushType: [
|
{required: true, message: '请选择推送类型', trigger: 'blur'}
|
],
|
classifyName: [
|
{required: true, message: '请选择', trigger: 'sbumit'}
|
],
|
sourceSystemName: [
|
{required: true, message: '请选择', trigger: 'sbumit'}
|
],
|
targetSystemName: [
|
{required: true, message: '请选择', trigger: 'sbumit'}
|
],
|
classPath: [
|
{required: true, message: '请输入类路径', trigger: 'blur'}
|
],
|
requestMethod: [
|
{required: true, message: '请选择请求方式', trigger: 'blur'}
|
],
|
requestUrl: [
|
{required: true, message: '请输入请求地址', trigger: 'blur'}
|
],
|
interfaceFunction: [
|
{required: true, message: '请输入接口函数', trigger: 'blur'}
|
],
|
nameSpace: [
|
{required: true, message: '请输入命名空间', trigger: 'blur'}
|
],
|
soapAction: [
|
{required: true, message: '请输入soapAction', trigger: 'blur'}
|
],
|
targName: [
|
{required: true, message: '请输入参数名称', trigger: 'blur'}
|
],
|
cxfaxis: [
|
{required: true, message: '请输入cxfaxis', trigger: 'blur'}
|
]
|
},
|
// 表格配置
|
param: {
|
option: {
|
height: 200,
|
index: true,
|
addBtn: false,
|
viewBtn: false,
|
delBtn: false,
|
editBtn: false,
|
refreshBtn: false,
|
columnBtn: false,
|
border: true,
|
menuWidth: 150,
|
searchShowBtn: false,
|
align: 'center',
|
column: [{
|
label: '参数名',
|
prop: 'paramKey',
|
cell: true
|
}, {
|
label: '参数值',
|
prop: 'paramValue',
|
cell: true
|
}, {
|
label: '是否使用',
|
prop: 'usedFlag',
|
formatter: function (row, column) {
|
return row.usedFlag == 'true' || row.usedFlag == '1' ? '是' : '否'
|
},
|
width: 150,
|
type: 'switch',
|
cell: true
|
}]
|
},
|
selectRow: {}
|
},
|
// 枚举参照表格配置
|
header: {
|
option: {
|
height: 200,
|
index: true,
|
addBtn: false,
|
viewBtn: false,
|
delBtn: false,
|
editBtn: false,
|
refreshBtn: false,
|
columnBtn: false,
|
border: true,
|
menuWidth: 150,
|
searchShowBtn: false,
|
align: 'center',
|
column: [{
|
label: '头参数名称',
|
prop: 'headerKey',
|
cell: true
|
}, {
|
label: '头参数值',
|
prop: 'headerValue',
|
cell: true
|
}, {
|
label: '是否使用',
|
prop: 'usedFlag',
|
formatter: function (row, column) {
|
return row.usedFlag == 'true' || row.usedFlag == '1' ? '是' : '否'
|
},
|
width: 150,
|
type: 'switch',
|
cell: true
|
}],
|
// 选定行
|
selectRow: ''
|
},
|
dictEnums: []
|
}
|
}
|
},
|
watch:{
|
formData:{
|
handler(newval,oldval){
|
console.log('newval',newval.dataFlowTypeText)
|
}
|
}
|
},
|
created() {
|
//this.geDictData('interfaceType', this.interfaceTypeList)
|
},
|
mounted(){
|
if (!this.formData.sysIntParamVOs) {
|
this.formData.sysIntParamVOs = [];
|
}
|
if (!this.formData.sysIntHeaderVOs) {
|
this.formData.sysIntHeaderVOs = [];
|
}
|
if(this.formData.dataFlowType=='accept'){
|
this.pushTypeList=[
|
{value: '3', label: '编码申请'},
|
{value: '4', label: '编码更改（状态、回收）'},
|
{value: '5', label: '分类查询'},
|
{value: '6', label: '含规则信息的分类查询'},
|
{value: '7', label: '数据查询'}]
|
this.formData.pushType=''
|
this.formData.targetSystemName='编码系统';
|
this.formData.targetSystemOid='code00000001';
|
this.formData.targetSystemId='CODE';
|
|
this.formData.sourceSystemName='';
|
this.formData.sourceSystemOid='';
|
this.formData.sourceSystemId='';
|
}else {
|
this.pushTypeList=[{value: '1', label: '数据推送'},
|
{value: '2', label: '分类推送'}]
|
this.formData.pushType='1' ;
|
this.formData.sourceSystemName='编码系统';
|
this.formData.sourceSystemOid='code00000001';
|
this.formData.sourceSystemId='CODE';
|
this.formData.targetSystemName='';
|
this.formData.targetSystemOid='';
|
this.formData.targetSystemId='';
|
}
|
},
|
methods: {
|
closeSubmitDialog() {
|
this.resetForm();
|
this.showSubmitDialog = false;
|
},
|
resetForm() {
|
this.formData={}
|
// this.formData = {
|
// sysIntParamVOs: [],
|
// sysIntHeaderVOs: []
|
// };
|
this.$refs.form.resetFields();
|
},
|
setReferValue(data) {
|
if (data.field) {
|
this.formData[data.field] = data.value || "";
|
this.formData[data.showField] = data.text || "";
|
}
|
if (data.fieldMap) {
|
//说明需要映射
|
for (let key in data.fieldMap) {
|
let mapFields = data.fieldMap[key].split(",");
|
let value = [];
|
data.rawData.forEach(_item => {
|
var temp;
|
if (!_item.attributes) {
|
_item.attributes = _item;
|
}
|
if (mapFields.length == 1) {
|
var mapField = mapFields[0];
|
if (mapField.indexOf("attribute.") > -1) {
|
temp = _item['attributes'][mapField.subString("attribute.".length)];
|
} else {
|
temp = _item['attributes'][mapField] || _item[mapField];
|
}
|
} else {
|
//有多个
|
var mutiTemp = [];
|
layui.each(mapFields, function (_indexField, _itemField) {
|
if (_itemField.indexOf("attribute.") > -1) {
|
mutiTemp.push(_item['attributes'][_itemField.subString("attribute.".length)]);
|
} else {
|
mutiTemp.push(_item['attributes'][_itemField] || _item[_itemField]);
|
}
|
});
|
temp = mutiTemp.join(' ');
|
}
|
if (temp != null && temp != '') {
|
value.push(temp);
|
}
|
})
|
this.formData[key] = value.join(',');
|
}
|
}
|
},
|
submitAttribute() {
|
const that = this;
|
let pass=true
|
if(this.formData.dataFlowType=='push' && (validatenull(this.formData.classifyName)||validatenull(this.formData.targetSystemName))){
|
that.$message.error('必填项不能为空');
|
pass=false
|
return;
|
}
|
if(this.formData.dataFlowType=='accept' && (validatenull(this.formData.sourceSystemName))){
|
that.$message.error('集成系统不能为空');
|
pass=false
|
return;
|
}
|
this.$refs.form.validateField(['paramType','returnType','dataFlowType','pushType','classPath','requestMethod','requestUrl',
|
'interfaceFunction','nameSpace','soapAction','targName','cxfaxis'],function (errormsg, field) {
|
if (errormsg) {
|
pass=false
|
}
|
})
|
this.$nextTick(function (){
|
if(pass){
|
that.formData.sysIntParamDTOs=this.formData.sysIntParamVOs.map(item=>{
|
return {
|
...item,
|
ordernNo:item.$index
|
}
|
})
|
that.formData.sysIntHeaderDTOS=this.formData.sysIntHeaderVOs.map(item=>{
|
return {
|
...item,
|
ordernNo:item.$index
|
}
|
})
|
add(that.formData).then(res => {
|
that.$message.success("保存成功");
|
that.showSubmitDialog = false;
|
this.$refs.form.resetFields();
|
this.formData = {
|
sysIntParamVOs: [],
|
sysIntHeaderVOs: []
|
};
|
that.$emit('refreshTable');
|
});
|
}
|
})
|
},
|
cancelSubmit() {
|
this.closeSubmitDialog();
|
},
|
// 异步获取字典数据
|
geDictData(dictKey, list) {
|
getDictionary({code: dictKey}).then((res) => {
|
if (res.data && res.data.code === 200) {
|
let dictData = (res.data.data || []).map((itm) => {
|
itm.value = itm.dictValue;
|
itm.key = itm.dictKey;
|
return itm;
|
});
|
list = dictData;
|
}
|
});
|
},
|
dataFlowTypeChange(value){
|
if(value=='push'){
|
this.pushTypeList=[{value: '1', label: '数据推送'},
|
{value: '2', label: '分类推送'}]
|
this.formData.pushType='1';
|
this.formData.sourceSystemName='编码系统';
|
this.formData.sourceSystemOid='code00000001';
|
this.formData.sourceSystemId='CODE';
|
this.formData.targetSystemName='';
|
this.formData.targetSystemOid='';
|
this.formData.targetSystemId='';
|
}else if(value=='accept'){
|
this.pushTypeList=[
|
{value: '3', label: '编码申请'},
|
{value: '4', label: '编码更改（状态、回收）'},
|
{value: '5', label: '分类查询'},
|
{value: '6', label: '含规则信息的分类查询'},
|
{value: '7', label: '数据查询'}]
|
this.formData.pushType='';
|
this.formData.targetSystemName='编码系统';
|
this.formData.targetSystemOid='code00000001';
|
this.formData.targetSystemId='CODE';
|
|
this.formData.sourceSystemName='';
|
this.formData.sourceSystemOid='';
|
this.formData.sourceSystemId='';
|
}else{
|
this.pushTypeList=[];
|
}
|
this.$refs.form.clearValidate()
|
},
|
pushTypeChange(value){
|
this.$refs.form.clearValidate()
|
},
|
tabClick(tab) {
|
if (tab.name === 'paramTab') {
|
this.$nextTick(function (){
|
this.$refs.paramcrud.doLayout()
|
})
|
} else {
|
this.$nextTick(function (){
|
this.$refs.headercrud.doLayout()
|
})
|
}
|
},
|
handleParamAdd() {
|
this.formData.sysIntParamVOs.push({
|
usedFlag: true,
|
$cellEdit:true
|
})
|
this.$nextTick(function (){
|
this.$refs.paramcrud.doLayout()
|
})
|
},
|
handleParamEditClick(row){
|
row.$cellEdit = true;
|
},
|
handleParamDel(row,index){
|
this.formData.sysIntParamVOs.splice(index, 1);
|
},
|
// 列表编辑保存
|
handleParamEditSave(row,index) {
|
row.$cellEdit = false;
|
},
|
handleHeaderAdd() {
|
this.formData.sysIntHeaderVOs.push({
|
usedFlag: true,
|
$cellEdit:true
|
})
|
this.$nextTick(function (){
|
this.$refs.headercrud.doLayout()
|
})
|
},
|
handleHeaderEditClick(row){
|
row.$cellEdit = true;
|
},
|
handleHeaderDel(row,index){
|
this.formData.sysIntHeaderVOs.splice(index, 1);
|
},
|
// 列表编辑保存
|
handleHeaderEditSave(row,index) {
|
row.$cellEdit = false;
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.btmTable>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu {
|
display: none !important;
|
}
|
|
.enumTable>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu {
|
display: none !important;
|
}
|
.dockingForm .el-form-item__label{width: 130px;}
|
.dockingForm .el-form-item__content,.dockingForm .el-form-item__content .el-input>.el-input__inner,.dockingForm .el-input-number--medium {
|
width: 300px !important;
|
}
|
.dockingForm .cell .el-form-item__content,.dockingForm .cell .el-form-item__content .el-input>.el-input__inner{
|
width :100% !important;
|
}
|
</style>
|
