index.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. <template>
  2. <div class="app-container">
  3. <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
  4. <!-- 主键ID -->
  5. <el-form-item label="主键ID" prop="id">
  6. <el-input v-model="queryParams.id" placeholder="请输入主键ID" clearable size="small" @keyup.enter.native="handleQuery" />
  7. </el-form-item>
  8. <el-form-item label="商户类型" prop="merchantType">
  9. <el-select v-model="queryParams.merchantType" placeholder="请选择商户类型" clearable size="small">
  10. <el-option
  11. v-for="dict in sysPayModes"
  12. :key="dict.dictValue"
  13. :label="dict.dictLabel"
  14. :value="dict.dictValue"
  15. />
  16. </el-select>
  17. </el-form-item>
  18. <!-- 商户号 -->
  19. <el-form-item label="商户号" prop="merchantId">
  20. <el-input v-model="queryParams.merchantId" placeholder="请输入商户号" clearable size="small" @keyup.enter.native="handleQuery" />
  21. </el-form-item>
  22. <!-- <el-form-item label="应用ID" prop="appIds">-->
  23. <!-- <el-select-->
  24. <!-- v-model="queryParams.appIds"-->
  25. <!-- placeholder="请选择应用ID"-->
  26. <!-- clearable-->
  27. <!-- size="small"-->
  28. <!-- >-->
  29. <!-- <el-option-->
  30. <!-- v-for="dict in appIdOptions"-->
  31. <!-- :key="dict.appid"-->
  32. <!-- :label="dict.name"-->
  33. <!-- :value="dict.appid"-->
  34. <!-- />-->
  35. <!-- </el-select>-->
  36. <!-- </el-form-item>-->
  37. <!-- <el-form-item label="创建时间">-->
  38. <!-- <el-date-picker-->
  39. <!-- v-model="daterangeCreatedTime"-->
  40. <!-- size="small"-->
  41. <!-- style="width: 240px"-->
  42. <!-- value-format="yyyy-MM-dd"-->
  43. <!-- type="daterange"-->
  44. <!-- range-separator="-"-->
  45. <!-- start-placeholder="开始日期"-->
  46. <!-- end-placeholder="结束日期"-->
  47. <!-- ></el-date-picker>-->
  48. <!-- </el-form-item>-->
  49. <el-form-item label="状态" prop="isDeleted">
  50. <el-select v-model="queryParams.isDeleted" placeholder="请选择状态" clearable size="small">
  51. <el-option
  52. v-for="dict in isDeletedOptions"
  53. :key="dict.dictValue"
  54. :label="dict.dictLabel"
  55. :value="dict.dictValue"
  56. />
  57. </el-select>
  58. </el-form-item>
  59. <el-form-item>
  60. <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
  61. <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
  62. </el-form-item>
  63. </el-form>
  64. <el-row :gutter="10" class="mb8">
  65. <el-col :span="1.5">
  66. <el-button
  67. type="primary"
  68. plain
  69. icon="el-icon-plus"
  70. size="mini"
  71. @click="handleAdd"
  72. v-hasPermi="['merchantAppConfig:merchantAppConfig:add']"
  73. >新增</el-button>
  74. </el-col>
  75. <!-- <el-col :span="1.5">-->
  76. <!-- <el-button-->
  77. <!-- type="success"-->
  78. <!-- plain-->
  79. <!-- icon="el-icon-edit"-->
  80. <!-- size="mini"-->
  81. <!-- :disabled="single"-->
  82. <!-- @click="handleUpdate"-->
  83. <!-- v-hasPermi="['merchantAppConfig:merchantAppConfig:edit']"-->
  84. <!-- >修改</el-button>-->
  85. <!-- </el-col>-->
  86. <!-- <el-col :span="1.5">-->
  87. <!-- <el-button-->
  88. <!-- type="danger"-->
  89. <!-- plain-->
  90. <!-- icon="el-icon-delete"-->
  91. <!-- size="mini"-->
  92. <!-- :disabled="multiple"-->
  93. <!-- @click="handleDelete"-->
  94. <!-- v-hasPermi="['merchantAppConfig:merchantAppConfig:remove']"-->
  95. <!-- >删除</el-button>-->
  96. <!-- </el-col>-->
  97. <!-- <el-col :span="1.5">-->
  98. <!-- <el-button-->
  99. <!-- type="warning"-->
  100. <!-- plain-->
  101. <!-- icon="el-icon-download"-->
  102. <!-- size="mini"-->
  103. <!-- :loading="exportLoading"-->
  104. <!-- @click="handleExport"-->
  105. <!-- v-hasPermi="['merchantAppConfig:merchantAppConfig:export']"-->
  106. <!-- >导出</el-button>-->
  107. <!-- </el-col>-->
  108. <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  109. </el-row>
  110. <el-table border v-loading="loading" :data="merchantAppConfigList" @selection-change="handleSelectionChange">
  111. <!-- <el-table-column type="selection" width="55" align="center" />-->
  112. <el-table-column label="主键ID" align="center" prop="id" />
  113. <el-table-column label="商户号" align="center" prop="merchantId" />
  114. <el-table-column label="商户类型" align="center" prop="merchantType">
  115. <template slot-scope="scope">
  116. <dict-tag :options="sysPayModes" :value="scope.row.merchantType"/>
  117. </template>
  118. </el-table-column>
  119. <!-- appId 转化 appIdOptions -->
  120. <el-table-column label="应用名称" align="center" prop="appId">
  121. <template slot-scope="scope">
  122. <span v-if="scope.row.appId">
  123. {{ getAppNames(scope.row.appId) }}
  124. </span>
  125. </template>
  126. </el-table-column>
  127. <el-table-column label="应用ID" align="center" prop="appId">
  128. <template slot-scope="scope">
  129. <span>{{ scope.row.appId }}</span>
  130. </template>
  131. </el-table-column>
  132. <el-table-column label="回调地址" align="center" prop="callbackUrl" />
  133. <el-table-column label="配置详情" align="center" prop="dataJson">
  134. <template slot-scope="scope">
  135. <el-button
  136. size="mini"
  137. type="text"
  138. icon="el-icon-edit"
  139. @click="handleView(scope.row)"
  140. >详情</el-button>
  141. </template>
  142. </el-table-column>
  143. <el-table-column label="创建时间" align="center" prop="createdTime" width="180">
  144. <template slot-scope="scope">
  145. <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
  146. </template>
  147. </el-table-column>
  148. <el-table-column label="修改时间" align="center" prop="updatedTime" width="180">
  149. <template slot-scope="scope">
  150. <span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>
  151. </template>
  152. </el-table-column>
  153. <el-table-column label="状态" align="center" prop="isDeleted">
  154. <template slot-scope="scope">
  155. <dict-tag :options="isDeletedOptions" :value="scope.row.isDeleted"/>
  156. </template>
  157. </el-table-column>
  158. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  159. <template slot-scope="scope">
  160. <el-button
  161. size="mini"
  162. type="text"
  163. icon="el-icon-edit"
  164. @click="handleUpdate(scope.row)"
  165. v-hasPermi="['merchantAppConfig:merchantAppConfig:edit']"
  166. >修改</el-button>
  167. <el-button
  168. size="mini"
  169. type="text"
  170. icon="el-icon-delete"
  171. @click="handleDelete(scope.row)"
  172. v-hasPermi="['merchantAppConfig:merchantAppConfig:remove']"
  173. >删除</el-button>
  174. </template>
  175. </el-table-column>
  176. </el-table>
  177. <pagination
  178. v-show="total>0"
  179. :total="total"
  180. :page.sync="queryParams.pageNum"
  181. :limit.sync="queryParams.pageSize"
  182. @pagination="getList"
  183. />
  184. <!-- 添加或修改商户应用配置对话框 -->
  185. <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" append-to-body>
  186. <el-form ref="form" :model="form" :rules="!isViewMode ? rules : {}" label-width="160px" :disabled="isViewMode">
  187. <el-form-item label="商户类型" prop="merchantType">
  188. <el-select
  189. v-model="form.merchantType"
  190. placeholder="请选择商户类型"
  191. :disabled="form.id !== null"
  192. @change="handleMerchantTypeChange"
  193. >
  194. <el-option
  195. v-for="dict in sysPayModes"
  196. :key="dict.dictValue"
  197. :label="dict.dictLabel"
  198. :value="dict.dictValue"
  199. />
  200. </el-select>
  201. </el-form-item>
  202. <el-form-item label="应用ID" prop="appIds">
  203. <el-select
  204. v-model="form.appIds"
  205. placeholder="请选择应用ID"
  206. clearable
  207. size="small"
  208. multiple
  209. >
  210. <el-option
  211. v-for="dict in appIdOptions"
  212. :key="dict.appid"
  213. :label="dict.name"
  214. :value="dict.appid"
  215. />
  216. </el-select>
  217. </el-form-item>
  218. <el-form-item>
  219. <el-divider></el-divider>
  220. </el-form-item>
  221. <!-- 动态渲染不同商户类型的配置表单 -->
  222. <div v-if="form.merchantType">
  223. <!-- 易宝支付配置 -->
  224. <div v-if="form.merchantType === 'yb'">
  225. <el-form-item label="易宝商户号" prop="ybAccount">
  226. <el-input v-model="ybConfig.ybAccount" placeholder="请输入易宝商户号"></el-input>
  227. </el-form-item>
  228. <el-form-item label="易宝Key" prop="ybKey">
  229. <el-input v-model="ybConfig.ybKey" placeholder="请输入易宝Key"></el-input>
  230. </el-form-item>
  231. <el-form-item label="易宝回调地址" prop="ybNotifyUrl">
  232. <el-input v-model="ybConfig.ybNotifyUrl" placeholder="易宝回调地址"></el-input>
  233. </el-form-item>
  234. </div>
  235. <!-- 台州银行配置 -->
  236. <div v-else-if="form.merchantType === 'tz'">
  237. <el-form-item label="台州商户号" prop="tzPlatMerCstNo">
  238. <el-input v-model="tzConfig.tzPlatMerCstNo" placeholder="请输入台州商户号"></el-input>
  239. </el-form-item>
  240. <el-form-item label="台州appSecret" prop="tzAppSecret">
  241. <el-input v-model="tzConfig.tzAppSecret" placeholder="请输入台州appSecret"></el-input>
  242. </el-form-item>
  243. <el-form-item label="台州私钥" prop="tzPrivateKey">
  244. <el-input v-model="tzConfig.tzPrivateKey" placeholder="请输入台州私钥"></el-input>
  245. </el-form-item>
  246. <el-form-item label="台州平台公钥" prop="tzPlatformPublicKey">
  247. <el-input v-model="tzConfig.tzPlatformPublicKey" placeholder="请输入台州平台公钥"></el-input>
  248. </el-form-item>
  249. <el-form-item label="台州appKey" prop="tzAppKey">
  250. <el-input v-model="tzConfig.tzAppKey" placeholder="请输入台州appKey"></el-input>
  251. </el-form-item>
  252. <el-form-item label="台州支付回调地址" prop="tzPayDecrypt">
  253. <el-input v-model="tzConfig.tzPayDecrypt" placeholder="请输入台州支付回调地址"></el-input>
  254. </el-form-item>
  255. <el-form-item label="退款回调地址" prop="tzRefundDecrypt">
  256. <el-input v-model="tzConfig.tzRefundDecrypt" placeholder="请输入退款回调地址"></el-input>
  257. </el-form-item>
  258. <el-form-item label="分账回调地址" prop="tzOrderShareDecrypt">
  259. <el-input v-model="tzConfig.tzOrderShareDecrypt" placeholder="请输入台州分账回调地址"></el-input>
  260. </el-form-item>
  261. </div>
  262. <!-- 微信支付配置 -->
  263. <div v-else-if="form.merchantType === 'wx'">
  264. <el-form-item label="微信商户号" prop="wxMchId">
  265. <el-input v-model="wxConfig.wxMchId" placeholder="请输入微信商户号"></el-input>
  266. </el-form-item>
  267. <el-form-item label="微信Key" prop="wxMchKey">
  268. <el-input v-model="wxConfig.wxMchKey" placeholder="请输入微信Key"></el-input>
  269. </el-form-item>
  270. <el-form-item label="微信商户V3密钥" prop="wxApiV3Key">
  271. <el-input v-model="wxConfig.wxApiV3Key" placeholder="请输入商户V3密钥"></el-input>
  272. </el-form-item>
  273. <el-form-item label="微信回调地址(scrm)" prop="notifyUrlScrm">
  274. <el-input v-model="wxConfig.notifyUrlScrm" placeholder="请输入商城微信回调地址"></el-input>
  275. </el-form-item>
  276. <el-form-item label="p12证书路径" prop="keyPath">
  277. <el-input v-model="wxConfig.keyPath" placeholder="请输入p12证书文件的绝对路径"></el-input>
  278. </el-form-item>
  279. </div>
  280. <!-- 汇付支付配置 -->
  281. <div v-else-if="form.merchantType === 'hf'">
  282. <el-form-item label="汇付产品号" prop="hfProductId">
  283. <el-input v-model="hfConfig.hfProductId" placeholder="汇付产品号"></el-input>
  284. </el-form-item>
  285. <el-form-item label="系统号" prop="hfSysId">
  286. <el-input v-model="hfConfig.hfSysId" placeholder="系统号Key"></el-input>
  287. </el-form-item>
  288. <el-form-item label="商户号" prop="hfHuifuId">
  289. <el-input v-model="hfConfig.huifuId" placeholder="商户号"></el-input>
  290. </el-form-item>
  291. <el-form-item label="商户私钥" prop="hfRsaPrivateKey">
  292. <el-input v-model="hfConfig.hfRsaPrivateKey" placeholder="商户私钥"></el-input>
  293. </el-form-item>
  294. <el-form-item label="汇付公钥" prop="hfRsaPublicKey">
  295. <el-input v-model="hfConfig.hfRsaPublicKey" placeholder="汇付公钥"></el-input>
  296. </el-form-item>
  297. <el-form-item label="汇付支付回调地址" prop="hfPayNotifyUrl">
  298. <el-input v-model="hfConfig.hfPayNotifyUrl" placeholder="汇付支付回调地址"></el-input>
  299. </el-form-item>
  300. <el-form-item label="大额支付回调地址" prop="hfPayOnlineNotifyUrl">
  301. <el-input v-model="hfConfig.hfPayOnlineNotifyUrl" placeholder="汇付支付回调地址"></el-input>
  302. </el-form-item>
  303. <el-form-item label="汇付退款回调地址" prop="hfRefundNotifyUrl">
  304. <el-input v-model="hfConfig.hfRefundNotifyUrl" placeholder="汇付退款回调地址"></el-input>
  305. </el-form-item>
  306. <el-form-item label="汇付大额退款回调地址" prop="hfOnlineRefundNotifyUrl">
  307. <el-input v-model="hfConfig.hfOnlineRefundNotifyUrl" placeholder="汇付分账回调地址"></el-input>
  308. </el-form-item>
  309. </div>
  310. </div>
  311. </el-form>
  312. <div slot="footer" class="dialog-footer">
  313. <el-button type="primary" @click="submitForm" v-if="!isViewMode">确 定</el-button>
  314. <el-button @click="cancel">取 消</el-button>
  315. </div>
  316. </el-dialog>
  317. </div>
  318. </template>
  319. <script>
  320. import { listMerchantAppConfig, getMerchantAppConfig, delMerchantAppConfig, addMerchantAppConfig, updateMerchantAppConfig, exportMerchantAppConfig } from "@/api/merchantAppConfig/merchantAppConfig";
  321. import { listAll } from "@/api/course/coursePlaySourceConfig";
  322. export default {
  323. name: "MerchantAppConfig",
  324. data() {
  325. return {
  326. // 遮罩层
  327. loading: true,
  328. // 导出遮罩层
  329. exportLoading: false,
  330. // 选中数组
  331. ids: [],
  332. // 非单个禁用
  333. single: true,
  334. // 非多个禁用
  335. multiple: true,
  336. // 显示搜索条件
  337. showSearch: true,
  338. // 总条数
  339. total: 0,
  340. // 商户应用配置表格数据
  341. merchantAppConfigList: [],
  342. // 弹出层标题
  343. title: "",
  344. // 创建时间时间范围
  345. daterangeCreatedTime: [],
  346. // 删除状态:0-正常,1-已删除字典
  347. isDeletedOptions: [],
  348. sysPayModes: [],
  349. detailOpen: false, // 详情对话框开关
  350. isViewMode: false, // 是否为查看模式
  351. dialogVisible: false,
  352. // 查询参数
  353. queryParams: {
  354. pageNum: 1,
  355. pageSize: 10,
  356. merchantType: null,
  357. appIds: null,
  358. createdTime: null,
  359. isDeleted: "0",
  360. id: null
  361. },
  362. appIdOptions:[],
  363. ybConfig: {}, // 易宝配置
  364. tzConfig: {}, // 台州银行配置
  365. wxConfig: {}, // 微信配置
  366. hfConfig: {}, // 汇付配置
  367. // 表单参数
  368. form: {
  369. id: null,
  370. merchantType: null,
  371. appIds: [],
  372. callbackUrl: null,
  373. dataJson: null,
  374. createdTime: null,
  375. updatedTime: null,
  376. isDeleted: null,
  377. createdBy: null,
  378. updatedBy: null
  379. },
  380. // 表单校验
  381. rules: {
  382. merchantType: [
  383. { required: true, message: "商户类型不能为空", trigger: "change" }
  384. ],
  385. isDeleted: [
  386. { required: true, message: "删除状态:0-正常,1-已删除不能为空", trigger: "change" }
  387. ],
  388. createdBy: [
  389. { required: true, message: "创建人ID或用户名不能为空", trigger: "blur" }
  390. ],
  391. updatedBy: [
  392. { required: true, message: "修改人ID或用户名不能为空", trigger: "blur" }
  393. ]
  394. }
  395. };
  396. },
  397. created() {
  398. this.getDicts("sys_normal_disable").then(response => {
  399. this.isDeletedOptions = response.data;
  400. });
  401. this.getDicts("sys_pay_mode").then(response => {
  402. this.sysPayModes = response.data;
  403. });
  404. listAll().then(response => {
  405. this.appIdOptions=response.data;
  406. });
  407. this.getList();
  408. },
  409. methods: {
  410. /** 详情按钮操作 */
  411. handleView(row) {
  412. this.isViewMode = true;
  413. this.dialogVisible = true; // 改为设置 dialogVisible
  414. this.title = "查看商户应用配置";
  415. // 加载数据(复用修改逻辑)
  416. getMerchantAppConfig(row.id).then(response => {
  417. // 先设置基础数据
  418. Object.keys(response.data).forEach(key => {
  419. if (key !== 'appIds') { // appIds单独处理
  420. this.$set(this.form, key, response.data[key]);
  421. }
  422. });
  423. // 单独处理 appIds,确保它是响应式的数组
  424. let appIdsArray = [];
  425. if (response.data.appId) {
  426. if (typeof response.data.appId === 'string') {
  427. appIdsArray = response.data.appId.split(',').map(item => item.trim()).filter(item => item);
  428. } else if (Array.isArray(response.data.appId)) {
  429. appIdsArray = [...response.data.appId];
  430. }
  431. }
  432. // 使用 $set 确保响应式
  433. this.$set(this.form, 'appIds', appIdsArray);
  434. // 解析配置详情JSON
  435. if (this.form.dataJson) {
  436. try {
  437. const configData = JSON.parse(this.form.dataJson);
  438. switch(this.form.merchantType) {
  439. case 'yb':
  440. this.ybConfig = { ...configData };
  441. break;
  442. case 'tz':
  443. this.tzConfig = { ...configData };
  444. break;
  445. case 'wx':
  446. this.wxConfig = { ...configData };
  447. break;
  448. case 'hf':
  449. this.hfConfig = { ...configData };
  450. break;
  451. }
  452. } catch (e) {
  453. console.error('解析配置详情失败:', e);
  454. }
  455. }
  456. });
  457. }
  458. ,
  459. /** 关闭详情对话框 */
  460. closeDetailView() {
  461. this.detailOpen = false;
  462. this.isViewMode = false;
  463. this.reset();
  464. },
  465. getAppNames(appIds) {
  466. if (!appIds) return '';
  467. // 处理逗号分隔的字符串
  468. const appIdArray = typeof appIds === 'string' ? appIds.split(',') : Array.isArray(appIds) ? appIds : [appIds];
  469. // 根据 appIdOptions 查找对应的应用名称
  470. const names = appIdArray
  471. .map(id => {
  472. const option = this.appIdOptions.find(opt => opt.appid === id.trim());
  473. return option ? option.name : id;
  474. })
  475. .filter(name => name); // 过滤掉空值
  476. return names.join(', ');
  477. },
  478. /** 商户类型变化处理 */
  479. handleMerchantTypeChange(value) {
  480. // 清空之前的选择
  481. this.ybConfig = {};
  482. this.tzConfig = {};
  483. this.wxConfig = {};
  484. this.hfConfig = {};
  485. },
  486. /** 提交按钮 */
  487. submitForm() {
  488. this.$refs["form"].validate(valid => {
  489. if (valid) {
  490. // 构建配置详情JSON
  491. let configData = {};
  492. switch(this.form.merchantType) {
  493. case 'yb':
  494. configData = { ...this.ybConfig };
  495. break;
  496. case 'tz':
  497. configData = { ...this.tzConfig };
  498. break;
  499. case 'wx':
  500. configData = { ...this.wxConfig };
  501. break;
  502. case 'hf':
  503. configData = { ...this.hfConfig };
  504. break;
  505. }
  506. // 正确处理多选应用ID转字符串
  507. if (this.form.appIds && Array.isArray(this.form.appIds) && this.form.appIds.length > 0) {
  508. this.form.appId = this.form.appIds.join(',');
  509. } else {
  510. this.form.appId = '';
  511. }
  512. // 将配置转换为JSON字符串
  513. this.form.dataJson = JSON.stringify(configData);
  514. if (this.form.id != null) {
  515. updateMerchantAppConfig(this.form).then(response => {
  516. this.msgSuccess("修改成功");
  517. this.dialogVisible = false;
  518. this.getList();
  519. });
  520. } else {
  521. addMerchantAppConfig(this.form).then(response => {
  522. this.msgSuccess("新增成功");
  523. this.dialogVisible = false;
  524. this.getList();
  525. });
  526. }
  527. }
  528. });
  529. },
  530. /** 修改按钮操作 */
  531. /** 修改按钮操作 */
  532. handleUpdate(row) {
  533. this.reset();
  534. const id = row.id || this.ids;
  535. getMerchantAppConfig(id).then(response => {
  536. // 先设置基础数据
  537. Object.keys(response.data).forEach(key => {
  538. if (key !== 'appIds') { // appIds单独处理
  539. this.$set(this.form, key, response.data[key]);
  540. }
  541. });
  542. // 单独处理 appIds,确保它是响应式的数组
  543. let appIdsArray = [];
  544. if (response.data.appId) {
  545. if (typeof response.data.appId === 'string') {
  546. appIdsArray = response.data.appId.split(',').map(item => item.trim()).filter(item => item);
  547. } else if (Array.isArray(response.data.appId)) {
  548. appIdsArray = [...response.data.appId];
  549. }
  550. }
  551. // 使用 $set 确保响应式
  552. this.$set(this.form, 'appIds', appIdsArray);
  553. // 解析配置详情JSON
  554. if (this.form.dataJson) {
  555. try {
  556. const configData = JSON.parse(this.form.dataJson);
  557. switch(this.form.merchantType) {
  558. case 'yb':
  559. this.ybConfig = { ...configData };
  560. break;
  561. case 'tz':
  562. this.tzConfig = { ...configData };
  563. break;
  564. case 'wx':
  565. this.wxConfig = { ...configData };
  566. break;
  567. case 'hf':
  568. this.hfConfig = { ...configData };
  569. break;
  570. }
  571. } catch (e) {
  572. console.error('解析配置详情失败:', e);
  573. }
  574. }
  575. this.isViewMode = false; // 添加此行
  576. this.dialogVisible = true; // 替代 this.open = true
  577. this.title = "修改商户应用配置";
  578. });
  579. }
  580. ,
  581. /** 查询商户应用配置列表 */
  582. getList() {
  583. this.loading = true;
  584. // if (this.queryParams.appIds && this.queryParams.appIds.length > 0) {
  585. // this.queryParams.appIds = this.queryParams.appIds.join(',');
  586. // }
  587. this.queryParams.params = {};
  588. if (null != this.daterangeCreatedTime && '' != this.daterangeCreatedTime) {
  589. this.queryParams.params["beginCreatedTime"] = this.daterangeCreatedTime[0];
  590. this.queryParams.params["endCreatedTime"] = this.daterangeCreatedTime[1];
  591. }
  592. listMerchantAppConfig(this.queryParams).then(response => {
  593. this.merchantAppConfigList = response.rows;
  594. this.total = response.total;
  595. this.loading = false;
  596. });
  597. },
  598. // 取消按钮
  599. cancel() {
  600. this.dialogVisible = false;
  601. this.reset();
  602. },
  603. // 表单重置
  604. reset() {
  605. this.form = {
  606. id: null,
  607. merchantType: null,
  608. appId: null, // 应该删除这一行
  609. appIds: [], // 初始化为空数组而不是null
  610. callbackUrl: null,
  611. dataJson: null,
  612. createdTime: null,
  613. updatedTime: null,
  614. isDeleted: null,
  615. createdBy: null,
  616. updatedBy: null
  617. };
  618. this.resetForm("form");
  619. },
  620. /** 搜索按钮操作 */
  621. handleQuery() {
  622. this.queryParams.pageNum = 1;
  623. this.getList();
  624. },
  625. /** 重置按钮操作 */
  626. resetQuery() {
  627. this.daterangeCreatedTime = [];
  628. this.resetForm("queryForm");
  629. this.handleQuery();
  630. },
  631. // 多选框选中数据
  632. handleSelectionChange(selection) {
  633. this.ids = selection.map(item => item.id)
  634. this.single = selection.length!==1
  635. this.multiple = !selection.length
  636. },
  637. /** 新增按钮操作 */
  638. handleAdd() {
  639. this.reset();
  640. this.isViewMode = false; // 添加此行
  641. this.dialogVisible = true; // 替代 this.open = true
  642. this.title = "添加商户应用配置";
  643. },
  644. // /** 修改按钮操作 */
  645. // handleUpdate(row) {
  646. // this.reset();
  647. // const id = row.id || this.ids
  648. // getMerchantAppConfig(id).then(response => {
  649. // this.form = response.data;
  650. // this.open = true;
  651. // this.title = "修改商户应用配置";
  652. // });
  653. // },
  654. // /** 提交按钮 */
  655. // submitForm() {
  656. // this.$refs["form"].validate(valid => {
  657. // if (valid) {
  658. // if (this.form.id != null) {
  659. // updateMerchantAppConfig(this.form).then(response => {
  660. // this.msgSuccess("修改成功");
  661. // this.open = false;
  662. // this.getList();
  663. // });
  664. // } else {
  665. // addMerchantAppConfig(this.form).then(response => {
  666. // this.msgSuccess("新增成功");
  667. // this.open = false;
  668. // this.getList();
  669. // });
  670. // }
  671. // }
  672. // });
  673. // },
  674. /** 删除按钮操作 */
  675. handleDelete(row) {
  676. const ids = row.id || this.ids;
  677. this.$confirm('是否确认删除商户应用配置编号为"' + ids + '"的数据项?', "警告", {
  678. confirmButtonText: "确定",
  679. cancelButtonText: "取消",
  680. type: "warning"
  681. }).then(function() {
  682. return delMerchantAppConfig(ids);
  683. }).then(() => {
  684. this.getList();
  685. this.msgSuccess("删除成功");
  686. }).catch(() => {});
  687. },
  688. /** 导出按钮操作 */
  689. handleExport() {
  690. const queryParams = this.queryParams;
  691. this.$confirm('是否确认导出所有商户应用配置数据项?', "警告", {
  692. confirmButtonText: "确定",
  693. cancelButtonText: "取消",
  694. type: "warning"
  695. }).then(() => {
  696. this.exportLoading = true;
  697. return exportMerchantAppConfig(queryParams);
  698. }).then(response => {
  699. this.download(response.msg);
  700. this.exportLoading = false;
  701. }).catch(() => {});
  702. }
  703. }
  704. };
  705. </script>