Преглед изворни кода

头条 账户配置 页面开发

jiayufei пре 4 година
родитељ
комит
8846271e33

+ 33 - 0
src/views/modules/account-config/account-config.less

@@ -0,0 +1,33 @@
+.account-config-content {
+    background: #fff;
+    height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        .acount-search-class {
+            width: 450px;
+        }
+        .reset-class {
+            margin-right: 10px !important;
+        }
+        .upload-person {
+            position: absolute;
+            right: 10px;
+            top: 0;
+        }
+    }
+    .pagin-table-class {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+}
+/deep/ .configuration-modal {
+    width: 900px !important;
+    .ant-modal-body {
+        height: 600px !important;
+        overflow-y: auto;
+    }
+}

+ 199 - 0
src/views/modules/account-config/account-config.vue

@@ -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>

+ 0 - 0
src/views/modules/account-config/components/configuration-modal.less


+ 43 - 0
src/views/modules/account-config/components/configuration-modal.vue

@@ -0,0 +1,43 @@
+<template>
+    <a-modal
+        :title="title === 'add' ? '新增配置' : '编辑配置'"
+        v-if="visible"
+        :visible="visible"
+        dialog-class="configuration-modal"
+        @ok="handleRelaxSure"
+        @cancel="handleRelaxCancel"
+    >
+        <div>
+            这个是账户配置弹窗
+        </div>
+    </a-modal>
+</template>
+<script>
+export default {
+    name: 'configuration-modal',
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: {
+            type: String,
+            default: ''
+        }
+    },
+    data() {
+        return {};
+    },
+    methods: {
+        handleRelaxSure() {
+            const paramsData = {
+                name: '123'
+            };
+            this.$emit('relaxSure', paramsData);
+        },
+        handleRelaxCancel() {
+            this.$emit('relaxCancel');
+        },
+    }
+};
+</script>