接口报错

src/components/project/BatchLecturer.vue

@@ -0,0 +1,313 @@
+<template>
+  <a-drawer
+    :visible="visible"
+    class="drawerStyle RouterFaceStu"
+    placement="right"
+    width="1200"
+  >
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">{{ name }}</div>
+        <img
+          style="width: 29px; height: 29px; cursor: pointer"
+          src="@/assets/images/basicinfo/close.png"
+          @click="closeDrawer"
+        />
+      </div>
+      <div class="content">
+        <div class="box">
+          <div style="margin-bottom: 20px;font-size: 18px;font-weight: 700;">选择讲师费汇总:<span style="color:red;margin-left:20px;">256元</span></div>
+          <div class="table">
+            <a-table
+              :columns="columns"
+              :data-source="tableData"
+              :pagination="false"
+              :scroll="{ x: 'max-content' }"
+              row-key="id"
+              :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+            >
+              <template #action="{ record }">
+                <div class="action">
+                  <div style="color: #1890ff;cursor: pointer;" class="btn" v-if="selectedRowKeys.includes(record.id)" @click="removeList(record)">取消选择</div>
+                  <div style="color: #1890ff;cursor: pointer;" class="btn" v-else @click="addList(record)">选择</div>
+                </div>
+              </template>
+            </a-table>
+          </div>
+        </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1" @click="closeDrawer">取消</button>
+        <button class="btn2" @click="queryDrawer">下一步</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+<script setup lang="jsx">
+import {computed, defineEmits,defineProps, ref, watch} from "vue";
+import * as api from '@/api/Lecturer'
+import { message } from "ant-design-vue";
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+  name:{
+    type: String,
+    default: ""
+  }
+});
+watch(()=>props.visible,(val)=>{
+  if(val){
+    api.getListByStatus().then(res=>{
+      if(res.data.code == 200 ){
+        tableData.value = res.data.data
+      }else{
+        message.error(res.data.msg)
+      }
+    }).catch(err=>{
+      message.error(err.data.msg)
+    })
+  }
+})
+const selectedRowKeys = ref([])
+const selectsData = ref([]);
+const onSelectChange = (e, l) => {
+  selectedRowKeys.value = e
+  selectsData.value = l
+}
+const emit = defineEmits({})
+const addList = (item) => {
+  selectedRowKeys.value.push(item.id)
+  selectsData.value.push(item)
+}
+const removeList = (item) => {
+  selectedRowKeys.value = selectedRowKeys.value.filter(t=> t != item.id)
+  selectsData.value = selectsData.value.filter(t=>t.id != item.id)
+}
+const columns = [
+  {
+    title: '讲师名称',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '讲师工号',
+    dataIndex: 'userNo',
+    key: 'userNo',
+    align: 'center',
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  
+  {
+    title: '讲师体系',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '讲师等级',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '发薪地',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+
+  {
+    title: '课程类型',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '课程名称',
+    dataIndex: 'courseName',
+    key: 'courseName',
+    align: 'center',
+  },
+  {
+    title: '授课/开发课程日期',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '授课/开发课程时长',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '参训人数',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '评分',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '课酬基准',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '计划费用',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '应发费用',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+  },
+  {
+    title: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 100,
+    slots: { customRender: "action" },
+  },
+]
+const tableData = ref([])
+const closeDrawer = () => {
+  emit("update:visible", false);
+  selectedRowKeys.value = []
+  selectsData.value = []
+}
+const queryDrawer = () => {
+  emit("selectedRowKeys", selectedRowKeys.value)
+  closeDrawer()
+}
+</script>
+
+<style lang="scss" scoped>
+
+
+.RouterFaceStu {
+  .drawerMain {
+    min-width: 600px;
+    margin: 0px 32px 0px 32px;
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // background-color: red;
+      margin-bottom: 20px;
+
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        // margin-left: 24px;
+      }
+    }
+    .content{
+      margin: 0 20px;
+      .head{
+        display: flex;
+        align-items: center;
+        overflow-x: auto;
+        .list{
+          display: flex;
+          align-items: center;
+          background-color: #666;
+          min-width: 260px;
+          padding: 20px 10px;
+          color: #ffffff;
+          border-radius:6px;
+          margin-right: 20px;
+          margin-bottom: 20px;
+          .left{
+            width: 35%;
+            text-align:right;
+            margin-right:30px;
+            .text{
+              margin-top:20px;
+            }
+          }
+          .right{
+            .text{
+              margin-top:20px;
+            }
+          }
+        }
+        .active{
+          background-color: #f5f5f5;
+          color: #000000;
+        }
+      }
+      .box{
+        .top{
+          display: flex;
+          align-items: center;
+          margin-bottom: 20px;
+          margin-top: 10px;
+          .item{
+            margin-right: 20px;
+          }
+        }
+      }
+    }
+
+    .btnn {
+      height: 72px;
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+      background-color: #fff;
+
+      .btn1 {
+        width: 100px;
+        height: 40px;
+        border: 1px solid #4ea6ff;
+        border-radius: 8px;
+        color: #4ea6ff;
+        background-color: #fff;
+        cursor: pointer;
+      }
+
+      .btn2 {
+        cursor: pointer;
+        width: 100px;
+        height: 40px;
+        background: #4ea6ff;
+        border-radius: 8px;
+        border: 0;
+        margin-left: 15px;
+        color: #fff;
+        margin-right: 15px;
+      }
+    }
+  }
+}
+</style>

src/components/project/ConfirmLecturer.vue

@@ -30,14 +30,14 @@
         <div class="box">
           <div class="top">
             <div class="item">
-              <a-input style="border-radius: 8px;width:240px;" v-model:value="search" placeholder="请输入工号/讲师名称进行搜索" allowClear />
+              <a-input style="border-radius: 8px;width:240px;height: 40px;" v-model:value="search" placeholder="请输入工号/讲师名称进行搜索" allowClear />
             </div>
             <div class="item">
-              <a-range-picker style="border-radius: 8px;width:360px;" v-model:value="value1" />
+              <a-range-picker style="border-radius: 8px;width:360px;height: 40px;" v-model:value="value1" />
             </div>
             <div class="item">
-              <a-button type="primary" style="margin-right:20px;border-radius:8px">搜索</a-button>
-              <a-button type="primary" style="border-radius:8px">重置</a-button>
+              <a-button type="primary" style="margin-right:20px;border-radius:8px;width: 100px;height: 40px;">搜索</a-button>
+              <a-button type="primary" style="border-radius:8px;width: 100px;height: 40px;">重置</a-button>
             </div>
           </div>
           <div class="table">
@@ -57,14 +57,57 @@
         </div>
       </div>
       <div class="btnn">
-        <button class="btn1" @click="closeDrawer">取消</button>
-        <button class="btn2" @click="closeDrawer">确定</button>
+        <button class="btn1" @click="config">确认提交审批</button>
+        <button class="btn1" @click="qureyDrawer">确定</button>
+        <button class="btn2" @click="closeDrawer">取消</button>
       </div>
     </div>
   </a-drawer>
+  <div>
+    <a-modal
+      :visible="modalVisible"
+      :footer="null"
+      :title="null"
+      :centere="true"
+      :closable="false"
+      style="margin-top: 400px"
+      :zIndex="9999"
+      @cancel="close"
+    >
+      <div class="delete">
+        <div class="del_header"></div>
+        <div class="del_main">
+          <div class="header">
+            <div class="del-icons">
+              <img src="@/assets/images/coursewareManage/QR.png" alt=""/>
+            </div>
+            <span>操作确认</span>
+            <div class="close_exit" @click="close"></div>
+          </div>
+          <div class="title">本月可提交审批次数： <span style="color:#4ea6ff"> {{ numTime }} / 10 </span></div>
+          <div class="body">
+            <div>
+              <span>请仔细核对讲师费信息，确认无误后，将自动进入(BPM系统)审批流程。</span>
+            </div>
+          </div>
+          <div class="del_btnbox">
+            <div class="del_btn btn2" @click="close">
+              <div class="btnText">取消</div>
+            </div>
+            <div class="del_btn btn2" @click="handleConfirm">
+              <div class="btnText">确定</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+  </div>
 </template>
 <script setup lang="jsx">
 import {computed, defineEmits,defineProps, ref, watch} from "vue";
+import {message} from "ant-design-vue";
+import * as api from '@/api/Lecturer'
+import dialog from "@/utils/dialog";
 const props = defineProps({
   visible: {
     type: Boolean,
@@ -73,8 +116,26 @@ const props = defineProps({
   name:{
     type: String,
     default: ""
+  },
+  ids:{
+    type: Array,
+    default: ()=>[]
   }
 });
+const modalVisible = ref(false)
+const numTime = ref(0)
+const close = () => {
+  modalVisible.value = false;
+}
+const handleConfirm = () => {
+  if(numTime.value >= 10){
+    message.error('提交审批次数已达上限')
+    return
+  }
+  numTime.value+=1
+  localStorage.setItem('numTime',numTime.value)
+  close()
+}
 const forData = ref([
   {name:'a',id:1},
   {name:'b',id:2},
@@ -85,9 +146,23 @@ const forData = ref([
 ])
 const indexList = ref(1)
 const clickItem = (item,i) => {
-  console.log(item,i,'iiiii')
   indexList.value = i+1
 }
+watch(()=>props.visible,(val)=>{
+  if(val){
+    numTime.value = Number(localStorage.getItem('numTime')||0)
+    api.getListByAffiliation(
+      {
+        name: '',
+        ids: props.ids,
+        beginTime: '',
+        endTime: '',
+      }
+    ).then(res=>{
+      console.log(res,'resss')
+    })
+  }
+})
 const emit = defineEmits({})
 const columns = [
   {
@@ -190,11 +265,132 @@ const columns = [
   },
 ]
 const closeDrawer = () => emit("update:visible", false);
-
+const qureyDrawer = () => {
+  dialog({
+    content: '是否确认讲师费信息无误？提交后按“培训发生组织”汇总至审批中心，等待验证后“提交”进入审批流程。',
+    ok: () => {
+      closeDrawer()
+    }
+  })
+}
+const config = () => {
+  modalVisible.value = true;
+}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.delete {
+  min-width: 424px;
+  background: #ffffff;
+  box-shadow: 0px 1px 35px 0px 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-icons {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        margin-right: 10px;
+
+        img {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          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%;
+      }
+
+    }
+    .title{
+      padding: 0 30px;
+      margin-top: 34px;
+    }
+
+    .body {
+      width: 100%;
+      padding: 0 30px;
+      margin: 34px auto 56px auto;
+      margin-top: 10px;
+      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;
+      }
+
+    }
+  }
+}
 
 .RouterFaceStu {
   .drawerMain {
@@ -230,7 +426,7 @@ const closeDrawer = () => emit("update:visible", false);
         .list{
           display: flex;
           align-items: center;
-          background-color: #666;
+          background-color: #f5f5f5;
           min-width: 260px;
           padding: 20px 10px;
           color: #ffffff;
@@ -241,19 +437,26 @@ const closeDrawer = () => emit("update:visible", false);
             width: 35%;
             text-align:right;
             margin-right:30px;
+            color: rgba(116, 120, 141, 0.603921568627451);
             .text{
               margin-top:20px;
             }
           }
           .right{
+            color: #646C9A;
             .text{
               margin-top:20px;
             }
           }
         }
         .active{
-          background-color: #f5f5f5;
-          color: #000000;
+          background-color: #4ea6ff;
+          .left{
+            color: #ffffff;
+          }
+          .right{
+            color: #ffffff;
+          }
         }
       }
       .box{
@@ -277,11 +480,11 @@ const closeDrawer = () => emit("update:visible", false);
       left: 0;
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: end;
       box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
       background-color: #fff;
 
-      .btn1 {
+      .btn2 {
         width: 100px;
         height: 40px;
         border: 1px solid #4ea6ff;
@@ -289,16 +492,17 @@ const closeDrawer = () => emit("update:visible", false);
         color: #4ea6ff;
         background-color: #fff;
         cursor: pointer;
+        margin-right: 15px;
       }
 
-      .btn2 {
+      .btn1 {
         cursor: pointer;
         width: 100px;
         height: 40px;
         background: #4ea6ff;
         border-radius: 8px;
         border: 0;
-        margin-left: 15px;
+        margin-right: 15px;
         color: #fff;
       }
     }