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

<template>
    <el-button size="mini" type="text" @click="handleCutBook">
        <span><i class="el-icon-sort"></i>切书切平台</span> 
        <el-dialog :title="title" :visible.sync="open" width="330px" append-to-body @close="addClose">
            <el-form :model="queryPlatform" :rules="rules" ref="platFormCutBook" label-position="right" label-width="80px" :inline="true">
                <el-form-item label="开始时间" prop="beginTime">
                    <el-date-picker v-model="queryPlatform.beginTime" size="small" style="width: 200px" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间" />
                </el-form-item>
                <el-form-item label="期数" prop="periodId">
                    <el-select v-model="queryPlatform.periodId" size="small" placeholder="选择期数" filterable 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="queryPlatform.platformId" @change="selectZh" size="small" placeholder="选择书城" filterable 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="queryPlatform.platformAccountId" :disabled="!queryPlatform.platformId" size="small" placeholder="选择账号" filterable 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="queryPlatform.bookId" size="small" placeholder="选择书" filterable 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="businessGroupId">
                    <el-select v-model="queryPlatform.businessGroupId" size="small" placeholder="选择项目组" filterable 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="putStatus">
                    <el-select v-model="queryPlatform.putStatus" size="small" placeholder="选择投放状态" filterable 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="queryPlatform.putChannel" size="small" placeholder="选择投放渠道" filterable>
                        <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-select>
                </el-form-item>
                <el-form-item label="充值模板" prop="rechargeTemplate">
                    <el-input v-model="queryPlatform.rechargeTemplate" size="small" placeholder="输入充值模板" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="queryPlatform.remark" type="textarea" size="small" placeholder="输入备注" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="submit('platFormCutBook')">确 定</el-button>
            </span>
        </el-dialog>
    </el-button>
</template>
<script>
import { getBookAcc } from "@/api/system/books";
import { cutBookPlatform, checkTime } from "@/api/accounts/account";
import { formatDateYMD } from "@/utils"
export default {
    data () {
        return {
            title: '',
            open: false,
            accList: [],  // 账号
            queryPlatform: {},
            rules: {
                beginTime: [
                    { required: true, message: '请选择开始时间', trigger: 'blur' }
                ],
                periodId: [
                    { required: true, message: '请选择期数', trigger: 'blur' }
                ],
                platformId: [
                    { required: true, message: '请选择书城', trigger: 'blur' }
                ],
                bookId: [
                    { required: true, message: '请选择书', trigger: 'blur' }
                ],
                businessGroupId: [
                    { required: true, message: '请选择项目组', trigger: 'blur' }
                ],
                putChannel: [
                    { required: true, message: '请选择投放渠道', trigger: 'blur' }
                ]
            }
        }
    },
    props: {
        value: {
            type: Object,
            default: {},
        },
        periodList: { // 期数
            type: Array,
            default: [],
        },
        bookCity: { // 书城
            type: Array,
            default: []
        },
        bookList: { // 书
            type: Array,
            default: []
        },
        teamsList: { // 项目组
            type: Array,
            default: []
        }
    },
    methods: {
        handleCutBook() {
            this.title = this.value.resourceName + '切书切平台'
            const { periodId, platformId, platformAccountId, bookId, id, businessGroupId, putStatus, putChannel, rechargeTemplate } = this.value
            this.queryPlatform = { periodId, platformId, platformAccountId, bookId, resourceId: id, beginTime: formatDateYMD(new Date()), businessGroupId, putStatus, putChannel, rechargeTemplate }
            this.open = true
            if(platformId) {
                this.selectZh(platformId, platformAccountId)
            }
        },
        /** 关闭弹窗调用 */
        addClose() {
            this.open = false
            this.queryPlatform = {}
        },
        selectZh(e, id) {
            this.queryPlatform.platformAccountId = id || null
            getBookAcc(e).then(res => {
                this.accList = res.data
            })
        },
        submit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    let data = await checkTime({ beginTime: this.queryPlatform.beginTime, resourceId: this.queryPlatform.resourceId })
                    if (data.data) {
                        this.setCutBook(formName)
                    } else {
                        this.$confirm('会覆盖上一条，是否确定？').then(() => {
                            this.setCutBook(formName)
                        })
                    }
                }
            })
        },
        setCutBook(formName) {
            cutBookPlatform({ ...this.queryPlatform }).then(response => {
                this.msgSuccess("切换成功");
                this.resetForm(formName);
                this.$emit('change')
                this.addClose()
            })
        }
    }
}
</script>

<style>
    .cutBook{
        display: inline;
        line-height: normal;
    }
    .dropdownItem {
        cursor: pointer;
        color: #409EFF;
        font-size: 12px;
        padding: 4px 0;
        display: inline;
        line-height: normal;
    }
</style>