讲师费统计页面调整

src/views/lecturer/CostDetails.vue

@@ -0,0 +1,880 @@
+<!-- 讲师费月度统计详情页面 -->
+<template>
+    <div @click="openDrawer">
+    <slot></slot>
+  </div>
+    <a-drawer  class="MonthlyStatistics " :visible="visible" width="1000" title="费用详情" placement="right">
+
+    <!-- 搜索框及按钮 -->
+    <div class="filter" style="min-width: 1380px;">
+      <a-form layout="inline" >
+          <a-form-item  class="select">
+            <div  style="width: 276px; height: 40px; border-radius: 8px"  >
+          <ProjectManager v-model:value="searchParam.managerId" 
+        v-model:name="searchParam.manager"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
+          </a-form-item>
+          <a-form-item class="select">
+            <a-select style="width: 230px" v-model:value="searchParam.payrollPlaceId" placeholder="发薪地"
+                  :options="PlaceOfPayList"/>
+          </a-form-item>
+          <a-form-item class="select " >
+            <a-select style="width: 276px" v-model:value="searchParam.trainorgId" placeholder="培训发生组织"
+              :options="trainOrglist">
+            </a-select>
+          </a-form-item>
+          <div style="display: flex; margin-bottom: 20px">
+            <a-button @click="searchSubmit()" type="primary" class="resetbtn">查询 </a-button>
+            <!-- <div class="btn btn1" @click="searchReset" style="background:rgba(64, 158, 255, 0);" > -->
+            <!-- <div class="search"></div> -->
+            <a-button class="resetbtn " @click="searchReset">重置</a-button>
+          </div>
+        </a-form>
+        <div style="width: 100%;"></div>   
+        <div style="display: flex; margin-bottom: 20px">
+            <a-button  class="resetbtn"  @click="handleFeeMonthly" type="primary"><UploadOutlined/>导出
+                </a-button>
+                </div>   
+      <!-- 表格 -->
+      <div style="padding: 10px 0">
+        <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
+          :data-source="tableData" :loading="tableLoading" @expand="expandTable" :pagination="false">
+          <template #bodyCell="{ record, column }">
+            <template v-if="column.key === 'operation'">
+              <a-space >
+                <a-button type="link" @click="() => handleLook(record, String(record.courseform))">查看</a-button>
+              </a-space>
+            </template>
+            <template v-if="column.key === 'teacherOrg'">
+              <a-space style="display:flex ;justify-content: space-around;  ">
+                <a-popover>
+    <template #content>
+      <p>{{ record.teacherOrg }}</p>
+    </template>
+    </a-popover></a-space>
+  </template>
+          </template>
+        </a-table>
+      </div>
+
+    </div>
+    <!-- 翻页 -->
+    <div class="tableBox ">
+      <div style="float: right;">
+        <a-pagination
+          v-if="tableDataTotal > 10"
+        :showSizeChanger="false"
+        :showQuickJumper="true"
+        :hideOnSinglePage="true"
+        :pageSize="searchParam.pageSize"
+        :current="searchParam.pageNo"
+        :total="tableDataTotal"
+        class="pagination"
+        @change="changePagination"
+      />
+      </div>
+    </div>
+    <!-- 二级页面弹窗组件 -->
+    <a-modal :visible="teacherdialog"  @ok="closeModal2" :footer="null" :closable="false"  wrapClassName="CreatePath" 
+        >
+        <div class="out">
+          <div class="top">
+          <!-- <img class="topimg" src="../../assets/images/courseManage/add1.png" /> -->
+        <div class="topc">{{teacherdialogtitle }}</div>
+          <div @click="cancelTeacherDialog" style="margin-left: 850px; cursor: pointer">
+            <img
+              style="width: 20px; height: 20px"
+              src="../../assets/images/basicinfo/close.png"
+            />
+          </div>
+        </div>
+        <div class="LecturerFeeStatistics">
+          <div class="filter">
+            <div class="filterItems">
+              <div style=" margin-right: 20px ;">周期 : {{ summaryDate }}</div>
+              <div>资源归属 :{{ resbgTxt }}</div>
+              <div style="width:100%; height:1px"></div>
+              <div class="select">
+                <a-input v-model:value="queryFeeMonthly.teacherNo" style="width: 230px; height: 40px; border-radius: 8px"
+                  placeholder="请输入工号/姓名检索" allowClear showSearch>
+                </a-input>
+              </div>
+              <div class="select">
+                <a-select style="width: 230px" v-model:value="queryFeeMonthly.payrollPlaceId" placeholder="发薪地"
+                  :options="PlaceOfPayList">
+                </a-select>
+              </div>
+              <div class="select">
+                <a-select style="width: 230px" placeholder="请选择所属组织" v-model:value="queryFeeMonthly.departId"
+                  :options="getOrganizationList">
+                </a-select>
+              </div>
+              <div class="del_btnbox" style="margin-top: 0px ;">
+                <a-button class="del_btn btn1" @click="searchFeeMonthlya">搜索</a-button>
+                <a-button class="del_btn btn2" @click="handleFeeMonthly">导出
+                </a-button>
+              </div>
+            
+            </div>
+          </div>
+          <!-- 二级列表翻页 -->
+          <div class="tableBox ">
+            <div style="float: right;">
+              <a-pagination v-if="tableDataFeeDetailTotal > 10" :showSizeChanger="true" :hideOnSinglePage="true"
+                :pageSize="pageSize" v-model:current="queryFeeMonthly.pageNo" :total="tableDataFeeDetailTotal"
+                class="pagination" @change="changeFeeDetailPagination" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+  </a-drawer>
+</template>
+<script lang="jsx">
+import { reactive, toRefs, ref, watch } from "vue";
+import { message } from "ant-design-vue";
+import { useRouter,useRoute } from "vue-router";
+import dayjs from "dayjs";
+import {
+    UploadOutlined,
+  } from '@ant-design/icons-vue';
+import { getPayRollPlace } from "../../api/Lecturer";
+import { getOrganization } from "../../api/Teaching";
+import ProjectManager from "@/components/project/ProjectManagerNew";
+import {getTrainOrg} from "../../api/lecturerFeeManagement";
+import { queryTeacherFeeTotalList, queryTeacherFeeMonthly, getTeacherFeeDetailListByTeacherNo, getTeacherFeeListByTeacherNo ,getPreviousTeacherfee} from "../../api/lecturerFeeStatistics";
+export default {
+  name: "MonthlyStatistics",
+  components: {
+    UploadOutlined,//图标--导出,
+    ProjectManager
+  },
+  props:{
+    visible:{
+        type:Boolean,
+        default:false
+    }
+  },
+  setup() {
+    const router=useRouter();
+    const { query: { id }} = useRoute();
+    const state = reactive({
+        id,
+        // visible:false,
+      summaryDate: null,
+      resbgTxt: null,
+      tableDataTotal: -1,//table列表总条数,
+      tableDataFeeDetailTotal: -1, // 二级列表总条数
+      currentPage2: 1,
+      pageSize2: 10,
+      pageSize: 10,
+      teacherdialog: false,
+      teacherdialoga: false,
+      teacherdialogtitle: null,
+      searchdate: null, //选择时间
+      startTime: null, //开始时间
+      endTime: null, //结束时间
+      searchParam: {
+        pageNo: "1",
+        pageSize: "10",
+        teacherNo: null,
+        payrollPlaceId: null,
+        departId: null,
+        summaryDate:null,
+      },
+      queryFeeMonthly: {
+        teacherNo: null,
+        payrollPlaceId: null,
+        departId: null,
+        pageNo: "1",
+        pageSize: "10"
+      },
+      queryTeacherFeeDetail: {
+        teacherNo: null,
+        teachingDate: null
+      },
+      querytableFee: {
+        teacherNo: null,
+        teachingDate: null,
+        pageNo: '1',
+        pageSize: '10',
+      }
+    })
+    watch(
+    )
+    const columns = ref([
+      {
+        title: '讲师级别',
+        dataIndex: 'levelName',
+        key: 'levelName',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '认证状态 ',
+        dataIndex: 'certStatus',
+        key: 'certStatus',
+        elipsis: true,
+        width: 150,
+        customRender: (value) => {
+          return (
+            <div>
+              {value.record.certStatus == 0 || value.record.certStatus == 1
+                ? {
+                  "0": "未认证",
+                  "1": "已认证",
+                }[value.record.certStatus + ""] || ""
+                : "-"}
+            </div>
+          )
+        }
+      },
+      {
+        title: '费用类型 ',
+        dataIndex: 'courseType',
+        key: 'courseType',
+        elipsis: true,
+        width: 150,
+        customRender: (value) => {
+          return (
+            <div>
+              {value.record.courseType == "0" || value.record.courseType == "1" || value.record.courseTypeype == "2" || value.record.courseTypeype == "3" || value.record.courseTypeype == "4"
+                ? {
+                  "0": "在线",
+                  "1": "面授",
+                  "2": "授课",
+                  "3": "课程开发",
+                  "4": "作业员如模培训",
+                }[value.record.courseType + ""] || ""
+                : "-"}
+            </div>
+          )
+        }
+      },
+      {
+        title: '课程名称 ',
+        dataIndex: 'teachingDate',
+        key: 'teachingDate',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '授课日期 ',
+        dataIndex: 'teachingDate',
+        key: 'teachingDate',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '课程开发日期',
+        dataIndex: 'courseDevelopTime',
+        key: 'courseDevelopTime',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '培训发生组织',
+        dataIndex: 'trainOrg',
+        key: 'trainOrg',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '参训学员人数',
+        dataIndex: 'studentNum',
+        key: 'studentNum',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '授课满意度 ',
+        dataIndex: 'courseAssess',
+        key: 'courseAssess',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '授课时长(H) ',
+        dataIndex: 'teachingTime',
+        key: 'teachingTime',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '课程开发时长 ',
+        dataIndex: 'courseDevelopDate',
+        key: 'courseDevelopDate',
+        elipsis: true,
+        width: 150,
+      },
+      {
+        title: '操作 ',
+        dataIndex: 'operationc',
+        key: 'operationc',
+        elipsis: true,
+        width: 300,
+        scopedSlots: { customRender: "action" },
+      },
+    ])
+    //列表数据
+    const tableData = ref([
+    ])
+    // 搜索
+    const searchSubmit = () => {
+      getTableDate();
+    };
+    const trainOrglist=ref([])
+      //获取培训发生组织
+      const trainOrglista =() => {
+        getTrainOrg().then((res)=>{
+          if (res.data.code === 200) {
+              let arr = res.data.data;
+              let array = [];
+              arr.map((value) => {
+                let obj = {
+                  value: value.trainOrgId,
+                  label: value.trainOrg,
+                };
+                array.push(obj);
+              });
+              trainOrglist.value = array;
+            }
+        }) 
+      }
+      trainOrglista()
+     //修改时间
+     const searchTimeChange = (e, date) => {
+      let startTime = date[0] + " 00:00:00";
+      let endTime = date[1] + " 23:59:59";
+      state.startTime = new Date(startTime).getTime();
+      state.endTime   = new Date(endTime).getTime()  ;
+      // state.searchParam.startDate = new Date(startDate).getTime() ;
+      // state.searchParam.endDate = new Date(endDate).getTime() ;
+      state.searchParam.startDate =  state.startTime? state.startTime:null,
+      state.searchParam.endDate =   state.endTime?  state.endTime:null,
+       console.log(  state.searchParam.startDate ? '111' :'222')
+      console.log(date, state.searchParam.startDate, state.searchParam.endDate);
+    };
+    //二级页面搜索
+    const searchFeeMonthlya = () => {
+      TeacherSystem()
+    }
+    //  List接口数据
+    const getTableDate = (obj) => {
+      state.tableLoading = true
+      state.searchParam.summaryDate= state.id
+      getTeacherFeeListByTeacherNo(state.searchParam)
+        .then((res) => {
+          tableData.value = res.data.data.records
+          state.tableDataTotal = Number(res.data.data.total);
+          state.tableLoading = false
+        })
+    };
+    getTableDate()
+    //重新汇总上月数据
+    const searchResetPrevious=()=>{
+      state.tableLoading = true
+      getPreviousTeacherfee().then((res)=>{
+        tableData.value = res.data.data
+          state.tableDataTotal = Number(res.data.data.total);
+          state.tableLoading = false
+      })
+    }
+    //   // 翻页
+    const changePagination = (page, pageSize) => {
+      state.searchParam.pageNo = page;
+      getTableDate();
+    };
+    //二级列表翻页
+    const changeFeeDetailPagination = (page, pageSize) => {
+      state.queryFeeMonthly.pageNo = page;
+      state.currentPage2 = page;
+      state.pageSize2 = pageSize;
+      TeacherSystem()
+    };
+    //讲师信息弹窗
+    const handleModify = (record) => {
+      state.teacherdialog = true;
+      state.teacherdialogtitle = '讲师费月度统计详情'
+      TeacherSystem()
+    }
+    const PlaceOfPayList = ref([
+    ])
+    //获取讲师发薪地列表
+    const PlaceOfPayLista = () => {
+      getPayRollPlace().then((res) => {
+        if (res.data.code === 200) {
+          let arr = res.data.data;
+          let array = [];
+          arr.map((value) => {
+            let obj = {
+              value: value.payrollPlaceId,
+              label: value.payrollPlaceName,
+            };
+            array.push(obj);
+          });
+          PlaceOfPayList.value = array;
+        }
+        console.log("获取发薪地", PlaceOfPayList);
+      })
+    }
+    PlaceOfPayLista()
+    //获取所属组织
+    const getOrganizationList = ref([
+      //   { value: 0, systemName: "讲师体系" },
+    ]);
+    //获取所属组织
+    const getOrganizationLista = () => {
+      // console.log('getOrganizationList')
+      getOrganization().then((res) => {
+        if (res.data.code === 200) {
+          let arr = res.data.data;
+          let array = [];
+          arr.map((value) => {
+            let obj = {
+              value: value.departId,
+              label: value.orgName,
+            };
+            array.push(obj);
+          });
+          getOrganizationList.value = array;
+        }
+      })
+    }
+    getOrganizationLista()
+    //清空数据
+    const cancel = () => {
+      state.queryFeeMonthly = {
+        teacherNo: null,
+        payrollPlaceId: null,
+        departId: null,
+        pageNo: "1",
+        pageSize: "10"
+      }
+    }
+    //表格内查看数据操作
+    const handleLook = (record) => {
+      let id = record.summaryDate
+      router.push({ path: '/MonthlyStatistics', query: { id } })
+    }
+    // 二级页面导出
+    const handleFeeMonthly = () => {
+      window.open(
+        `${process.env.VUE_APP_BASE_API}/teacher/fee/exportTeacherMonthlyFee?pageNo=${state.currentPage2
+        }&pageSize=${state.pageSize2}
+        &userNo=${state.queryFeeMonthly.payrollPlaceId ? state.queryFeeMonthly.payrollPlaceId : ""}
+        &teacherNo=${state.queryFeeMonthly.teacherNo ? state.queryFeeMonthly.teacherNo : ""}
+        &departId=${state.queryFeeMonthly.departId ? state.queryFeeMonthly.departId : ""}`)
+    }
+
+    return {
+      ...toRefs(state), 
+      trainOrglist,
+        trainOrglista,
+      searchTimeChange,
+      handleFeeMonthly,
+      TeacherSystem,
+      handleLook,
+      cancel,
+      handleModify,
+      changePagination,
+      changeFeeDetailPagination,
+      getTableDate,
+      searchSubmit,
+      searchFeeMonthlya,
+      tableData,
+      columns,
+      PlaceOfPayList,
+      PlaceOfPayLista,
+      getOrganizationList,
+      getOrganizationLista,
+      teacherFeeList,
+      searchResetPrevious,
+
+    }
+  },
+};
+</script>
+<style lang="scss" scoped >
+.MonthlyStatistics {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .filter {
+    margin-left: 38px;
+    margin-right: 38px;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+      .select {
+        margin-right: 20px;
+        margin-bottom: 20px;
+      }
+    }
+}
+.select .ant-picker {
+  width: 410px !important;
+}
+
+.addTimeBox {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .addTime {
+    position: absolute;
+    z-index: 10;
+    margin-left: 10px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+//导出按钮icon
+.daochu {
+  width: 16px;
+  height: 18px;
+  background-image: url("../../assets/images/coursewareManage/export1.png");
+}
+
+//弹窗内详情样式
+.display1 {
+  display: inline-block;
+  width: 200px;
+}
+
+// .display0{
+// display:inline-block ;
+// width:200px ;
+// text-align: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;
+    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;
+    margin-right: 14px;
+  }
+
+  .btn2 {
+    background-color: #4ea6ff;
+    color: #ffffff;
+  }
+}
+
+.ant-table-cell-fix-right {
+  width: 300px !important;
+}
+
+.ant-table-tbody>tr>td {
+  text-align: center;
+}
+
+.ExternalTeaching {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .filter {
+    margin-left: 38px;
+    margin-right: 38px;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .select {
+      margin-right: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.delete {
+  z-index: 9999;
+  width: 424px;
+  background: #ffffff;
+  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+  border-radius: 4px;
+  position: absolute;
+  left: 30%;
+  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;
+        margin-right: 10px;
+        background-image: url(@/assets/images/coursewareManage/notice.png);
+        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;
+      }
+    }
+  }
+}
+
+.CreatePath {
+  .out {
+    z-index: 9999;
+    display: block;
+    position: absolute;
+    top: 90px;
+    width: 1080px !important;
+    height: 650px;
+    overflow: auto;
+    background-color: #fff;
+
+    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+    left: 50%;
+    top: 300px;
+    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;
+        margin-top: -2px;
+      }
+
+      .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;
+      }
+    }
+  }
+}
+
+//添加样式
+.langbtn {
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+// 重置样式
+.resetbtn {
+  width: 100px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+//展开收起样式
+.moreidbtn {
+  border: none;
+  color: #4ea6ff;
+  width: 80px
+}
+
+//小竖线
+.line {
+  float: left;
+  width: 3px;
+  height: 25px;
+  background: #4ea6ff;
+  border-radius: 30%;
+  margin-right: 5px;
+}
+
+//抽屉功能
+.drawaer // /* 改变所有 a-tree-select 输入框的高度 */
+//   ::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+//   height: 40px;
+//   line-height: 40px;
+//   border-radius: 8px
+
+//   /* 确保文字垂直居中 */
+// }
+::v-deep .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+  height: 40px !important;
+  line-height: 40px;
+  border-radius: 8px
+}
+
+// 抽屉内样式
+.draitem {
+  width: 100%;
+  height: 40px !important;
+  border-radius: 8px;
+  line-height: 40px;
+}
+
+.drabtn {
+  height: 40px;
+  width: 80px;
+  border-radius: 8px;
+  margin-right: 20px
+}
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
+.goback {
+        float: right;
+        padding-right: 70px;
+        //padding-top: 37px;
+        position: relative;
+
+        .return {
+          display: inline-block;
+          width: 42px;
+          height: 42px;
+          margin-top: 17px;
+          margin-right: 10px;
+          background-image: url("../../assets/images/projectadd/return.png");
+        }
+
+        .returntext {
+          display: inline-block;
+          position: absolute;
+          top: 12px;
+          color: #4ea6ff;
+          font-size: 14px;
+        }
+      }
+      </style>
+  

src/views/lecturer/ExternalLecturer.vue

@@ -6,9 +6,12 @@
       <a-form layout="inline">
         <a-form-item  class="select">
           <!--  v-model:value="searchParam.name" -->
-          <a-input v-model:value="searchParam.name" style="width: 230px; height: 40px; border-radius: 8px"
+          <div  style="width: 276px; height: 40px; border-radius: 8px"  >
-            placeholder="请输入讲师姓名检索" allowClear showSearch>
+          <ProjectManager v-model:value="searchParam.managerId" 
-          </a-input>
+        v-model:name="searchParam.manager"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
         </a-form-item >
         <a-form-item  class="select">
           <a-select style="width: 230px" v-model:value="searchParam.status" placeholder="账号状态"
@@ -80,24 +83,33 @@
         </a-row>
         <a-row :gutter="16">
           <a-col :span="24">
-              <a-upload
+            <div class="item_inp" style="background-color: #fff;">
-    v-model:file-list="fileList"
+              <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
-    name="avatar"
+                        :headers="headers"
-    list-type="picture-card"
+                :before-upload="beforeUpload">
-    class="avatar-uploader"
+                <img class="i_upload_img" v-if="imageUrl" :src="imageUrl" alt="avatar" />
-    :show-upload-list="false"
+                <div class="i_upload" v-else>
-    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                  <div class="addimg">
-    :before-upload="beforeUpload"
+                    <div class="heng"></div>
-    @change="handleChange"
+                    <div class="shu"></div>
-  />
+                  </div>
+                </div>
+              </a-upload>
+              <div class="i_bottom">
+                <div class="tip" style="margin-bottom: 10px;">
+                  <span style="color: #999999; margin-left: 8px">支持图片格式为jpg/jpeg/png 图片最大为2MB</span>
+                </div>
+              </div>
+            </div>
           </a-col>
         </a-row>
         <!-- 讲师名称 ,手机号码-->
         <a-row :gutter="16">
           <a-col :span="12">
             <a-form-item label="讲师名称" name="name">
-              <a-tree-select v-model:value="formParam.name" tree-data-simple-mode  class="draitem"
+              <a-input v-model:value="searchParam.name " class="draitem"
-                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请输入讲师名称" />
+            placeholder="请输入讲师姓名" allowClear showSearch>
+          </a-input>
             </a-form-item>
           </a-col>
           <a-col :span="12">
@@ -234,14 +246,21 @@ import { reactive, toRefs, ref } from "vue";
 import Editor from "@/components/project/Editor";
 import { useRouter } from "vue-router";
 import { message } from "ant-design-vue";
-import { getOutTeacherList, getOuterTeacherById, getOuterTeacherCourseList, deleteInTeacher, updateInTeacher, updateTeacherState, insertTeacherOutSide, updateOutTeacher } from "../../api/Lecturer";
+import {
-// import {getProjSt} from "../../api/indexProjStu";
+  UploadOutlined,
-// import AddTeacher from "../../components/drawers/project/AddTeacher"
+  FolderAddOutlined
+} from '@ant-design/icons-vue';
+import ProjectManager from "@/components/project/ProjectManagerNew";
+import { getOutTeacherList, getOuterTeacherById, fileUp, deleteInTeacher, updateInTeacher, updateTeacherState, insertTeacherOutSide, updateOutTeacher } from "../../api/Lecturer";
+import {getCookieForName} from "@/api/method";
 export default {
   name: "ExternalLecturer",
   components: {
     // AddTeacher,
-    Editor
+    ProjectManager,
+    Editor,
+    FolderAddOutlined,//图标--新增
+    UploadOutlined,//图标--导出
   },
   setup() {
     const router = useRouter();
@@ -275,6 +294,41 @@ export default {
       },
       activeName: 'first'
     })
+
+    const headers = { token: getCookieForName("token") };
+    const beforeUpload = (file) => {
+  const isJpgOrPng =
+    file.type === "image/jpg" ||
+    file.type === "image/jpeg" ||
+    file.type === "image/png" ||
+    file.type === "image/svg" ||
+    file.type === "image/bmp" ||
+    file.type === "image/gif";
+  if (!isJpgOrPng) {
+    message.error("仅支持jpg、gif、png、jpeg、svg、bmp格式!");
+    return false;
+  }
+
+  let isLt1M = file.size < 2000000;
+  console.log(file.size, isLt1M)
+  if (!isLt1M) {
+    message.error("图片大小超过2MB!");
+    return false;
+  }
+
+  const formDatas = new FormData();
+  formDatas.append("file", file);
+  fileUp(formDatas).then((res) => {
+    if (res.data.code === 200) {
+      console.log(res.data.data, 45);
+      imageUrl.value = process.env.VUE_APP_FILE_PATH + res.data.data;
+
+      // state.hasImgName = file.name;
+      // emit("src", { id: '', src: res.data.data });
+    }
+  });
+  return false;
+};
     const AccountStatusList = ref([
       { value: 0, label: "启用" },
       { value: 1, label: "停用" },
@@ -340,7 +394,7 @@ export default {
         dataIndex: 'operation',
         key: 'operation',
       elipsis: true, align: "right",
-        width: 300,
+        width: 400,
         scopedSlots: { customRender: "action" },
       },
     ])
@@ -546,6 +600,8 @@ export default {
     return {
       ...toRefs(state),
       rules,
+      headers,
+      beforeUpload,
       handleExport,
       AccountStatusList,
       searchSubmit,
@@ -853,4 +909,59 @@ export default {
   border-radius:8px;
   margin-right:20px
 }
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
+.item_inp {
+            flex: 1;
+            text-align: center ;
+            .i_upload_img {
+              width: 100px;
+              height: 100px;
+              border-radius: 8px;
+            }
+
+            .i_upload {
+              width: 100px;
+              height: 100px;
+              border: 1px solid #4ea6ff;
+              border-radius:50%;
+              text-align: center;
+              align-items: center;
+              cursor: pointer;
+
+              .addimg {
+                position: relative;
+
+                .heng {
+                  position: absolute;
+                  top: 50px;
+                  left: 25px;
+                  width: 50px;
+                  border: 1px solid #4ea6ff;
+                }
+
+                .shu {
+                  position: absolute;
+                  top: 25px;
+                  left: 50px;
+                  height: 50px;
+                  border: 1px solid #4ea6ff;
+                }
+              }
+            }
+
+            .ant-upload.ant-upload-select-picture-card {
+              border: 0px !important;
+              border-radius: 50%!important;
+            }
+          }
+          .ant-upload.ant-upload-select-picture-card {
+            border: 0px !important;
+              border-radius: 50%!important;
+          }
 </style>

src/views/lecturer/ExternalTeaching.vue

@@ -6,9 +6,15 @@
       <a-form layout="inline">
         <a-form-item class="select">
           <!--  v-model:value="searchParam.name" -->
-          <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
+          <!-- <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
             placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch>
-          </a-input>
+          </a-input> -->
+          <div  style="width: 276px; height: 40px; border-radius: 8px"  >
+          <ProjectManager v-model:value="searchParam.managerId" 
+        v-model:name="searchParam.manager"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
         </a-form-item>
         <a-form-item class="select">
           <a-input v-model:value="searchParam.teacherNo" style="width: 260px; height: 40px; border-radius: 8px"
@@ -271,6 +277,7 @@ import {
   DownloadOutlined
 } from '@ant-design/icons-vue';
 import { message } from "ant-design-vue";
+import ProjectManager from "@/components/project/ProjectManagerNew";
 import { updateInTeacher, getTeacherExpertise } from "../../api/Lecturer";
 import { getOuterTeacherCourseList, getAddress, updateInTeacherCourse, deleteInTeacherCourse, insertOutTeaherCourse,getOuterTeacherCourseDetail } from "../../api/Teaching";
 // import {getProjSt} from "../../api/indexProjStu";
@@ -283,6 +290,7 @@ export default {
     UploadOutlined,//图标--导出
     DownloadOutlined,//图标-导入
     FolderAddOutlined,//图标--新增
+    ProjectManager,
   },
   setup() {
     const router = useRouter();
@@ -488,7 +496,7 @@ export default {
       elipsis: true,
        align: "right",
       fixed: "right",
-        width: 300,
+        width: 400,
         scopedSlots: { customRender: "action" },
       },
     ])
@@ -1043,4 +1051,11 @@ export default {
   border-radius: 8px;
   margin-right: 20px
 }
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
 </style>

src/views/lecturer/InsideLecturer.vue

@@ -5,10 +5,16 @@
     <div class="filter" style="min-width: 1380px;">
       <a-form   layout="inline">
         <a-form-item class="select">
+          <div  style="width: 276px; height: 40px; border-radius: 8px"  >
+          <ProjectManager v-model:value="searchParam.managerId" 
+        v-model:name="searchParam.manager"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
           <!--  v-model:value="searchParam.name" -->
-          <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
+          <!-- <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
             placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch>
-          </a-input>
+          </a-input> -->
 
           <!-- <a-tree-select
 								:fieldNames="{
@@ -137,26 +143,39 @@
         </a-row>
         <a-row :gutter="16">
           <a-col :span="24">
-              <a-upload
+            <div class="item_inp" style="background-color: #fff;">
-                 v-model:file-list="fileList"
+              <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
-                 name="avatar"
+                        :headers="headers"
-                 avatar-uploader
+                :before-upload="beforeUpload">
-                 list-type="picture-card"
+                <img class="i_upload_img" v-if="imageUrl" :src="imageUrl" alt="avatar" />
-                 class=""
+                <div class="i_upload" v-else>
-                 :show-upload-list="false"
+                  <div class="addimg">
-                 action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                    <div class="heng"></div>
-                 :before-upload="beforeUpload"
+                    <div class="shu"></div>
-                 @change="handleChange"
+                  </div>
-  />
+                </div>
+              </a-upload>
+              <div class="i_bottom">
+                <div class="tip" style="margin-bottom: 10px;">
+                  <span style="color: #999999; margin-left: 8px">支持图片格式为jpg/jpeg/png 图片最大为2MB</span>
+                </div>
+              </div>
+            </div>
           </a-col>
         </a-row>
         <!-- 讲师名称、组织 -->
         <a-row :gutter="16">
           <a-col :span="12">
             <a-form-item label="讲师名称" name="name">
-              <a-tree-select v-model:value="formParam.name" 
+        
+          <ProjectManager v-model:value="formParam.managerId" 
+        v-model:name="formParam.manager"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                     
+              <!-- <a-tree-select v-model:value="formParam.name" 
               show-search    allow-clear tree-data-simple-mode  class="draitem"
-                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请输入讲师名称" />
+                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请输入讲师名称" /> -->
             </a-form-item>
           </a-col>
           <a-col :span="12">
@@ -194,7 +213,7 @@
         <a-row :gutter="16">
           <a-col :span="12">
             <a-form-item label="初始授课时长" name="defaultTeachingTime">
-              <a-input v-model:value="formParam.defaultTeachingTime" style="width:80%; height: 40px; " placeholder="0"
+              <a-input v-model:value="formParam.defaultTeachingTime" style="width:80%; height: 40px; border-radius: 8px; " placeholder="0"
                 allowClear showSearch suffix="分钟">
               </a-input>
               <span  style="margin-left: 5px ;">{{ (formParam.defaultTeachingTime /60 ).toFixed(2)}}小时</span>
@@ -330,16 +349,17 @@ import {
   FolderAddOutlined
 } from '@ant-design/icons-vue';
 import Editor from "@/components/project/Editor";
-// import Upload from "@/components/common/BaseUpload";
+import ProjectManager from "@/components/project/ProjectManagerNew";
-// import FJUpload from "@/components/common/FJUpload";
 import { message } from "ant-design-vue";
 import { useRouter } from "vue-router";
-import { getTeacherSystemList, getTeacherList, getPayRollPlace, getLevel, insertTeacher, deleteInTeacher, updateInTeacher, getTeacherById, updateTeacherState, getTeacherExpertise, getTeacherExpertiseByPid, infoteacher,  } from "../../api/Lecturer"; 
+import { getTeacherSystemList, getTeacherList, getPayRollPlace, getLevel, insertTeacher, deleteInTeacher, updateInTeacher, getTeacherById, updateTeacherState, getTeacherExpertise, getTeacherExpertiseByPid, infoteacher, fileUp } from "../../api/Lecturer"; 
+import {getCookieForName} from "@/api/method";
 // import {getProjSt} from "../../api/indexProjStu";
 import AddContent from "../../components/project/AddContent.vue"
 export default {
   name: "InsideLecturer",
   components: {
+    ProjectManager,
     AddContent,
     Editor,
     // FJUpload,
@@ -398,6 +418,40 @@ export default {
       },
       activeName: 'first'
     })
+    const headers = { token: getCookieForName("token") };
+    const beforeUpload = (file) => {
+  const isJpgOrPng =
+    file.type === "image/jpg" ||
+    file.type === "image/jpeg" ||
+    file.type === "image/png" ||
+    file.type === "image/svg" ||
+    file.type === "image/bmp" ||
+    file.type === "image/gif";
+  if (!isJpgOrPng) {
+    message.error("仅支持jpg、gif、png、jpeg、svg、bmp格式!");
+    return false;
+  }
+
+  let isLt1M = file.size < 2000000;
+  console.log(file.size, isLt1M)
+  if (!isLt1M) {
+    message.error("图片大小超过2MB!");
+    return false;
+  }
+
+  const formDatas = new FormData();
+  formDatas.append("file", file);
+  fileUp(formDatas).then((res) => {
+    if (res.data.code === 200) {
+      console.log(res.data.data, 45);
+      imageUrl.value = process.env.VUE_APP_FILE_PATH + res.data.data;
+
+      // state.hasImgName = file.name;
+      // emit("src", { id: '', src: res.data.data });
+    }
+  });
+  return false;
+};
     const LecturerSystemList = ref([
       //   { value: 0, systemName: "讲师体系" },
     ]);
@@ -704,7 +758,7 @@ console.log( "讲师体系id" +val);
         dataIndex: 'operation',
         key: 'operation',
         elipsis: true, 
-        width: 300,
+        width: 400,
         align: "right",
         scopedSlots: { customRender: "action" },
       },
@@ -934,6 +988,8 @@ console.log( "讲师体系id" +val);
     return {
       ...toRefs(state),
       rules,
+      headers,
+      beforeUpload,
       handlemoreid,
       changeSelect,
       handleExport,
@@ -978,6 +1034,7 @@ console.log( "讲师体系id" +val);
 };
 </script>
 <style lang="scss" scoped>
+
 .add_content{
   width: 40px;
   height: 40px;
@@ -1270,4 +1327,61 @@ position: relative;
   border-radius:8px;
   margin-right:20px
 }
+ ::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+  line-height: 40px;
+}
+.ant-col-12{
+  height:80px;
+}
+.item_inp {
+            flex: 1;
+            text-align: center ;
+            .i_upload_img {
+              width: 100px;
+              height: 100px;
+              border-radius: 8px;
+            }
+
+            .i_upload {
+              width: 100px;
+              height: 100px;
+              border: 1px solid #4ea6ff;
+              border-radius:50%;
+              text-align: center;
+              align-items: center;
+              cursor: pointer;
+
+              .addimg {
+                position: relative;
+
+                .heng {
+                  position: absolute;
+                  top: 50px;
+                  left: 25px;
+                  width: 50px;
+                  border: 1px solid #4ea6ff;
+                }
+
+                .shu {
+                  position: absolute;
+                  top: 25px;
+                  left: 50px;
+                  height: 50px;
+                  border: 1px solid #4ea6ff;
+                }
+              }
+            }
+
+            .ant-upload.ant-upload-select-picture-card {
+              border: 0px !important;
+              border-radius: 50%!important;
+            }
+          }
+          .ant-upload.ant-upload-select-picture-card {
+            border: 0px !important;
+              border-radius: 50%!important;
+          }
+
 </style>

src/views/lecturer/InsideTeaching.vue

@@ -6,10 +6,12 @@
       <a-form layout="inline"  style="min-width: 1380px;">
         <a-form-item class="select">
           <!--  v-model:value="searchParam.name" -->
-          <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
+          <div  style="width: 276px; height: 40px; border-radius: 8px"  >
-            placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch>
+          <ProjectManager v-model:value="searchParam.managerId" 
-          </a-input>
+        v-model:name="searchParam.manager"
-
+        placeholder="请输入工号/讲师姓名进行检索"
+         @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
           <!-- <a-select style="width: 276px" placeholder="请选择所属组织" v-model:value="searchParam.userNo"
             :options="infoteacherList">
           </a-select> -->
@@ -339,7 +341,7 @@ import {
 } from '@ant-design/icons-vue';
 import dayjs from "dayjs";
 // import Editor from "@/components/project/Editor";
-// import ImageUpload from "@/components/project/ImageUpload";
+import ProjectManager from "@/components/project/ProjectManagerNew";
 import { message } from "ant-design-vue";
 import { getTeacherSystemList, infoteacher, getTeacherExpertise, deleteInTeacherCourse } from "../../api/Lecturer";
 import { getNewInTeacherCourseList, getOrganization, getTeacherCourseList, insertInTeacherCourse, updateInTeacherCourse } from "../../api/Teaching";
@@ -350,6 +352,7 @@ export default {
     // AddTeacher,
     // Editor,
     // ImageUpload
+    ProjectManager,
     RightOutlined, //图标--展开
     UpOutlined,//图标--收起
     UploadOutlined,//图标--导出
@@ -617,7 +620,7 @@ export default {
         dataIndex: 'operation',
         key: 'operation',
         elipsis: true, align: "right",
-        width: 300,
+        width: 400,
         fixed: "right",
         scopedSlots: { customRender: "action" },
       },
@@ -707,7 +710,7 @@ export default {
       state.teacherdialog = true;
       state.teacherdialogtitle = '修改授课记录'
       state.lookTeacherId = record.teacherId
-      TeacherSystem(records)
+      TeacherSystem(record)
     }
     //保存
     const createTeacherDialog = () => {
@@ -785,14 +788,14 @@ export default {
     };
 
     //表格内查看数据操作
-    const handleLook = (records) => {
+    const handleLook = (record) => {
       // state.teacherdialog1 = 1
       state.teachingdialog = true;
       state.teacherdialogtitle = '查看详情'
       // state.userNoid = record.userNo
       state.lookTeacherId = record.teacherId
       // // alert(record.grade)
-      TeacherSystem(records)
+      TeacherSystem(record)
       // let id = record.userNo
       // router.push({ path: '/insideteachingdetail', query: { id  } })
       // router.push({ path: '/InsideTeachingDetail' })
@@ -801,7 +804,7 @@ export default {
       state.teachingdialog = false;
     }
     //内部授课详情
-    const TeacherSystem = (records) => {
+    const TeacherSystem = (record) => {
       // getTeacherCourseList( state.lookTeacherId).then((res) => {
       //     console.log("内部授课详情", res.data);
       //     state.formParam= res.data.data
@@ -810,21 +813,24 @@ export default {
       //     console.log("内部授课详情", err);
       //   });
       state.formParam = {
-        name: record.name,
+        teacher: record.teacher,
+        userNo: record.userNo,
         departId:record.departId,
         systemId:record.systemId,
         levelId: record.levelId,
-        tlevelName: record.tlevelName,
+        type: record.type,
-        teacherNo: record.teacherNo,
+        name: record.name,
+        status:record.name,
         beginTime: moment(record.beginTime, 'YYYY-MM-DD'),
         // ref< moment.Moment >(moment(record.beginTime,'YYYY-MM-DD')),
         //  record.beginTime,
-        status: record.status,
+        duration: record.duration,
         defaultTeachingTime: record.defaultTeachingTime,
         score: record.score,
         studys: record.studys,
         remark: record.remark,
       }
+      console.log(state.formParam)
     }
     const column = ref([  {
           title: '基准课酬 ',
@@ -873,7 +879,7 @@ export default {
         dataIndex: 'operation',
         key: 'operation',
       elipsis: true, align: "right",
-        width: 300,
+        width: 400,
         scopedSlots: { customRender: "action" },
       },
   ])
@@ -1256,4 +1262,11 @@ export default {
   border-radius:8px;
   margin-right:20px
 }
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
 </style>

src/views/lecturer/LecturerApproval.vue

@@ -6,9 +6,12 @@
         <a-form layout="inline" style="min-width: 1380px;">
           <a-form-item class="select">
             <!--  v-model:value="searchParam.name" -->
-            <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
+            <div  style="width: 276px; height: 40px; border-radius: 8px"  >
-              placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch>
+          <ProjectManager v-model:value="searchParam.managerId" 
-            </a-input>
+        v-model:name="searchParam.manager"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
   
             <!-- <a-select style="width: 276px" placeholder="请选择所属组织" v-model:value="searchParam.userNo"
               :options="infoteacherList">
@@ -113,8 +116,9 @@
 <span class="line"></span>
 <span>讲师费用详情</span>
 <a-descriptions bordered :column="2" :contentStyle="rowCenter" :labelStyle="rowCenter">
-    <a-descriptions-item label="讲师名称">{{formParam.teacher}}</a-descriptions-item>
+    <a-descriptions-item label="讲师名称">{{formParam.teacherName}}</a-descriptions-item>
-    <a-descriptions-item label="讲师工号">{{formParam.userNo}}</a-descriptions-item>
+    <a-descriptions-item label="讲师工号">{{formParam.teacherId
+}}</a-descriptions-item>
     <a-descriptions-item label="讲师组织" :span="2">{{formParam.departId}}</a-descriptions-item>
     <a-descriptions-item label="讲师体系">{{formParam.systemId}}</a-descriptions-item>
     <a-descriptions-item label="讲师级别">{{formParam.levelId }}</a-descriptions-item>
@@ -123,7 +127,7 @@
     <a-descriptions-item label="课程类型">{{formParam.type==1?'项目开课' :formParam.type==2 ?'路径开课':formParam.type==3 ?'面授开课':''}}</a-descriptions-item>
     <a-descriptions-item label="课程名称">{{formParam.name}}</a-descriptions-item>
     <a-descriptions-item label="授课时长  ">{{formParam.duration}}</a-descriptions-item>
-    <a-descriptions-item label="授课/课程日期  ">{{formParam.beginTime}}</a-descriptions-item>
+    <a-descriptions-item label="授课/课程日期  ">{{formParam.teachingDate}}</a-descriptions-item>
     <a-descriptions-item label="参训人数  ">{{formParam.studys}}</a-descriptions-item>
     <a-descriptions-item label="评分  ">{{formParam.score}}</a-descriptions-item>
     <a-descriptions-item label="课酬基准  ">{{formParam.teacherlevelPay}}</a-descriptions-item>
@@ -136,8 +140,8 @@
   <span class="line"></span>
 <span>讲师费审批</span>
 <div style="padding: 10px 0">
-          <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columnsa"
+          <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columnsExamine"
-            :data-source="tableDataa" :loading="tableLoading" @expand="expandTable" :pagination="false">
+            :data-source="tableDataExamine" :loading="examinetableLoading" @expand="expandTable" :pagination="false">
             <template #bodyCell="{ record, column }">
             
             </template>
@@ -208,6 +212,7 @@
     FolderAddOutlined,
     DownloadOutlined
   } from '@ant-design/icons-vue';
+  import ProjectManager from "@/components/project/ProjectManagerNew";
   import {getPayRollPlace} from "../../api/Lecturer";
   import {getTeacherFeeList,getTeacherFeeDetail,addTeacherFee ,updateTeacherFee,updateStatusSubmit,updateStatusWithDraw,getTrainOrg,getTeacherLevel} from "../../api/lecturerFeeManagement";import { getTeacherExpertise,getTeacherSystemList } from "../../api/Lecturer";
   // lecturerFeeManagement
@@ -221,6 +226,7 @@
       UploadOutlined,//图标--导出
       DownloadOutlined,//图标-导入
       FolderAddOutlined,//图标--新增
+      ProjectManager,
     },
     setup() {
       const state = reactive({
@@ -231,6 +237,7 @@
         promotionrecordsLoading:false ,  //晋级记录遮罩层
         teacherrecordsLoading:false,// 授课记录遮罩层
         tableLoading:false,
+        examinetableLoading:false,
         tagsshow:"1",
         delTeacherId:null, //删除id确认
         newStatus:null , //修改状态码确认
@@ -330,7 +337,7 @@
                 };
                 array.push(obj);
               });
-              lecturerSystemList.value = array;
+              trainOrglist.value = array;
             }
         }) 
       }
@@ -432,7 +439,7 @@
         },
         {
           title: '讲师工号 ',
-          dataIndex: 'teacherNo',
+          dataIndex: 'teacherId',
           key: 'teacherNo',
         elipsis: true, align: "center",
           width: 120,
@@ -578,7 +585,7 @@
           key: 'operation',
         elipsis: true, align: "right",
         fixed: "right",
-          width: 300,
+          width: 400,
           scopedSlots: { customRender: "action" },
         },
         
@@ -750,21 +757,22 @@
         state.kid= record.kid
         TeacherSystem()
       }
-      const tableDataFeeDetail = ref([
+      
-  ])
       //详情
       const TeacherSystem=()=>{
         getTeacherFeeDetail({kid : state.kid}).then((res) => {
             // state.formParam=Object.assign({} ,res.data.data)
             state.formParam=res.data.data
-            tableDataFeeDetail.value = res.data.data.records
+            console.log( state.formParam)
         }) 
         .catch((err) => {
             console.log("详情", err);
           });
       }
+      const tableDataExamine = ref([
+  ])
       //二级页面
-      const columnsFeeDetail = ref([
+      const columnsExamine = ref([
       {
           title: '审批人 ',
           dataIndex: 'teacherName',
@@ -863,9 +871,9 @@
         searchSubmit,
         searchReset,
         columns,
-        columnsFeeDetail,
+        columnsExamine,
         tableData,
-        tableDataFeeDetail,
+        tableDataExamine,
         changePagination,
         addTeacher,
         cancelTeachingDialog,
@@ -1215,4 +1223,11 @@
   border-radius:8px;
   margin-right:20px
 }
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
 </style>

src/views/lecturer/LecturerFee.vue

@@ -6,17 +6,19 @@
         <a-form layout="inline" style="min-width: 1380px;">
           <a-form-item class="select">
             <!--  v-model:value="searchParam.name" -->
-            <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
+            <!-- <a-input v-model:value="searchParam.userNo" style="width: 276px; height: 40px; border-radius: 8px"
               placeholder="请输入工号/讲师姓名进行检索" allowClear showSearch>
             </a-input>
-  
+   -->  <div  style="width: 276px; height: 40px; border-radius: 8px"  >
-            <!-- <a-select style="width: 276px" placeholder="请选择所属组织" v-model:value="searchParam.userNo"
+    <ProjectManager v-model:value="searchParam.managerId" 
-              :options="infoteacherList">
+        v-model:name="searchParam.manager"
-            </a-select> -->
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
           </a-form-item>
           <a-form-item  class="select">
-            <a-select style="width: 276px" v-model:value="searchParam.payrollPlaceId" placeholder="发薪地"
+            <a-select style="width: 276px" v-model:value="searchParam.trainorgId" placeholder="培训发生组织"
-              :options="PlaceOfPayList">
+              :options="trainOrglist">
             </a-select>
           </a-form-item>
           <a-form-item class="select ">
@@ -59,7 +61,7 @@
           </a-form-item>
           <a-form-item class="select" v-if="moreid == 2"> 
             <a-select style="width: 230px ;margin-bottom:20px" placeholder="请选择讲师体系" v-model:value="searchParam.tsystemName"
-              :options="LecturerSystemList">
+              :options="lecturerSystemList">
             </a-select>
           </a-form-item>
           <a-form-item class="select"  v-if="moreid == 2">
@@ -99,6 +101,16 @@
                   <!-- <a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button> -->
                 </a-space>
               </template>
+              <template v-if="column.key === 'certStatus'">
+              <a-space style="display:flex ;justify-content: space-around;  ">
+                <a-popover>
+    <template #content>
+      <p>{{ record.certStatus }}</p>
+    </template>
+    <span>{{ record.certStatus }}</span>
+  </a-popover>
+              </a-space>
+            </template>
             </template>
           </a-table>
         </div>
@@ -157,7 +169,7 @@
             <a-col :span="12">
               <a-form-item label="讲师体系" name="systemId">
                 <a-select disabled  class="draitem" v-model:value="formParam.systemId" placeholder="请选择讲师体系"
-                  :options="LecturerSystemList">
+                  :options="lecturerSystemList">
                 </a-select>
               </a-form-item>
             </a-col>
@@ -204,13 +216,13 @@
           <a-row :gutter="16">
             <a-col :span="12">
               <a-form-item label="授课/课程日期 :" name="beginTime">
-                <a-input v-model:value="formParam.beginTime" disabled placeholder="">
+                <a-input v-model:value="formParam.beginTime" disabled placeholder="" class="draitem">
                 </a-input>
               </a-form-item>
             </a-col>
             <a-col :span="12">
-              <a-form-item label="初始授课时长" name="defaultTeachingTime">
+              <a-form-item label="授课时长" name="defaultTeachingTime">
-                <a-input v-model:value="formParam.defaultTeachingTime" style="width:80%; height: 40px; " placeholder="0"
+                <a-input v-model:value="formParam.defaultTeachingTime" class="draitem" placeholder="0"
                   allowClear showSearch suffix="分钟">
                 </a-input>
                 <span  style="margin-left: 5px ;">{{ (formParam.defaultTeachingTime /60 ).toFixed(2)}}小时</span>
@@ -239,7 +251,7 @@
             <a-col :span="12">
               <a-form-item label="课酬基准" name="teacherlevelPay">
                 <a-input v-model:value="formParam.teacherlevelPay" placeholder="可手动更改"
-                  allowClear showSearch >
+                  allowClear showSearch  class="draitem">
                 </a-input>
               </a-form-item>
             </a-col>
@@ -329,6 +341,7 @@
     FolderAddOutlined,
     DownloadOutlined
   } from '@ant-design/icons-vue';
+  import ProjectManager from "@/components/project/ProjectManagerNew"
   import {getPayRollPlace} from "../../api/Lecturer";
   import {getTeacherFeeList,getTeacherFeeDetail,addTeacherFee ,updateTeacherFee,updateStatusSubmit,updateStatusWithDraw,getTrainOrg,getTeacherLevel} from "../../api/lecturerFeeManagement";import { getTeacherExpertise,getTeacherSystemList } from "../../api/Lecturer";
   // lecturerFeeManagement
@@ -342,6 +355,7 @@
       UploadOutlined,//图标--导出
       DownloadOutlined,//图标-导入
       FolderAddOutlined,//图标--新增
+      ProjectManager
     },
     setup() {
       const state = reactive({
@@ -436,7 +450,6 @@
       const trainOrglist=ref([])
       //获取培训发生组织
       const trainOrglista =() => {
-        // console.log('点击了LecturerSystemLista')
         getTrainOrg().then((res)=>{
           if (res.data.code === 200) {
               let arr = res.data.data;
@@ -448,7 +461,7 @@
                 };
                 array.push(obj);
               });
-              lecturerSystemList.value = array;
+              trainOrglist.value = array;
             }
         }) 
       }
@@ -688,7 +701,8 @@
           dataIndex: 'certStatus',
           key: 'certStatus',
         elipsis: true, align: "center",
-          width: 120,
+          width: 200,
+          scopedSlots: { customRender: "certStatus" },
         },
         {
         title: '操作 ',
@@ -696,7 +710,7 @@
         key: 'operation',
       elipsis: true, align: "right",
       fixed: "right",
-        width: 300,
+        width: 400,
         scopedSlots: { customRender: "action" },
       },
         
@@ -1329,4 +1343,11 @@
   border-radius:8px;
   margin-right:20px
 }
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
 </style>

src/views/lecturer/LecturerFeeStatistics.vue

@@ -1,39 +1,30 @@
 <!-- 讲师费统计页面 -->
 <template>
-  <div class="LecturerFeeStatistics">
+    <div style="margin: 20px;">
-    <div>
-    </div>
     <!-- 搜索框及按钮 -->
-    <div class="filter">
+    <div class="filter" style="min-width: 1380px;">
-      <div class="filterItems">
+      <a-form layout="inline">
-        <div class="select addTimeBox">
+          <a-form-item  class="select">
-          <!-- <a-date-picker v-model:value="searchParam.startDate"  placeholder="开始日期" format="YYYY-MM-DD"
+            <a-select style="width: 276px" v-model:value="searchParam.payrollPlaceId" placeholder="发薪地"
-          allowClear
+              :options="PlaceOfPayList">
-            style="width: 230px">
+            </a-select>
-          </a-date-picker>
+          </a-form-item>
-          <span> 至 </span>
+          <a-form-item class="select " >
-          <a-date-picker v-model:value="searchParam.endDate"  placeholder="结束日期" format="YYYY-MM-DD"
+            <a-range-picker style="width: 260px; height: 40px; border-radius: 8px" v-model:value="searchdate" separator=""
-          allowClear
+              :placeholder="['重新汇总上月周期']" @change="searchTimeChange" />
-            style="width: 230px">
+          </a-form-item>
-          </a-date-picker> -->
-          <div class="addTime">创建时间：</div>
-          <a-range-picker
-            v-model:value="searchdate"
-            separator="至"
-            :placeholder="['      开始时间', '        结束时间']"
-            @change="searchTimeChange"
-          /> 
-        </div>
           <div style="display: flex; margin-bottom: 20px">
-          <div class="btnn btn1" @click="searchSubmit">
+            <a-button @click="searchSubmit()" type="primary" class="resetbtn">查询 </a-button>
-            <div class="search"></div>
+            <!-- <div class="btn btn1" @click="searchReset" style="background:rgba(64, 158, 255, 0);" > -->
-            <div class="btnText">搜索</div>
+            <!-- <div class="search"></div> -->
-          </div>
+            <a-button class="resetbtn " @click="searchReset">重置</a-button>
-          <div class="btn btn2" @click="searchResetPrevious">
-            <div class="search"></div>
-            <div class="btnText">重新汇总上月讲师费</div>
-          </div>
           </div>
+        </a-form>
+        <div style="width: 100%;"></div>   
+        <div style="display: flex; margin-bottom: 20px">
+          <a-button @click="searchResetPrevious()" type="primary" class="langbtn" style="width: 150px; height: 40px; border-radius: 8px" >
+            <FolderAddOutlined /> 重新汇总上月讲师费
+          </a-button>
         </div>
       <!-- 表格 -->
       <div style="padding: 10px 0">
@@ -41,10 +32,8 @@
           :data-source="tableData" :loading="tableLoading" @expand="expandTable" :pagination="false">
           <template #bodyCell="{ record, column }">
             <template v-if="column.key === 'operation'">
-              <a-space style="display:flex ;justify-content: space-around;  ">
+              <a-space >
                 <a-button type="link" @click="() => handleLook(record, String(record.courseform))">查看</a-button>
-                <a-button type="link" @click="() => handleModify(record, String(record.courseform))">导出</a-button>
-                <!-- <a-button type="link" @click="() => deleteModal(record, String(record.courseform))">删除</a-button> -->
               </a-space>
             </template>
           </template>
@@ -187,6 +176,7 @@
 import { reactive, toRefs, ref, watch } from "vue";
 import { message } from "ant-design-vue";
 import dayjs from "dayjs";
+import { useRouter } from "vue-router";
 import { getPayRollPlace } from "../../api/Lecturer";
 import { getOrganization } from "../../api/Teaching";
 import { queryTeacherFeeTotalList, queryTeacherFeeMonthly, getTeacherFeeDetailListByTeacherNo, getTeacherFeeListByTeacherNo ,getPreviousTeacherfee} from "../../api/lecturerFeeStatistics";
@@ -195,6 +185,7 @@ export default {
   components: {
   },
   setup() {
+    const router = useRouter();
     const state = reactive({
       summaryDate: null,
       resbgTxt: null,
@@ -241,42 +232,48 @@ export default {
         dataIndex: 'billNo',
         key: 'billNo',
         elipsis: true,
-        width: 120,
+        align: "center",
+        width:200,
       },
       {
         title: '资源归属 ',
         dataIndex: 'resbgTxt',
         key: 'resbgTxt',
         elipsis: true,
-        width: 120,
+        align: "center",
+        width: 400,
       },
       {
         title: '汇总周期 ',
         dataIndex: 'summaryDate',
         key: 'summaryDate',
         elipsis: true,
-        width: 400,
+        align: "center",
+        width:300
       },
       {
         title: '汇总日期 ',
         dataIndex: 'summaryTime',
         key: 'summaryTime',
         elipsis: true,
-        width: 120,
+        align: "center",
+        width: 200,
       },
       {
         title: '汇总金额 ',
         dataIndex: 'totalFee',
         key: 'totalFee',
         elipsis: true,
-        width: 120,
+        align: "center",
+        width: 200,
       },
       {
         title: '操作 ',
         dataIndex: 'operation',
         key: 'operation',
         elipsis: true,
-        width: 300,
+        align: "right",
+        width: 400,
         scopedSlots: { customRender: "action" },
       },
     ])
@@ -414,12 +411,14 @@ export default {
     }
     //表格内查看数据操作
     const handleLook = (record) => {
-      state.teacherdialog = true;
+      let id = record.summaryDate
-      state.teacherdialogtitle = '讲师费月度统计详情'
+      router.push({ path: '/MonthlyStatistics', query: { id } })
-      state.summaryDate = record.summaryDate;
+      // state.teacherdialog = true;
-      state.resbgTxt = record.resbgTxt
+      // state.teacherdialogtitle = '讲师费月度统计详情'
-      state.queryFeeMonthly.summaryDate = record.summaryDate
+      // state.summaryDate = record.summaryDate;
-      TeacherSystem()
+      // state.resbgTxt = record.resbgTxt
+      // state.queryFeeMonthly.summaryDate = record.summaryDate
+      // TeacherSystem()
     }
     const tableDataFeeDetail = ref([
     ])
@@ -744,6 +743,7 @@ export default {
 
     return {
       ...toRefs(state), 
+      router,
       searchTimeChange,
       handleFeeMonthly,
       TeacherSystem,
@@ -840,8 +840,7 @@ export default {
   text-align: center;
 }
 
-.LecturerFeeStatistics {
+.ExternalLecturer {  width: 100%;
-  width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -853,277 +852,11 @@ export default {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-
-    .filterItems {
-      display: flex;
-      flex-wrap: wrap;
-
       .select {
         margin-right: 20px;
         margin-bottom: 20px;
       }
-
+    }}
-      .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;
-        }
-      }
-
-      .btn {
-        padding: 0px 26px 0px 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;
-        }
-      }
-
-      .btnn {
-        padding: 0px 26px 0px 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;
-        }
-      }
-
-      .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: #0982ff;
-      }
-    }
-
-    .btns {
-      display: flex;
-
-      // flex-wrap: wrap;
-      .btn {
-        padding: 0px 26px 0px 26px;
-        height: 38px;
-        background: #4ea6ff;
-        border-radius: 8px;
-        border: 1px solid rgba(64, 158, 255, 1);
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        justify-content: center;
-        margin-right: 14px;
-        flex-shrink: 0;
-
-        .search {
-          background-size: 100%;
-        }
-
-        .btnText {
-          font-size: 14px;
-          font-weight: 400;
-          color: #ffffff;
-          line-height: 36px;
-          margin-left: 5px;
-        }
-      }
-
-      .btn3 {
-        margin-right: 0px;
-
-        .search {
-          width: 17px;
-          height: 18px;
-          background-image: url("../../assets/images/courseManage/add0.png");
-        }
-      }
-
-      // .btn3:hover {
-      //   background: rgba(64, 158, 255, 0.76);
-      // }
-
-      .btn3:active {
-        background: #0982ff;
-      }
-    }
-  }
-
-  .tableBox {
-    margin: 20px 38px 30px;
-
-    .ant-table-thead>tr>th {
-      background-color: #eff4fc;
-    }
-
-    th {
-      background-color: #eff4fc !important;
-      text-align: center !important;
-    }
-  }
-
-  .tableBox {
-    padding-bottom: 20px;
-
-    .pa {
-      // position: absolute;
-      // bottom: 20px;
-      // left: 0;
-      width: 100%;
-      // height: 20px;
-      // background-color: red;
-      display: flex;
-      justify-content: center;
-      // margin-bottom: 10px;
-      // position: absolute;
-      // bottom: -40px;
-    }
-  }
-
-  .operation {
-    font-size: 14px;
-    font-weight: 400;
-    color: #4ea6ff;
-    margin-right: -45px;
-    display: flex;
-    justify-content: right;
-    margin-right: 18px;
-
-    // line-height: 36px;
-    .operation1 {
-      margin-left: 21px;
-      width: 28px;
-      display: inline-block;
-    }
-
-    .operation3 {
-      margin-left: 21px;
-      width: 70px;
-      display: inline-block;
-      text-align: center;
-    }
-
-    .more {
-      width: 50px;
-      display: inline-block;
-      margin-left: 21px;
-      position: relative;
-      text-align: left;
-
-      // z-index: 99999;
-      .moreArrow {
-        width: 13px;
-        height: 7px;
-        display: inline-block;
-        background-image: url("../../assets/images/navtop/down.png");
-        background-size: 100%;
-        margin: 2px;
-        margin-left: 7px;
-      }
-
-      .moreItems {
-        width: 80px;
-        padding: 5px;
-        display: none;
-        background: #ffffff;
-        box-shadow: 2px 3px 9px 3px rgba(0, 0, 0, 0.05);
-        border-radius: 3px;
-        border: 0px solid #dcdcdc;
-        position: absolute;
-        left: 0px;
-        top: 28px;
-        z-index: 100;
-        text-align: center;
-      }
-    }
-
-    .more:hover .moreArrow {
-      background-image: url("../../assets/images/navtop/up.png");
-    }
-
-    .more:hover .moreItems {
-      display: block;
-    }
-  }
-}
 
 .delete {
   z-index: 9999;
@@ -1132,9 +865,9 @@ export default {
   box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
   border-radius: 4px;
   position: absolute;
-  left: 50%;
+  left: 30%;
   top: 10%;
-  transform: translate(-50%, -50%);
+  // transform: translate(-50%, -50%);
 
   .del_header {
     position: absolute;
@@ -1234,7 +967,7 @@ export default {
     position: absolute;
     top: 90px;
     width: 1080px !important;
-          height: 525px;
+    height: 650px;
     overflow: auto;
     background-color: #fff;
 
@@ -1247,10 +980,8 @@ export default {
       width: 100%;
       height: 68px;
 
-            background: linear-gradient(
+      background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
-              rgba(78, 166, 255, 0.2) 0%,
+          rgba(78, 166, 255, 0) 100%);
-              rgba(78, 166, 255, 0) 100%
-            );
       display: flex;
       align-items: center;
 
@@ -1284,5 +1015,105 @@ export default {
     }
   }
 }
+
+// 重置样式
+.resetbtn {
+  width: 100px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+//展开收起样式
+.moreidbtn {
+  border: none;
+  color: #4ea6ff;
+  width: 80px
+}
+
+//小竖线
+.line{
+  float:left; width: 3px; height: 25px; background: #4ea6ff;border-radius: 30%; margin-right: 5px;
+}
+//抽屉功能
+.drawaer
+/* 改变所有 a-tree-select 输入框的高度 */
+.ant-tree-select .ant-select-selection {
+  height: 40px;
+  line-height: 40px;
+  /* 确保文字垂直居中 */
+}
+.draitem{
+ width: 100%;
+  height: 40px !important; 
+  border-radius: 8px;
+  line-height: 40px;
+}
+.drabtn{
+  height:40px;
+  width:80px;
+  border-radius:8px;
+  margin-right:20px
+}
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
+.item_inp {
+            flex: 1;
+            text-align: center ;
+            .i_upload_img {
+              width: 100px;
+              height: 100px;
+              border-radius: 8px;
+            }
+
+            .i_upload {
+              width: 100px;
+              height: 100px;
+              border: 1px solid #4ea6ff;
+              border-radius:50%;
+              text-align: center;
+              align-items: center;
+              cursor: pointer;
+
+              .addimg {
+                position: relative;
+
+                .heng {
+                  position: absolute;
+                  top: 50px;
+                  left: 25px;
+                  width: 50px;
+                  border: 1px solid #4ea6ff;
+                }
+
+                .shu {
+                  position: absolute;
+                  top: 25px;
+                  left: 50px;
+                  height: 50px;
+                  border: 1px solid #4ea6ff;
+                }
+              }
+            }
+
+            .ant-upload.ant-upload-select-picture-card {
+              border: 0px !important;
+              border-radius: 50%!important;
+            }
+          }
+          .ant-upload.ant-upload-select-picture-card {
+            border: 0px !important;
+              border-radius: 50%!important;
+          }
 </style>
   

src/views/lecturer/LookInsideLecturer.vue

@@ -276,7 +276,7 @@ export default{
     };
     //晋级记录翻页
     const teacherrepromoPagination = (page) => {
-      state.teacherrecords.pageNo = page;
+      state.teacherrepromo.pageNo = page;
       getpromotionrecordstableData();
     };
         //晋级记录列表

src/views/lecturer/MonthlyStatistics.vue

@@ -0,0 +1,736 @@
+<!-- 讲师费月度统计详情页面 -->
+<template>
+    <div  class="MonthlyStatistics">
+    <!-- 搜索框及按钮 -->
+    <a-layout-header style="background: white;color: black; font-size: 20px ;">
+     <span>讲师费月度统计详情</span>
+     <router-link to="/LecturerFeeStatistics" class="goback">
+            <span class="return"></span>
+            <router-link class="returntext" to="/LecturerFeeStatistics" style="line-height:47px ">
+              返回
+            </router-link>
+          </router-link>
+     </a-layout-header>
+     <a-divider style="height: 1px; background-color: #b7b8b7 ;margin: 0;" />
+    <div class="filter" style="min-width: 1380px;">
+      <a-form layout="inline" >
+          <a-form-item  class="select">
+            <div  style="width: 276px; height: 40px; border-radius: 8px"  >
+          <ProjectManager v-model:value="searchParam.managerId" 
+        v-model:name="searchParam.manager"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager>
+                            </div>
+          </a-form-item>
+          <a-form-item class="select">
+            <a-select style="width: 230px" v-model:value="searchParam.payrollPlaceId" placeholder="发薪地"
+                  :options="PlaceOfPayList"/>
+          </a-form-item>
+          <a-form-item class="select " >
+            <a-select style="width: 276px" v-model:value="searchParam.trainorgId" placeholder="培训发生组织"
+              :options="trainOrglist">
+            </a-select>
+          </a-form-item>
+          <div style="display: flex; margin-bottom: 20px">
+            <a-button @click="searchSubmit()" type="primary" class="resetbtn">查询 </a-button>
+            <!-- <div class="btn btn1" @click="searchReset" style="background:rgba(64, 158, 255, 0);" > -->
+            <!-- <div class="search"></div> -->
+            <a-button class="resetbtn " @click="searchReset">重置</a-button>
+          </div>
+        </a-form>
+        <div style="width: 100%;"></div>   
+        <div style="display: flex; margin-bottom: 20px">
+            <a-button  class="resetbtn"  @click="handleFeeMonthly" type="primary"><UploadOutlined/>导出
+                </a-button>
+                </div>   
+      <!-- 表格 -->
+      <div style="padding: 10px 0">
+        <a-table :header-cell-style="{ 'text-align': 'center' }" style="border: 1px solid #f2f6fe" :columns="columns"
+          :data-source="tableData" :loading="tableLoading" @expand="expandTable" :pagination="false">
+          <template #bodyCell="{ record, column }">
+            <template v-if="column.key === 'operation'">
+              <a-space >
+                <a-button type="link" @click="() => handleLook(record, String(record.courseform))">查看</a-button>
+              </a-space>
+            </template>
+            <template v-if="column.key === 'teacherOrg'">
+              <a-space style="display:flex ;justify-content: space-around;  ">
+                <a-popover>
+    <template #content>
+      <p>{{ record.teacherOrg }}</p>
+    </template>
+    </a-popover></a-space>
+  </template>
+          </template>
+        </a-table>
+      </div>
+
+    </div>
+    <!-- 翻页 -->
+    <div class="tableBox ">
+      <div style="float: right;">
+        <a-pagination
+          v-if="tableDataTotal > 10"
+        :showSizeChanger="false"
+        :showQuickJumper="true"
+        :hideOnSinglePage="true"
+        :pageSize="searchParam.pageSize"
+        :current="searchParam.pageNo"
+        :total="tableDataTotal"
+        class="pagination"
+        @change="changePagination"
+      />
+      </div>
+    </div>
+    <CostDetails v-model:visible="open">
+    </CostDetails>
+  </div>
+</template>
+<script lang="jsx">
+import { reactive, toRefs, ref, watch } from "vue";
+import { useRouter,useRoute } from "vue-router";
+import {
+    UploadOutlined,
+  } from '@ant-design/icons-vue';
+  import { getPayRollPlace } from "../../api/Lecturer";
+  import { getOrganization } from "../../api/Teaching";
+import ProjectManager from "@/components/project/ProjectManagerNew";
+import {getTrainOrg} from "../../api/lecturerFeeManagement";
+import { queryTeacherFeeTotalList, queryTeacherFeeMonthly, getTeacherFeeDetailListByTeacherNo, getTeacherFeeListByTeacherNo ,getPreviousTeacherfee} from "../../api/lecturerFeeStatistics";
+import {CostDetails} from "../lecturer/CostDetails.vue"
+export default {
+  name: "MonthlyStatistics",
+  components: {
+    UploadOutlined,//图标--导出,
+    ProjectManager,CostDetails
+  },
+  setup() {
+    const router=useRouter();
+    const { query: { id }} = useRoute();
+    const state = reactive({
+      open:true,
+      id,
+      summaryDate: null,
+      resbgTxt: null,
+      tableDataTotal: -1,//table列表总条数,
+      tableDataFeeDetailTotal: -1, // 二级列表总条数
+      currentPage2: 1,
+      pageSize2: 10,
+      pageSize: 10,
+      teacherdialog: false,
+      teacherdialoga: false,
+      teacherdialogtitle: null,
+      searchdate: null, //选择时间
+      startTime: null, //开始时间
+      endTime: null, //结束时间
+      searchParam: {
+        pageNo: "1",
+        pageSize: "10",
+        teacherNo: null,
+        payrollPlaceId: null,
+        departId: null,
+        summaryDate:null,
+      },
+      queryFeeMonthly: {
+        teacherNo: null,
+        payrollPlaceId: null,
+        departId: null,
+        pageNo: "1",
+        pageSize: "10"
+      },
+      queryTeacherFeeDetail: {
+        teacherNo: null,
+        teachingDate: null
+      },
+      querytableFee: {
+        teacherNo: null,
+        teachingDate: null,
+        pageNo: '1',
+        pageSize: '10',
+      }
+    })
+    watch(
+    )
+    const columns = ref([
+      {
+        title: '讲师姓名 ',
+        dataIndex: 'teacherName',
+        key: 'teacherName',
+        elipsis: true,
+        align: "center",
+        width: 200,
+      },
+      {
+        title: '讲师工号',
+        dataIndex: 'teacherNo',
+        key: 'teacherNo',
+        align: "center",
+        elipsis: true,
+        width: 200,
+      },
+      {
+        title: '所属组织 ',
+        dataIndex: 'teacherOrg',
+        key: 'teacherOrg',
+        elipsis: true,
+        align: "center",
+        width: 300,
+        scopedSlots: { customRender: "teacherOrg" },
+      },
+      {
+        title: '讲师发薪地 ',
+        dataIndex: 'teacherpayrollPlace',
+        key: 'teacherpayrollPlace',
+        elipsis: true,
+        align: "center",
+        width: 200,
+      },
+      {
+        title: '授课时长(系统 , H) ',
+        dataIndex: 'teachingTime',
+        key: 'teachingTime',
+        elipsis: true,
+        align: "center",
+        width: 200,
+      },
+      {
+        title: '授课时长统计 ',
+        dataIndex: 'teachingTime',
+        key: 'teachingTime',
+        elipsis: true,
+        align: "center",
+        width: 200,
+      },
+      {
+        title: '计划费用 ',
+        dataIndex: 'expense',
+        key: 'expense',
+        elipsis: true,
+        align: "center",
+        width: 200,
+      },
+      {
+        title: '应发费用 ',
+        dataIndex: 'payableExpense',
+        key: 'payableExpense',
+        elipsis: true,
+        align: "center",
+        width: 200,
+      },
+      {
+        title: '操作 ',
+        dataIndex: 'operation',
+        key: 'operation',
+        elipsis: true,
+        align: "right",
+        width: 400,
+        scopedSlots: { customRender: "action" },
+      },
+    ])
+    //列表数据
+    const tableData = ref([
+    ])
+    // 搜索
+    const searchSubmit = () => {
+      getTableDate();
+    };
+    const trainOrglist=ref([])
+      //获取培训发生组织
+      const trainOrglista =() => {
+        getTrainOrg().then((res)=>{
+          if (res.data.code === 200) {
+              let arr = res.data.data;
+              let array = [];
+              arr.map((value) => {
+                let obj = {
+                  value: value.trainOrgId,
+                  label: value.trainOrg,
+                };
+                array.push(obj);
+              });
+              trainOrglist.value = array;
+            }
+        }) 
+      }
+      trainOrglista()
+      const PlaceOfPayList = ref([
+    ])
+    //获取讲师发薪地列表
+    const PlaceOfPayLista = () => {
+      getPayRollPlace().then((res) => {
+        if (res.data.code === 200) {
+          let arr = res.data.data;
+          let array = [];
+          arr.map((value) => {
+            let obj = {
+              value: value.payrollPlaceId,
+              label: value.payrollPlaceName,
+            };
+            array.push(obj);
+          });
+          PlaceOfPayList.value = array;
+        }
+        console.log("获取发薪地", PlaceOfPayList);
+      })
+    }
+    PlaceOfPayLista()
+    //  List接口数据
+    const getTableDate = (obj) => {
+      state.tableLoading = true
+      state.searchParam.summaryDate= state.id
+      queryTeacherFeeMonthly(state.searchParam)
+        .then((res) => {
+          tableData.value = res.data.data.records
+          state.tableDataTotal = Number(res.data.data.total);
+          state.tableLoading = false
+        })
+    };
+    getTableDate()
+  
+      //获取所属组织
+      const getOrganizationList = ref([
+      //   { value: 0, systemName: "讲师体系" },
+    ]);
+    //获取所属组织
+    const getOrganizationLista = () => {
+      // console.log('getOrganizationList')
+      getOrganization().then((res) => {
+        if (res.data.code === 200) {
+          let arr = res.data.data;
+          let array = [];
+          arr.map((value) => {
+            let obj = {
+              value: value.departId,
+              label: value.orgName,
+            };
+            array.push(obj);
+          });
+          getOrganizationList.value = array;
+        }
+      })
+    }
+    getOrganizationLista()
+    //表格内查看数据操作
+    const handleLook = (record) => {
+      let id = record.summaryDate
+      router.push({ path: '/MonthlyStatistics', query: { id } })
+      // state.teacherdialog = true;
+      // state.teacherdialogtitle = '讲师费月度统计详情'
+      // state.summaryDate = record.summaryDate;
+      // state.resbgTxt = record.resbgTxt
+      // state.queryFeeMonthly.summaryDate = record.summaryDate
+      // TeacherSystem()
+    }
+    const changePagination = (page, pageSize) => {
+      state.searchParam.pageNo = page;
+      getTableDate();
+    };
+    // 二级页面导出
+    const handleFeeMonthly = () => {
+      window.open(
+        `${process.env.VUE_APP_BASE_API}/teacher/fee/exportTeacherMonthlyFee?pageNo=${state.currentPage2
+        }&pageSize=${state.pageSize2}
+        &userNo=${state.queryFeeMonthly.payrollPlaceId ? state.queryFeeMonthly.payrollPlaceId : ""}
+        &teacherNo=${state.queryFeeMonthly.teacherNo ? state.queryFeeMonthly.teacherNo : ""}
+        &departId=${state.queryFeeMonthly.departId ? state.queryFeeMonthly.departId : ""}`)
+    }
+
+    return {
+      ...toRefs(state), 
+      trainOrglist,
+        trainOrglista,
+      handleFeeMonthly,
+      handleLook,
+      changePagination,
+      getTableDate,
+      searchSubmit,
+      tableData,
+      columns,
+      PlaceOfPayList,
+      PlaceOfPayLista,
+      getOrganizationList,
+      getOrganizationLista,
+    }
+  },
+};
+</script>
+<style lang="scss" scoped >
+.MonthlyStatistics {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .filter {
+    margin-left: 38px;
+    margin-right: 38px;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+      .select {
+        margin-right: 20px;
+        margin-bottom: 20px;
+      }
+    }
+}
+.select .ant-picker {
+  width: 410px !important;
+}
+
+.addTimeBox {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .addTime {
+    position: absolute;
+    z-index: 10;
+    margin-left: 10px;
+    color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+//导出按钮icon
+.daochu {
+  width: 16px;
+  height: 18px;
+  background-image: url("../../assets/images/coursewareManage/export1.png");
+}
+
+//弹窗内详情样式
+.display1 {
+  display: inline-block;
+  width: 200px;
+}
+
+// .display0{
+// display:inline-block ;
+// width:200px ;
+// text-align: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;
+    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;
+    margin-right: 14px;
+  }
+
+  .btn2 {
+    background-color: #4ea6ff;
+    color: #ffffff;
+  }
+}
+
+.ant-table-cell-fix-right {
+  width: 300px !important;
+}
+
+.ant-table-tbody>tr>td {
+  text-align: center;
+}
+
+.ExternalTeaching {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .filter {
+    margin-left: 38px;
+    margin-right: 38px;
+    margin-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+
+    .select {
+      margin-right: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.delete {
+  z-index: 9999;
+  width: 424px;
+  background: #ffffff;
+  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+  border-radius: 4px;
+  position: absolute;
+  left: 30%;
+  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;
+        margin-right: 10px;
+        background-image: url(@/assets/images/coursewareManage/notice.png);
+        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;
+      }
+    }
+  }
+}
+
+.CreatePath {
+  .out {
+    z-index: 9999;
+    display: block;
+    position: absolute;
+    top: 90px;
+    width: 1080px !important;
+    height: 650px;
+    overflow: auto;
+    background-color: #fff;
+
+    box-shadow: 0 0 10px rgba(118, 136, 166, 0.21);
+    left: 50%;
+    top: 300px;
+    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;
+        margin-top: -2px;
+      }
+
+      .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;
+      }
+    }
+  }
+}
+
+//添加样式
+.langbtn {
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+// 重置样式
+.resetbtn {
+  width: 100px;
+  height: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+//展开收起样式
+.moreidbtn {
+  border: none;
+  color: #4ea6ff;
+  width: 80px
+}
+
+//小竖线
+.line {
+  float: left;
+  width: 3px;
+  height: 25px;
+  background: #4ea6ff;
+  border-radius: 30%;
+  margin-right: 5px;
+}
+
+//抽屉功能
+.drawaer // /* 改变所有 a-tree-select 输入框的高度 */
+//   ::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+//   height: 40px;
+//   line-height: 40px;
+//   border-radius: 8px
+
+//   /* 确保文字垂直居中 */
+// }
+::v-deep .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+  height: 40px !important;
+  line-height: 40px;
+  border-radius: 8px
+}
+
+// 抽屉内样式
+.draitem {
+  width: 100%;
+  height: 40px !important;
+  border-radius: 8px;
+  line-height: 40px;
+}
+
+.drabtn {
+  height: 40px;
+  width: 80px;
+  border-radius: 8px;
+  margin-right: 20px
+}
+::v-deep  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+  border-radius:8px;
+  height:40px;
+}
+.ant-col-12{
+  height:80px;
+}
+.goback {
+        float: right;
+        padding-right: 70px;
+        //padding-top: 37px;
+        position: relative;
+
+        .return {
+          display: inline-block;
+          width: 42px;
+          height: 42px;
+          margin-top: 17px;
+          margin-right: 10px;
+          background-image: url("../../assets/images/projectadd/return.png");
+        }
+
+        .returntext {
+          display: inline-block;
+          position: absolute;
+          top: 12px;
+          color: #4ea6ff;
+          font-size: 14px;
+        }
+      }
+      </style>
+