From 3661954b1a65d7629b94e2042639aa6738a6fb5d Mon Sep 17 00:00:00 2001
From: chaiyapeng <3535863041@qq.com>
Date: Tue, 3 Sep 2024 20:17:55 +0800
Subject: [PATCH] =?UTF-8?q?API=E5=B8=83=E5=B1=80=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/port/port/employee.vue | 324 ++++++++++++++++---------------
 1 file changed, 172 insertions(+), 152 deletions(-)

diff --git a/src/views/port/port/employee.vue b/src/views/port/port/employee.vue
index 2dba47e..040f635 100644
--- a/src/views/port/port/employee.vue
+++ b/src/views/port/port/employee.vue
@@ -1,104 +1,120 @@
 <template>
   <div>
-<!--    <el-button type="primary">+申请新数据</el-button>-->
-    <el-form label-width="40px" :model="form">
-      <el-form-item>
-        <input v-model="form.connectorName" style="padding: 10px 10px;float: initial">
-        <button @click="findApiList" style="padding: 10px 10px">查询</button>
-        <span style="font-weight: bold;font-size: 20px;">全部类型：</span>
-        <el-button style="font-weight: bold;font-size: 20px;" type="text">电子商务</el-button>
-        <el-button style="font-weight: bold;font-size: 20px;" type="text">应用开发</el-button>
-        <el-button style="font-weight: bold;font-size: 20px;" type="text">生活服务</el-button>
-      </el-form-item>
-    </el-form>
-    <el-row :gutter="50">
-      <el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
-        <el-card class="box-card" style="margin-top: 15px;width: 500px; height: 600px;" shadow="hover">
-          <div slot="header" class="clearfix">
-            <h1 style="font-weight: bold">{{connector.connectorName}}</h1>
-            <el-button type="primary" style="float: right; padding: 10px 10px" @click="buy(connector)">购买</el-button>
-          </div>
-          <span style="font-weight: bold;font-size: 20px">产品图片:</span><br>
-          <el-image style="width: 300px; height: 300px" :src="connector.connectorPicture" :fit="fit"></el-image><br>
-          <span style="font-weight: bold;font-size: 20px">产品介绍：</span>
-          {{connector.connectorDescribe}}<br>
-          <span style="font-weight: bold;font-size: 20px">价格：</span>
-          {{connector.connectorPrice}}/次<br>
+    <el-container style="height: 1000px; border: 1px solid #eee">
+      <el-aside width="180px">
+        <el-menu :default-openeds="['1', '3']">
+          <el-menu-item-group>
+            <span style="font-weight: bold;font-size: 25px;">全部类型：</span>
+          </el-menu-item-group>
+          <el-menu-item-group>
+            <el-link type="primary" style="font-weight: bold;font-size: 20px;">电子商务</el-link>
+          </el-menu-item-group>
+          <el-menu-item-group>
+            <el-link type="primary" style="font-weight: bold;font-size: 20px;">应用开发</el-link>
+          </el-menu-item-group>
+          <el-menu-item-group>
+            <el-link type="primary" style="font-weight: bold;font-size: 20px;">生活服务</el-link>
+          </el-menu-item-group>
+        </el-menu>
+      </el-aside>
 
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">测试API</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">测试API</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">测试API</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">测试API</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>
-          <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>
-        </el-card>
-      </el-col>
-    </el-row>
-<!--    手机号查询归属地-->
-    <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
-      <el-form :model="formInline">
-        <el-form-item label="手机号" :label-width="formLabelWidth">
-          <el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
-        </el-form-item>
-        <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
+      <el-container>
+        <el-main>
+          <el-form label-width="40px" :model="form">
+            <el-form-item>
+              <input v-model="form.connectorName" style="padding: 10px 10px;float: initial" placeholder=请输入关键字>
+              <el-button @click="findApiList" style="padding: 10px 10px">查询</el-button>
+
+            </el-form-item>
+          </el-form>
+          <el-row :gutter="50">
+            <el-col :span="7" v-for="connector in connectorList" :key="connector.connectorId" v-if="connectorList.length !== 0">
+              <el-card class="box-card" style="margin-top: 15px;width: 450px; height: 600px;" shadow="hover">
+                <div slot="header" class="clearfix">
+                  <h1 style="font-weight: bold">{{connector.connectorName}}</h1>
+                  <el-button type="primary" style="float: right; padding: 10px 10px" @click="buy(connector)">购买</el-button>
+                </div>
+                <span style="font-weight: bold;font-size: 20px">产品图片:</span><br>
+                <el-image style="width: 300px; height: 300px" :src="connector.connectorPicture" :fit="fit"></el-image><br>
+                <span style="font-weight: bold;font-size: 20px">产品介绍：</span>
+                {{connector.connectorDescribe}}<br>
+                <span style="font-weight: bold;font-size: 20px">价格：</span>
+                {{connector.connectorPrice}}/次<br>
+
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="connector.connectorName=='手机号查询归属地'">测试API</el-button>
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">测试API</el-button>
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">测试API</el-button>
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">测试API</el-button>
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>
+                <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>
+              </el-card>
+            </el-col>
+          </el-row>
+          <!--    手机号查询归属地-->
+          <el-dialog title="手机查询归属地" :visible.sync="dialogFormVisible">
+            <el-form :model="formInline">
+              <el-form-item label="手机号" :label-width="formLabelWidth">
+                <el-input v-model="formInline.tel" autocomplete="off" placeholder="请输入手机号"></el-input>
+              </el-form-item>
+              <span style="font-weight: bold;font-size: 20px" v-if="formInline.reason==true">
         省份：{{this.formInline.province}}<br>
         城市：{{this.formInline.city}}<br>
         区号：{{this.formInline.areacode}}<br>
         邮编：{{this.formInline.zip}}<br>
         运营商：{{this.formInline.company}}<br>
         </span>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="phonePlace()">发起请求</el-button>
-      </div>
-    </el-dialog>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="phonePlace()">发起请求</el-button>
+            </div>
+          </el-dialog>
 
-    <!--IP查询归属地-->
-    <el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
-      <el-form :model="formIp">
-        <el-form-item label="IP" >
-          <el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
-        </el-form-item>
-        <span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
+          <!--IP查询归属地-->
+          <el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
+            <el-form :model="formIp">
+              <el-form-item label="IP" >
+                <el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
+              </el-form-item>
+              <span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
         国家：{{this.formIp.country}}<br>
         省份：{{this.formIp.province}}<br>
         城市：{{this.formIp.city}}<br>
         运营商：{{this.formIp.isp}}<br>
         </span>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="getIpPlace()">发起请求</el-button>
-      </div>
-    </el-dialog>
-<!--    新闻头条-->
-    <el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
-      <el-table :data="gridData">
-        <el-table-column property="title" label="新闻标题" width="150"></el-table-column>
-        <el-table-column property="date" label="新闻时间" width="200"></el-table-column>
-        <el-table-column property="category" label="新闻分类"></el-table-column>
-        <el-table-column property="authorName" label="新闻来源"></el-table-column>
-      </el-table>
-    </el-dialog>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="getIpPlace()">发起请求</el-button>
+            </div>
+          </el-dialog>
+          <!--    新闻头条-->
+          <el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
+            <el-table :data="gridData">
+              <el-table-column property="title" label="新闻标题" width="150"></el-table-column>
+              <el-table-column property="date" label="新闻时间" width="200"></el-table-column>
+              <el-table-column property="category" label="新闻分类"></el-table-column>
+              <el-table-column property="authorName" label="新闻来源"></el-table-column>
+            </el-table>
+          </el-dialog>
 
-    <!--生辰助手-->
-    <el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
-      <el-form :model="formBirthday">
-        <el-form-item label="年" >
-          <el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
-        </el-form-item>
+          <!--生辰助手-->
+          <el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
+            <el-form :model="formBirthday">
+              <el-form-item label="年" >
+                <el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
+              </el-form-item>
 
-        <el-form-item label="月" >
-          <el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
-        </el-form-item>
+              <el-form-item label="月" >
+                <el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
+              </el-form-item>
 
-        <el-form-item label="日" >
-          <el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
-        </el-form-item>
+              <el-form-item label="日" >
+                <el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
+              </el-form-item>
 
-        <el-form-item label="时" >
-          <el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
-        </el-form-item>
-        <span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
+              <el-form-item label="时" >
+                <el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
+              </el-form-item>
+              <span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
          years： {{this.formBirthday.years}}<br>
          months： {{this.formBirthday.months}}<br>
          days： {{this.formBirthday.days}}<br>
@@ -119,87 +135,91 @@
          eightall： {{this.formBirthday.eightall}}<br>
          fiveall： {{this.formBirthday.fiveall}}
         </span>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="getBirthday()">发起请求</el-button>
-      </div>
-    </el-dialog>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="getBirthday()">发起请求</el-button>
+            </div>
+          </el-dialog>
 
-    <!--邮编查询-->
-    <el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
-      <el-form :model="formPostCode">
-        <el-form-item label="邮编" >
-          <el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
-        </el-form-item>
-        <el-table :data="gridData2" v-if="formPostCode.reason==true">
-          <el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
-          <el-table-column property="province" label="省" width="200"></el-table-column>
-          <el-table-column property="city" label="市"></el-table-column>
-          <el-table-column property="district" label="区"></el-table-column>
-          <el-table-column property="address" label="县"></el-table-column>
-        </el-table>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="getPostcode()">发起请求</el-button>
-      </div>
-    </el-dialog>
+          <!--邮编查询-->
+          <el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
+            <el-form :model="formPostCode">
+              <el-form-item label="邮编" >
+                <el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
+              </el-form-item>
+              <el-table :data="gridData2" v-if="formPostCode.reason==true">
+                <el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
+                <el-table-column property="province" label="省" width="200"></el-table-column>
+                <el-table-column property="city" label="市"></el-table-column>
+                <el-table-column property="district" label="区"></el-table-column>
+                <el-table-column property="address" label="县"></el-table-column>
+              </el-table>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="getPostcode()">发起请求</el-button>
+            </div>
+          </el-dialog>
 
-    <!--    气象预警-->
-    <el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
-        <el-aside width="100%">
-          <el-tree :data="data" :props="defaultProps">
-            <template slot-scope="{data,node}">
-              <span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
-            </template>
-          </el-tree>
-        </el-aside>
-    </el-dialog>
-<!--  购买-->
-    <el-dialog title="购买API" :visible.sync="dialogFormVisible5">
-      <el-form :model="buyForm">
-        <el-form-item label="产品编号" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+          <!--    气象预警-->
+          <el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
+            <el-aside width="100%">
+              <el-tree :data="data" :props="defaultProps">
+                <template slot-scope="{data,node}">
+                  <span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
+                </template>
+              </el-tree>
+            </el-aside>
+          </el-dialog>
+          <!--  购买-->
+          <el-dialog title="购买API" :visible.sync="dialogFormVisible5">
+            <el-form :model="buyForm">
+              <el-form-item label="产品编号" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorId" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="产品名称" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+              <el-form-item label="产品名称" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorName" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="产品介绍" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+              <el-form-item label="产品介绍" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorDescribe" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="产品价格" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+              <el-form-item label="产品价格" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorPrice" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="产品公司" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+              <el-form-item label="产品公司" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorCompany" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="API_URL" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+              <el-form-item label="API_URL" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorApiurl" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="API_EYE" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+              <el-form-item label="API_EYE" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorApikey" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="请求方式" :label-width="formLabelWidth">
-          <el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
-        </el-form-item>
+              <el-form-item label="请求方式" :label-width="formLabelWidth">
+                <el-input v-model="buyForm.connectorRequest" disabled autocomplete="off" readonly></el-input>
+              </el-form-item>
 
-        <el-form-item label="购买次数" :label-width="formLabelWidth">
-          <el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
-        </el-form-item>
-        <p style="font-weight: bold;font-size: 20px">余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
-        <span style="font-weight: bold;font-size: 20px">共计：{{buyForm.connectorPrice*buyForm.connectorFrequency}}元</span>
+              <el-form-item label="购买次数" :label-width="formLabelWidth">
+                <el-input-number v-model="buyForm.connectorFrequency" controls-position="right" @change="handleChange" :min="1"></el-input-number>
+              </el-form-item>
+              <p style="font-weight: bold;font-size: 20px">余额：{{ userBalanceData.userBalance || '加载中...' }}</p>
+              <span style="font-weight: bold;font-size: 20px">共计：{{buyForm.connectorPrice*buyForm.connectorFrequency}}元</span>
 
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="buyInterface()">购 买</el-button>
-      </div>
-    </el-dialog>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+              <el-button type="primary" @click="buyInterface()">购 买</el-button>
+            </div>
+          </el-dialog>
+        </el-main>
+      </el-container>
+    </el-container>
+<!--    <el-button type="primary">+申请新数据</el-button>-->
 
   </div>
 </template>