Ver código fonte

合并 work-jyf 代码

jiayufei 3 anos atrás
pai
commit
02d6424597

+ 11 - 0
src/views/modules/policy-management/policy-management-server.js

@@ -0,0 +1,11 @@
+/**
+ * @file 账户配置API
+ * @author jiayufei
+ */
+
+//  export const urlAcount = 'http://118.24.244.213:8808'; // 线上
+//  export const urlAcount = 'http://gateway.tjyourong.com.cn'; // 测试
+ // export const urlAcount = 'http://192.168.1.43:8808'; // 子安
+ export const urlAcount = 'http://gateway.tjyourong.com.cn'; // 测试
+//  export const urlAcount = 'http://192.168.1.8:9999'; // 学超
+ 

+ 140 - 0
src/views/modules/policy-management/policy-management.less

@@ -0,0 +1,140 @@
+.policy-management-content {
+    background: #fff;
+    height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .control-con-title {
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .add-acount-policy-btn {
+            margin-left: 15px;
+        }
+        .policy-export-btn {
+            font-size: 18px;
+            font-weight: bold;
+        }
+    }
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        .grid-form-options {
+            margin-bottom: 10px;
+        }
+        .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/ .rejection-reason-class {
+    width: 600px !important;
+    .reason-class-header {
+        margin-bottom: 18px;
+        font-size: 16px;
+        font-weight: bold;
+    }
+    .rejection-textarea-msg {
+        height: 150px;
+    }
+}
+/deep/ .audit-policy-class {
+    width: 930px !important;
+    .ant-modal-body {
+        height: 420px;
+        overflow-y: auto;
+    }
+    .audit-policy-icon {
+        position: absolute;
+        right: 22px;
+        top: 20px;
+        font-size: 15px;
+        cursor: pointer;
+    }
+    .policy-line-quen {
+        display: flex;
+        .line-quen-left,
+        .line-quen-right {
+            flex: 1;
+            .policy-line-left,
+            .policy-line-right {
+                display: flex;
+                margin-bottom: 16px;
+                .line-left-spn {
+                    display: inline-block;
+                    width: 120px;
+                    text-align: right;
+                }
+                .line-right-spn {
+                    display: inline-block;
+                    width: 220px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+    }
+}
+/deep/ .policy-operation-class {
+    width: 1000px !important;
+    .ant-modal-body {
+        height: 600px;
+        overflow-y: auto;
+    }
+    .policy-operation-form {
+        display: flex;
+        .policy-operation-form-left,
+        .policy-operation-form-right {
+            flex: 1;
+        }
+        .input-common-short {
+            width: 210px;
+        }
+        .adver-position-radio {
+            margin-left: 140px;
+            margin-bottom: 15px;
+        }
+        .especial-label {
+            position: absolute;
+            left: -80px;
+            color: #f00;
+        }
+        .product-name-class {
+            position: relative;
+            .circle-icon-class {
+                font-size: 18px;
+                cursor: pointer;
+                position: absolute;
+                right: 0;
+                top: 0;
+                color: #1890ff;
+            }
+            .circle-icon-plus {
+                right: -30px;
+            }
+            .circle-icon-minus {
+                right: -60px;
+            }
+            .isActive {
+                padding-left: 139px;
+            }
+            /deep/ .ant-col-14 {
+                width: 100%;
+            }
+        }
+    }
+}

Diferenças do arquivo suprimidas por serem muito extensas
+ 1279 - 0
src/views/modules/policy-management/policy-management.vue


+ 56 - 0
src/views/modules/settlement-account/settlement-account.less

@@ -0,0 +1,56 @@
+.settlement-account-content {
+    background: #fff;
+    height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .control-con-title {
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .add-acount-policy-btn {
+            margin-left: 15px;
+        }
+        .policy-export-btn {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .settlement-header-icon {
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        .grid-form-options {
+            margin-top: 20px;
+            margin-bottom: 10px;
+        }
+        .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/ .settlement-modal-class {
+    width: 700px !important;
+    .file-down-title {
+        margin-left: 12px;
+        position: absolute;
+        top: -10px;
+        right: -100px;
+    }
+}

+ 462 - 0
src/views/modules/settlement-account/settlement-account.vue

@@ -0,0 +1,462 @@
+<template>
+    <div class="settlement-account-content">
+        <div class="control-con-title">
+            <div>
+                <span class="policy-export-btn">账户列表</span>
+                <span>
+                    <a-tooltip>
+                        <template slot="title">由销售人员上传需要进行结算的客户自运营的账户信息,需要注意开户主体需要是我司</template>
+                        <a-icon class="settlement-header-icon" type="question-circle"/>
+                    </a-tooltip>
+                    客户自运营账户列表,需要销售/媒介人员进行上传
+                </span>
+            </div>
+            <div>
+                <span class="add-acount-policy-btn"><a-button type="primary" @click="handleUploadAccount">上传账户数据</a-button></span>
+            </div>
+        </div>
+        <div class="control-con-header">
+            <a-form
+                class="grid-form"
+                layout="inline"
+                :form="searchForm"
+                hide-required-mark
+            >
+                <a-row class="grid-form-options">
+                    <a-form-item
+                        class="grid-form-item"
+                        label="广告主名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance" placeholder="请输入广告主名称"/>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="产品名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance11" placeholder="请输入产品名称"/>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="项目名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance22" placeholder="请输入项目名称"/>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="账户名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance33" placeholder="请输入账户名称"/>
+                    </a-form-item>
+                </a-row>
+                <a-row>
+                    <a-form-item label="销售:">
+                        <a-select v-model="configForm.creativeSale" style="width: 100px">
+                            <a-select-option :value="2">不限</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_UNION_SPLASH">开屏</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item label="负责人:">
+                        <a-select v-model="configForm.creativeMedia" style="width: 100px">
+                            <a-select-option :value="2">不限</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">快手</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">头条</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="时间:"
+                        :colon="false"
+                    >
+                        <a-range-picker
+                            v-model="configForm.time"
+                            format="YYYY-MM-DD"
+                        />
+                    </a-form-item>
+                    <a-form-item class="form-handle-btn">
+                        <a-button type="default" class="reset-class" @click="handleResetList">重置</a-button>
+                        <a-button type="primary" @click="handleQueryList">搜索</a-button>
+                    </a-form-item>
+                </a-row>
+            </a-form>
+        </div>
+        <div class="control-con-table">
+            <a-table
+                ref="table"
+                size="middle"
+                bordered
+                :columns="settlementColumns"
+                :dataSource="dataSource"
+                :pagination="false"
+                :scroll="{x: 1800}"
+            >
+                <span slot="acountRelax" slot-scope="text, record">
+                    <a-switch :checked="text === 0" @change="handleSwitchChang($event, record)"/>
+                </span>
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handleSettleDel(record)">删除</a>
+                    <a-divider type="vertical"/>
+                    <a>更多</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>
+        <!-- 新增、编辑政策 -->
+        <a-modal
+            v-if="policyOperationStatus"
+            title="账户上传"
+            :visible="policyOperationStatus"
+            dialog-class="settlement-modal-class"
+            @ok="handlePolicyOperationSure"
+            @cancel="handlePolicyOperationCancel"
+        >
+            <div>
+                <a-form-model
+                    class="policy-operation-form"
+                    ref="policyOperationForm"
+                    :model="policyOperationForm"
+                    :rules="policyOperationRules"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                >
+                    <a-form-model-item label="选择广告主公司名称" prop="name6">
+                        <a-select v-model="policyOperationForm.name6" placeholder="请选择广告主公司名称">
+                            <a-select-option :value="1">快手</a-select-option>
+                            <a-select-option :value="2">头条</a-select-option>
+                        </a-select>
+                    </a-form-model-item>
+                    <a-form-model-item label="选择产品名称" prop="name7">
+                        <a-select v-model="policyOperationForm.name7" placeholder="请选择产品名称">
+                            <a-select-option :value="1">快手</a-select-option>
+                            <a-select-option :value="2">头条</a-select-option>
+                        </a-select>
+                    </a-form-model-item>
+                    <a-form-model-item label="选择项目名称" prop="name8">
+                        <a-select v-model="policyOperationForm.name8" placeholder="请选择项目名称">
+                            <a-select-option :value="1">快手</a-select-option>
+                            <a-select-option :value="2">头条</a-select-option>
+                        </a-select>
+                    </a-form-model-item>
+                    <a-form-model-item label="选择媒体">
+                        <a-radio-group v-model="policyOperationForm.name9" button-style="solid">
+                            <a-radio-button value="a">头条</a-radio-button>
+                            <a-radio-button value="b">快手</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="运营方式">
+                        <a-radio-group v-model="policyOperationForm.name10" button-style="solid">
+                            <a-radio-button value="a">自运营</a-radio-button>
+                            <a-radio-button value="b">代运营</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="附件上传">
+                        <a-upload
+                            name="file"
+                            :file-list="fileList"
+                            :before-upload="beforeUpload"
+                            @change="handleChange"
+                        >
+                            <a-button><a-icon type="upload" />文件上传</a-button>
+                        </a-upload>
+                        <a class="file-down-title" @click="handleFileDownTitle">文件格式下载</a>
+                        <p class="upload-txt-rules">支持扩展名:.xlxs</p>
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+        </a-modal>
+    </div>
+</template>
+<script>
+import {mapGetters} from 'vuex';
+
+import BMF from 'browser-md5-file';
+let COS = require('cos-js-sdk-v5');
+let cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
+});
+
+export default {
+    name: 'settlement-account',
+    data() {
+        return {
+            fileList: [],
+            labelCol: {span: 7},
+            wrapperCol: {span: 14},
+            policyOperationForm: {
+                name6: undefined,
+                name7: undefined,
+                name8: undefined,
+                name9: 'a',
+                name10: 'a',
+            },
+            policyOperationRules: {
+                name6: [{required: true, message: '请选择广告主公司名称', trigger: 'change'}],
+                name7: [{required: true, message: '请选择产品名称', trigger: 'change'}],
+                name8: [{required: true, message: '请选择项目名称', trigger: 'change'}],
+            },
+            policyOperationStatus: false,
+            totalAll: 100,
+            dataSource: [
+                {
+                    status: '腾讯科技有限公司', 
+                    accountId_dictText: '腾讯科技有限公司', 
+                    creativeImageMode: '产品名称', 
+                    accountId: '快手', 
+                    createTime: '何甜甜', 
+                    validBalance: '待审核', 
+                    accountBudget: '是', 
+                    adCpaBidStr: '80天',
+                    acountRelax: 0
+                }
+            ],
+            settlementColumns: [
+                {
+                    title: '广告主主体名称',
+                    align: 'center',
+                    dataIndex: 'status',
+                    width: 150
+                },
+                {
+                    title: '产品名称',
+                    align: 'center',
+                    dataIndex: 'accountId_dictText',
+                    width: 150,
+                    scopedSlots: {customRender: 'accountId_dictText'}
+                },
+                {
+                    title: '项目名称',
+                    align: 'center',
+                    dataIndex: 'creativeImageMode',
+                    width: 150
+                },
+                {
+                    title: '账户ID',
+                    align: 'center',
+                    dataIndex: 'accountId',
+                    width: 150
+                },
+                {
+                    title: '账户名称',
+                    dataIndex: 'createTime',
+                    align: 'center',
+                    width: 150
+                },
+                {
+                    title: '媒体',
+                    dataIndex: 'validBalance',
+                    align: 'center',
+                    width: 150,
+                    scopedSlots: {customRender: 'validBalance'}
+                },
+                {
+                    title: '负责人',
+                    dataIndex: 'accountBudget',
+                    width: 180,
+                    align: 'center'
+                },
+                {
+                    title: '运营方式',
+                    dataIndex: 'adCpaBidStr',
+                    align: 'center',
+                    width: 150,
+                    scopedSlots: {customRender: 'adCpaBidStr'}
+                },
+                {
+                    title: '账户状态',
+                    align: 'center',
+                    dataIndex: 'acountRelax',
+                    width: 150,
+                    scopedSlots: {customRender: 'acountRelax'}
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    align: 'center',
+                    width: 250,
+                    fixed: 'right',
+                    scopedSlots: {customRender: 'action'}
+                },
+            ],
+            configForm: {
+                creativeAdvance: '',
+                creativeAdvance11: '',
+                creativeAdvance22: '',
+                creativeAdvance33: '',
+                creativeSale: 2,
+                creativeMedia: 2,
+                time: []
+            },
+            tablePag: {
+                page: 1,
+                siz: 10
+            }
+        };
+    },
+    created() {
+        this.searchForm = this.$form.createForm(this);
+    },
+    methods: {
+        ...mapGetters(['userInfo']),
+        // 文件格式下载
+        handleFileDownTitle() {
+            console.log('文件格式下载');
+        },
+        beforeUpload(file) {
+            this.cosUpload(file);
+        },
+        handleMd5(file) {
+            let bmf = new BMF();
+            let that = this;
+            return new Promise(function (resolve, reject) {
+                bmf.md5(file, (err, md5) => {
+                    getAction('kuaishouPopulationPackage/checkPopulationPackage', {signature: md5}).then(result => {
+                        if (result.code === 200) {
+                            that.personNameDisabled = false;
+                            that.personResourceDisabled = false;
+                            resolve();
+                        }
+                        else if (result.code === 201) {
+                            that.$message.error(result.message);
+                            that.personForm.name = result.result.orientationName;
+                            that.personForm.resource = result.result.type;
+                            that.personNameDisabled = true;
+                            that.personResourceDisabled = true;
+                            reject();
+                        }
+                    }).catch(error => {
+                        console.log(error, 'eeee');
+                        reject();
+                    });
+                });
+            });
+        },
+        handleChange(info) {
+            this.fileList = info.fileList;
+        },
+        cosUpload(file) {
+            let that = this;
+            let date = new Date();
+            let y = date.getFullYear();
+            let MM = date.getMonth() + 1;
+            MM = MM < 10 ? '0' + MM : MM;
+            let d = date.getDate();
+            d = d < 10 ? '0' + d : d;
+            let timeElse = new Date().getTime();
+            let arr = file.name.split('.');
+            let str = '';
+            for (let i = 0; i < arr.length; i++) {
+                if (i === arr.length - 1) {
+                }
+                else {
+                    if (i === arr.length - 2) {
+                        str += arr[i];
+                    }
+                    else {
+                        str += arr[i] + '.';
+                    }
+                }
+            }
+            cos.putObject(
+                {
+                    Bucket: 'media-1301855440',
+                    Region: 'ap-chongqing',
+                    // 存储桶所在地域,必须字段
+                    Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
+                    StorageClass: 'STANDARD',
+                    Body: file // 上传文件对象
+                },
+                function (err, data) {
+                    if (err) {
+                        that.$message.error('上传失败!!!' + err);
+                        return;
+                    }
+                    that.loadingElse = false;
+                    that.fileList.push({
+                        uid: file.name,
+                        name: file.name,
+                        status: 'done',
+                        url: '//' + data.Location
+                    });
+                    if (that.fileList.length > 1) {
+                        that.fileList = that.fileList.slice(-1);
+                    }
+                    const isZip = file.type.includes('xlxs');
+                    const fileOvesize = file.size > (1024 * 1024 * 1024);
+                    if (!isZip) {
+                        that.$message.error('只能上传xlxs格式的文件');
+                        return;
+                    }
+                    if (fileOvesize) {
+                        that.$message.error('文件大小不能超过1G');
+                        return;
+                    }
+                    // that.handleMd5(file);
+                }
+            );
+        },
+        // 上传确定按钮操作
+        handlePolicyOperationSure() {
+            console.log('上传确定按钮操作');
+        },
+        // 上传取消按钮操作
+        handlePolicyOperationCancel() {
+            console.log('上传取消按钮操作');
+            this.policyOperationStatus = false;
+        },
+        // 删除操作
+        handleSettleDel(list) {
+            console.log(list, '删除操作');
+            let that = this;
+            this.$confirm({
+                title: '提示',
+                content: '确认删除该条数据',
+                onOk() {}
+            });
+        },
+        // 分页操作按钮
+        onShowSizeChange(current, pageSize) {
+            this.tablePag = {
+                page: current,
+                size: pageSize
+            };
+            // this.handleInitTable();
+        },
+        // table 开关 操作按钮
+        handleSwitchChang(checked, data) {
+            console.log(checked, data, '------');
+        },
+        // 账户上传按钮
+        handleUploadAccount() {
+            console.log('上传账户数据');
+            this.policyOperationStatus = true;
+        },
+        // 查询的按钮
+        handleQueryList() {
+            console.log(this.configForm, '搜索的按钮');
+        },
+        // 重置的按钮
+        handleResetList() {
+            console.log(this.configForm, '重置的按钮');
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "settlement-account";
+</style>

+ 11 - 0
src/views/modules/settlement-information/settlement-information-server.js

@@ -0,0 +1,11 @@
+/**
+ * @file 账户配置API
+ * @author jiayufei
+ */
+
+//  export const urlAcount = 'http://118.24.244.213:8808'; // 线上
+//  export const urlAcount = 'http://gateway.tjyourong.com.cn'; // 测试
+ // export const urlAcount = 'http://192.168.1.43:8808'; // 子安
+//  export const urlAcount = 'http://gateway.tjyourong.com.cn'; // 测试
+// export const urlAcount = 'http://192.168.1.8:9999'; // 学超
+ 

+ 53 - 0
src/views/modules/settlement-information/settlement-information.less

@@ -0,0 +1,53 @@
+.settlement-information-content {
+    background: #fff;
+    height: calc(100vh - 137px);
+    padding: 20px;
+    overflow-y: auto;
+    .control-con-title {
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .add-acount-policy-btn {
+            margin-left: 15px;
+        }
+        .policy-export-btn {
+            font-size: 18px;
+            font-weight: bold;
+        }
+        .settlement-header-icon {
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+    }
+    .control-con-header {
+        margin-bottom: 20px;
+        position: relative;
+        .grid-form-options {
+            margin-top: 20px;
+            margin-bottom: 10px;
+        }
+        .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/ .information-modal-class {
+    width: 700px !important;
+    .upload-txt-rules {
+        margin: 0;
+    }
+}

+ 596 - 0
src/views/modules/settlement-information/settlement-information.vue

@@ -0,0 +1,596 @@
+<template>
+    <div class="settlement-information-content">
+        <div class="control-con-title">
+            <div>
+                <span class="policy-export-btn">结算单信息</span>
+                <span>
+                    <a-tooltip>
+                        <template slot="title">由销售人员上传需要进行结算的客户自运营的账户信息,需要注意开户主体需要是我司</template>
+                        <a-icon class="settlement-header-icon" type="question-circle"/>
+                    </a-tooltip>
+                    显示列表信息,销售人员只能操作与自己相关的项目
+                </span>
+            </div>
+            <div>
+                <span class="add-acount-policy-btn"><a-button @click="handleDownloadProfit">下载利润表</a-button></span>
+                <span class="add-acount-policy-btn"><a-button @click="handleDownloadSettlement">下载结算单</a-button></span>
+                <span class="add-acount-policy-btn"><a-button type="primary" @click="handleUploadAccount">上传截图</a-button></span>
+            </div>
+        </div>
+        <div class="control-con-header">
+            <a-form
+                class="grid-form"
+                layout="inline"
+                :form="searchForm"
+                hide-required-mark
+            >
+                <a-row class="grid-form-options">
+                    <a-form-item
+                        class="grid-form-item"
+                        label="产品名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance11" placeholder="请输入产品名称"/>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="项目名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance22" placeholder="请输入项目名称"/>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="账户名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance33" placeholder="请输入账户名称"/>
+                    </a-form-item>
+                    <a-form-item label="运营:">
+                        <a-select v-model="configForm.creativeSale" style="width: 100px">
+                            <a-select-option :value="2">不限</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">竖版视频</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">大图横图</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_LARGE_VERTICAL">大图竖图</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_UNION_SPLASH">开屏</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                </a-row>
+                <a-row>
+                    <a-form-item label="媒体:">
+                        <a-select v-model="configForm.creativeMedia" style="width: 100px">
+                            <a-select-option :value="2">不限</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_VIDEO_VERTICAL">快手</a-select-option>
+                            <a-select-option value="CREATIVE_IMAGE_MODE_LARGE">头条</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="时间:"
+                        :colon="false"
+                    >
+                        <a-range-picker
+                            v-model="configForm.time"
+                            format="YYYY-MM-DD"
+                        />
+                    </a-form-item>
+                    <a-form-item class="form-handle-btn">
+                        <a-button type="default" class="reset-class" @click="handleResetList">重置</a-button>
+                        <a-button type="primary" @click="handleQueryList">搜索</a-button>
+                    </a-form-item>
+                </a-row>
+            </a-form>
+        </div>
+        <div class="control-con-table">
+            <a-table
+                ref="table"
+                size="middle"
+                bordered
+                :columns="settlementColumns"
+                :dataSource="dataSource"
+                :pagination="false"
+                :scroll="{x: 1300}"
+            >
+                <span slot="actions" slot-scope="text, record">
+                    <a @click="handleSettleDel(record)">删除</a>
+                    <a-divider type="vertical"/>
+                    <a>更多</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>
+        <!-- 上传截图 -->
+        <a-modal
+            v-if="policyOperationStatus"
+            title="账户上传"
+            :visible="policyOperationStatus"
+            dialog-class="information-modal-class"
+            @ok="handlePolicyOperationSure"
+            @cancel="handlePolicyOperationCancel"
+        >
+            <div>
+                <a-form-model
+                    class="policy-operation-form"
+                    ref="policyOperationForm"
+                    :model="policyOperationForm"
+                    :rules="policyOperationRules"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                >
+                    <a-form-model-item label="选择广告主公司名称" prop="name6">
+                        <a-select v-model="policyOperationForm.name6" placeholder="请选择广告主公司名称">
+                            <a-select-option :value="1">快手</a-select-option>
+                            <a-select-option :value="2">头条</a-select-option>
+                        </a-select>
+                    </a-form-model-item>
+                    <a-form-model-item label="选择产品名称" prop="name7">
+                        <a-select v-model="policyOperationForm.name7" placeholder="请选择产品名称">
+                            <a-select-option :value="1">快手</a-select-option>
+                            <a-select-option :value="2">头条</a-select-option>
+                        </a-select>
+                    </a-form-model-item>
+                    <a-form-model-item label="选择媒体">
+                        <a-radio-group v-model="policyOperationForm.name9" button-style="solid">
+                            <a-radio-button value="a">头条</a-radio-button>
+                            <a-radio-button value="b">快手</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="时间" prop="time">
+                        <a-month-picker
+                            v-model="policyOperationForm.time"
+                            format="YYYY-MM"
+                            placeholder="请选择时间"
+                            @change="handleLaunchData"
+                        />
+                    </a-form-model-item>
+                    <a-form-model-item label="附件上传">
+                        <a-upload
+                            name="file"
+                            :file-list="fileList"
+                            :before-upload="beforeUpload"
+                            :remove="handleFileRemove"
+                        >
+                            <a-button><a-icon type="upload"/>文件上传</a-button>
+                        </a-upload>
+                        <p class="upload-txt-rules">1、支持扩展名:.jpg</p>
+                        <p>2、上传图片名称账户ID,若有多个图片则账户ID-1、账户ID-2</p>
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+        </a-modal>
+        <!-- 下载结算单 -->
+        <a-modal
+            v-if="settlementModalStatus"
+            title="下载结算单"
+            :visible="settlementModalStatus"
+            dialog-class="information-modal-class"
+            @ok="handleSettlementModalSure"
+            @cancel="handleSettlementModalnCancel"
+        >
+            <div>
+                <a-form-model
+                    class="policy-operation-form"
+                    ref="settlementModalForm"
+                    :model="settlementModalForm"
+                    :rules="settlementModalRules"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                >
+                    <a-form-model-item label="选择广告主公司名称" prop="name6">
+                        <a-select v-model="settlementModalForm.name6" placeholder="请选择广告主公司名称">
+                            <a-select-option :value="1">快手</a-select-option>
+                            <a-select-option :value="2">头条</a-select-option>
+                        </a-select>
+                    </a-form-model-item>
+                    <a-form-model-item label="选择产品名称" prop="name7">
+                        <a-select v-model="settlementModalForm.name7" placeholder="请选择产品名称">
+                            <a-select-option :value="1">快手</a-select-option>
+                            <a-select-option :value="2">头条</a-select-option>
+                        </a-select>
+                    </a-form-model-item>
+                    <a-form-model-item label="选择媒体">
+                        <a-radio-group v-model="settlementModalForm.name9" button-style="solid">
+                            <a-radio-button value="a">头条</a-radio-button>
+                            <a-radio-button value="b">快手</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="时间" prop="time">
+                        <a-month-picker
+                            v-model="settlementModalForm.time"
+                            format="YYYY-MM"
+                            placeholder="请选择时间"
+                            @change="handleLaunchData"
+                        />
+                    </a-form-model-item>
+                    <a-form-model-item label="账户数量">
+                        <span>23</span>
+                    </a-form-model-item>
+                    <a-form-model-item label="截图已上传">
+                        <span>20</span>
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+        </a-modal>
+        <!-- 下载利润表 -->
+        <a-modal
+            v-if="profitModalStatus"
+            title="下载利润单"
+            :visible="profitModalStatus"
+            dialog-class="information-modal-class"
+            @ok="handleProfitModalSure"
+            @cancel="handleProfitModalnCancel"
+        >
+            <div>
+                 <a-form-model
+                    class="policy-operation-form"
+                    ref="profitModalForm"
+                    :model="profitModalForm"
+                    :rules="profitModalRules"
+                    :label-col="labelCol"
+                    :wrapper-col="wrapperCol"
+                >
+                    <a-form-model-item label="选择媒体">
+                        <a-radio-group v-model="profitModalForm.name9" button-style="solid">
+                            <a-radio-button value="a">头条</a-radio-button>
+                            <a-radio-button value="b">快手</a-radio-button>
+                        </a-radio-group>
+                    </a-form-model-item>
+                    <a-form-model-item label="时间" prop="launchDateRange">
+                        <a-range-picker
+                            v-model="profitModalForm.launchDateRange"
+                            format="YYYY-MM-DD"
+                            @change="handleLaunchDateRange"
+                        />
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+        </a-modal>
+    </div>
+</template>
+<script>
+import {getAction, postAction} from '@/api/manage';
+import moment from 'moment';
+import {mapGetters} from 'vuex';
+import {urlAcount} from './settlement-information-server.js';
+
+import BMF from 'browser-md5-file';
+let COS = require('cos-js-sdk-v5');
+let cos = new COS({
+    SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
+    SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9'
+});
+
+export default {
+    name: 'settlement-information',
+    data() {
+        return {
+            profitModalForm: {
+                name9: 'a',
+                launchDateRange: []
+            },
+            profitModalRules: {
+                launchDateRange: [{required: true, message: '请选择时间', trigger: 'change'}]
+            },
+            profitModalStatus: false,
+            settlementModalStatus: false,
+            fileList: [],
+            labelCol: {span: 7},
+            wrapperCol: {span: 14},
+            settlementModalForm: {
+                name6: undefined,
+                name7: undefined,
+                name8: undefined,
+                name9: 'a',
+                name10: 'a',
+                time: ''
+            },
+            settlementModalRules: {
+                name6: [{required: true, message: '请选择广告主公司名称', trigger: 'change'}],
+                name7: [{required: true, message: '请选择产品名称', trigger: 'change'}],
+                name8: [{required: true, message: '请选择项目名称', trigger: 'change'}],
+                time: [{required: true, message: '请选择时间', trigger: 'change'}],
+            },
+            policyOperationForm: {
+                name6: undefined,
+                name7: undefined,
+                name8: undefined,
+                name9: 'a',
+                name10: 'a',
+                time: ''
+            },
+            policyOperationRules: {
+                name6: [{required: true, message: '请选择广告主公司名称', trigger: 'change'}],
+                name7: [{required: true, message: '请选择产品名称', trigger: 'change'}],
+                name8: [{required: true, message: '请选择项目名称', trigger: 'change'}],
+                time: [{required: true, message: '请选择时间', trigger: 'change'}],
+            },
+            policyOperationStatus: false,
+            tablePag: {
+                page: 1, 
+                size: 10
+            },
+            totalAll: 100,
+            dataSource: [
+                {
+                    name1: '腾讯科技有限公司', 
+                    name2: '腾讯科技有限公司', 
+                    name3: '产品名称', 
+                    name4: '快手', 
+                    name5: '何甜甜', 
+                    name6: '待审核', 
+                    name7: '是'
+                }
+            ],
+            settlementColumns: [
+                {
+                    title: '广告主主体名称',
+                    align: 'center',
+                    dataIndex: 'name1',
+                    width: 180
+                },
+                {
+                    title: '产品名称',
+                    align: 'center',
+                    dataIndex: 'name2',
+                    width: 180
+                },
+                {
+                    title: '媒体',
+                    align: 'center',
+                    dataIndex: 'name3',
+                    width: 150
+                },
+                {
+                    title: '上传人',
+                    align: 'center',
+                    dataIndex: 'name4',
+                    width: 150
+                },
+                {
+                    title: '账户数量',
+                    dataIndex: 'name5',
+                    align: 'center',
+                    width: 150
+                },
+                {
+                    title: '上传数量',
+                    dataIndex: 'name6',
+                    align: 'center',
+                    width: 150
+                },
+                {
+                    title: '上传时间',
+                    align: 'center',
+                    dataIndex: 'name7',
+                    width: 150
+                },
+                {
+                    title: '操作',
+                    align: 'center',
+                    dataIndex: 'actions',
+                    width: 250,
+                    fixed: 'right',
+                    scopedSlots: {customRender: 'actions'}
+                }
+            ],
+            configForm: {
+                creativeAdvance: '',
+                creativeAdvance11: '',
+                creativeAdvance22: '',
+                creativeAdvance33: '',
+                creativeSale: 2,
+                creativeMedia: 2,
+                time: []
+            }
+        };
+    },
+    created() {
+        this.searchForm = this.$form.createForm(this);
+    },
+    methods: {
+        // this.userInfo()
+        ...mapGetters(['userInfo']),
+        moment,
+        handleLaunchDateRange(date, dateString) {
+            this.profitModalForm.launchDateRange = dateString;
+        },
+        handleProfitModalSure() {
+            console.log(this.profitModalForm, '下载利润表确认按钮');
+            this.$refs.profitModalForm.validate(valid => {
+                if (valid) {
+                    console.log('条件完全');
+                }
+                else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        handleProfitModalnCancel() {
+            this.profitModalStatus = false;
+        },
+        handleSettlementModalSure() {
+            console.log(this.settlementModalForm, '下载结算单确定按钮');
+            this.$refs.settlementModalForm.validate(valid => {
+                if (valid) {
+                    console.log('条件完全');
+                }
+                else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        handleSettlementModalnCancel() {
+            console.log('下载结算单取消按钮');
+            this.settlementModalStatus = false;
+        },
+        // 月份时间选择器
+        handleLaunchData(date, dateString) {
+            this.policyOperationForm.time = dateString;
+        },
+        // 查询的按钮
+        handleQueryList() {
+            console.log(this.configForm, '搜索的按钮');
+        },
+        // 重置的按钮
+        handleResetList() {
+            console.log(this.configForm, '重置的按钮');
+        },
+        handleFileRemove(file) {
+            console.log(file, this.fileList, '-----');
+            let formData = this.fileList;
+            this.fileList= formData.filter(item => file.uid !== item.uid);
+        },
+        beforeUpload(file) {
+            this.cosUpload(file);
+        },
+        handleMd5(file) {
+            let bmf = new BMF();
+            let that = this;
+            return new Promise(function (resolve, reject) {
+                bmf.md5(file, (err, md5) => {
+                    getAction('kuaishouPopulationPackage/checkPopulationPackage', {signature: md5}).then(result => {
+                        if (result.code === 200) {
+                            that.personNameDisabled = false;
+                            that.personResourceDisabled = false;
+                            resolve();
+                        }
+                        else if (result.code === 201) {
+                            that.$message.error(result.message);
+                            that.personForm.name = result.result.orientationName;
+                            that.personForm.resource = result.result.type;
+                            that.personNameDisabled = true;
+                            that.personResourceDisabled = true;
+                            reject();
+                        }
+                    }).catch(error => {
+                        console.log(error, 'eeee');
+                        reject();
+                    });
+                });
+            });
+        },
+        cosUpload(file) {
+            let that = this;
+            let date = new Date();
+            let y = date.getFullYear();
+            let MM = date.getMonth() + 1;
+            MM = MM < 10 ? '0' + MM : MM;
+            let d = date.getDate();
+            d = d < 10 ? '0' + d : d;
+            let timeElse = new Date().getTime();
+            let arr = file.name.split('.');
+            let str = '';
+            for (let i = 0; i < arr.length; i++) {
+                if (i === arr.length - 1) {
+                }
+                else {
+                    if (i === arr.length - 2) {
+                        str += arr[i];
+                    }
+                    else {
+                        str += arr[i] + '.';
+                    }
+                }
+            }
+            cos.putObject(
+                {
+                    Bucket: 'media-1301855440',
+                    Region: 'ap-chongqing',
+                    // 存储桶所在地域,必须字段
+                    Key: that.uploadType + '/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.' + arr[arr.length - 1],
+                    StorageClass: 'STANDARD',
+                    Body: file // 上传文件对象
+                },
+                function (err, data) {
+                    if (err) {
+                        that.$message.error('上传失败!!!' + err);
+                        return;
+                    }
+                    that.loadingElse = false;
+                    that.fileList.push({
+                        uid: file.name,
+                        name: file.name,
+                        status: 'done',
+                        url: '//' + data.Location
+                    });
+                    const isZip = file.type.includes('png') || file.type.includes('jpeg');
+                    if (!isZip) {
+                        that.$message.error('请上传正确的图片');
+                        return;
+                    }
+                    // that.handleMd5(file);
+                }
+            );
+        },
+        // 上传确定按钮操作
+        handlePolicyOperationSure() {
+            console.log(this.policyOperationForm, '上传确定按钮操作');
+            if (!this.fileList.length) {
+                this.$message.error('请上传附件');
+                return;
+            }
+            this.$refs.policyOperationForm.validate(valid => {
+                if (valid) {
+                    console.log('条件完全');
+                }
+                else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        // 上传取消按钮操作
+        handlePolicyOperationCancel() {
+            console.log('上传取消按钮操作');
+            this.policyOperationStatus = false;
+        },
+        // 分页操作按钮
+        onShowSizeChange(current, pageSize) {
+            this.tablePag = {
+                page: current,
+                size: pageSize
+            };
+            // this.handleInitTable();
+        },
+        // 删除操作
+        handleSettleDel(list) {
+            console.log(list, '删除操作');
+            let that = this;
+            this.$confirm({
+                title: '提示',
+                content: '确认删除该条数据',
+                onOk() {}
+            });
+        },
+        // 下载利润单
+        handleDownloadProfit() {
+            console.log('下载利润单');
+            this.profitModalStatus = true;
+        },
+        // 下载结算单
+        handleDownloadSettlement() {
+            console.log('下载结算单');
+            this.settlementModalStatus = true;
+        },
+        // 上传截图
+        handleUploadAccount() {
+            console.log('上传截图');
+            this.policyOperationStatus = true;
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    @import "settlement-information";
+</style>

+ 4 - 4
vue.config.js

@@ -64,7 +64,7 @@ module.exports = {
 	devServer: {
 		hot:true,
 		// inline: true,
-		port: 3000,
+		port: 8080,
 		open : true,
 		proxy: {
 			'/jeecg-boot': {
@@ -81,15 +81,15 @@ module.exports = {
 				// target: 'http://192.168.1.219:8081', //请求本地 需要jeecg-boot后台项目  赵西安
 				// target: 'http://192.168.1.193:8080', //请求本地 需要jeecg-boot后台项目  李煜一
 				// target: 'http://192.168.1.193:31012', //请求本地 需要jeecg-boot后台项目  李煜一
-				 target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
+				//  target: 'http://api.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
 				// target: 'https://trac.tjyourong.com.cn', //请求本地 需要jeecg-boot后台项目
 				// target: 'http://39.106.184.70:8088/', //请求本地 需要jeecg-boot后台项目
 				//  target: 'http://adsp.tjyourong.com.cn/', //请求本地 需要jeecg-boot后台项目
 				// target: 'http://192.168.1.251/', //请求本地 需要jeecg-boot后台项目
 				// target:'http://118.24.244.213:8804',
 				// target: 'http://192.168.1.43:9090', // 子安
-				// target: 'http://192.168.1.8:8806', // 学超
-				// target:'http://139.186.165.84:8806', //测试
+				// target: 'http://192.168.1.8:9999', // 学超
+				target:'http://gateway.tjyourong.com.cn', //测试
 				// target:'http://apipre.tjyourong.com.cn', //预生产
         // target: 'http://192.168.1.134:8080', //请求本地 需要jeecg-boot后台项目  周泽宇