crm_front_v3/src/views/rai_manage/reportManage/tacticsTimeLine.vue

<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">
    <!-- 头部 -->
    <el-card style="margin-bottom: 20px">
      <div style="display: flex; justify-content: space-between; align-items: center">
        <el-radio-group v-model="visibleRange" @input="tacticsTimeLineAllCancel">
          <el-radio :label="0">内部可见</el-radio>
          <el-radio :label="1">全部可见</el-radio>
        </el-radio-group>
        <el-button @click="addReport" type="primary">添加</el-button>
      </div>
    </el-card>
    <!-- 表格部分 -->
    <el-card>
      <el-select v-model="statusValue" placeholder="请选择状态" @change="listChangeHandel" clearable style="margin-bottom: 20px">
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-table :data="dataTableList" border align="center">
        <el-table-column prop="PublishTime" label="日期" width="130" align="center"> </el-table-column>
        <el-table-column min-width="350">
          <template #header>
            <div style="text-align: center">文本</div>
          </template>
          <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 #default="{ row }">
            <div class="pv-uv-download">
              <span>{{ row.Pv }}/{{ row.Uv }}</span>
              <a :href="exportPvUv(row)" download>
                <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
              </a>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="180" align="center">
          <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>
            </el-radio-group>
          </template>
        </el-table-column>

        <el-table-column prop="ModifyTime" label="更新时间" width="180" align="center"> </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <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>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
      </el-col>
    </el-card>
    <!-- 弹框部分 -->
    <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-form-item>
        <el-form-item prop="Content">
          <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>
        <el-form-item>
          <el-input type="textarea" placeholder="请输入报告或图表链接（网页版详情链接）" v-model="dataForm.Link"></el-input>
        </el-form-item>
      </el-form>
      <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>

<style scoped lang="scss">
.tactics-time-line {
  .pv-uv-download {
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 14px;
      height: 14px;
      margin-left: 10px;
    }
  }
}
.fr-wrapper {
  border-top: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
}
</style>