Browse Source

work 政策 页面 开发

jiayufei 3 years ago
parent
commit
3e280d9f11

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

@@ -0,0 +1,84 @@
+.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;
+        .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: 700px !important;
+    .audit-policy-icon {
+        position: absolute;
+        right: 22px;
+        top: 20px;
+        font-size: 15px;
+        cursor: pointer;
+    }
+    .policy-line-class {
+        display: flex;
+        margin-bottom: 16px;
+        .policy-line-left,
+        .policy-line-right {
+            flex: 1;
+            display: flex;
+            .line-left-spn {
+                display: inline-block;
+                width: 120px;
+                text-align: right;
+            }
+            .line-right-spn {
+                display: inline-block;
+                width: 140px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}
+/deep/ .policy-operation-class {
+    width: 700px !important;
+}

+ 586 - 0
src/views/modules/policy-management/policy-management.vue

@@ -0,0 +1,586 @@
+<template>
+    <div class="policy-management-content">
+        <div class="control-con-title">
+            <div><span class="policy-export-btn">销售政策列表</span></div>
+            <div>
+                <span><a-button type="default" @click="handlePolicyExport">政策导出</a-button></span>
+                <span class="add-acount-policy-btn"><a-button type="primary" @click="handleAddAccountPolicy">创建账户政策</a-button></span>
+            </div>
+        </div>
+        <div class="control-con-header">
+            <a-form
+                class="grid-form"
+                layout="inline"
+                :form="searchForm"
+                hide-required-mark
+                @submit="handleQueryList"
+            >
+                <a-row class="grid-form-options">
+                    <a-form-item
+                        class="grid-form-item"
+                        label="公司名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.companyName" placeholder="请输入公司名称"/>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="广告主名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.adverName" placeholder="请输入广告主名称"/>
+                    </a-form-item>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="产品名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.productName" placeholder="请输入产品名称"/>
+                    </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 label="返点类型:">
+                        <a-select v-model="configForm.creativeRebate" 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>
+                    </a-form-item>
+                </a-row>
+                <a-row>
+                    <a-form-item
+                        class="grid-form-item"
+                        label="垫付公司名称:"
+                        :colon="false"
+                    >
+                        <a-input v-model="configForm.creativeAdvance" 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-form-item label="运营方式:">
+                        <a-select v-model="configForm.creativeOperate" 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"
+                            :disabled-date="disabledDate"
+                        />
+                    </a-form-item>
+                    <a-form-item label="状态:">
+                        <a-select v-model="configForm.searchStatus" style="width: 100px">
+                            <a-select-option :value="2">不限</a-select-option>
+                            <a-select-option :value="0">待审核</a-select-option>
+                            <a-select-option :value="1">审核中</a-select-option>
+                            <a-select-option :value="1">审核通过</a-select-option>
+                            <a-select-option :value="1">审核拒绝</a-select-option>
+                        </a-select>
+                    </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" html-type="submit">搜索</a-button>
+                    </a-form-item>
+                </a-row>
+            </a-form>
+        </div>
+        <div class="control-con-table">
+            <a-table
+                ref="table"
+                size="middle"
+                bordered
+                :columns="columns"
+                :dataSource="dataSource"
+                :pagination="false"
+                :scroll="{x: 3000}"
+            >
+                <span slot="creativeImageMode" slot-scope="text">
+                    <span>222</span>
+                </span>
+                <span solt="accountBudget" slot-scope="text, record">
+                    {{ record.accountBudgetMode === '1' ? '不限' : text }}
+                </span>
+                <span slot="action" slot-scope="text, record">
+                    <a @click="handleDetail">查看</a>
+                    <a-divider type="vertical"/>
+                    <a @click="handleSubmitReview(text)">提交审核</a>
+                    <a-divider type="vertical"/>
+                    <a>编辑</a>
+                </span>
+                <span slot="reason" slot-scope="text, record">
+                    <a @click="handleRejectionReason(text)">被拒原因</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
+            title="审核通过"
+            v-if="rejectionReasonStatus"
+            :visible="rejectionReasonStatus"
+            dialog-class="rejection-reason-class"
+            @ok="handleModeSure"
+            @cancel="handleModeCancel"
+        >
+            <div>
+                <div class="reason-class-header">请输入审核不通过的理由:</div>
+                <div>显示不通过的理由</div>
+            </div>
+        </a-modal>
+        <a-modal
+            title="审核政策"
+            v-if="auditPolicyStatus"
+            :visible="auditPolicyStatus"
+            okText="审核通过"
+            cancelText="审核拒绝"
+            :closable="false"
+            dialog-class="audit-policy-class"
+            @ok="handleAuditSure"
+            @cancel="handleAuditCancel"
+        >
+            <div>
+                <span class="audit-policy-icon" @click="handleCloseAuditPolicy"><a-icon type="close"/></span>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">公司名称:</span>
+                        <span class="line-right-spn">北京有限公司北京有限公司北京有限公司北京有限公司北京有限公司北京有限公司</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">是否预付:</span>
+                        <span class="line-right-spn">否</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">广告主:</span>
+                        <span class="line-right-spn">北京有限公司</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">返点类型:</span>
+                        <span class="line-right-spn">返现</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">产品名称:</span>
+                        <span class="line-right-spn">产品名称</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">返点比例:</span>
+                        <span class="line-right-spn">3%</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">媒体:</span>
+                        <span class="line-right-spn">产品名称</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">账期:</span>
+                        <span class="line-right-spn">3%</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">销售:</span>
+                        <span class="line-right-spn">产品名称</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">是否第三方支付:</span>
+                        <span class="line-right-spn">3%</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">区域:</span>
+                        <span class="line-right-spn">产品名称</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">垫付公司:</span>
+                        <span class="line-right-spn">3%</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">我司主体:</span>
+                        <span class="line-right-spn">产品名称</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">垫付返现:</span>
+                        <span class="line-right-spn">3%</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">运营方式:</span>
+                        <span class="line-right-spn">产品名称</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">政策起止时间:</span>
+                        <span class="line-right-spn">3%</span>
+                    </div>
+                </div>
+                <div class="policy-line-class">
+                    <div class="policy-line-left">
+                        <span class="line-left-spn">集团简称:</span>
+                        <span class="line-right-spn">产品名称</span>
+                    </div>
+                    <div class="policy-line-right">
+                        <span class="line-left-spn">备注:</span>
+                        <span class="line-right-spn">3%</span>
+                    </div>
+                </div>
+            </div>
+        </a-modal>
+        <a-modal
+            title="审核不通过"
+            v-if="rejectAuditStatus"
+            :visible="rejectAuditStatus"
+            dialog-class="rejection-reason-class"
+            @ok="handleRejectSure"
+            @cancel="handleRejectCancel"
+        >
+            <div>
+                <div class="reason-class-header">请输入审核不通过的理由:</div>
+                <a-form-model
+                    ref="rejectRuleForm"
+                    :model="reasonForm"
+                    :rules="reasonRules"
+                >
+                    <a-form-model-item label="" prop="desc">
+                        <a-input
+                            class="rejection-textarea-msg"
+                            v-model="reasonForm.desc"
+                            type="textarea"
+                            placeholder="请输入至少五个字符"
+                        />
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+        </a-modal>
+        <!-- 新增、编辑政策 -->
+        <a-modal
+            title="新增政策"
+            v-if="policyOperationStatus"
+            :visible="policyOperationStatus"
+            dialog-class="policy-operation-class"
+            @ok="handlePolicyOperationSure"
+            @cancel="handlePolicyOperationCancel"
+        >
+            <div>
+                123
+            </div>
+        </a-modal>
+    </div>
+</template>
+<script>
+export default {
+    name: 'policy-management',
+    data() {
+        return {
+            rejectAuditStatus: false,
+            rejectionReasonStatus: false,
+            auditPolicyStatus: false,
+            policyOperationStatus: false,
+            totalAll: 0,
+            reasonForm: {
+                desc: ''
+            },
+            reasonRules: {
+                desc: [
+                    {required: true, message: '请输入审核拒绝理由', trigger: 'blur'},
+                    {min: 5, max: 100, message: '请输入1-7个字', trigger: 'blur'}
+                ]
+            },
+            dataSource: [
+                {
+                   status: 122, 
+                   accountId_dictText: 122, 
+                   creativeImageMode: 122, 
+                   accountId: 122, 
+                   createTime: 122, 
+                   validBalance: 122, 
+                   accountBudget: 122, 
+                   adCpaBidStr: 122,
+                   cost: 122,
+                   cost11: 122,
+                   cost22: 122,
+                   cost33: 122,
+                   cost44: 122,
+                   cost55: 122,
+                   cost66: 122,
+                   cost77: 122,
+                }
+            ],
+            columns: [
+                {
+                    title: '公司名称',
+                    align: 'center',
+                    dataIndex: 'status',
+                    width: 150
+                },
+                {
+                    title: '广告主名称',
+                    align: 'center',
+                    dataIndex: 'accountId_dictText',
+                    width: 150
+                },
+                {
+                    title: '产品名称',
+                    align: 'center',
+                    dataIndex: 'creativeImageMode',
+                    width: 150
+                },
+                {
+                    title: '媒体',
+                    align: 'center',
+                    dataIndex: 'accountId',
+                    width: 150
+                },
+                {
+                    title: '销售',
+                    dataIndex: 'createTime',
+                    align: 'center',
+                    width: 150
+                },
+                {
+                    title: '状态',
+                    dataIndex: 'validBalance',
+                    align: 'center',
+                    width: 150
+                },
+                {
+                    title: '是否预付',
+                    dataIndex: 'accountBudget',
+                    width: 180,
+                    align: 'center'
+                },
+                {
+                    title: '账期',
+                    dataIndex: 'adCpaBidStr',
+                    align: 'center',
+                    width: 150
+                },
+                {
+                    title: '返点类型',
+                    align: 'center',
+                    dataIndex: 'cost',
+                    width: 150
+                },
+                {
+                    title: '返点比例',
+                    align: 'center',
+                    dataIndex: 'cost11',
+                    width: 150
+                },
+                {
+                    title: '是否垫付',
+                    align: 'center',
+                    dataIndex: 'cost22',
+                    width: 150
+                },
+                {
+                    title: '垫付公司',
+                    align: 'center',
+                    dataIndex: 'cost33',
+                    width: 150
+                },
+                {
+                    title: '垫付公司返点',
+                    align: 'center',
+                    dataIndex: 'cost44',
+                    width: 150
+                },
+                {
+                    title: '运营方式',
+                    align: 'center',
+                    dataIndex: 'cost55',
+                    width: 150
+                },
+                {
+                    title: '政策日期',
+                    align: 'center',
+                    dataIndex: 'cost66',
+                    width: 150
+                },
+                {
+                    title: '备注',
+                    align: 'center',
+                    dataIndex: 'cost77',
+                    width: 150
+                },
+                {
+                    title: '操作',
+                    dataIndex: 'action',
+                    align: 'center',
+                    width: 250,
+                    fixed: 'right',
+                    scopedSlots: {customRender: 'action'}
+                },
+                {
+                    title: '审核理由',
+                    dataIndex: 'reason',
+                    align: 'center',
+                    width: 150,
+                    fixed: 'right',
+                    scopedSlots: {customRender: 'reason'}
+                }
+            ],
+            configForm: {
+                companyName: undefined,
+                adverName: undefined,
+                productName: undefined,
+                creativeMedia: 2,
+                creativeRebate: 2,
+                creativeAdvance: undefined,
+                creativeSale: undefined,
+                creativeOperate: 2,
+                time: [],
+                searchStatus: 2
+            },
+            tablePag: {
+                page: 1,
+                size: 10
+            }
+        }; 
+    },
+    created() {
+        this.searchForm = this.$form.createForm(this);
+    },
+    methods: {
+        disabledDate(current) {
+            return current > moment().subtract(1, 'day');
+        },
+        // 分页操作按钮
+        onShowSizeChange(current, pageSize) {
+            // this.tablePag = {
+            //     page: current,
+            //     size: pageSize
+            // };
+            // this.handleInitTable();
+        },
+        // 政策导出按钮
+        handlePolicyExport() {
+            console.log('政策导出按钮');
+        },
+        // 新增政策按钮
+        handleAddAccountPolicy() {
+            console.log('新增政策按钮');
+            this.policyOperationStatus = true;
+        },
+        // 新增政策确定按钮
+        handlePolicyOperationSure() {
+            console.log('新增政策确定按钮');
+            this.policyOperationStatus = false;
+        },
+        // 新增政策取消按钮
+        handlePolicyOperationSure() {
+            console.log('新增政策取消按钮');
+            this.policyOperationStatus = false;
+        },
+        // 审核拒绝确定按钮
+        handleRejectSure() {
+            console.log('审核拒绝确定按钮');
+            this.$refs.rejectRuleForm.validate(valid => {
+                if (valid) {
+                    console.log('submit!');
+                    this.rejectAuditStatus = false;
+                }
+                else {
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        // 审核拒绝取消按钮
+        handleRejectCancel() {
+            console.log('审核拒绝取消按钮');
+            this.rejectAuditStatus = false;
+        },
+        // 查看的按钮
+        handleDetail(list) {
+            console.log(list, '查看的按钮');
+            this.auditPolicyStatus = true;
+        },
+        // 查看的取消按钮
+        handleCloseAuditPolicy() {
+            this.auditPolicyStatus = false;
+        },
+        // 查看-审核政策-审核通过-按钮
+        handleAuditSure() {
+            let that = this;
+            this.$confirm({
+                title: '提示',
+                content: '确认该政策审核通过',
+                onOk() {}
+            });
+        },
+        // 查看-审核政策-审核拒绝-按钮
+        handleAuditCancel() {
+            this.rejectAuditStatus = true;
+        },
+        // 提交审核弹窗
+        handleSubmitReview(val) {
+            let that = this;
+            this.$confirm({
+                title: '提示',
+                content: '是否确认重新提交政策审核',
+                onOk() {}
+            });
+        },
+        // 被拒理由的操作
+        handleRejectionReason(val) {
+            console.log('被拒理由的操作');
+            this.rejectionReasonStatus = true;
+        },
+        // 被拒理由确定按钮
+        handleModeSure() {
+            console.log('被拒理由确定按钮');
+            this.rejectionReasonStatus = false;
+        },
+        // 被拒理由取消按钮
+        handleModeCancel() {
+            this.rejectionReasonStatus = false;
+        },
+        // 搜索按钮
+        handleQueryList() {
+            console.log('搜索按钮');
+        },
+        // 重置搜索
+        handleResetList() {
+            console.log('重置搜索');
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    @import "policy-management";
+</style>

+ 2 - 2
vue.config.js

@@ -80,7 +80,7 @@ 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后台项目
@@ -88,7 +88,7 @@ module.exports = {
 				// target:'http://118.24.244.213:8804',
 				// target: 'http://192.168.1.43:8806', // 子安
 				// 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,