后管sim卡页面添加字段

jsowell-ui/src/views/pile/sim/index.vue

@@ -49,7 +49,16 @@
 <!--          @keyup.enter.native="handleQuery"-->
 <!--        />-->
 <!--      </el-form-item>-->
-
+      <el-form-item label="到期时间" prop="expiredTime">
+        <el-select v-model="queryParams.expiredTime" clearable placeholder="请选择">
+          <el-option
+            v-for="item in dict.type.sim_expired_time"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
       <el-form-item label="SIM卡商" prop="simSupplier">
       <el-select v-model="queryParams.simSupplier" clearable placeholder="请选择">
         <el-option
@@ -60,6 +69,23 @@
         </el-option>
       </el-select>
       </el-form-item>
+      <el-form-item label="站点" prop="stationId">
+        <el-select
+          v-model="queryParams.stationId"
+          placeholder="请选择站点"
+          clearable
+          filterable
+          style="width: 140px"
+        >
+          <el-option
+            v-for="station in stationList"
+            :key="station.id"
+            :label="station.stationName"
+            :value="station.id"
+          />
+        </el-select>
+      </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>
@@ -116,7 +142,8 @@
 <!--      <el-table-column label="主键" align="center" prop="id" />-->
       <el-table-column label="ICCID" align="center" prop="iccId" width="180px"/>
       <el-table-column label="套餐名称" align="center" prop="name" />
-      <el-table-column label="对应桩号" align="center" prop="pileSn" />
+      <el-table-column label="对应桩号" align="center" prop="pileSn" width="180px"/>
+      <el-table-column label="所属站点" align="center" prop="stationName" />
       <el-table-column label="sim卡商" align="center" prop="simSupplier" >
         <template slot-scope="scope">
           <dict-tag
@@ -141,6 +168,13 @@
           <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="剩余天数" align="center" prop="remainingDays" >
+        <template scope="scope">
+          <span v-if="scope.row.remainingDays <= 7 " style="color: #bf1c1c"> {{scope.row.remainingDays}}</span>
+          <span v-else-if="scope.row.remainingDays <= 30 " style="color: #ffba00"> {{scope.row.remainingDays}}</span>
+          <span v-else-if="scope.row.remainingDays > 30 "> {{scope.row.remainingDays}}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="SIM卡运营商" align="center" prop="operator" >
         <template slot-scope="scope">
           <dict-tag
@@ -242,10 +276,11 @@
 
 <script>
 import {listSim, getSim, delSim, addSim, updateSim, simRenew, getSimInfo} from "@/api/pile/sim";
+import {listStation} from "@/api/pile/station";
 
 export default {
   name: "Sim",
-  dicts: ["sim_supplier", "sim_status", "sim_operator"],
+  dicts: ["sim_supplier", "sim_status", "sim_operator", "sim_expired_time"],
   data() {
     return {
       // 遮罩层
@@ -285,6 +320,8 @@ export default {
       value: '',
       // 表单参数
       form: {},
+      // 站点列表
+      stationList: [],
       // 表单校验
       rules: {
       },
@@ -293,6 +330,8 @@ export default {
   },
   created() {
     this.getList();
+    // 查询站点列表
+    this.getStationList();
   },
   methods: {
     /** 查询充电桩SIM卡信息列表 */
@@ -386,6 +425,17 @@ export default {
         this.title = "修改充电桩SIM卡信息";
       });
     },
+    /** 查询充电站信息列表 */
+    getStationList() {
+      const queryStationParams = {
+        pageNum: 1,
+        pageSize: 999
+      };
+      listStation(queryStationParams).then((response) => {
+        console.log("订单列表页-查询站点列表", response)
+        this.stationList = response.rows;
+      });
+    },
     // 重置 续费周期相关
     resetSimRenewCycleNumber() {
       console.log("重置 续费周期相关");