123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 |
- <template>
- <div class="account-config-content">
- <div class="control-con-header">
- <a-form
- class="grid-form" layout="inline"
- :form="form"
- hide-required-mark
- @submit="handleQueryList"
- >
- <a-row class="grid-form-options">
- <a-form-item
- class="grid-form-item" label="账户"
- :colon="false"
- >
- <acount-search class="acount-search-class" :appId.sync="acountId" :multiple="false"></acount-search>
- </a-form-item>
- <a-form-item class="form-handle-btn">
- <a-button type="default" class="reset-class">重置</a-button>
- <a-button type="primary" html-type="submit">查询</a-button>
- </a-form-item>
- </a-row>
- </a-form>
- <a-button type="primary" class="upload-person" @click="handleAddAccountConfig">新建账户配置</a-button>
- </div>
- <div class="control-con-table">
- <a-table
- ref="table"
- size="middle"
- bordered
- :columns="columns"
- :dataSource="dataSource"
- :pagination="false"
- >
- <span slot="customTitle">
- 花费(元)
- <a-tooltip placement="top">
- <template slot="title">
- <span>当日花费</span>
- </template>
- <a-icon type="smile-o"/>
- </a-tooltip>
- </span>
- <span slot="acountRelax" slot-scope="text, record">
- <a-switch :checked="text" @change="handleSwitchChang"/>
- </span>
- <span slot="action" slot-scope="text, record">
- <a @click="handleEdit(record)">编辑</a>
- <a-divider type="vertical" />
- <a @click="handleDelete(record)">删除</a>
- <a-divider type="vertical" />
- <a @click="handleDelete(record)">修改出价</a>
- <a-divider type="vertical" />
- <a @click="handleDelete(record)">修改预算</a>
- </span>
- </a-table>
- <a-pagination
- class="pagin-table-class"
- :total="totalAll"
- :show-total="total => `共 ${totalAll} 条`"
- size="small"
- show-size-changer
- show-quick-jumper
- @change="onShowSizeChange"
- @showSizeChange="onShowSizeChange"
- />
- </div>
- <configuration-modal
- :title="accountModalTitle"
- :visible="relaxVisible"
- @relaxSure="handleRelaxSure"
- @relaxCancel="handleRelaxCancel"
- >
- </configuration-modal>
- </div>
- </template>
- <script>
- import AcountSearch from '@/views/modules/Statistics/components/Treeselect.vue';
- import ConfigurationModal from './components/configuration-modal.vue';
- export default {
- name: 'account-config',
- components: {
- AcountSearch,
- ConfigurationModal
- },
- data() {
- return {
- relaxVisible: false,
- accountModalTitle: 'add',
- acountId: undefined, // 搜索的账户ID
- totalAll: 0,
- dataSource: [
- {
- orientationName: false,
- accountName: '新仇旧恨',
- populationType: '123',
- typeStr: '北京市',
- statDate: '2019-08-12',
- coverNum: 765,
- statusStr: '已解决',
- chujia: 5654
- }
- ],
- columns: [
- {
- title: '开关',
- align: 'center',
- dataIndex: 'orientationName',
- scopedSlots: {customRender: 'acountRelax'}
- },
- {
- title: '广告账户名称',
- align: 'center',
- dataIndex: 'accountName'
- },
- {
- title: '账户ID',
- align: 'center',
- dataIndex: 'typeStr'
- },
- {
- title: '创建时间',
- dataIndex: 'statDate',
- align: 'center'
- },
- {
- title: '账户余额',
- dataIndex: 'coverNum',
- align: 'center'
- },
- {
- title: '账户日预算量(元)',
- dataIndex: 'statusStr',
- align: 'center'
- },
- {
- title: '出价(元)',
- dataIndex: 'chujia',
- align: 'center'
- },
- {
- align: 'center',
- dataIndex: 'populationType',
- slots: {title: 'customTitle'},
- },
- {
- title: '操作',
- dataIndex: 'action',
- align: 'center',
- scopedSlots: {customRender: 'action'}
- }
- ]
- };
- },
- created() {
- this.form = this.$form.createForm(this);
- },
- mounted() {
- },
- methods: {
- handleQueryList(event) {
- event.preventDefault();
- const paramsData = this.form.getFieldsValue();
- },
- onShowSizeChange(current, pageSize) {
- const paramsData = this.form.getFieldsValue();
- this.tablePag = {
- page: current,
- size: pageSize
- };
- // this.handleGetTableList(paramsData);
- },
- handleSwitchChang(checked) {
- console.log(checked, 'switch-checked');
- },
- handleEdit(data) {
- console.log(data, 'data-edit');
- },
- handleDelete(data) {
- console.log(data, 'data-delete');
- },
- handleAddAccountConfig() {
- this.accountModalTitle = 'add';
- this.relaxVisible = true;
- },
- handleRelaxSure(data) {
- console.log(data, 'data--确认弹窗');
- this.relaxVisible = false;
- },
- handleRelaxCancel() {
- console.log('data--取消弹窗');
- this.relaxVisible = false;
- },
- }
- };
- </script>
- <style lang="less" scoped>
- @import "account-config";
- </style>
|