占桩订单

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

@@ -1,95 +1,47 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="130px">
       <el-form-item label="占桩订单编号" prop="occupyCode">
-        <el-input
-          v-model="queryParams.occupyCode"
-          placeholder="请输入占桩订单编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.occupyCode" placeholder="请输入占桩订单编号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="会员id" prop="memberId">
-        <el-input
-          v-model="queryParams.memberId"
-          placeholder="请输入会员id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.memberId" placeholder="请输入会员id" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="充电站id" prop="stationId">
-        <el-input
-          v-model="queryParams.stationId"
-          placeholder="请输入充电站id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.stationId" placeholder="请输入充电站id" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item label="订单号" prop="orderCode">
-        <el-input
-          v-model="queryParams.orderCode"
-          placeholder="请输入订单号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+      <!-- <el-form-item label="订单号" prop="orderCode">
+        <el-input v-model="queryParams.orderCode" placeholder="请输入订单号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="交易流水号" prop="transactionCode">
-        <el-input
-          v-model="queryParams.transactionCode"
-          placeholder="请输入交易流水号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
+        <el-input v-model="queryParams.transactionCode" placeholder="请输入交易流水号" clearable
+          @keyup.enter.native="handleQuery" />
+      </el-form-item> -->
       <el-form-item label="占桩开始时间" prop="startTime">
-        <el-date-picker clearable
-                        v-model="queryParams.startTime"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="请选择占桩开始时间">
+        <el-date-picker clearable v-model="queryParams.startTime" type="date" value-format="yyyy-MM-dd"
+          placeholder="请选择占桩开始时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="占桩结束时间" prop="endTime">
-        <el-date-picker clearable
-                        v-model="queryParams.endTime"
-                        type="date"
-                        value-format="yyyy-MM-dd"
-                        placeholder="请选择占桩结束时间">
+        <el-date-picker class="stake-up" clearable v-model="queryParams.endTime" type="date" value-format="yyyy-MM-dd"
+          placeholder="请选择占桩结束时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="占桩订单金额" prop="orderAmount">
-        <el-input
-          v-model="queryParams.orderAmount"
-          placeholder="请输入占桩订单金额"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.orderAmount" placeholder="请输入占桩订单金额" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="充电桩编号" prop="pileSn">
-        <el-input
-          v-model="queryParams.pileSn"
-          placeholder="请输入充电桩编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.pileSn" placeholder="请输入充电桩编号" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="充电桩枪口号" prop="connectorCode">
-        <el-input
-          v-model="queryParams.connectorCode"
-          placeholder="请输入充电桩枪口号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.connectorCode" placeholder="请输入充电桩枪口号" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="充电桩枪口编号" prop="pileConnectorCode">
-        <el-input
-          v-model="queryParams.pileConnectorCode"
-          placeholder="请输入充电桩枪口编号"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.pileConnectorCode" placeholder="请输入充电桩枪口编号" clearable
+          @keyup.enter.native="handleQuery" />
       </el-form-item>
-      <el-form-item>
+      <el-form-item class="custom-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>
       </el-form-item>
@@ -97,63 +49,41 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['pile:occupy:add']"
-        >新增
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['pile:occupy:add']">新增
         </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="['pile:occupy:edit']"
-        >修改
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['pile:occupy: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="['pile:occupy:remove']"
-        >删除
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['pile:occupy: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="['pile:occupy:export']"
-        >导出
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['pile:occupy:export']">导出
         </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="occupyList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="主键" align="center" prop="id"/>
-      <el-table-column label="占桩订单编号" align="center" prop="occupyCode"/>
-      <el-table-column label="状态" align="center" prop="status"/>
-      <el-table-column label="会员id" align="center" prop="memberId"/>
-      <el-table-column label="充电站id" align="center" prop="stationId"/>
-      <el-table-column label="订单号" align="center" prop="orderCode"/>
-      <el-table-column label="交易流水号" align="center" prop="transactionCode"/>
+      <el-table-column type="selection" width="55" align="center" />
+      <!-- <el-table-column label="主键" align="center" prop="id" /> -->
+      <el-table-column label="占桩订单编号" align="center" prop="occupyCode" />
+      <el-table-column label="状态" align="center" prop="status">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.occupy_order_status" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="会员id" align="center" prop="memberId" />
+      <el-table-column label="充电站id" align="center" prop="stationId" />
+      <!-- <el-table-column label="订单号" align="center" prop="orderCode" />
+      <el-table-column label="交易流水号" align="center" prop="transactionCode" /> -->
       <el-table-column label="占桩开始时间" align="center" prop="startTime" width="180">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
@@ -164,89 +94,74 @@
           <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="支付状态" align="center" prop="payStatus"/>
-      <el-table-column label="占桩订单金额" align="center" prop="orderAmount"/>
-      <el-table-column label="充电桩编号" align="center" prop="pileSn"/>
-      <el-table-column label="充电桩枪口号" align="center" prop="connectorCode"/>
-      <el-table-column label="充电桩枪口编号" align="center" prop="pileConnectorCode"/>
+      <el-table-column label="支付状态" align="center" prop="payStatus">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.occupy_pay_status" :value="scope.row.payStatus" />
+        </template>
+      </el-table-column>
+      <el-table-column label="占桩订单金额" align="center" prop="orderAmount" />
+      <el-table-column label="充电桩编号" align="center" prop="pileSn" />
+      <el-table-column label="充电桩枪口号" align="center" prop="connectorCode" />
+      <el-table-column label="充电桩枪口编号" align="center" prop="pileConnectorCode" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['pile:occupy:edit']"
-          >修改
+          <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['pile:occupy:edit']">修改
           </el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['pile:occupy:remove']"
-          >删除
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['pile:occupy:remove']">删除
+          </el-button> -->
+          <el-button size="mini" type="text" v-hasPermi="['pile:occupy:remove']"
+            @click="getPay(scope.row.id, scope.row.occupyCode)">无需支付
           </el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改占桩订单对话框 -->
     <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="occupyCode">
-          <el-input v-model="form.occupyCode" placeholder="请输入占桩订单编号"/>
+          <el-input v-model="form.occupyCode" placeholder="请输入占桩订单编号" />
         </el-form-item>
         <el-form-item label="会员id" prop="memberId">
-          <el-input v-model="form.memberId" placeholder="请输入会员id"/>
+          <el-input v-model="form.memberId" placeholder="请输入会员id" />
         </el-form-item>
         <el-form-item label="充电站id" prop="stationId">
-          <el-input v-model="form.stationId" placeholder="请输入充电站id"/>
+          <el-input v-model="form.stationId" placeholder="请输入充电站id" />
         </el-form-item>
         <el-form-item label="订单号" prop="orderCode">
-          <el-input v-model="form.orderCode" placeholder="请输入订单号"/>
+          <el-input v-model="form.orderCode" placeholder="请输入订单号" />
         </el-form-item>
         <el-form-item label="交易流水号" prop="transactionCode">
-          <el-input v-model="form.transactionCode" placeholder="请输入交易流水号"/>
+          <el-input v-model="form.transactionCode" placeholder="请输入交易流水号" />
         </el-form-item>
         <el-form-item label="占桩开始时间" prop="startTime">
-          <el-date-picker clearable
-                          v-model="form.startTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择占桩开始时间">
+          <el-date-picker clearable v-model="form.startTime" type="date" value-format="yyyy-MM-dd"
+            placeholder="请选择占桩开始时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="占桩结束时间" prop="endTime">
-          <el-date-picker clearable
-                          v-model="form.endTime"
-                          type="date"
-                          value-format="yyyy-MM-dd"
-                          placeholder="请选择占桩结束时间">
+          <el-date-picker clearable v-model="form.endTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择占桩结束时间">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="占桩订单金额" prop="orderAmount">
-          <el-input v-model="form.orderAmount" placeholder="请输入占桩订单金额"/>
+          <el-input v-model="form.orderAmount" placeholder="请输入占桩订单金额" />
         </el-form-item>
         <el-form-item label="充电桩编号" prop="pileSn">
-          <el-input v-model="form.pileSn" placeholder="请输入充电桩编号"/>
+          <el-input v-model="form.pileSn" placeholder="请输入充电桩编号" />
         </el-form-item>
         <el-form-item label="充电桩枪口号" prop="connectorCode">
-          <el-input v-model="form.connectorCode" placeholder="请输入充电桩枪口号"/>
+          <el-input v-model="form.connectorCode" placeholder="请输入充电桩枪口号" />
         </el-form-item>
         <el-form-item label="充电桩枪口编号" prop="pileConnectorCode">
-          <el-input v-model="form.pileConnectorCode" placeholder="请输入充电桩枪口编号"/>
+          <el-input v-model="form.pileConnectorCode" placeholder="请输入充电桩枪口编号" />
         </el-form-item>
         <el-form-item label="删除标识" prop="delFlag">
-          <el-input v-model="form.delFlag" placeholder="请输入删除标识"/>
+          <el-input v-model="form.delFlag" placeholder="请输入删除标识" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -254,14 +169,27 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 无需支付弹框 -->
+    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="cancel">
+      <el-radio-group v-model="radio" @change="agreeChange">
+        <el-radio label="1" border>无需支付</el-radio>
+        <el-radio label="2" border>手动输入支付金额</el-radio>
+      </el-radio-group>
+      <el-input v-if="radio === '2'" class="stake" type="number" v-model="stakeUp" placeholder="请输入修改金额"></el-input>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="aresure">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {listOccupy, getOccupy, delOccupy, addOccupy, updateOccupy} from "@/api/pile/occupy";
+import { listOccupy, getOccupy, delOccupy, addOccupy, updateOccupy, noNeedPay } from "@/api/pile/occupy";
 
 export default {
   name: "Occupy",
+  dicts: ["occupy_order_status", "occupy_pay_status"],
   data() {
     return {
       // 遮罩层
@@ -303,7 +231,19 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {}
+      rules: {},
+      // 无需支付弹框
+      dialogVisible: false,
+      // 无需支付单选框状态
+      radio: '1',
+      // 占桩支付金额
+      stakeUp: '',
+      // 修改占桩参数
+      amountPile: {},
+      // 占桩订单编号
+      numbering: '',
+      // 主键
+      dataId: ''
     };
   },
   created() {
@@ -349,6 +289,15 @@ export default {
       };
       this.resetForm("form");
     },
+    // 金额表单重置
+    recharge() {
+      this.amountPile = {
+        id: null,
+        type: null,
+        occupyCode: null,
+        orderAmount: null
+      }
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -417,7 +366,77 @@ export default {
       this.download('pile/occupy/export', {
         ...this.queryParams
       }, `occupy_${new Date().getTime()}.xlsx`)
+    },
+    //无需支付按钮操作 
+    async getPay(m, n) {
+      this.recharge();
+      this.dialogVisible = true;
+      console.log('占桩订单编号', m, n);
+      this.dataId = m
+      this.numbering = n
+    },
+    // type状态
+    agreeChange(value) {
+      this.radio = value
+      console.log('type状态', this.radio);
+    },
+    // 确定修改占桩金额
+    aresure() {
+      console.log('金额', this.stakeUp, this.radio, this.numbering);
+      if (this.radio === '1') {
+        this.amountPile = {
+          type: 1,
+          occupyCode: this.numbering,
+        }
+      } else if (this.radio === '2') {
+        this.amountPile = {
+          id: this.dataId,
+          type: 2,
+          occupyCode: this.numbering,
+          orderAmount: this.stakeUp
+        }
+      }
+      if (this.stakeUp > 0) {
+        noNeedPay(this.amountPile).then(res => {
+          console.log(res);
+          if (res.code === 200) {
+            this.$modal.msgSuccess("修改成功");
+            this.getList();
+          }
+        });
+        this.dataReset()
+      } else {
+        this.$message.error('修改金额不能为空或小于0');
+      }
+
+    },
+    //无需支付取消
+    cancel() {
+      this.dataReset()
+    },
+    // 无需支付重置
+    dataReset() {
+      this.dialogVisible = false
+      this.radio = '1'
+      this.stakeUp = ''
+      this.numbering = ''
+      this.dataId = ''
     }
   }
 };
 </script>
+<style lang="scss" scoped>
+.custom-item {
+  margin-left: 38px;
+}
+
+.stake-up {
+  width: 215px;
+}
+
+.stake {
+  display: block;
+  width: 300px;
+  margin-top: 30px;
+}
+</style>