crm_front_v3/src/views/rai_manage/components/addSummarizing.vue

<template>
  <!-- 上周研究汇总添加/编辑 -->
  <div class="add-summarizing">
    <el-card>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="title">
              <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="author">
              <el-input v-model="ruleForm.author" placeholder="请输入作者"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="time">
              <el-date-picker type="date" placeholder="选择发布时间" value-format="yyyy-MM-dd" v-model="ruleForm.time"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="explain">
          <el-input v-model="ruleForm.explain" placeholder="请输入摘要"></el-input>
        </el-form-item>
      </el-form>
      <!-- //产业调研纪要篇 -->
      <div class="content-list">
        <div class="list-top">
          <span>产业调研纪要篇</span>
          <input maxlength="1" :class="isSortCydyjyShow ? '' : 'red'" v-model="SortCydyjy" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
          <el-tooltip style="margin-left: 5px" class="item" placement="top-start">
            <div slot="content">
              一级分类的序号请以大写字母A\B\C\D...排序 <br />
              二级分类请以1\2\3\4...排序
            </div>
            <i class="el-icon-info"></i>
          </el-tooltip>
        </div>
        <div class="list-ul" v-for="(item, index) in ListCydyjy" :key="item.ChartPermissionId">
          <div class="list-title">
            <img :src="item.IcoLink" alt="" />
            <span>{{ item.ChartPermissionName }}</span>
            <input maxlength="1" placeholder="序号" :class="item.isShow ? 'red' : ''" v-model="item.ChartPermissionSort" onkeyup="value=value.replace(/[^\d]/g,'')" />
          </div>
          <div class="list-li">
            <div v-for="(val, num) in item.List" :key="num" class="list-children">
              <div class="box">
                <froala :id="num + 'froalaCy'" :ref="num + 'froalaCy'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
                <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSdbg(item, num, index, '产业调研纪要篇')" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSdbg(item, index, '产业调研纪要篇')" :class="item.List && item.List.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div>
      <!-- //上市公司调研纪要篇 -->
      <div class="content-list">
        <div class="list-top">
          <span>上市公司调研纪要篇</span>
          <input maxlength="1" :class="isSortSsgsShow ? '' : 'red'" v-model="SortSsgs" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
        </div>
        <div class="list-ul" v-for="(item, index) in ListSsgs" :key="item.ChartPermissionId">
          <div class="list-title">
            <img :src="item.IcoLink" alt="" />
            <span>{{ item.ChartPermissionName }}</span>
            <input maxlength="1" placeholder="序号" :class="item.isShow ? 'red' : ''" v-model="item.ChartPermissionSort" onkeyup="value=value.replace(/[^\d]/g,'')" />
          </div>
          <div class="list-li">
            <div v-for="(val, num) in item.List" :key="num" class="list-children">
              <div class="box">
                <froala :id="num + 'froalaCy'" :ref="num + 'froalaCy'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
                <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteListSdbg(item, num, index, '上市公司调研纪要篇')" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addListSdbg(item, index, '上市公司调研纪要篇')" :class="item.List && item.List.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div>
      <!-- 研选纪要
      <div class="content-list">
        <div class="list-top">
          <span>买方研选纪要</span>
          <input maxlength="1" :class="isSortSummaryShow ? '' : 'red'" v-model="SortYanx" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
        </div>
        <div class="list-ul">
          <div class="list-li">
            <div v-for="(item, index) in ListYanx" :key="index" class="list-children">
              <div class="box">
                <froala :id="item + 'froalaDp'" :ref="item + 'froalaDp'" :tag="'textarea'" :config="froalaConfig" v-model="item.Body"></froala>
                <el-input v-model="item.ReportLink" :class="item.isShow ? 'red' : ''" placeholder="请输入报告链接"></el-input>
              </div>
              <img @click="deleteList(item, index)" src="~@/assets/img/icons/delete-Item.png" />
            </div>
            <p @click="addList" :class="ListYanx && ListYanx.length > 0 ? 'active' : ''">+添加栏目</p>
          </div>
        </div>
      </div> --> 
      <div class="more-button">
        <el-button type="primary" @click="confirm('预览')">预览</el-button>
        <el-button type="primary" @click="confirm('保存')">保存</el-button>
        <el-button v-if="isShowStatus" type="primary" @click="confirm('发布')">发布</el-button>
        <el-button type="" @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";
import mixinsRichText from "./selection/mixins";
export default {
  name: "",
  components: {},
  props: {},
  data() {
    var that = this;
    return {
      // ListYanx: [],
      isShowStatus: true,
      // isSortSummaryShow: true,
      // SortYanx: "",
    };
  },
  mixins: [mixinsRichText],
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // window.addEventListener('beforeunload', e => {
    //   window.event.returnValue = "刷新/关闭"
    // })
    window.addEventListener("beforeunload", this.beforeunloadFn);
    if (this.$route.query.id) {
      this.getDetail();
    } else {
      this.getList();
    }
  },
  destroyed() {
    window.removeEventListener("beforeunload", this.beforeunloadFn);
  },
  methods: {
    beforeunloadFn(e) {
      e = e || window.event;
      if (e) {
        e.returnValue = "关闭提示";
      }
      return "关闭提示";
    },
    async getList() {
      const res = await raiInterface.chartPermissiondetailTemplate();
      if (res.Ret === 200) {
        this.ListCydyjy = res.Data.ListCydyjy;
        this.SortCydyjy = res.Data.SortCydyjy;
        this.ListSsgs = res.Data.ListSsgs;
        this.SortSsgs = res.Data.SortSsgs;
        // this.ListYanx.forEach(item => item.isShow = true);
      }
    },
    //删除 list
    // deleteList(item, num, index) {
    //   this.ListYanx.splice(num, 1);
    // },
    //添加 list
    // addList() {
    //   this.ListYanx.push({ Body: "", ReportLink: "" });
    // },
    //获取详情
    async getDetail() {
      const res = await raiInterface.minutesSummaryDetail({
        ArticleId: this.$route.query.id,
      });
      if (res.Ret === 200) {
        this.initGetList(res.Data.ListCydyjy);
        this.initGetList(res.Data.ListSsgs);
        this.ListCydyjy = res.Data.ListCydyjy;
        this.SortCydyjy = res.Data.SortCydyjy;
        this.ListSsgs = res.Data.ListSsgs;
        this.SortSsgs = res.Data.SortSsgs;
        // this.ListYanx = res.Data.ListYanx || [];
        // this.SortYanx = res.Data.SortYanx;
        this.isShowStatus = res.Data.PublishStatus == 0;
        this.ruleForm = {
          title: res.Data.Title, //标题
          author: res.Data.Department, //作者
          time: res.Data.PublishDate, //时间
          explain: res.Data.Abstract, //说明
        };
      }
    },
    //保存 发布
    confirm: _.debounce(function (type) {
      this.$refs.ruleForm.validate(async (val) => {
        if (!val) return;
        const isFlag = await this.fnConFirm();
        if (isFlag) return;
        let params = {
          Abstract: this.ruleForm.explain,
          ArticleId: this.$route.query.id ? Number(this.$route.query.id) : 0,
          Department: this.ruleForm.author,
          DoType: type == "发布" ? 1 : 0,
          PublishDate: this.ruleForm.time.replace(/\./g, "-"),
          Title: this.ruleForm.title,
          List: this.dataList,
          Content: {
            ListCydyjy: this.ListCydyjy,
            ListSsgs: this.ListSsgs,
            // ListYanx: this.ListYanx,
            SortCydyjy: this.SortCydyjy,
            SortSsgs: this.SortSsgs,
            // SortYanx: this.SortYanx,
          },
        };
        if (type == "预览") {
          sessionStorage.setItem("lastWeekPre", JSON.stringify(params));
          let { href } = this.$router.resolve({ name: "预览上周汇总" });
          window.open(href, "_blank");
        } else {
          const res = await raiInterface.minutesSummaryPreserveAndPublish(params);
          if (res.Ret === 200) {
            this.$message.success(`${type}成功!`);
            this.$refs["ruleForm"].resetFields();
            this.$router.back();
          }
        }
      });
    }, 500),
    fnConFirm() {
      let flag = false;
      let isCydyjy = this.ListCydyjy.some((item) => item.List.length > 0);
      let Ssgs = this.ListSsgs.some((item) => item.List.length > 0);

      this.isSortCydyjyShow = !(isCydyjy && !this.SortCydyjy);
      this.isSortSsgsShow = !(Ssgs && !this.SortSsgs);
      // this.isSortSummaryShow = !(this.ListYanx.length !== 0 && !this.SortYanx);
      // || (!this.SortYanx && this.ListYanx.length > 0)
      if ((isCydyjy && !this.SortCydyjy) || (Ssgs && !this.SortSsgs) ) {
        this.$message.warning("有内容的报告分类和行业分类，序号不能为空");
        return (flag = true);
      }
      // , this.SortYanx
      let str = new Array(this.SortCydyjy, this.SortSsgs);
      let isStr = str.sort();
      for (var i = 0; i < isStr.length - 1; i++) {
        if (isStr[i] == isStr[i + 1] && (isStr[i] || isStr[i + 1])) {
          this.$message.warning("请勿填写重复的序号!");
          return (flag = true);
        }
      }
      let chidrenCydyjy = this.chidrenList(this.ListCydyjy);
      let chidrenSsgs = this.chidrenList(this.ListSsgs);
      if (chidrenCydyjy || chidrenSsgs) {
        this.$message.warning("有内容行业分类，序号不能为空");
        return (flag = true);
      }
    },
    //取消
    cancel() {
      this.$refs["ruleForm"].resetFields();
      this.$router.back();
    },
  },
};
</script>
<style scoped lang="scss">
.add-summarizing {
  @import "./selection/strictSelection.scss";
}
</style>