index.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739
  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="请输入易宝商户号" :disabled="form.id !== null"></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="请输入台州商户号" :disabled="form.id !== null"></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="请输入微信商户号" :disabled="form.id !== null"></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. <!-- 商户号不允许修改,退款的时候需要用历史的商户号查询并退款 -->
  289. <el-form-item label="商户号" prop="hfHuifuId">
  290. <el-input v-model="hfConfig.huifuId" placeholder="商户号" :disabled="form.id !== null"></el-input>
  291. </el-form-item>
  292. <el-form-item label="商户私钥" prop="hfRsaPrivateKey">
  293. <el-input v-model="hfConfig.hfRsaPrivateKey" placeholder="商户私钥"></el-input>
  294. </el-form-item>
  295. <el-form-item label="汇付公钥" prop="hfRsaPublicKey">
  296. <el-input v-model="hfConfig.hfRsaPublicKey" placeholder="汇付公钥"></el-input>
  297. </el-form-item>
  298. <el-form-item label="汇付支付回调地址" prop="hfPayNotifyUrl">
  299. <el-input v-model="hfConfig.hfPayNotifyUrl" placeholder="汇付支付回调地址"></el-input>
  300. </el-form-item>
  301. <el-form-item label="大额支付回调地址" prop="hfPayOnlineNotifyUrl">
  302. <el-input v-model="hfConfig.hfPayOnlineNotifyUrl" placeholder="汇付支付回调地址"></el-input>
  303. </el-form-item>
  304. <el-form-item label="汇付退款回调地址" prop="hfRefundNotifyUrl">
  305. <el-input v-model="hfConfig.hfRefundNotifyUrl" placeholder="汇付退款回调地址"></el-input>
  306. </el-form-item>
  307. <el-form-item label="汇付大额退款回调地址" prop="hfOnlineRefundNotifyUrl">
  308. <el-input v-model="hfConfig.hfOnlineRefundNotifyUrl" placeholder="汇付分账回调地址"></el-input>
  309. </el-form-item>
  310. </div>
  311. </div>
  312. </el-form>
  313. <div slot="footer" class="dialog-footer">
  314. <el-button type="primary" @click="submitForm" v-if="!isViewMode">确 定</el-button>
  315. <el-button @click="cancel">取 消</el-button>
  316. </div>
  317. </el-dialog>
  318. </div>
  319. </template>
  320. <script>
  321. import { listMerchantAppConfig, getMerchantAppConfig, delMerchantAppConfig, addMerchantAppConfig, updateMerchantAppConfig, exportMerchantAppConfig } from "@/api/merchantAppConfig/merchantAppConfig";
  322. import { listAll } from "@/api/course/coursePlaySourceConfig";
  323. export default {
  324. name: "MerchantAppConfig",
  325. data() {
  326. return {
  327. // 遮罩层
  328. loading: true,
  329. // 导出遮罩层
  330. exportLoading: false,
  331. // 选中数组
  332. ids: [],
  333. // 非单个禁用
  334. single: true,
  335. // 非多个禁用
  336. multiple: true,
  337. // 显示搜索条件
  338. showSearch: true,
  339. // 总条数
  340. total: 0,
  341. // 商户应用配置表格数据
  342. merchantAppConfigList: [],
  343. // 弹出层标题
  344. title: "",
  345. // 创建时间时间范围
  346. daterangeCreatedTime: [],
  347. // 删除状态:0-正常,1-已删除字典
  348. isDeletedOptions: [],
  349. sysPayModes: [],
  350. detailOpen: false, // 详情对话框开关
  351. isViewMode: false, // 是否为查看模式
  352. dialogVisible: false,
  353. // 查询参数
  354. queryParams: {
  355. pageNum: 1,
  356. pageSize: 10,
  357. merchantType: null,
  358. appIds: null,
  359. createdTime: null,
  360. isDeleted: "0",
  361. id: null
  362. },
  363. appIdOptions:[],
  364. ybConfig: {}, // 易宝配置
  365. tzConfig: {}, // 台州银行配置
  366. wxConfig: {}, // 微信配置
  367. hfConfig: {}, // 汇付配置
  368. // 表单参数
  369. form: {
  370. id: null,
  371. merchantType: null,
  372. appIds: [],
  373. callbackUrl: null,
  374. dataJson: null,
  375. createdTime: null,
  376. updatedTime: null,
  377. isDeleted: null,
  378. createdBy: null,
  379. updatedBy: null
  380. },
  381. // 表单校验
  382. rules: {
  383. merchantType: [
  384. { required: true, message: "商户类型不能为空", trigger: "change" }
  385. ],
  386. isDeleted: [
  387. { required: true, message: "删除状态:0-正常,1-已删除不能为空", trigger: "change" }
  388. ],
  389. createdBy: [
  390. { required: true, message: "创建人ID或用户名不能为空", trigger: "blur" }
  391. ],
  392. updatedBy: [
  393. { required: true, message: "修改人ID或用户名不能为空", trigger: "blur" }
  394. ]
  395. }
  396. };
  397. },
  398. created() {
  399. this.getDicts("sys_normal_disable").then(response => {
  400. this.isDeletedOptions = response.data;
  401. });
  402. this.getDicts("sys_pay_mode").then(response => {
  403. this.sysPayModes = response.data;
  404. });
  405. listAll().then(response => {
  406. this.appIdOptions=response.data;
  407. });
  408. this.getList();
  409. },
  410. methods: {
  411. /** 详情按钮操作 */
  412. handleView(row) {
  413. this.isViewMode = true;
  414. this.dialogVisible = true; // 改为设置 dialogVisible
  415. this.title = "查看商户应用配置";
  416. // 加载数据(复用修改逻辑)
  417. getMerchantAppConfig(row.id).then(response => {
  418. // 先设置基础数据
  419. Object.keys(response.data).forEach(key => {
  420. if (key !== 'appIds') { // appIds单独处理
  421. this.$set(this.form, key, response.data[key]);
  422. }
  423. });
  424. // 单独处理 appIds,确保它是响应式的数组
  425. let appIdsArray = [];
  426. if (response.data.appId) {
  427. if (typeof response.data.appId === 'string') {
  428. appIdsArray = response.data.appId.split(',').map(item => item.trim()).filter(item => item);
  429. } else if (Array.isArray(response.data.appId)) {
  430. appIdsArray = [...response.data.appId];
  431. }
  432. }
  433. // 使用 $set 确保响应式
  434. this.$set(this.form, 'appIds', appIdsArray);
  435. // 解析配置详情JSON
  436. if (this.form.dataJson) {
  437. try {
  438. const configData = JSON.parse(this.form.dataJson);
  439. switch(this.form.merchantType) {
  440. case 'yb':
  441. this.ybConfig = { ...configData };
  442. break;
  443. case 'tz':
  444. this.tzConfig = { ...configData };
  445. break;
  446. case 'wx':
  447. this.wxConfig = { ...configData };
  448. break;
  449. case 'hf':
  450. this.hfConfig = { ...configData };
  451. break;
  452. }
  453. } catch (e) {
  454. console.error('解析配置详情失败:', e);
  455. }
  456. }
  457. });
  458. }
  459. ,
  460. /** 关闭详情对话框 */
  461. closeDetailView() {
  462. this.detailOpen = false;
  463. this.isViewMode = false;
  464. this.reset();
  465. },
  466. getAppNames(appIds) {
  467. if (!appIds) return '';
  468. // 处理逗号分隔的字符串
  469. const appIdArray = typeof appIds === 'string' ? appIds.split(',') : Array.isArray(appIds) ? appIds : [appIds];
  470. // 根据 appIdOptions 查找对应的应用名称
  471. const names = appIdArray
  472. .map(id => {
  473. const option = this.appIdOptions.find(opt => opt.appid === id.trim());
  474. return option ? option.name : id;
  475. })
  476. .filter(name => name); // 过滤掉空值
  477. return names.join(', ');
  478. },
  479. /** 商户类型变化处理 */
  480. handleMerchantTypeChange(value) {
  481. // 清空之前的选择
  482. this.ybConfig = {};
  483. this.tzConfig = {};
  484. this.wxConfig = {};
  485. this.hfConfig = {};
  486. },
  487. /** 提交按钮 */
  488. submitForm() {
  489. this.$refs["form"].validate(valid => {
  490. if (valid) {
  491. // 构建配置详情JSON
  492. let configData = {};
  493. switch(this.form.merchantType) {
  494. case 'yb':
  495. configData = { ...this.ybConfig };
  496. break;
  497. case 'tz':
  498. configData = { ...this.tzConfig };
  499. break;
  500. case 'wx':
  501. configData = { ...this.wxConfig };
  502. break;
  503. case 'hf':
  504. configData = { ...this.hfConfig };
  505. break;
  506. }
  507. // 正确处理多选应用ID转字符串
  508. if (this.form.appIds && Array.isArray(this.form.appIds) && this.form.appIds.length > 0) {
  509. this.form.appId = this.form.appIds.join(',');
  510. } else {
  511. this.form.appId = '';
  512. }
  513. // 将配置转换为JSON字符串
  514. this.form.dataJson = JSON.stringify(configData);
  515. if (this.form.id != null) {
  516. updateMerchantAppConfig(this.form).then(response => {
  517. this.msgSuccess("修改成功");
  518. this.dialogVisible = false;
  519. this.getList();
  520. });
  521. } else {
  522. addMerchantAppConfig(this.form).then(response => {
  523. this.msgSuccess("新增成功");
  524. this.dialogVisible = false;
  525. this.getList();
  526. });
  527. }
  528. }
  529. });
  530. },
  531. /** 修改按钮操作 */
  532. /** 修改按钮操作 */
  533. handleUpdate(row) {
  534. this.reset();
  535. const id = row.id || this.ids;
  536. getMerchantAppConfig(id).then(response => {
  537. // 先设置基础数据
  538. Object.keys(response.data).forEach(key => {
  539. if (key !== 'appIds') { // appIds单独处理
  540. this.$set(this.form, key, response.data[key]);
  541. }
  542. });
  543. // 单独处理 appIds,确保它是响应式的数组
  544. let appIdsArray = [];
  545. if (response.data.appId) {
  546. if (typeof response.data.appId === 'string') {
  547. appIdsArray = response.data.appId.split(',').map(item => item.trim()).filter(item => item);
  548. } else if (Array.isArray(response.data.appId)) {
  549. appIdsArray = [...response.data.appId];
  550. }
  551. }
  552. // 使用 $set 确保响应式
  553. this.$set(this.form, 'appIds', appIdsArray);
  554. // 解析配置详情JSON
  555. if (this.form.dataJson) {
  556. try {
  557. const configData = JSON.parse(this.form.dataJson);
  558. switch(this.form.merchantType) {
  559. case 'yb':
  560. this.ybConfig = { ...configData };
  561. break;
  562. case 'tz':
  563. this.tzConfig = { ...configData };
  564. break;
  565. case 'wx':
  566. this.wxConfig = { ...configData };
  567. break;
  568. case 'hf':
  569. this.hfConfig = { ...configData };
  570. break;
  571. }
  572. } catch (e) {
  573. console.error('解析配置详情失败:', e);
  574. }
  575. }
  576. this.isViewMode = false; // 添加此行
  577. this.dialogVisible = true; // 替代 this.open = true
  578. this.title = "修改商户应用配置";
  579. });
  580. }
  581. ,
  582. /** 查询商户应用配置列表 */
  583. getList() {
  584. this.loading = true;
  585. // if (this.queryParams.appIds && this.queryParams.appIds.length > 0) {
  586. // this.queryParams.appIds = this.queryParams.appIds.join(',');
  587. // }
  588. this.queryParams.params = {};
  589. if (null != this.daterangeCreatedTime && '' != this.daterangeCreatedTime) {
  590. this.queryParams.params["beginCreatedTime"] = this.daterangeCreatedTime[0];
  591. this.queryParams.params["endCreatedTime"] = this.daterangeCreatedTime[1];
  592. }
  593. listMerchantAppConfig(this.queryParams).then(response => {
  594. this.merchantAppConfigList = response.rows;
  595. this.total = response.total;
  596. this.loading = false;
  597. });
  598. },
  599. // 取消按钮
  600. cancel() {
  601. this.dialogVisible = false;
  602. this.reset();
  603. },
  604. // 表单重置
  605. reset() {
  606. this.form = {
  607. id: null,
  608. merchantType: null,
  609. appId: null, // 应该删除这一行
  610. appIds: [], // 初始化为空数组而不是null
  611. callbackUrl: null,
  612. dataJson: null,
  613. createdTime: null,
  614. updatedTime: null,
  615. isDeleted: null,
  616. createdBy: null,
  617. updatedBy: null
  618. };
  619. this.resetForm("form");
  620. },
  621. /** 搜索按钮操作 */
  622. handleQuery() {
  623. this.queryParams.pageNum = 1;
  624. this.getList();
  625. },
  626. /** 重置按钮操作 */
  627. resetQuery() {
  628. this.daterangeCreatedTime = [];
  629. this.resetForm("queryForm");
  630. this.handleQuery();
  631. },
  632. // 多选框选中数据
  633. handleSelectionChange(selection) {
  634. this.ids = selection.map(item => item.id)
  635. this.single = selection.length!==1
  636. this.multiple = !selection.length
  637. },
  638. /** 新增按钮操作 */
  639. handleAdd() {
  640. this.reset();
  641. this.isViewMode = false; // 添加此行
  642. this.dialogVisible = true; // 替代 this.open = true
  643. this.title = "添加商户应用配置";
  644. },
  645. // /** 修改按钮操作 */
  646. // handleUpdate(row) {
  647. // this.reset();
  648. // const id = row.id || this.ids
  649. // getMerchantAppConfig(id).then(response => {
  650. // this.form = response.data;
  651. // this.open = true;
  652. // this.title = "修改商户应用配置";
  653. // });
  654. // },
  655. // /** 提交按钮 */
  656. // submitForm() {
  657. // this.$refs["form"].validate(valid => {
  658. // if (valid) {
  659. // if (this.form.id != null) {
  660. // updateMerchantAppConfig(this.form).then(response => {
  661. // this.msgSuccess("修改成功");
  662. // this.open = false;
  663. // this.getList();
  664. // });
  665. // } else {
  666. // addMerchantAppConfig(this.form).then(response => {
  667. // this.msgSuccess("新增成功");
  668. // this.open = false;
  669. // this.getList();
  670. // });
  671. // }
  672. // }
  673. // });
  674. // },
  675. /** 删除按钮操作 */
  676. handleDelete(row) {
  677. const ids = row.id || this.ids;
  678. this.$confirm('是否确认删除商户应用配置编号为"' + ids + '"的数据项?', "警告", {
  679. confirmButtonText: "确定",
  680. cancelButtonText: "取消",
  681. type: "warning"
  682. }).then(function() {
  683. return delMerchantAppConfig(ids);
  684. }).then(() => {
  685. this.getList();
  686. this.msgSuccess("删除成功");
  687. }).catch(() => {});
  688. },
  689. /** 导出按钮操作 */
  690. handleExport() {
  691. const queryParams = this.queryParams;
  692. this.$confirm('是否确认导出所有商户应用配置数据项?', "警告", {
  693. confirmButtonText: "确定",
  694. cancelButtonText: "取消",
  695. type: "warning"
  696. }).then(() => {
  697. this.exportLoading = true;
  698. return exportMerchantAppConfig(queryParams);
  699. }).then(response => {
  700. this.download(response.msg);
  701. this.exportLoading = false;
  702. }).catch(() => {});
  703. }
  704. }
  705. };
  706. </script>