接口列表

src/api/port/port/index.js

@@ -14,3 +14,17 @@ export function findConnectorList(data) {
     data:data
   })
 }
+export function addConnector(data) {
+  return request({
+    url: '/mart/connector/addConnector',
+    method: 'post',
+    data:data
+  })
+}
+
+export function getDeleteConnector(connectorId) {
+  return request({
+    url: '/mart/connector/getDeleteConnector?connectorId='+connectorId,
+    method: 'get'
+  })
+}

src/views/port/port/index.vue

@@ -1,11 +1,13 @@
 <template>
+  <div>
+    <el-button icon="el-icon-plus" type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
     <el-table
       :data="tableData"
       style="width: 100%">
 
       <el-table-column
         label="id"
-      width="180">
+        width="100">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.connectorId }}</span>
         </template>
@@ -37,7 +39,7 @@
 
       <el-table-column
         label="公司"
-      width="180">
+        width="150">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.connectorCompany }}</span>
         </template>
@@ -53,7 +55,7 @@
 
       <el-table-column
         label="剩余次数"
-      width="180">
+        width="150">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.connectorResidueDegree }}</span>
         </template>
@@ -61,7 +63,7 @@
 
       <el-table-column
         label="购买次数"
-      width="180">
+        width="150">
         <template slot-scope="scope">
           <span style="margin-left: 10px">{{ scope.row.connectorFrequency }}</span>
         </template>
@@ -71,38 +73,77 @@
         label="状态"
         width="180">
         <template slot-scope="scope">
-        <span style="margin-left: 10px">{{ scope.row.connectorStatus }}</span>
+          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==0">审核中</span>
+          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==1">审核通过</span>
+          <span style="margin-left: 10px" v-if="scope.row.connectorStatus==2">审核失败</span>
         </template>
       </el-table-column>
 
       <el-table-column label="操作">
         <template slot-scope="scope">
           <el-button
+            icon="el-icon-pear"
             size="mini"
             @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
           <el-button
+            icon="el-icon-delete"
             size="mini"
             type="danger"
-          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+            @click="handleDelete(scope.row)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
+<!--  新增接口-->
+    <el-dialog title="新增接口" :visible.sync="dialogFormVisible">
+      <el-form :model="form">
+        <el-form-item label="接口名称" :label-width="formLabelWidth">
+          <el-input v-model="formLabelAlign.connectorName" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="接口描述" :label-width="formLabelWidth">
+          <el-input v-model="formLabelAlign.connectorDescribe" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="接口图片" :label-width="formLabelWidth">
+          <el-input v-model="formLabelAlign.connectorPicture" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="公司" :label-width="formLabelWidth">
+          <el-input v-model="formLabelAlign.connectorCompany" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="剩余次数" :label-width="formLabelWidth">
+          <el-input v-model="formLabelAlign.connectorResidueDegree" autocomplete="off"></el-input>
+        </el-form-item>
+
+        <el-form-item label="购买次数" :label-width="formLabelWidth">
+          <el-input v-model="formLabelAlign.connectorFrequency" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="addConnector">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
 //例如：import 《组件名称》 from '《组件路径》,
 import {findConnectorList} from "@/api/port/port";
+import {addConnector} from "@/api/port/port";
+import {getDeleteConnector} from "@/api/port/port";
 export default {
   //import引入的组件需要注入到对象中才能使用"
   components: {},
   props: {},
   data() {
     //这里存放数据"
-
     return {
       form:{},
       tableData:[],
+      formLabelAlign:{},
+      dialogFormVisible:false,
     };
   },
   //计算属性 类似于data概念",
@@ -111,6 +152,23 @@ export default {
   watch: {},
   //方法集合",
   methods: {
+    handleDelete(row){
+      getDeleteConnector(row.connectorId).then((res)=>{
+        alert(res.msg);
+        if (200==res.code){
+          this.findConnectorList();
+        }
+      })
+    },
+    addConnector(){
+      addConnector(this.formLabelAlign).then((res)=>{
+        alert(res.msg);
+        if (200==res.code){
+          this.findConnectorList();
+          this.dialogFormVisible=false;
+        }
+      })
+    },
     findConnectorList(){
       findConnectorList(this.form).then((res)=>{
         this.tableData=res.data;