From 5e071a1f8af345a0b2bc009774f77e0f96bc4d3f Mon Sep 17 00:00:00 2001
From: zhangsir <2207038757@qq.com>
Date: Fri, 22 Sep 2023 17:34:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E7=A8=8B=E6=8E=A8=E8=8D=90=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../courserecommended/CourseCheck.vue         | 500 ++++++++++++++++++
 1 file changed, 500 insertions(+)
 create mode 100644 src/components/courserecommended/CourseCheck.vue

diff --git a/src/components/courserecommended/CourseCheck.vue b/src/components/courserecommended/CourseCheck.vue
new file mode 100644
index 00000000..68d3f839
--- /dev/null
+++ b/src/components/courserecommended/CourseCheck.vue
@@ -0,0 +1,500 @@
+<!-- 课件管理页面 -->
+<template>
+  <!-- 预览弹窗 -->
+  <a-modal
+    :visible="visible"
+    title="查看"
+    :footer="null"
+    :closable="false"
+    wrapClassName="modalStyle lookCourseModal"
+    width="80%"
+    @cancel="handleCancel"
+    @ok="handleCancel"
+    class="modal"
+  >
+  <div class="header">李玉冰(00004409)</div>
+  <div class="title">
+    <dl>
+      <dt>推荐组织：京东方大学堂</dt>
+      <dt>课程数：3</dt>
+    </dl>
+    <div class="inp">
+      <a-input v-model:value="value" placeholder="请输入姓名" />
+      <a-select
+              v-model:value="auditStatus"
+              dropdownClassName="dropdown-style"
+              style="width: 150px;margin-right: 16px;text-align: left;"
+              placeholder="已完成"
+              size="large"
+              :options="options1"
+              allowClear
+            >
+            </a-select>
+      <a-button type="primary">搜索</a-button>
+    </div>  
+  </div>
+
+      <!-- 表格 -->
+      <div class="tableBox">
+      <a-table style="border: 1px solid #f2f6fe;" :columns="column" :data-source="data" 
+        :scroll="{ x: 1100 }" :pagination="false" :loading="!tableLoading"  :row-selection="rowSelection">
+        <template #title>
+          <a-button type="primary">催促学习</a-button>
+        </template>
+        <template #operation="{ record }">
+          <a-space style="padding-right: 10px">
+            
+            <a-button
+              @click="() => handleLook(record, String(record.courseform))"
+              type="link"
+              >催促学习
+            </a-button>
+            
+          </a-space>
+        </template>
+      </a-table>
+      <div class="pa" style="display: flex; justify-content: flex-end; padding: 0 38px">
+        <a-pagination show-quick-jumper :pageSize="searchData.pageSize" :current="searchData.pageIndex" :total="total"
+          class="pagination" @change="handelChangePage" show-size-changer />
+      </div>
+    </div>
+       
+  </a-modal>
+  <SeeModal
+      :visible="lookCourseModal"
+      :detail="faceDetailObj"
+      @cancel="ft_exit_see"
+    />
+</template>
+
+<script>
+import { ref,reactive, toRefs, defineComponent, watch, computed,onMounted } from "vue";
+import { useStore } from "vuex";
+// import OrgClassCheck from "@/components/project/OrgClassCheck";
+import OrgClass from "@/components/project/OrgClass";
+import { detail } from "@/api/indexCourse";
+import { boeRequest } from "@/api/request";
+import {
+  RECOMMEND_PAGE,
+  
+} from "@/api/case";
+import { Form, message,} from "ant-design-vue";
+import SeeModal from "@/components/courserecommended/CourseRecommended.vue";
+
+// const { resetFields } = Form.useForm(searchData, {});
+
+export default defineComponent({
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    detail: {
+      type: Object,
+      default: () => ({}),
+    },
+    login:{
+      type:Boolean,
+      default:false,
+    },
+    data:{
+      type:Array,
+      default:()=>([])
+    },
+    
+  },
+  components: {
+    // OrgClassCheck,
+    OrgClass,
+    SeeModal,
+    
+  },
+  setup(props, { emit }) {
+    const options1 = ref([
+      {
+        value: 0,
+        label: "全部",
+      },
+      {
+        value: 1,
+        label: "未开始",
+      },
+      {
+        value: 2,
+        label: "进行中",
+      },
+      {
+        value: -1,
+        label: "已完成",
+      },
+    ]);
+
+
+// 计算全选
+const rowSelection = computed(() => {
+  return {
+    selectedRowKeys: state.selectedRowKeys,
+    onChange: onSelectChange,
+    preserveSelectedRowKeys: true,
+    getCheckboxProps: record => ({
+      disabled: state.caseTitleList.some((item) => record.id == item.id)
+    }),
+  }
+});
+//计算出来已选中状态
+const onSelectChange = (selectedRowKeys, selectedRow) => {
+  state.selectedRowKeys = selectedRowKeys
+  // 过滤取消的
+  // state.caseTitleList = state.caseTitleList.filter((item) => selectedRowKeys.includes(item.id))
+  // state.selectedRow = selectedRow.filter(Boolean)
+  const mergedArray = state.caseTitleList.concat(selectedRow.filter(Boolean));
+  state.selectedRow = Object.values(
+    mergedArray.reduce((acc, obj) => {
+      acc[obj.id] = obj;
+      return acc;
+    }, {})
+  );
+  console.log(state.selectedRow, state.caseTitleList);
+
+};
+
+
+        // 预览弹框 开启和关闭
+    const ft_exit_see = () => {
+      state.lookCourseModal = false;
+    };
+    const handleLook = async (itm, type) => {
+    //   // if (type === "1") {
+    //   //   return;
+    //   // }
+    //   // state.offcourseId = itm.id;
+
+    //   // const item = await detail({
+    //   //   offcourseId: Number(state.offcourseId),
+    //   // }).then((res) => {
+    //   //   if (res.data.code === 200) return res.data.data;
+    //   // });
+      state.lookCourseModal = true;
+    //   // item.attach = item.attach == "" ? [] : item.attach.split(",");
+    //   // state.faceDetailObj = item;
+    //   // console.log("获取查看信息", item);
+    };
+
+// // 查询数据
+const searchData = ref({
+  pageIndex: 1,
+  pageSize: 10,
+  recommendName: "",
+  recommendTimeList: [],
+});
+const handelChangePage = (page, pageSize) => {
+  state.tableLoading = false;
+  searchData.value.pageSize = pageSize;
+  searchData.value.pageIndex = page;
+  getList();
+};
+const getList = (num) => {
+//   if (num === 1) searchData.value.pageIndex = 1;
+  boeRequest(RECOMMEND_PAGE, searchData.value)
+    .then((res) => {
+      state.tableLoading = true;
+      state.data = res?.result?.list || [];
+      state.total = res?.result?.count || 0;
+      console.log(state.data)
+      
+    })
+    .catch(() => {
+      state.tableLoading = false;
+    });
+};
+getList()
+
+    const value = ref('');
+    console.log("props", props);
+    const store = useStore();
+
+    const state = reactive({
+      auditStatus: null,
+      selectedRow: [],//选择的每一行数据
+      caseTitleList: [],
+      selectedRowKeys: [],//案例标题的id
+      faceDetailObj:{},
+      lookCourseModal:false,
+      tableLoading:false,
+      imgList: [],
+      categoryName: "",
+      locationHref:
+            process.env.VUE_APP_FILE_PATH,
+
+      //目标任务
+      orgSelect: [],
+      orgSelectName: [],
+      orgSelectFullName: [],
+      selectJobName: [],
+      selectJobId: [],
+      selectBandName: [],
+      selectBandId: [],
+      //资源归属
+      sourceBelongId: [],
+      sourceBelongName: [],
+      sourceBelongFullName: [],
+      orgSelectNames: "",
+      //列表数据
+      total:0,
+      column: [
+        {
+          title: "姓名",
+          dataIndex: "recommendBy",
+          key: "recommendBy",
+          width: "35%",
+          align: "left",
+          ellipsis: true,
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "课程系列包名称",
+          dataIndex: "listPageName",
+          key: "listPageName",
+          width: "15%",
+          align: "left",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "推荐时间",
+          dataIndex: "recommendTime",
+          key: "recommendTime",
+          width: "15%",
+          align: "left",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "课程数",
+          dataIndex: "courseCount",
+          key: "courseCount",
+          width: "15%",
+          align: "left",
+          className: "h",
+          customRender: ({ text }) => {
+            return text ? text : "-";
+          },
+        },
+        {
+          title: "操作",
+          width: "10%",
+          dataIndex: "operation",
+          key: "operation",
+          align: "left",
+          slots: { customRender: "operation" },
+        },
+        
+      ],
+      data:[]
+    });
+    
+
+    const sysTypeOptions = computed(() => store.state.content_type);
+    //获取岗位
+    const jobType = computed(() => store.state.job_type);
+    //获取band
+    const bandList = computed(() => store.state.band);
+    watch(
+      () => props.detail.sysTypeId,
+      () => {
+        state.categoryName = findClassFullName(sysTypeOptions.value);
+      }
+    );
+    watch(
+      () => props.detail.id,
+      () => {
+        detail({
+          offcourseId: Number(props.detail.id),
+        }).then((res) => {
+          console.log("res", res);
+          if (res.data.code === 200) {
+            let item = res.data.data;
+            if (item.jobTypeIds) {
+              state.selectJobId = item.jobTypeIds.split(",");
+              console.log("selectJobId" + JSON.stringify(state.selectJobId));
+            }
+            if (item.bandIds) {
+              state.selectBandId = item.bandIds.split(",");
+            }
+            console.log("state.selectBandId", state.selectBandId);
+            state.sourceBelongId = item.sourceBelongId;
+            state.sourceBelongName = item.sourceBelongFullName;
+            if (item.organizationIds && item.organizationNames) {
+              let orgSelectIds = item.organizationIds;
+              let orgSelectNames = item.organizationNames;
+              orgSelectIds = orgSelectIds.split(",");
+              orgSelectNames = orgSelectNames.split(",");
+              console.log(
+                "orgSelectIds&orgSelectNames",
+                orgSelectIds,
+                orgSelectNames
+              );
+              let arrObj = [];
+              arrObj = orgSelectIds.map((item, index) => {
+                return { value: item, label: orgSelectNames[index] };
+              });
+              console.log("arrObj-------------", arrObj);
+              state.orgSelect = arrObj;
+              state.orgSelectNames = orgSelectNames;
+            }
+          }
+        });
+      },
+      {
+        deep: true,
+      }
+    );
+
+    function findClassFullName(list, name = "") {
+      return (
+        (list &&
+          list.length &&
+          list
+            .map((e) =>
+              props.detail.sysTypeId == e.code
+                ? name
+                  ? name + "-" + e.name
+                  : e.name
+                : findClassFullName(
+                    e.children,
+                    name ? name + "-" + e.name : e.name
+                  )
+            )
+            .filter((name) => name)
+            .join("")) ||
+        ""
+      );
+    }
+
+    const filterTxt = (txt) => {
+      if (txt) {
+        return txt;
+      } else {
+        return "-";
+      }
+    };
+    const handleCancel = () => {
+      console.log("关闭");
+      emit("cancel");
+      //目标任务
+      state.orgSelect = [];
+      state.orgSelectName = [];
+      state.orgSelectFullName = [];
+      state.selectJobName = [];
+      state.selectJobId = [];
+      state.selectBandName = [];
+      state.selectBandId = [];
+      //资源归属
+      state.sourceBelongId = [];
+      state.sourceBelongName = [];
+      state.sourceBelongFullName = [];
+      state.orgSelectNames = "";
+    };
+
+    function openDown(link) {
+      window.open(process.env.VUE_APP_FILE_PATH + link);
+      //:href="item.indexOf('http') !== -1 ? item : locationHref + item"
+    }
+    return {
+      ...toRefs(state),
+      filterTxt,
+      openDown,
+      handleCancel,
+      jobType,
+      bandList,
+      value,
+      searchData,
+      getList,
+      handelChangePage,
+      handleLook,
+      ft_exit_see,
+      rowSelection,
+      onSelectChange,
+      options1,
+    };
+  },
+});
+</script>
+<style lang="scss">
+.modal{
+  overflow-y: auto;
+}
+  .header{
+    // background-color: rgba(255, 255, 255, 0);
+    box-sizing: border-box;
+    font-weight: 650;
+    color: #333333;
+    text-align: left;
+    padding:20px 0 16px 19px;
+    border-bottom: 1px solid rgba(121, 121, 121, 0.38);
+  }
+  .title{
+    display: flex;
+    justify-content: space-between;
+  }
+  dl{
+    display: flex;
+    background-color: rgba(255, 255, 255, 0);
+    box-sizing: border-box;
+    color: #333333;
+    text-align: left;
+    margin-left: 19px;
+    margin-top: 25px;
+  }
+  dl dt{
+    padding-right: 70px;
+    color: #333333;
+    text-align: left;
+  }
+  .inp{
+    text-align: right;
+    margin-bottom: 32px;
+    margin-top: 17px;
+  }
+  .ant-input{
+    width: 130px;
+    height: 40px;
+    margin-right: 18px;    
+  }
+  .ant-btn-primary{
+    width: 90px;
+    height: 40px;
+    border-radius: 5px;
+    box-sizing: border-box;
+    margin-right: 30px;
+  }
+
+   .tableBox {
+    // margin: 20px 38px 30px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    // margin-bottom: 36px;
+    th.ant-table-cell {
+      background-color: #eff4fc !important;
+      text-align: center;
+      color: #999ba3;
+    }
+
+    td.ant-table-cell {
+      text-align: center;
+    }
+  }
+  .pa{
+    margin-top: 36px;
+    margin-bottom: 43px;
+  }
+
+</style>