扣车管理3

src/api/rescue/info.js

@@ -117,3 +117,18 @@ export function listBuckle() {
   })
 }
 
+export function getBuckle(id) {
+  return request({
+    url: "/system/rescueInfo/buckle/" + id,
+    method:"get"
+  })
+}
+
+export function returnCar(data){
+  return request({
+    url: '/system/rescueInfo/returnCar',
+    method: 'post',
+    data
+  })
+}
+

src/views/rescue/buckleList.vue

@@ -16,7 +16,7 @@
         <template v-slot="{ node, data }">
           <!-- 自定义节点内容 -->
           <span class="custom-tree-node">
-        {{ truncateText(data.buckleName, 15) }}({{ data.buckleCount }})
+        {{ truncateText(data.buckleName, 15) }}
       </span>
         </template>
       </el-tree>
@@ -211,12 +211,12 @@
                                                           class="el-icon-edit"></i></span>
           </template>
         </el-table-column>
-        <el-table-column label="实收金额(元)" width="150" align="center" prop="setMoney">
+        <el-table-column label="实收金额(元)" width="150" align="center" prop="payMoney">
           <template slot-scope="scope">
             <span>{{ scope.row.payMoney / 100 }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="收款时间" align="center" width="100" prop="setMoney">
+        <el-table-column label="收款时间" align="center" width="100" prop="payTime">
           <template slot-scope="scope">
             <span>{{ scope.row.payTime }}</span>
           </template>
@@ -227,7 +227,7 @@
               size="mini"
               type="text"
               icon="el-icon-check"
-              @click="handleReturn(scope.row)"
+              @click="openReturnCar(scope.row)"
             >还车
             </el-button>
             <el-button
@@ -251,14 +251,113 @@
         />
       </div>
     </div>
+
+    <el-dialog title="车辆归还" :visible.sync="returnCar" width="80%" append-to-body>
+      <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
+        <el-card class="box-card">
+          <!-- 卡片头 -->
+          <div slot="header" class="clearfix">
+            <i class="el-icon-plus"/>
+            <span>客户信息</span>
+          </div>
+          <!-- 卡片内容 -->
+          <div>
+            <el-row :gutter="2">
+              <el-col :span="12">
+                <el-form-item label="姓名" prop="connectionName">
+                  <el-input disabled v-model="formData.connectionName" placeholder="请输入资产编号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="手机号" prop="connectionPhone">
+                  <el-input disabled v-model="formData.connectionPhone" placeholder="请输入资产编号"/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="12">
+                <el-form-item label="车牌号" prop="licenseNum">
+                  <el-input disabled v-model="formData.licenseNum" placeholder="请输入资产编号"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="收费类型" prop="feeType">
+                  <el-select disabled v-model="formData.feeType" clearable filterable placeholder="请选择存放位置" class="customerSelectWidth">
+                    <el-option v-for="item in this.getDictDatas(DICT_TYPE.FEE_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="12">
+                <el-form-item label="订单状态" prop="orderStatus">
+                  <el-select disabled v-model="formData.orderStatus" clearable filterable placeholder="请选择存放位置"
+                             class="customerSelectWidth">
+                    <el-option v-for="item in this.getDictDatas(DICT_TYPE.JY_ORDER_STATUS)" :key="item.value"
+                               :label="item.label" :value="item.value"/>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="应收金额(元)" prop="setMoney">
+                  <el-input disabled v-model="formData.setMoney" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="2">
+              <el-col :span="12">
+                <el-form-item label="实收金额(元)" prop="payMoney">
+                  <el-input disabled v-model="formData.payMoney"/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="收款时间" prop="payTime">
+                  <el-date-picker disabled clearable v-model="formData.payTime" type="date" value-format="yyyy-MM-dd"
+                                  placeholder="选择取得日期"
+                  />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+
+        <el-card class="box-card">
+          <!-- 卡片头 -->
+          <div slot="header" class="clearfix">
+            <i class="el-icon-plus"/>
+            <span>附件信息</span>
+          </div>
+          <!-- 卡片内容 -->
+          <div>
+            <el-form-item label="附件信息" prop="images">
+              <FileUpload ref="fileUpload" v-model="formData.images" :limit="50" />
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input type="textarea" v-model="formData.remark" maxlength="200"
+                        show-word-limit/>
+            </el-form-item>
+          </div>
+        </el-card>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="handleReturn" :disabled="formLoading">确 定</el-button>
+        <el-button @click="returnCar = false">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import {delInfo, downloadOrder, listBuckle, listInfo, updateInfo} from "@/api/rescue/info";
+import {delInfo, returnCar, downloadOrder, listBuckle, listInfo, updateInfo, getBuckle} from "@/api/rescue/info";
+import {DICT_TYPE} from "@/utils/dict";
 
 export default {
   name: "BuckleList",
+  computed: {
+    DICT_TYPE() {
+      return DICT_TYPE
+    }
+  },
   data() {
     return {
       // 导出遮罩层
@@ -307,7 +406,26 @@ export default {
       // 已还车
       returnCount: 0,
       // 待入库
-      noLibraryCount: 0
+      noLibraryCount: 0,
+      returnCar: false,
+      // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+      formLoading: false,
+      // 表单参数
+      formData: {
+        connectionName: null,
+        connectionPhone: null,
+        licenseNum: null,
+        feeType: null,
+        orderStatus: null,
+        setMoney: null,
+        payMoney: null,
+        payTime: null,
+        images: null,
+        remark: null,
+      },
+      // 表单校验
+      formRules: {
+      },
     }
   },
   watch: {
@@ -322,7 +440,7 @@ export default {
         this.returnCount = val.returnCount
         this.noLibraryCount = val.noLibraryCount
       }
-    }
+    },
   },
   created() {
     this.getList()
@@ -442,8 +560,30 @@ export default {
     getBuckleName(id){
       return this.dictDataTree.find(item => item.id === id)?.buckleName || "其他"
     },
+    openReturnCar(row){
+      this.formData = {
+        ...row
+      }
+      if (this.formData.setMoney){
+        this.formData.setMoney = parseFloat(this.formData.setMoney / 100).toFixed(2)
+      }
+      if (this.formData.payMoney){
+        this.formData.payMoney = parseFloat(this.formData.payMoney / 100).toFixed(2)
+      }
+      this.returnCar = true
+    },
     // 还车
-    handleReturn(row){
+    async handleReturn(){
+      if (this.formData.images){
+        this.formData.images = this.formData.images.map(item => item.url).join(",")
+      }
+      try {
+        await returnCar(this.formData)
+        await this.handleChangeNode()
+        await this.getTabList();
+        this.returnCar = false
+        this.$modal.msgSuccess("还车成功")
+      }catch{}
 
     },
     // 删除
@@ -452,16 +592,33 @@ export default {
       this.$modal.confirm('是否确认删除道路救援模块编号为"' + ids + '"的数据项？').then(function() {
         return delInfo(ids);
       }).then(() => {
-        this.getList();
+        this.handleChangeNode()
         this.getTabList();
         this.$modal.msgSuccess("删除成功");
       }).catch(() => {});
+    },
+    // 重新计算选择的节点
+    async handleChangeNode(){
+      // 如果他选择了节点
+      if (this.chooseData){
+        const res = await getBuckle(this.chooseData.id)
+        const index = this.dictDataTree.find(item => item.id === res.data.id)
+        this.dictDataTree[index] = res.data
+        this.chooseData = res.data
+        return;
+      }
+      // 否则全更新
+      await this.getList()
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.box-card {
+  margin-bottom: 10px;
+}
+
 div {
   padding: 0;
   margin: 0 auto;
@@ -498,4 +655,7 @@ div {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+::v-deep .el-form-item{
+  margin-bottom: 22px;
+}
 </style>