ficc小程序管理-报告更新管理

src/router/modules/ficcXcxRoutes.js

@@ -33,15 +33,15 @@ export default [
 				name:"编辑视频",
 				component:()=>import('@/views/interaction_manage/videoManageENAdd.vue')
 			},
-            // {
-			// 	path: 'reportupdate',
-			// 	component: () => import('@/views/report_manage/dayWeekUpdate.vue'),
-			// 	name: '报告更新管理',
-			// 	hidden: true,
-			// 	meta: {
-			// 		keepAlive: false
-			// 	}
-			// },
+            {
+				path: 'reportupdate',
+				component: () => import('@/views/report_manage/dayWeekUpdate.vue'),
+				name: '报告更新管理',
+				hidden: true,
+				meta: {
+					keepAlive: false
+				}
+			},
             // {
 			// 	path:"questionManage",
 			// 	name:"问答社区",

src/views/report_manage/components/setVarietyPause.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { setPauseReport } from "@/api/modules/reportupdateApi.js";
+import { ElMessage } from "element-plus";
+import { watch } from "vue";
+
+const props = defineProps({
+  isOpenDialog: {
+    type: Boolean,
+  },
+  //标题
+  title: {
+    type: String,
+    default: '设置暂停日期'
+  },
+  setArr: {
+    type: Array
+  },
+  type: {
+    type: String
+  }
+})
+const emits=defineEmits(['successBack'])
+
+
+const pauseList = ref([])
+
+watch(
+  () => props.isOpenDialog,
+  (newval) => {
+    if (newval) {
+      pauseList.value = props.setArr.map(_ => ({
+        id: _.ReportChapterTypeId,
+        name: _.ReportChapterTypeName,
+        date: _.PauseStartTime ? [_.PauseStartTime, _.PauseEndTime] : []
+      }))
+    }
+  }
+)
+
+async function saveHandle() {
+  let arr = pauseList.value.filter(_ => _.date && _.date.length);
+  let params_list = arr.map(_ => ({
+    ReportChapterTypeId: _.id,
+    PauseStartTime: _.date[0],
+    PauseEndTime: _.date[1]
+  }))
+
+  const { Ret, Msg } = await setPauseReport({
+    ResearchType: props.type,
+    List: params_list
+  })
+
+  if (Ret !== 200) return
+  ElMessage.success(Msg);
+  cancelHandle();
+  emits('successBack')
+
+}
+
+function dateChange(e, item) {
+  item.date = e || [];
+}
+
+/* 取消 */
+function cancelHandle() {
+  emits('close')
+}
+
+
+
+
+</script>
+
+<template>
+  <el-dialog
+    :model-value="props.isOpenDialog"
+    :close-on-click-modal="false"
+    :modal-append-to-body="false"
+    :title="props.title"
+    @close="cancelHandle"
+    class="dialog"
+    center
+    width="650px"
+    draggable
+  >
+    <ul class="list-ul">
+      <li class="list-li" v-for="item in pauseList" :key="item.name">
+        <span style="width: 100px; text-align: right">{{ item.name }}</span>
+        <el-date-picker
+          v-model="item.date"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          :picker-options="{
+            disabledDate: function (time) {
+              return time.getTime() < Date.now() - 24 * 3600 * 1000;
+            },
+          }"
+          style="margin: 0 15px"
+          @change="dateChange($event, item)"
+        />
+        <el-button
+          type="text"
+          @click="item.date = []"
+          v-show="item.date && item.date.length"
+          >清空</el-button
+        >
+      </li>
+    </ul>
+    <div class="dia-bot">
+      <el-button type="primary" style="margin-right: 20px" @click="saveHandle"
+        >保存</el-button
+      >
+      <el-button type="primary" plain @click="cancelHandle">取消</el-button>
+    </div>
+  </el-dialog>
+</template>

src/views/report_manage/dayWeekUpdate.vue

@@ -0,0 +1,362 @@
+<script setup>
+import { pauseReportAll, pauseReport, setStopReport } from "@/api/modules/reportupdateApi.js";
+import { ElMessage } from "element-plus";
+import { computed, reactive, ref, watch } from "vue";
+import setPause from './components/setVarietyPause.vue';
+
+const pageState = reactive({
+  default_tab: 'stop',
+  statisticList: [
+    { label: '暂停更新', day: [], week: [] },
+    { label: '永久停更', day: [], week: [] },
+  ],
+  dataLoading: false,
+  dayList: [],
+  checkedDay: [],
+
+  weekList: [],
+  checkedWeek: [],
+
+  showSetDialog: false,
+  setArr: [],//要设置的数组
+  setType: ''
+})
+
+const checkDayAll = computed(() => {
+  return pageState.dayList.length === pageState.checkedDay.length ? true : false
+})
+const checkWeekAll = computed(() => {
+  return pageState.weekList.length == pageState.checkedWeek.length ? true : false
+})
+watch(
+  () => pageState.default_tab,
+  () => {
+    getPauseList()
+  }
+)
+
+function initPage() {
+  getStatistic();
+  getPauseList()
+}
+
+/* 获取统计 */
+async function getStatistic() {
+  const res = await pauseReportAll();
+  if (res.Ret !== 200) return
+
+  const { DisableDay, DisableWeek, StopDay, StopWeek } = res.Data;
+  pageState.statisticList = [
+    { label: '暂停更新', day: StopDay, week: StopWeek },
+    { label: '永久停更', day: DisableDay, week: DisableWeek },
+  ]
+}
+
+/* 获取暂停的报告品种 */
+async function getPauseList() {
+  pageState.dataLoading = true;
+  pageState.checkedDay = [];
+  pageState.checkedWeek = [];
+  const res = await pauseReport({ StopType: pageState.default_tab });
+  pageState.dataLoading = false
+  if (res.Ret !== 200) return
+
+  const { Day, Week } = res.Data;
+  pageState.dayList = Day || [];
+  Day && Day.forEach((item) => {
+    if (pageState.default_tab === 'stop' && item.IsSet === 1) pageState.checkedDay.push(item.ReportChapterTypeId);
+    if (pageState.default_tab === 'disable' && !item.Enabled) pageState.checkedDay.push(item.ReportChapterTypeId);
+  });
+
+  pageState.weekList = Week || [];
+  Week && Week.forEach((item) => {
+    if (pageState.default_tab === 'stop' && item.IsSet === 1) pageState.checkedWeek.push(item.ReportChapterTypeId);
+    if (pageState.default_tab === 'disable' && !item.Enabled) pageState.checkedWeek.push(item.ReportChapterTypeId);
+  });
+}
+
+function handleDayCheckAllChange() {
+  let arr = [];
+  pageState.dayList.forEach(item => {
+    arr.push(item.ReportChapterTypeId);
+  });
+  if (pageState.checkDayAll) {
+    pageState.checkedDay = [];
+  } else {
+    pageState.checkedDay = arr;
+  }
+}
+
+function handleWeekCheckAllChange() {
+  let arr = [];
+  pageState.weekList.forEach(item => {
+    arr.push(item.ReportChapterTypeId);
+  });
+  if (pageState.checkWeekAll) {
+    pageState.checkedWeek = [];
+  } else {
+    pageState.checkedWeek = arr;
+  }
+}
+
+/* 设置暂停日期 */
+function setPauseDate(type) {
+  if ((type === 'day' && !pageState.checkedDay.length)
+    || (type === 'week' && !pageState.checkedWeek.length)) return ElMessage.warning('请至少选择一个品种！');
+
+  pageState.setType = type;
+  pageState.setArr = type === 'day'
+    ? pageState.dayList.filter(_ => pageState.checkedDay.includes(_.ReportChapterTypeId))
+    : pageState.weekList.filter(_ => pageState.checkedWeek.includes(_.ReportChapterTypeId));
+  pageState.showSetDialog = true;
+}
+
+
+async function handleSave() {
+  const { Ret, Msg } = await setStopReport({
+    DayReportChapterTypeId: pageState.checkedDay.join(','),
+    WeekReportChapterTypeId: pageState.checkedWeek.join(',')
+  })
+  if (Ret !== 200) return
+
+  ElMessage.success(Msg);
+  getStatistic();
+  getPauseList();
+}
+
+
+
+
+</script>
+
+<template>
+  <div class="report-update">
+    <div style="margin-bottom: 30px; font-size: 16px">更新规则</div>
+    <ul class="top-section">
+      <li class="section-li" v-for="item in pageState.statisticList" :key="item.label">
+        <div class="header">{{ item.label }}</div>
+        <div class="cont">
+          <div class="list">
+            晨报：
+            <span
+              class="tag"
+              v-for="report in item.day"
+              :key="report.ReportChapterTypeId"
+              >{{ report.ReportChapterTypeName }}</span
+            >
+          </div>
+          <div class="list">
+            周报：
+            <span
+              class="tag"
+              v-for="report in item.week"
+              :key="report.ReportChapterTypeId"
+              >{{ report.ReportChapterTypeName }}</span
+            >
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div style="margin-top: 20px">
+      <el-tabs v-model="pageState.default_tab" type="card" @tab-click="changeTab">
+        <el-tab-pane label="暂停更新" name="stop"></el-tab-pane>
+        <el-tab-pane label="永久停更" name="disable"></el-tab-pane>
+      </el-tabs>
+      <div class="section-wrap" v-loading="pageState.dataLoading">
+        <section class="section">
+          <div>
+            <span class="label">晨报品种</span>
+          </div>
+          <div class="list-box">
+            <el-checkbox
+              style="margin-bottom: 20px"
+              :indeterminate="pageState.checkedDay.length && !pageState.checkDayAll"
+              v-model="pageState.checkDayAll"
+              @change="handleDayCheckAllChange"
+              >全选</el-checkbox
+            >
+            <el-checkbox-group v-model="pageState.checkedDay">
+              <el-checkbox
+                style="margin-bottom: 15px"
+                v-for="item in pageState.dayList"
+                :label="item.ReportChapterTypeId"
+                :key="item.ReportChapterTypeId"
+              >
+                {{ item.ReportChapterTypeName }}
+                <el-tooltip
+                  style="display: inline-block"
+                  effect="dark"
+                  :content="`暂停日期：${item.PauseStartTime}至${item.PauseEndTime}`"
+                  placement="top-start"
+                  v-if="item.IsSet"
+                >
+                  <span
+                    style="
+                      width: 7px;
+                      height: 7px;
+                      background: #f00;
+                      border-radius: 50%;
+                    "
+                  ></span>
+                </el-tooltip>
+              </el-checkbox>
+            </el-checkbox-group>
+          </div>
+          <el-button
+            type="primary"
+            v-show="pageState.default_tab === 'stop'"
+            @click="setPauseDate('day')"
+            >设置暂停日期</el-button
+          >
+        </section>
+        <section class="section">
+          <div>
+            <span class="label">周报品种</span>
+          </div>
+          <div class="list-box">
+            <el-checkbox
+              style="margin-bottom: 20px"
+              :indeterminate="pageState.checkedWeek.length && !pageState.checkWeekAll"
+              v-model="pageState.checkWeekAll"
+              @change="handleWeekCheckAllChange"
+              >全选</el-checkbox
+            >
+            <el-checkbox-group v-model="pageState.checkedWeek">
+              <el-checkbox
+                style="margin-bottom: 15px"
+                v-for="item in pageState.weekList"
+                :label="item.ReportChapterTypeId"
+                :key="item.ReportChapterTypeId"
+              >
+                {{ item.ReportChapterTypeName }}
+                <el-tooltip
+                  style="display: inline-block"
+                  effect="dark"
+                  :content="`暂停日期：${item.PauseStartTime}至${item.PauseEndTime}`"
+                  placement="top-start"
+                  v-if="item.IsSet"
+                >
+                  <span
+                    style="
+                      width: 7px;
+                      height: 7px;
+                      background: #f00;
+                      border-radius: 50%;
+                    "
+                  ></span>
+                </el-tooltip>
+              </el-checkbox>
+            </el-checkbox-group>
+          </div>
+          <el-button
+            type="primary"
+            v-show="pageState.default_tab === 'stop'"
+            @click="setPauseDate('week')"
+            >设置暂停日期</el-button
+          >
+        </section>
+      </div>
+    </div>
+
+    <div class="bottom-btn" v-if="pageState.default_tab === 'disable'">
+      <el-button type="primary" style="width: 100px" @click="handleSave"
+        >保存</el-button
+      >
+      <!-- <el-button
+        style="width: 100px;"
+        @click="handleSave"
+        >取消</el-button
+      > -->
+    </div>
+
+    <set-pause
+      :model-value="pageState.showSetDialog"
+      :setArr="pageState.setArr"
+      :type="pageState.setType"
+      @successBack="
+        getStatistic();
+        getPauseList();
+      "
+      @close="pageState.showSetDialog=false"
+    />
+  </div>
+</template>
+
+
+<style lang="scss" scoped>
+.report-update {
+  border: 1px solid #ececec;
+  padding: 30px;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
+  .top-section {
+    display: flex;
+    .section-li {
+      width: 50%;
+      border: 1px solid #dcdfe6;
+      box-shadow: 3px 3px 12px 0px rgba(0, 0, 0, 0.08);
+      border-radius: 8px;
+      &:first-child {
+        margin-right: 20px;
+      }
+      .header {
+        background-color: #d1e8ff;
+        padding: 14px 20px;
+        font-size: 16px;
+      }
+      .cont {
+        padding: 20px;
+        .list {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          text-indent: -40px;
+          margin-left: 40px;
+          &:first-child {
+            margin-bottom: 5px;
+          }
+          .tag {
+            margin: 5px 0;
+            color: #666;
+            text-indent: 10px;
+          }
+        }
+      }
+    }
+  }
+  .section {
+    padding: 20px;
+    border: 1px solid #dcdfe6;
+    &:first-child {
+      border-bottom: none;
+    }
+    .label {
+      font-size: 16px;
+      margin-right: 30px;
+    }
+    .list-box {
+      border-radius: 4px;
+      margin: 20px 0;
+    }
+  }
+  .bottom-btn {
+    margin: 50px 0 20px 0;
+    display: flex;
+    justify-content: center;
+  }
+}
+</style>
+
+<style lang="scss">
+.report-update {
+  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+    background-color: #409eff;
+    color: #fff;
+  }
+  .el-tabs--card > .el-tabs__header {
+    border-bottom: none;
+    margin: 0;
+  }
+}
+</style>