|
@@ -0,0 +1,199 @@
|
|
|
+<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>
|