fe-manage/src/views/case/CaseRecommended.vue

<!-- 评估管理页面 -->
<template>
  <div class="researchmanage">
    <!-- 搜索框及按钮 -->
    <div class="filter">
      <div class="filterItems">
        <div class="select">
          <a-input v-model:value="searchData.recommendName" style="width: 270px; height: 40px; border-radius: 8px"
            placeholder="请输入姓名" />
        </div>
        <div class="select">
          <div class="select addTimeBox">
            <!-- <div class="addTime">创建时间：</div> -->
            <a-range-picker v-model:value="recommendTimeList" style="width: 420px" @change="timeChange"
              format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" separator="至" :placeholder="['      开始时间', '        结束时间']" />
          </div>
        </div>
        <div style="display: flex; margin-bottom: 20px">
          <div class="btn btn1" @click="getList(1)">
            <div class="search"></div>
            <div class="btnText">搜索</div>
          </div>
          <div class="btn btn2" @click="handleRest" style="width: 105px">
            <div class="search"></div>
            <div class="btnText">重置</div>
          </div>
        </div>
      </div>
      <div class="btns">
        <div class="btn btn3" @click="handleNew">
          <div class="search"></div>
          <div class="btnText">发起推荐</div>
        </div>
      </div>
    </div>
    <!-- 搜索框及按钮 -->
    <!-- 表格 -->
    <div class="tableBox">
      <a-table style="border: 1px solid #f2f6fe" :columns="column" :data-source="state.data" :loading="!loading"
        :scroll="{ x: 1500 }" :pagination="false">
        <template #operation="{ record }">
          <a-space style="padding-right: 10px">
            <a-button @click="handleOper(record, 'download')" type="link">信息下载
            </a-button>
            <a-button @click="() => handleOper(record, 'withdraw')" type="link">撤回
            </a-button>
            <a-button @click="handleOper(record, 'del')" type="link">删除
            </a-button>
          </a-space>
        </template>
      </a-table>
    </div>
    <div class="pa">
      <a-pagination :pageSize="searchData.pageSize" :current="searchData.pageIndex" :total="state.total"
        class="pagination" @change="handelChangePage" show-size-changer />
    </div>
    <InitiateRecommend v-model:visible="newNext" :title="添加案例"></InitiateRecommend>
  </div>
</template>
<script setup lang="jsx">
import { ref, onMounted, reactive } from "vue";
import {
  deleteResearch,
  editReleaseStatus,
} from "@/api/indexResearch";
import { Form, message } from "ant-design-vue";
import { boeRequest } from "@/api/request";
import { RECOMMEND_PAGE } from "@/api/case";
import dialog from "@/utils/dialog";
import InitiateRecommend from '@/components/drawers/InitiateRecommend.vue'

const column = [
  {
    title: "推荐人",
    dataIndex: "recommendBy",
    key: "recommendBy",
    width: "20%",
    align: "center",
    ellipsis: true,
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "推荐时间",
    dataIndex: "recommendTime",
    key: "recommendTime",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {

      return text ? text : "-";
    },
  },
  {
    title: "案例数",
    dataIndex: "caseCount",
    key: "caseCount",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "用户数",
    dataIndex: "userCount",
    key: "userCount",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "推送进度",
    dataIndex: "pushProgress",
    key: "pushProgress",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      switch (text) {
        case 1: return (
          <span>未推送</span>
        )
        case 2: return (
          <span>推送中</span>
        )
        case 3: return (
          <span>已推送</span>
        )
        case 4: return (
          <span style={{ color: 'red' }}>推送失败</span>
        )
        case 5: return (
          <span>已撤回</span>
        )
        default: return (
          <span>-</span>
        )
      }
    },
  },
  {
    title: "查看率",
    dataIndex: "viewRate",
    key: "viewRate",
    width: "10%",
    align: "center",
    className: "h",
    customRender: ({ text }) => {
      return text ? text : "-";
    },
  },
  {
    title: "操作",
    width: "20%",
    className: "h",
    dataIndex: "id",
    key: "id",
    fixed: "right",
    align: "center",
    slots: { customRender: "operation" },
  },
];
const state = reactive({
  data: [],
  total: 0
})
// 查询数据
const searchData = ref({
  pageIndex: 1,
  pageSize: 10,
  recommendName: "",
  recommendTimeList: []
});
const newNext = ref(false);
const recommendTimeList = ref([]);
const loading = ref(false)

const getList = (num) => {
  if (num === 1) searchData.value.pageIndex = 1;
  boeRequest(
    RECOMMEND_PAGE,
    searchData.value
  ).then((res) => {
    loading.value = true;
    state.data = res?.result?.list || []
    state.total = res?.result?.totalPages || 0;
  }).catch(() => {
    loading.value = false
  })
}

// 获取列表数据
getList()

onMounted(() => {
  // 是否需要触发新建弹框
  let str = location.href;
  let isOpen = str.includes("openCreate=true");
  if (isOpen) {
    newNext.value = true;
  }
});

const { resetFields } = Form.useForm(searchData, {});

const handle = (record) => ({
  push: () => {
    message.info("发布成功！");
    record.releaseStatus = "2";
    try {
      editReleaseStatus({ assessmentId: record.id, releaseStatus: 2 });
    } catch (error) {
      message.info("发布失败！");
    }
  },
  withdraw: () => {
    message.info("撤回成功！");
    record.releaseStatus = "1";
    try {
      editReleaseStatus({ assessmentId: record.id, releaseStatus: 1 });
    } catch (error) {
      message.info("推送失败！");
    }
  },
  del: async () => {
    loading.value = true;
    await deleteResearch({ assessmentId: record.id }).then(() => {
      message.info("删除成功！");
      getList();
    }).catch(() => loading.value = false)
  },
});

const handleMsg = {
  download: "你确定呀哦下载吗",
  withdraw: "你确认要撤回此次推送吗？",
  del: "你确定要删除这条案例吗？",
};

function handleOper(record, type) {
  dialog({ content: handleMsg[type], ok: handle(record)[type] });
}


const handelChangePage = (page, pageSize) => {
  loading.value = false
  searchData.value.pageSize = pageSize
  searchData.value.pageIndex = page;
  getList();
};

function timeChange(time, timeStr) {
  searchData.value.recommendTimeList = timeStr
}

const handleRest = () => {
  recommendTimeList.value = [];
  resetFields();
  getList();
};


const handleNew = () => {
  newNext.value = true;
};


</script>
<style lang="scss">
.clearfix:before,
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
}

.addTimeBox {
  position: relative;
  display: flex;
  align-items: center;

  .addTime {
    position: absolute;
    z-index: 10;
    margin-left: 10px;
    color: rgba(0, 0, 0, 0.4);
  }

  .ant-picker {
    padding-left: 85px;
  }

  .ant-picker-range .ant-picker-active-bar {
    margin-left: 85px;
  }
}

.out {
  //display: flex;
  display: block;
  position: absolute;
  width: 680px;
  // height: 525px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .top {
    width: 100%;
    height: 68px;

    background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
        rgba(78, 166, 255, 0) 100%);
    display: flex;
    align-items: center;

    .topimg {
      width: 18px;
      height: 18px;
      margin-left: 27px;
    }

    .topc {
      color: #000000;
      font-size: 16px;
      margin-left: 8px;
    }
  }

  .mid {
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .d {
      // margin-top: 8px;
      // color: #ff4e4e;
      margin-left: -5px;
    }

    .name {
      width: 78%;
      // background-color: lightcoral;
      display: flex;
      margin-top: 20px;
      align-items: center;
      height: 40px;
      // border: 1px solid black;

      .inname {
        color: #6f6f6f;
        font-size: 14px;
        margin-left: 7px;
      }

      .in {
        margin-left: 14px;
        width: 81%;

        .ant-input {
          border-radius: 5px;
          // height: 120%;
          width: 100%;
          height: 30px;
        }

        .showcount {
          position: absolute;
          right: 10px;
          color: #c7cbd2;
          bottom: 5px;
        }
      }
    }

    .btn {
      width: 33%;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;

      .samtn {
        width: 100px;
        height: 40px;
        font-size: 14px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        cursor: pointer;
      }

      .btn1 {
        background-color: #fff;
        color: #4ea6ff;
      }

      .btn2 {
        margin-left: 10px;
        background-color: #4ea6ff;
        color: #fff;
      }
    }
  }
}

.researchmanage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .filter {
    margin-left: 38px;
    margin-right: 38px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .filterItems {
      display: flex;
      flex-wrap: wrap;

      .select {
        margin-right: 20px;
        margin-bottom: 20px;
      }

      .btn {
        padding: 0 26px 0 26px;
        height: 38px;
        background: #4ea6ff;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;

        .search {
          background-size: 100%;
        }

        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btnn {
        padding: 0 26px 0 26px;
        height: 38px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;

        .search {
          background-size: 100%;
        }

        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btn1 {
        .search {
          width: 15px;
          height: 17px;
          background-image: url("../../assets/images/courseManage/search0.png");
        }
      }

      .btn2 {
        .search {
          width: 16px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/reset0.png");
        }
      }

      // .btn1:hover {
      //   background: rgba(64, 158, 255, 0.76);

      //   .search {
      //     background-image: url("../../assets/images/courseManage/search0.png");
      //   }

      //   .btnText {
      //     color: #ffffff;
      //   }
      // }

      .btn1:active {
        background: #0982ff;
      }

      // .btn2:hover {
      //   background: rgba(64, 158, 255, 0.1);
      // }

      .btn2:active {
        background: rgba(64, 158, 255, 0.2);
      }
    }

    .btns {
      display: flex;

      .btn {
        padding: 0 26px;
        height: 38px;
        background: #4ea6ff;
        border-radius: 8px;
        //border: 1px solid rgba(64, 158, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        flex-shrink: 0;
        cursor: pointer;

        .search {
          background-size: 100%;
        }

        .btnText {
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          line-height: 36px;
          margin-left: 5px;
        }
      }

      .btn3 {
        margin-right: 0;

        .search {
          width: 17px;
          height: 18px;
          background-image: url("../../assets/images/courseManage/add0.png");
        }
      }

      // .btn3:hover {
      //   background: rgba(64, 158, 255, 0.76);

      //   .search {
      //     background-image: url("../../assets/images/courseManage/add0.png");
      //   }

      //   .btnText {
      //     color: #ffffff;
      //   }
      // }

      .btn3:active {
        background: #0982ff;
      }
    }
  }

  .tableBox {
    margin: 20px 38px 30px;
    display: flex;
    flex: 1;
    flex-direction: column;

    th.ant-table-cell {
      background-color: #eff4fc !important;
      text-align: center;
      color: #999ba3;
    }

    td.ant-table-cell {
      text-align: center;
    }
  }

  .pa {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    .pagination {
      margin-bottom: 20px;
    }

    .ant-pagination-item-link,
    .ant-pagination-item,
    .ant-select-selector,
    .ant-pagination-options-quick-jumper input {
      border-radius: 8px;
    }
  }

  .unout {
    display: none;
  }

  .operation {
    display: flex;
    justify-content: right;

    .fb {
      display: flex;
      margin-right: 20px;

      .jc {
        color: #4ea6ff;
        font-size: 14px;
        margin-left: 20px;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
}

.DelModal {
  .ant-modal {
    .ant-modal-content {
      width: 424px !important;

      .ant-modal-body {
        .delete {
          z-index: 9999;
          width: 424px;
          background: #ffffff;
          box-shadow: 0 1px 35px 0 rgba(118, 136, 166, 0.21);
          border-radius: 4px;
          position: absolute;
          left: 50%;
          top: 10%;
          transform: translate(-50%, -50%);

          .del_header {
            position: absolute;
            width: calc(100%);
            height: 40px;
            background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
                rgba(78, 166, 255, 0) 100%);
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .del-icon {
                width: 16px;
                height: 16px;
                position: relative;
                margin-right: 10px;

                img {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                  background-size: 100% 100%;
                }
              }

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/coursewareManage/QR.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }

            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;

              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;
                flex-shrink: 0;
                cursor: pointer;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }

              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
              }

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>