account-config.vue 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <template>
  2. <div class="account-config-content">
  3. <div class="control-con-header">
  4. <a-form
  5. class="grid-form" layout="inline"
  6. :form="form"
  7. hide-required-mark
  8. @submit="handleQueryList"
  9. >
  10. <a-row class="grid-form-options">
  11. <a-form-item
  12. class="grid-form-item" label="账户"
  13. :colon="false"
  14. >
  15. <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false"></acount-search>
  16. </a-form-item>
  17. <a-form-item class="form-handle-btn">
  18. <a-button type="default" class="reset-class">重置</a-button>
  19. <a-button type="primary" html-type="submit">查询</a-button>
  20. </a-form-item>
  21. </a-row>
  22. </a-form>
  23. <a-button type="primary" class="upload-person" @click="handleAddAccountConfig">新建账户配置</a-button>
  24. </div>
  25. <div class="control-con-table">
  26. <a-table
  27. ref="table"
  28. size="middle"
  29. bordered
  30. :columns="columns"
  31. :dataSource="dataSource"
  32. :pagination="false"
  33. >
  34. <span slot="customTitle">
  35. 花费(元)
  36. <a-tooltip placement="top">
  37. <template slot="title">
  38. <span>当日花费</span>
  39. </template>
  40. <a-icon type="smile-o"/>
  41. </a-tooltip>
  42. </span>
  43. <span slot="acountRelax" slot-scope="text, record">
  44. <a-switch :checked="text" @change="handleSwitchChang"/>
  45. </span>
  46. <span slot="action" slot-scope="text, record">
  47. <a @click="handleEdit(record)">编辑</a>
  48. <a-divider type="vertical" />
  49. <a @click="handleDelete(record)">删除</a>
  50. <a-divider type="vertical" />
  51. <a @click="handleDelete(record)">修改出价</a>
  52. <a-divider type="vertical" />
  53. <a @click="handleDelete(record)">修改预算</a>
  54. </span>
  55. </a-table>
  56. <a-pagination
  57. class="pagin-table-class"
  58. :total="totalAll"
  59. :show-total="total => `共 ${totalAll} 条`"
  60. size="small"
  61. show-size-changer
  62. show-quick-jumper
  63. @change="onShowSizeChange"
  64. @showSizeChange="onShowSizeChange"
  65. />
  66. </div>
  67. <configuration-modal
  68. :title="accountModalTitle"
  69. :visible="relaxVisible"
  70. @relaxSure="handleRelaxSure"
  71. @relaxCancel="handleRelaxCancel"
  72. >
  73. </configuration-modal>
  74. </div>
  75. </template>
  76. <script>
  77. import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
  78. import ConfigurationModal from './components/configuration-modal.vue';
  79. export default {
  80. name: 'account-config',
  81. components: {
  82. AcountSearch,
  83. ConfigurationModal
  84. },
  85. data() {
  86. return {
  87. relaxVisible: false,
  88. accountModalTitle: 'add',
  89. acountId: undefined, // 搜索的账户ID
  90. totalAll: 0,
  91. dataSource: [
  92. {
  93. orientationName: false,
  94. accountName: '新仇旧恨',
  95. populationType: '123',
  96. typeStr: '北京市',
  97. statDate: '2019-08-12',
  98. coverNum: 765,
  99. statusStr: '已解决',
  100. chujia: 5654
  101. }
  102. ],
  103. columns: [
  104. {
  105. title: '开关',
  106. align: 'center',
  107. dataIndex: 'orientationName',
  108. scopedSlots: {customRender: 'acountRelax'}
  109. },
  110. {
  111. title: '广告账户名称',
  112. align: 'center',
  113. dataIndex: 'accountName'
  114. },
  115. {
  116. title: '账户ID',
  117. align: 'center',
  118. dataIndex: 'typeStr'
  119. },
  120. {
  121. title: '创建时间',
  122. dataIndex: 'statDate',
  123. align: 'center'
  124. },
  125. {
  126. title: '账户余额',
  127. dataIndex: 'coverNum',
  128. align: 'center'
  129. },
  130. {
  131. title: '账户日预算量(元)',
  132. dataIndex: 'statusStr',
  133. align: 'center'
  134. },
  135. {
  136. title: '出价(元)',
  137. dataIndex: 'chujia',
  138. align: 'center'
  139. },
  140. {
  141. align: 'center',
  142. dataIndex: 'populationType',
  143. slots: {title: 'customTitle'},
  144. },
  145. {
  146. title: '操作',
  147. dataIndex: 'action',
  148. align: 'center',
  149. scopedSlots: {customRender: 'action'}
  150. }
  151. ]
  152. };
  153. },
  154. created() {
  155. this.form = this.$form.createForm(this);
  156. },
  157. mounted() {
  158. },
  159. methods: {
  160. handleQueryList(event) {
  161. event.preventDefault();
  162. const paramsData = this.form.getFieldsValue();
  163. },
  164. onShowSizeChange(current, pageSize) {
  165. const paramsData = this.form.getFieldsValue();
  166. this.tablePag = {
  167. page: current,
  168. size: pageSize
  169. };
  170. // this.handleGetTableList(paramsData);
  171. },
  172. handleSwitchChang(checked) {
  173. console.log(checked, 'switch-checked');
  174. },
  175. handleEdit(data) {
  176. console.log(data, 'data-edit');
  177. },
  178. handleDelete(data) {
  179. console.log(data, 'data-delete');
  180. },
  181. handleAddAccountConfig() {
  182. this.accountModalTitle = 'add';
  183. this.relaxVisible = true;
  184. },
  185. handleRelaxSure(data) {
  186. console.log(data, 'data--确认弹窗');
  187. this.relaxVisible = false;
  188. },
  189. handleRelaxCancel() {
  190. console.log('data--取消弹窗');
  191. this.relaxVisible = false;
  192. },
  193. }
  194. };
  195. </script>
  196. <style lang="less" scoped>
  197. @import "account-config";
  198. </style>