feat:修改面授课

src/components/drawers/EvList.vue

@@ -2,22 +2,33 @@
   <div @click="openDrawer">
     <slot></slot>
   </div>
-  <a-drawer :visible="visible" class="drawerStyle addonlineDrawer" width="800" title="选择测评"
-            placement="right">
+  <a-drawer
+    :visible="visible"
+    class="drawerStyle addonlineDrawer"
+    width="800"
+    title="选择测评"
+    placement="right"
+  >
     <div class="drawerMain">
       <div class="header">
         <div class="headerTitle">选择测评</div>
-        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
-             @click="closeDrawer"/>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
       </div>
-      <div class="contentMain">
+      <div class="contentMain" v-if="data.length > 0">
         <div class="main_items">
           <div class="mi_ipts">
             <div class="mii_ipt">
               <div class="ipt_name"></div>
               <div class="fi_input">
-                <a-input v-model:value="params.keyword" style="width: 424px; height: 40px; border-radius: 8px"
-                         placeholder="请输入测评名称"/>
+                <a-input
+                  v-model:value="params.keyword"
+                  style="width: 424px; height: 40px; border-radius: 8px"
+                  placeholder="请输入测评名称"
+                />
               </div>
             </div>
           </div>
@@ -34,18 +45,97 @@
         </div>
         <div class="main_table">
           <a-table
-              :customRow="customRow"
-              class="ant-table-striped"
-              :row-class-name="(_, index) => (index % 2 === 1 ? 'table-striped' : null)"
-              row-key="id"
-              :columns="columns"
-              :data-source="data"
-              :loading="loading"
-              :pagination="pagination"
-              :row-selection="rowSelection"
+            :customRow="customRow"
+            class="ant-table-striped"
+            :row-class-name="
+              (_, index) => (index % 2 === 1 ? 'table-striped' : null)
+            "
+            row-key="id"
+            :columns="columns"
+            :data-source="data"
+            :loading="loading"
+            :pagination="pagination"
+            :row-selection="rowSelection"
           />
         </div>
       </div>
+      <div class="contentMain nolimits" v-else>
+        <div class="limitstext1">
+          抱歉，您没有关联测评的权限，您可以联系下方管理员开启权限
+        </div>
+        <div class="limitstext2">测评工具介绍</div>
+        <div class="limitsRow">
+          <div class="limitsRowDrop"></div>
+          <div class="limitsRowText">
+            人才发展项目中恰当运用测评手段可以更为精准地定位培训需求，更有针对性地设计培养项目和课程；同时，也能够帮助学员精准认知自身问题，提高在项目中的参与度。
+          </div>
+        </div>
+        <div class="limitsRow" style="margin-top: 10px">
+          <div class="limitsRowDrop"></div>
+          <div class="limitsRowText">
+            BOEU测评部经过多年的额实践，积累了一套覆盖“能力、性格和动力”三大方面的测评工具，可在人才发展项目中选择使用。
+          </div>
+        </div>
+        <div class="tool" v-for="(item, key) in toolList" :key="key">
+          <div
+            class="toolName"
+            :style="{
+              backgroundColor:
+                key === 0
+                  ? 'rgba(0, 77, 126)'
+                  : key === 1
+                  ? 'rgba(184, 0, 0)'
+                  : 'rgba(46, 129, 83)',
+            }"
+          >
+            <div>{{ item.name[0] }}</div>
+            <div>{{ item.name[1] }}</div>
+          </div>
+          <div class="toolEvery1" v-for="(i, k) in item.children" :key="k">
+            <div
+              class="toolEveryText1"
+              :style="{
+                color:
+                  key === 0
+                    ? 'rgba(5,75,120)'
+                    : key === 1
+                    ? 'rgba(169,3,3)'
+                    : 'rgba(44,120,79)',
+              }"
+            >
+              {{ i.text1 }}
+            </div>
+            <div class="toolEveryText2">{{ i.text2 }}</div>
+            <div
+              class="toolEveryText3"
+              v-if="i.text3"
+              :style="{
+                color:
+                  key === 0
+                    ? 'rgba(5,75,120)'
+                    : key === 1
+                    ? 'rgba(169,3,3)'
+                    : 'rgba(44,120,79)',
+              }"
+            >
+              {{ i.text3 }}
+            </div>
+            <div class="toolEveryText4" v-if="i.text4">{{ i.text4 }}</div>
+          </div>
+        </div>
+        <div class="limitsRow">
+          <div class="limitsRowDrop"></div>
+          <div class="limitsRowText">
+            如项目中有测评需求，请您联系BOEU测评部
+          </div>
+        </div>
+        <div class="limitsRow">
+          <div class="limitsRowDrop"></div>
+          <div class="limitsRowText">
+            联系人：王逸（10167304） 联系电话：010-60965646
+          </div>
+        </div>
+      </div>
       <div class="main_btns">
         <button class="btn1" @click="closeDrawer">取消</button>
         <button class="btn2" @click="confirm">确定</button>
@@ -54,19 +144,83 @@
   </a-drawer>
 </template>
 <script setup>
-import {computed, defineEmits, defineProps, ref, watch} from "vue";
-import {useBoeApiPage} from "@/api/request";
-import {TEST_PAGE} from "@/api/ThirdApi";
-import {message} from "ant-design-vue";
-import {useStore} from "vuex";
-
+import { computed, defineEmits, defineProps, ref, watch } from "vue";
+import { useBoeApiPage } from "@/api/request";
+import { TEST_PAGE } from "@/api/ThirdApi";
+import { message } from "ant-design-vue";
+import { useStore } from "vuex";
+const toolList = ref([
+  {
+    name: ["能力类", "测验工具"],
+    children: [
+      {
+        text1: "职场准备度测评",
+        text2: "无工作经验学生",
+        text3: "职业能力成熟度测评",
+        text4: "五年以内工龄员工",
+      },
+      {
+        text1: "职业认知能力测评",
+        text2: "五年内工龄员工",
+        text3: "商业推荐测评",
+        text4: "五年内工龄员工",
+      },
+      {
+        text1: "沟通能力测评",
+        text2: "五年内工龄员工",
+        text3: "情商测评",
+        text4: "各层级人员",
+      },
+      {
+        text1: "管理行为自检问卷",
+        text2: "基/中/高层管理者",
+        text3: "管理者情境判断测评",
+        text4: "基/中高层管理者",
+      },
+    ],
+  },
+  {
+    name: ["性格/风格", "测验工具"],
+    children: [
+      {
+        text1: "PDP性格类型测验",
+        text2: "各层级人员",
+      },
+      {
+        text1: "RTC综合评估",
+        text2: "各层级人员",
+      },
+      {
+        text1: "大五职业性格测评",
+        text2: "各层级人员",
+      },
+      {
+        text1: "领导风格测验",
+        text2: "各层级人员",
+      },
+    ],
+  },
+  {
+    name: ["动机/价值观", "测验工具"],
+    children: [
+      {
+        text1: "动机测验（内隐&外显）",
+        text2: "各层级人员",
+      },
+      {
+        text1: "职业兴趣测验",
+        text2: "各层级人员",
+      },
+    ],
+  },
+]);
 const props = defineProps({
   taskList: [],
   evaluationTypeId: String,
-  evaluationTypeName: Number
-})
-const visible = ref(false)
-const emit = defineEmits({})
+  evaluationTypeName: Number,
+});
+const visible = ref(false);
+const emit = defineEmits({});
 
 const columns = ref([
   {
@@ -100,50 +254,54 @@ const columns = ref([
     align: "center",
     ellipsis: true,
   },
-])
+]);
 
 const store = useStore();
 
 const initParams = {
-  keyword: '',
+  keyword: "",
   page: 1,
   size: 10,
-  user_id: store.state.userInfo.id
+  user_id: store.state.userInfo.id,
   // orderAsc: true
-}
-const params = ref(initParams)
+};
+const params = ref(initParams);
 
 const rowSelectKeys = ref([]);
 const selectsData = ref([]);
 const taskIndex = ref(-1);
 
-const {data, loading, total, fetch} = useBoeApiPage(TEST_PAGE, params.value, {
+const { data, loading, total, fetch } = useBoeApiPage(TEST_PAGE, params.value, {
   init: false,
-  result: res => {
-    let newArr = []
+  result: (res) => {
+    console.log("获取测评", res);
+    let newArr = [];
     for (let i = 0; i < res.result.data.length; i++) {
       res.result.data[i].id = res.result.data[i].quiz_kid;
-      newArr.push(res.result.data[i])
+      newArr.push(res.result.data[i]);
     }
-    return newArr
+    return newArr;
   },
-  totalPage: res => res.result.total_page_num,
-  total: res => res.result.count
-})
-console.log(data, 222)
+  totalPage: (res) => res.result.total_page_num,
+  total: (res) => res.result.count,
+});
+
 watch(taskIndex, () => {
   if (taskIndex.value >= 0) {
-    rowSelectKeys.value = [props.taskList[taskIndex.value].courseId]
-    selectsData.value = data.value.find(t => t.id === props.taskList[taskIndex.value].courseId) || {}
+    rowSelectKeys.value = [props.taskList[taskIndex.value].courseId];
+    selectsData.value =
+      data.value.find(
+        (t) => t.id === props.taskList[taskIndex.value].courseId
+      ) || {};
   }
-})
+});
 
 const customRow = (record) => ({
   onClick: () => {
-    rowSelectKeys.value = [record.id]
-    selectsData.value = [record]
-  }
-})
+    rowSelectKeys.value = [record.id];
+    selectsData.value = [record];
+  },
+});
 
 const pagination = computed(() => ({
   total: total.value,
@@ -155,20 +313,20 @@ const pagination = computed(() => ({
 
 const changePagination = (e) => {
   params.value.pageIndex = e;
-  fetch()
+  fetch();
 };
 const rowSelection = computed(() => ({
-  type: 'radio',
+  type: "radio",
   columnWidth: 20,
   selectedRowKeys: rowSelectKeys.value,
   onChange: onSelectChange,
   preserveSelectedRowKeys: true,
-  getCheckboxProps: getCheckboxProps
+  getCheckboxProps: getCheckboxProps,
 }));
 const getCheckboxProps = () => ({
   // 某几项默认禁止选中(R: 当state等于1时)
-  disabled: false
-})
+  disabled: false,
+});
 
 function onSelectChange(e, l) {
   rowSelectKeys.value = e;
@@ -176,28 +334,28 @@ function onSelectChange(e, l) {
 }
 
 function search() {
-  params.value.pageIndex = 1
-  fetch()
+  params.value.pageIndex = 1;
+  fetch();
 }
 
 function reset() {
   rowSelectKeys.value = [];
   selectsData.value = [];
-  params.value.pageIndex = 1
-  params.value.keyWord = ''
-  fetch()
+  params.value.pageIndex = 1;
+  params.value.keyWord = "";
+  fetch();
 }
 
 const closeDrawer = () => {
-  visible.value = false
-  taskIndex.value = -1
-  reset()
+  visible.value = false;
+  taskIndex.value = -1;
+  reset();
 };
 
 function confirm() {
   if (!selectsData.value.length || !rowSelectKeys.value.length) {
     message.warning("请选择测评！");
-    return
+    return;
   }
   // if (taskIndex.value === -1) {
   //   let list = props.taskList
@@ -220,18 +378,17 @@ function confirm() {
   // if(props.taskList!=undefined){
   //   emit('update:taskList', [...props.taskList])
   // }
-  emit('update:evaluationTypeId', selectsData.value[0].id)
-  emit('update:evaluationTypeName', selectsData.value[0].title)
-  closeDrawer()
+  emit("update:evaluationTypeId", selectsData.value[0].id);
+  emit("update:evaluationTypeName", selectsData.value[0].title);
+  closeDrawer();
 }
 
 function openDrawer(i) {
-  (i >= 0) && (taskIndex.value = i)
-  visible.value = true
+  i >= 0 && (taskIndex.value = i);
+  visible.value = true;
 }
 
-defineExpose({openDrawer})
-
+defineExpose({ openDrawer });
 </script>
 <style lang="scss">
 .ant-table-striped :deep(.table-striped) td {
@@ -417,7 +574,9 @@ defineExpose({openDrawer})
           background-color: #eff4fc !important;
         }
 
-        .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
+        .ant-table-tbody
+          > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
+          > td {
           background: #f6f9fd;
         }
 
@@ -431,6 +590,76 @@ defineExpose({openDrawer})
         }
       }
     }
+    .nolimits {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .limitstext1 {
+        margin-top: 30px;
+        font-size: 23px;
+        color: #333333;
+        font-weight: 600;
+      }
+      .limitstext2 {
+        margin-top: 30px;
+        font-size: 18px;
+        color: #333333;
+        font-weight: 800;
+      }
+      .limitsRow {
+        display: flex;
+        align-items: center;
+        margin-top: 20px;
+        width: 100%;
+        .limitsRowDrop {
+          width: 8px;
+          height: 8px;
+          background-color: #333333;
+          border-radius: 4px;
+          margin-left: 20px;
+          margin-right: 20px;
+          flex-shrink: 0;
+        }
+        .limitsRowText {
+          display: flex;
+          flex-wrap: wrap;
+          font-size: 16px;
+          color: #333333;
+          font-weight: 400;
+          line-height: 28px;
+        }
+      }
+      .tool {
+        width: 100%;
+        border-bottom: 1px dashed rgba(0, 78, 126);
+        display: flex;
+        margin-top: 30px;
+        align-items: center;
+        padding-bottom: 30px;
+        .toolName {
+          width: 100px;
+          height: 100px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          color: #fff;
+          font-size: 16px;
+          font-weight: 600;
+
+          border-radius: 5px;
+          margin-left: 20px;
+          margin-right: 20px;
+        }
+        .toolEvery1 {
+          text-align: center;
+          font-size: 16px;
+          color: rgba(71, 74, 76);
+          margin-right: 12px;
+          line-height: 26px;
+        }
+      }
+    }
 
     .main_btns {
       height: 72px;