|
|
|
@ -19,70 +19,134 @@ |
|
|
|
<div class="middle"> |
|
|
|
<el-button type="primary" plain @click="dialogFormVisible = true">添加图层</el-button> |
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible"> |
|
|
|
<el-form :model="editDataInfoForm"> |
|
|
|
<el-form-item label="服务类型" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-select style="width: 80%" v-model="editDataInfoForm.serviceType" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in serviceTypeOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-tabs v-model="activeName" type="card"> |
|
|
|
<el-tab-pane label="基础字段" name="1"> |
|
|
|
<el-form :model="editDataInfoForm"> |
|
|
|
<el-form-item label="服务类型" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-select style="width: 80%" v-model="editDataInfoForm.serviceType" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in serviceTypeOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
<el-form-item label="服务名称" prop="serviceName" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-input v-model.trim="editDataInfoForm.serviceName" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="服务别名" prop="serviceNameAlias" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-input v-model.trim="editDataInfoForm.serviceNameAlias" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="服务地址" prop="serviceUrl" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-input v-model.trim="editDataInfoForm.serviceUrl" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-if="editDataInfoForm.serviceType === '030300'" |
|
|
|
label="服务索引" |
|
|
|
prop="serviceIndex" |
|
|
|
style="font-size: 1rem" |
|
|
|
:label-width="'120px'" |
|
|
|
> |
|
|
|
<el-input v-model="editDataInfoForm.serviceIndex" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-show="['030300'].includes(editDataInfoForm.serviceType)" |
|
|
|
label="样式选择" |
|
|
|
style="font-size: 1rem" |
|
|
|
:label-width="'120px'" |
|
|
|
> |
|
|
|
<div class="styleBtn"> |
|
|
|
<el-tag |
|
|
|
type="info" |
|
|
|
effect="plain" |
|
|
|
class="style-button" |
|
|
|
:class="{ 'style-button-none': editDataInfoForm.relationStyleName }" |
|
|
|
@click="handleLayerStyleTypeChange" |
|
|
|
<el-form-item label="服务名称" prop="serviceName" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-input v-model.trim="editDataInfoForm.serviceName" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="服务别名" prop="serviceNameAlias" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-input v-model.trim="editDataInfoForm.serviceNameAlias" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="服务地址" prop="serviceUrl" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-input v-model.trim="editDataInfoForm.serviceUrl" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-if="editDataInfoForm.serviceType === '030300'" |
|
|
|
label="服务索引" |
|
|
|
prop="serviceIndex" |
|
|
|
style="font-size: 1rem" |
|
|
|
:label-width="'120px'" |
|
|
|
> |
|
|
|
{{ editDataInfoForm.relationStyleName ? editDataInfoForm.relationStyleName : '点击选择样式' }} |
|
|
|
</el-tag> |
|
|
|
<el-button |
|
|
|
style="margin-left: 15px" |
|
|
|
:disabled="editDataInfoForm.relationStyleName === ''" |
|
|
|
@click=" |
|
|
|
editDataInfoForm.relationStyleName = ''; |
|
|
|
editDataInfoForm.relationStyleId = ''; |
|
|
|
" |
|
|
|
>取消选择样式</el-button |
|
|
|
<el-input v-model="editDataInfoForm.serviceIndex" style="width: 80%"></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-show="['030300'].includes(editDataInfoForm.serviceType)" |
|
|
|
label="样式选择" |
|
|
|
style="font-size: 1rem" |
|
|
|
:label-width="'120px'" |
|
|
|
> |
|
|
|
<div class="styleBtn"> |
|
|
|
<el-tag |
|
|
|
type="info" |
|
|
|
effect="plain" |
|
|
|
class="style-button" |
|
|
|
:class="{ 'style-button-none': editDataInfoForm.relationStyleName }" |
|
|
|
@click="handleLayerStyleTypeChange" |
|
|
|
> |
|
|
|
{{ editDataInfoForm.relationStyleName ? editDataInfoForm.relationStyleName : '点击选择样式' }} |
|
|
|
</el-tag> |
|
|
|
<el-button |
|
|
|
style="margin-left: 15px" |
|
|
|
:disabled="editDataInfoForm.relationStyleName === ''" |
|
|
|
@click=" |
|
|
|
editDataInfoForm.relationStyleName = ''; |
|
|
|
editDataInfoForm.relationStyleId = ''; |
|
|
|
" |
|
|
|
>取消选择样式</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<styleListDialogVue |
|
|
|
:visible="styleDialogVisible" |
|
|
|
:$currentStyleId="editDataInfoForm.relationStyleId" |
|
|
|
@closeDialog="styleDialogVisible = false" |
|
|
|
@confirm="handleConfirm" |
|
|
|
></styleListDialogVue> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="扩展字段" name="2"> |
|
|
|
<div class="fn-btns"> |
|
|
|
<el-button type="primary" class="btn" @click="addRow">添加</el-button> |
|
|
|
<el-button type="danger" class="btn" @click="deleteRow">删除</el-button> |
|
|
|
</div> |
|
|
|
<styleListDialogVue |
|
|
|
:visible="styleDialogVisible" |
|
|
|
:$currentStyleId="editDataInfoForm.relationStyleId" |
|
|
|
@closeDialog="styleDialogVisible = false" |
|
|
|
@confirm="handleConfirm" |
|
|
|
></styleListDialogVue> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<el-table :data="extendTable" border @selection-change="handleSelectionChange"> |
|
|
|
<el-table-column type="selection" width="50" align="center"></el-table-column> |
|
|
|
<el-table-column prop="field" label="字段名称"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-input v-model="scope.row.field" :disabled="!scope.row.isEdit"></el-input> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="alias" label="别名"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-input v-model="scope.row.alias" :disabled="!scope.row.isEdit"></el-input> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="value" label="字段值"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-input v-model="scope.row.value" :disabled="!scope.row.isEdit"></el-input> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column label="操作" width="200"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
v-if="scope.row.isEdit" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-success" |
|
|
|
size="mini" |
|
|
|
@click="saveRow(scope.$index)" |
|
|
|
>保存</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
v-if="scope.row.isEdit" |
|
|
|
type="warning" |
|
|
|
icon="el-icon-error" |
|
|
|
size="mini" |
|
|
|
@click="cancelRow(scope.$index)" |
|
|
|
>取消</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
v-if="!scope.row.isEdit" |
|
|
|
type="primary" |
|
|
|
icon="el-icon-edit" |
|
|
|
size="mini" |
|
|
|
@click="editRow(scope.$index)" |
|
|
|
>编辑</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
v-if="!scope.row.isEdit" |
|
|
|
type="danger" |
|
|
|
icon="el-icon-delete-solid" |
|
|
|
size="mini" |
|
|
|
@click="deleteRow(scope.$index)" |
|
|
|
>删除</el-button |
|
|
|
> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-tab-pane> |
|
|
|
</el-tabs> |
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|
|
|
@ -188,9 +252,32 @@ export default { |
|
|
|
}, |
|
|
|
dialogFormVisible: false, //是否显示对话框 |
|
|
|
keyword: '', |
|
|
|
styleDialogVisible: false //是否显示样式选择对话框 |
|
|
|
styleDialogVisible: false, //是否显示样式选择对话框 |
|
|
|
activeName: '1', |
|
|
|
extendTable: [], |
|
|
|
multipleSelection: [] |
|
|
|
}; |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
keyword() { |
|
|
|
this.debouncedGetLayerList(); |
|
|
|
}, |
|
|
|
dialogFormVisible(val) { |
|
|
|
if (val === false) { |
|
|
|
this.initData(); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 使用 lodash 的 debounce 函数创建防抖版本 |
|
|
|
this.debouncedGetLayerList = debounce(this.getLayerList, 500); |
|
|
|
|
|
|
|
getDirectoryByIdApi(this.$route.query.id).then((res) => { |
|
|
|
this.directoryInfo = res.data.children[0]; |
|
|
|
this.initData(); |
|
|
|
this.getLayerList(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
goBack() { |
|
|
|
this.$router.go(-1); |
|
|
|
@ -204,6 +291,7 @@ export default { |
|
|
|
this.editDataInfoForm.serviceIndex = row.serviceIndex; |
|
|
|
this.editDataInfoForm.relationStyleId = row.relationStyleId; |
|
|
|
this.editDataInfoForm.relationStyleName = row.relationStyleName; |
|
|
|
this.extendTable = (row.extendData && JSON.parse(row.extendData)) || []; |
|
|
|
this.dialogTitle = '编辑图层'; |
|
|
|
this.dialogFormVisible = true; |
|
|
|
}, |
|
|
|
@ -259,7 +347,11 @@ export default { |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
await saveOrUpdateLayerApi(this.editDataInfoForm); |
|
|
|
const params = { |
|
|
|
...this.editDataInfoForm, |
|
|
|
extendData: JSON.stringify(this.extendTable) |
|
|
|
}; |
|
|
|
await saveOrUpdateLayerApi(params); |
|
|
|
this.getLayerList(); |
|
|
|
this.dialogFormVisible = false; |
|
|
|
}, |
|
|
|
@ -284,26 +376,73 @@ export default { |
|
|
|
this.editDataInfoForm.dirNames = this.directoryInfo.name; |
|
|
|
this.editDataInfoForm.tileSize = '256'; |
|
|
|
this.dialogTitle = '添加图层'; |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 使用 lodash 的 debounce 函数创建防抖版本 |
|
|
|
this.debouncedGetLayerList = debounce(this.getLayerList, 500); |
|
|
|
|
|
|
|
getDirectoryByIdApi(this.$route.query.id).then((res) => { |
|
|
|
this.directoryInfo = res.data.children[0]; |
|
|
|
this.initData(); |
|
|
|
this.getLayerList(); |
|
|
|
}); |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
keyword() { |
|
|
|
this.debouncedGetLayerList(); |
|
|
|
}, |
|
|
|
dialogFormVisible(val) { |
|
|
|
if (val === false) { |
|
|
|
this.initData(); |
|
|
|
addRow() { |
|
|
|
const editRow = this.extendTable.find((item) => item.isEdit); |
|
|
|
if (editRow) { |
|
|
|
this.$message({ |
|
|
|
type: 'info', |
|
|
|
message: '请先保存当前编辑行' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.extendTable.push({ |
|
|
|
id: '', |
|
|
|
field: '', |
|
|
|
alias: '', |
|
|
|
value: '', |
|
|
|
isEdit: true |
|
|
|
}); |
|
|
|
}, |
|
|
|
deleteRow(index) { |
|
|
|
this.$messageBox |
|
|
|
.confirm('是否删除该行数据?', '提示', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
if (index !== undefined) { |
|
|
|
this.extendTable.splice(index, 1); |
|
|
|
} else { |
|
|
|
this.extendTable = this.extendTable.filter((item) => !this.multipleSelection.includes(item)); |
|
|
|
} |
|
|
|
}) |
|
|
|
.catch(() => { |
|
|
|
this.$message({ |
|
|
|
type: 'info', |
|
|
|
message: '已取消删除' |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
editRow(index) { |
|
|
|
this.extendTable[index].isEdit = true; |
|
|
|
}, |
|
|
|
cancelRow(index) { |
|
|
|
if (!this.extendTable[index].id) { |
|
|
|
this.extendTable.splice(index, 1); |
|
|
|
} else { |
|
|
|
this.extendTable[index].isEdit = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
saveRow(index) { |
|
|
|
if (!this.extendTable[index].id) { |
|
|
|
this.extendTable[index].id = sycim.Cesium.createGuid(); |
|
|
|
} |
|
|
|
// 表格名字校验不重复 |
|
|
|
const name = this.extendTable[index].field; |
|
|
|
const isRepeat = this.extendTable.some((item, i) => item.field === name && i !== index); |
|
|
|
if (isRepeat) { |
|
|
|
this.$message({ |
|
|
|
type: 'info', |
|
|
|
message: '字段名称重复，请重新输入' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.extendTable[index].isEdit = false; |
|
|
|
}, |
|
|
|
handleSelectionChange(val) { |
|
|
|
this.multipleSelection = val; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
@ -402,4 +541,9 @@ header { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.el-dialog { |
|
|
|
.fn-btns { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
panyuyi
1 year ago