Ver código fonte

work 财务结算 开发

jiayufei 3 anos atrás
pai
commit
d18cb35ee8

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

@@ -0,0 +1,50 @@
+.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;
+}

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

@@ -0,0 +1,322 @@
+<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="name7">
+                        <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>
+            </div>
+        </a-modal>
+    </div>
+</template>
+<script>
+export default {
+    name: 'settlement-account',
+    data() {
+        return {
+            labelCol: {span: 7},
+            wrapperCol: {span: 14},
+            policyOperationForm: {
+                name6: undefined,
+                name7: undefined,
+                name8: undefined,
+            },
+            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: {
+        // 上传确定按钮操作
+        handlePolicyOperationSure() {
+            console.log('上传确定按钮操作');
+        },
+        // 上传取消按钮操作
+        handlePolicyOperationSure() {
+            console.log('上传取消按钮操作');
+            this.policyOperationStatus = false;
+        },
+        // 删除操作
+        handleSettleDel(list) {
+            console.log(list, '删除操作');
+        },
+        // 分页操作按钮
+        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>

+ 2 - 2
vue.config.js

@@ -71,7 +71,7 @@ module.exports = {
 				// target: 'http://192.168.1.8:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
 				// target: 'http://192.168.1.3:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
 				// target: 'http://192.168.0.59:8088', //请求本地 需要jeecg-boot后台项目  英豪
-				target: 'http://192.168.1.62:7001', //请求本地 需要jeecg-boot后台项目  英豪
+				// target: 'http://192.168.1.62:7001', //请求本地 需要jeecg-boot后台项目  英豪
 				// target: 'http://192.168.6.162:9806', //请求本地 需要jeecg-boot后台项目  祚云
 				// target: 'http://192.168.1.43:8098', //请求本地 需要jeecg-boot后台项目  毕洁泉
 				// target: 'http://192.168.1.43:8088', //请求本地 需要jeecg-boot后台项目  毕洁泉
@@ -88,7 +88,7 @@ module.exports = {
 				// 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://139.186.165.84:8806', //测试
 				// target:'http://apipre.tjyourong.com.cn', //预生产
 
 				ws: false,