From 943ff75b68170c13a3a5caf92a1d7db6b481badc Mon Sep 17 00:00:00 2001
From: guojuan <2715201989@qq.com>
Date: Thu, 12 Sep 2024 09:24:38 +0800
Subject: [PATCH] fix:联调支付管理以及车辆管理的界面以及接口联调

---
 frontend/front/src/api/regionalManage.js                                      |  88 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/front/src/views/pages/regionalManage/components/carBindGps.vue       | 518 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/front/src/views/pages/regionalManage/components/carManage.vue        | 804 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 frontend/front/src/views/pages/regionalManage/components/paymentManage.vue    | 500 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 frontend/front/src/views/pages/regionalManage/components/personDialogInfo.vue |   4 ++--
 frontend/front/src/views/pages/regionalManage/index.vue                       |   2 +-
 6 files changed, 1901 insertions(+), 15 deletions(-)
 create mode 100644 frontend/front/src/views/pages/regionalManage/components/carBindGps.vue

diff --git a/frontend/front/src/api/regionalManage.js b/frontend/front/src/api/regionalManage.js
index a290466..0b48e96 100644
--- a/frontend/front/src/api/regionalManage.js
+++ b/frontend/front/src/api/regionalManage.js
@@ -94,3 +94,91 @@ export function addEquipmentPort(data) {
     data
   })
 }
+
+// ------------------------------------------基础信息配置管理-支付配置接口-----------------------------------
+
+//支付-支付配置-获取table列表接口
+export function paymentTableDataPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/list/czzfpz?boEntName=czzfpz`,
+    method: 'post',
+    data
+  })
+}
+//基础信息配置管理-新增或编辑支付接口
+export function addOrEditPaymentPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/saveBo/czzfpz?boEntName=czzfpz`,
+    method: 'post',
+    data
+  })
+}
+//基础信息配置管理-删除支付接口
+export function deletePaymentPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/deleteBo/czzfpz?boEntName=czzfpz&ids=${data.ids}`,
+    method: 'post',
+    data
+  })
+}
+
+// ------------------------------------------基础信息配置管理-车辆配置接口-----------------------------------
+
+//车辆-车辆配置-获取table列表接口
+export function carTableDataPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/list/clxx?boEntName=clxx`,
+    method: 'post',
+    data
+  })
+}
+//基础信息配置管理-新增或编辑车辆接口
+export function addOrEditCarPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/saveBo/clxx?boEntName=clxx`,
+    method: 'post',
+    data
+  })
+}
+//基础信息配置管理-删除车辆接口
+export function deleteCarPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/deleteBo/clxx?boEntName=clxx&ids=${data.ids}`,
+    method: 'post',
+    data
+  })
+}
+//基础信息配置管理-获取车辆型号接口
+export function carTypeNumPort(data) {
+  return request({
+    url: `${context.bpmModel}/sys/identity/v1/getNextIdByAlias?alias=clxh`,
+    method: 'get',
+    data
+  })
+}
+// ------------------------------------------基础信息配置管理-车辆设备配置接口-----------------------------------
+
+//车辆-车辆配置-获取table列表接口
+export function carGPSTableDataPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/list/clsb?boEntName=clsb`,
+    method: 'post',
+    data
+  })
+}
+// //基础信息配置管理-新增或编辑车辆接口
+export function addCarGpsPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/saveBo/clsb?boEntName=clsb`,
+    method: 'post',
+    data
+  })
+}
+//基础信息配置管理-删除车辆接口
+export function deleteCarGPSPort(data) {
+  return request({
+    url: `${context.bpmModel}/bo/def/v1/deleteBo/clsb?boEntName=clsb&ids=${data.ids}`,
+    method: 'post',
+    data
+  })
+}
diff --git a/frontend/front/src/views/pages/regionalManage/components/carBindGps.vue b/frontend/front/src/views/pages/regionalManage/components/carBindGps.vue
new file mode 100644
index 0000000..43f9236
--- /dev/null
+++ b/frontend/front/src/views/pages/regionalManage/components/carBindGps.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="dialogSty">
+    <el-dialog
+      :title="dialogParam.title"
+      :visible.sync="dialogParam.dialogVisible"
+      width="70%"
+      @close="handleClose('dialogForm')">
+      <el-row style="margin-top: 10px;" v-if="dialogForm.dialogType == 'show'">
+        <el-col :span="24">
+          <el-form :model="queryForm" ref="queryForm" :inline="true">
+            <el-form-item label="设备名称:">
+              <el-input v-model="queryForm.sbmc" placeholder="请输入设备名称" clearable></el-input>
+            </el-form-item>
+            <el-form-item label="设备编号:">
+              <el-input v-model="queryForm.sbbh" placeholder="请输入设备编号" clearable></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
+                         icon="el-icon-plus" @click="hanleOpt('add')"> 新增GPS
+              </el-button>
+              <el-button type="primary" icon="el-icon-refresh"
+                         style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
+                         @click="handleReset" plain>重置
+              </el-button>
+              <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
+                         icon="el-icon-search" @click="handleSearch"> 查询
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+        <el-col :span="24">
+          <el-table
+            style="width: 100%"
+            v-loading="loading"
+            :data="tableData">
+            <el-table-column
+              type="index"
+              label="序号">
+            </el-table-column>
+            <el-table-column
+              prop="F_ssczmc"
+              min-width="120"
+              label="厂站名称">
+            </el-table-column>
+            <el-table-column
+              prop="F_cllx"
+              min-width="120"
+              label="车辆类型">
+            </el-table-column>
+            <el-table-column
+              prop="F_sbbh"
+              min-width="120"
+              label="设备编号">
+            </el-table-column>
+            <el-table-column
+              prop="F_sbmc"
+              min-width="120"
+              label="设备名称">
+            </el-table-column>
+            <el-table-column
+              prop="F_sblx"
+              label="设备类型">
+            </el-table-column>
+<!--            <el-table-column-->
+<!--              prop="F_sbpp"-->
+<!--              label="设备品牌">-->
+<!--            </el-table-column>-->
+<!--            <el-table-column-->
+<!--              prop="F_sbwz"-->
+<!--              min-width="120"-->
+<!--              label="设备位置">-->
+<!--            </el-table-column>-->
+<!--            <el-table-column-->
+<!--              prop="F_sbzt"-->
+<!--              label="设备状态">-->
+<!--            </el-table-column>-->
+            <el-table-column
+              prop="opt"
+              width="100"
+              label="操作">
+              <template slot-scope="scope">
+                <el-button type="text" style="color: red;" @click="hanleOpt('delete',scope.row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="24">
+          <el-pagination
+            style="float: right;margin-top: 10px;"
+            @current-change="handleCurrentChange"
+            @size-change="handleSizeChange"
+            :current-page="pageParam.page"
+            :page-sizes="[10,20,,50,100]"
+            :page-size="pageParam.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pageParam.total"
+          >
+          </el-pagination>
+        </el-col>
+      </el-row>
+      <el-row style="margin-top: 10px;" v-if="dialogForm.dialogType == 'select'">
+        <el-col :span="24">
+          <el-table
+            ref="multipleTable"
+            style="width: 100%"
+            v-loading="loading1"
+            row-key="node_code"
+            @selection-change="handleSelectionChange"
+            :data="tableData1">
+            <el-table-column type="selection" width="55" />
+            <el-table-column
+              type="index"
+              label="序号">
+            </el-table-column>
+            <el-table-column
+              prop="F_czmc"
+              min-width="120"
+              label="厂站名称">
+            </el-table-column>
+            <el-table-column
+              prop="F_sbbh"
+              min-width="120"
+              label="设备编号">
+            </el-table-column>
+            <el-table-column
+              prop="F_sbmc"
+              min-width="120"
+              label="设备名称">
+            </el-table-column>
+            <el-table-column
+              prop="F_syzt"
+              label="使用状态">
+            </el-table-column>
+            <el-table-column
+              prop="F_sbpp"
+              label="设备品牌">
+            </el-table-column>
+            <el-table-column
+              prop="F_sbwz"
+              min-width="120"
+              label="设备位置">
+            </el-table-column>
+            <el-table-column
+              prop="F_sbzt"
+              label="设备状态">
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="24">
+          <el-pagination
+            style="float: right;margin-top: 10px;"
+            @current-change="handleCurrentChange1"
+            @size-change="handleSizeChange1"
+            :current-page="pageParam1.page"
+            :page-sizes="[10,20,,50,100]"
+            :page-size="pageParam1.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="pageParam1.total"
+          >
+          </el-pagination>
+        </el-col>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose('dialogForm')">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit('dialogForm')">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {carGPSTableDataPort, addCarGpsPort, videoTableDataPort,deleteCarGPSPort} from "@/api/regionalManage";
+import moment from "moment";
+export default {
+  name: "realNameAuditDialog",
+  data(){
+    return{
+      rowData:{},
+      loading1:false,
+      tableData1:[],
+      tableData:[],
+      loading:false,
+      dialogForm:{
+        dialogType:'show',
+      },
+      queryForm:{
+        F_sbbh:'',
+        sbbh:'',
+        orgId:''
+      },
+      dialogFormRules:{
+        fRzzt:[
+          { required:true,message:'请勾选审核意见'}
+        ]
+      },
+      cardImgList:[],
+      pageParam:{
+        page:1,
+        size:10,
+        total:0
+      },
+      pageParam1:{
+        page:1,
+        size:10,
+        total:0
+      },
+      enterpriseImgList:[],
+      dialogParam:{
+        dialogVisible:false,
+        title:'绑定GPS设备',
+        dialogType:'非居民'
+      },
+      multipleSelection: [], // 多选存储数据
+      checkedSelection: {}, // 单选存储数据
+    }
+  },
+  methods:{
+    open(row) {
+      console.log('打印详情部分row===>',row)
+      this.rowData ={
+        ...row
+      }
+      this.dialogForm.dialogType = 'show';
+      this.dialogForm.reason = '';
+      this.dialogParam.dialogVisible= true;
+      this.dialogParam.dialogType = row.whyxxfhylx;
+      this.getDataList();
+    },
+    //获取table表格数据
+    async getDataList(){
+      let params ={
+        pageBean:{
+          page:this.pageParam.page,
+          pageSize:this.pageParam.size,
+          showTotal:true
+        },
+        querys:[]
+      }
+      if(this.queryForm.F_cph){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_cph',
+          relation:'AND',
+          value:this.queryForm.F_cph
+        })
+      }
+      if(this.queryForm.F_cllx){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_cllx',
+          relation:'AND',
+          value:this.queryForm.F_cllx
+        })
+      }
+      if(this.queryForm.F_sbbh){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_sbbh',
+          relation:'AND',
+          value:this.queryForm.F_sbbh
+        })
+      }
+      if(this.rowData.ID_){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_clId',
+          relation:'AND',
+          value:this.rowData.ID_
+        })
+      }
+      if(this.rowData.F_ssqyID){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_ssqyId',
+          relation:'AND',
+          value:this.rowData.F_ssqyID
+        })
+      }
+      if(this.rowData.F_ssczId){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_ssczId',
+          relation:'AND',
+          value:this.rowData.F_ssczId
+        })
+      }
+      this.loading = true;
+      await carGPSTableDataPort(params).then((res)=>{
+        const { rows,total } = res;
+        this.tableData = rows;
+        this.pageParam.total = total;
+        setTimeout(()=>{
+          this.loading = false;
+        },500)
+      })
+    },
+    // toggleSelection(rows) {
+    //   if (rows) {
+    //     rows.forEach((row) => {
+    //       this.$refs.multipleTable.toggleRowSelection(row);
+    //     });
+    //   } else {
+    //     this.$refs.multipleTable.clearSelection();
+    //   }
+    // },
+    // 多选框选中数据
+    handleSelectionChange(val) {
+      console.log('val--==', val);
+      // 默认多选
+      // this.multipleSelection = val;
+
+      // 单选
+      if(val.length == 1){
+        let item = val[val.length -1];
+        this.checkedSelection = JSON.parse(JSON.stringify(item));
+      }
+
+      // 单选选中多条时，需要清空所选数据
+      if(val.length > 1){
+        this.$refs.multipleTable.clearSelection(); // 清空选项
+        this.$refs.multipleTable.toggleRowSelection(val.pop()); // 选中最后点击的数据
+      }
+      // 取消选中
+      if(val.length == 0){
+        this.checkedSelection = {};
+      }
+    },
+    selectChange(selection, row) {
+      if (selection.length > 1) {
+        const del_row = selection.shift();
+        this.$refs.table1.toggleRowSelection(del_row, false);
+      }
+      console.log(selection);
+      this.selectArr = selection;
+    },
+    //获取table表格数据
+    async getGPSDataList(){
+      let params ={
+        pageBean:{
+          page:this.pageParam1.page,
+          pageSize:this.pageParam1.size,
+          showTotal:true
+        },
+        querys:[
+          {
+            group:'main',
+            operation:'LIKE',
+            property:'F_sblx',
+            relation:'AND',
+            value:'GPS'
+          }
+        ],
+        sorter:[
+          {
+            direction:'ASC',
+            property:'F_pxh'
+          }
+        ]
+      }
+      if(this.rowData.F_ssczId){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_czid',
+          relation:'AND',
+          value:this.rowData.F_ssczId
+        })
+      }
+      if(this.rowData.F_ssqyID){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_qyid',
+          relation:'AND',
+          value:this.rowData.F_ssqyID
+        })
+      }
+      this.loading1 = true;
+      await videoTableDataPort(params).then((res)=>{
+        const { rows,total } = res;
+        this.tableData1 = rows;
+        this.pageParam1.total = total;
+        setTimeout(()=>{
+          this.loading1 = false;
+        },500)
+      })
+    },
+    //重置按钮事件
+    handleReset(){
+      this.queryForm.F_sbbh ='';
+      this.queryForm.sbmc ='';
+      this.queryForm.F_zjbh ='';
+      this.pageParam.page = 1;
+      this.handleSearch();
+    },
+    //查询按钮事件
+    handleSearch(){
+      this.getDataList();
+    },
+    //分页中页数跳转事件
+    handleCurrentChange1(val){
+      this.pageParam1.page = val;
+      this.getGPSDataList();
+    },
+    //分页中size改变的界面跳转事件
+    handleSizeChange1(val){
+      this.pageParam1.size = val;
+      this.getGPSDataList();
+    },
+    //分页中页数跳转事件
+    handleCurrentChange(val){
+      this.pageParam.page = val;
+      this.handleSearch();
+    },
+    //分页中size改变的界面跳转事件
+    handleSizeChange(val){
+      this.pageParam.size = val;
+      this.handleSearch();
+    },
+    //操作栏按钮
+    async hanleOpt(type,row){
+      console.log('打印row=====>',row);
+      switch (type){
+        case 'add':
+          this.dialogForm.dialogType = 'select';
+          await this.getGPSDataList();
+          break;
+        case 'delete':
+          this.$confirm('确定是否删除该绑定的GPS设备？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }).then(async() => {
+            await deleteCarGPSPort({ids:row.ID_}).then((res)=>{
+              this.getDataList();
+            })
+          })
+          break;
+      }
+    },
+    //关闭弹窗的事件
+    handleClose(formName){
+      switch (this.dialogForm.dialogType){
+        case "show":
+          this.dialogParam.dialogVisible = false;
+          break;
+        case 'select':
+          this.dialogForm.dialogType = 'show';
+          this.getDataList();
+          break;
+      }
+    },
+    //确定提交弹窗的事件
+    async handleSubmit(formName){
+      switch (this.dialogForm.dialogType){
+        case "show":
+          this.dialogParam.dialogVisible = false;
+          break;
+        case 'select':
+          console.log('打印this.select',this.checkedSelection,this.rowData);
+          let params = {
+            clId:this.rowData.ID_,
+            cph:this.rowData.cph,
+            cllx:this.rowData.F_cllx,
+            sbId: this.checkedSelection.ID_,
+            sbbh:this.checkedSelection.F_sbbh,
+            sblx:this.checkedSelection.F_sblx,
+            sbmc:this.checkedSelection.F_sbmc,
+            ssczmc:this.checkedSelection.F_czmc,
+            ssczId:this.checkedSelection.F_czID,
+            ssqymc:this.checkedSelection.F_qymc,
+            ssqyId:this.checkedSelection.F_qyID,
+            zjbh:this.rowData.F_zjbh,
+            cjr:this.$store.state.user.username?this.$store.state.user.username:'',
+            cjsj:moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
+            gxr:'',
+            gxsj:''
+          }
+          await addCarGpsPort(params).then((res)=>{
+            if(res.code == 200){
+              this.$message.success('绑定GPS设备成功!');
+              this.handleSearch();
+            }
+            console.log('打印res',res);
+          })
+          this.dialogForm.dialogType = 'show';
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dialogSty{
+  ::v-deep .el-table .el-table__header .el-checkbox {
+    display: none;
+  }
+  ::v-deep.el-dialog__body{
+    padding: 20px!important;
+    padding-top: 0px!important;
+  }
+  .info-div{
+    display: flex;
+    align-items: center;
+    .item-name-sty{
+      color: #333333;
+      font-size: 16px;
+    }
+  }
+}
+
+</style>
diff --git a/frontend/front/src/views/pages/regionalManage/components/carManage.vue b/frontend/front/src/views/pages/regionalManage/components/carManage.vue
index f1113c0..ff3e834 100644
--- a/frontend/front/src/views/pages/regionalManage/components/carManage.vue
+++ b/frontend/front/src/views/pages/regionalManage/components/carManage.vue
@@ -1,29 +1,821 @@
 <template>
-  <div class="container">
-    车辆组件
+  <div class="componentsSty">
+    <el-row style="width: 100%; height: 100%;">
+      <el-col :span="24">
+        <el-form :model="queryForm" ref="queryForm" :inline="true">
+          <el-form-item label="车牌号:">
+            <el-input v-model="queryForm.F_cph" placeholder="请输入车牌号" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="车辆类型:">
+            <el-select v-model="queryForm.F_cllx" placeholder="请选择车辆类型" clearable>
+              <el-option
+                v-for="item in cllxOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="证件编号:">
+            <el-input v-model="queryForm.F_zjbh" placeholder="请输入证件编号" clearable></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" v-if="rowData.fSsczid !==''" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
+                       icon="el-icon-plus" @click="hanleOpt('add')"> 新增车辆
+            </el-button>
+            <el-button type="primary" icon="el-icon-refresh"
+                       style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
+                       @click="handleReset" plain>重置
+            </el-button>
+            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
+                       icon="el-icon-search" @click="handleSearch"> 查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;">
+        <el-table :data="tableData" border key="table"   ref="multipleTable"   style="width: 100%;" v-loading='loading'>
+          <el-table-column prop="shopId" type="index" label="序号" width="80"  align="center">
+          </el-table-column>
+          <el-table-column prop="F_cph" label="车牌号" min-width="100" :show-overflow-tooltip='true' align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_cph">{{scope.row.F_cph}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_cllx" label="车辆类型" min-width="100" :show-overflow-tooltip='true' align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_cllx">{{scope.row.F_cllx}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_clxh" label="车辆型号" min-width="120" :show-overflow-tooltip="true" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_clxh">{{scope.row.F_clxh}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_trsyrq" label="投入使用日期"  min-width="120"  align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_trsyrq">{{parseTime(scope.row.F_trsyrq,"{y}-{m}-{d}")}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_jsy" label="驾驶员"  min-width="120"  align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_jsy">{{scope.row.F_jsy}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_lxdh" label="联系电话"  min-width="120" :show-overflow-tooltip="true" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_lxdh">{{scope.row.F_lxdh}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_zjbh"  min-width="120" label="证件编号" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_zjbh">{{scope.row.F_zjbh}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_zjyxq" label="证件有效期"  min-width="120" :show-overflow-tooltip="true" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_zjyxq">{{parseTime(scope.row.F_zjyxq,"{y}-{m}-{d}")}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_sfzh" label="身份证号"  min-width="140" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_sfzh">{{scope.row.F_sfzh}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_clzp" label="车辆图片"  min-width="140" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_clzp">
+                {{scope.row.F_clzp.F_clzp}}
+                 <el-image
+                   style="width: 100px; height: 100px"
+                   :src="scope.row.F_clzpUrl"
+                   ></el-image>
+              </span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_wtysgs" label="委托运输公司"  min-width="140" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_wtysgs">{{scope.row.F_wtysgs}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_dlysxkz" label="道路运输许可证"  min-width="140" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_dlysxkz">{{scope.row.F_dlysxkz}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_dlysxkzyxq" label="道路运输许可证有效期"  min-width="180" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_dlysxkzyxq">{{parseTime(scope.row.F_dlysxkzyxq,"{y}-{m}-{d}")}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_whpzh" label="危化品证号"  min-width="140" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_whpzh">{{scope.row.F_whpzh}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_whpzhyxq" label="危化品证号有效期"  min-width="140" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_whpzhyxq">{{parseTime(scope.row.F_whpzhyxq,"{y}-{m}-{d}")}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_cjsj" label="创建时间"  min-width="160" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_cjsj">{{scope.row.F_cjsj}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="state" label="操作" fixed="right"  min-width="160" align="center">
+            <template slot-scope="scope">
+              <el-button type="text" @click="hanleOpt('edit',scope.row)">编辑</el-button>
+              <el-button type="text" @click="hanleOpt('delete',scope.row)" style="color:red;">删除</el-button>
+              <el-button type="text" @click="hanleOpt('GPS',scope.row)">绑定GPS</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-col :span="24">
+        <el-pagination
+          style="float: right;margin-top: 10px;"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+          :current-page="pageParam.page"
+          :page-sizes="[10,20,,50,100]"
+          :page-size="pageParam.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pageParam.total"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+    <el-dialog
+      v-if="dialogParams.showDialogVisible"
+      :title="dialogParams.title"
+      :visible.sync="dialogParams.dialogVisible"
+      width="60%"
+      @close="handleDialogClose">
+      <el-row>
+        <el-form :model="dialogParams"  :rules="dialogRules" ref="dialogParams" label-width="160px">
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="车牌号:" prop="cph">
+                <el-input v-model="dialogParams.cph" placeholder="请输入车牌号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="车辆型号:" prop="clxh">
+                <el-input v-model="dialogParams.clxh" disabled placeholder="请输入车辆型号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="车辆类型:" prop="cllx">
+                <el-select v-model="dialogParams.cllx"  style="width: 100%" placeholder="请选择车辆类型" clearable>
+                  <el-option
+                    v-for="item in cllxOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="投入使用日期:" prop="trsyrq">
+                <el-date-picker
+                  v-model="dialogParams.trsyrq"
+                  format="yyyy-MM-dd"
+                  style="width: 100%"
+                  value-format="yyyy-MM-dd"
+                  type="date"
+                  placeholder="请选择投入使用日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="驾驶员:" prop="jsy">
+                <el-input v-model="dialogParams.jsy" placeholder="请输入驾驶员" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="联系电话:" prop="lxdh">
+                <el-input v-model="dialogParams.lxdh" placeholder="请输入联系电话" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="证件编号:" prop="zjbh">
+                <el-input v-model="dialogParams.zjbh" placeholder="请输入证件编号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="证件有效期:" prop="zjyxq">
+                <el-date-picker
+                  v-model="dialogParams.zjyxq"
+                  format="yyyy-MM-dd"
+                  style="width: 100%"
+                  value-format="yyyy-MM-dd"
+                  type="date"
+                  placeholder="请选择投入使用日期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="身份证号:" prop="sfzh">
+                <el-input v-model="dialogParams.sfzh"  placeholder="请输入身份证号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="委托运输公司:" prop="wtysgs">
+                <el-input v-model="dialogParams.wtysgs" placeholder="请输入委托运输公司" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="道路运输许可证:" prop="dlysxkz">
+                <el-input v-model="dialogParams.dlysxkz" placeholder="请输入道路运输许可证" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="道路运输许可证有效期:" prop="dlysxkzyxq">
+                <el-date-picker
+                  v-model="dialogParams.dlysxkzyxq"
+                  format="yyyy-MM-dd"
+                  style="width: 100%"
+                  value-format="yyyy-MM-dd"
+                  type="date"
+                  placeholder="请选择道路运输许可证有效期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="危化品证号:" prop="whpzh">
+                <el-input v-model="dialogParams.whpzh" placeholder="请输入危化品证号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="危化品证号有效期:" prop="whpzhyxq">
+                <el-date-picker
+                  v-model="dialogParams.whpzhyxq"
+                  format="yyyy-MM-dd"
+                  style="width: 100%"
+                  value-format="yyyy-MM-dd"
+                  type="date"
+                  placeholder="请选择危化品证号有效期">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="24">
+              <el-form-item label="备注:" prop="bz">
+                <el-input v-model="dialogParams.bz" type="textarea" :row="2" placeholder="请输入备注" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="24" class="fileSty">
+              <el-form-item label="车辆照片:">
+                <el-upload
+                  :file-list="pictureFileList"
+                  :action="action"
+                  list-type="picture-card"
+                  multiple
+                  :show-file-list="true"
+                  :http-request="httpPictureRequest"
+                  :before-upload="beforeAvatarUpload"
+                  :on-preview="handlePictureCardPreview"
+                  :on-remove="handlePictureCardRemove">
+                  <i class="el-icon-plus"></i>
+                  <div class="el-upload__text">上传图片</div>
+                  <div class="el-upload__tip" slot="tip">可上传多张</div>
+                  <div class="el-upload__tip" slot="tip">支持：jpg/png/gif/ico/jpeg/gpg/gif/jpeg，不超过6MB，</div>
+                </el-upload>
+              </el-form-item>
+            </el-col>
+          </el-col>
+        </el-form>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="handleDialogClose">取 消</el-button>
+          <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button>
+        </span>
+    </el-dialog>
+    <car-bind-gps v-if="showCarBindGpsVisible" ref="carBindGps"></car-bind-gps>
   </div>
 </template>
 
 <script>
+import {deleteCarPort, addOrEditCarPort, carTableDataPort, carTypeNumPort, equipmentNumPort} from '@/api/regionalManage'
+import moment from "moment";
+import {getDictList} from "@/api/dict";
+import req from "@/utils/request";
+import carBindGps from "@/views/pages/regionalManage/components/carBindGps";
+
 export default {
   name: "carManage",
+  components:{
+    carBindGps
+  },
   props:{
-    type:Object,
-    default:{}
+    rowData:{
+      type:Object,
+      default:()=>{}
+    }
   },
-  mounted() {
+  created() {
+    this.action = `${window.context.portal}/system/file/v1/fileUpload`;
+  },
+  async mounted() {
+    await this.getDataList();
+    await this.getInitOptions();
   },
   data(){
     return {
+      filterText:'',
+      pictureFileList:[],
+      action:'',
+      showResetDialog:false,
+      showQrCodeVisible:false,
+      showDialog:false,
+      showCarBindGpsVisible:false,
+      dialogParams:{
+        showDialogVisible:false,
+        cjr:'',
+        cjsj:'',
+        gxsj:'',
+        gxr:'',
+        title:'新增车辆',
+        id_:'',
+        czID:'',
+        czmc: '',
+        qyID: '',
+        qymc: '',
+        dialogVisible:false,
+        cph:'',
+        cllx:'',
+        clxh:'',
+        trsyrq:'',
+        wtysgs:'',
+        jsy:'',
+        lxdh:'',
+        zjbh:'',
+        zjyxq:'',
+        sfzh:'',
+        bz:'',
+        dlysxkz:'',
+        dlysxkzyxq:'',
+        whpzh:'',
+        whpzhyxq:'',
+        clzp:'',
+        dialogType:'',
+        form_data_rev_:''
+      },
+      dialogRules:{
+        cph:[
+          {required:true,message:'请输入车牌号',trigger:'blur'}
+        ],
+        cllx:[
+          {required:true,message:'请选择车辆类型',trigger:'change'}
+        ],
+        clxh:[
+          {required:true,message:'请输入车辆型号',trigger:'blur'}
+        ],
+        jsy:[
+          {required:true,message:'请输入驾驶员',trigger:'blur'}
+        ],
+        lxdh:[
+          {required:true,message:'请输入联系电话',trigger:'blur'}
+        ],
+        zjbh:[
+          {required:true,message:'请输入证件编号',trigger:'blur'}
+        ]
+      },
+      queryForm:{
+        F_cph:'',
+        F_cllx:'',
+        F_zjbh:'',
+        orgId:''
+      },
+      pageParam:{
+        page:1,
+        size:10,
+        total:0
+      },
+      loading:false,
+      tableData:[],
+      cllxOptions:[],//车辆型号数据
 
     }
   },
   methods:{
-
+    //查询车辆类型的字典
+    async getInitOptions(){
+      let params = [{
+        key:'NAME_',
+        value:'车辆类型'
+      }];
+      // let paramsJson = JSON.stringify(params)
+      await getDictList(params).then((res)=>{
+        console.log('打印res====',res);
+        let { rows } = res;
+        let optionsArray = rows.length>0?rows.map((item)=>{
+          return {
+            label:item.NAME_,
+            value:item.NAME_
+          }
+        }):[];
+        this.cllxOptions = optionsArray;
+      })
+    },
+    //删除图片
+    handlePictureCardRemove(file, fileList) {
+      console.log(file, this.fileList);
+      const index = this.pictureFileList.findIndex((item) => {
+        return item.uid === file.uid
+      })
+      this.pictureFileList.splice(index, 1);
+    },
+    //预览车辆图片
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 车辆图片自定义上传
+    async httpPictureRequest(val){
+      console.log('打印val',val);
+      const formData = new FormData();
+      formData.append('files', val.file);
+      let response = await req.post(
+        window.context.portal + '/system/file/v1/fileUpload',
+        formData
+      )
+      if (response.success) {
+        console.log('打印response',response);
+        this.$message.success('上传成功');
+        let imgUrl = response.fileId;
+        if (response.fileId) {
+          imgUrl = await this.$getPhotoUrl(response.fileId);
+        }
+        this.pictureFileList.push({
+          fileId:response.fileId,
+          url:imgUrl,
+          fileObj: JSON.stringify(response)
+        });
+      }
+    },
+    beforeAvatarUpload(file){
+      console.log('打印beforeAvatarUpload===>file,file',file)
+      let imgType = ["jpg", "jpeg", "png"];
+      let judge = false; // 后缀
+      let type = file.name.split(".")[file.name.split(".").length - 1];
+      for (let k = 0; k < imgType.length; k++) {
+        if (imgType[k].toUpperCase() === type.toUpperCase()) {
+          judge = true;
+          break;
+        }
+      }
+      // 验证图片格式
+      if (!judge) {
+        this.$message.error("图片格式只支持：JPG、JPEG、PNG");
+        return false;
+      }
+      const isLt1M = file.size / 1024 / 1024;
+      if (isLt1M > 1) {
+        this.$message.error("上传头像图片大小不能超过1MB");
+        return false;
+      }
+      return true;
+    },
+    //获取设备编号的数值
+    async getCarTypeNum(){
+      await carTypeNumPort().then((res)=>{
+        const { value } = res;
+        this.dialogParams.clxh = value;
+        console.log('打印获取车辆型号res====》',res);
+      })
+    },
+    //查询列表事件
+    //获取table表格数据
+    async getDataList(){
+      let params ={
+        pageBean:{
+          page:this.pageParam.page,
+          pageSize:this.pageParam.size,
+          showTotal:true
+        },
+        querys:[]
+      }
+      if(this.queryForm.F_cph){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_cph',
+          relation:'AND',
+          value:this.queryForm.F_cph
+        })
+      }
+      if(this.queryForm.F_cllx){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_cllx',
+          relation:'AND',
+          value:this.queryForm.F_cllx
+        })
+      }
+      if(this.queryForm.F_zjbh){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_zjbh',
+          relation:'AND',
+          value:this.queryForm.F_zjbh
+        })
+      }
+      if(this.rowData.fSsczid){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_ssczID',
+          relation:'AND',
+          value:this.rowData.fSsczid
+        })
+      }
+      if(!this.rowData.fSsczid&&this.rowData.qyID){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_ssqyID',
+          relation:'AND',
+          value:this.rowData.qyID
+        })
+      }
+      this.loading = true;
+      await carTableDataPort(params).then((res)=>{
+        const { rows,total } = res;
+        console.log('打印rows',rows)
+        rows.map(async (item)=>{
+          console.log('待item',item);
+          let sfzghImg  = item.F_clzp.length>1?JSON.parse(item.F_clzp):'';
+          let sfzghImgUrl = await this.$getPhotoUrl(sfzghImg[0].fileId);
+          console.log('打印sfzghImgUrl',item,sfzghImg);
+          item.F_clzpUrl = sfzghImgUrl[0]
+        });
+        this.tableData = rows;
+        this.pageParam.total = total;
+        setTimeout(()=>{
+          this.loading = false;
+        },500)
+      })
+    },
+    //重置按钮事件
+    handleReset(){
+      this.queryForm.F_cph ='';
+      this.queryForm.F_cllx ='';
+      this.queryForm.F_zjbh ='';
+      this.pageParam.page = 1;
+      this.handleSearch();
+    },
+    //查询按钮事件
+    handleSearch(){
+      this.getDataList();
+    },
+    //新增用户事件
+    handleAdd(){
+      this.showDialog = true;
+      this.$nextTick(()=>{
+        this.$refs.showDialog.open('add');
+      })
+    },
+    //分页中页数跳转事件
+    handleCurrentChange(val){
+      this.pageParam.page = val;
+      this.handleSearch();
+    },
+    //分页中size改变的界面跳转事件
+    handleSizeChange(val){
+      this.pageParam.size = val;
+      this.handleSearch();
+    },
+    //提交事件
+    async handleSubmit(formName){
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          let filePictureList = this.pictureFileList.map(item => JSON.parse(item.fileObj));
+          let cardUrlList = JSON.stringify(filePictureList);
+          let params = {
+            ssqymc:this.dialogParams.qymc?this.dialogParams.qymc:'',
+            ssqyID:this.dialogParams.qyID?this.dialogParams.qyID:'',
+            ssczID:this.dialogParams.czID?this.dialogParams.czID:'',
+            ssczmc:this.dialogParams.czmc?this.dialogParams.czmc:'',
+            cph:this.dialogParams.cph?this.dialogParams.cph:'',
+            cllx:this.dialogParams.cllx?this.dialogParams.cllx:'',
+            clxh:this.dialogParams.clxh?this.dialogParams.clxh:'',
+            trsyrq:this.dialogParams.trsyrq?this.dialogParams.trsyrq:'',
+            wtysgs:this.dialogParams.wtysgs?this.dialogParams.wtysgs:'',
+            jsy:this.dialogParams.jsy?this.dialogParams.jsy:'',
+            lxdh:this.dialogParams.lxdh?this.dialogParams.lxdh:'',
+            zjbh:this.dialogParams.zjbh?this.dialogParams.zjbh:'',
+            zjyxq:this.dialogParams.zjyxq?this.dialogParams.zjyxq:'',
+            sfzh:this.dialogParams.sfzh?this.dialogParams.sfzh:'',
+            bz:this.dialogParams.bz?this.dialogParams.bz:'',
+            dlysxkz:this.dialogParams.dlysxkz?this.dialogParams.dlysxkz:'',
+            whpzh:this.dialogParams.whpzh?this.dialogParams.whpzh:'',
+            whpzhyxq:this.dialogParams.whpzhyxq?this.dialogParams.whpzhyxq:'',
+            clzp:cardUrlList,
+            cjr:this.dialogParams.cjr?this.dialogParams.cjr:'',
+            cjsj:this.dialogParams.cjsj?this.dialogParams.cjsj:'',
+            gxr:'',
+            gxsj:''
+          }
+          if(this.dialogParams.dialogType == 'edit'){
+            this.dialogParams.gxsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
+            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
+            params = {
+              ...params,
+              id_:this.dialogParams.id_?this.dialogParams.id_:'',
+              form_data_rev_:this.dialogParams.form_data_rev_?this.dialogParams.form_data_rev_:0,
+              gxr: this.dialogParams.gxr?this.dialogParams.gxr:'',
+              gxsj: this.dialogParams.gxsj?this.dialogParams.gxsj:'',
+            }
+            this.submitAddOrEditEquipment(params);
+          }else{
+            this.dialogParams.cjsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
+            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
+            params = {
+              ...params,
+              cjsj: this.dialogParams.cjsj?this.dialogParams.cjsj:'',
+              cjr: this.dialogParams.cjr?this.dialogParams.cjr:'',
+            }
+            this.submitAddOrEditEquipment(params);
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //提交编辑设备接口事件
+    async submitAddOrEditEquipment(params){
+      await addOrEditCarPort(params).then((res)=>{
+        console.log('打印新增编辑的res====>',res);
+        const { code } = res;
+        if(code == 200){
+          this.dialogParams.dialogVisible = false;
+          this.dialogParams.showDialogVisible = false;
+          this.handleSearch();
+        }
+      })
+    },
+    //操作栏按钮
+    async hanleOpt(type,row){
+      console.log('打印row=====>',row);
+      this.dialogParams.dialogType= type;
+      switch (type){
+        case 'add':
+          this.dialogParams.czID = this.rowData.fSsczid;
+          this.dialogParams.czmc = this.rowData.czmc;
+          this.dialogParams.qyID = this.rowData.qyID;
+          this.dialogParams.qymc = this.rowData.qymc;
+          this.dialogParams.id_ = '';
+          this.dialogParams.cph = '';
+          this.dialogParams.cllx = '';
+          this.dialogParams.clxh = '';
+          this.dialogParams.trsyrq ='';
+          this.dialogParams.wtysgs = '';
+          this.dialogParams.jsy = '';
+          this.dialogParams.lxdh = '';
+          this.dialogParams.zjbh = '';
+          this.dialogParams.zjyxq = '';
+          this.dialogParams.sfzh = '';
+          this.dialogParams.bz = '';
+          this.dialogParams.dlysxkz = '';
+          this.dialogParams.dlysxkzyxq = '';
+          this.dialogParams.whpzh = '';
+          this.dialogParams.whpzhyxq = '';
+          this.pictureFileList = [];
+          this.dialogParams.cjr = this.$store.state.user.username?this.$store.state.user.username:'';
+          this.dialogParams.cjsj = '';
+          this.dialogParams.title='新增车辆';
+          await this.getCarTypeNum();
+          break;
+        case 'edit':
+          this.dialogParams.id_ = row.ID_;
+          this.dialogParams.title='编辑支付';
+          this.dialogParams.cph = row.F_cph;
+          this.dialogParams.cllx = row.F_cllx;
+          this.dialogParams.clxh = row.F_clxh;
+          this.dialogParams.trsyrq = row.F_trsyrq;
+          this.dialogParams.wtysgs = row.F_wtysgs;
+          this.dialogParams.jsy = row.F_jsy;
+          this.dialogParams.lxdh = row.F_lxdh;
+          this.dialogParams.zjbh = row.F_zjbh;
+          this.dialogParams.zjyxq = row.F_zjyxq;
+          this.dialogParams.sfzh = row.F_sfzh;
+          this.dialogParams.bz = row.F_bz;
+          this.dialogParams.dlysxkz = row.F_dlysxkz;
+          this.dialogParams.dlysxkzyxq = row.F_dlysxkzyxq;
+          this.dialogParams.whpzh = row.F_whpzh;
+          this.dialogParams.whpzhyxq = row.F_whpzhyxq;
+          let cardPictureUrlList = row.F_clzp?JSON.parse(row.F_clzp):[];
+          let cardUrlList = [];
+          cardPictureUrlList.map(async(item)=>{
+            let imgUrl = await this.$getPhotoUrl(item.fileId);
+            cardUrlList.push(({
+              url:imgUrl,
+              fileObj: JSON.stringify(item)
+            }))
+          });
+          this.pictureFileList = cardUrlList;
+          this.dialogParams.qymc = row.F_qymc;
+          this.dialogParams.qyID = row.F_qyID;
+          this.dialogParams.czmc = row.F_czmc;
+          this.dialogParams.czID = row.F_czID;
+          this.dialogParams.cjsj = row.F_cjsj;
+          this.dialogParams.cjr = row.F_cjr;
+          this.dialogParams.gxr = row.F_gxr;
+          this.dialogParams.gxsj = row.F_gxsj;
+          this.dialogParams.form_data_rev_ = row.F_form_data_rev_;
+          break;
+        case 'delete':
+          this.$confirm('确定是否删除该设备？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }).then(async() => {
+            await deleteCarPort({ids:row.ID_}).then((res)=>{
+              this.handleSearch();
+            })
+          })
+          break;
+        case 'GPS':
+          this.showCarBindGpsVisible = true;
+          this.$nextTick(()=>{
+            this.$refs.carBindGps.open(row);
+          })
+          break;
+      }
+      if(!this.rowData.fSsczid && type == 'add'&& type !=='GPS'){
+        this.$message.warning('请选择厂站!')
+        return
+      }
+      if(type !== 'delete' && type !=='GPS'){
+        this.dialogParams.showDialogVisible = true;
+        this.$nextTick(()=>{
+          this.dialogParams.dialogVisible = true;
+        })
+      }
+    },
+    //弹窗关闭
+    handleDialogClose(){
+      this.$refs.dialogParams.resetFields();
+      this.dialogParams.dialogVisible = false;
+      this.dialogParams.showDialogVisible = false;
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.componentsSty{
+  width: calc(100% - 30px);
+  height: 100%;
+  .fileSty{
+    ::v-deep.el-upload--picture-card{
+      position: relative;
+    }
+    .el-upload__text{
+      position: absolute;
+      top: 20px;
+      left: 45px;
+      font-family: '苹方 中等', '苹方', sans-serif;
+      font-weight: 400;
+      font-style: normal;
+      font-size: 14px;
+      color: #98A4B4;
+    }
+  }
+}
 
 </style>
diff --git a/frontend/front/src/views/pages/regionalManage/components/paymentManage.vue b/frontend/front/src/views/pages/regionalManage/components/paymentManage.vue
index 1a24f54..e1b73d2 100644
--- a/frontend/front/src/views/pages/regionalManage/components/paymentManage.vue
+++ b/frontend/front/src/views/pages/regionalManage/components/paymentManage.vue
@@ -1,29 +1,517 @@
 <template>
-  <div class="container">
-    支付组件
+  <div class="componentsSty">
+    <el-row style="width: 100%; height: 100%;">
+      <el-col :span="24">
+        <el-form :model="queryForm" ref="queryForm" :inline="true">
+          <el-form-item label="支付类型:">
+            <el-input v-model="queryForm.F_zflx" placeholder="请输入支付类型" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="应用id:">
+            <el-input v-model="queryForm.F_appId" placeholder="请输入应用id" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="商户id:">
+            <el-input v-model="queryForm.F_mchId" placeholder="请输入商户id" clearable></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" v-if="rowData.fSsczid !==''" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
+                       icon="el-icon-plus" @click="hanleOpt('add')"> 新增支付
+            </el-button>
+            <el-button type="primary" icon="el-icon-refresh"
+                       style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
+                       @click="handleReset" plain>重置
+            </el-button>
+            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
+                       icon="el-icon-search" @click="handleSearch"> 查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+      <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;">
+        <el-table :data="tableData" border key="table"   ref="multipleTable"   style="width: 100%;" v-loading='loading'>
+          <el-table-column prop="shopId" type="index" label="序号" width="80"  align="center">
+          </el-table-column>
+          <el-table-column prop="F_zflx" label="支付类型" min-width="100" :show-overflow-tooltip='true' align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_zflx">{{scope.row.F_zflx}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_appId" label="应用id" min-width="100" :show-overflow-tooltip='true' align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_appId">{{scope.row.F_appId}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_mchId" label="商户id" min-width="120" :show-overflow-tooltip="true" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_mchId">{{scope.row.F_mchId}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_mchKey" label="商户密钥"  min-width="120"  align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_mchKey">{{scope.row.F_mchKey}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_certSerialNo" label="商户证书序列号"  min-width="120"  align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_certSerialNo">{{scope.row.F_certSerialNo}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_apiV3Key" label="APIv3密钥"  min-width="120" :show-overflow-tooltip="true" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_apiV3Key">{{scope.row.F_apiV3Key}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_keyPath"  min-width="270" label=" .p12 格式的密钥文件路径，私钥和证书" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_keyPath">{{scope.row.F_keyPath}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_privateKeyPath" label="私钥文件路径"  min-width="180" :show-overflow-tooltip="true" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_privateKeyPath">{{scope.row.F_privateKeyPath}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="F_privateCertPath" label="私有证书文件路径"  min-width="140" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.F_privateCertPath">{{scope.row.F_privateCertPath}}</span>
+              <span v-else>— —</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="state" label="操作" fixed="right"  min-width="160" align="center">
+            <template slot-scope="scope">
+              <el-button type="text" @click="hanleOpt('edit',scope.row)">编辑</el-button>
+              <el-button type="text" @click="hanleOpt('delete',scope.row)" style="color:red;">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-col>
+      <el-col :span="24">
+        <el-pagination
+          style="float: right;margin-top: 10px;"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+          :current-page="pageParam.page"
+          :page-sizes="[10,20,,50,100]"
+          :page-size="pageParam.size"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pageParam.total"
+        >
+        </el-pagination>
+      </el-col>
+    </el-row>
+    <el-dialog
+      v-if="dialogParams.showDialogVisible"
+      :title="dialogParams.title"
+      :visible.sync="dialogParams.dialogVisible"
+      width="60%"
+      @close="handleDialogClose">
+      <el-row>
+        <el-form :model="dialogParams"  :rules="dialogRules" ref="dialogParams" label-width="140px">
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="支付类型:" prop="zflx">
+                <el-input v-model="dialogParams.zflx" placeholder="请输入支付类型" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="应用id:" prop="appId">
+                <el-input v-model="dialogParams.appId" placeholder="请输入应用id" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="商户id:" prop="mchId">
+                <el-input v-model="dialogParams.mchId" placeholder="请输入商户id" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="商户密钥:" prop="mchKey">
+                <el-input v-model="dialogParams.mchKey" placeholder="请输入商户密钥" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="商户证书序列号:" prop="certSerialNo">
+                <el-input v-model="dialogParams.certSerialNo" placeholder="请输入商户证书序列号" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="APIv3密钥:" prop="apiV3Key">
+                <el-input v-model="dialogParams.apiV3Key" placeholder="请输入APIv3密钥" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label="私钥文件路径:" prop="privateKeyPath">
+                <el-input v-model="dialogParams.privateKeyPath" placeholder="请输入私钥文件路径" clearable></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="私有证书文件路径:" prop="privateCertPath">
+                <el-input v-model="dialogParams.privateCertPath"  placeholder="请输入私有证书文件路径" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+          <el-col :span="24">
+            <el-col :span="12">
+              <el-form-item label=".p12格式的密钥:" prop="keyPath">
+                <el-input v-model="dialogParams.keyPath" placeholder="请输入.p12 格式的密钥文件路径，私钥和证书" clearable></el-input>
+              </el-form-item>
+            </el-col>
+          </el-col>
+        </el-form>
+      </el-row>
+      <span slot="footer" class="dialog-footer">
+          <el-button @click="handleDialogClose">取 消</el-button>
+          <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button>
+        </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import {deletePaymentPort, addOrEditPaymentPort, paymentTableDataPort} from '@/api/regionalManage'
+import moment from "moment";
+
 export default {
   name: "paymentManage",
   props:{
-    type:Object,
-    default:{}
+    rowData:{
+      type:Object,
+      default:()=>{}
+    }
   },
-  mounted() {
+  async mounted() {
+    await this.getDataList();
   },
   data(){
     return {
+      filterText:'',
+      showResetDialog:false,
+      showQrCodeVisible:false,
+      showDialog:false,
+      dialogParams:{
+        showDialogVisible:false,
+        cjr:'',
+        cjsj:'',
+        gxsj:'',
+        gxr:'',
+        title:'新增区域',
+        id_:'',
+        czID:'',
+        czmc: '',
+        qyID: '',
+        qymc: '',
+        dialogVisible:false,
+        zflx:'',
+        appId:'',
+        mchId:'',
+        mchKey:'',
+        certSerialNo:'',
+        apiV3Key:'',
+        keyPath:'',
+        privateKeyPath:'',
+        privateCertPath:'',
+        dialogType:'',
+        form_data_rev_:''
+      },
+      dialogRules:{
+        zflx:[
+          {required:true,message:'请输入支付类型',trigger:'blur'}
+        ],
+        appId:[
+          {required:true,message:'请输入应用id',trigger:'blur'}
+        ],
+        mchId:[
+          {required:true,message:'请输入商户id',trigger:'blur'}
+        ],
+        mchKey:[
+          {required:true,message:'请输入商户密钥',trigger:'blur'}
+        ],
+        certSerialNo:[
+          {required:true,message:'请输入商户证书序列号',trigger:'blur'}
+        ],
+        apiV3Key:[
+          {required:true,message:'请输入APIv3密钥',trigger:'blur'}
+        ],
+        keyPath:[
+          {required:true,message:'请输入.p12 格式的密钥文件路径，私钥和证书',trigger:'blur'}
+        ],
+        privateKeyPath:[
+          {required:true,message:'请输入私钥文件路径',trigger:'blur'}
+        ],
+        privateCertPath:[
+          { required:true,message:'请输入私有证书文件路径',trigger:'blur'}
+        ]
+      },
+      queryForm:{
+        F_zflx:'',
+        F_appId:'',
+        F_mchId:'',
+        orgId:''
+      },
+      pageParam:{
+        page:1,
+        size:10,
+        total:0
+      },
+      loading:false,
+      tableData:[],
 
     }
   },
   methods:{
-
+    //查询列表事件
+    //获取table表格数据
+    async getDataList(){
+      let params ={
+        pageBean:{
+          page:this.pageParam.page,
+          pageSize:this.pageParam.size,
+          showTotal:true
+        },
+        querys:[]
+      }
+      if(this.queryForm.F_zflx){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_zflx',
+          relation:'AND',
+          value:this.queryForm.F_zflx
+        })
+      }
+      if(this.queryForm.F_appId){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_appId',
+          relation:'AND',
+          value:this.queryForm.F_appId
+        })
+      }
+      if(this.queryForm.F_mchId){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_mchId',
+          relation:'AND',
+          value:this.queryForm.F_mchId
+        })
+      }
+      if(this.rowData.fSsczid){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_czID',
+          relation:'AND',
+          value:this.rowData.fSsczid
+        })
+      }
+      if(!this.rowData.fSsczid&&this.rowData.qyID){
+        params.querys.push({
+          group:'main',
+          operation:'LIKE',
+          property:'F_qyid',
+          relation:'AND',
+          value:this.rowData.qyID
+        })
+      }
+      this.loading = true;
+      await paymentTableDataPort(params).then((res)=>{
+        const { rows,total } = res;
+        this.tableData = rows;
+        this.pageParam.total = total;
+        setTimeout(()=>{
+          this.loading = false;
+        },500)
+      })
+    },
+    //重置按钮事件
+    handleReset(){
+      this.queryForm.F_zflx ='';
+      this.queryForm.appId ='';
+      this.queryForm.mchId ='';
+      this.pageParam.page = 1;
+      this.handleSearch();
+    },
+    //查询按钮事件
+    handleSearch(){
+      this.getDataList();
+    },
+    //新增用户事件
+    handleAdd(){
+      this.showDialog = true;
+      this.$nextTick(()=>{
+        this.$refs.showDialog.open('add');
+      })
+    },
+    //分页中页数跳转事件
+    handleCurrentChange(val){
+      this.pageParam.page = val;
+      this.handleSearch();
+    },
+    //分页中size改变的界面跳转事件
+    handleSizeChange(val){
+      this.pageParam.size = val;
+      this.handleSearch();
+    },
+    //提交事件
+    async handleSubmit(formName){
+      this.$refs[formName].validate(async (valid) => {
+        if (valid) {
+          let params = {
+            qymc:this.dialogParams.qymc?this.dialogParams.qymc:'',
+            qyID:this.dialogParams.qyID?this.dialogParams.qyID:'',
+            czID:this.dialogParams.czID?this.dialogParams.czID:'',
+            czmc:this.dialogParams.czmc?this.dialogParams.czmc:'',
+            zflx:this.dialogParams.zflx?this.dialogParams.zflx:'',
+            appId:this.dialogParams.appId?this.dialogParams.appId:'',
+            mchId:this.dialogParams.mchId?this.dialogParams.mchId:'',
+            mchKey:this.dialogParams.mchKey?this.dialogParams.mchKey:'',
+            certSerialNo:this.dialogParams.certSerialNo?this.dialogParams.certSerialNo:'',
+            apiV3Key:this.dialogParams.apiV3Key?this.dialogParams.apiV3Key:'',
+            keyPath:this.dialogParams.keyPath?this.dialogParams.keyPath:'',
+            privateKeyPath:this.dialogParams.privateKeyPath?this.dialogParams.privateKeyPath:'',
+            privateCertPath:this.dialogParams.privateCertPath?this.dialogParams.privateCertPath:'',
+            cjr:this.dialogParams.cjr?this.dialogParams.cjr:'',
+            cjsj:this.dialogParams.cjsj?this.dialogParams.cjsj:'',
+            gxr:'',
+            gxsj:''
+          }
+          if(this.dialogParams.dialogType == 'edit'){
+            this.dialogParams.gxsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
+            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
+            params = {
+              ...params,
+              id_:this.dialogParams.id_?this.dialogParams.id_:'',
+              form_data_rev_:this.dialogParams.form_data_rev_?this.dialogParams.form_data_rev_:0,
+              gxr: this.dialogParams.gxr?this.dialogParams.gxr:'',
+              gxsj: this.dialogParams.gxsj?this.dialogParams.gxsj:'',
+            }
+            this.submitAddOrEditEquipment(params);
+          }else{
+            this.dialogParams.cjsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
+            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
+            params = {
+              ...params,
+              cjsj: this.dialogParams.cjsj?this.dialogParams.cjsj:'',
+              cjr: this.dialogParams.cjr?this.dialogParams.cjr:'',
+            }
+            this.submitAddOrEditEquipment(params);
+          }
+        } else {
+          return false;
+        }
+      });
+    },
+    //提交编辑设备接口事件
+    async submitAddOrEditEquipment(params){
+      await addOrEditPaymentPort(params).then((res)=>{
+        console.log('打印新增编辑的res====>',res);
+        const { code } = res;
+        if(code == 200){
+          this.dialogParams.dialogVisible = false;
+          this.dialogParams.showDialogVisible = false;
+          this.handleSearch();
+        }
+      })
+    },
+    //操作栏按钮
+    async hanleOpt(type,row){
+      console.log('打印row=====>',row);
+      this.dialogParams.dialogType= type;
+      switch (type){
+        case 'add':
+          this.dialogParams.czID = this.rowData.fSsczid;
+          this.dialogParams.czmc = this.rowData.czmc;
+          this.dialogParams.qyID = this.rowData.qyID;
+          this.dialogParams.qymc = this.rowData.qymc;
+          this.dialogParams.spldz = '';
+          this.dialogParams.id_ = '';
+          this.dialogParams.zflx = '';
+          this.dialogParams.appId = '';
+          this.dialogParams.mchId ='';
+          this.dialogParams.mchKey = '';
+          this.dialogParams.certSerialNo = '';
+          this.dialogParams.apiV3Key = '';
+          this.dialogParams.keyPath = '';
+          this.dialogParams.privateKeyPath = '';
+          this.dialogParams.privateCertPath = '';
+          this.dialogParams.cjr = this.$store.state.user.username?this.$store.state.user.username:'';
+          this.dialogParams.cjsj = '';
+          this.dialogParams.title='新增支付';
+          // await this.getEquipmentNum();
+          break;
+        case 'edit':
+          this.dialogParams.id_ = row.ID_;
+          this.dialogParams.title='编辑支付';
+          this.dialogParams.zflx = row.F_zflx;
+          this.dialogParams.appId = row.F_appId;
+          this.dialogParams.mchId = row.F_mchId;
+          this.dialogParams.mchKey = row.F_mchKey;
+          this.dialogParams.certSerialNo = row.F_certSerialNo;
+          this.dialogParams.apiV3Key = row.F_apiV3Key;
+          this.dialogParams.keyPath = row.F_keyPath;
+          this.dialogParams.privateKeyPath = row.F_privateKeyPath;
+          this.dialogParams.privateCertPath = row.F_privateCertPath;
+          this.dialogParams.qymc = row.F_qymc;
+          this.dialogParams.qyID = row.F_qyID;
+          this.dialogParams.czmc = row.F_czmc;
+          this.dialogParams.czID = row.F_czID;
+          this.dialogParams.cjsj = row.F_cjsj;
+          this.dialogParams.cjr = row.F_cjr;
+          this.dialogParams.gxr = row.F_gxr;
+          this.dialogParams.gxsj = row.F_gxsj;
+          this.dialogParams.form_data_rev_ = row.F_form_data_rev_;
+          break;
+        case 'delete':
+          this.$confirm('确定是否删除该设备？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning',
+          }).then(async() => {
+            await deletePaymentPort({ids:row.ID_}).then((res)=>{
+              this.handleSearch();
+            })
+          })
+          break;
+      }
+      if(!this.rowData.fSsczid && type == 'add'){
+        this.$message.warning('请选择厂站!')
+        return
+      }
+      if(type !== 'delete'){
+        this.dialogParams.showDialogVisible = true;
+        this.$nextTick(()=>{
+          this.dialogParams.dialogVisible = true;
+        })
+      }
+    },
+    //弹窗关闭
+    handleDialogClose(){
+      this.$refs.dialogParams.resetFields();
+      this.dialogParams.dialogVisible = false;
+      this.dialogParams.showDialogVisible = false;
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.componentsSty{
+  width: calc(100% - 30px);
+  height: 100%;
+}
 
 </style>
diff --git a/frontend/front/src/views/pages/regionalManage/components/personDialogInfo.vue b/frontend/front/src/views/pages/regionalManage/components/personDialogInfo.vue
index b35741b..42a8a40 100644
--- a/frontend/front/src/views/pages/regionalManage/components/personDialogInfo.vue
+++ b/frontend/front/src/views/pages/regionalManage/components/personDialogInfo.vue
@@ -600,8 +600,8 @@ export default {
       }
     },
     handlePictureCardRemove(file, fileList) {
-      console.log(file, this.fileList);
-      const index = this.fileList.findIndex((item) => {
+      console.log(file, this.pictureFileList);
+      const index = this.pictureFileList.findIndex((item) => {
         return item.uid === file.uid
       })
       this.pictureFileList.splice(index, 1);
diff --git a/frontend/front/src/views/pages/regionalManage/index.vue b/frontend/front/src/views/pages/regionalManage/index.vue
index 50e4703..991b909 100644
--- a/frontend/front/src/views/pages/regionalManage/index.vue
+++ b/frontend/front/src/views/pages/regionalManage/index.vue
@@ -121,7 +121,7 @@ export default {
       treeData:[],
       queryForm:{
         orgId:'',
-        tabType:'person'
+        tabType:'car'
       },
       loading:false,
       dataList:[],
--
libgit2 0.21.2