API收费建表、部分优化

src/api/app/access.js

@@ -24,3 +24,11 @@ export function appResetAccess(accessId) {
     method: 'put'
   })
 }
+
+// 删除密钥对
+export function mchDelAccess(accessId) {
+  return request({
+    url: `/app/access/${accessId}`,
+    method: 'delete'
+  })
+}

src/assets/icons/svg/bank.svg

@@ -1 +1 @@
-<svg t="1723084001519" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5334" width="64" height="64"><path d="M601.879542 615.183034l40.164768 0 0 39.908942-40.164768 0 0-39.908942Z" p-id="5335"></path><path d="M701.140243 615.183034l40.164768 0 0 39.908942-40.164768 0 0-39.908942Z" p-id="5336"></path><path d="M511.999488 63.645552c-246.99951 0-447.230857 200.231347-447.230857 447.230857 0 246.998487 200.23237 447.231881 447.230857 447.231881 246.99951 0 447.229834-200.233394 447.229834-447.231881C959.229323 263.876899 758.998999 63.645552 511.999488 63.645552zM789.144576 682.721243c0 0-1.87572 36.32737-37.862329 41.443901L276.297278 724.165144c0 0-28.481681-1.705851-34.109866-38.544875l-1.056052-218.816634 548.013215 0L789.144576 682.721243zM789.144576 329.424778l0 67.026556-548.013215-0.271176 1.056052-68.801992c5.884011-29.420053 34.280758-30.187533 34.280758-30.187533l473.279117 0C789.656229 301.283858 789.144576 329.424778 789.144576 329.424778z" p-id="5337"></path><path d="M651.254066 615.183034l40.164768 0 0 39.908942-40.164768 0 0-39.908942Z" p-id="5338"></path></svg>
+<svg t="1723096108720" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4381" width="64" height="64"><path d="M905.6 150.4H118.4c-44.8 0-86.4 44.8-86.4 96v528c0 51.2 38.4 96 86.4 96h787.2c48 0 86.4-41.6 86.4-96v-528c0-51.2-38.4-96-86.4-96zM934.4 448v326.4c0 19.2-12.8 35.2-25.6 35.2H118.4c-12.8 0-25.6-16-25.6-35.2v-384h838.4l3.2 57.6z m0-147.2v28.8H92.8v-83.2c0-19.2 12.8-35.2 25.6-35.2h787.2c12.8 0 25.6 16 25.6 35.2l3.2 54.4z m0 0" p-id="4382"></path><path d="M873.6 598.4H694.4c-12.8 0-22.4 6.4-25.6 16l-64 121.6c-3.2 9.6-3.2 19.2 0 28.8 6.4 9.6 16 12.8 25.6 12.8h179.2c12.8 0 22.4-6.4 25.6-16L896 643.2c3.2-9.6 3.2-19.2 0-28.8-3.2-9.6-12.8-16-22.4-16z m-80 121.6h-112l28.8-60.8h112L793.6 720zM243.2 448h-60.8c-16 0-28.8 12.8-28.8 28.8s12.8 28.8 28.8 28.8h60.8c16 0 28.8-12.8 28.8-28.8 0-12.8-12.8-28.8-28.8-28.8z m179.2 0h-60.8c-16 0-28.8 12.8-28.8 28.8s12.8 28.8 28.8 28.8h60.8c16 0 28.8-12.8 32-28.8 0-12.8-12.8-28.8-32-28.8z m211.2 32c0-6.4-3.2-16-9.6-22.4-6.4-6.4-12.8-9.6-22.4-9.6H544c-16 0-32 16-32 32s12.8 28.8 28.8 28.8h60.8c19.2 0 32-12.8 32-28.8z m0 0" p-id="4383"></path></svg>

src/assets/styles/ruoyi.scss

@@ -302,3 +302,14 @@
     background: linear-gradient(180deg, #e2f3ff -3%, #b8e1ff 100%);
   }
 }
+
+.el-scrollbar {
+  width: 100%; // 宽度可以设置也可以不设置 因为宽度默认就是填充满父级元素的内容区
+  height: 100%; // 必须设置el-scrollbar的高度
+  .el-scrollbar__wrap { // 实际上我们的内容是放在这个div下面的
+    // height: 100%; // 渲染出来的div.el-scrollbar__wrap默认会添加height:100%的属性。我们可以设置为105%来隐藏元素水平滚动条
+    height: 100%;
+    overflow: scroll;
+    overflow-x:auto;
+  }
+}

src/utils/constants.js

@@ -34,3 +34,21 @@ export const StoreApplyStatus = {
   AUDIT_PASS: "2", // 审核通过
   AUDIT_FAIL: "3"  // 审核不通过
 }
+
+/**
+ * API收费标准类型
+ */
+export const ApiPriceType = {
+  YEAR: {
+    type: "1",
+    unit: "年"
+  },
+  MONTH: {
+    type: "2",
+    unit: "月"
+  },
+  COUNT: {
+    type: "3",
+    unit: "次"
+  },
+}

src/utils/mixins.js

@@ -1,4 +1,4 @@
-import { views } from '@/utils/constants'
+import { ApiPriceType, views } from '@/utils/constants'
 
 export const $view = {
   props: {
@@ -88,3 +88,19 @@ export const $withdrawServiceType = {
     }
   }
 }
+
+// API收费标准
+export const $apiPriceType = {
+  computed: {
+    // 单位
+    apiPriceTypeUnit() {
+      return (type) => {
+        let key = Object.keys(ApiPriceType).find(key => ApiPriceType[key].type === type);
+        if (key) {
+          return ApiPriceType[key].unit;
+        }
+        return "";
+      }
+    }
+  }
+}

src/views/mch/access/index.vue

@@ -25,38 +25,6 @@
           @click="handleAdd"
         >申请秘钥</el-button>
       </el-col>
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="success"-->
-<!--          plain-->
-<!--          icon="el-icon-edit"-->
-<!--          size="mini"-->
-<!--          :disabled="single"-->
-<!--          @click="handleUpdate"-->
-<!--          v-hasPermi="['ss:access:edit']"-->
-<!--        >修改</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="danger"-->
-<!--          plain-->
-<!--          icon="el-icon-delete"-->
-<!--          size="mini"-->
-<!--          :disabled="multiple"-->
-<!--          @click="handleDelete"-->
-<!--          v-hasPermi="['ss:access:remove']"-->
-<!--        >删除</el-button>-->
-<!--      </el-col>-->
-<!--      <el-col :span="1.5">-->
-<!--        <el-button-->
-<!--          type="warning"-->
-<!--          plain-->
-<!--          icon="el-icon-download"-->
-<!--          size="mini"-->
-<!--          @click="handleExport"-->
-<!--          v-hasPermi="['ss:access:export']"-->
-<!--        >导出</el-button>-->
-<!--      </el-col>-->
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
@@ -65,6 +33,10 @@
       <el-table-column label="秘钥" align="center" prop="accessSecret" >
         <template slot-scope="d">******</template>
       </el-table-column>
+      <el-table-column label="剩余调用次数" align="center" prop="surplusCount">
+        <template slot-scope="d">{{d.row.surplusCount}} 次</template>
+      </el-table-column>
+      <el-table-column label="到期时间" align="center" prop="expireTime" width="180"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
         <template slot-scope="scope">
           <el-button
@@ -73,13 +45,12 @@
             icon="el-icon-refresh"
             @click="handleReset(scope.row)"
           >重置秘钥</el-button>
-<!--          <el-button-->
+          <el-button
-<!--            size="mini"-->
+            size="mini"
-<!--            type="text"-->
+            type="text"
-<!--            icon="el-icon-delete"-->
+            icon="el-icon-delete"
-<!--            @click="handleDelete(scope.row)"-->
+            @click="handleDelete(scope.row)"
-<!--            v-hasPermi="['ss:access:remove']"-->
+          >删除</el-button>
-<!--          >删除</el-button>-->
         </template>
       </el-table-column>
     </el-table>
@@ -110,13 +81,15 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+
   </div>
 </template>
 
 <script>
 import { listAccess, getAccess, delAccess, addAccess, updateAccess } from "@/api/ss/access";
 import { $view } from '@/utils/mixins'
-import { appAddAccess, appListAccess, appResetAccess } from '@/api/app/access'
+import { appAddAccess, appListAccess, appResetAccess, mchDelAccess } from '@/api/app/access'
 
 export default {
   name: "MchAccess",
@@ -206,9 +179,9 @@ export default {
         })
       })
     },
-    // 展示秘钥
+    // TODO 展示秘钥
     showSecret(secret) {
-
+      this.$alert(`您的秘钥：${secret}`, '申请成功', {})
     },
     /** 查询第三方API秘钥对列表 */
     getList() {
@@ -283,9 +256,13 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const accessIds = row.accessId || this.ids;
+      this.$confirm(`【高危操作】是否确认删除秘钥？删除后无法恢复！<br/>您正在删除:${row.accessKey}`, '高危提示', {
-      this.$modal.confirm('是否确认删除第三方API秘钥对编号为"' + accessIds + '"的数据项？').then(function() {
+        confirmButtonText: '确认删除',
-        return delAccess(accessIds);
+        cancelButtonText: '取消',
+        type: 'warning',
+        dangerouslyUseHTMLString: true
+      }).then(function() {
+        return mchDelAccess(row.accessId);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");

src/views/mch/index/components/MchRechargeCountReport.vue

@@ -6,6 +6,7 @@
         type="month"
         placeholder="选择月"
         @change="getData"
+        :clearable="false"
       />
       <div>
         {{queryParams.year}}年{{queryParams.month}}月收入

src/views/mch/index/index.vue

@@ -2,7 +2,6 @@
   <el-row :gutter="12">
     <el-col :xl="6" :lg="8" :md="10" :sm="12" :xs="24">
       <el-card class="card-box">
-        <div class="hello">欢迎！{{name}}！</div>
         <mch-user-profile/>
       </el-card>
       <el-card  class="card-box" header="收款账户">
@@ -10,15 +9,15 @@
       </el-card>
     </el-col>
     <el-col :xl="18" :lg="16" :md="14" :sm="12" :xs="24">
-      <el-scrollbar>
+      <el-scrollbar style="max-height: calc(100vh - 148px);">
+        <el-card class="card-box">
+          <div class="hello">
+            欢迎！<span style="font-size: 20px">{{name}}</span>
+          </div>
+        </el-card>
         <el-card class="card-box" header="收入统计">
           <mch-recharge-count-report/>
         </el-card>
-<!--        <el-card class="card-box">-->
-<!--          <el-tabs>-->
-<!--            <el-tab-pane label="近期订单"/>-->
-<!--          </el-tabs>-->
-<!--        </el-card>-->
       </el-scrollbar>
     </el-col>
   </el-row>
@@ -42,7 +41,6 @@ export default {
 
 <style scoped>
 .hello {
-  font-size: 20px;
+  font-size: 28px;
-  margin: 0.5em 0;
 }
 </style>

src/views/ss/access/index.vue

@@ -71,12 +71,18 @@
 
     <el-table v-loading="loading" :data="accessList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="秘钥对ID" align="center" prop="accessId" width="80"/>
+      <el-table-column label="编号" align="center" prop="accessId" width="80"/>
-      <el-table-column label="申请用户" align="center" prop="userName" v-if="notHasView(views.user)"/>
+      <el-table-column label="用户" align="center" prop="userName" v-if="notHasView(views.user)" width="180">
+        <user-link slot-scope="d" :id="d.row.userId" :name="d.row.userName"/>
+      </el-table-column>
       <el-table-column label="秘钥键" align="center" prop="accessKey" />
       <el-table-column label="秘钥" align="center" prop="accessSecret" >
         <template slot-scope="d">******</template>
       </el-table-column>
+      <el-table-column label="剩余调用次数" align="center" prop="surplusCount">
+        <template slot-scope="d">{{d.row.surplusCount}} 次</template>
+      </el-table-column>
+      <el-table-column label="到期时间" align="center" prop="expireTime" width="180"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
         <template slot-scope="scope">
 <!--          <el-button-->
@@ -129,9 +135,11 @@
 <script>
 import { listAccess, getAccess, delAccess, addAccess, updateAccess } from "@/api/ss/access";
 import { $view } from '@/utils/mixins'
+import UserLink from '@/components/Business/SmUser/UserLink.vue'
 
 export default {
   name: "Access",
+  components: { UserLink },
   mixins: [$view],
   props: {
     query: {

src/views/ss/apiPrice/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-      <el-form-item label="API收费标准" prop="id">
+      <el-form-item label="编号" prop="id">
         <el-input
           v-model="queryParams.id"
-          placeholder="请输入API收费标准"
+          placeholder="请输入编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -19,14 +19,6 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="单位" prop="unit">
-        <el-input
-          v-model="queryParams.unit"
-          placeholder="请输入单位"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="标准名称" prop="name">
         <el-input
           v-model="queryParams.name"
@@ -35,38 +27,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="价格" prop="price">
-        <el-input
-          v-model="queryParams.price"
-          placeholder="请输入价格"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="创建人" prop="createBy">
-        <el-input
-          v-model="queryParams.createBy"
-          placeholder="请输入创建人"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="更新人" prop="updateBy">
-        <el-date-picker clearable
-          v-model="queryParams.updateBy"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择更新人">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="逻辑删除标志" prop="deleted">
-        <el-input
-          v-model="queryParams.deleted"
-          placeholder="请输入逻辑删除标志"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -131,6 +91,7 @@
             :sort-orders="orderSorts"
             :sortable="column.sortable"
             :show-overflow-tooltip="column.overflow"
+            :width="column.width"
         >
           <template slot-scope="d">
             <template v-if="column.key === 'id'">
@@ -139,8 +100,11 @@
             <template v-else-if="column.key === 'type'">
               <dict-tag :options="dict.type.api_price_type" :value="d.row[column.key]"/>
             </template>
-            <template v-else-if="column.key === 'unit'">
+            <template v-else-if="column.key === 'num'">
-              <dict-tag :options="dict.type.api_price_unit" :value="d.row[column.key]"/>
+              {{d.row.num}} {{apiPriceTypeUnit(d.row.type)}}
+            </template>
+            <template v-else-if="column.key === 'price'">
+              {{d.row.price | money}} 元
             </template>
             <template v-else>
               {{d.row[column.key]}}
@@ -179,8 +143,11 @@
     <!-- 添加或修改API收费标准对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="标准名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入标准名称" />
+        </el-form-item>
         <el-form-item label="类型" prop="type">
-          <el-select v-model="form.type" placeholder="请选择类型">
+          <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
             <el-option
               v-for="dict in dict.type.api_price_type"
               :key="dict.value"
@@ -189,24 +156,19 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="数值" prop="num">
+        <el-form-item label="价格" prop="price">
-          <el-input v-model="form.num" placeholder="请输入数值" />
+          <el-input v-model.number="form.price" placeholder="请输入价格" type="number" :min="0">
+            <template #append>元</template>
+          </el-input>
         </el-form-item>
-        <el-form-item label="单位" prop="unit">
+        <el-form-item label="标准" prop="num">
-          <el-input v-model="form.unit" placeholder="请输入单位" />
+          <el-input v-model.number="form.num" placeholder="请输入标准" type="number" :min="0" :step="1">
-        </el-form-item>
+            <template #append>{{apiPriceTypeUnit(form.type)}}</template>
-        <el-form-item label="标准名称" prop="name">
+          </el-input>
-          <el-input v-model="form.name" placeholder="请输入标准名称" />
         </el-form-item>
         <el-form-item label="标准描述" prop="description">
           <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
         </el-form-item>
-        <el-form-item label="价格" prop="price">
-          <el-input v-model="form.price" placeholder="请输入价格" />
-        </el-form-item>
-        <el-form-item label="逻辑删除标志" prop="deleted">
-          <el-input v-model="form.deleted" placeholder="请输入逻辑删除标志" />
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -218,7 +180,8 @@
 
 <script>
 import { listApiPrice, getApiPrice, delApiPrice, addApiPrice, updateApiPrice } from "@/api/ss/apiPrice";
-import { $showColumns } from '@/utils/mixins';
+import { $apiPriceType, $showColumns } from '@/utils/mixins'
+import { ApiPriceType } from '@/utils/constants'
 
 // 默认排序字段
 const defaultSort = {
@@ -228,20 +191,25 @@ const defaultSort = {
 
 export default {
   name: "ApiPrice",
-  mixins: [$showColumns],
+  mixins: [$showColumns, $apiPriceType],
   dicts: ['api_price_type'],
+  computed: {
+    numLabel() {
+      return this.form.type === ApiPriceType.COUNT.type ? '次数' : '时长'
+    }
+  },
   data() {
     return {
       // 字段列表
-      columns: [
+      columns:[
-        {key: 'id', visible: true, label: 'API收费标准', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'id', visible: true, label: '编号', minWidth: null, sortable: true, overflow: false, align: 'center', width: '100'},
-        {key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'name', visible: true, label: '标准名称', minWidth: null, sortable: true, overflow: false, align: 'center', width: ''},
-        {key: 'num', visible: true, label: '数值', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: ''},
-        {key: 'unit', visible: true, label: '单位', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'price', visible: true, label: '价格', minWidth: null, sortable: true, overflow: false, align: 'center', width: ''},
-        {key: 'name', visible: true, label: '标准名称', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'num', visible: true, label: '标准', minWidth: null, sortable: true, overflow: false, align: 'center', width: ''},
-        {key: 'description', visible: true, label: '标准描述', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'description', visible: true, label: '标准描述', minWidth: "200", sortable: true, overflow: true, align: 'center', width: ''},
-        {key: 'price', visible: true, label: '价格（元）', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'createTime', visible: true, label: '创建时间', minWidth: null, sortable: true, overflow: true, align: 'center', width: '180'},
-        {key: 'deleted', visible: true, label: '逻辑删除标志', minWidth: null, sortable: true, overflow: false, align: 'center'},
+        {key: 'updateTime', visible: true, label: '更新时间', minWidth: null, sortable: true, overflow: true, align: 'center', width: '180'},
       ],
       // 排序方式
       orderSorts: ['ascending', 'descending', null],
@@ -284,11 +252,17 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        createTime: [
+        name: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+          { required: true, message: "标准名称不能为空", trigger: "blur" }
         ],
-        deleted: [
+        type: [
-          { required: true, message: "逻辑删除标志不能为空", trigger: "blur" }
+          { required: true, message: "类型不能为空", trigger: "change" }
+        ],
+        price: [
+          { required: true, type: 'number', message: "价格不能为空", trigger: "blur" }
+        ],
+        num: [
+          { required: true, type: 'number', message: "标准不能为空", trigger: 'blur'}
         ]
       }
     };
@@ -326,7 +300,7 @@ export default {
     reset() {
       this.form = {
         id: null,
-        type: null,
+        type: '1',
         num: null,
         unit: null,
         name: null,

src/views/system/recharge/detail.vue

@@ -15,8 +15,12 @@
     </el-card>
     <el-card class="box-card">
       <el-descriptions title="设备套餐信息">
-        <el-descriptions-item label="设备编号">{{detail.deviceNo | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="设备编号">
-        <el-descriptions-item label="设备名称">{{detail.deviceName | defaultValue}}</el-descriptions-item>
+          <device-link :id="detail.deviceId" :text="detail.deviceNo"/>
+        </el-descriptions-item>
+        <el-descriptions-item label="设备名称">
+          <device-link :id="detail.deviceId" :text="detail.deviceName"/>
+        </el-descriptions-item>
         <el-descriptions-item label="设备充值状态">
           <dict-tag :value="detail.deviceRechargeStatus" :options="dict.type.sm_transaction_bill_device_recharge_status" size="small"/>
         </el-descriptions-item>
@@ -33,7 +37,9 @@
 
     <el-card class="box-card">
       <el-descriptions title="支付方信息">
-        <el-descriptions-item label="用户名称">{{detail.userName | defaultValue}}</el-descriptions-item>
+        <el-descriptions-item label="用户名称">
+          <user-link :id="detail.userId" :name="detail.userName"/>
+        </el-descriptions-item>
         <el-descriptions-item label="支付方式">
           <dict-tag :value="detail.channelId" :options="dict.type.channel_type" size="small"/>
         </el-descriptions-item>
@@ -71,10 +77,12 @@
 import { getBill } from '@/api/system/recharge'
 import Refund from '@/views/ss/refund/index.vue'
 import { findLabel } from '@/utils'
+import DeviceLink from '@/components/Business/Device/DeviceLink.vue'
+import UserLink from '@/components/Business/SmUser/UserLink.vue'
 
 export default {
   name: 'RechargeDetail',
-  components: { Refund },
+  components: { UserLink, DeviceLink, Refund },
   dicts: ['channel_type','sm_transaction_bill_status', 'sm_transaction_bill_device_recharge_status', 'time_unit'],
   computed: {
     // 时长单位
@@ -112,7 +120,6 @@ export default {
     this.getDetail();
   },
   methods: {
-
     getDetail() {
       getBill(this.id).then(res => {
         this.detail = res.data;

src/views/system/recharge/index.vue

@@ -17,10 +17,18 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="设备" prop="deviceId">
+      <el-form-item label="设备名称" prop="deviceName">
         <el-input
           v-model="queryParams.deviceName"
-          placeholder="请输入设备"
+          placeholder="请输入设备名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备SN" prop="deviceNo">
+        <el-input
+          v-model="queryParams.deviceNo"
+          placeholder="请输入设备SN"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -92,8 +100,8 @@
       <el-table-column label="充值用户" align="center" prop="userName" >
         <user-link slot-scope="d" :id="d.row.userId" :name="d.row.userName"/>
       </el-table-column>
-      <el-table-column label="设备" align="center" prop="deviceName" >
+      <el-table-column label="设备名称/SN" align="center" prop="deviceName" width="180">
-        <device-link slot-scope="d" :id="d.row.deviceId" :text="d.row.deviceName"/>
+        <device-link slot-scope="d" :id="d.row.deviceId" :text="`${d.row.deviceName ? d.row.deviceName : '--'} (${d.row.deviceNo})`"/>
       </el-table-column>
       <el-table-column label="收款用户" align="center" prop="mchName" >
         <user-link slot-scope="d" :id="d.row.mchId" :name="d.row.mchName"/>
@@ -103,7 +111,7 @@
           {{d.row.money | money}} 元
         </template>
       </el-table-column>
-      <el-table-column label="收款到账金额" align="center">
+      <el-table-column label="到账金额" align="center">
         <template slot-scope="d">
           {{d.row.arrivalAmount | money}} 元
         </template>
@@ -133,13 +141,13 @@
           <dict-tag :value="d.row.status" :options="dict.type.sm_transaction_bill_status"/>
         </template>
       </el-table-column>
-      <el-table-column label="设备充值状态" align="center">
+      <el-table-column label="设备状态" align="center">
         <template slot-scope="d">
           <dict-tag :value="d.row.deviceRechargeStatus" :options="dict.type.sm_transaction_bill_device_recharge_status"/>
         </template>
       </el-table-column>
       <el-table-column label="时间" align="center" prop="createTime" width="180"/>
-      <el-table-column label="操作" align="center" fixed="right">
+      <el-table-column label="操作" align="center" fixed="right" width="200">
         <template slot-scope="d">
           <el-button
             size="small"