HM21St_Page_Manager/src/views/content_manage/newspaper_manage/CreateNewspaper.vue

<template>
  <div class="manage-root newspaper-create">
    <Header />
    <div class="manage-root-contain">
        <nav-menu class="manage-root-contain-left" :activeMenuIndex="activeMenuIndex"></nav-menu>
        <div class="manage-root-contain-right">
            <breadcrumb :breadcrumbList="breadcrumbList" class="breadcrumb-box"></breadcrumb>
            <div class="create-top">
                <div class="common-title-box">
                    <h3>{{id?'编辑报纸':'创建报纸'}}</h3>
                    <div class="btn-box" v-if="id||!id&&stepIndex!==2">
                        <el-button size="small" @click="handleStep('-')" :disabled="stepIndex===0">上一步</el-button>
                        <el-button type="primary" size="small" @click="handleStep('+')" :disabled="stepIndex===2">下一步</el-button>
                    </div>
                </div>
                <el-steps :active="stepIndex" align-center>
                    <el-step title="报纸信息" description="填写报纸基本信息">
                        <svg-icon icon-class="dot" slot="icon" class="svg-dot"></svg-icon>
                    </el-step>
                    <el-step title="添加内容" description="为报纸添加内容">
                        <svg-icon icon-class="dot" slot="icon" class="svg-dot"></svg-icon>
                    </el-step>
                    <el-step :title="id?'完成编辑':'完成创建'" :description="id?'报纸编辑完成':'报纸创建完成'">
                        <svg-icon icon-class="dot" slot="icon" class="svg-dot"></svg-icon>
                    </el-step>
                </el-steps>
            </div>
            <div class="create-bottom">
                <template v-if="stepIndex===0">
                    <el-form :model="newspaperForm" :rules="rulesNewspaper" ref="newspaperForm" label-width="100px" class="registerForm">
                        <el-form-item label="报纸封面" prop="cover_image_url">
                            <upload :datafileList="newspaperForm.cover_image_list" :changeFillId="handleAvatarSuccess" :fileName="'cover'" :showList="true" uploadType="image" :filleNumber="1" v-if="!newspaperForm.cover_image_url" styleType="upload" />
                            <div class="cover-box" v-else @mouseover="Imagemouseover('coverFlag',true)" @mouseout="Imagemouseover('coverFlag',false)">
                                <el-image :src="newspaperForm.cover_image_url" fit="cover" style="width:200px;height:280px;"></el-image>
                                <p v-show="coverFlag" @click="handleDeleteFile('cover',0)"><i class="el-icon-delete"></i></p>
                            </div>
                            <p class="tips">建议上传宽高为200*280的图</p>
                        </el-form-item>
                        <el-form-item label="报纸名称" prop="iss_name">
                            <el-input v-model="newspaperForm.iss_name" placeholder="请输入报纸名称" @blur="handleTrim('newspaperForm','iss_name')"></el-input>
                        </el-form-item>
                        <el-form-item label="出版机构" prop="vendor_name">
                            <el-select v-model="newspaperForm.vendor_name" filterable allow-create default-first-option placeholder="请选择">
                                <el-option
                                    v-for="(item,i) in vendorList"
                                    :key="item+i"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否合刊" required="" prop="comb_flag">
                            <el-radio-group v-model="newspaperForm.comb_flag">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="期数" prop="iss_no" class="validity-box" v-if="newspaperForm.comb_flag===0">
                            <el-input placeholder="请输入" v-model="newspaperForm.iss_no" type="number">
                                <template slot="append">期</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="期数" prop="iss_no_start" class="iss-no-box" v-if="newspaperForm.comb_flag===1">
                            <el-input v-model="newspaperForm.iss_no_start" type="number" class="iss-start">
                                <template slot="append">-</template>
                            </el-input>
                            <el-input v-model="newspaperForm.iss_no_end" type="number">
                                <template slot="append">期</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="发行日期" prop="release_date">
                            <el-date-picker
                                v-model="newspaperForm.release_date"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="学段" prop="study_phase">
                            <el-select v-model="newspaperForm.study_phase" placeholder="请选择" @change="getVlList">
                                <el-option
                                    v-for="item in $studyType"
                                    :key="item.study_phase"
                                    :label="item.study_phase_name"
                                    :value="item.study_phase">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="课标词表" prop="vl_id">
                            <el-select v-model="newspaperForm.vl_id" filterable placeholder="请选择">
                                <el-option
                                    v-for="item in vlList"
                                    :key="item.id"
                                    :label="item.vl_name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="栏目模板" prop="chn_data">
                            <el-select v-model="newspaperForm.chn_data" filterable placeholder="请选择" @change="handleChangeChn">
                                <el-option
                                    v-for="item in tplList"
                                    :key="item.id"
                                    :label="item.tpl_name"
                                    :value="item.chn_data_string">
                                </el-option>
                            </el-select>
                            <a @click="handleLinkChannel" class="tpl-maintain">栏目模板维护</a>
                            <br/>
                            <el-input
                                type="textarea"
                                :rows="4"
                                readonly="readonly"
                                style="margin-top: 20px"
                                v-model="newspaperForm.chn_data_str">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="标签" prop="info_tag_data">
                            <el-select v-model="newspaperForm.info_tag_data" multiple filterable allow-create default-first-option placeholder="请选择">
                                <el-option
                                    v-for="(item,i) in tabsList"
                                    :key="item+i"
                                    :label="item"
                                    :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="简介" prop="iss_note">
                            <el-input
                                type="textarea"
                                :rows="4"
                                placeholder="请输入简介"
                                v-model="newspaperForm.iss_note"
                                maxlength="140"
                                show-word-limit>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="讲解版" required="" prop="with_addon_flag">
                            <el-radio-group v-model="newspaperForm.with_addon_flag">
                                <el-radio :label="0">否</el-radio>
                                <el-radio :label="1">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <template v-if="newspaperForm.with_addon_flag===1">
                            <el-divider></el-divider>
                            <h6>讲解版售价</h6>
                            <el-form-item label="原价" prop="with_addon_price_org" class="price-box" :key="'with_addon_price'">
                                <el-input-number v-model="newspaperForm.with_addon_price_org" :min="0" size="small" :precision="2" class="personal-ceil"></el-input-number>
                                <span class="prepend">￥</span>
                                <span class="append">元</span>
                            </el-form-item>
                            <el-form-item label="优惠价格" prop="has_discount_addon">
                                <el-radio-group v-model="newspaperForm.has_discount_addon">
                                    <el-radio :label="0">没有</el-radio>
                                    <el-radio :label="1">有</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="优惠价格" prop="with_addon_price_sell" class="price-box" v-if="newspaperForm.has_discount_addon===1">
                                <el-input-number v-model="newspaperForm.with_addon_price_sell" :min="0" size="small" :precision="2" class="personal-ceil"></el-input-number>
                                <span class="prepend">￥</span>
                                <span class="append">元</span>
                                <p class="tips">优惠价格必须低于原价</p>
                            </el-form-item>
                        </template>
                        <el-divider></el-divider>
                        <h6>普通版售价</h6>
                        <template>
                            <el-form-item label="原价" prop="iss_price_org" class="price-box" :key="'iss_price'">
                                <el-input-number v-model="newspaperForm.iss_price_org" :min="0" size="small" :precision="2" class="personal-ceil"></el-input-number>
                                <span class="prepend">￥</span>
                                <span class="append">元</span>
                            </el-form-item>
                            <el-form-item label="优惠价格" prop="has_discount">
                                <el-radio-group v-model="newspaperForm.has_discount">
                                    <el-radio :label="0">没有</el-radio>
                                    <el-radio :label="1">有</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="优惠价格" prop="iss_price_sell" class="price-box" v-if="newspaperForm.has_discount===1">
                                <el-input-number v-model="newspaperForm.iss_price_sell" :min="0" size="small" :precision="2" class="personal-ceil"></el-input-number>
                                <span class="prepend">￥</span>
                                <span class="append">元</span>
                                <p class="tips">优惠价格必须低于原价</p>
                            </el-form-item>
                        </template>
                    </el-form>
                </template>
                <div v-if="stepIndex===1">
                    <div class="issue-channel">
                        <div class="issue-top">
                            <h4 class="issue-top-left">
                                栏目
                                <span>共 {{issueChannel.channelNumber}} 个栏目 {{issueChannel.articleNumber}} 篇文章</span>
                            </h4>
                            <el-button type="primary" size="small">预览</el-button>
                        </div>
                        <div class="channel-item" v-for="(item,index) in issueChannel.channelList" :key="index">
                            <div class="channel-top">
                                <i class="el-icon-caret-bottom" v-if="item.show" @click="item.show=!item.show"></i>
                                <i class="el-icon-caret-top" v-else @click="item.show=!item.show"></i>
                                <span @click="item.show=!item.show">{{item.channelName}}</span>
                                <el-button type="text" @click="handleArticle('','en')"><i class="el-icon-plus"></i>新增英文内容</el-button>
                                <el-button type="text" @click="handleArticle('','cn')"><i class="el-icon-plus"></i>新增中文内容</el-button>
                            </div>
                            <el-collapse-transition>
                                <template v-if="item.show">
                                    <draggable
                                        v-model="item.articleList"
                                        chosenClass="chosen"
                                        forceFallback="true"
                                        group="people"
                                        animation="1000"
                                        @start="onStart"
                                        @end="onEnd"
                                        class="article-list"
                                    >
                                        <li v-for="(itema,indexa) in item.articleList" :key="indexa">
                                            <svg-icon icon-class="sort" draggable="true"></svg-icon>
                                            <div class="items">
                                                <h6>{{itema.title}}</h6>
                                                <span>BY {{itema.author}}</span>
                                                <span>创建人：{{itema.creator}}</span>
                                                <span>{{itema.time}}</span>
                                            </div>
                                            <svg-icon icon-class="edit" class="edit-article" @click="handleArticle(itema.id,itema.type)"></svg-icon>
                                            <span class="border"></span>
                                            <i class="el-icon-delete" @click="handleDeleteArticle(item.articleList,indexa)"></i>
                                        </li>
                                    </draggable>
                                </template>
                            </el-collapse-transition>
                        </div>
                        
                    </div>
                </div>
                <div v-if="stepIndex===2">
                    <el-result icon="success" :subTitle="id?'报纸编辑成功':'报纸创建成功'">
                        <template slot="extra">
                            <el-button size="small" @click="handleback">返回列表</el-button>
                            <el-button type="primary" size="small" @click="handleCreate">继续创建</el-button>
                        </template>
                    </el-result>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../../components/Header.vue";
import NavMenu from "../../../components/NavMenu.vue"
import Breadcrumb from '../../../components/Breadcrumb.vue';
import Upload from "../../../components/Upload.vue"
import { getLogin } from "@/api/ajax";
import { mapState } from 'vuex';
import draggable from "vuedraggable";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb, Upload, draggable },
  props: {},
  data() {
    const validateIssNo = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入期数'));
        } else {
            let start = this.newspaperForm.iss_no_start
            let end = this.newspaperForm.iss_no_end
            if (start!==null&&end!==null) {
                if(start>=end){
                    callback(new Error('开始期数需小于结束期数'));
                }else{
                    callback();
                }
            } else {
                callback(new Error('请输入期数'));
            }
        }
    };
    const validatePrice = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入价格'));
        } else {
            let price = this.newspaperForm.iss_price_org
            let currentPrice = this.newspaperForm.iss_price_sell
            if (price!==undefined&&currentPrice!==undefined) {
                if(price===0&&rule.fullField==='price'){
                    callback(new Error('原价需大于0'));
                }else if(currentPrice>=price&&this.newspaperForm.has_discount){
                    callback(new Error('优惠价格必须低于原价'));
                }else{
                    callback();
                }
            } else {
                callback(new Error('请输入'));
            }
            
        }
    };
    const validatePrices = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入价格'));
        } else {
            let price = this.newspaperForm.with_addon_price_org
            let currentPrice = this.newspaperForm.with_addon_price_sell
            if (price!==undefined&&currentPrice!==undefined) {
                if(price===0&&rule.fullField==='price'){
                    callback(new Error('原价需大于0'));
                }else if(currentPrice>=price&&this.newspaperForm.has_discount_addon){
                    callback(new Error('优惠价格必须低于原价'));
                }else{
                    callback();
                }
            } else {
                callback(new Error('请输入'));
            }
            
        }
    };
    return {
        activeMenuIndex: "newspaper_manage",
        breadcrumbList:[
            {
                icon:'file-list-line',
                url:'',
                text:''
            },
            {
                icon:'',
                url:'',
                notLink: true,
                text:'内容管理'
            },
            {
                icon:'',
                url:'',
                text:'报纸管理'
            }
        ],
        id:this.$route.query.id?this.$route.query.id:'',
        stepIndex:window.localStorage.getItem('newsStep')?window.localStorage.getItem('newsStep')*1:0, // 步骤索引
        coverFlag: false,
        newspaperForm:window.localStorage.getItem('newsForm')?JSON.parse(window.localStorage.getItem('newsForm')):{
            cover_image_url: '',
            cover_image_list: [],
            cover_image_id: null,
            iss_name: '',
            vendor_name: '21世纪报社',
            comb_flag: 0,
            iss_no: null,
            iss_no_start: null,
            iss_no_end: null,
            release_date: '',
            study_phase: null,
            vl_id: '',
            chn_data: '',
            chn_data_str:'',
            info_tag_data: [],
            iss_note: '',
            with_addon_flag: 1,
            iss_price_org: null,
            iss_price_sell: null,
            with_addon_price_org: null,
            with_addon_price_sell: null,
            has_discount: 1,
            has_discount_addon: 1
        },
        rulesNewspaper:{
            iss_name:[
                { required: true, message: '请输入报纸名称', trigger: 'blur' }
            ],
            vendor_name: [
                { required: true, message: '请输入出版机构', trigger: 'blur' }
            ],
            iss_no: [
                { required: true, message: '请输入期数', trigger: 'blur' }
            ],
            iss_no_start: [
                { required: true, validator: validateIssNo, trigger: 'blur' }
            ],
            iss_no_end: [
                { required: true, validator: validateIssNo, trigger: 'blur' }
            ],
            study_phase: [
                { required: true, message: '请选择学段', trigger: 'change' }
            ],
            vl_id: [
                { required: true, message: '请选择课标词表', trigger: 'change' }
            ],
            chn_data: [
                { required: true, message: '请选择栏目模板', trigger: 'change' }
            ],
            iss_price_org:[
                { required: true, validator: validatePrice, trigger: 'blur' },
            ],
            iss_price_sell:[
                { required: true, validator: validatePrice, trigger: 'blur' },
            ],
            with_addon_price_org:[
                { required: true, validator: validatePrices, trigger: 'blur' },
            ],
            with_addon_price_sell:[
                { required: true, validator: validatePrices, trigger: 'blur' },
            ],
        },
        vendorList: [], // 出版机构列表
        vlList: [], // 课标词表
        tplList: [], // 栏目列表
        tabsList:['中英双语','少儿必读'],
        issueId: '',
        issueChannel:{
            channelNumber: '12',
            articleNumber: '4',
            channelList:[
                {
                    channelName: 'FRONT PAGE',
                    articleList: [
                        {
                            title: 'Silly science',
                            author: 'TEENS',
                            creator: '张老师',
                            time: '2012-12-12 12:23',
                            id: '123',
                            type: 'cn'
                        },
                        {
                            title: 'Silly science1',
                            author: 'TEENS',
                            creator: '张老师',
                            time: '2012-12-12 12:23',
                            id: '123',
                            type: 'en'
                        },
                        {
                            title: 'Silly science2',
                            author: 'TEENS',
                            creator: '张老师',
                            time: '2012-12-12 12:23',
                            id: '123'
                        },
                        {
                            title: 'Silly science3',
                            author: 'TEENS',
                            creator: '张老师',
                            time: '2012-12-12 12:23'
                        }
                    ],
                    show: true
                },
                {
                    channelName: 'STORY LAND', 
                    articleList: [],
                    show: false
                },
                {
                    channelName: 'STORY LAND', 
                    articleList: [],
                    show: false
                },
                {
                    channelName: 'STORY LAND', 
                    articleList: [],
                    show: false
                },
                {
                    channelName: 'STORY LAND', 
                    articleList: [],
                    show: false
                },
                {
                    channelName: 'STORY LAND', 
                    articleList: [],
                    show: false
                },
                {
                    channelName: 'STORY LAND', 
                    articleList: [],
                    show: false
                },
            ]
        },
        drag: false,
    }
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(['$studyType']),
  },
  //监控data中数据变化
  watch: {
    
  },
  //方法集合
  methods: {
    // 上一步下一步
    handleStep(type){
        if(type=='-'){
            if(this.stepIndex>0) this.stepIndex--
        }else{
            if(this.stepIndex===0){
                this.$refs['newspaperForm'].validate((valid) => {
                    if (valid) {
                        this.handleAddIssue()
                    } else {
                        return false;
                    }
                });
            }else if(this.stepIndex===1){
                this.stepIndex++
            }
        }
    },
    // 返回列表
    handleback(){
        this.$router.push({
            path: "/newspaper_manage",
            query: {
                
            },
        });
    },
    //继续创建
    handleCreate(){
        this.$router.replace('/createNewspaper')
        location.reload()
    },
    // 跳转栏目列表
    handleLinkChannel(){
        window.localStorage.setItem('newsForm',JSON.stringify(this.newspaperForm))
        window.localStorage.setItem('newsStep',0)
        this.$router.push({
            path:'/channelList'
        })
    },
    handleAvatarSuccess(fileList,name) {
        if(name==='cover'){
            this.newspaperForm.cover_image_list = fileList
            this.newspaperForm.cover_image_id = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_id:''
            this.newspaperForm.cover_image_url = fileList[0]&&fileList[0].response&&fileList[0].response.file_info_list&&fileList[0].response.file_info_list[0]?fileList[0].response.file_info_list[0].file_url:''
            this.$forceUpdate()
        }
    },
    Imagemouseover(item,flag) {
      this[item] = flag
    },
    handleDeleteFile(item,i) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if(item==='cover'){
            this.newspaperForm.cover_image_list.splice(i, 1);
            this.newspaperForm.cover_image_url = ''
            this.newspaperForm.cover_image_id = null
            this.$forceUpdate()
        }
      });
    },
    handleDeleteArticle(item,i){
        this.$confirm("确定删除吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            item.splice(i, 1);
        });
    },
    // 去掉前后空格
    handleTrim(form,fild){
        this[form][fild] = this[form][fild].trim()
    },
    // 获取出版机构列表
    getVendorList(){
        let MethodName = "/PaperServer/Manager/IssueManager/FindVendors";
        let data = {
            key_word: ''
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
               this.vendorList = res.data
            }
        })
        .catch(() => {
        });
    },
    // 课标词表
    getVlList(){
        this.newspaperForm.vl_id = ''
        this.newspaperForm.chn_data = ''
        this.newspaperForm.chn_data_str = ''
        let MethodName = "/PaperServer/Manager/VocListManager/FindSimplesByCond";
        let data = {
            study_phase: this.newspaperForm.study_phase
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
               this.vlList = res.data
            }
        })
        .catch(() => {
        });
        let MethodNames = "/PaperServer/Manager/ChannelTplManager/PickChannelTplByCond";
        getLogin(MethodNames, data)
        .then((res) => {
            if(res.status===1){
               let tplList = res.data
               tplList.forEach(item => {
                item.chn_data_string = JSON.stringify(item.chn_data)
               });
               this.tplList = tplList
            }
        })
        .catch(() => {
        });
    },
    handleChangeChn(){
        this.newspaperForm.chn_data_str = JSON.parse(this.newspaperForm.chn_data).join('\n')
    },
    handleAddIssue(){
        let MethodName = "/PaperServer/Manager/IssueManager/AddIssue";
        let form = this.newspaperForm
        let data = {
            iss_cover_id: form.cover_image_id,
            iss_name: form.iss_name,
            vendor_name: form.vendor_name,
            release_date: form.release_date,
            comb_flag: form.comb_flag,
            iss_no:form.comb_flag===0?form.iss_no:null,
            iss_no_start: form.comb_flag===1?form.iss_no_start:null,
            iss_no_end: form.comb_flag===1?form.iss_no_end:null,
            study_phase: form.study_phase,
            vl_id: form.vl_id,
            iss_price_org: form.iss_price_org,
            iss_price_sell: this.newspaperForm.has_discount===1?form.iss_price_sell:form.iss_price_org,
            with_addon_price_org: form.with_addon_price_org,
            with_addon_price_sell: this.newspaperForm.has_discount_addon===1?form.with_addon_price_sell:form.with_addon_price_org,
            iss_note: form.iss_note,
            info_tag_data: form.info_tag_data,
            chn_data: JSON.parse(form.chn_data),
            with_addon_flag: form.with_addon_flag
        }
        if(this.id){
            MethodName = "/PaperServer/Manager/IssueManager/EditIssue"
            data.id = this.id
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
               window.localStorage.removeItem('newsForm')
               window.localStorage.removeItem('newsStep')
               this.issueId = res.data.id
               this.stepIndex++
            }
        })
        .catch(() => {
            this.loading = false
        });
    },
    getInfo(){
        let MethodName = "/PaperServer/Manager/IssueManager/FindIssueById"
        let data = {
            id: this.id
        }
        getLogin(MethodName, data)
        .then((res) => {
            if(res.status===1){
                this.newspaperForm = res.data
                this.newspaperForm.cover_image_list = []
                this.newspaperForm.chn_data = JSON.stringify(res.data.chn_data)
                this.newspaperForm.chn_data_str = JSON.parse(res.data.chn_data).join('\n')
                this.newspaperForm.cover_image_id = res.data.iss_cover_id
                getLogin('/FileServer/GetFileInfo', {
                    file_id: res.data.iss_cover_id
                })
                .then((res) => {
                    if(res.status===1){
                        this.newspaperForm.cover_image_url = res.file_url
                        this.$forceUpdate()
                    }
                })
                this.newspaperForm.cover_image_list.push[{
                    id: res.data.iss_cover_id
                }]
                if(res.data.iss_price_org===res.data.iss_price_sell){
                    this.$set(this.newspaperForm,'has_discount',0)
                }else{
                    this.$set(this.newspaperForm,'has_discount',1)
                }
                if(res.data.with_addon_price_org===res.data.with_addon_price_sell){
                    this.$set(this.newspaperForm,'has_discount_addon',0)
                }else{
                    this.$set(this.newspaperForm,'has_discount_addon',1)
                }
            }
        })
        .catch(() => {
        });
    },
    // 跳转文章
    handleArticle(id,type){
        window.localStorage.setItem('newsForm',JSON.stringify(this.newspaperForm))
        window.localStorage.setItem('newsStep',1)
        this.$router.push({
            path:'/createArticle',
            query: {
                id: id,
                type: type,
                articleId: this.id
            }
        })
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.getVendorList()
    await this.getVlList()
    let obj = {
        icon:'',
        url:'',
        text:'创建报纸'
    }
    if(this.id){
        obj.text = '编辑报纸'
        this.getInfo()
    }
    this.breadcrumbList.push(obj)
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.create-top{
    background: #FFFFFF;
    border-radius: 4px;
    padding: 24px;
    .common-title-box{
        margin-bottom: 4px;
    }
}
.create-bottom{
    padding: 40px 40px;
    margin-top: 16px;
    background: #FFFFFF;
    border-radius: 4px;
    height: calc(100vh - 292px);
    overflow: auto;
    .tips{
        margin: 0;
        color: #86909C;
        font-size: 12px;
        line-height: 20px;
    }
    .step-table{
        border: 1px solid #E5E6EB;
        border-collapse: collapse;
        font-size: 14px;
        line-height: 22px;
        color: #1D2129;
        text-align: center;
        margin-bottom: 24px;
        &-header{
            background: #F7F8FA;
            width: 120px !important;
            color: #86909C;
            font-weight: 500;
        }
        td{
            height: 40px;
            width: 260px;
            border: 1px solid #E5E6EB;
            &.td1{
                width: 130px;
            }
        }
        .step-cascader{
            width: 250px;
            height: 32px;
            line-height: 32px;
        }
    }
    .tpl-maintain{
        margin: 0 16px;
        color: #4F75FF;
        &:hover{
            text-decoration: underline;
        }
    }
    h6{
        color: #000;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        margin: 0 0 16px 0;
    }
}
.cover-box{
    position: relative;
    width: 200px;
    height: 280px;
    p{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 280px;
        line-height: 280px;
        font-size: 20px;
        text-align: center;
        cursor: pointer;
        background: rgba(0, 0, 0, 0.3);
        color: #F2F3F5;
        margin: 0;
    }
}
.issue-channel{
    .issue-top{
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        &-left{
            margin: 0;
            color: #1D2129;
            font-size: 20px;
            font-weight: 500;
            line-height: 28px;
            span{
                margin-left: 4px;
                color: #86909C;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
            }
        }
    }
    .channel-item{
        border: 1px solid #E5E6EB;
        margin: 12px 0;
        .channel-top{
            display: flex;
            padding: 9px 12px;
            align-items: center;
            .el-icon-caret-bottom,.el-icon-caret-top{
                color: #4E5969;
                width: 14px;
                height: 14px;
                cursor: pointer;
            }
            span{
                margin-left: 6px;
                flex: 1;
                cursor: pointer;
                word-break: break-word;
                color: #1D2129;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
            }
            .el-button--text{
                padding: 2px 12px;
                color: #165DFF;
                .el-icon-plus{
                    width: 12px;
                    height: 12px;
                    margin-right: 8px;
                    font-weight: bold;
                }
            }
        }
        .article-list{
            margin: 0;
            padding: 8px;
            list-style: none;
            background: #F7F8FA;
            min-height: 44px;
            border-top: 1px solid #E5E6EB;
            li{
                padding: 13px 20px;
                border-bottom: 1px solid #E5E6EB;
                display: flex;
                align-items: center;
                .svg-icon{
                    width: 16px;
                    height: 16px;
                    cursor: move;
                }
                .edit-article{
                    cursor: pointer;
                }
                .items{
                    flex: 1;
                    margin: 0 16px;
                    h6{
                        font-size: 16px;
                        font-weight: 500;
                        line-height: 24px;
                        margin-bottom: 2px;
                        word-break: break-word;
                    }
                    span{
                        color: #1D2129;
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 22px;
                        margin-right: 8px;
                    }
                }
                .border{
                    height: 12px;
                    width: 1px;
                    display: block;
                    background: #E5E6EB;
                    margin: 0 8px;
                }
                .el-icon-delete{
                    font-weight: bold;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.newspaper-create{
    .validity-box{
        // width: 114px;
        .el-input-group{
            width: 114px;
        }
        .el-input__inner{
            text-align: center;
        }
        .el-input-group__append{
            border: none;
            background: #F2F3F5;
            padding: 0 8px 0 0;
        }
    } 
    .iss-no-box{
        .el-form-item__content{
            display: flex;
            border-radius: 4px;
            width: 164px;
        }
        .el-input-group{
            width: 82px;
            flex-shrink: 0;
            border-radius: 0 4px 4px 0;
            overflow: hidden;
        }
        .el-input__inner{
            border-radius: 0;
            padding: 0;
            text-align: center;
        }
        .el-input-group__append{
            border: none;
            background: #F2F3F5;
            padding: 0;
            border-radius: 0;
            width: 34px;
            text-align: center;
        }
        .iss-start{
            &.el-input-group{
                border-radius: 4px 0 0 4px;
            }
            .el-input-group__append{
                width: 32px;
            }
        }
    }
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
    }  
    .el-divider{
        width: 600px;
    }
    .price-box{
        width: 300px;
        display: inline-block;
        .el-form-item__content{
            position: relative;
            .prepend,.append{
                position: absolute;
                left: 44px;
                font-size: 14px;
                line-height: 22px;
                color: #1D2129;
                line-height: 34px;
            }
            .append{
                left: 142px;
            }
        }
    }
    .personal-ceil{
        width: 200px;
        .el-input__inner{
            width: 200px;
            padding: 0 60px;
        }
    }
}
</style>