ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 拓展图层资源配置的扩展字段设置

sy-water-data-board-ui
chenhaojie 1 year ago
parent
e7db1745b2
commit
6b22256b99
1 changed files with 224 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 304
      src/views/aiSupervision/layerManage/resource/LayerDetails.vue

304
src/views/aiSupervision/layerManage/resource/LayerDetails.vue
View File

@ -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>

Write Preview
Loading…
Cancel
Save