互联互通复选框提交

jsowell-ui/src/views/pile/station/detail.vue

@@ -16,55 +16,31 @@
       <el-tab-pane label="基本资料" name="stationInfo">
         <div class="over">
           <div id="map_wrap">
-            <MapContainer
+            <MapContainer ref="map" :stationLat="stationLat" :stationLng="stationLng" />
-              ref="map"
-              :stationLat="stationLat"
-              :stationLng="stationLng"
-            />
           </div>
           <div class="menu">
             <site-info ref="stationInfo" />
           </div>
         </div>
       </el-tab-pane>
-
-      <!--<el-tab-pane label="账单" ></el-tab-pane>-->
-
       <el-tab-pane label="计费模块" name="billing">
         <!-- billing 文件到时引入 -->
         <billing ref="billing" :stationId="stationId" />
       </el-tab-pane>
-
-      <!--      <el-tab-pane label="客户管理" name="member">-->
-      <!--        角色管理-->
-      <!--      </el-tab-pane>-->
-
       <el-tab-pane label="运营管理" name="operation">
         <el-card style="margin-bottom: 10px">
           <h2>二维码配置</h2>
-          <el-form
+          <el-form label-position="right" label-width="200px" style="margin-top: 10px">
-            label-position="right"
-            label-width="200px"
-            style="margin-top: 10px"
-          >
             <el-row>
               <el-col :span="12">
                 <el-form-item label="当前配置二维码规则:">
-                  <el-input
+                  <el-input v-model="stationDetail.qrcodePrefix" maxlength="100px" :disabled="true" />
-                    v-model="stationDetail.qrcodePrefix"
-                    maxlength="100px"
-                    :disabled="true"
-                  />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item>
-                  <el-button
+                  <el-button icon="el-icon-setting" size="big" @click="handleCreate"
-                    icon="el-icon-setting"
+                    v-has-permi="['pile:station:edit']">配置参数
-                    size="big"
-                    @click="handleCreate"
-                    v-has-permi="['pile:station:edit']"
-                    >配置参数
                   </el-button>
                 </el-form-item>
               </el-col>
@@ -74,131 +50,23 @@
 
         <el-card>
           <h2>互联互通配置</h2>
-          <el-button
+          <el-button icon="el-icon-edit" size="big" @click="openEdit" v-has-permi="['pile:station:edit']">编辑参数
-            icon="el-icon-edit"
-            size="big"
-            @click="openEdit"
-            v-has-permi="['pile:station:edit']"
-            >编辑参数
           </el-button>
-          <el-form
+          <el-form ref="stationSettingForm" :model="stationSettingInfo" label-position="right" label-width="200px"
-            ref="stationSettingForm"
+            style="margin-top: 10px">
-            :model="stationSettingInfo"
-            label-position="right"
-            label-width="200px"
-            style="margin-top: 10px"
-          >
             <el-row>
               <el-col :span="12">
                 <el-form-item label="对接平台名称:" prop="type">
                   <el-checkbox-group v-model="checkList">
-                        <el-checkbox  v-for="dict in dict.type.third_party_type"
+                    <el-checkbox v-for="dict in dict.type.third_party_type" :label="dict.label" :key="dict.value"
-                            :label="dict.label"
+                      :value="dict.value" :disabled="firstList.includes(dict.label)"
-                            :key="dict.value"
+                      @change="getPlatform(dict.raw.dictValue)" />
-                            :value="dict.value"
-                        />
-
-<!--                        <el-checkbox label="复选框 A"></el-checkbox>-->
-<!--                        <el-checkbox label="复选框 B"></el-checkbox>-->
-<!--                        <el-checkbox label="复选框 C"></el-checkbox>-->
-<!--                        <el-checkbox label="禁用" disabled></el-checkbox>-->
-<!--                        <el-checkbox label="选中且禁用" disabled></el-checkbox>-->
                   </el-checkbox-group>
-<!--                  <el-select-->
-<!--                    v-model="stationSettingInfo.type"-->
-<!--                    placeholder="请选择对接平台名称"-->
-<!--                    clearable-->
-<!--                    filterable-->
-<!--                    style="width: 220px"-->
-<!--                    :disabled="disableFlag"-->
-<!--                    @change="getSettingParams"-->
-<!--                  >-->
-<!--                    &lt;!&ndash;                    <el-option label="上海联联平台" value="1" />&ndash;&gt;-->
-<!--                    &lt;!&ndash;                    <el-option label="abc" value="2" />&ndash;&gt;-->
-<!--                    <el-option-->
-<!--                      v-for="dict in dict.type.third_party_type"-->
-<!--                      :key="dict.value"-->
-<!--                      :label="dict.label"-->
-<!--                      :value="dict.value"-->
-<!--                    />-->
-<!--                  </el-select>-->
-                  <!--                  <el-input placeholder="请输入" v-model="stationSettingInfo.type" :disabled="disableFlag"/>-->
                 </el-form-item>
               </el-col>
-<!--              <el-col :span="12">-->
-<!--                <el-form-item label="对接平台url地址:" prop="urlAddress">-->
-<!--                  <el-input-->
-<!--                    placeholder="请输入"-->
-<!--                    v-model="stationSettingInfo.urlAddress"-->
-<!--                    :disabled="true"-->
-<!--                  />-->
-<!--                </el-form-item>-->
-<!--              </el-col>-->
-<!--              <el-col :span="12">-->
-<!--                <el-form-item label="运营商ID(OperatorID):" prop="operatorId">-->
-<!--                  <el-input-->
-<!--                    placeholder="请输入"-->
-<!--                    v-model="stationSettingInfo.operatorId"-->
-<!--                    :disabled="true"-->
-<!--                  />-->
-<!--                </el-form-item>-->
-<!--              </el-col>-->
-<!--              <el-col :span="12">-->
-<!--                <el-form-item-->
-<!--                  label="运营商密钥(OperatorSecret):"-->
-<!--                  prop="operatorSecret"-->
-<!--                >-->
-<!--                  <el-input-->
-<!--                    placeholder="请输入"-->
-<!--                    v-model="stationSettingInfo.operatorSecret"-->
-<!--                    :disabled="true"-->
-<!--                  />-->
-<!--                </el-form-item>-->
-<!--              </el-col>-->
-<!--            </el-row>-->
-<!--            <el-row>-->
-<!--              <el-col :span="12">-->
-<!--                <el-form-item-->
-<!--                  label="消息Data密钥(DataSecret):"-->
-<!--                  prop="dataSecret"-->
-<!--                >-->
-<!--                  <el-input-->
-<!--                    placeholder="请输入"-->
-<!--                    v-model="stationSettingInfo.dataSecret"-->
-<!--                    :disabled="true"-->
-<!--                  />-->
-<!--                </el-form-item>-->
-<!--              </el-col>-->
-<!--              <el-col :span="12">-->
-<!--                <el-form-item label="签名密钥(SigSecret):" prop="signSecret">-->
-<!--                  <el-input-->
-<!--                    placeholder="请输入"-->
-<!--                    v-model="stationSettingInfo.signSecret"-->
-<!--                    :disabled="true"-->
-<!--                  />-->
-<!--                </el-form-item>-->
-<!--              </el-col>-->
-<!--            </el-row>-->
-<!--            <el-row>-->
-<!--              <el-col :span="12">-->
-<!--                <el-form-item-->
-<!--                  label="消息Data密钥初始化向量(DataSecretIV):"-->
-<!--                  prop="dataSecretIv"-->
-<!--                >-->
-<!--                  <el-input-->
-<!--                    placeholder="请输入"-->
-<!--                    v-model="stationSettingInfo.dataSecretIv"-->
-<!--                    :disabled="true"-->
-<!--                  />-->
-<!--                </el-form-item>-->
-<!--              </el-col>-->
               <el-col :span="12">
                 <el-form-item>
-                  <el-button
+                  <el-button size="big" @click="pushStation" v-has-permi="['pile:station:edit']">
-                    size="big"
-                    @click="pushStation"
-                    v-has-permi="['pile:station:edit']"
-                  >
                     推送站点信息
                   </el-button>
                 </el-form-item>
@@ -209,90 +77,48 @@
 
         <el-card>
           <h2>绑定停车平台(配置完成后，订单完成将自动下发优惠券)</h2>
-          <el-button
+          <el-button icon="el-icon-edit" size="big" @click="parkingOpenEdit" v-has-permi="['pile:station:edit']">编辑参数
-            icon="el-icon-edit"
-            size="big"
-            @click="parkingOpenEdit"
-            v-has-permi="['pile:station:edit']"
-            >编辑参数
           </el-button>
-          <el-form
+          <el-form ref="parkingForm" :model="parkingInfo" label-position="right" label-width="200px"
-            ref="parkingForm"
+            style="margin-top: 10px">
-            :model="parkingInfo"
-            label-position="right"
-            label-width="200px"
-            style="margin-top: 10px"
-          >
             <el-row>
               <el-col :span="5">
                 <el-form-item label="停车平台名称:" prop="type">
-                  <el-select
+                  <el-select v-model="parkingInfo.parkingName" placeholder="请选择停车平台名称" clearable filterable
-                    v-model="parkingInfo.parkingName"
+                    style="width: 220px" :disabled="parkingDisableFlag" @change="getParkingInfo($event)">
-                    placeholder="请选择停车平台名称"
+                    <el-option v-for="item in parkingInfoList" :key="item.id" :label="item.parkingName"
-                    clearable
+                      :value="item.id" />
-                    filterable
-                    style="width: 220px"
-                    :disabled="parkingDisableFlag"
-                    @change="getParkingInfo($event)"
-                  >
-                    <el-option
-                      v-for="item in parkingInfoList"
-                      :key="item.id"
-                      :label="item.parkingName"
-                      :value="item.id"
-                    />
                   </el-select>
-                  <!--                  <el-input placeholder="请输入" v-model="stationSettingInfo.type" :disabled="disableFlag"/>-->
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item>
-                  <el-button
+                  <el-button size="big" @click="saveParkingSetting(parkingInfo.id)" v-has-permi="['pile:station:edit']">
-                    size="big"
-                    @click="saveParkingSetting(parkingInfo.id)"
-                    v-has-permi="['pile:station:edit']"
-                  >
                     保存
                   </el-button>
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="停车场库secretKey:" prop="secretKey">
-                  <el-input
+                  <el-input placeholder="请输入" v-model="parkingInfo.secretKey" :disabled="true" />
-                    placeholder="请输入"
-                    v-model="parkingInfo.secretKey"
-                    :disabled="true"
-                  />
                 </el-form-item>
               </el-col>
 
               <el-col :span="12">
                 <el-form-item label="停车场库appId:" prop="appId">
-                  <el-input
+                  <el-input placeholder="请输入" v-model="parkingInfo.appId" :disabled="true" />
-                    placeholder="请输入"
-                    v-model="parkingInfo.appId"
-                    :disabled="true"
-                  />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row>
               <el-col :span="12">
                 <el-form-item label="票券id:" prop="couponId">
-                  <el-input
+                  <el-input placeholder="请输入" v-model="parkingInfo.couponId" :disabled="false" />
-                    placeholder="请输入"
-                    v-model="parkingInfo.couponId"
-                    :disabled="false"
-                  />
                 </el-form-item>
               </el-col>
               <el-col :span="12">
                 <el-form-item label="停车场库商户id:" prop="parkingMerchantId">
-                  <el-input
+                  <el-input placeholder="请输入" v-model="parkingInfo.parkingMerchantId" :disabled="false" />
-                    placeholder="请输入"
-                    v-model="parkingInfo.parkingMerchantId"
-                    :disabled="false"
-                  />
                 </el-form-item>
               </el-col>
             </el-row>
@@ -301,22 +127,13 @@
 
         <el-card style="margin-top: 10px">
           <h2>地锁二维码</h2>
-          <el-form
+          <el-form label-position="right" label-width="200px" style="margin-top: 10px">
-            label-position="right"
-            label-width="200px"
-            style="margin-top: 10px"
-          >
             <el-row>
               <el-col :span="12">
                 <el-form-item label="查询地锁列表二维码:" />
                 <div>
-                  <vue-qr
+                  <vue-qr ref="Qrcode" :text="queryGroundLockQrCode" qid="lockListQrCode" :width="150"
-                    ref="Qrcode"
+                    style="margin-left: 190px; margin-top: -10px" />
-                    :text="queryGroundLockQrCode"
-                    qid="lockListQrCode"
-                    :width="150"
-                    style="margin-left: 190px; margin-top: -10px"
-                  />
                 </div>
               </el-col>
             </el-row>
@@ -336,11 +153,7 @@
     <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
       <el-form ref="form" :model="form" @submit.native.prevent>
         <el-form-item label="二维码前缀:" prop="prefix" label-width="100px">
-          <el-input
+          <el-input v-model="form.prefix" placeholder="请输入二维码前缀" style="width: 300px" />
-            v-model="form.prefix"
-            placeholder="请输入二维码前缀"
-            style="width: 300px"
-          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer" align="center">
@@ -408,6 +221,8 @@ export default {
       stationSettingInfo: {},
       disableFlag: true,
       parkingDisableFlag: true,
+      exchange: [],
+      firstList: [], //第一次复选框的默认值
     };
   },
   created() {
@@ -423,7 +238,6 @@ export default {
     this.getRelationByStationId();
     this.getParkingList();
     this.queryStationInfo();
-
   },
   mounted() {
     this.initializeData(this.activeName);
@@ -472,10 +286,11 @@ export default {
         console.log("stationId:", this.stationId);
         console.log("res", res);
         console.log("res.rows", res.rows);
-        res.rows.forEach((item, index) =>{
+        res.rows.forEach((item, index) => {
           this.checkList.push(item.thirdPartyType);
+          this.firstList.push(item.thirdPartyType);
         })
-            console.log("this.checkList", this.checkList);
+        console.log("this.checkList", this.checkList, this.firstList);
         // if (res.data === undefined) {
         //   this.stationSettingInfo.thirdPartyType = "0";
         // } else {
@@ -553,10 +368,12 @@ export default {
     },
     // 推送站点
     pushStation() {
+      let exchange = ''
       const param = {
         stationId: this.stationId,
-        thirdPartyType: this.stationSettingInfo.type,
+        thirdPartyTypes: this.exchange,
       };
+      console.log('param', param);
       pushStationInfo(param).then((response) => {
         console.log("response", response);
         this.$modal.msg(response.obj);
@@ -606,6 +423,19 @@ export default {
     cancel() {
       this.dialogFormVisible = false;
     },
+    // 复选框状态
+    getPlatform(id) {
+      this.exchange.push(id);
+    }
+  },
+  //监听复选框状态
+  watch: {
+    checkList: {
+      handler(newVal) {
+        this.exchange = newVal.map(item => this.dict.type.third_party_type.find(dict => dict.label === item)?.raw?.dictValue);
+      },
+      deep: true,
+    },
   },
 };
 </script>
@@ -616,6 +446,7 @@ export default {
   height: 400px;
   // margin-left: 50%; transform: translate(-50%,0);
 }
+
 ::v-deep .Input .el-input--medium {
   width: 400px;
 }