TreeData
/
cloud-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

界面更新和功能优化 

-移除了`接口图片`上传组件的旧实现，并改用了新的`image-upload`组件。
- 注释掉了表单中的某些字段，这些字段可能稍后会重新启用。- 调整了API调用，以符合后端服务的最新要求。
- 修正了用户界面的布局问题，以提升视觉效果和用户体验。

此更改集对用户界面进行了现代化更新，优化了功能流程，并为系统的稳定性和性能提供了改进。
master
wxy 2024-09-08 16:44:28 +08:00
parent 0ed55a87e9
commit ed21cf43d1
1 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/port/port/index.vue
View File

@ -41,7 +41,7 @@
label="接口图片" label="接口图片"
width="180"> width="180">
<template slot-scope="scope"> <template slot-scope="scope">
<!-- <image-preview :src="scope.row.connectorPicture" width="50" height="50"/>--> <!-- <image-preview :src="scope.row.connectorPicture" width="50" height="50"/>-->
<el-image style="width: 100px; height: 100px" :src="scope.row.connectorPicture" :fit="fit"></el-image> <el-image style="width: 100px; height: 100px" :src="scope.row.connectorPicture" :fit="fit"></el-image>
</template> </template>
</el-table-column> </el-table-column>
@ -54,14 +54,6 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column
label="上架时间"
width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.connectorUptime }}</span>
</template>
</el-table-column>
<el-table-column <el-table-column
label="更新时间" label="更新时间"
width="180"> width="180">
@ -94,7 +86,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 新增接口--> <!-- 新增接口-->
<el-dialog title="新增接口" :visible.sync="dialogFormVisible"> <el-dialog title="新增接口" :visible.sync="dialogFormVisible">
<el-form :model="form"> <el-form :model="form">
<el-form-item label="接口名称" :label-width="formLabelWidth"> <el-form-item label="接口名称" :label-width="formLabelWidth">
@ -119,15 +111,22 @@
</el-form-item> </el-form-item>
<el-form-item label="接口图片" :label-width="formLabelWidth"> <el-form-item label="接口图片" :label-width="formLabelWidth">
<el-upload <image-upload v-model="formLabelAlign.connectorPicture" autocomplete="off"/>
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item> </el-form-item>
<!-- <el-form-item label="接口图片" :label-width="formLabelWidth">-->
<!-- <el-upload-->
<!-- action="https://jsonplaceholder.typicode.com/posts/"-->
<!-- list-type="picture-card"-->
<!-- :on-preview="handlePictureCardPreview"-->
<!-- :on-remove="handleRemove">-->
<!-- <i class="el-icon-plus"></i>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
<el-form-item label="公司" :label-width="formLabelWidth"> <el-form-item label="公司" :label-width="formLabelWidth">
<el-input v-model="formLabelAlign.connectorCompany" autocomplete="off"></el-input> <el-input v-model="formLabelAlign.connectorCompany" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
@ -173,21 +172,23 @@
<el-input v-model="formInline.connectorDescribe" autocomplete="off"></el-input> <el-input v-model="formInline.connectorDescribe" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="接口图片" :label-width="formLabelWidth"> <el-form-item label="接口图片" :label-width="formLabelWidth">
<el-input v-model="formInline.connectorPicture" autocomplete="off"></el-input> <image-upload v-model="formInline.connectorPicture" autocomplete="off"></image-upload>
</el-form-item> </el-form-item>
<el-form-item label="公司" :label-width="formLabelWidth"> <el-form-item label="公司" :label-width="formLabelWidth">
<el-input v-model="formInline.connectorCompany" autocomplete="off"></el-input> <el-input v-model="formInline.connectorCompany" autocomplete="off"></el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="剩余次数" :label-width="formLabelWidth">--> <!-- <el-form-item label="剩余次数" :label-width="formLabelWidth">-->
<!-- <el-input v-model="formInline.connectorResidueDegree" autocomplete="off"></el-input>--> <!-- <el-input v-model="formInline.connectorResidueDegree" autocomplete="off"></el-input>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<!-- <el-form-item label="购买次数" :label-width="formLabelWidth">--> <!-- <el-form-item label="购买次数" :label-width="formLabelWidth">-->
<!-- <el-input v-model="formInline.connectorFrequency" autocomplete="off"></el-input>--> <!-- <el-input v-model="formInline.connectorFrequency" autocomplete="off"></el-input>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="API_URL" :label-width="formLabelWidth"> <el-form-item label="API_URL" :label-width="formLabelWidth">
<el-input v-model="formInline.connectorApiurl" autocomplete="off"></el-input> <el-input v-model="formInline.connectorApiurl" autocomplete="off"></el-input>
@ -234,6 +235,7 @@ export default {
formInline:{}, formInline:{},
form:{}, form:{},
tableData:[], tableData:[],
formLabelWidth:180, //表单宽度
formLabelAlign:{}, formLabelAlign:{},
dialogFormVisible:false, dialogFormVisible:false,
dialogFormVisible1:false, dialogFormVisible1:false,
@ -259,25 +261,25 @@ export default {
this.dialogFormVisible1=true; this.dialogFormVisible1=true;
}, },
handleDelete(row){ handleDelete(row){
getDeleteConnector(row.connectorId).then((res)=>{ getDeleteConnector(row.connectorId).then((res)=> {
alert(res.msg); alert(res.msg);
if (200==res.code){ if (200 == res.code) {
this.findConnectorList(); this.findConnectorList();
} }
}) })
}, },
addConnector(){ addConnector() {
addConnector(this.formLabelAlign).then((res)=>{ addConnector(this.formLabelAlign).then((res) => {
alert(res.msg); alert(res.msg);
if (200==res.code){ if (200 == res.code) {
this.findConnectorList(); this.findConnectorList();
this.dialogFormVisible=false; this.dialogFormVisible = false;
} }
}) })
}, },
findConnectorList(){ findConnectorList() {
findConnectorList(this.form).then((res)=>{ findConnectorList(this.form).then((res) => {
this.tableData=res.data; this.tableData = res.data;
}) })
} }
}, },