多小程序配置添加绑定解绑

src/api/course/coursePlaySourceConfig.js

@@ -31,6 +31,22 @@ export function update(data) {
   })
 }
 
+export function updateBindConfig(data) {
+  return request({
+    url: '/course/playSourceConfig/updateBindConfig',
+    method: 'put',
+    data: data
+  })
+}
+
+export function updateUnbindConfig(data) {
+  return request({
+    url: '/course/playSourceConfig/updateUnbindConfig',
+    method: 'put',
+    data: data
+  })
+}
+
 export function del(id) {
   return request({
     url: '/course/playSourceConfig/' + id,

src/views/course/coursePlaySourceConfig/index.vue

@@ -190,6 +190,20 @@
             icon="el-icon-setting"
             @click="handleSwitchConfig(scope.row)"
           >是否展示销售</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleBind(scope.row)"
+            v-hasPermi="['course:playSourceConfig:bind']"
+          >绑定</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUnbind(scope.row)"
+            v-hasPermi="['course:playSourceConfig:unbind']"
+          >解绑</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -322,19 +336,67 @@
       </div>
     </el-dialog>
 
+    <!-- 绑定  -->
+    <el-dialog :title="bindForm.bindTitle" :visible.sync="bindForm.bindShow" width="800px" append-to-body :before-close="handleBindClose">
+      <el-form ref="bindForm" :model="bindForm" :rules="bindRules" label-width="130px">
+        <el-form-item label="商户类型" prop="merchantType">
+          <el-select v-model="bindForm.merchantType" placeholder="请选择商户类型" clearable size="small" @change="changeSysPayModes">
+            <el-option
+              v-for="dict in sysPayModes"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="商户号" prop="merchantId">
+          <el-select v-model="bindForm.id" placeholder="请选择商户号" clearable size="small">
+            <el-option
+              v-for="dict in merchantAppConfigList"
+              :key="dict.id"
+              :label="dict.merchantId"
+              :value="dict.id"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFormBind(bindCurrentRow)" >确 定</el-button>
+        <el-button @click="cancelBind">取 消</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
-import {list, get, update, add, del} from '@/api/course/coursePlaySourceConfig'
+import {
+  list,
+  get,
+  update,
+  add,
+  del,
+  updateBindConfig,
+  updateUnbindConfig
+} from '@/api/course/coursePlaySourceConfig'
 import {updateIsTownOn} from "@/api/system/config";
 import { allList } from '@/api/company/company'
 import { resetForm } from '@/utils/common'
+import { listMerchantAppConfig } from "@/api/merchantAppConfig/merchantAppConfig";
 
 export default {
   name: 'CoursePlaySourceConfig',
   data() {
     return {
+      sysPayModes: [],
+      bindCurrentRow: {},
+      bindForm:{
+        bindTitle: '绑定支付配置',
+        bindShow: false,
+        merchantType: null,
+        id:null,
+      },
+      merchantAppConfigList:[],
       switchDialogVisible: false,
       // 公司搜索相关
       companySearchLoading: false,
@@ -388,6 +450,14 @@ export default {
       form: {
         setCompanyIdList: []
       },
+      bindRules:{
+        merchantType: [
+          { required: true, message: "商户类型不能为空", trigger: "blur" }
+        ],
+        id: [
+          { required: true, message: "商户号不能为空", trigger: "blur" }
+        ]
+      },
       rules: {
         name: [
           { required: true, message: "名称不能为空", trigger: "blur" }
@@ -423,6 +493,9 @@ export default {
     }
   },
   created() {
+    this.getDicts("sys_pay_mode").then(response => {
+      this.sysPayModes = response.data;
+    });
     this.getDicts("play_source_type").then(response => {
       this.typesOptions = response.data.map(item =>  {
         return {
@@ -443,7 +516,88 @@ export default {
       this.companyOptions = [];
       this.open = false;
     },
+    handleUnbind(row) {
+      this.$confirm('是否确认解绑该配置?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        const params = {
+          id: row.id
+        };
+        updateUnbindConfig(params).then(response => {
+          if (response.code === 200) {
+            this.msgSuccess("解绑成功");
+            this.getList();
+          } else {
+            this.msgError("解绑失败: " + response.msg);
+          }
+        }).catch(error => {
+          this.msgError("请求失败: " + error.message);
+        });
+      }).catch(() => {
+        // 用户取消操作
+      });
+    }
+    ,
+    submitFormBind(row) {
+      this.$refs["bindForm"].validate(valid => {
+        if (valid) {
+          // 构造请求参数
+          const params = {
+            id: row.id,  // 使用传入行数据的ID
+            merchantType: this.bindForm.merchantType,
+            merchantConfigId: this.bindForm.id
+          };
 
+          // 调用API更新绑定关系
+          updateBindConfig(params).then(response => {
+            if (response.code === 200) {
+              this.msgSuccess("绑定配置更新成功");
+              this.bindForm.bindShow = false;
+              this.getList(); // 刷新列表数据
+              this.resetForm("bindForm");
+            } else {
+              this.msgError("更新失败: " + response.msg);
+            }
+          }).catch(error => {
+            this.msgError("请求失败: " + error.message);
+          });
+        }
+      });
+    },
+    handleBindClose(done) {
+      this.resetForm("bindForm");
+      this.bindForm.bindShow = false;
+      this.bindForm.id = null;
+      done();
+    },
+    cancelBind(){
+      this.resetForm("bindForm");
+
+      this.bindForm.bindShow = false;  // 关闭对话框
+
+    },
+    // 绑定支付配置
+    handleBind(row) {
+      this.merchantAppConfigList= [];
+      this.bindForm.merchantType = null;
+      this.bindForm.id = null;
+      this.bindCurrentRow = row;  // 保存当前行数据
+      this.bindForm.bindShow = true;
+    },
+    changeSysPayModes(value){
+      console.log(value)
+      const query = {
+        pageNum: 1,
+        pageSize: 100,
+        merchantType: value
+      }
+      listMerchantAppConfig(query).then( response => {
+          this.merchantAppConfigList = response.rows;
+        }
+      )
+    },
 
     // 处理开关配置
     handleSwitchConfig(row) {
@@ -541,8 +695,8 @@ export default {
         }
         if(!!this.form.setCompanyIds){
            this.$set(
-            this.form, 
-            "setCompanyIdList", 
+            this.form,
+            "setCompanyIdList",
             this.form.setCompanyIds.split(",").map(str => parseInt(str, 10))
           );
           // this.form.setCompanyIdList = this.form.setCompanyIds.split(",").map(str => parseInt(str, 10));

src/views/his/merchantAppConfig/index.vue

@@ -11,6 +11,10 @@
           />
         </el-select>
       </el-form-item>
+      <!--  商户号    -->
+      <el-form-item label="商户号" prop="merchantId">
+        <el-input v-model="queryParams.merchantId" placeholder="请输入商户号" clearable size="small" @keyup.enter.native="handleQuery" />
+      </el-form-item>
 <!--      <el-form-item label="应用ID" prop="appIds">-->
 <!--        <el-select-->
 <!--          v-model="queryParams.appIds"-->
@@ -105,8 +109,13 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键ID" align="center" prop="id" />
       <el-table-column label="商户号" align="center" prop="merchantId" />
-      <el-table-column label="商户类型" align="center" prop="merchantType" />
-<!--   appId 转化 appIdOptions   -->
+      <el-table-column label="商户类型" align="center" prop="merchantType">
+        <template slot-scope="scope">
+          <dict-tag :options="sysPayModes" :value="scope.row.merchantType"/>
+        </template>
+      </el-table-column>
+
+      <!--   appId 转化 appIdOptions   -->
       <el-table-column label="应用名称" align="center" prop="appId">
         <template slot-scope="scope">
           <span v-if="scope.row.appId">