account-config.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674
  1. <template>
  2. <div class="account-config-content">
  3. <div class="control-con-header">
  4. <a-form
  5. class="grid-form"
  6. layout="inline"
  7. :form="form"
  8. hide-required-mark
  9. @submit="handleQueryList"
  10. >
  11. <a-row class="grid-form-options">
  12. <a-form-item
  13. class="grid-form-item"
  14. label="账户"
  15. :colon="false"
  16. >
  17. <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false" request="1,3"></acount-search>
  18. </a-form-item>
  19. <a-form-item label="素材类型">
  20. <a-select v-model="creativeStatus" style="width: 100px">
  21. <a-select-option :value="2">不限</a-select-option>
  22. <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-select-option>
  23. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-select-option>
  24. <a-select-option value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-select-option>
  25. <a-select-option value="CREATIVE_IMAGE_MODE_UNION_SPLASH">开屏</a-select-option>
  26. </a-select>
  27. </a-form-item>
  28. <a-form-item label="状态">
  29. <a-select v-model="searchStatus" style="width: 100px">
  30. <a-select-option :value="2">不限</a-select-option>
  31. <a-select-option :value="0">开启</a-select-option>
  32. <a-select-option :value="1">关闭</a-select-option>
  33. </a-select>
  34. </a-form-item>
  35. <a-form-item class="form-handle-btn">
  36. <a-button type="default" class="reset-class" @click="handleResetList">重置</a-button>
  37. <a-button type="primary" html-type="submit">查询</a-button>
  38. </a-form-item>
  39. </a-row>
  40. </a-form>
  41. <a-button type="primary" class="upload-person" @click="handleAddAccountConfig">新建账户配置</a-button>
  42. </div>
  43. <div class="control-con-table">
  44. <a-table
  45. ref="table"
  46. size="middle"
  47. bordered
  48. :loading="controlLoading"
  49. :columns="columns"
  50. :dataSource="dataSource"
  51. :pagination="false"
  52. >
  53. <span slot="customTitle">
  54. 花费(元)
  55. <a-tooltip placement="top">
  56. <template slot="title">
  57. <span>当日花费</span>
  58. </template>
  59. <a-icon type="question-circle"/>
  60. </a-tooltip>
  61. </span>
  62. <span slot="acountRelax" slot-scope="text, record">
  63. <a-switch :checked="text === 0" @change="handleSwitchChang($event, record)"/>
  64. </span>
  65. <span slot="creativeImageMode" slot-scope="text">
  66. <span>{{ handleChangeCreativeImage(text) }}</span>
  67. </span>
  68. <span solt="accountBudget" slot-scope="text, record">
  69. {{ record.accountBudgetMode === '1' ? '不限' : text }}
  70. </span>
  71. <span slot="action" slot-scope="text, record">
  72. <a @click="handleCopy(record)" disabled>复制</a>
  73. <a-divider type="vertical"/>
  74. <a @click="handleEdit(record)">编辑</a>
  75. <a-divider type="vertical"/>
  76. <a @click="handleListDelete(record)">删除</a>
  77. <a-divider type="vertical"/>
  78. <a @click="handleUpdateMod(record)">修改出价</a>
  79. <a-divider type="vertical"/>
  80. <a @click="handleUpdateBudget(record)">修改预算</a>
  81. </span>
  82. </a-table>
  83. <a-pagination
  84. class="pagin-table-class"
  85. :total="totalAll"
  86. :show-total="total => `共 ${totalAll} 条`"
  87. size="small"
  88. show-size-changer
  89. show-quick-jumper
  90. @change="onShowSizeChange"
  91. @showSizeChange="onShowSizeChange"
  92. />
  93. </div>
  94. <a-modal
  95. title="修改预算"
  96. v-if="budgetVisible"
  97. :visible="budgetVisible"
  98. dialog-class="mode-modal-class"
  99. @ok="handleBudgetSure"
  100. @cancel="handleBudgetCancel"
  101. >
  102. <div>
  103. <a-form-model
  104. ref="budgetForm"
  105. :model="budgetForm"
  106. :rules="budgetRules"
  107. :label-col="labelCol"
  108. :wrapper-col="wrapperCol"
  109. >
  110. <a-form-model-item label="预算方式">
  111. <a-radio-group
  112. v-model="budgetForm.budgetType"
  113. button-style="solid"
  114. @change="handleAccountMode"
  115. >
  116. <a-radio-button value="1">不限预算</a-radio-button>
  117. <a-radio-button value="2">指定预算</a-radio-button>
  118. </a-radio-group>
  119. </a-form-model-item>
  120. <a-form-model-item v-if="budgetForm.budgetType === '2'" label="账户日预算" prop="budget">
  121. <a-input-number
  122. v-model="budgetForm.budget"
  123. :min="1000"
  124. :max="9999999.99"
  125. :step="0.01"
  126. @blur="handleAccountBudget"
  127. /> 元
  128. </a-form-model-item>
  129. <!-- <div v-if="adBudgetShowTitle" style="width: 500px;color: #f00;margin-left: 140px;">单次修改预算幅度, 不能低于100.0元</div> -->
  130. </a-form-model>
  131. </div>
  132. </a-modal>
  133. <a-modal
  134. title="修改出价"
  135. v-if="modeVisible"
  136. :visible="modeVisible"
  137. dialog-class="mode-modal-class"
  138. @ok="handleModeSure"
  139. @cancel="handleModeCancel"
  140. >
  141. <div>
  142. <a-form-model
  143. ref="ruleForm"
  144. :model="configForm"
  145. :rules="rules"
  146. :label-col="labelCol"
  147. :wrapper-col="wrapperCol"
  148. >
  149. <a-form-model-item v-if="updateModTxt.adBidCreateType === 'FIX'" label="目标转化出价" prop="adCpaBid">
  150. <a-input-number
  151. class="common-input"
  152. v-model="configForm.adCpaBid"
  153. :min="0.1"
  154. :step="0.01"
  155. placeholder="请输入"
  156. />
  157. </a-form-model-item>
  158. <div v-if="updateModTxt.adBidCreateType === 'RAND'">
  159. <a-form-model-item label="目标转化出价范围"
  160. class="dp-link-start" prop="adMinBid">
  161. <a-input-number
  162. class="common-input"
  163. v-model="configForm.adMinBid"
  164. :min="0.1"
  165. :max="10000"
  166. :step="0.01"
  167. placeholder="请输入最小值"
  168. />
  169. </a-form-model-item>
  170. <span class="icon-span">~</span>
  171. <a-form-model-item class="dp-link-end" prop="adMaxBid">
  172. <a-input-number
  173. class="common-input"
  174. v-model="configForm.adMaxBid"
  175. :min="0.1"
  176. :max="10000"
  177. :step="0.01"
  178. placeholder="请输入最大值"
  179. />
  180. </a-form-model-item>
  181. </div>
  182. <div v-if="updateModTxt.adBidCreateType === 'STEP'">
  183. <a-form-model-item label="目标转化出价范围" class="dp-link-start" prop="adMinBid">
  184. <a-input-number
  185. class="common-input"
  186. v-model="configForm.adMinBid"
  187. :min="0.1"
  188. :max="10000"
  189. :step="0.01"
  190. placeholder="请输入最小值"
  191. />
  192. </a-form-model-item>
  193. <span class="icon-span">~</span>
  194. <a-form-model-item class="dp-link-end" prop="adMaxBid">
  195. <a-input-number
  196. class="common-input"
  197. v-model="configForm.adMaxBid"
  198. :min="0.1"
  199. :max="10000"
  200. :step="0.01"
  201. placeholder="请输入最大值"
  202. />
  203. </a-form-model-item>
  204. <a-form-model-item label="浮动间隔" prop="adStepBid">
  205. <a-input-number
  206. class="common-input"
  207. :min="0"
  208. :step="0.01"
  209. v-model="configForm.adStepBid"
  210. placeholder="请输入浮动间隔"
  211. />
  212. </a-form-model-item>
  213. </div>
  214. </a-form-model>
  215. </div>
  216. </a-modal>
  217. </div>
  218. </template>
  219. <script>
  220. import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
  221. import {getAction, putAction, deleteAction} from '@/api/manage';
  222. import {mapGetters} from 'vuex';
  223. import {urlAcount} from './account-config-server.js';
  224. export default {
  225. name: 'account-config',
  226. components: {
  227. AcountSearch
  228. },
  229. data() {
  230. let adMinBidValidator = (rule, value, callback) => {
  231. const finallyResult = Number(this.configForm.adMaxBid);
  232. if (finallyResult !== '' && value && Number(value) <= finallyResult) {
  233. callback();
  234. }
  235. else {
  236. callback('最低出价不能高于最高出价');
  237. }
  238. };
  239. let adCpaBidValidator = (rule, value, callback) => {
  240. if (Number(this.updateModTxt.adBudget) < Number(value)) {
  241. callback('出价不能大于预算');
  242. }
  243. else {
  244. callback();
  245. }
  246. };
  247. let adMaxBidValidator = (rule, value, callback) => {
  248. const finallyResult = Number(this.configForm.adMinBid);
  249. if (finallyResult && value && Number(value) <= finallyResult) {
  250. callback('最高出价不能低于最低出价');
  251. }
  252. else if (Number(this.updateModTxt.adBudget) < Number(value)) {
  253. callback('出价不能大于预算');
  254. }
  255. else if (Number(this.configForm.adMaxBid) > Number(this.configForm.adMinBid) + Number(this.configForm.adStepBid)) {
  256. this.$refs['ruleForm'].clearValidate(['adStepBid']);
  257. callback();
  258. }
  259. else {
  260. this.$refs['ruleForm'].clearValidate(['adMinBid']);
  261. callback();
  262. }
  263. };
  264. let floatingIntervalValidator = (rule, value, callback) => {
  265. const finallyResult = Number(this.configForm.adMinBid) + Number(value);
  266. if (finallyResult < Number(this.configForm.adMaxBid)) {
  267. callback();
  268. }
  269. else {
  270. callback('最低出价+浮动间隔<最高出价');
  271. }
  272. };
  273. let budgetValidator = (rule, value, callback) => {
  274. const changeBudget = this.updateModTxt.accountBudget;
  275. if (Number(value) > Number(changeBudget) && Number(value) < (Number(changeBudget) + 100)) {
  276. callback('单次修改预算幅度, 不能低于100.0元');
  277. }
  278. else if (Number(value) < Number(changeBudget) && Number(value) > (Number(changeBudget) - 100)) {
  279. callback('单次修改预算幅度, 不能低于100.0元');
  280. }
  281. else {
  282. callback();
  283. }
  284. };
  285. return {
  286. creativeImageOption: [
  287. {
  288. id: 'CREATIVE_IMAGE_MODE_VIDEO_VERTICAL',
  289. value: '竖版视频'
  290. },
  291. {
  292. id: 'CREATIVE_IMAGE_MODE_VIDEO',
  293. value: '横版视频'
  294. },
  295. {
  296. id: 'CREATIVE_IMAGE_MODE_LARGE',
  297. value: '大图横图'
  298. },
  299. {
  300. id: 'CREATIVE_IMAGE_MODE_SMALL',
  301. value: '小图'
  302. },
  303. {
  304. id: 'CREATIVE_IMAGE_MODE_LARGE_VERTICAL',
  305. value: '大图竖图'
  306. },
  307. {
  308. id: 'CREATIVE_IMAGE_MODE_UNION_SPLASH',
  309. value: '开屏'
  310. }
  311. ],
  312. searchStatus: 0,
  313. creativeStatus: 2,
  314. controlLoading: true,
  315. adBudgetShowTitle: false,
  316. budgetVisible: false,
  317. budgetForm: {
  318. budgetType: '1',
  319. budget: 0
  320. },
  321. budgetRules: {
  322. budget: [
  323. {required: true, message: '请输入', trigger: 'blur'},
  324. {validator: budgetValidator, trigger: 'blur'}
  325. ]
  326. },
  327. labelCol: {span: 4},
  328. wrapperCol: {span: 14},
  329. configForm: {
  330. adMinBid: undefined,
  331. adMaxBid: undefined,
  332. adStepBid: undefined,
  333. adCpaBid: undefined
  334. },
  335. rules: {
  336. adCpaBid: [
  337. {required: true, message: '请输入', trigger: 'blur'},
  338. {validator: adCpaBidValidator, trigger: 'blur'}
  339. ],
  340. adStepBid: [
  341. {required: true, message: '请输入', trigger: 'blur'},
  342. {validator: floatingIntervalValidator, trigger: 'blur'}
  343. ],
  344. adMinBid: [
  345. {required: true, message: '请输入最低出价', trigger: 'blur'},
  346. {validator: adMinBidValidator, trigger: 'blur'}
  347. ],
  348. adMaxBid: [
  349. {required: true, message: '请输入最高出价', trigger: 'blur'},
  350. {validator: adMaxBidValidator, trigger: 'blur'}
  351. ]
  352. },
  353. modeVisible: false,
  354. updateModTxt: {},
  355. modContent: '',
  356. budgetContent: '',
  357. acountId: undefined, // 搜索的账户ID
  358. totalAll: 0,
  359. tablePag: {
  360. page: 1,
  361. size: 10
  362. },
  363. dataSource: [],
  364. columns: [
  365. {
  366. title: '开关',
  367. align: 'center',
  368. dataIndex: 'status',
  369. scopedSlots: {customRender: 'acountRelax'}
  370. },
  371. {
  372. title: '广告账户名称',
  373. align: 'center',
  374. dataIndex: 'accountId_dictText'
  375. },
  376. {
  377. title: '素材类型',
  378. align: 'center',
  379. dataIndex: 'creativeImageMode',
  380. scopedSlots: {customRender: 'creativeImageMode'}
  381. },
  382. {
  383. title: '账户ID',
  384. align: 'center',
  385. dataIndex: 'accountId'
  386. },
  387. {
  388. title: '创建时间',
  389. dataIndex: 'createTime',
  390. align: 'center'
  391. },
  392. {
  393. title: '账户余额',
  394. dataIndex: 'validBalance',
  395. align: 'center'
  396. },
  397. {
  398. title: '账户日预算(元)',
  399. dataIndex: 'accountBudget',
  400. width: 180,
  401. align: 'center'
  402. },
  403. {
  404. title: '出价(元)',
  405. dataIndex: 'adCpaBidStr',
  406. align: 'center'
  407. },
  408. {
  409. align: 'center',
  410. dataIndex: 'cost',
  411. width: 150,
  412. slots: {title: 'customTitle'}
  413. },
  414. {
  415. title: '操作',
  416. dataIndex: 'action',
  417. align: 'center',
  418. width: '23%',
  419. scopedSlots: {customRender: 'action'}
  420. }
  421. ]
  422. };
  423. },
  424. created() {
  425. this.form = this.$form.createForm(this);
  426. },
  427. mounted() {
  428. this.handleInitTable();
  429. },
  430. methods: {
  431. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  432. handleChangeCreativeImage(val) {
  433. return val ? this.creativeImageOption.filter(item => item.id === val)[0].value : '-';
  434. },
  435. handleAccountMode(e) {
  436. this.budgetForm.budget = 1000;
  437. this.adBudgetShowTitle = false;
  438. },
  439. handleAccountBudget(e) {
  440. const adBudgetInput = e.target.value;
  441. this.budgetForm.budget = Number(Number(adBudgetInput).toFixed(2));
  442. },
  443. handleModeSure() {
  444. let paramsData = new FormData();
  445. if (this.updateModTxt.adBidCreateType === 'FIX') {
  446. paramsData.append('type', 1);
  447. paramsData.append('id', this.updateModTxt.id);
  448. paramsData.append('adCpaBid', this.configForm.adCpaBid);
  449. }
  450. else if (this.updateModTxt.adBidCreateType === 'RAND') {
  451. paramsData.append('type', 1);
  452. paramsData.append('id', this.updateModTxt.id);
  453. paramsData.append('adMinBid', this.configForm.adMinBid);
  454. paramsData.append('adMaxBid', this.configForm.adMaxBid);
  455. }
  456. else if (this.updateModTxt.adBidCreateType === 'STEP') {
  457. paramsData.append('type', 1);
  458. paramsData.append('id', this.updateModTxt.id);
  459. paramsData.append('adMinBid', this.configForm.adMinBid);
  460. paramsData.append('adMaxBid', this.configForm.adMaxBid);
  461. paramsData.append('adStepBid', this.configForm.adStepBid);
  462. }
  463. this.$refs.ruleForm.validate(valid => {
  464. if (valid) {
  465. this.controlLoading = true;
  466. this.handlePopoverChange(paramsData);
  467. }
  468. else {
  469. console.log('error submit!!');
  470. return false;
  471. }
  472. });
  473. },
  474. handleModeCancel() {
  475. this.adMinBid = undefined;
  476. this.adMaxBid = undefined;
  477. this.adStepBid = undefined;
  478. this.adCpaBid = undefined;
  479. this.modeVisible = false;
  480. },
  481. handleUpdateMod(record) {
  482. this.updateModTxt = record;
  483. this.configForm.adCpaBid = record.adCpaBid;
  484. this.configForm.adMinBid = record.adMinBid;
  485. this.configForm.adMaxBid = record.adMaxBid;
  486. this.configForm.adStepBid = record.adStepBid;
  487. this.modeVisible = true;
  488. },
  489. handleUpdateBudget(record) {
  490. this.updateModTxt = record;
  491. this.budgetForm.budgetType = record.accountBudgetMode;
  492. this.budgetForm.budget = record.accountBudget;
  493. this.budgetVisible = true;
  494. },
  495. handleBudgetSure() {
  496. let paramsData = new FormData();
  497. paramsData.append('accountId', this.updateModTxt.accountId);
  498. paramsData.append('adId', this.updateModTxt.adId);
  499. paramsData.append('type', 2);
  500. paramsData.append('budget', this.budgetForm.budget);
  501. paramsData.append('budgetType', this.budgetForm.budgetType);
  502. paramsData.append('id', this.updateModTxt.id);
  503. paramsData.append('cost', this.updateModTxt.cost);
  504. if (this.adBudgetShowTitle) {
  505. return;
  506. }
  507. this.$refs.budgetForm.validate(valid => {
  508. if (valid) {
  509. this.controlLoading = true;
  510. this.handlePopoverChange(paramsData);
  511. }
  512. else {
  513. console.log('error submit!!');
  514. return false;
  515. }
  516. });
  517. },
  518. handleBudgetCancel() {
  519. this.budgetVisible = false;
  520. this.budgetForm.budgetType = '1';
  521. },
  522. handlePopoverChange(data) {
  523. putAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/updStaOrCpaOrBudgetById', data).then(result => {
  524. if (result.code === 0) {
  525. this.$message.success(result.message);
  526. this.adMinBid = undefined;
  527. this.adMaxBid = undefined;
  528. this.adStepBid = undefined;
  529. this.adCpaBid = undefined;
  530. this.modeVisible = false;
  531. this.budgetVisible = false;
  532. this.budgetForm.budgetType = '1';
  533. this.handleInitTable();
  534. }
  535. else {
  536. this.$message.error(result.message);
  537. }
  538. }).catch(error => {
  539. console.log(error, 'eeee');
  540. });
  541. },
  542. handleResetList() {
  543. this.acountId = '';
  544. this.searchStatus = 0;
  545. this.creativeStatus = 2;
  546. this.controlLoading = true;
  547. this.handleInitTable();
  548. },
  549. handleInitTable() {
  550. const paramsData = {
  551. accountId: this.acountId,
  552. status: this.searchStatus === 2 ? '' : this.searchStatus,
  553. creativeImageMode: this.creativeStatus === 2 ? '' : this.creativeStatus,
  554. loginUserId: this.userInfo().id,
  555. pageNo: this.tablePag.page,
  556. pageSize: this.tablePag.size
  557. };
  558. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/list', paramsData).then(result => {
  559. if (result.code === 0) {
  560. result.result.records.forEach(item => {
  561. if (item.accountBudgetMode === '1') {
  562. item.accountBudget = '不限';
  563. }
  564. });
  565. this.controlLoading = false;
  566. this.dataSource = result.result.records;
  567. this.totalAll = result.result.total;
  568. }
  569. else {
  570. this.$message.error(result.message);
  571. }
  572. }).catch(error => {
  573. console.log(error, 'eeee');
  574. });
  575. },
  576. handleCopy(data) {
  577. let that = this;
  578. this.$confirm({
  579. title: '复制提示',
  580. content: '请确认是否复制该账户配置',
  581. onOk() {
  582. let params = {
  583. accountModal: 'copy',
  584. id: data.id
  585. };
  586. localStorage.setItem('queryList', JSON.stringify(params));
  587. that.$router.push('/account-config/components/configuration-copy');
  588. }
  589. });
  590. },
  591. handleListDelete(data) {
  592. let that = this;
  593. this.$confirm({
  594. title: '删除提示',
  595. content: '是否删除该条数据',
  596. onOk() {
  597. that.controlLoading = true;
  598. deleteAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/delete', {id: data.id}).then(result => {
  599. if (result.code === 0) {
  600. that.handleInitTable();
  601. that.$message.success('删除成功');
  602. }
  603. else {
  604. that.$message.error(result.message);
  605. }
  606. }).catch(error => {
  607. console.log(error, 'eeee');
  608. });
  609. }
  610. });
  611. },
  612. handleQueryList(event) {
  613. event.preventDefault();
  614. this.controlLoading = true;
  615. this.handleInitTable();
  616. },
  617. onShowSizeChange(current, pageSize) {
  618. this.tablePag = {
  619. page: current,
  620. size: pageSize
  621. };
  622. this.controlLoading = true;
  623. this.handleInitTable();
  624. },
  625. handleSwitchChang(checked, data) {
  626. this.controlLoading = true;
  627. const paramsData = {
  628. id: data.id,
  629. state: checked ? 0 : 1,
  630. creativeImageMode: this.creativeStatus === 2 ? '' : this.creativeStatus,
  631. accountId: data.accountId,
  632. creativeImageMode: data.creativeImageMode
  633. };
  634. const forDate = new FormData();
  635. forDate.append('id', paramsData.id);
  636. forDate.append('state', paramsData.state);
  637. forDate.append('accountId', paramsData.accountId);
  638. forDate.append('creativeImageMode', paramsData.creativeImageMode);
  639. putAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/updStaById', forDate).then(result => {
  640. if (result.code === 0) {
  641. this.$message.success(result.message);
  642. this.handleInitTable();
  643. }
  644. else {
  645. this.$message.error(result.message);
  646. }
  647. }).catch(error => {
  648. console.log(error, 'eeee');
  649. });
  650. },
  651. handleEdit(data) {
  652. // TODO 切换路由时候,及时删除上一次相同路由
  653. let params = {
  654. accountModal: 'edit',
  655. id: data.id
  656. };
  657. localStorage.setItem('queryList', JSON.stringify(params));
  658. this.$router.push('/account-config/components/configuration-modal');
  659. },
  660. handleAddAccountConfig() {
  661. let params = {
  662. accountModal: 'add'
  663. };
  664. localStorage.setItem('queryList', JSON.stringify(params));
  665. this.$router.push('/account-config/components/configuration-modal');
  666. }
  667. }
  668. };
  669. </script>
  670. <style lang="less" scoped>
  671. @import "account-config";
  672. </style>