报告管理

src/views/rai_manage/components/addChoiceness.vue

@@ -3,10 +3,10 @@ import { ref, onMounted } from "vue";
 import RichText from "./richText.vue";
 import { raiInterface } from "@/api/api.js";
 import draggable from "vuedraggable";
-import TemplateMessage from "./apply/templateMessage.vue";
 import _ from "lodash";
 import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
 import { ElMessageBox, ElMessage } from "element-plus";
+import { Close, Plus } from "@element-plus/icons-vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -52,7 +52,7 @@ const timeInterval = ref(null); // 定时器
 // 报告的缓存处理数据
 function dataInit() {
   if (sessionStorage.getItem("addChoicenessQY")) {
-    console.log('????');
+    console.log("????");
     let data = JSON.parse(sessionStorage.getItem("addChoicenessQY"));
     setTimeout(() => {
       industryList.value = data.industryList;
@@ -157,6 +157,7 @@ async function getNoTacticsfirst() {
 }
 //点击产业的事件
 function industryBtn(item, index) {
+  console.log(item);
   if (index !== industryIndex.value) {
     industryIndex.value = index;
     chartPermissionId.value = item.ChartPermissionId;
@@ -525,28 +526,35 @@ onBeforeRouteLeave((to, from, next) => {
         <!-- 产业/标的 模块 -->
         <div class="content-module" v-if="industryList.length">
           <draggable v-model="industryList" animation="300" @update="sortChange">
-            <div class="content-industry" v-for="(item, index) in industryList" :key="item.ChartPermissionId">
-              <div class="content-name" :class="industryIndex == index ? 'active' : ''" @click="industryBtn(item, index)">{{ item.ChartPermissionName }}</div>
-            </div>
+            <template #item="{ element, index }">
+              <div class="content-industry">
+                <div class="content-name" :class="industryIndex == index ? 'active' : ''" @click="industryBtn(element, index)">{{ element.ChartPermissionName }}</div>
+              </div>
+            </template>
           </draggable>
-          <div v-for="(item, index) in industryList" :key="item.ChartPermissionId">
-            <div v-show="industryIndex == index">
-              <RichText v-model="item.BodyChartSummary" :ref="'logic' + index" :spareId="'logictest' + index" :isText="contentTextLogic" />
-              <!-- <draggable :list="item.List" animation="300" class="classification" filter=".addIndustrial" :move="onMove" @update="ificationSortChange"> -->
-                <div v-for="(val, num) in item.List" :key="val.IndustrialSubjectId" class="industrial" @click="ificationIndustrialBtn(val, num)" :class="num == ificationIndustrial ? 'pitch' : ''">
-                  <span style="margin-right: 19px">{{ val.IndustrialSubjectName }}</span>
-                  <span v-if="num == ificationIndustrial">
-                    <img src="~@/assets/img/icons/edit1.png" style="width: 12px; height: 12px; marginright: 10px" @click="editText(val, num)" />
-                    <i class="el-icon-close" @click="deleteClassify(val, num)"></i>
-                  </span>
-                </div>
-                <div class="addIndustrial" @click="addMulti" v-if="industryIndex == index">
-                  <i class="el-icon-plus"></i>
+          <div v-for="(item, indexP) in industryList" :key="item.ChartPermissionId">
+            <div v-show="industryIndex == indexP">
+              <RichText v-model="item.BodyChartSummary" :ref="'logic' + indexP" :spareId="'logictest' + indexP" :isText="contentTextLogic" />
+              <div style="display: flex; flex-wrap: wrap; margin-top: 20px">
+                <draggable v-model="item.List" animation="300" class="classification" filter=".addIndustrial" :move="onMove" @update="ificationSortChange">
+                  <template #item="{ element, index }">
+                    <div class="industrial" @click="ificationIndustrialBtn(element, index)" :class="index == ificationIndustrial ? 'pitch' : ''">
+                      <span style="margin-right: 19px">{{ element.IndustrialSubjectName }}</span>
+                      <span v-if="index == ificationIndustrial">
+                        <img src="~@/assets/img/icons/edit1.png" style="width: 12px; height: 12px; margin-right: 10px" @click="editText(element, index)" />
+                        <el-icon @click="deleteClassify(element, index)"><Close /></el-icon>
+                      </span>
+                    </div>
+                  </template>
+                </draggable>
+                <div class="addIndustrial" @click="addMulti" v-if="industryIndex == indexP">
+                  <el-icon><Plus /></el-icon>
                   <span>添加标的</span>
                 </div>
-              <!-- </draggable> -->
+              </div>
+
               <template v-for="(val, num) in item.List" :key="val.IndustrialSubjectId">
-                <div v-show="industryIndex == index">
+                <div v-show="industryIndex == indexP">
                   <div class="industrial-is-new" v-show="num == ificationIndustrial">
                     <el-checkbox v-model="val.IsNew" :true-label="1" :false-label="0">显示new标签</el-checkbox>
                   </div>
@@ -702,7 +710,7 @@ onBeforeRouteLeave((to, from, next) => {
   .classification {
     display: flex;
     flex-wrap: wrap;
-    margin-top: 20px;
+
     .industrial {
       position: relative;
       box-sizing: border-box;

src/views/rai_manage/components/addMorningMeeting.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, onMounted, reactive, toRefs, watch } from "vue";
 import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";

src/views/rai_manage/components/addRoadshow.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, onMounted, reactive, toRefs, watch } from "vue";
 
 import RichText from "./richText.vue";
 import _ from "lodash";

src/views/rai_manage/components/addSummarizing.vue

@@ -1,8 +1,232 @@
+<script setup>
+import { ref, reactive, computed, watch, onMounted, onUnmounted, toRefs } from "vue";
+
+import { InfoFilled } from "@element-plus/icons-vue";
+import { raiInterface } from "@/api/api.js";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+import _ from "lodash";
+import { ElMessageBox, ElMessage } from "element-plus";
+import RichText from "./richText.vue";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  isShowStatus: true,
+  ruleForm: {
+    title: "", //标题
+    author: "", //作者
+    time: "", //时间
+    explain: "", //说明
+    alteration: "", //变更
+  },
+  rules: {
+    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+    author: [{ required: true, message: "请输入作者", trigger: "blur" }],
+    time: [{ required: true, message: "请输入时间", trigger: "change" }],
+    explain: [{ required: true, message: "请输入摘要", trigger: "blur" }],
+  },
+  //产业调研纪要篇
+  ListCydyjy: [],
+  SortCydyjy: "",
+  //上市公司调研纪要篇
+  ListSsgs: [],
+  SortSsgs: "",
+  //产业调研纪要篇 上市公司调研纪要篇 输入框是否高亮
+  isSortCydyjyShow: true,
+  isSortSsgsShow: true,
+  isShowStatus:true
+});
+
+function beforeunloadFn(e) {
+  e = e || window.event;
+  if (e) {
+    e.returnValue = "关闭提示";
+  }
+  return "关闭提示";
+}
+
+async function getList() {
+  const res = await raiInterface.chartPermissiondetailTemplate();
+  if (res.Ret === 200) {
+    pageState.ListCydyjy = res.Data.ListCydyjy;
+    pageState.SortCydyjy = res.Data.SortCydyjy;
+    pageState.ListSsgs = res.Data.ListSsgs;
+    pageState.SortSsgs = res.Data.SortSsgs;
+  }
+}
+//获取详情
+async function getDetail() {
+  const res = await raiInterface.minutesSummaryDetail({
+    ArticleId: $route.query.id,
+  });
+  if (res.Ret === 200) {
+    initGetList(res.Data.ListCydyjy);
+    initGetList(res.Data.ListSsgs);
+    pageState.ListCydyjy = res.Data.ListCydyjy;
+    pageState.SortCydyjy = res.Data.SortCydyjy;
+    pageState.ListSsgs = res.Data.ListSsgs;
+    pageState.SortSsgs = res.Data.SortSsgs;
+    pageState.isShowStatus = res.Data.PublishStatus == 0;
+    pageState.ruleForm = {
+      title: res.Data.Title, //标题
+      author: res.Data.Department, //作者
+      time: res.Data.PublishDate, //时间
+      explain: res.Data.Abstract, //说明
+    };
+  }
+}
+
+const ruleFormRef = ref(null);
+//保存 发布
+const confirm = _.debounce(function (type) {
+  ruleFormRef.value.validate(async (val) => {
+    if (!val) return;
+    const isFlag = await pageState.fnConFirm();
+    if (isFlag) return;
+    let params = {
+      Abstract: pageState.ruleForm.explain,
+      ArticleId: $route.query.id ? Number($route.query.id) : 0,
+      Department: pageState.ruleForm.author,
+      DoType: type == "发布" ? 1 : 0,
+      PublishDate: pageState.ruleForm.time.replace(/\./g, "-"),
+      Title: pageState.ruleForm.title,
+      List: pageState.dataList,
+      Content: {
+        ListCydyjy: pageState.ListCydyjy,
+        ListSsgs: pageState.ListSsgs,
+        SortCydyjy: pageState.SortCydyjy,
+        SortSsgs: pageState.SortSsgs,
+      },
+    };
+    if (type == "预览") {
+      sessionStorage.setItem("lastWeekPre", JSON.stringify(params));
+      let { href } = $router.resolve({ name: "预览上周汇总" });
+      window.open(href, "_blank");
+    } else {
+      const res = await raiInterface.minutesSummaryPreserveAndPublish(params);
+      if (res.Ret === 200) {
+        ElMessage.success(`${type}成功!`);
+        ruleFormRef.value.resetFields();
+        $router.back();
+      }
+    }
+  });
+}, 500);
+function fnConFirm() {
+  let flag = false;
+  let isCydyjy = pageState.ListCydyjy.some((item) => item.List.length > 0);
+  let Ssgs = pageState.ListSsgs.some((item) => item.List.length > 0);
+
+  pageState.isSortCydyjyShow = !(isCydyjy && !pageState.SortCydyjy);
+  pageState.isSortSsgsShow = !(Ssgs && !pageState.SortSsgs);
+  if ((isCydyjy && !pageState.SortCydyjy) || (Ssgs && !pageState.SortSsgs)) {
+    ElMessage.warning("有内容的报告分类和行业分类，序号不能为空");
+    return (flag = true);
+  }
+  let str = new Array(pageState.SortCydyjy, pageState.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])) {
+      ElMessage.warning("请勿填写重复的序号!");
+      return (flag = true);
+    }
+  }
+  let chidrenCydyjy = chidrenList(pageState.ListCydyjy);
+  let chidrenSsgs = chidrenList(pageState.ListSsgs);
+  if (chidrenCydyjy || chidrenSsgs) {
+    ElMessage.warning("有内容行业分类，序号不能为空");
+    return (flag = true);
+  }
+}
+//消
+function cancel() {
+  ruleFormRef.value.resetFields();
+  $router.back();
+}
+
+//深度报告篇 产业调研纪要篇 本周晨会精华
+function addListSdbg(item, index, type) {
+  switch (type) {
+    case "深度报告篇":
+      pageState.ListSdbg[index].List.push({ Body: "", ReportLink: "" });
+      break;
+    case "产业调研纪要篇":
+      pageState.ListCydyjy[index].List.push({ Body: "", ReportLink: "" });
+      break;
+    case "上市公司调研纪要篇":
+      pageState.ListSsgs[index].List.push({ Body: "", ReportLink: "" });
+      break;
+    case "本周晨会精华":
+      pageState.ListBzchjh[index].List.push({ Body: "", ReportLink: "" });
+      break;
+  }
+}
+//深度报告篇 产业调研纪要篇 本周晨会精华
+function deleteListSdbg(item, num, index, type) {
+  switch (type) {
+    case "深度报告篇":
+      pageState.ListSdbg[index].List.splice(num, 1);
+      break;
+    case "产业调研纪要篇":
+      pageState.ListCydyjy[index].List.splice(num, 1);
+      break;
+    case "上市公司调研纪要篇":
+      pageState.ListSsgs[index].List.splice(num, 1);
+      break;
+    case "本周晨会精华":
+      pageState.ListBzchjh[index].List.splice(num, 1);
+      break;
+  }
+}
+function chidrenList(list) {
+  const flag = list.some((item) => {
+    if (item.List.length > 0 && !item.ChartPermissionSort) {
+      item.isShow = true;
+      return true;
+    }
+  });
+  return flag;
+}
+function initGetList(list) {
+  list.forEach((item) => {
+    if (!item.List) {
+      item.List = [];
+    }
+  });
+}
+
+onMounted(() => {
+  window.addEventListener("beforeunload", beforeunloadFn);
+  if ($route.query.id) {
+    getDetail();
+  } else {
+    getList();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("beforeunload", beforeunloadFn);
+});
+
+const {
+  ruleForm,
+  rules,
+  ListCydyjy,
+  SortCydyjy,
+  ListSsgs,
+  SortSsgs,
+  isSortCydyjyShow,
+  isSortSsgsShow,
+  isShowStatus
+} = toRefs(pageState);
+</script>
+
 <template>
   <!-- 上周研究汇总添加/编辑 -->
   <div class="add-summarizing">
     <el-card>
-      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm">
         <el-row :gutter="24">
           <el-col :span="12">
             <el-form-item prop="title">
@@ -30,11 +254,13 @@
           <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>
+            <template #content>
+              <div>
+                一级分类的序号请以大写字母A\B\C\D...排序 <br />
+                二级分类请以1\2\3\4...排序
+              </div>
+              <el-icon><InfoFilled /></el-icon>
+            </template>
           </el-tooltip>
         </div>
         <div class="list-ul" v-for="(item, index) in ListCydyjy" :key="item.ChartPermissionId">
@@ -46,7 +272,7 @@
           <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>
+                <RichText v-model="val.Body" :spareId="num + 'froalaCy'" isText="请输入文字描述" />
                 <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
               </div>
               <img @click="deleteListSdbg(item, num, index, '产业调研纪要篇')" src="~@/assets/img/icons/delete-Item.png" />
@@ -79,25 +305,6 @@
           </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>
@@ -108,163 +315,6 @@
   </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";

src/views/rai_manage/components/addSummary.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs } from "vue";
+import { ref, onMounted, reactive, toRefs } from "vue";
 import { raiInterface } from "@/api/api.js";
 import Clipboard from "clipboard";
 import RichText from "./richText.vue";
-// import chartDialogVue from "../../dataEntry_manage/components/chartDialog.vue";
-// import AddIndustryMark from "../components/addIndustryMark.vue";
+import chartDialogVue from "../../dataEntry_manage/components/chartDialog.vue";
+import AddIndustryMark from "../components/addIndustryMark.vue";
 import _ from "lodash";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { Close, Plus } from "@element-plus/icons-vue";
@@ -195,7 +195,7 @@ const submitForm = _.debounce(async function (type) {
     };
     if (type == "预览") {
       if (!pageState.isShowStatus) {
-        let href = `${process.env.CYGX_WEB}/material/info/${$route.query.id}`;
+        let href = `${import.meta.env.VITE_CYGX_WEB}/material/info/${$route.query.id}`;
         window.open(href, "_blank");
       } else {
         sessionStorage.setItem("summaryPre", JSON.stringify(params));

src/views/rai_manage/components/addThisWeek.vue

@@ -1,8 +1,246 @@
+<script setup>
+import { ref, reactive, computed, watch, onMounted, onUnmounted, toRefs } from "vue";
+
+import { InfoFilled } from "@element-plus/icons-vue";
+import { raiInterface } from "@/api/api.js";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+import _ from "lodash";
+import { ElMessageBox, ElMessage } from "element-plus";
+import RichText from "./richText.vue";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  ruleForm: {
+    title: "", //标题
+    author: "", //作者
+    time: "", //时间
+    explain: "", //说明
+    alteration: "", //变更
+  },
+  rules: {
+    title: [{ required: true, message: "请输入标题", trigger: "blur" }],
+    author: [{ required: true, message: "请输入作者", trigger: "blur" }],
+    time: [{ required: true, message: "请输入时间", trigger: "change" }],
+    explain: [{ required: true, message: "请输入摘要", trigger: "blur" }],
+  },
+  //产业调研纪要篇
+  ListCydyjy: [],
+  SortCydyjy: "",
+  //上市公司调研纪要篇
+  ListSsgs: [],
+  SortSsgs: "",
+  //产业调研纪要篇 上市公司调研纪要篇 输入框是否高亮
+  isSortCydyjyShow: true,
+  isSortSsgsShow: true,
+  //深度报告篇
+  ListSdbg: [],
+  SortSdbg: "",
+  //本周晨会精华
+  ListBzchjh: [],
+  SortBzchjh: "",
+  //事件点评
+  ListSjdp: [],
+  SortSjdp: "",
+  isShowStatus: true,
+  isSortSdbgShow: true,
+  isSortBzchjhShow: true,
+  isSortSjdpShow: true,
+});
+
+function beforeunloadFn(e) {
+  e = e || window.event;
+  if (e) {
+    e.returnValue = "关闭提示";
+  }
+  return "关闭提示";
+}
+
+//获取模板
+async function getList() {
+  const res = await raiInterface.chartPermissiondetailTemplate();
+  if (res.Ret === 200) {
+    pageState.ListSdbg = res.Data.ListSdbg;
+    pageState.ListCydyjy = res.Data.ListCydyjy;
+    pageState.ListBzchjh = res.Data.ListBzchjh;
+    pageState.ListSsgs = res.Data.ListSsgs;
+    pageState.SortBzchjh = res.Data.SortBzchjh;
+    pageState.SortCydyjy = res.Data.SortCydyjy;
+    pageState.SortSdbg = res.Data.SortSdbg;
+    pageState.SortSsgs = res.Data.SortSsgs;
+  }
+}
+
+//事件点评 添加
+function addListSjdp(item, indx) {
+  pageState.ListSjdp.push({ Body: "", ReportLink: "" });
+}
+//事件点评 删除
+function deleteListSjdp(item, index) {
+  pageState.ListSjdp.splice(index, 1);
+}
+//获取详情
+async function getDetail() {
+  const res = await raiInterface.researchSummaryDetail({
+    ArticleId: $route.query.id,
+  });
+  if (res.Ret === 200) {
+    pageState.isShowStatus = res.Data.PublishStatus == 0;
+    initGetList(res.Data.ListSdbg);
+    initGetList(res.Data.ListCydyjy);
+    initGetList(res.Data.ListBzchjh);
+    initGetList(res.Data.ListSsgs);
+    pageState.ListSdbg = res.Data.ListSdbg;
+    pageState.ListCydyjy = res.Data.ListCydyjy;
+    pageState.ListBzchjh = res.Data.ListBzchjh;
+    pageState.ListSsgs = res.Data.ListSsgs;
+    pageState.ListSjdp = res.Data.ListSjdp || [];
+    pageState.SortBzchjh = res.Data.SortBzchjh;
+    pageState.SortCydyjy = res.Data.SortCydyjy;
+    pageState.SortSdbg = res.Data.SortSdbg;
+    pageState.SortSjdp = res.Data.SortSjdp;
+    pageState.SortSsgs = res.Data.SortSsgs;
+    pageState.ruleForm = {
+      title: res.Data.Title, //标题
+      author: res.Data.Department, //作者
+      time: res.Data.PublishDate, //时间
+      explain: res.Data.Abstract, //说明
+    };
+  }
+}
+const ruleFormRef = ref(null);
+//保存 发布
+const confirm = _.debounce(function (type) {
+  ruleFormRef.value.validate(async (val) => {
+    if (!val) return;
+    const isFlag = await fnConFirm();
+    if (isFlag) return;
+    let params = {
+      Abstract: pageState.ruleForm.explain,
+      ArticleId: $route.query.id ? Number($route.query.id) : 0,
+      Department: pageState.ruleForm.author,
+      DoType: type == "发布" ? 1 : 0,
+      PublishDate: pageState.ruleForm.time.replace(/\./g, "-"),
+      Title: pageState.ruleForm.title,
+      Content: {
+        ListBzchjh: pageState.ListBzchjh,
+        ListCydyjy: pageState.ListCydyjy,
+        ListSdbg: pageState.ListSdbg,
+        ListSjdp: pageState.ListSjdp,
+        ListSsgs: pageState.ListSsgs,
+        SortBzchjh: pageState.SortBzchjh,
+        SortCydyjy: pageState.SortCydyjy,
+        SortSdbg: pageState.SortSdbg,
+        SortSjdp: pageState.SortSjdp,
+        SortSsgs: pageState.SortSsgs,
+      },
+    };
+    if (type == "预览") {
+      sessionStorage.setItem("pageStateWeekPre", JSON.stringify(params));
+      let { href } = $router.resolve({ name: "预览本周汇总" });
+      window.open(href, "_blank");
+    } else {
+      const res = await raiInterface.researchSummaryPreserveAndPublish(params);
+      if (res.Ret === 200) {
+        ElMessage.success(`${type}成功!`);
+        ruleFormRef.value.resetFields();
+        $router.back();
+      }
+    }
+  });
+}, 500);
+function fnConFirm() {
+  let flag = false;
+  let isSdbg = pageState.ListSdbg.some((item) => item.List.length > 0); //深度报告篇
+  let isCydyjy = pageState.ListCydyjy.some((item) => item.List.length > 0); //产业调研
+  let Bzchjh = pageState.ListBzchjh.some((item) => item.List.length > 0); //本周晨选
+  let Ssgs = pageState.ListSsgs.some((item) => item.List.length > 0); //上司公司
+  pageState.isSortSdbgShow = !(isSdbg && !pageState.SortSdbg);
+  pageState.isSortCydyjyShow = !(isCydyjy && !pageState.SortCydyjy);
+  pageState.isSortBzchjhShow = !(Bzchjh && !pageState.SortBzchjh);
+  pageState.isSortSsgsShow = !(Ssgs && !pageState.SortSsgs); //上司公司
+  pageState.isSortSjdpShow = !(pageState.ListSjdp.length !== 0 && !pageState.SortSjdp);
+  if ((isSdbg && !pageState.SortSdbg) || (isCydyjy && !pageState.SortCydyjy) || (Bzchjh && !pageState.SortBzchjh) || (pageState.ListSjdp.length !== 0 && !pageState.SortSjdp)) {
+    ElMessage.warning("有内容的报告分类和行业分类，序号不能为空");
+    return (flag = true);
+  }
+  let str = new Array(pageState.SortSdbg, pageState.SortCydyjy, pageState.SortBzchjh, pageState.SortSjdp, pageState.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])) {
+      ElMessage.warning("请勿填写重复的序号!");
+      return (flag = true);
+    }
+  }
+  let chidrenSdbg = chidrenList(pageState.ListSdbg);
+  let chidrenCydyjy = chidrenList(pageState.ListCydyjy);
+  let chidrenBzchjh = chidrenList(pageState.ListBzchjh);
+  let chidrenSsgs = chidrenList(pageState.ListSsgs);
+  if (chidrenSdbg || chidrenCydyjy || chidrenBzchjh || chidrenSsgs) {
+    ElMessage.warning("有内容行业分类，序号不能为空");
+    return (flag = true);
+  }
+}
+function initGetList(list) {
+  list.forEach((item) => {
+    if (!item.List) {
+      item.List = [];
+    }
+  });
+}
+//取消
+function cancel() {
+  ruleFormRef.value.resetFields();
+  $router.back();
+}
+
+onMounted(() => {
+  window.addEventListener("beforeunload", beforeunloadFn);
+  if ($route.query.id) {
+    getDetail();
+  } else {
+    getList();
+  }
+});
+
+onUnmounted(() => {
+  window.removeEventListener("beforeunload", beforeunloadFn);
+});
+
+const {
+  ruleForm,
+  rules,
+  //产业调研纪要篇
+  ListCydyjy,
+  SortCydyjy,
+  //上市公司调研纪要篇
+  ListSsgs,
+  SortSsgs,
+  //产业调研纪要篇 上市公司调研纪要篇 输入框是否高亮
+  isSortCydyjyShow,
+  isSortSsgsShow,
+  //深度报告篇
+  ListSdbg,
+  SortSdbg,
+  //本周晨会精华
+  ListBzchjh,
+  SortBzchjh,
+  //事件点评
+  ListSjdp,
+  SortSjdp,
+  isShowStatus,
+  isSortSdbgShow,
+  isSortBzchjhShow,
+  isSortSjdpShow,
+} = toRefs(pageState);
+</script>
+
 <template>
   <!-- 本周研究汇总添加/编辑 -->
   <div class="add-summarizing">
     <el-card>
-      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
+      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm">
         <el-row :gutter="24">
           <el-col :span="12">
             <el-form-item prop="title">
@@ -30,11 +268,13 @@
           <span>深度报告篇</span>
           <input maxlength="1" :class="isSortSdbgShow ? '' : 'red'" v-model="SortSdbg" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
           <el-tooltip class="item" placement="top-start">
-            <div slot="content">
-              一级分类的序号请以大写字母A\B\C\D...排序 <br />
-              二级分类请以1\2\3\4...排序
-            </div>
-            <i class="el-icon-info"></i>
+            <template #content>
+              <div>
+                一级分类的序号请以大写字母A\B\C\D...排序 <br />
+                二级分类请以1\2\3\4...排序
+              </div>
+              <el-icon><InfoFilled /></el-icon>
+            </template>
           </el-tooltip>
         </div>
         <div class="list-ul" v-for="(item, index) in ListSdbg" :key="item.ChartPermissionId">
@@ -46,8 +286,7 @@
           <div class="list-li">
             <div v-for="(val, num) in item.List" :key="num" class="list-children">
               <div class="box">
-                <!-- <el-input type="textarea" :rows="4" placeholder="请输入文字描述" v-model="val.Body"></el-input> -->
-                <froala :id="num + 'froala'" :ref="num + 'froala'" :tag="'textarea'" :config="froalaConfig" v-model="val.Body"></froala>
+                <RichText v-model="val.Body" :spareId="num + 'froalaCy'" isText="请输入文字描述" />
                 <el-input v-model="val.ReportLink" placeholder="请输入报告链接"></el-input>
               </div>
               <img @click="deleteListSdbg(item, num, index, '深度报告篇')" src="~@/assets/img/icons/delete-Item.png" />
@@ -149,30 +388,6 @@
           </div>
         </div>
       </div>
-      <!-- //严选 -->
-      <!-- <div class="content-list">
-        <div class="list-top">
-          <span>买方研选</span>
-          <input maxlength="1" :class="isSortYanxShow ? '' : 'red'" v-model="SortYanx" placeholder="序号" onkeyup="value=value.replace(/[^A-Z]/g,'')" />
-        </div>
-        <div class="list-ul" v-for="(item, index) in ListYanx" :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 + 'froalaJh'" :ref="num + 'froalaJh'" :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="more-button">
         <el-button type="primary" @click="confirm('预览')">预览</el-button>
         <el-button type="primary" @click="confirm('保存')">保存</el-button>
@@ -183,202 +398,6 @@
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import mixinsRichText from "./selection/mixins";
-export default {
-  name: "",
-  components: {},
-  props: {},
-  data() {
-    var that = this;
-    return {
-      //深度报告篇
-      ListSdbg: [],
-      SortSdbg: "",
-      //本周晨会精华
-      ListBzchjh: [],
-      SortBzchjh: "",
-      //事件点评
-      ListSjdp: [],
-      SortSjdp: "",
-      // //研选
-      // ListYanx: [],
-      // SortYanx: "",
-      isShowStatus: true,
-      isSortSdbgShow: true,
-      isSortBzchjhShow: true,
-      isSortSjdpShow: true,
-      // isSortYanxShow: true,
-    };
-  },
-  mixins: [mixinsRichText],
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {
-    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.ListSdbg = res.Data.ListSdbg;
-        this.ListCydyjy = res.Data.ListCydyjy;
-        this.ListBzchjh = res.Data.ListBzchjh;
-        this.ListSsgs = res.Data.ListSsgs;
-        this.SortBzchjh = res.Data.SortBzchjh;
-        this.SortCydyjy = res.Data.SortCydyjy;
-        this.SortSdbg = res.Data.SortSdbg;
-        this.SortSsgs = res.Data.SortSsgs;
-        //研选
-        // this.ListYanx = res.Data.ListYanx;
-        // this.SortYanx = res.Data.SortYanx;
-      }
-    },
-
-    //事件点评 添加
-    addListSjdp(item, indx) {
-      this.ListSjdp.push({ Body: "", ReportLink: "" });
-    },
-    //事件点评 删除
-    deleteListSjdp(item, index) {
-      this.ListSjdp.splice(index, 1);
-    },
-    //获取详情
-    async getDetail() {
-      const res = await raiInterface.researchSummaryDetail({
-        ArticleId: this.$route.query.id,
-      });
-      if (res.Ret === 200) {
-        this.isShowStatus = res.Data.PublishStatus == 0;
-        this.initGetList(res.Data.ListSdbg);
-        this.initGetList(res.Data.ListCydyjy);
-        this.initGetList(res.Data.ListBzchjh);
-        this.initGetList(res.Data.ListSsgs);
-        // this.initGetList(res.Data.ListYanx);
-        //研选
-        // this.ListYanx = res.Data.ListYanx;
-        this.ListSdbg = res.Data.ListSdbg;
-        this.ListCydyjy = res.Data.ListCydyjy;
-        this.ListBzchjh = res.Data.ListBzchjh;
-        this.ListSsgs = res.Data.ListSsgs;
-        this.ListSjdp = res.Data.ListSjdp || [];
-        this.SortBzchjh = res.Data.SortBzchjh;
-        this.SortCydyjy = res.Data.SortCydyjy;
-        this.SortSdbg = res.Data.SortSdbg;
-        this.SortSjdp = res.Data.SortSjdp;
-        this.SortSsgs = res.Data.SortSsgs;
-        // this.SortYanx = res.Data.SortYanx;
-        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,
-          Content: {
-            ListBzchjh: this.ListBzchjh,
-            ListCydyjy: this.ListCydyjy,
-            ListSdbg: this.ListSdbg,
-            ListSjdp: this.ListSjdp,
-            ListSsgs: this.ListSsgs,
-            SortBzchjh: this.SortBzchjh,
-            SortCydyjy: this.SortCydyjy,
-            SortSdbg: this.SortSdbg,
-            SortSjdp: this.SortSjdp,
-            SortSsgs: this.SortSsgs,
-            // ListYanx: this.ListYanx,
-            // SortYanx: this.SortYanx,
-          },
-        };
-        if (type == "预览") {
-          sessionStorage.setItem("thisWeekPre", JSON.stringify(params));
-          let { href } = this.$router.resolve({ name: "预览本周汇总" });
-          window.open(href, "_blank");
-        } else {
-          const res = await raiInterface.researchSummaryPreserveAndPublish(params);
-          if (res.Ret === 200) {
-            this.$message.success(`${type}成功!`);
-            this.$refs["ruleForm"].resetFields();
-            this.$router.back();
-          }
-        }
-      });
-    }, 500),
-    fnConFirm() {
-      let flag = false;
-      let isSdbg = this.ListSdbg.some((item) => item.List.length > 0); //深度报告篇
-      let isCydyjy = this.ListCydyjy.some((item) => item.List.length > 0); //产业调研
-      let Bzchjh = this.ListBzchjh.some((item) => item.List.length > 0); //本周晨选
-      let Ssgs = this.ListSsgs.some((item) => item.List.length > 0); //上司公司
-      // let Yanx = this.ListYanx.some((item) => item.List.length > 0); //严选
-      this.isSortSdbgShow = !(isSdbg && !this.SortSdbg);
-      this.isSortCydyjyShow = !(isCydyjy && !this.SortCydyjy);
-      this.isSortBzchjhShow = !(Bzchjh && !this.SortBzchjh);
-      this.isSortSsgsShow = !(Ssgs && !this.SortSsgs); //上司公司
-      // this.isSortYanxShow = !(Yanx && !this.SortYanx); //严选 输入框
-      this.isSortSjdpShow = !(this.ListSjdp.length !== 0 && !this.SortSjdp);
-      if ((isSdbg && !this.SortSdbg) || (isCydyjy && !this.SortCydyjy) || (Bzchjh && !this.SortBzchjh) || (this.ListSjdp.length !== 0 && !this.SortSjdp)) {
-        this.$message.warning("有内容的报告分类和行业分类，序号不能为空");
-        return (flag = true);
-      }
-      let str = new Array(this.SortSdbg, this.SortCydyjy, this.SortBzchjh, this.SortSjdp, 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 chidrenSdbg = this.chidrenList(this.ListSdbg);
-      let chidrenCydyjy = this.chidrenList(this.ListCydyjy);
-      let chidrenBzchjh = this.chidrenList(this.ListBzchjh);
-      let chidrenSsgs = this.chidrenList(this.ListSsgs);
-      if (chidrenSdbg || chidrenCydyjy || chidrenBzchjh || 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";

src/views/rai_manage/components/focusCollection.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch } from "vue";
+import { ref, watch } from "vue";
 
 import { raiInterface } from "@/api/api.js";
 

src/views/rai_manage/components/selection/mixins.js

@@ -69,84 +69,8 @@ export default {
         ischange: false,
         isPublishloading: false,
       },
-      ruleForm: {
-        title: "", //标题
-        author: "", //作者
-        time: "", //时间
-        explain: "", //说明
-        alteration: "", //变更
-      },
-      rules: {
-        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
-        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
-        time: [{ required: true, message: "请输入时间", trigger: "change" }],
-        explain: [{ required: true, message: "请输入摘要", trigger: "blur" }],
-      },
-      //产业调研纪要篇
-      ListCydyjy: [],
-      SortCydyjy: "",
-      //上市公司调研纪要篇
-      ListSsgs: [],
-      SortSsgs: "",
-      //产业调研纪要篇 上市公司调研纪要篇 输入框是否高亮
-      isSortCydyjyShow: true,
-      isSortSsgsShow: true,
+
     };
   },
-  methods: {
-    //深度报告篇 产业调研纪要篇 本周晨会精华
-    addListSdbg(item, index, type) {
-      switch (type) {
-        case "深度报告篇":
-          this.ListSdbg[index].List.push({ Body: "", ReportLink: "" });
-          break;
-        case "产业调研纪要篇":
-          this.ListCydyjy[index].List.push({ Body: "", ReportLink: "" });
-          break;
-        case "上市公司调研纪要篇":
-          this.ListSsgs[index].List.push({ Body: "", ReportLink: "" });
-          break;
-        case "本周晨会精华":
-          this.ListBzchjh[index].List.push({ Body: "", ReportLink: "" });
-        // case "研选":
-        // this.ListYanx[index].List.push({ Body: "", ReportLink: "" });
-          break;
-      }
-    },
-    //深度报告篇 产业调研纪要篇 本周晨会精华
-    deleteListSdbg(item, num, index, type) {
-      switch (type) {
-        case "深度报告篇":
-          this.ListSdbg[index].List.splice(num, 1);
-          break;
-        case "产业调研纪要篇":
-          this.ListCydyjy[index].List.splice(num, 1);
-          break;
-        case "上市公司调研纪要篇":
-          this.ListSsgs[index].List.splice(num, 1);
-          break;
-        case "本周晨会精华":
-          this.ListBzchjh[index].List.splice(num, 1);
-          // case "研选":
-          // this.ListYanx[index].List.splice(num, 1);
-          break;
-      }
-    },
-    chidrenList(list) {
-      const flag = list.some((item) => {
-        if (item.List.length > 0 && !item.ChartPermissionSort) {
-          this.$set(item, "isShow", true);
-          return true;
-        }
-      });
-      return flag;
-    },
-    initGetList(list) {
-      list.forEach((item) => {
-        if (!item.List) {
-          item.List = [];
-        }
-      });
-    },
-  },
+
 };

src/views/rai_manage/components/shortcutDialog.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, watch, onMounted, reactive, toRefs, watch } from "vue";
 import { raiInterface } from "@/api/api.js";
 const dynamicItem = ref([]);
 
@@ -12,7 +12,7 @@ const props = defineProps({
 
 const $emit = defineEmits();
 
-computed(
+watch(
   () => shortcutIsDialog.value,
   () => {
     if (props.shortcutIsDialog) {

src/views/rai_manage/reportManage/appletsReport.vue

@@ -54,9 +54,7 @@ const generaitondialogVisib = ref(false); //留言的弹框
 const generaitonId = ref("");
 const generaitonType = ref("已归类");
 
-const sta = computed(() => {
-  return status.value === 0 ? status.value : status.value === 1 ? status.value : 2;
-});
+
 const exportPvUv = computed(() => {
   return import.meta.env.VITE_APP_API_ROOT + "/cygx/summaryManage/articleHistoryExport?ArticleId=";
 });
@@ -380,7 +378,7 @@ function cutClick() {
 //文章详情
 async function lookDetail(item) {
   if (item.PublishStatus === 1) {
-    let href = `${process.env.CYGX_WEB}/material/info/${item.ArticleId}`;
+    let href = `${import.meta.env.VITE_CYGX_WEB}/material/info/${item.ArticleId}`;
     window.open(href, "_blank");
   } else {
     const res = await raiInterface.reportArticleDetail({ ArticleId: item.ArticleId });

src/views/rai_manage/reportManage/components/addHaveReport.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, onMounted, reactive, toRefs, watch } from "vue";
 import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";

src/views/rai_manage/reportManage/components/collectFansDlg.vue

@@ -1,79 +1,81 @@
+<script setup>
+import { ref, watch } from "vue";
+import { raiInterface } from "@/api/api.js";
+
+const props = defineProps({
+  iscollectFansDlgShow: {
+    type: Boolean,
+    default: false,
+  },
+  collectFansDlgText: {
+    type: String,
+    default: "",
+  },
+  collectFansDlgItem: {
+    type: Object,
+    default: "",
+  },
+});
+
+watch(
+  () => props.iscollectFansDlgShow,
+  (newVal) => {
+    newVal && getTableList();
+  }
+);
+
+const $emit = defineEmits();
+// 关闭弹框
+function handleClose() {
+  $emit("update:iscollectFansDlgShow", false);
+  $emit("update:collectFansDlgText", "");
+  $emit("update:collectFansDlgItem", {});
+}
+
+const tableData = ref([]);
+
+// 获取表格数据
+async function getTableList() {
+  const res =
+    props.collectFansDlgText == "收藏详情"
+      ? await raiInterface.getYanxuanSpecialCollect({
+          SpecialId: props.collectFansDlgItem.Id,
+        })
+      : await raiInterface.getYanxuanSpecialFans({
+          SpecialAuthorId: props.collectFansDlgItem.Id,
+        });
+  if (res.Ret === 200) {
+   tableData.value = res.Data.List || [];
+  }
+}
+</script>
+
 <template>
   <div class="container">
     <!-- 选择图片的弹框 -->
-    <el-dialog :title="collectFansDlgText" :visible.sync="iscollectFansDlgShow" width="50%" :before-close="handleClose" draggable :close-on-click-modal="false" :modal-append-to-body="false" center>
+    <el-dialog
+      :title="props.collectFansDlgText"
+      v-model="props.iscollectFansDlgShow"
+      width="50%"
+      :before-close="handleClose"
+      draggable
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      center
+    >
       <div>
         <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border>
           <el-table-column prop="RealName" align="center" label="姓名"></el-table-column>
           <el-table-column prop="CompanyName" align="center" label="公司名称"></el-table-column>
           <el-table-column prop="SellerName" align="center" label="所属销售"></el-table-column>
-          <el-table-column width="160" prop="CreateTime" align="center" :label="this.collectFansDlgText == '收藏详情' ? '收藏时间' : '关注时间'"></el-table-column>
+          <el-table-column width="160" prop="CreateTime" align="center" :label="collectFansDlgText == '收藏详情' ? '收藏时间' : '关注时间'"></el-table-column>
         </el-table>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="handleClose">关闭</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="handleClose">关闭</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
-
-<script>
-import { raiInterface } from "@/api/api.js";
-
-export default {
-  name: "",
-  components: {},
-  props: {
-    iscollectFansDlgShow: {
-      type: Boolean,
-      default: false,
-    },
-    collectFansDlgText: {
-      type: String,
-      default: "",
-    },
-    collectFansDlgItem: {
-      type: Object,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      tableData: [],
-    };
-  },
-  computed: {},
-  watch: {
-    iscollectFansDlgShow: {
-      handler(newVal) {
-        newVal && this.getTableList();
-      },
-    },
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    // 关闭弹框
-    handleClose() {
-      this.$emit("update:iscollectFansDlgShow", false);
-      this.$emit("update:collectFansDlgText", "");
-      this.$emit("update:collectFansDlgItem", {});
-    },
-    // 获取表格数据
-    async getTableList() {
-      const res =
-        this.collectFansDlgText == "收藏详情"
-          ? await raiInterface.getYanxuanSpecialCollect({
-              SpecialId: this.collectFansDlgItem.Id,
-            })
-          : await raiInterface.getYanxuanSpecialFans({
-              SpecialAuthorId: this.collectFansDlgItem.Id,
-            });
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List || [];
-      }
-    },
-  },
-};
-</script>
-<style scoped lang="scss"></style>

src/views/rai_manage/reportManage/components/roadshowApplyDlg.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, onMounted, reactive, toRefs, watch } from "vue";
 import { raiInterface } from "@/api/api.js";
 
 const props = defineProps({

src/views/rai_manage/reportManage/components/specialDlg.vue

@@ -1,6 +1,106 @@
+<script setup>
+import { ref } from "vue";
+import { raiInterface } from "@/api/api.js";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+const props = defineProps({
+  addAuthorDlgVisible: {
+    default: false,
+    type: Boolean,
+  },
+  submitRejectDlgVisible: {
+    default: false,
+    type: Boolean,
+  },
+  submitRejectId: {
+    default: 0,
+    type: Number,
+  },
+});
+const keyAuthor = ref("");
+const isShowKey = ref(true);
+
+const $emit = defineEmits(["updateParent", "updateGetSpecialList"]);
+
+// 关闭添加作者的弹框
+function handleCloseAuthor() {
+  keyAuthor.value = "";
+  $emit("update:addAuthorDlgVisible", false);
+}
+
+const companyList = ref([""]);
+// 作者弹框的搜索事件
+async function querySearchHandler(query, cb) {
+  cb([]);
+  if (!query) return;
+  const res = await raiInterface.activitySignupUserList({ KeyWord: query });
+  if (res.Ret === 200) {
+    console.log(res);
+    let arr =
+      res.Data.List && res.Data.List.length
+        ? res.Data.List.map((item) => {
+            return {
+              ...item,
+              value: item.RealName + " - " + item.Mobile + " - " + item.CompanyName,
+            };
+          })
+        : [];
+    companyList.value = arr;
+    cb(arr);
+  }
+}
+// 作者添加的事件
+async function addAuthorHandler() {
+  const isKey = companyList.value.some((item) => item.value === keyAuthor.value);
+  if (!isKey) return ElMessage.error("请输入客户姓名!");
+  let params = companyList.value.filter((item) => item.value === keyAuthor.value);
+  const res = await raiInterface.yanxuan_specialAuthorAdd({
+    UserId: params[0].UserId,
+    RealName: params[0].RealName,
+    Mobile: params[0].Mobile,
+  });
+  if (res.Ret === 200) {
+    handleCloseAuthor();
+    ElMessage.success("添加成功！");
+    $emit("updateParent");
+  }
+}
+
+/* **************************************************** */
+const textReject = ref("");
+// 驳回的弹框关闭事件
+function handleCloseReject() {
+  textReject.value = "";
+  $emit("update:submitRejectDlgVisible", false);
+}
+
+// 驳回的弹框确定事件
+async function submitRejectHandler() {
+  if (!textReject.value) return ElMessage.error("请输入驳回原因");
+  // 提交成功后刷新页面
+  const res = await raiInterface.yanxuan_specialEnable({
+    Id: props.submitRejectId,
+    Status: 2,
+    Reason: textReject.value,
+  });
+  if (res.Ret === 200) {
+    handleCloseReject();
+    ElMessage.success("操作成功！");
+    $emit("updateGetSpecialList");
+  }
+}
+function changeHandler() {
+  if (!keyAuthor.value) return;
+  isShowKey.value = companyList.value.some((item) => item.value === keyAuthor.value);
+}
+function selectCompany() {
+  isShowKey.value = companyList.value.some((item) => item.value === keyAuthor.value);
+}
+</script>
+
 <template>
   <div class="container special-dlg-container">
-    <el-dialog title="新建专栏作者" :visible.sync="addAuthorDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseAuthor">
+    <el-dialog title="新建专栏作者" v-model="props.addAuthorDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseAuthor">
       <el-autocomplete
         class="inline-input"
         style="width: 100%; margin-bottom: 20px"
@@ -12,125 +112,25 @@
         :trigger-on-focus="false"
       ></el-autocomplete>
       <p v-show="!isShowKey" style="color: #f00">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCloseAuthor">取 消</el-button>
-        <el-button type="primary" @click="addAuthorHandler">确 定</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleCloseAuthor">取 消</el-button>
+          <el-button type="primary" @click="addAuthorHandler">确 定</el-button>
+        </span>
+      </template>
     </el-dialog>
-    <el-dialog title="驳回" :visible.sync="submitRejectDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseReject">
+    <el-dialog title="驳回" v-model="props.submitRejectDlgVisible" width="500px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleCloseReject">
       <el-input type="textarea" :rows="4" style="margin-bottom: 20px" v-model.trim="textReject" placeholder="请输入驳回原因"></el-input>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="handleCloseReject">取 消</el-button>
-        <el-button type="primary" @click="submitRejectHandler">确 定</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleCloseReject">取 消</el-button>
+          <el-button type="primary" @click="submitRejectHandler">确 定</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: {},
-  props: {
-    addAuthorDlgVisible: {
-      default: false,
-      type: Boolean,
-    },
-    submitRejectDlgVisible: {
-      default: false,
-      type: Boolean,
-    },
-    submitRejectId: {
-      default: 0,
-      type: Number,
-    },
-  },
-  data() {
-    return {
-      keyAuthor: "",
-      companyList: [],
-      textReject: "",
-      isShowKey: true,
-    };
-  },
-  computed: {},
-  watch: {},
-  created() {},
-  mounted() {},
-  methods: {
-    // 关闭添加作者的弹框
-    handleCloseAuthor() {
-      this.keyAuthor = "";
-      this.$emit("update:addAuthorDlgVisible", false);
-    },
-    // 作者弹框的搜索事件
-    async querySearchHandler(query, cb) {
-      cb([]);
-      if (!query) return;
-      const res = await raiInterface.activitySignupUserList({ KeyWord: query });
-      if (res.Ret === 200) {
-        console.log(res);
-        let arr =
-          res.Data.List && res.Data.List.length
-            ? res.Data.List.map((item) => {
-                return {
-                  ...item,
-                  value: item.RealName + " - " + item.Mobile + " - " + item.CompanyName,
-                };
-              })
-            : [];
-        this.companyList = arr;
-        cb(arr);
-      }
-    },
-    // 作者添加的事件
-    async addAuthorHandler() {
-      const isKey = this.companyList.some((item) => item.value === this.keyAuthor);
-      if (!isKey) return this.$message.error("请输入客户姓名!");
-      let params = this.companyList.filter((item) => item.value === this.keyAuthor);
-      const res = await raiInterface.yanxuan_specialAuthorAdd({
-        UserId: params[0].UserId,
-        RealName: params[0].RealName,
-        Mobile: params[0].Mobile,
-      });
-      if (res.Ret === 200) {
-        this.handleCloseAuthor();
-        this.$message.success("添加成功！");
-        this.$parent.getyanxuanReportSpecial();
-      }
-    },
-    /* **************************************************** */
-    // 驳回的弹框关闭事件
-    handleCloseReject() {
-      this.textReject = "";
-      this.$emit("update:submitRejectDlgVisible", false);
-    },
-    // 驳回的弹框确定事件
-    async submitRejectHandler() {
-      if (!this.textReject) return this.$message.error("请输入驳回原因");
-      // 提交成功后刷新页面
-      const res = await raiInterface.yanxuan_specialEnable({
-        Id: this.submitRejectId,
-        Status: 2,
-        Reason: this.textReject,
-      });
-      if (res.Ret === 200) {
-        this.handleCloseReject();
-        this.$message.success("操作成功！");
-        this.$parent.getSpecialList();
-      }
-    },
-    changeHandler() {
-      if (!this.keyAuthor) return;
-      this.isShowKey = this.companyList.some((item) => item.value === this.keyAuthor);
-    },
-    selectCompany() {
-      this.isShowKey = this.companyList.some((item) => item.value === this.keyAuthor);
-    },
-  },
-};
-</script>
 <style lang="scss">
 .special-dlg-container {
   .el-dialog .el-input {

src/views/rai_manage/reportManage/components/yanXuanLable.js

@@ -128,7 +128,6 @@ export const AuthorTableColums = [
   {
     label: "专栏名称",
     key: "SpecialName",
-    // widthsty: 200,
   },
   {
     label: "作者昵称",

src/views/rai_manage/reportManage/internalTesting.vue

@@ -12,7 +12,7 @@ export default defineComponent({
 </script>
 
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, onMounted, reactive, toRefs, watch } from "vue";
 import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";

src/views/rai_manage/reportManage/morningMeetingManage.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref, computed, onMounted, reactive, toRefs, watch } from "vue";
+import { ref, onMounted, reactive, toRefs, watch } from "vue";
 
 import { Calendar, Search, InfoFilled } from "@element-plus/icons-vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
-import moment from 'moment'; 
+import moment from "moment";
 
 const $route = useRoute();
 const $router = useRouter();

src/views/rai_manage/reportManage/reportChoiceness.vue

@@ -54,7 +54,7 @@ async function getList() {
   const res = await raiInterface.reportSelectionList({
     CurrentIndex: pageState.page_no,
     PageSize: pageState.PageSize,
-    PublishStatus: pageState.sta - 0,
+    PublishStatus: sta.value - 0,
     CategoryName: pageState.industry,
     StartDate: pageState.issueTime[0],
     EndDate: pageState.issueTime[1],

src/views/rai_manage/reportManage/roadshowEssence.vue

@@ -60,7 +60,7 @@ async function getList() {
   const res = await raiInterface.roadshowEssenceList({
     CurrentIndex: pageState.page_no,
     PageSize: pageState.PageSize,
-    PublishStatus: pageState.sta - 0,
+    PublishStatus: sta.value - 0,
     ChartPermissionId: pageState.industry,
     StartDate: pageState.issueTime[0],
     EndDate: pageState.issueTime[1],

src/views/rai_manage/reportManage/summaryManage.vue

@@ -163,7 +163,7 @@ function chartPermission() {
 //文章详情
 async function lookDetail(item) {
   if (item.PublishStatus === 1) {
-    let href = `${process.env.CYGX_WEB}/material/info/${item.ArticleId}`;
+    let href = `${import.meta.env.VITE_CYGX_WEB}/material/info/${item.ArticleId}`;
     window.open(href, "_blank");
   } else {
     const res = await raiInterface.getsummaryManagedetail({ ArticleId: item.ArticleId });
@@ -180,7 +180,7 @@ function getsummaryManageList() {
     .getsummaryManageList({
       CurrentIndex: pageState.page_no,
       PageSize: pageState.PageSize,
-      PublishStatus: pageState.sta - 0,
+      PublishStatus: sta.value - 0,
       ArticleTypeId: pageState.industry,
       StartDate: pageState.issueTime[0],
       EndDate: pageState.issueTime[1],

src/views/rai_manage/reportManage/tacticsTimeLine.vue

@@ -1,3 +1,177 @@
+<script setup>
+import { raiInterface } from "@/api/api.js";
+import mPage from "@/components/mPage.vue";
+import { onMounted, reactive, ref, toRefs } from "vue";
+
+import { ElMessageBox, ElMessage } from "element-plus";
+
+
+const pageState = reactive({
+  page_no: 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  visibleRange: 3, //可见范围
+  dataTableList: [],
+  statusValue: "",
+  statusOptions: [
+    {
+      label: "显示",
+      value: 1,
+    },
+    {
+      label: "隐藏",
+      value: 0,
+    },
+  ],
+  addOfEditDialog: false, //添加或者编辑
+  addOfEditText: "",
+  dataForm: {
+    Link: "", // 链接
+    PublishTime: "", //日期
+    Content: "", //文本内容
+    TimeLineId: 0,
+  },
+  dataRules: {
+    PublishTime: [{ required: true, message: "请选择日期", trigger: "change" }],
+    Content: [{ required: true, message: "请输入文本内容", trigger: "blur" }],
+  },
+  froalaConfig: {
+    toolbarButtons: ["bold", "italic", "underline", "strikeThrough", "insertHR", "fontSize", "align", "undo", "redo"],
+    height: 200,
+    fontSizeDefaultSelection: "16",
+    quickInsertEnabled: false,
+    theme: "dark", //主题
+    placeholderText: "请输入文本内容",
+    language: "zh_cn",
+    events: {
+      initialized: function () {
+        this.toolbar.hide();
+      },
+    },
+  },
+});
+
+// 获取数据
+async function getDataList() {
+  const res = await raiInterface.getTacticsTimeLineList({
+    PageSize: pageState.PageSize,
+    CurrentIndex: pageState.page_no,
+    Status: pageState.statusValue === 0 || pageState.statusValue === 1 ? pageState.statusValue : 2,
+  });
+  if (res.Ret === 200) {
+    pageState.total = res.Data.Paging.Totals || 0;
+    pageState.dataTableList = res.Data.List;
+    pageState.visibleRange = res.Data.Status;
+  }
+}
+// 添加
+function addReport() {
+  pageState.addOfEditDialog = true;
+  pageState.addOfEditText = "添加";
+}
+// 编辑
+function editReport(item) {
+  pageState.dataForm = {
+    Link: item.Link, // 链接
+    PublishTime: item.PublishTime.replace(/\./g, "-"), //日期
+    Content: item.Content, //文本内容
+    TimeLineId: item.TimeLineId,
+  };
+  pageState.addOfEditText = "编辑";
+  pageState.addOfEditDialog = true;
+}
+let ruleForm = ref(null);
+// 关闭弹框
+function handleClose() {
+  ruleForm.value.resetFields();
+  pageState.addOfEditDialog = false;
+  pageState.dataForm = {
+    Link: "", // 链接
+    PublishTime: "", //日期
+    Content: "", //文本内容
+    TimeLineId: 0,
+  };
+}
+// 弹框的保存事件
+function confirmPerson() {
+  ruleForm.value.validate(async (valid) => {
+    if (valid) {
+      pageState.dataForm.Content = pageState.dataForm.Content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
+      const res = await raiInterface.tacticsTimeLinePreserveAndPublish({
+        ...pageState.dataForm,
+      });
+      if (res.Ret === 200) {
+        ElMessage.success("操作成功");
+        handleClose();
+        getDataList();
+      }
+    }
+  });
+}
+// 导出pv uv
+function exportPvUv(item) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/tacticsTimeLine/PvExport?TimeLineId=" + item.TimeLineId + "&" + localStorage.getItem("auth") || "";
+  return url;
+}
+// 删除
+function deleteBtn(item) {
+  ElMessageBox.confirm(`确定删除这条内容吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      const res = await raiInterface.tacticsTimeLineDelete({ TimeLineId: item.TimeLineId });
+      if (res.Ret === 200) {
+        ElMessage.success("删除成功！");
+        let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
+        if (pageState.page_no > page_num) {
+          pageState.page_no = page_num;
+        }
+        getDataList();
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消删除`,
+      });
+    });
+}
+// 分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getDataList();
+}
+// 选择的change 事件
+function listChangeHandel() {
+  pageState.page_no = 1;
+  getDataList();
+}
+// 一键发布/取消发布报告接口
+async function tacticsTimeLineAllCancel() {
+  const res = await raiInterface.tacticsTimeLineAllCancel();
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功");
+  }
+  getDataList();
+}
+// 发布/取消发布报告 显示隐藏
+async function tacticsTimeLineCancel(item) {
+  const res = await raiInterface.tacticsTimeLineCancel({
+    TimeLineId: item.TimeLineId,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功");
+  }
+  getDataList();
+}
+onMounted(() => {
+  getDataList();
+});
+const { page_no, total, PageSize, visibleRange, dataTableList, statusValue, statusOptions, addOfEditDialog, addOfEditText, dataForm, dataRules, froalaConfig } = toRefs(pageState);
+</script>
+
 <template>
   <div class="container tactics-time-line">
     <!-- 头部 -->
@@ -21,13 +195,13 @@
           <template #header>
             <div style="text-align: center">文本</div>
           </template>
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span v-html="row.Content"></span>
           </template>
         </el-table-column>
         <el-table-column prop="Title" label="报告/图表标题" min-width="250" align="center"> </el-table-column>
         <el-table-column label="pv/uv" width="100" align="center">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <div class="pv-uv-download">
               <span>{{ row.Pv }}/{{ row.Uv }}</span>
               <a :href="exportPvUv(row)" download>
@@ -37,7 +211,7 @@
           </template>
         </el-table-column>
         <el-table-column label="状态" width="180" align="center">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <el-radio-group v-model="row.Status" @input="tacticsTimeLineCancel(row)">
               <el-radio :label="0">隐藏</el-radio>
               <el-radio :label="1">显示</el-radio>
@@ -47,7 +221,7 @@
 
         <el-table-column prop="ModifyTime" label="更新时间" width="180" align="center"> </el-table-column>
         <el-table-column label="操作" width="100" align="center">
-          <template slot-scope="{ row }">
+          <template #default="{ row }">
             <span class="editsty" @click="editReport(row)">编辑&nbsp;&nbsp;</span>
             <span v-if="row.Status === 0" class="deletesty" @click="deleteBtn(row)">删除</span>
           </template>
@@ -58,28 +232,13 @@
       </el-col>
     </el-card>
     <!-- 弹框部分 -->
-    <el-dialog
-      :visible.sync="addOfEditDialog"
-      :title="addOfEditText"
-      draggable
-      :close-on-click-modal="false"
-      :modal-append-to-body="false"
-      center
-      width="661px"
-      @close="handleClose"
-    >
+    <el-dialog v-model="addOfEditDialog" :title="addOfEditText" draggable :close-on-click-modal="false" :modal-append-to-body="false" center width="661px" @close="handleClose">
       <el-form :model="dataForm" :rules="dataRules" ref="ruleForm">
         <el-form-item prop="PublishTime">
-          <el-date-picker
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择日期"
-            v-model="dataForm.PublishTime"
-            style="width: 100%"
-          ></el-date-picker>
+          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="请选择日期" v-model="dataForm.PublishTime" style="width: 100%"></el-date-picker>
         </el-form-item>
         <el-form-item prop="Content">
-          <div class="fr-wrapper">
+          <div class="fr-wrapper" style="width: 100%">
             <froala id="froala-editor" ref="froalaEditor" :tag="'textarea'" :config="froalaConfig" v-model="dataForm.Content"></froala>
           </div>
         </el-form-item>
@@ -87,194 +246,16 @@
           <el-input type="textarea" placeholder="请输入报告或图表链接（网页版详情链接）" v-model="dataForm.Link"></el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="confirmPerson">确定</el-button>
-        <el-button @click="handleClose">取消</el-button>
-      </span>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button type="primary" @click="confirmPerson">确定</el-button>
+          <el-button @click="handleClose">取消</el-button>
+        </span>
+      </template>
     </el-dialog>
   </div>
 </template>
 
-<script>
-import { raiInterface } from "@/api/api.js";
-import mPage from "@/components/mPage.vue";
-
-export default {
-  name: "",
-  components: {
-    mPage,
-  },
-  data() {
-    var that = this;
-    return {
-      page_no: 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      visibleRange: 3, //可见范围
-      dataTableList: [],
-      statusValue: "",
-      statusOptions: [
-        {
-          label: "显示",
-          value: 1,
-        },
-        {
-          label: "隐藏",
-          value: 0,
-        },
-      ],
-      addOfEditDialog: false, //添加或者编辑
-      addOfEditText: "",
-      dataForm: {
-        Link: "", // 链接
-        PublishTime: "", //日期
-        Content: "", //文本内容
-        TimeLineId: 0,
-      },
-      dataRules: {
-        PublishTime: [{ required: true, message: "请选择日期", trigger: "change" }],
-        Content: [{ required: true, message: "请输入文本内容", trigger: "blur" }],
-      },
-      editor: null,
-      froalaConfig: {
-        toolbarButtons: ["bold", "italic", "underline", "strikeThrough", "insertHR", "fontSize", "align", "undo", "redo"],
-        height: 200,
-        fontSizeDefaultSelection: "16",
-        quickInsertEnabled: false,
-        theme: "dark", //主题
-        placeholderText: "请输入文本内容",
-        language: "zh_cn",
-        events: {
-          initialized: function () {
-            that.editor = this;
-            that.editor.toolbar.hide();
-          },
-        },
-      },
-    };
-  },
-  mounted() {
-    this.getDataList();
-  },
-  computed: {},
-  methods: {
-    // 获取数据
-    async getDataList() {
-      const res = await raiInterface.getTacticsTimeLineList({
-        PageSize: this.PageSize,
-        CurrentIndex: this.page_no,
-        Status: this.statusValue === 0 || this.statusValue === 1 ? this.statusValue : 2,
-      });
-      if (res.Ret === 200) {
-        this.total = res.Data.Paging.Totals || 0;
-        this.dataTableList = res.Data.List;
-        this.visibleRange = res.Data.Status;
-      }
-    },
-    // 添加
-    addReport() {
-      this.addOfEditDialog = true;
-      this.addOfEditText = "添加";
-    },
-    // 编辑
-    editReport(item) {
-      this.dataForm = {
-        Link: item.Link, // 链接
-        PublishTime: item.PublishTime.replace(/\./g, "-"), //日期
-        Content: item.Content, //文本内容
-        TimeLineId: item.TimeLineId,
-      };
-      this.addOfEditText = "编辑";
-      this.addOfEditDialog = true;
-    },
-    // 关闭弹框
-    handleClose() {
-      this.$refs.ruleForm.resetFields();
-      this.addOfEditDialog = false;
-      this.dataForm = {
-        Link: "", // 链接
-        PublishTime: "", //日期
-        Content: "", //文本内容
-        TimeLineId: 0,
-      };
-    },
-    // 弹框的保存事件
-    confirmPerson() {
-      this.$refs.ruleForm.validate(async (valid) => {
-        if (valid) {
-          this.dataForm.Content = this.dataForm.Content.replace(/<p data-f-id=\"pbf\".*?<\/p>/g, "");
-          const res = await raiInterface.tacticsTimeLinePreserveAndPublish({
-            ...this.dataForm,
-          });
-          if (res.Ret === 200) {
-            this.$message.success("操作成功");
-            this.handleClose();
-            this.getDataList();
-          }
-        }
-      });
-    },
-    // 导出pv uv
-    exportPvUv(item) {
-      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/tacticsTimeLine/PvExport?TimeLineId=" + item.TimeLineId + "&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-    // 删除
-    deleteBtn(item) {
-      this.$confirm(`确定删除这条内容吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiInterface.tacticsTimeLineDelete({ TimeLineId: item.TimeLineId });
-          if (res.Ret === 200) {
-            this.$message.success("删除成功！");
-            let page_num = Math.ceil((this.total - 1) / this.PageSize);
-            if (this.page_no > page_num) {
-              this.page_no = page_num;
-            }
-            this.getDataList();
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消删除`,
-          });
-        });
-    },
-    // 分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getDataList();
-    },
-    // 选择的change 事件
-    listChangeHandel() {
-      this.page_no = 1;
-      this.getDataList();
-    },
-    // 一键发布/取消发布报告接口
-    async tacticsTimeLineAllCancel() {
-      const res = await raiInterface.tacticsTimeLineAllCancel();
-      if (res.Ret === 200) {
-        this.$message.success("操作成功");
-      }
-      this.getDataList();
-    },
-    // 发布/取消发布报告 显示隐藏
-    async tacticsTimeLineCancel(item) {
-      const res = await raiInterface.tacticsTimeLineCancel({
-        TimeLineId: item.TimeLineId,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功");
-      }
-      this.getDataList();
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .tactics-time-line {
   .pv-uv-download {

src/views/rai_manage/reportManage/theLastWeek.vue

@@ -1,3 +1,181 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/editSummarizing") {
+      sessionStorage.removeItem("theLastWeek");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { onMounted, reactive, ref, toRefs, computed } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  page_no: sessionStorage.getItem("theLastWeek") ? JSON.parse(sessionStorage.getItem("theLastWeek")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  //industry: "", //行业
+  status: "", //发布状态
+  issueTime: "", //时间
+  //chartPermissionList: [], //行业的数组
+  options: [
+    { id: 0, name: "未发布" },
+    { id: 1, name: "已发布" },
+  ], //发布的数组
+  tableData: [], //表格
+});
+
+const sta = computed(() => {
+  return pageState.status === 0 ? pageState.status : pageState.status === 1 ? pageState.status : 2;
+});
+
+//获取list数组
+async function getList() {
+  const res = await raiInterface.minutesSummaryList({
+    CurrentIndex: pageState.page_no,
+    PageSize: pageState.PageSize,
+    PublishStatus: sta.value - 0,
+    CategoryName: pageState.industry,
+    StartDate: pageState.issueTime[0],
+    EndDate: pageState.issueTime[1],
+  });
+  if (res.Ret === 200) {
+    pageState.tableData = res.Data.List;
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+//导出pv uv
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=4&" + localStorage.getItem("auth") || "";
+  return url;
+}
+//选择后的事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getList();
+}
+//发布，取消发布，删除
+function operationBtn(id, value) {
+  ElMessageBox.confirm(`确定${value}该文章吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      if (value == "删除") {
+        const res = await raiInterface.minutesSummaryDelete({ ArticleId: id });
+        if (res.Ret === 200) {
+          ElMessage.success("删除成功！");
+          let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
+          if (pageState.page_no > page_num) {
+            pageState.page_no = page_num;
+          }
+          getList();
+        }
+      } else {
+        const res = await raiInterface.minutesSummaryPublishAndCancel({ ArticleId: id });
+        if (res.Ret === 200) {
+          ElMessage.success(value + "成功！");
+          getList();
+        }
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+//文章详情
+function goDetail(row) {
+  let url =
+    process.env.NODE_ENV === "production"
+      ? "https://web.hzinsights.com/summary/3"
+      : process.env.NODE_ENV === "test"
+      ? "https://clpttest.hzinsights.com/summary/3"
+      : "https://clpttest.hzinsights.com/summary/3";
+  let href = `${url}/${row.ArticleId}`;
+  window.open(href, "_blank");
+}
+//去往编辑页面
+function editReport(id) {
+  $router.push({
+    path: "/editSummarizing",
+    query: { id },
+  });
+}
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getList();
+}
+function emailGroup(row) {
+  ElMessageBox.confirm("确定要对正式/试用客户群发该报告吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      const res = await raiInterface.minutesSummarySendMail({
+        ArticleId: row.ArticleId,
+      });
+      if (res.Ret === 200) {
+        ElMessage.success("发送成功");
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消`,
+      });
+    });
+}
+// 可见范围
+async function reportVisibleRange(item) {
+  const res = await raiInterface.minutesSummaryVisibleRange({
+    ArticleId: item.ArticleId,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功");
+    getList();
+  } else {
+    getList();
+  }
+}
+onMounted(() => {
+  if (sessionStorage.getItem("theLastWeek")) {
+    const initialize = JSON.parse(sessionStorage.getItem("theLastWeek"));
+    pageState.status = initialize.status;
+    pageState.issueTime = initialize.issueTime;
+  }
+  getList();
+});
+onBeforeRouteLeave((to, from, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    status: pageState.status, //状态
+    issueTime: pageState.issueTime, //时间
+  };
+  sessionStorage.setItem("theLastWeek", JSON.stringify(backData));
+  next();
+});
+
+const { page_no, total, PageSize, status, issueTime, options, tableData } = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-the-last-week">
     <!-- 上周研究汇总 -->
@@ -14,8 +192,8 @@
         </div>
       </div>
       <el-table :data="tableData" style="width: 100%" border>
-        <el-table-column prop="" align="center" label="标题" min-width="260">
-          <template slot-scope="scope">
+        <el-table-column prop="Title" align="center" label="标题" min-width="260">
+          <template #default="scope">
             <span class="editsty" @click="goDetail(scope.row)">{{ scope.row.Title }}</span>
           </template>
         </el-table-column>
@@ -23,12 +201,24 @@
         <el-table-column prop="PublishDate" align="center" label="发布时间" min-width="118"></el-table-column>
         <el-table-column prop="LastUpdatedTime" align="center" label="更新时间" min-width="165"></el-table-column>
         <el-table-column prop="" align="center" label="发布状态" width="118">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.PublishStatus == 1 ? "已发布" : "未发布" }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="135" label="PV / UV" align="center" :render-header="renderHeader">
-          <template slot-scope="scope">
+        <el-table-column width="135" label="PV / UV" align="center">
+          <template #header>
+            <div style="display: flex; align-items: center; justify-content: center">
+              <p style="margin-right: 5px">PV / UV</p>
+              <el-tooltip placement="top-start">
+                <template #content>
+                  <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
+                  <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
+                </template>
+                <el-icon><InfoFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
             <div class="pv-uv-download">
               <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
               <a :href="exportPvUv(scope.row.ArticleId)" download>
@@ -38,21 +228,21 @@
           </template>
         </el-table-column>
         <el-table-column key="VisibleRange" width="156" label="可见范围" align="center">
-          <template slot-scope="{ row }" v-if="row.PublishStatus === 1">
-            <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
-              <el-radio :label="1">全部</el-radio>
-              <el-radio :label="0">内部</el-radio>
-            </el-radio-group>
+          <template #default="{ row }">
+            <div v-if="row.PublishStatus === 1">
+              <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
+                <el-radio :label="1">全部</el-radio>
+                <el-radio :label="0">内部</el-radio>
+              </el-radio-group>
+            </div>
           </template>
         </el-table-column>
         <el-table-column align="center" label="操作" min-width="168">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span v-if="scope.row.PublishStatus !== 1" class="editsty" @click="operationBtn(scope.row.ArticleId, '发布')">发布&nbsp;&nbsp;</span>
             <span v-else class="editsty" @click="operationBtn(scope.row.ArticleId, '取消发布')">取消发布&nbsp;&nbsp;</span>
             <span class="editsty" @click="editReport(scope.row.ArticleId)">编辑&nbsp;&nbsp;</span>
-            <span v-if="scope.row.PublishStatus !== 1 && !scope.row.Periods" class="deletesty" @click="operationBtn(scope.row.ArticleId, '删除')"
-              >删除</span
-            >
+            <span v-if="scope.row.PublishStatus !== 1 && !scope.row.Periods" class="deletesty" @click="operationBtn(scope.row.ArticleId, '删除')">删除</span>
             <span v-if="scope.row.PublishStatus == 1" class="editsty" @click="emailGroup(scope.row)">群发邮件</span>
           </template>
         </el-table-column>
@@ -65,200 +255,6 @@
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: { mPage },
-  props: {},
-  data() {
-    return {
-      page_no: sessionStorage.getItem("theLastWeek") ? JSON.parse(sessionStorage.getItem("theLastWeek")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      //industry: "", //行业
-      status: "", //发布状态
-      issueTime: "", //时间
-      //chartPermissionList: [], //行业的数组
-      options: [
-        { id: 0, name: "未发布" },
-        { id: 1, name: "已发布" },
-      ], //发布的数组
-      tableData: [], //表格
-    };
-  },
-  computed: {
-    sta() {
-      return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
-    },
-  },
-  watch: {},
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("theLastWeek")) {
-      const initialize = JSON.parse(sessionStorage.getItem("theLastWeek"));
-      this.status = initialize.status;
-      this.issueTime = initialize.issueTime;
-    }
-    this.getList();
-    //this.getIndustryList()
-  },
-  methods: {
-    //获取list数组
-    async getList() {
-      const res = await raiInterface.minutesSummaryList({
-        CurrentIndex: this.page_no,
-        PageSize: this.PageSize,
-        PublishStatus: this.sta - 0,
-        CategoryName: this.industry,
-        StartDate: this.issueTime[0],
-        EndDate: this.issueTime[1],
-      });
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //导出pv uv
-    exportPvUv(id) {
-      const url =
-        import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=4&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-    //选择后的事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getList();
-    },
-    //发布，取消发布，删除
-    operationBtn(id, value) {
-      this.$confirm(`确定${value}该文章吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          if (value == "删除") {
-            const res = await raiInterface.minutesSummaryDelete({ ArticleId: id });
-            if (res.Ret === 200) {
-              this.$message.success("删除成功！");
-              let page_num = Math.ceil((this.total - 1) / this.PageSize);
-              if (this.page_no > page_num) {
-                this.page_no = page_num;
-              }
-              this.getList();
-            }
-          } else {
-            const res = await raiInterface.minutesSummaryPublishAndCancel({ ArticleId: id });
-            if (res.Ret === 200) {
-              this.$message.success(value + "成功！");
-              this.getList();
-            }
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //文章详情
-    goDetail(row) {
-      let url =
-        process.env.NODE_ENV === "production"
-          ? "https://web.hzinsights.com/summary/3"
-          : process.env.NODE_ENV === "test"
-          ? "https://clpttest.hzinsights.com/summary/3"
-          : "https://clpttest.hzinsights.com/summary/3";
-      let href = `${url}/${row.ArticleId}`;
-      window.open(href, "_blank");
-    },
-    //去往编辑页面
-    editReport(id) {
-      this.$router.push({
-        path: "/editSummarizing",
-        query: { id },
-      });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getList();
-    },
-    //table表头Pu/Uv自定义
-    renderHeader(h, { column, $index }) {
-      return h("div", { attrs: { style: "padding:0;" } }, [
-        h("span", column.label),
-        h("el-tooltip", { props: { placement: "top" } }, [
-          h(
-            "p",
-            { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } },
-            "pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）"
-          ),
-          h(
-            "p",
-            { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } },
-            "uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）"
-          ),
-          h("el-button", { props: { icon: "el-icon-info" }, attrs: { style: "border:none;background:none" } }, ""),
-        ]),
-      ]);
-    },
-    emailGroup(row) {
-      this.$confirm("确定要对正式/试用客户群发该报告吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiInterface.minutesSummarySendMail({
-            ArticleId: row.ArticleId,
-          });
-          if (res.Ret === 200) {
-            this.$message.success("发送成功");
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消`,
-          });
-        });
-    },
-    // 可见范围
-    async reportVisibleRange(item) {
-      const res = await raiInterface.minutesSummaryVisibleRange({
-        ArticleId: item.ArticleId,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功");
-        this.getList();
-      } else {
-        this.getList();
-      }
-    },
-  },
-  /* 页面进入前是否清除参数 */
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/editSummarizing") {
-      sessionStorage.removeItem("theLastWeek");
-    }
-    next();
-  },
-  /* 页面跳转前记录参数 */
-  beforeRouteLeave(to, from, next) {
-    let backData = {
-      page_no: this.page_no,
-      status: this.status, //状态
-      issueTime: this.issueTime, //时间
-    };
-    sessionStorage.setItem("theLastWeek", JSON.stringify(backData));
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-the-last-week {
   .top-box {

src/views/rai_manage/reportManage/thisWeek.vue

@@ -1,12 +1,199 @@
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  beforeRouteEnter(to, from, next) {
+    if (from.path != "/editThisWeek") {
+      sessionStorage.removeItem("theLastWeek");
+    }
+    next();
+  },
+});
+</script>
+
+<script setup>
+import { onMounted, reactive, ref, toRefs, computed } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { InfoFilled } from "@element-plus/icons-vue";
+import mPage from "@/components/mPage.vue";
+import { raiInterface } from "@/api/api.js";
+import { onBeforeRouteLeave, useRouter, useRoute } from "vue-router";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const pageState = reactive({
+  page_no: sessionStorage.getItem("theLastWeek") ? JSON.parse(sessionStorage.getItem("theLastWeek")).page_no : 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  status: "", //发布状态
+  issueTime: "", //时间
+  options: [
+    { id: 0, name: "未发布" },
+    { id: 1, name: "已发布" },
+  ], //发布的数组
+  tableData: [], //表格
+});
+
+const sta = computed(() => {
+  return pageState.status === 0 ? pageState.status : pageState.status === 1 ? pageState.status : 2;
+});
+
+//获取list数组
+async function getList() {
+  const res = await raiInterface.researchSummaryList({
+    CurrentIndex: pageState.page_no,
+    PageSize: pageState.PageSize,
+    PublishStatus: sta.value - 0,
+    CategoryName: pageState.industry,
+    StartDate: pageState.issueTime[0],
+    EndDate: pageState.issueTime[1],
+  });
+  if (res.Ret === 200) {
+    pageState.tableData = res.Data.List;
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+//导出pv uv
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=3&" + localStorage.getItem("auth") || "";
+  return url;
+}
+
+
+//选择后的事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getList();
+}
+
+
+
+//发布，取消发布，删除
+function operationBtn(id, value) {
+  ElMessageBox.confirm(`确定${value}该文章吗？`, "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      if (value == "删除") {
+        const res = await raiInterface.researchSummaryDelete({ ArticleId: id });
+        if (res.Ret === 200) {
+           ElMessage.success("删除成功！");
+          let page_num = Math.ceil((pageState.total - 1) / pageState.PageSize);
+          if (pageState.page_no > page_num) {
+            pageState.page_no = page_num;
+          }
+          getList();
+        }
+      } else {
+        const res = await raiInterface.researchSummaryPublishAndCancel({ ArticleId: id });
+        if (res.Ret === 200) {
+           ElMessage.success(value + "成功！");
+          getList();
+        }
+      }
+    })
+    .catch(() => {
+       ElMessage({
+        type: "info",
+        message: `已取消${value}`,
+      });
+    });
+}
+
+
+//文章详情
+function goDetail(row) {
+  let url =
+    process.env.NODE_ENV === "production"
+      ? "https://web.hzinsights.com/summary/2"
+      : process.env.NODE_ENV === "test"
+      ? "https://clpttest.hzinsights.com/summary/2"
+      : "https://clpttest.hzinsights.com/summary/2";
+  let href = `${url}/${row.ArticleId}`;
+  window.open(href, "_blank");
+}
+
+//分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getList();
+}
+
+
+//去往编辑页面
+function editReport(id) {
+  $router.push({
+    path: "/editThisWeek",
+    query: { id },
+  });
+}
+
+function emailGroup(row) {
+  ElMessageBox.confirm("确定要对正式/试用客户群发该报告吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      const res = await raiInterface.researchSummarySendMail({
+        ArticleId: row.ArticleId,
+      });
+      if (res.Ret === 200) {
+        ElMessage.success("发送成功");
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: "info",
+        message: `已取消`,
+      });
+    });
+}
+
+// 可见范围
+async function reportVisibleRange(item) {
+  const res = await raiInterface.researchSummaryVisibleRange({
+    ArticleId: item.ArticleId,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功");
+    getList();
+  } else {
+    getList();
+  }
+}
+
+onMounted(() => {
+  if (sessionStorage.getItem("theLastWeek")) {
+    const initialize = JSON.parse(sessionStorage.getItem("theLastWeek"));
+    pageState.status = initialize.status;
+    pageState.issueTime = initialize.issueTime;
+  }
+  getList();
+});
+
+onBeforeRouteLeave((to, from, next) => {
+  let backData = {
+    page_no: pageState.page_no,
+    status: pageState.status, //状态
+    issueTime: pageState.issueTime, //时间
+  };
+  sessionStorage.setItem("theLastWeek", JSON.stringify(backData));
+  next();
+});
+
+const { page_no, total, PageSize, status, issueTime, options, tableData } = toRefs(pageState);
+</script>
+
 <template>
   <div class="container-the-last-week">
     <!-- 本周研究汇总 -->
     <el-card>
       <div class="top-box">
         <div class="top-container">
-          <!-- <el-select placeholder="行业" clearable v-model="industry" @change="conditionChange" style="margin-bottom: 20px">
-            <el-option v-for="item in chartPermissionList" :label="item.PermissionName" :key="item.ChartPermissionId" :value="item.ChartPermissionId"></el-option>
-          </el-select> -->
           <el-select placeholder="发布状态" clearable v-model="status" @change="conditionChange" style="margin-bottom: 20px">
             <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
           </el-select>
@@ -18,7 +205,7 @@
       </div>
       <el-table :data="tableData" style="width: 100%" border>
         <el-table-column prop="" align="center" label="标题" min-width="260">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span class="editsty" @click="goDetail(scope.row)">{{ scope.row.Title }}</span>
           </template>
         </el-table-column>
@@ -26,12 +213,24 @@
         <el-table-column prop="PublishDate" align="center" label="发布时间" min-width="118"></el-table-column>
         <el-table-column prop="LastUpdatedTime" align="center" label="更新时间" min-width="165"></el-table-column>
         <el-table-column prop="" align="center" label="发布状态" width="118">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span>{{ scope.row.PublishStatus == 1 ? "已发布" : "未发布" }}</span>
           </template>
         </el-table-column>
-        <el-table-column width="135" label="PV / UV" align="center" :render-header="renderHeader">
-          <template slot-scope="scope">
+        <el-table-column width="135" label="PV / UV" align="center">
+          <template #header>
+            <div style="display: flex; align-items: center; justify-content: center">
+              <p style="margin-right: 5px">PV / UV</p>
+              <el-tooltip placement="top-start">
+                <template #content>
+                  <p>pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）</p>
+                  <p>uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）</p>
+                </template>
+                <el-icon><InfoFilled /></el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <template #default="scope">
             <div class="pv-uv-download">
               <span>{{ scope.row.Pv }}/{{ scope.row.Uv }}</span>
               <a :href="exportPvUv(scope.row.ArticleId)" download>
@@ -41,21 +240,21 @@
           </template>
         </el-table-column>
         <el-table-column key="VisibleRange" width="156" label="可见范围" align="center">
-          <template slot-scope="{ row }" v-if="row.PublishStatus === 1">
-            <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
-              <el-radio :label="1">全部</el-radio>
-              <el-radio :label="0">内部</el-radio>
-            </el-radio-group>
+          <template #default="{ row }">
+            <div v-if="row.PublishStatus === 1">
+              <el-radio-group v-model="row.VisibleRange" @input="reportVisibleRange(row)">
+                <el-radio :label="1">全部</el-radio>
+                <el-radio :label="0">内部</el-radio>
+              </el-radio-group>
+            </div>
           </template>
         </el-table-column>
         <el-table-column align="center" label="操作" min-width="168">
-          <template slot-scope="scope">
+          <template #default="scope">
             <span v-if="scope.row.PublishStatus !== 1" class="editsty" @click="operationBtn(scope.row.ArticleId, '发布')">发布&nbsp;&nbsp;</span>
             <span v-else class="editsty" @click="operationBtn(scope.row.ArticleId, '取消发布')">取消发布&nbsp;&nbsp;</span>
             <span class="editsty" @click="editReport(scope.row.ArticleId)">编辑&nbsp;&nbsp;</span>
-            <span v-if="scope.row.PublishStatus !== 1 && !scope.row.Periods" class="deletesty" @click="operationBtn(scope.row.ArticleId, '删除')"
-              >删除&nbsp;&nbsp;</span
-            >
+            <span v-if="scope.row.PublishStatus !== 1 && !scope.row.Periods" class="deletesty" @click="operationBtn(scope.row.ArticleId, '删除')">删除&nbsp;&nbsp;</span>
             <span v-if="scope.row.PublishStatus == 1" class="editsty" @click="emailGroup(scope.row)">群发邮件</span>
           </template>
         </el-table-column>
@@ -68,200 +267,6 @@
   </div>
 </template>
 
-<script>
-import mPage from "@/components/mPage.vue";
-import { raiInterface } from "@/api/api.js";
-export default {
-  name: "",
-  components: { mPage },
-  props: {},
-  data() {
-    return {
-      page_no: sessionStorage.getItem("theLastWeek") ? JSON.parse(sessionStorage.getItem("theLastWeek")).page_no : 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      //industry: "", //行业
-      status: "", //发布状态
-      issueTime: "", //时间
-      //chartPermissionList: [], //行业的数组
-      options: [
-        { id: 0, name: "未发布" },
-        { id: 1, name: "已发布" },
-      ], //发布的数组
-      tableData: [], //表格
-    };
-  },
-  computed: {
-    sta() {
-      return this.status === 0 ? this.status : this.status === 1 ? this.status : 2;
-    },
-  },
-  watch: {},
-  created() {},
-  mounted() {
-    if (sessionStorage.getItem("theLastWeek")) {
-      const initialize = JSON.parse(sessionStorage.getItem("theLastWeek"));
-      this.status = initialize.status;
-      this.issueTime = initialize.issueTime;
-    }
-    this.getList();
-    //this.getIndustryList()
-  },
-  methods: {
-    //获取list数组
-    async getList() {
-      const res = await raiInterface.researchSummaryList({
-        CurrentIndex: this.page_no,
-        PageSize: this.PageSize,
-        PublishStatus: this.sta - 0,
-        CategoryName: this.industry,
-        StartDate: this.issueTime[0],
-        EndDate: this.issueTime[1],
-      });
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List;
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    //导出pv uv
-    exportPvUv(id) {
-      const url =
-        import.meta.env.VITE_APP_API_ROOT + "/cygx/reportSelection/articleHistoryExport?ArticleId=" + id + "&Source=3&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-    //选择后的事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getList();
-    },
-    //发布，取消发布，删除
-    operationBtn(id, value) {
-      this.$confirm(`确定${value}该文章吗？`, "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          if (value == "删除") {
-            const res = await raiInterface.researchSummaryDelete({ ArticleId: id });
-            if (res.Ret === 200) {
-              this.$message.success("删除成功！");
-              let page_num = Math.ceil((this.total - 1) / this.PageSize);
-              if (this.page_no > page_num) {
-                this.page_no = page_num;
-              }
-              this.getList();
-            }
-          } else {
-            const res = await raiInterface.researchSummaryPublishAndCancel({ ArticleId: id });
-            if (res.Ret === 200) {
-              this.$message.success(value + "成功！");
-              this.getList();
-            }
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消${value}`,
-          });
-        });
-    },
-    //文章详情
-    goDetail(row) {
-      let url =
-        process.env.NODE_ENV === "production"
-          ? "https://web.hzinsights.com/summary/2"
-          : process.env.NODE_ENV === "test"
-          ? "https://clpttest.hzinsights.com/summary/2"
-          : "https://clpttest.hzinsights.com/summary/2";
-      let href = `${url}/${row.ArticleId}`;
-      window.open(href, "_blank");
-    },
-    //去往编辑页面
-    editReport(id) {
-      this.$router.push({
-        path: "/editThisWeek",
-        query: { id },
-      });
-    },
-    //分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getList();
-    },
-    //table表头Pu/Uv自定义
-    renderHeader(h, { column, $index }) {
-      return h("div", { attrs: { style: "padding:0;" } }, [
-        h("span", column.label),
-        h("el-tooltip", { props: { placement: "top" } }, [
-          h(
-            "p",
-            { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } },
-            "pv：报告被打开的次数，每次打开都计算一次（只统计有权限用户）"
-          ),
-          h(
-            "p",
-            { slot: "content", attrs: { style: "display:block;padding:5px 0;width:420px;" } },
-            "uv：访问报告的人数，每篇报告同一个人访问只计算一次（只统计有权限用户）"
-          ),
-          h("el-button", { props: { icon: "el-icon-info" }, attrs: { style: "border:none;background:none" } }, ""),
-        ]),
-      ]);
-    },
-    emailGroup(row) {
-      this.$confirm("确定要对正式/试用客户群发该报告吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiInterface.researchSummarySendMail({
-            ArticleId: row.ArticleId,
-          });
-          if (res.Ret === 200) {
-            this.$message.success("发送成功");
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: `已取消`,
-          });
-        });
-    },
-    // 可见范围
-    async reportVisibleRange(item) {
-      const res = await raiInterface.researchSummaryVisibleRange({
-        ArticleId: item.ArticleId,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功");
-        this.getList();
-      } else {
-        this.getList();
-      }
-    },
-  },
-  /* 页面进入前是否清除参数 */
-  beforeRouteEnter(to, from, next) {
-    if (from.path != "/editThisWeek") {
-      sessionStorage.removeItem("theLastWeek");
-    }
-    next();
-  },
-  /* 页面跳转前记录参数 */
-  beforeRouteLeave(to, from, next) {
-    let backData = {
-      page_no: this.page_no,
-      status: this.status, //状态
-      issueTime: this.issueTime, //时间
-    };
-    sessionStorage.setItem("theLastWeek", JSON.stringify(backData));
-    next();
-  },
-};
-</script>
 <style scoped lang="scss">
 .container-the-last-week {
   .top-box {

src/views/rai_manage/reportManage/yanXuanSpecial.vue

@@ -1,3 +1,234 @@
+<script setup>
+import { onMounted, reactive, ref, toRefs, computed } from "vue";
+import { ElMessageBox, ElMessage } from "element-plus";
+import { InfoFilled } from "@element-plus/icons-vue";
+import { raiInterface } from "@/api/api.js";
+
+import { TopLableList, ReportStutsList, TableColums, AuthorTableColums } from "./components/yanXuanLable";
+import mPage from "@/components/mPage.vue";
+import CollectFansDlg from "./components/collectFansDlg.vue";
+import SpecialDlg from "./components/specialDlg.vue";
+
+const pageState = reactive({
+  page_no: 1,
+  total: 0, //条数
+  PageSize: 10, //每页显示几条
+  topLableActive: 1,
+  reportStatusActive: 1,
+  tableData: [],
+  reportStatus: "", //文章类型
+  authorStatus: "", // 作者状态
+  reportTitle: "", //文章标题
+  issueTime: [], // 文章发布时间
+  authorColumnValue: "", // 专栏名称
+  iscollectFansDlgShow: false,
+  collectFansDlgText: "",
+  collectFansDlgItem: {},
+  addAuthorDlgVisible: false,
+  topLableList: [],
+  sortType: "",
+  sortParam: "",
+});
+
+const reportStutsList = computed(() => {
+  return ReportStutsList;
+});
+
+const authorTableColums = computed(() => {
+  return AuthorTableColums;
+});
+
+const reportTableColums = computed(() => {
+  return TableColums(pageState.reportStatusActive);
+});
+
+// 点击了头部的tlble
+function tlableClickHandler(item) {
+  pageState.topLableActive = item.value;
+  pageState.page_no = 1;
+  getyanxuanReportSpecial();
+}
+// 文章的状态点击
+function reportStatusClickHandler(item) {
+  pageState.reportStatusActive = item.value;
+  pageState.page_no = 1;
+  getyanxuanReportSpecial();
+}
+/* 表格行的样式 */
+function handleRowStyle(key) {
+  if (key == "Title" && pageState.reportStatusActive == 2) {
+    return "color: #409eff; cursor: pointer";
+  } else if ((key == "SpecialName" && (pageState.reportStatusActive == 2 || pageState.reportStatusActive == 3)) || (key == "SpecialName" && pageState.topLableActive == 2)) {
+    return "color: #409eff; cursor: pointer";
+  } else if (key == "ArticleCollectNum" && pageState.topLableActive == 1) {
+    return "color: #409eff; cursor: pointer";
+  } else {
+    const style = {
+      FansNum: "color: #409eff; cursor: pointer",
+    };
+    return style[key] ? style[key] : "";
+  }
+}
+/* 表格行的点击事件 */
+function handleRowClick(row, key) {
+  if (key === "Title" && pageState.reportStatusActive == 2) {
+    let href = `${import.meta.env.VITE_CYGX_WEB}/column/detail/${row.Id}`;
+    window.open(href, "_blank");
+  } else if (key === "SpecialName" && (pageState.reportStatusActive == 2 || pageState.reportStatusActive == 3 || pageState.topLableActive == 2)) {
+    let href = `${import.meta.env.VITE_CYGX_WEB}/column/view/${row.SpecialAuthorId}`;
+    window.open(href, "_blank");
+  } else if ((key === "ArticleCollectNum" && pageState.topLableActive == 1) || key === "FansNum") {
+    // 收藏的数量
+    pageState.iscollectFansDlgShow = true;
+    pageState.collectFansDlgText = key === "ArticleCollectNum" ? "收藏详情" : "粉丝详情";
+    pageState.collectFansDlgItem = row;
+  }
+}
+/* 表格行的数据处理 */
+function handleRowContent(row, key) {
+  if (key == "Type") {
+    return row[key] == 1 ? "笔记" : "观点";
+  } else if (key == "Source") {
+    return row[key] == 1 ? "纪要" : row[key] == 2 ? "图表" : row[key] == 3 ? "纪要/图表" : row[key] == 4 ? "产业资源包" : row[key] == 5 ? "报告" : "活动";
+  } else if (key == "ActivityType") {
+    return row[key] == 1 ? "线上" : `线下(${row["City"]})`;
+  } else if (key == "RegisterPlatform") {
+    return row[key] == 1 ? "小程序" : row[key] == 2 ? "网页版" : row[key] == 3 ? "策略平台" : "";
+  } else {
+    return row[key];
+  }
+}
+// 是否显示
+function isShowSortable(item) {
+  return item.label == "总PV/UV" || item.label == "开通时间" || item.label == "已发布文章" ? "custom" : false;
+}
+// 排序事件
+function sortChangeHandle(params) {
+  pageState.page_no = 1;
+  pageState.sortType = params.order === "descending" ? "desc" : "asc";
+  pageState.sortParam = params.prop;
+  getyanxuanReportSpecial();
+}
+// 选择的change事件
+function conditionChange() {
+  pageState.page_no = 1;
+  getyanxuanReportSpecial();
+}
+// 获取数据
+async function getyanxuanReportSpecial() {
+  let params = {
+    CurrentIndex: pageState.page_no,
+    PageSize: pageState.PageSize,
+    Status: pageState.topLableActive == 1 ? pageState.reportStatusActive : pageState.authorStatus,
+    KeyWord: pageState.topLableActive == 1 ? pageState.reportTitle : pageState.authorColumnValue,
+    Type: pageState.reportStatus,
+    StartDate: pageState.issueTime[0],
+    EndDate: pageState.issueTime[1],
+    SortType: pageState.sortType,
+    SortParam: pageState.sortParam,
+  };
+  const res =
+    pageState.topLableActive == 1 && (pageState.reportStatusActive == 1 || pageState.reportStatusActive == 2)
+      ? await raiInterface.yanxuanReportSpecial(params)
+      : pageState.topLableActive == 1 && pageState.reportStatusActive == 3
+      ? await raiInterface.yanxuanApprovalLogList(params)
+      : pageState.topLableActive == 2
+      ? await raiInterface.getYanxuanSpecialAuthor(params)
+      : "";
+  if (res.Ret === 200) {
+    pageState.tableData = res.Data.List || [];
+    pageState.total = res.Data.Paging.Totals;
+  }
+}
+// 审核
+function toExamineHandler(item) {
+  let href = `${import.meta.env.VITE_CYGX_WEB}/column/check/${item.Id}`;
+  window.open(href, "_blank");
+}
+// 下载pv/uv 地址
+function exportPvUv(id) {
+  const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/yanxuan_special/list_pv?SpecialId=" + id + "&" + localStorage.getItem("auth") || "";
+  return url;
+}
+// 分页
+function handleCurrentChange(page) {
+  pageState.page_no = page;
+  getyanxuanReportSpecial();
+}
+// 驳回理由
+function reasonRejection(item) {
+  ElMessageBox.alert(item.Reason, "驳回理由", {
+    confirmButtonText: "确定",
+    customClass: "yanxuan-special-msg-box",
+    callback: (action) => {},
+  });
+}
+// 作者的禁用启用
+async function switchChangeHandler(item) {
+  const res = await raiInterface.yanxuan_specialAuthorEnable({
+    UserId: item.UserId,
+    Status: item.Status,
+  });
+  if (res.Ret === 200) {
+    ElMessage.success("操作成功!");
+  }
+}
+function authorColumnValueHandler() {
+  pageState.reportStatus = ""; //文章类型
+  pageState.authorStatus = ""; // 作者状态
+  pageState.reportTitle = ""; //文章标题
+  pageState.issueTime = []; // 文章发布时间
+  pageState.page_no = 1;
+  getyanxuanReportSpecial();
+}
+function reportTitleHandle() {
+  pageState.reportStatus = ""; //文章类型
+  pageState.authorStatus = ""; // 作者状态
+  pageState.issueTime = []; // 文章发布时间
+  pageState.authorColumnValue = "";
+  pageState.page_no = 1;
+  getyanxuanReportSpecial();
+}
+// 隐藏作者按钮
+async function getYanxuanShowButton() {
+  const res = await raiInterface.getYanxuanShowButton();
+  if (res.Ret === 200) {
+    let { IsShowSpecialAuthor } = res.Data;
+    if (IsShowSpecialAuthor) {
+      pageState.topLableList = TopLableList;
+    } else {
+      pageState.topLableList = [TopLableList[0]];
+    }
+  }
+}
+
+onMounted(() => {
+  getYanxuanShowButton();
+  getyanxuanReportSpecial();
+});
+
+const {
+  page_no,
+  total,
+  PageSize,
+  topLableActive,
+  reportStatusActive,
+  tableData,
+  reportStatus,
+  authorStatus,
+  reportTitle,
+  issueTime,
+  authorColumnValue,
+  iscollectFansDlgShow,
+  collectFansDlgText,
+  collectFansDlgItem,
+  addAuthorDlgVisible,
+  topLableList,
+  sortType,
+  sortParam,
+} = toRefs(pageState);
+</script>
+
 <template>
   <div class="container yanxuan-special_container">
     <el-card style="margin-bottom: 20px">
@@ -27,9 +258,7 @@
             />
           </el-select>
           <date-picker style="margin: 0 20px; width: 240px" v-model="issueTime" type="date" range placeholder="发布时间" value-type="format" @change="conditionChange"> </date-picker>
-          <el-input @input="reportTitleHandle" v-model="reportTitle" placeholder="请输入文章标题" clearable style="display: inline-block; width: 240px">
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input @input="reportTitleHandle" v-model="reportTitle" placeholder="请输入文章标题" clearable style="display: inline-block; width: 240px"> </el-input>
         </div>
       </template>
       <div v-else style="margin-bottom: 20px; display: flex; justify-content: space-between">
@@ -45,9 +274,7 @@
               :value="item.value"
             />
           </el-select>
-          <el-input @input="authorColumnValueHandler" v-model="authorColumnValue" placeholder="请输入专栏名称" clearable style="display: inline-block; width: 240px">
-            <i slot="prefix" class="el-input__icon el-icon-search"></i>
-          </el-input>
+          <el-input @input="authorColumnValueHandler" v-model="authorColumnValue" placeholder="请输入专栏名称" clearable style="display: inline-block; width: 240px"> </el-input>
         </div>
         <div>
           <el-button type="primary" @click="addAuthorDlgVisible = true">新建作者</el-button>
@@ -65,7 +292,7 @@
               align="center"
               :sortable="item.label == 'PV/UV' ? 'custom' : false"
             >
-              <template slot-scope="{ row }">
+              <template #default="{ row }">
                 <span v-if="item.label != 'PV/UV'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
                 <div class="pv-uv-download" v-else>
                   <span>{{ row.Pv }} / {{ row.Uv }}</span>
@@ -76,7 +303,7 @@
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center" v-if="reportStatusActive != 2">
-              <template slot-scope="{ row }">
+              <template #default="{ row }">
                 <span class="editsty" v-if="reportStatusActive == 3" @click="reasonRejection(row)">驳回理由</span>
                 <span class="editsty" v-if="reportStatusActive == 1" @click="toExamineHandler(row)">审核</span>
               </template>
@@ -84,23 +311,25 @@
           </template>
           <template v-else>
             <el-table-column v-for="item in authorTableColums" :width="item.widthsty" :key="item.key" :prop="item.key" :label="item.label" align="center" :sortable="isShowSortable(item)">
-              <template slot-scope="{ row }">
+              <template #default="{ row }">
                 <span v-if="item.label != '总PV/UV'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
                 <span v-else>{{ row.Pv }} / {{ row.Uv }}</span>
               </template>
             </el-table-column>
             <el-table-column label="状态" align="center" width="200">
-              <template slot-scope="{ row }">
-                <el-switch
-                  active-color="#13ce66"
-                  inactive-color="#ff4949"
-                  @change="switchChangeHandler(row)"
-                  v-model="row.Status"
-                  :active-value="1"
-                  :inactive-value="2"
-                  active-text="已启用"
-                  inactive-text="已禁用"
-                ></el-switch>
+              <template #default="{ row }">
+                <div v-if="topLableActive != 1">
+                  <el-switch
+                    active-color="#13ce66"
+                    inactive-color="#ff4949"
+                    @change="switchChangeHandler(row)"
+                    v-model="row.Status"
+                    :active-value="1"
+                    :inactive-value="2"
+                    active-text="已启用"
+                    inactive-text="已禁用"
+                  ></el-switch>
+                </div>
               </template>
             </el-table-column>
           </template>
@@ -111,225 +340,17 @@
         </el-col>
       </div>
     </el-card>
-    <collect-fans-dlg :iscollectFansDlgShow.sync="iscollectFansDlgShow" :collectFansDlgText.sync="collectFansDlgText" :collectFansDlgItem.sync="collectFansDlgItem" />
-    <special-dlg :addAuthorDlgVisible.sync="addAuthorDlgVisible" :submitRejectDlgVisible.sync="submitRejectDlgVisible" :submitRejectId="submitRejectId" />
+    <collect-fans-dlg v-model:iscollectFansDlgShow="iscollectFansDlgShow" v-model:collectFansDlgText="collectFansDlgText" v-model:collectFansDlgItem="collectFansDlgItem" />
+    <special-dlg
+      v-model:addAuthorDlgVisible="addAuthorDlgVisible"
+      v-model:submitRejectDlgVisible="submitRejectDlgVisible"
+      v-model:submitRejectId="submitRejectId"
+      @updateParent="getyanxuanReportSpecial"
+      @updateGetSpecialList="getSpecialList"
+    />
   </div>
 </template>
 
-<script>
-import { TopLableList, ReportStutsList, TableColums, AuthorTableColums } from "./components/yanXuanLable";
-import { raiInterface } from "@/api/api.js";
-import mPage from "@/components/mPage.vue";
-import CollectFansDlg from "./components/collectFansDlg.vue";
-import SpecialDlg from "./components/specialDlg.vue";
-
-export default {
-  name: "",
-  components: { mPage, CollectFansDlg, SpecialDlg },
-  props: {},
-  data() {
-    return {
-      page_no: 1,
-      total: 0, //条数
-      PageSize: 10, //每页显示几条
-      topLableActive: 1,
-      reportStatusActive: 1,
-      tableData: [],
-      reportStatus: "", //文章类型
-      authorStatus: "", // 作者状态
-      reportTitle: "", //文章标题
-      issueTime: [], // 文章发布时间
-      authorColumnValue: "", // 专栏名称
-      iscollectFansDlgShow: false,
-      collectFansDlgText: "",
-      collectFansDlgItem: {},
-      addAuthorDlgVisible: false,
-      topLableList: [],
-      sortType: "",
-      sortParam: "",
-    };
-  },
-  computed: {
-    // 头部lable
-
-    // 文章的状态
-    reportStutsList() {
-      return ReportStutsList;
-    },
-    reportTableColums() {
-      return TableColums(this.reportStatusActive);
-    },
-    authorTableColums() {
-      return AuthorTableColums;
-    },
-  },
-  mounted() {
-    this.getYanxuanShowButton();
-    this.getyanxuanReportSpecial();
-  },
-  methods: {
-    // 点击了头部的tlble
-    tlableClickHandler(item) {
-      this.topLableActive = item.value;
-      this.page_no = 1;
-      this.getyanxuanReportSpecial();
-    },
-    // 文章的状态点击
-    reportStatusClickHandler(item) {
-      this.reportStatusActive = item.value;
-      this.page_no = 1;
-      this.getyanxuanReportSpecial();
-    },
-    /* 表格行的样式 */
-    handleRowStyle(key) {
-      if (key == "Title" && this.reportStatusActive == 2) {
-        return "color: #409eff; cursor: pointer";
-      } else if ((key == "SpecialName" && (this.reportStatusActive == 2 || this.reportStatusActive == 3)) || (key == "SpecialName" && this.topLableActive == 2)) {
-        return "color: #409eff; cursor: pointer";
-      } else if (key == "ArticleCollectNum" && this.topLableActive == 1) {
-        return "color: #409eff; cursor: pointer";
-      } else {
-        const style = {
-          FansNum: "color: #409eff; cursor: pointer",
-        };
-        return style[key] ? style[key] : "";
-      }
-    },
-    /* 表格行的点击事件 */
-    handleRowClick(row, key) {
-      if (key === "Title" && this.reportStatusActive == 2) {
-        let href = `${process.env.CYGX_WEB}/column/detail/${row.Id}`;
-        window.open(href, "_blank");
-      } else if (key === "SpecialName" && (this.reportStatusActive == 2 || this.reportStatusActive == 3 || this.topLableActive == 2)) {
-        let href = `${process.env.CYGX_WEB}/column/view/${row.SpecialAuthorId}`;
-        window.open(href, "_blank");
-      } else if ((key === "ArticleCollectNum" && this.topLableActive == 1) || key === "FansNum") {
-        // 收藏的数量
-        this.iscollectFansDlgShow = true;
-        this.collectFansDlgText = key === "ArticleCollectNum" ? "收藏详情" : "粉丝详情";
-        this.collectFansDlgItem = row;
-      }
-    },
-    /* 表格行的数据处理 */
-    handleRowContent(row, key) {
-      if (key == "Type") {
-        return row[key] == 1 ? "笔记" : "观点";
-      } else if (key == "Source") {
-        return row[key] == 1 ? "纪要" : row[key] == 2 ? "图表" : row[key] == 3 ? "纪要/图表" : row[key] == 4 ? "产业资源包" : row[key] == 5 ? "报告" : "活动";
-      } else if (key == "ActivityType") {
-        return row[key] == 1 ? "线上" : `线下(${row["City"]})`;
-      } else if (key == "RegisterPlatform") {
-        return row[key] == 1 ? "小程序" : row[key] == 2 ? "网页版" : row[key] == 3 ? "策略平台" : "";
-      } else {
-        return row[key];
-      }
-    },
-    // 是否显示
-    isShowSortable(item) {
-      return item.label == "总PV/UV" || item.label == "开通时间" || item.label == "已发布文章" ? "custom" : false;
-    },
-    // 排序事件
-    sortChangeHandle(params) {
-      this.page_no = 1;
-      this.sortType = params.order === "descending" ? "desc" : "asc";
-      this.sortParam = params.prop;
-      this.getyanxuanReportSpecial();
-    },
-    // 选择的change事件
-    conditionChange() {
-      this.page_no = 1;
-      this.getyanxuanReportSpecial();
-    },
-    // 获取数据
-    async getyanxuanReportSpecial() {
-      let params = {
-        CurrentIndex: this.page_no,
-        PageSize: this.PageSize,
-        Status: this.topLableActive == 1 ? this.reportStatusActive : this.authorStatus,
-        KeyWord: this.topLableActive == 1 ? this.reportTitle : this.authorColumnValue,
-        Type: this.reportStatus,
-        StartDate: this.issueTime[0],
-        EndDate: this.issueTime[1],
-        SortType: this.sortType,
-        SortParam: this.sortParam,
-      };
-      const res =
-        this.topLableActive == 1 && (this.reportStatusActive == 1 || this.reportStatusActive == 2)
-          ? await raiInterface.yanxuanReportSpecial(params)
-          : this.topLableActive == 1 && this.reportStatusActive == 3
-          ? await raiInterface.yanxuanApprovalLogList(params)
-          : this.topLableActive == 2
-          ? await raiInterface.getYanxuanSpecialAuthor(params)
-          : "";
-      if (res.Ret === 200) {
-        this.tableData = res.Data.List || [];
-        this.total = res.Data.Paging.Totals;
-      }
-    },
-    // 审核
-    toExamineHandler(item) {
-      let href = `${process.env.CYGX_WEB}/column/check/${item.Id}`;
-      window.open(href, "_blank");
-    },
-    // 下载pv/uv 地址
-    exportPvUv(id) {
-      const url = import.meta.env.VITE_APP_API_ROOT + "/cygx/yanxuan_special/list_pv?SpecialId=" + id + "&" + localStorage.getItem("auth") || "";
-      return url;
-    },
-    // 分页
-    handleCurrentChange(page) {
-      this.page_no = page;
-      this.getyanxuanReportSpecial();
-    },
-    // 驳回理由
-    reasonRejection(item) {
-      this.$alert(item.Reason, "驳回理由", {
-        confirmButtonText: "确定",
-        customClass: "yanxuan-special-msg-box",
-        callback: (action) => {},
-      });
-    },
-    // 作者的禁用启用
-    async switchChangeHandler(item) {
-      const res = await raiInterface.yanxuan_specialAuthorEnable({
-        UserId: item.UserId,
-        Status: item.Status,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功!");
-      }
-    },
-    authorColumnValueHandler() {
-      this.reportStatus = ""; //文章类型
-      this.authorStatus = ""; // 作者状态
-      this.reportTitle = ""; //文章标题
-      this.issueTime = []; // 文章发布时间
-      this.page_no = 1;
-      this.getyanxuanReportSpecial();
-    },
-    reportTitleHandle() {
-      this.reportStatus = ""; //文章类型
-      this.authorStatus = ""; // 作者状态
-      this.issueTime = []; // 文章发布时间
-      this.authorColumnValue = "";
-      this.page_no = 1;
-      this.getyanxuanReportSpecial();
-    },
-    // 隐藏作者按钮
-    async getYanxuanShowButton() {
-      const res = await raiInterface.getYanxuanShowButton();
-      if (res.Ret === 200) {
-        let { IsShowSpecialAuthor } = res.Data;
-        if (IsShowSpecialAuthor) {
-          this.topLableList = TopLableList;
-        } else {
-          this.topLableList = [TopLableList[0]];
-        }
-      }
-    },
-  },
-};
-</script>
 <style scoped lang="scss">
 .yanxuan-special_container {
   .top-table-item {

src/views/rai_manage/reportManage/yanxuan.vue

@@ -1,356 +0,0 @@
-<template>
-  <div class="container yanxuan-special_container">
-    <div class="author-content">
-      <div class="top">
-        <div>专栏作者</div>
-        <el-button type="primary" @click="addAuthorDlgVisible = true">新建作者</el-button>
-      </div>
-      <div class="author-ul">
-        <div class="author-li" v-for="item in authorInfoData" :key="item.Id">
-          <div class="avatar">
-            <img :src="item.HeadImg" alt="" />
-          </div>
-          <div class="info-content">
-            <p class="info-name">{{ item.SpecialName }}</p>
-            <p>昵称：{{ item.NickName }}</p>
-            <p>{{ item.RealName }}-{{ item.Mobile }}</p>
-            <p>{{ item.CompanyName }}</p>
-          </div>
-          <div class="switch-box">
-            <el-switch style="display: block" @change="switchAuthorChange(item)" v-model="item.Status" :active-value="1" :inactive-value="2" active-color="#13ce66" inactive-color="#ff4949">
-            </el-switch>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="examine-content">
-      <p>待审核内容</p>
-      <template v-if="specialListData.length > 0">
-        <div class="content-box-examine" v-for="item in specialListData" :key="item.Id">
-          <div class="info-box" style="margin-bottom: 20px">
-            <div class="avatar">
-              <img :src="item.HeadImg" alt="" />
-            </div>
-            <div class="info-content">
-              <p class="info-name">{{ item.NickName || item.RealName }}</p>
-              <p>{{ item.PublishTime }}</p>
-            </div>
-          </div>
-          <div class="content-detial" v-html="item.Content"></div>
-          <div class="look-all-txt" v-if="item.ContentHasImg || item.isShowBtn" @click="lookAllDetails(item)">查看全文</div>
-          <div class="file-box" v-for="(key, indexs) in item.Docs" :key="indexs" @click="handleOperation(key)">
-            <img :src="key.DocIcon" alt="" />
-            {{ key.DocName }}.{{ key.DocSuffix }}
-          </div>
-          <div class="img-box">
-            <template v-if="item.ImgUrl">
-              <!-- <el-image style="width: 112px; height: 112px" fit="fill" v-for="(key, index) in item.ImgUrl.split(',')" :key="index" :src="key" :preview-src-list="item.ImgUrl.split(',')"> </el-image> -->
-              <img style="width: 112px; height: 112px" v-for="(key, index) in item.ImgUrl.split(',')" :key="index" :src="key" @click="showPreviewHandles(key)" />
-            </template>
-          </div>
-          <div>
-            <template v-if="item.Tags">
-              <div class="lable-li" v-for="(key, index) in item.Tags.split(',')" :key="index">{{ key }}</div>
-            </template>
-          </div>
-          <div class="bottom-button">
-            <div @click="submitRejectDlgHandler(item)">驳回</div>
-            <div @click="openMessage(item)">通过</div>
-          </div>
-        </div>
-      </template>
-      <div class="no-data" v-else>
-        <div style="text-align: center">
-          <img src="~@/assets/img/data_m/table_no.png" alt="" style="display: block; width: 135px; height: 112px; margin: 0 auto" />
-          <span>暂无数据</span>
-        </div>
-      </div>
-    </div>
-    <special-dlg :addAuthorDlgVisible.sync="addAuthorDlgVisible" :submitRejectDlgVisible.sync="submitRejectDlgVisible" :submitRejectId="submitRejectId" />
-    <el-image-viewer v-if="showPreview" :urlList="previewImages" :on-close="closeViewer" :zIndex="99999"></el-image-viewer>
-  </div>
-</template>
-
-<script>
-import ElImageViewer from "element-ui/packages/image/src/image-viewer";
-import SpecialDlg from "./components/specialDlg.vue";
-import { raiInterface } from "@/api/api.js";
-import { async } from "@antv/x6/lib/registry/marker/async";
-export default {
-  name: "",
-  components: { SpecialDlg, ElImageViewer },
-  props: {},
-  data() {
-    return {
-      addAuthorDlgVisible: false,
-      submitRejectDlgVisible: false, // 驳回的显示
-      submitRejectId: 0, // 驳回的ID
-      authorInfoData: [], // 作者信息列表
-      specialListData: [], // 审核列表
-      showPreview: false, //
-      previewImages: [],
-    };
-  },
-  watch: {},
-  created() {},
-  mounted() {
-    this.getAuthorList();
-    this.getSpecialList();
-    this.$nextTick(() => {});
-    // let rowNum = Math.round($(".content-detial").height() / parseFloat($(".content-detial").css("line-height")));
-  },
-  methods: {
-    showPreviewHandles(item) {
-      console.log(123);
-      this.showPreview = true;
-      this.previewImages = [item];
-    },
-    closeViewer() {
-      this.showPreview = false;
-      document.querySelector("body").classList.remove("el-popup-imageView--hidden");
-    },
-    // 审核通过的确认按钮
-    openMessage(item) {
-      this.$confirm("确定通过此内容在小程序展示吗？", "审核通过", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(async () => {
-          const res = await raiInterface.yanxuan_specialEnable({
-            Id: item.Id,
-            Status: 1,
-          });
-          if (res.Ret === 200) {
-            this.$message.success("审核成功!");
-            this.getSpecialList();
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: "info",
-            message: "已取消",
-          });
-        });
-    },
-    // 获取作者列表
-    async getAuthorList() {
-      const res = await raiInterface.yanxuan_specialAuthorList();
-      if (res.Ret === 200) {
-        this.authorInfoData = res.Data || [];
-      }
-    },
-    // 作者的关闭或者打开
-    async switchAuthorChange(item) {
-      const res = await raiInterface.yanxuan_specialAuthorEnable({
-        UserId: item.UserId,
-        Status: item.Status,
-      });
-      if (res.Ret === 200) {
-        this.$message.success("操作成功!");
-      }
-    },
-    // 审核列表
-    async getSpecialList() {
-      const res = await raiInterface.yanxuan_specialList();
-      if (res.Ret === 200) {
-        this.specialListData = res.Data || [];
-
-        this.$nextTick(() => {
-          this.specialListData.forEach((item, index) => {
-            let h = document.getElementsByClassName("content-detial")[index].clientHeight;
-            this.$set(item, "isShowBtn", h >= 134 ? true : false);
-          });
-        });
-      }
-    },
-    // 驳回的弹框显示
-    submitRejectDlgHandler(item) {
-      this.submitRejectId = item.Id;
-      this.submitRejectDlgVisible = true;
-    },
-    handleOperation: _.debounce(function (item) {
-      const url = item.DocUrl;
-      if (!url) {
-        this.$message.warning("文件错误");
-        return;
-      }
-      const reg = /\.(pdf)$/;
-      // pdf
-      if (reg.test(url)) {
-        window.open(url, "_blank");
-      } else {
-        window.open("https://view.officeapps.live.com/op/view.aspx?src=" + url, "_blank");
-      }
-    }, 200),
-    lookAllDetails(item) {
-      let url =
-        process.env.NODE_ENV === "production"
-          ? `https://web.hzinsights.com/column/detail/${item.Id}`
-          : process.env.NODE_ENV === `test`
-          ? `https://clpttest.hzinsights.com/column/detail/${item.Id}`
-          : `https://clpttest.hzinsights.com/column/detail/${item.Id}`;
-      window.open(url, "_blank");
-    },
-  },
-};
-</script>
-<style lang="scss">
-div {
-  box-sizing: border-box;
-}
-.yanxuan-special_container {
-  display: flex;
-  justify-content: space-between;
-  .author-content {
-    width: 400px;
-    height: calc(100vh - 118px);
-    border-radius: 4px;
-    background-color: #fff;
-    padding: 20px;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    .top {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-    .author-ul {
-      padding-bottom: 10px;
-      height: 100%;
-      overflow: hidden;
-      overflow-y: auto;
-      .author-li {
-        flex: 1;
-        padding: 20px;
-        display: flex;
-        justify-content: space-between;
-        border-bottom: 1px solid #dcdfe6;
-        margin: 10px 0;
-        .switch-box {
-          width: 30px;
-          flex-shrink: 0;
-        }
-      }
-    }
-  }
-  .info-content {
-    flex: 1;
-    padding-left: 16px;
-    color: #999999;
-    p {
-      margin: 5px 0;
-    }
-  }
-  .avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    overflow: hidden;
-    background: #d9d9d9;
-    flex-shrink: 0;
-    img {
-      width: 48px;
-      height: 48px;
-    }
-  }
-  .info-name {
-    font-size: 16px;
-    color: #333;
-    font-weight: 500;
-  }
-  .examine-content {
-    margin-left: 20px;
-    padding: 20px;
-    flex: 1;
-    background: #fff;
-    flex-direction: 0;
-    overflow: hidden;
-    .no-data {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .content-box-examine {
-      padding: 30px 0;
-      border-bottom: 1px solid #dcdfe6;
-    }
-    .info-box {
-      display: flex;
-    }
-    .content-detial {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 8;
-      img {
-        width: 100%;
-        max-height: 300px;
-      }
-    }
-    .look-all-txt {
-      color: #409eff;
-      font-size: 16px;
-      margin-top: 20px;
-      cursor: pointer;
-    }
-    .file-box {
-      display: flex;
-      align-items: center;
-      margin-top: 20px;
-      height: 64px;
-      cursor: pointer;
-      img {
-        width: 27px;
-        height: 27px;
-        margin-right: 15px;
-      }
-    }
-    .img-box {
-      margin: 20px 0;
-      height: 112px;
-      img {
-        object-fit: fill !important;
-        cursor: pointer;
-        margin-right: 20px;
-      }
-    }
-    .lable-li {
-      display: inline-block;
-      padding: 4px 20px;
-      height: 28px;
-      border-radius: 48px;
-      margin: 0 15px 15px 0;
-      border: 1px solid #409eff;
-      background-color: #eaf3fe;
-      color: #409eff;
-    }
-    .bottom-button {
-      margin: 50px;
-      display: flex;
-      justify-content: center;
-      color: #fff;
-      div {
-        cursor: pointer;
-        width: 120px;
-        height: 40px;
-        padding: 10px 46px 10px 46px;
-        border-radius: 4px;
-        background: #c54322;
-      }
-      div:nth-child(2) {
-        margin-left: 20px;
-        background: #67c23a;
-      }
-    }
-  }
-}
-/deep/.el-image {
-  img {
-    object-fit: fill !important;
-  }
-}
-</style>