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"
                :loading="loading"
                >下一步</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')"
                  maxlength="100"
                ></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"
                  maxlength="5"
                  @input="$forceUpdate()"
                >
                  <template slot="append">期</template>
                </el-input>
              </el-form-item>
              <el-form-item
                label="期数"
                prop="iss_no_start"
                v-if="newspaperForm.comb_flag === 1"
              >
                <el-input
                  v-model="newspaperForm.iss_no_start"
                  style="width: 114px"
                  maxlength="20"
                  @input="$forceUpdate()"
                >
                </el-input>
                <!-- <el-input v-model="newspaperForm.iss_no_end" type="number">
                                <template slot="append">期</template>
                            </el-input> -->
              </el-form-item>
              <template v-if="issueKS">
                <el-form-item label="配置刊数">
                  <el-input
                    placeholder="请输入"
                    v-model="issueKS.comb_count"
                    disabled
                    style="width: 114px"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="当前刊数">
                  <el-input
                    placeholder="请输入"
                    v-model="issueKS.ks"
                    disabled
                    style="width: 114px; margin-right: 10px"
                  >
                  </el-input>
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleSyncIssueKS"
                    >同步刊数</el-button
                  >
                </el-form-item>
              </template>
              <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(1)"
                >
                  <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.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"
                  disabled
                  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" v-if="issueChannel">
              <div class="issue-top">
                <h4 class="issue-top-left">
                  栏目
                  <span
                    >共 {{ issueChannel.chn_count }} 个栏目
                    {{ issueChannel.art_count }} 篇文章</span
                  >
                </h4>
                <div>
                  <el-button type="primary" size="small" @click="addChnDate"
                    >新增栏目</el-button
                  >
                  <el-button
                    type="primary"
                    size="small"
                    @click="previewBookItem"
                    >预览</el-button
                  >
                </div>
              </div>
              <draggable
                v-model="issueChannel.chn_art_data"
                chosenClass="chosen"
                forceFallback="true"
                group="peoples"
                animation="100"
                @start="onStarts"
                @end="onEnds()"
                class="article-list"
                handle=".movers"
              >
                <div
                  class="channel-item"
                  v-for="(item, index) in issueChannel.chn_art_data"
                  :key="index"
                >
                  <div class="channel-top">
                    <svg-icon
                      icon-class="sort"
                      draggable="true"
                      class="movers"
                    ></svg-icon>
                    <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>
                    <div class="channel-top-name">
                      <template v-if="!item.editFlag">
                        <span>{{ item.chn_name }}</span>
                        <svg-icon
                          icon-class="edit"
                          class="edit-chn-name"
                          @click="editChnDate(item, index)"
                        ></svg-icon>
                      </template>
                      <template v-else>
                        <el-input
                          v-model="item.edit_name"
                          maxlength="200"
                        ></el-input>
                        <svg-icon
                          icon-class="save-line"
                          class="edit-chn-name"
                          @click="saveChnDate(item.edit_name, index)"
                        ></svg-icon>
                      </template>
                      <svg-icon
                        icon-class="deletes-line"
                        class="edit-chn-name"
                        @click="deleteChnDate(index)"
                      ></svg-icon>
                    </div>
                    <el-button
                      type="text"
                      @click="handleArticle('', 1, item.chn_name)"
                      ><i class="el-icon-plus"></i>新增英文内容</el-button
                    >
                    <el-button
                      type="text"
                      @click="handleArticle('', 0, item.chn_name)"
                      ><i class="el-icon-plus"></i>新增中文内容</el-button
                    >
                  </div>
                  <el-collapse-transition>
                    <template v-if="item.show">
                      <draggable
                        v-model="item.arts"
                        chosenClass="chosen"
                        forceFallback="true"
                        group="people"
                        animation="1000"
                        @start="onStart"
                        @end="onEnd()"
                        class="article-list"
                        handle=".mover"
                      >
                        <li v-for="(itema, indexa) in item.arts" :key="indexa">
                          <svg-icon
                            icon-class="sort"
                            draggable="true"
                            class="mover"
                          ></svg-icon>
                          <div class="items">
                            <h6>{{ itema.art_title }}</h6>
                            <span>BY {{ itema.art_author }}</span>
                            <span
                              >创建人：{{
                                itema.creator_real_name ||
                                itema.creator_user_name
                              }}</span
                            >
                            <span>{{ itema.create_time }}</span>
                            <span
                              >最后编辑：{{
                                itema.updater_real_name ||
                                itema.updater_user_name
                              }}</span
                            >
                            <span>{{ itema.update_time }}</span>
                          </div>
                          <svg-icon
                            icon-class="edit"
                            class="edit-article"
                            @click="
                              handleArticle(
                                itema.id,
                                itema.en_flag,
                                item.chn_name
                              )
                            "
                          ></svg-icon>
                          <span class="border"></span>
                          <i
                            class="el-icon-delete"
                            @click="
                              handleDeleteArticle(item.arts, indexa, itema.id)
                            "
                          ></i>
                        </li>
                      </draggable>
                    </template>
                  </el-collapse-transition>
                </div>
              </draggable>
            </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>
    <el-dialog
      :visible.sync="previewBook"
      :show-close="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="100%"
      top="0"
      class="login-dialog"
      v-if="previewBook"
    >
      <book-item
        :id="id ? id : issueId"
        @closePreview="closePreview"
      ></book-item>
    </el-dialog>
  </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";
import BookItem from "./BookItem.vue";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu, Breadcrumb, Upload, draggable, BookItem },
  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("请输入"));
        }
      }
    };
    const validateIssNoDan = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入期数"));
      } else {
        if (value.length > 5) {
          callback(new Error("期数过长"));
        } else {
          let reg = /^[0-9]*[1-9][0-9]*$/;
          let result = reg.test(value);
          if (!result) {
            callback(new Error("期数只能输入正整数"));
          } else {
            callback();
          }
        }
      }
    };
    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: 0,
            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, validator: validateIssNoDan, trigger: "blur" },
        ],
        iss_no_start: [
          { required: true, message: "请输入期数", 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: null,
      drag: false,
      loading: false,
      previewBook: false,
      oldArtsList: [], // 记录旧文章栏目列表
      issueKS: null, // 刊数信息
    };
  },
  //计算属性 类似于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.handleEditIssue();
        }
      }
    },
    // 返回列表
    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);
      window.localStorage.setItem("clearForm", true);
      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, id) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        item.splice(i, 1);
        getLogin("/PaperServer/Manager/ArticleManager/DeleteArticle", {
          id: id,
        }).then((res) => {
          if (res.status === 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(() => {});
      // getLogin('/PaperServer/Manager/IssueManager/FindPubs', {})
      // .then((res) => {
      //     if(res.status===1){

      //     }
      // })
      // .catch(() => {
      // });
    },
    // 课标词表
    getVlList(flag) {
      if (flag) {
        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");
      if (this.id || this.issueId) {
        let chn_art_data = [];
        let chn_art_data_new = []; // 新的文章栏目列表

        if (this.issueChannel.chn_art_data) {
          chn_art_data = JSON.parse(JSON.stringify(this.oldArtsList));

          JSON.parse(this.newspaperForm.chn_data).forEach((item, index) => {
            let flag = true;
            for (let i = 0; i < chn_art_data.length; i++) {
              if (item === chn_art_data[i].chn_name) {
                chn_art_data_new.push(chn_art_data[i]);
                flag = false;
                return false;
              }
            }
            if (flag) {
              let obj = {
                arts: [],
                editFlag: false,
                chn_idx: index,
                chn_name: item,
                editFlag: false,
                edit_name: item,
                show: index === 0 ? true : false,
              };
              chn_art_data_new.push(obj);
            }
          });
        } else {
          JSON.parse(this.newspaperForm.chn_data).forEach((item, index) => {
            let obj = {
              arts: [],
              editFlag: false,
              chn_idx: index,
              chn_name: item,
              editFlag: false,
              edit_name: item,
              show: index === 0 ? true : false,
            };
            chn_art_data_new.push(obj);
          });
        }
        this.issueChannel = {
          chn_art_data: chn_art_data_new,
        };
      }
    },
    handleAddIssue() {
      this.loading = true;
      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 : form.iss_no_start,
        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 || this.issueId) {
        this.loading = false;
        this.stepIndex++;
        return false;
      }
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            window.localStorage.removeItem("newsForm");
            window.localStorage.removeItem("newsStep");
            window.localStorage.removeItem("clearForm");
            this.issueId = res.data.id;
            this.$router.replace(
              "/createNewspaper?id=" + res.data.id + "&isCreate=true"
            );
            this.stepIndex++;
            let chn_art_data = [];
            if (res.data.chn_art_data) {
              chn_art_data = JSON.parse(JSON.stringify(res.data.chn_art_data));
              chn_art_data.forEach((item, index) => {
                if (index === 0) {
                  item.show = true;
                } else {
                  item.show = true;
                }
              });
            } else {
              res.data.chn_data.forEach((itemc, index) => {
                let obj = {
                  chn_name: itemc,
                  edit_name: itemc,
                  arts: [],
                  show: true,
                };
                chn_art_data.push(obj);
              });
            }
            this.issueChannel = {
              chn_count: res.data.chn_count,
              art_count: res.data.art_count,
              chn_art_data: chn_art_data,
            };
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleEditIssue() {
      this.loading = true;
      let MethodName = "/PaperServer/Manager/IssueManager/EditIssue";
      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 : form.iss_no_start,
        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,
        id: this.id ? this.id : this.issueId,
        chn_art_data: this.issueChannel.chn_art_data,
      };
      getLogin(MethodName, data)
        .then((res) => {
          this.loading = false;
          if (res.status === 1) {
            window.localStorage.removeItem("newsForm");
            window.localStorage.removeItem("newsStep");
            window.localStorage.removeItem("clearForm");
            this.stepIndex++;
            let chn_art_data = [];
            if (res.data.chn_art_data) {
              chn_art_data = JSON.parse(JSON.stringify(res.data.chn_art_data));
              chn_art_data.forEach((item, index) => {
                if (index === 0) {
                  item.show = true;
                } else {
                  item.show = true;
                }
              });
            } else {
              JSON.parse(res.data.chn_data).forEach((itemc, index) => {
                let obj = {
                  chn_name: itemc,
                  edit_name: itemc,
                  arts: [],
                  show: true,
                };
                chn_art_data.push(obj);
              });
            }
            this.issueChannel = {
              chn_count: res.data.chn_count,
              art_count: res.data.art_count,
              chn_art_data: chn_art_data,
            };
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getInfo() {
      let MethodName = "/PaperServer/Manager/IssueManager/FindIssueById";
      let data = {
        id: this.id ? this.id : this.issueId,
      };
      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;
            this.newspaperForm.iss_no_start = res.data.iss_no;
            if (res.data.iss_cover_id) {
              if (res.data.iss_cover_id.indexOf("http") === -1) {
                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();
                  }
                });
              } else {
                this.newspaperForm.cover_image_url = res.data.iss_cover_id;
              }

              this.newspaperForm.cover_image_list.push[
                {
                  id: res.data.iss_cover_id,
                }
              ];
            } else if (res.data.iss_cover_url) {
              this.newspaperForm.cover_image_url = res.data.iss_cover_url;
              this.newspaperForm.cover_image_list.push[
                {
                  id: res.data.cover_image_url,
                }
              ];
            }

            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);
            }
            // let chn_art_data = JSON.parse(JSON.stringify(res.data.chn_art_data))
            // chn_art_data.forEach((item,index)=>{
            //     if(!item.hasOwnProperty('arts')){
            //         this.$set(item,'arts',[])
            //     }
            //     item.editFlag = false
            //     item.edit_name = item.chn_name
            //     if(index===0){
            //         item.show = this.issueChannel&&this.issueChannel.chn_art_data&&this.issueChannel.chn_art_data[index]?this.issueChannel.chn_art_data[index].show:true
            //     }else{
            //         item.show = this.issueChannel&&this.issueChannel.chn_art_data&&this.issueChannel.chn_art_data[index]?this.issueChannel.chn_art_data[index].show:false
            //     }
            // })
            let chn_art_data = [];
            if (res.data.chn_art_data) {
              chn_art_data = JSON.parse(JSON.stringify(res.data.chn_art_data));
              chn_art_data.forEach((item, index) => {
                if (!item.hasOwnProperty("arts")) {
                  this.$set(item, "arts", []);
                }
                item.editFlag = false;
                item.edit_name = item.chn_name;
                if (index === 0) {
                  item.show = true;
                } else {
                  item.show = true;
                }
              });
            } else {
              JSON.parse(res.data.chn_data).forEach((itemc, index) => {
                if (itemc) {
                  let obj = {
                    chn_name: itemc,
                    edit_name: itemc,
                    arts: [],
                    show: true,
                  };
                  chn_art_data.push(obj);
                }
              });
            }
            this.issueChannel = {
              chn_count: res.data.chn_count,
              art_count: res.data.art_count,
              chn_art_data: chn_art_data,
            };

            this.oldArtsList = chn_art_data;
          }
        })
        .catch(() => {});
    },
    // 跳转文章
    handleArticle(id, type, name) {
      window.localStorage.setItem(
        "newsForm",
        JSON.stringify(this.newspaperForm)
      );
      window.localStorage.setItem("newsStep", 1);
      this.$router.push({
        path: "/createArticle",
        query: {
          id: id,
          en_flag: type ? type : 0,
          issueId: this.id ? this.id : this.issueId,
          chn_name: name,
          isCreate: this.$route.query.isCreate === "true" ? true : "",
        },
      });
    },
    //开始拖拽事件
    onStart(val) {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
      this.issueChannel.chn_art_data.forEach((item) => {
        if (item.arts && item.arts.length > 0) {
          item.arts.forEach((items, indexs) => {
            items.art_idx = indexs;
          });
        }
      });
      this.handleUpdateChnArtData();
    },
    //开始拖拽事件
    onStarts(val) {},
    //拖拽结束事件
    onEnds() {
      this.issueChannel.chn_art_data.forEach((item, index) => {
        item.chn_idx = index;
      });
      this.handleUpdateChnArtData();
    },
    // 更新栏目数据
    handleUpdateChnArtData() {
      getLogin("/PaperServer/Manager/IssueManager/EditIssueChnArtData", {
        chn_art_data: this.issueChannel.chn_art_data,
        id: this.id ? this.id : this.issueId,
      }).then((res) => {
        if (res.status === 1) {
          this.getInfo();
        }
      });
    },
    saveChnDate(value, index) {
      let flag = false;
      // 判断是否有值并且trim
      this.issueChannel.chn_art_data.forEach((item) => {
        if (item.edit_name && item.edit_name.trim()) {
          item.chn_name = item.edit_name.trim();
        } else {
          flag = true;
        }
      });

      if (flag) {
        this.$message.warning("栏目名称不能为空");
      } else {
        this.onEnd();
      }
      // if(this.issueChannel.chn_art_data[index].)
    },
    // 点击编辑栏目名称按钮
    editChnDate(item, index) {
      if (!item.hasOwnProperty("editFlag")) {
        this.$set(item, "editFlag", false);
      }
      item.editFlag = true;
    },
    // 删除栏目
    deleteChnDate(index) {
      this.$confirm("确定删除此栏目吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.issueChannel.chn_art_data.splice(index, 1);
          this.issueChannel.chn_art_data.forEach((item, indexs) => {
            item.chn_idx = indexs;
          });
          this.onEnd();
        })
        .catch(() => {});
    },
    // 新增栏目
    addChnDate() {
      let obj = {
        chn_name: "",
        edit_name: "",
        chn_idx: this.issueChannel.chn_art_data.length - 1,
        arts: [],
        show: true,
      };
      this.issueChannel.chn_art_data.push(obj);
    },
    // 预览栏目
    previewBookItem() {
      this.previewBook = true;
    },
    closePreview() {
      this.previewBook = false;
    },
    // 获取报纸刊数
    getIssueKS() {
      let MethodName = "/ShopServer/Manager/GoodsQuery/GetIssueKS";
      let data = {
        issue_id: this.id,
      };
      getLogin(MethodName, data).then((res) => {
        if (res.status === 1) {
          this.issueKS = {
            ks: res.ks,
            comb_count: res.comb_count,
          };
        }
      });
    },
    // 同步刊数
    handleSyncIssueKS() {
      let MethodName = "/ShopServer/Manager/GoodsManager/SyncIssueKS";
      let data = {
        issue_id: this.id,
      };
      getLogin(MethodName, data).then((res) => {
        if (res.status === 1) {
          this.$message.success("同步成功");
          this.getIssueKS();
        }
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.getVendorList();
    await this.getVlList();
    let obj = {
      icon: "",
      url: "",
      text: "创建报纸",
    };
    if (this.$route.query.isCreate === "false") {
      obj.text = "编辑报纸";
    }
    if (this.id) {
      this.getInfo();

      this.getIssueKS();
    }
    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: 0 12px;
      height: 42px;
      align-items: center;
      .el-icon-caret-bottom,
      .el-icon-caret-top {
        color: #4e5969;
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
      &-name {
        margin-left: 6px;
        flex: 1;
        word-break: break-word;
        color: #1d2129;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        .edit-chn-name {
          margin-left: 4px;
          cursor: pointer;
        }
      }
      .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;
          padding: 8px;
          width: 32px;
          height: 48px;
        }
        .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;
        }
        .el-icon-delete {
          font-weight: bold;
          cursor: pointer;
          padding: 8px;
          height: 48px;
          line-height: 32px;
        }
      }
    }
  }
  .movers {
    cursor: move;
  }
}
</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>