zx-admin-erp/src/views/accounts/account/components/changeRecord.vue

<template>
    <el-button size="mini" type="text" @click="cutHandle">
        <span><i class="el-icon-tickets"></i>变更记录</span>
        <el-drawer :title="cutTitle" append-to-body :visible.sync="showCut" direction="rtl" :before-close="cutClose" custom-class="custom">
            <div class="cut">
                <el-button class="button" type="primary" icon="el-icon-plus" size="mini" @click="handleCutRecord">插入起始记录</el-button>
                <el-table :data="cutData" size="mini">
                    <el-table-column label="开始时间" prop="beginTime" align="center" width="90"/>
                    <el-table-column label="结束时间" prop="endTime" align="center" width="90"/>
                    <el-table-column label="资源名称" prop="resourceName" :show-overflow-tooltip="true" align="center" width="100">
                        <template slot-scope="scope" v-if="scope.row.resourceInfo">
                            <span>{{scope.row.resourceInfo.resourceName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="资源标识" prop="resourceKey" :show-overflow-tooltip="true" width="120">
                        <template slot-scope="scope" v-if="scope.row.resourceInfo">
                            <span>{{scope.row.resourceInfo.resourceKey}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="项目组" prop="businessGroupInfo" width="80" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope" v-if="scope.row.businessGroupInfo">
                            <span>{{scope.row.businessGroupInfo.businessGroupName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="运营" prop="operUserInfo" width="80" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope" v-if="scope.row.operUserInfo">
                            <span>{{scope.row.operUserInfo.nickname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="投手" prop="operUserInfo" width="80" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope" v-if="scope.row.putUserInfo">
                            <span>{{scope.row.putUserInfo.nickname}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="投放状态" prop="putStatus" width="80" align="center">
                        <template slot-scope="scope">
                            <el-tag type="warning" v-if="scope.row.putStatus === 'wait'">待投放</el-tag>
                            <el-tag type="success" v-else-if="scope.row.putStatus === 'ing'">投放中</el-tag>
                            <el-tag type="info" v-else-if="scope.row.putStatus === 'stop'">停投</el-tag>
                            <el-tag type="danger" v-else-if="scope.row.putStatus === 'destroy'">账号已注销</el-tag>
                            <div v-else>--</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="投放渠道" prop="putChannel" align="center" :show-overflow-tooltip="true" width="80" />
                    <el-table-column label="期数" prop="periodInfo" width="80" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope" v-if="scope.row.periodInfo">
                            <div>{{ scope.row.periodInfo.period }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="当前书籍" prop="bookInfo" width="90" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope" v-if="scope.row.bookInfo">
                            <div slot="reference">{{ scope.row.bookInfo.bookName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="platformInfo" label="书城信息" width="90" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope" v-if="scope.row.platformInfo">
                            <div>{{ scope.row.platformInfo.platformName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createUser" label="操作人" width="90" :show-overflow-tooltip="true" align="center">
                        <template slot-scope="scope" v-if="scope.row.createUser">
                            <div>{{ scope.row.createUser.nickname }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
                        <template slot-scope="scope">
                            <div>
                                <el-button type="text" @click="insertDownHandle(scope.row, '向后插入')" size="mini">往后插入</el-button> 
                                <el-button type="text" @click="insertDownHandle(scope.row, '修改')" size="mini">修改</el-button> 
                                <el-button type="text" style="color: red" size="mini" @click="delCutHandle(scope.row)">删除</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="totalCut>0" :total="totalCut" :page.sync="cutQueryPlatForm.pageNum" :limit.sync="cutQueryPlatForm.pageSize" @pagination="getCutHandle"/>
            </div>    
        </el-drawer>

        <!-- 新增 编辑记录弹窗 -->
        <el-dialog 
            :title="editCutTitle" 
            :visible.sync="editCutShow" 
            width="500px"
            append-to-body
            @close="editCutShow = false"
        >
            <el-form :model="queryPlatformCutRecord" :rules="rulesCut" ref="platFormCut" label-position="top" :inline="true">
                <el-form-item label="开始时间" prop="beginTime">
                    <el-date-picker v-model="queryPlatformCutRecord.beginTime" size="small" style="width: 140px" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间" />
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-date-picker v-model="queryPlatformCutRecord.endTime" size="small" style="width: 140px" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间" />
                </el-form-item>
                <el-form-item label="项目组" prop="businessGroupId">
                    <el-select v-model="queryPlatformCutRecord.businessGroupId" size="small" placeholder="选择项目组" filterable style="width: 140px" clearable>
                        <el-option v-for="item in teamsList" :key="item.id" :label="item.businessGroupName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="运营" prop="operUserId">
                    <el-select v-model="queryPlatformCutRecord.operUserId" size="small" placeholder="选择运营" filterable style="width: 140px" clearable>
                        <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投手" prop="putUserId">
                    <el-select v-model="queryPlatformCutRecord.putUserId" size="small" placeholder="选择投手" filterable style="width: 140px" clearable>
                        <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="期数" prop="periodId">
                    <el-select v-model="queryPlatformCutRecord.periodId" size="small" placeholder="选择期数" filterable style="width: 140px" clearable>
                        <el-option v-for="item in periodList" :key="item.id" :label="item.period" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="书城" prop="platformId">
                    <el-select v-model="queryPlatformCutRecord.platformId" @change="selectZh" size="small" placeholder="选择书城" filterable style="width: 140px" clearable>
                        <el-option v-for="item in bookCity" :key="item.id" :label="item.platformName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="platformAccountId">
                    <el-select v-model="queryPlatformCutRecord.platformAccountId" :disabled="!queryPlatformCutRecord.platformId" size="small" placeholder="选择账号" filterable style="width: 140px" clearable>
                        <el-option v-for="item in accList" :key="item.id" :label="item.account" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="书" prop="bookId">
                    <el-select v-model="queryPlatformCutRecord.bookId" size="small" placeholder="选择书" filterable style="width: 140px" clearable>
                        <el-option v-for="item in bookList" :key="item.id" :label="item.bookName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投放状态" prop="putStatus">
                    <el-select v-model="queryPlatformCutRecord.putStatus" size="small" placeholder="选择投放状态" filterable style="width: 140px" clearable>
                        <el-option label="待投放" value="wait" />
                        <el-option label="投放中" value="ing" />
                        <el-option label="停投" value="stop" />
                        <el-option label="账号已注销" value="destroy" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投放渠道" prop="putChannel">
                    <el-select v-model="queryPlatformCutRecord.putChannel" size="small" placeholder="选择投放渠道" filterable style="width: 140px" clearable>
                        <el-option label="MP" value="MP" />
                        <el-option label="GDT" value="GDT" />
                        <el-option label="头条" value="头条" />
                        <el-option label="企微" value="企微" />
                        <el-option label="混投" value="混投" />
                        <el-option label="ADQ企微" value="ADQ企微" />
                        <el-option label="头条企微" value="头条企微" />
                        <el-option label="MP企微" value="MP企微" />
                        <el-option label="ADQ公众号" value="ADQ公众号" />
                    </el-select>
                </el-form-item>
                <el-form-item label="充值模板" prop="rechargeTemplate">
                    <el-input v-model="queryPlatformCutRecord.rechargeTemplate" size="small" style="width: 140px" placeholder="输入充值模板" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editCutShow = false">取 消</el-button>
                <el-button type="primary" @click="submitCut('platFormCut')">确 定</el-button>
            </span>
        </el-dialog>
    </el-button>
</template>

<script>
import { gitCutRecordList, delCutRecord, insertCutRecord, editCutRecord } from "@/api/accounts/account";
import { getBookAcc } from "@/api/system/books";
export default {
    data () {
        return {
            cutData: [],
            cutTitle: '',
            showCut: false,
            cutQueryPlatForm: {
                pageNum: 1,
                pageSize: 10
            },
            editCutShow: false,
            editCutTitle: '',
            queryPlatformCutRecord: {}, // 新增修改记录保存
            rulesCut: {
                beginTime: [
                    { required: true, message: '请选择开始时间', trigger: 'change' }
                ]
            },
            totalCut: 0,
            accList: [],
            resourceData: {}
        }
    },
    props: {
        value: {
            type: Object,
            default: {},
        },
        periodList: { // 期数
            type: Array,
            default: [],
        },
        bookCity: { // 书城
            type: Array,
            default: []
        },
        bookList: { // 书
            type: Array,
            default: []
        },
        teamsList: { // 项目组
            type: Array,
            default: []
        },
        userAll: { // 运营投手
            type: Array,
            default: []
        },
        type: {
            type: String,
            default: ""
        }
    },
    methods: {
        /** 提交记录 */
        submitCut(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = JSON.parse(JSON.stringify(this.queryPlatformCutRecord))
                    if(params.beginTime) {
                        params.beginTime = params.beginTime
                    }
                    if(params.endTime) {
                        params.endTime = params.endTime
                    }
                    if(!params.id) { // 新增
                        insertCutRecord(params).then(res => {
                            this.msgSuccess("插入成功");
                            this.resetForm(formName);
                            this.editCutShow = false
                            this.getCutHandle()
                        })
                    } else { // 修改
                        editCutRecord(params).then(res => {
                            this.msgSuccess("修改成功");
                            this.resetForm(formName);
                            this.editCutShow = false
                            this.getCutHandle()
                        })
                    }
                }
            })
        },
        cutHandle() {
            let row = {}
            if(this.type === 'use') {
                row = { ...this.value.resourceInfo, operUserId: this.value.operUserId, putUserId: this.value.putUserId }
            } else {
                row = { ...this.value }
            }
            this.cutTitle = row.resourceName
            this.showCut = true
            this.cutQueryPlatForm.id = row.id
            this.cutData = []
            this.resourceData = row
            this.getCutHandle()
        },
        getCutHandle() {
            gitCutRecordList(this.cutQueryPlatForm).then(res => {
                this.cutData = res.data.records
                this.totalCut = res.data.total
            })
        },
        /** 新增记录 */
        handleCutRecord() {
            const { id, businessGroupId, putUserId, operUserId, periodId, platformId, platformAccountId, bookId, putStatus, putChannel, rechargeTemplate } = this.resourceData
            this.editCutTitle = '插入起始记录'
            this.editCutShow = true
            this.queryPlatformCutRecord = {
                resourceId: id,
                businessGroupId,
                operUserId,
                putUserId,
                periodId,
                platformId,
                platformAccountId,
                bookId,
                putStatus,
                putChannel,
                rechargeTemplate
            }
        },
        /** 向后插入 */
        insertDownHandle(item, type) {
            this.editCutTitle = `${type}记录`
            this.editCutShow = true
            let data = {}
            if(item.beginTime) {
                item.beginTime = item.beginTime.split(' ')[0]
            }
            if(item.endTime) {
                item.endTime = item.endTime.split(' ')[0]
            }
            const { beginTime, endTime, id, resourceId, businessGroupId, operUserId, putUserId, periodId, platformId, platformAccountId, bookId, putStatus, putChannel, rechargeTemplate } = item
            if(type === '修改') {
                data = {beginTime, endTime, id}
            } else {
                data = {lastChangeRecordId: id}
            }
            this.queryPlatformCutRecord = {
                ...data,
                resourceId,
                businessGroupId,
                operUserId,
                putUserId,
                periodId,
                platformId,
                platformAccountId,
                bookId,
                putStatus,
                putChannel,
                rechargeTemplate
            }
            if(platformId) {
                this.selectZh(platformId, platformAccountId)
            }
        },
        selectZh(e, id) {
            // 获取所有账号
            this.queryPlatformCutRecord.platformAccountId = id || null
            getBookAcc(e).then(res => {
                this.accList = res.data
            })
        },
        /** 删除 */
        delCutHandle(row) {
            this.$confirm('确定删除？', '删除', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                delCutRecord(row.id).then(res => {
                    if(res.data) {
                        this.msgSuccess('删除成功');
                        this.getCutHandle()
                    }
                })
            })
        },
        /** 关闭切书切平台 */
        cutClose() {
            this.showCut = false
        },
    }
}
</script>

<style lang="scss">
    .custom {
        width: 75% !important;
    }
    .cut {
        padding: 0 10px;
        box-sizing: border-box;

        .button {
            margin-bottom: 10px;
        }
        .el-table .cell {
            line-height: normal;
        }
        ul {
            padding-left: 0;
            .sumitInfo {
                // margin-top: 20px;
                font-weight: 600;
                margin-bottom: 10px;

                .button {
                    margin-left: 20px;
                }
            }
        }
    }
</style>