|
|
|
@ -17,207 +17,88 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="middle"> |
|
|
|
<el-button type="primary" plain @click="dialogFormVisible = true" |
|
|
|
>添加图层</el-button |
|
|
|
> |
|
|
|
<el-button type="primary" plain @click="dialogFormVisible = true">添加图层</el-button> |
|
|
|
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible"> |
|
|
|
<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-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 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 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 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 |
|
|
|
label="服务token" |
|
|
|
prop="serviceToken" |
|
|
|
style="font-size: 1rem" |
|
|
|
:label-width="'120px'" |
|
|
|
> |
|
|
|
<el-input |
|
|
|
v-model.trim="editDataInfoForm.serviceToken" |
|
|
|
style="width: 80%" |
|
|
|
></el-input> |
|
|
|
<el-form-item label="服务token" prop="serviceToken" style="font-size: 1rem" :label-width="'120px'"> |
|
|
|
<el-input v-model.trim="editDataInfoForm.serviceToken" 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 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'" |
|
|
|
> |
|
|
|
<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-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 |
|
|
|
> |
|
|
|
<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> |
|
|
|
<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 |
|
|
|
> |
|
|
|
<el-button type="primary" class="btn" @click="addRow">添加</el-button> |
|
|
|
<el-button type="danger" class="btn" @click="deleteRow">删除</el-button> |
|
|
|
</div> |
|
|
|
<el-table |
|
|
|
max-height="400px" |
|
|
|
:data="extendTable" |
|
|
|
border |
|
|
|
@selection-change="handleSelectionChange" |
|
|
|
> |
|
|
|
<el-table-column |
|
|
|
type="selection" |
|
|
|
width="50" |
|
|
|
align="center" |
|
|
|
></el-table-column> |
|
|
|
<el-table max-height="400px" :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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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 |
|
|
|
> |
|
|
|
<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> |
|
|
|
@ -225,22 +106,13 @@ |
|
|
|
<el-tab-pane label="字段配置" v-if="showFieldExtend()" name="3"> |
|
|
|
<div class="field-box"> |
|
|
|
<div class="field-filter"> |
|
|
|
<el-input |
|
|
|
class="keyword-input" |
|
|
|
placeholder="请输入搜索字段" |
|
|
|
v-model="fieldValue" |
|
|
|
clearable |
|
|
|
> |
|
|
|
<el-input class="keyword-input" placeholder="请输入搜索字段" v-model="fieldValue" clearable> |
|
|
|
</el-input> |
|
|
|
<el-button class="search-btn">搜索</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-table max-height="400px" :data="fieldsTable" border> |
|
|
|
<el-table-column |
|
|
|
type="index" |
|
|
|
width="50" |
|
|
|
align="center" |
|
|
|
></el-table-column> |
|
|
|
<el-table-column type="index" width="50" align="center"></el-table-column> |
|
|
|
<el-table-column prop="field" label="字段名称"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="fieldName" label="字段别名"> |
|
|
|
@ -250,18 +122,9 @@ |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="fieldType" label="字段类型"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column |
|
|
|
prop="isShow" |
|
|
|
label="支持查询" |
|
|
|
width="80" |
|
|
|
align="center" |
|
|
|
> |
|
|
|
<el-table-column prop="isShow" label="支持查询" width="80" align="center"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-checkbox |
|
|
|
v-model="scope.row.isShow" |
|
|
|
:true-label="1" |
|
|
|
:false-label="0" |
|
|
|
></el-checkbox> |
|
|
|
<el-checkbox v-model="scope.row.isShow" :true-label="1" :false-label="0"></el-checkbox> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
@ -270,34 +133,20 @@ |
|
|
|
|
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button @click="dialogFormVisible = false">取 消</el-button> |
|
|
|
<el-button type="primary" @click="saveOrUpdateLayer" |
|
|
|
>确 定</el-button |
|
|
|
> |
|
|
|
<el-button type="primary" @click="saveOrUpdateLayer">确 定</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
<div class="keyword-filter"> |
|
|
|
<el-input |
|
|
|
class="keyword-input" |
|
|
|
placeholder="请输入内容" |
|
|
|
v-model="keyword" |
|
|
|
clearable |
|
|
|
> |
|
|
|
<el-input class="keyword-input" placeholder="请输入内容" v-model="keyword" clearable> |
|
|
|
</el-input> |
|
|
|
<el-button class="search-btn">搜索</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<el-table :data="tableData" stripe style="width: 100%"> |
|
|
|
<el-table-column |
|
|
|
type="index" |
|
|
|
:index=" |
|
|
|
(index) => |
|
|
|
index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1 |
|
|
|
" |
|
|
|
label="序号" |
|
|
|
width="50" |
|
|
|
header-align="center" |
|
|
|
></el-table-column> |
|
|
|
<el-table-column type="index" :index="(index) => |
|
|
|
index + (pageOptions.pageNum - 1) * pageOptions.pageSize + 1 |
|
|
|
" label="序号" width="50" header-align="center"></el-table-column> |
|
|
|
<el-table-column prop="id" label="图层资源目录编号" width="350"> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column prop="serviceName" label="图层资源目录名称"> |
|
|
|
@ -306,28 +155,13 @@ |
|
|
|
<el-table-column prop="createUser" label="创建人"> </el-table-column> |
|
|
|
<el-table-column label="操作"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<el-button |
|
|
|
size="mini" |
|
|
|
@click="handleEdit(scope.$index, scope.row)" |
|
|
|
>编辑</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
size="mini" |
|
|
|
type="danger" |
|
|
|
@click="handleDelete(scope.row)" |
|
|
|
>删除</el-button |
|
|
|
> |
|
|
|
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> |
|
|
|
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<el-pagination |
|
|
|
background |
|
|
|
layout="prev, pager, next" |
|
|
|
:current-page.sync="pageOptions.pageNum" |
|
|
|
:total="pageOptions.total" |
|
|
|
:page-size="pageOptions.pageSize" |
|
|
|
@current-change="getLayerList" |
|
|
|
> |
|
|
|
<el-pagination background layout="prev, pager, next" :current-page.sync="pageOptions.pageNum" |
|
|
|
:total="pageOptions.total" :page-size="pageOptions.pageSize" @current-change="getLayerList"> |
|
|
|
</el-pagination> |
|
|
|
</div> |
|
|
|
</el-container> |
|
|
|
@ -518,12 +352,12 @@ export default { |
|
|
|
}); |
|
|
|
}, |
|
|
|
async saveOrUpdateLayer() { |
|
|
|
const reg = /^(\w|[\u4e00-\u9fa5]){3,30}$/g; |
|
|
|
const reg = /^(?=.{1,30}$)[\u4e00-\u9fa5\w:]+$/; |
|
|
|
if (!reg.test(this.editDataInfoForm.serviceName)) { |
|
|
|
this.$message({ |
|
|
|
type: "info", |
|
|
|
message: |
|
|
|
"格式有误，目录名称仅支持中文、数字、字母、下划线，最大长度不超过30", |
|
|
|
"格式有误，目录名称仅支持中文、数字、字母、下划线、冒号，最大长度不超过30", |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
@ -671,29 +505,35 @@ export default { |
|
|
|
flex-direction: column; |
|
|
|
gap: 15px; |
|
|
|
} |
|
|
|
|
|
|
|
header, |
|
|
|
.el-container, |
|
|
|
aside { |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
header { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
border-radius: 10px; |
|
|
|
gap: 10px; |
|
|
|
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; |
|
|
|
|
|
|
|
.el-icon-back { |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: rgb(135, 231, 140); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
color: #999; |
|
|
|
font-style: italic; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-container { |
|
|
|
flex: 1; |
|
|
|
overflow-y: auto; |
|
|
|
@ -704,6 +544,7 @@ header { |
|
|
|
padding-top: 5px; |
|
|
|
border-radius: 3px; |
|
|
|
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; |
|
|
|
|
|
|
|
.top { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -711,19 +552,23 @@ header { |
|
|
|
padding: 20px 40px; |
|
|
|
width: 100%; |
|
|
|
border-bottom: 2px solid #d9d9d9; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-weight: bold; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.directoryInfo { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: 1fr 1fr 1fr; |
|
|
|
grid-gap: 5px 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.middle { |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.keyword-filter { |
|
|
|
display: flex; |
|
|
|
border-radius: 4px; |
|
|
|
@ -732,14 +577,17 @@ header { |
|
|
|
::v-deep .el-input__inner { |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
border: none; |
|
|
|
border-radius: 0px; |
|
|
|
border-left: 1px solid #d9d9d9; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.styleBtn { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.style-button-none { |
|
|
|
color: #4b535e; |
|
|
|
background: #fff; |
|
|
|
@ -747,21 +595,25 @@ header { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 10px; |
|
|
|
justify-content: space-between; |
|
|
|
flex: 1; |
|
|
|
|
|
|
|
.el-pagination { |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-dialog { |
|
|
|
.field-box { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-end; |
|
|
|
|
|
|
|
.field-filter { |
|
|
|
width: 400px; |
|
|
|
margin-bottom: 16px; |
|
|
|
@ -772,6 +624,7 @@ header { |
|
|
|
::v-deep .el-input__inner { |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
.search-btn { |
|
|
|
border: none; |
|
|
|
border-radius: 0px; |
|
|
|
@ -779,6 +632,7 @@ header { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.fn-btns { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
panyuyi
9 months ago