zc

src/assets/styles/ZDelement.scss

@@ -503,3 +503,7 @@
   height:30px;
   padding:0;
 }
+//时间选择器中间边框位置调整
+.el-time-spinner__wrapper{
+  margin-top:-16px;
+}

src/views/safetyEducationExam/trainingCourse/addDialog.vue

@@ -0,0 +1,677 @@
+<template>
+  <!--添加/编辑弹窗-->
+  <el-dialog class="trainingCourseAddDialog" :title='dialogTitle' @close="dialogClose"
+             :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
+             :visible.sync="dialogType" v-if="dialogType" width="1373px">
+    <!--提交界面-->
+    <el-form class="add-dialog-form-box" ref="dialogForm" v-show="!dialogUserType" :model="dialogForm" :rules="rules" label-width="120px">
+      <el-form-item label="课程名称：" prop="data1">
+        <el-input v-model="dialogForm.data1" placeholder="请输入课程名称" maxLength="15" style="width:800px;"/>
+      </el-form-item>
+      <div class="dialogFormFlex">
+        <el-form-item label="主讲老师：" prop="data2">
+          <el-select
+            style="width:300px;"
+            v-model="dialogForm.data2"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入姓名"
+            :remote-method="getMainTeacher"
+            :loading="loading">
+            <el-option
+              v-for="item in mainTeacherOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.label">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="辅导老师：" prop="data3" label-width="200px">
+          <el-select
+            style="width:300px;"
+            v-model="dialogForm.data3"
+            multiple
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请输入姓名"
+            :remote-method="getSecondaryTeacher"
+            :loading="loading">
+            <el-option
+              v-for="item in secondaryTeacherOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.label">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上课人员：" prop="data4" label-width="200px">
+          <p style="line-height:40px;color:#0183FA;cursor: pointer" @click="addUserButton">
+            已选择 ({{dialogForm.data4?dialogForm.data4.length:0}}人)
+          </p>
+        </el-form-item>
+      </div>
+      <div class="dialogFormFlex">
+        <el-form-item label="上课场所：" prop="data5">
+          <el-select v-model="dialogForm.data5"
+                     style="width:300px;" placeholder="请选择学院">
+            <el-option
+              @change="deptChange"
+              v-for="item in deptOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.label">
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="实验室：" prop="data6" label-width="200px">
+          <el-select v-model="dialogForm.data6" v-if="dialogForm.data7 == 1"
+                     style="width:300px;" placeholder="请选择实验室">
+            <el-option
+              v-for="item in subOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.label">
+            </el-option>
+          </el-select>
+          <el-input v-model="dialogForm.data6" v-if="dialogForm.data7 == 2"
+                    placeholder="请输入上课场所" maxLength="15" style="width:300px;"/>
+        </el-form-item>
+        <p class="inquire-button-one"
+           style="margin-left:20px;width:140px;border-radius:4px;" @click="subTypeClick">
+          {{dialogForm.data7==1?'手动输入上课场所':(dialogForm.data7==2?'选择学校':'')}}
+        </p>
+      </div>
+      <div class="dialogFormFlex">
+        <el-form-item label="上课时间：" prop="courseTime">
+          <el-time-picker
+            class="trainingCourse-el-time-picker"
+            :popper-append-to-body="true"
+            is-range
+            style="width:300px;"
+            format="HH:mm"
+            value-format="HH:mm"
+            v-model="dialogForm.courseTime"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围">
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="上课日期：" prop="courseDate" label-width="200px">
+          <el-date-picker
+            style="width:300px;"
+            value-format="yyyy-MM-dd"
+            v-model="dialogForm.courseDate"
+            type="daterange"
+            :picker-options="pickerOptions"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </el-form-item>
+      </div>
+      <el-form-item label="课程内容：" prop="data8">
+        <el-input type="textarea" v-model="dialogForm.data8" resize="none" show-word-limit
+                  :autosize="{ minRows: 10, maxRows: 10}" maxLength="100" placeholder="请输入处理描述"
+                  style="width:1122px;"/>
+      </el-form-item>
+    </el-form>
+    <!--人员选择界面-->
+    <div class="inspectionPlan-dialog-user-box" v-show="dialogUserType">
+      <div class="left-max-box">
+        <div class="dept-table-title-box">
+          <p>待选人员</p>
+          <p>{{userNumLeft}}/{{userTotalLeft}}</p>
+        </div>
+        <div class="dept-table-max-box">
+          <el-form :model="userQueryParamsLeft" class="form-box" ref="queryForm" :inline="true" label-width="50px">
+            <el-form-item label="" prop="deptId">
+              <el-select v-model="userQueryParamsLeft.deptId" clearable placeholder="选择部门" style="width: 110px">
+                <el-option
+                  v-for="item in deptOptions"
+                  :key="item.deptId"
+                  :label="item.deptName"
+                  :value="item.deptId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="" prop="searchValue" class="form-index">
+              <el-input
+                maxLength="20"
+                v-model="userQueryParamsLeft.searchValue"
+                placeholder="搜索姓名/工号"
+                clearable
+                @clear="userHandleQueryLeft"
+                style="width: 240px">
+                <p class="el-icon-search" slot="append" @click="userHandleQueryLeft"></p>
+              </el-input>
+            </el-form-item>
+            <el-form-item style="margin-right:0;">
+              <p class="reset-button-one" @click="userResetQueryLeft" style="width:60px;">重置</p>
+            </el-form-item>
+          </el-form>
+          <el-table ref="leftUserTable" border :data="userTableListLeft" @selection-change="userChangeLeft" :row-key="getRowKeys">
+            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
+            <el-table-column label="姓名" align="center" prop="nickName" show-overflow-tooltip/>
+            <el-table-column label="工号" align="center" prop="userName" show-overflow-tooltip width="150"/>
+            <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="168"/>
+          </el-table>
+          <pagination layout="total, prev, pager, next, jumper"
+                      v-show="userTotalLeft>0"
+                      :total="userTotalLeft"
+                      :pager-count="5"
+                      :page.sync="userQueryParamsLeft.pageNum"
+                      :limit.sync="userQueryParamsLeft.pageSize"
+                      @pagination="userGetListLeft"/>
+        </div>
+      </div>
+      <div class="center-box">
+        <p class="el-icon-arrow-left" @click="userArrowButton(1)"></p>
+        <p class="el-icon-arrow-right" @click="userArrowButton(2)"></p>
+      </div>
+      <div class="right-max-box">
+        <div class="dept-table-title-box">
+          <p>已选成员</p>
+          <p>{{userNumRight}}/{{userTotalRight}}</p>
+        </div>
+        <div class="dept-table-max-box">
+          <el-form :model="userQueryParamsRight" class="form-box" ref="queryForm" :inline="true" label-width="50px">
+            <el-form-item label="" prop="deptId">
+              <el-select v-model="userQueryParamsRight.deptId" clearable placeholder="选择部门" style="width: 110px">
+                <el-option
+                  v-for="item in deptOptions"
+                  :key="item.deptId"
+                  :label="item.deptName"
+                  :value="item.deptId">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="" prop="searchValue" class="form-index">
+              <el-input
+                maxLength="20"
+                v-model="userQueryParamsRight.searchValue"
+                placeholder="搜索姓名/工号"
+                clearable
+                @clear="userHandleQueryRight"
+                style="width: 240px">
+                <p class="el-icon-search" slot="append" @click="userHandleQueryRight"></p>
+              </el-input>
+            </el-form-item>
+            <el-form-item style="margin-right:0;">
+              <p class="reset-button-one" @click="userResetQueryRight" style="width:60px;">重置</p>
+            </el-form-item>
+          </el-form>
+          <el-table ref="rightUserTable" border :data="userTableListRight" @selection-change="userChangeRight" :row-key="getRowKeys">
+            <el-table-column type="selection" width="50" :reserve-selection="true" align="center"/>
+            <el-table-column label="姓名" align="center" prop="nickName" show-overflow-tooltip/>
+            <el-table-column label="工号" align="center" prop="userName" show-overflow-tooltip width="150"/>
+            <el-table-column label="所在部门" align="center" prop="deptName" show-overflow-tooltip width="168"/>
+          </el-table>
+          <pagination layout="total, prev, pager, next, jumper"
+                      v-show="userTotalRight>0"
+                      :total="userTotalRight"
+                      :pager-count="5"
+                      :page.sync="userQueryParamsRight.pageNum"
+                      :limit.sync="userQueryParamsRight.pageSize"
+                      @pagination="userGetListRight"/>
+        </div>
+      </div>
+    </div>
+    <!--公共操作按钮-->
+    <div slot="footer" class="dialog-footer">
+      <p class="dialog-footer-null-p"></p>
+      <el-button @click="dialogClose">取 消</el-button>
+      <el-button type="primary" @click="dialogSubmit">确认</el-button>
+      <p class="dialog-footer-null-p"></p>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import { findUserList } from '@/api/safetyCheck/index'
+  export default {
+    name: 'trainingCourseAddDialog',
+    props:{
+      addDialogData:{},
+    },
+    data(){
+      const timeRules = (rule, value, callback) => {
+        if(value[0] == value[1]){
+          callback(new Error("开始与结束时间不能相同"));
+        }else{
+          callback();
+        }
+      };
+      return{
+        // 设置只能选择当前日期及之后的日期
+        pickerOptions: {
+          disabledDate(time) {
+            return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
+          }
+        },
+        // 遮罩层
+        loading: false,
+        //弹窗数据
+        dialogType:true,
+        dialogUserType:false,
+        dialogTitle:"",
+        dialogForm:{
+          data1:"",
+          data2:"",
+          data3:"",
+          data4:[],
+          data5:"",
+          data6:"",
+          data7:1,
+          data8:"",
+          courseTime:[new Date(2023, 1, 1, 0, 0), new Date(2023, 1, 1, 23, 59)],
+          courseDate:[],
+        },
+        //验证
+        rules: {
+          phone: [
+            { required: true, message: "请输入联系方式", trigger: "blur" },
+            { required: true, message: "请输入联系方式", validator: this.spaceJudgment, trigger: "blur" },
+            { pattern:/^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(16[0-9])|(17[0,3,5-8])|(18[0-9])|(147))+\d{8}$/, message: "请输入正确的联系方式", trigger: "blur" }
+          ],
+          data1: [
+            { required: true, message: "请输入课程名称", trigger: "blur" },
+            { required: true, message: "请输入课程名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          data2: [
+            { required: true, message: "请选择主讲老师", trigger: "blur" },
+          ],
+          data4: [
+            { required: true, message: "请选择上课人员", trigger: "blur" },
+          ],
+          data5: [
+            { required: true, message: "请选择上课场所", trigger: "blur" },
+          ],
+          courseTime: [
+            { required: true, message: "请选择上课时间", trigger: "blur" },
+            { required: true, message: "开始与结束时间不能相同", validator: timeRules, trigger: "blur" },
+          ],
+          courseDate: [
+            { required: true, message: "请选择上课日期", trigger: "blur" },
+          ],
+        },
+        //主要老师
+        mainTeacherOptions:[{value:'1',label:"1"}],
+        //辅助老师
+        secondaryTeacherOptions:[],
+        //院系列表
+        deptOptions:[],
+        //实验室列表
+        subOptions:[],
+        /**********人员选择数据**********/
+        userQueryParamsLeft:{
+          pageNum: 1,
+          pageSize: 20,
+          deptId:"",
+          searchValue:"",
+          filtType:1
+        },
+        userTableListLeft:[],
+        userTotalLeft:0,
+        userNumLeft:0,
+        userIdsLeft:[],
+        userQueryParamsRight:{
+          pageNum: 1,
+          pageSize: 20,
+          deptId:"",
+          searchValue:"",
+          filtType:2
+        },
+        userTableListRight:[],
+        userTotalRight:0,
+        userNumRight:0,
+        userIdsRight:[],
+        //选择人员交互数据
+        dialogTableDataList:[],
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.initialize();
+    },
+    methods:{
+      //初始化
+      initialize(){
+        this.$set(this,'dialogTitle',this.addDialogData.id?'编辑':'添加');
+        if(this.addDialogData.id){
+          //编辑数据
+        }
+        this.getDeptList();
+      },
+      //提交按钮
+      dialogSubmit(){
+        if(this.dialogUserType){
+          //选择人员页面
+          if(!this.dialogTableDataList[0]){
+            this.msgError('请选择人员')
+            return
+          }
+          let userList = JSON.parse(JSON.stringify(this.dialogTableDataList))
+          this.$set(this.dialogForm,'data4',userList)
+          this.$set(this,'dialogUserType',false)
+        }else{
+          //提交页面
+          this.$refs["dialogForm"].validate(valid => {
+            if (valid) {
+              this.$parent.controlsButton(6)
+            }
+          })
+        }
+      },
+      //取消按钮
+      dialogClose(){
+        if(this.dialogUserType){
+          //选择人员页面
+          this.$set(this,'dialogTitle',this.addDialogData.id?'编辑':'添加');
+          this.$set(this,'dialogUserType',false);
+        }else{
+          //提交页面
+          this.$parent.controlsButton(5)
+        }
+      },
+      //主要老师搜索
+      getMainTeacher(query){
+        if(query != ''){
+          this.loading = true;
+          console.log('query',query)
+          this.$set(this,'mainTeacherOptions',[{value:'1',label:"11"}])
+          this.loading = false;
+          console.log('mainTeacherOptions',this.mainTeacherOptions)
+        }
+      },
+      //辅助老师搜错
+      getSecondaryTeacher(query){
+        if(query != ''){
+          console.log('1')
+          this.loading = true;
+          this.$set(this,'secondaryTeacherOptions',[{value:'2',label:"22"}])
+          this.loading = false;
+        }
+      },
+      //选择院系
+      deptChange(val){
+        this.$set(this.dialogForm,'data6','');
+        this.getSubList(val)
+      },
+      //获取院系列表
+      getDeptList(){
+        this.$set(this,'deptOptions',[]);
+      },
+      //获取实验室列表
+      getSubList(val){
+        this.$set(this,'subOptions',[]);
+      },
+      //实验室切换
+      subTypeClick(){
+        this.$set(this.dialogForm,'data6','');
+        this.$set(this.dialogForm,'data7',this.dialogForm.data7==1?2:1);
+      },
+      //开启人员选择
+      addUserButton(){
+        let userList = JSON.parse(JSON.stringify(this.dialogForm.data4))
+        this.$set(this,'dialogTableDataList',userList)
+        this.$set(this,'dialogTitle','选择人员');
+        this.$set(this,'dialogUserType',true);
+        this.userHandleQueryLeft();
+        this.userHandleQueryRight();
+      },
+      /*===================================人员选择相关===================================*/
+      //查询
+      userHandleQueryLeft(){
+        this.$set(this.userQueryParamsLeft,'pageNum',1);
+        this.$set(this,'userNumLeft',0);
+        this.$set(this,'userIdsLeft',[]);
+        this.$refs.leftUserTable.clearSelection();
+        this.userGetListLeft();
+      },
+      //重置
+      userResetQueryLeft(){
+        this.$set(this,'userQueryParamsLeft',{
+          pageNum: 1,
+          pageSize: 20,
+          deptId:"",
+          searchValue:"",
+          filtType:1
+        });
+        this.userHandleQueryLeft();
+      },
+      //查询接口
+      userGetListLeft(){
+        let self = this;
+        let leftObj = JSON.parse(JSON.stringify(this.userQueryParamsLeft));
+        leftObj.selectedUserIds = [];
+        for(let i=0;i<self.dialogTableDataList.length;i++){
+          leftObj.selectedUserIds.push(self.dialogTableDataList[i].userId);
+        }
+        findUserList(leftObj).then(response => {
+          this.userTotalLeft = response.total;
+          this.userTableListLeft = response.rows;
+        });
+      },
+      //查询
+      userHandleQueryRight(){
+        this.$set(this.userQueryParamsRight,'pageNum',1);
+        this.$set(this,'userNumRight',0);
+        this.$set(this,'userIdsRight',[]);
+        this.$refs.rightUserTable.clearSelection();
+        this.userGetListRight();
+      },
+      //重置
+      userResetQueryRight(){
+        this.$set(this,'userQueryParamsRight',{
+          pageNum: 1,
+          pageSize: 20,
+          deptId:"",
+          searchValue:"",
+          filtType:2
+        });
+        this.userHandleQueryRight();
+      },
+      //查询接口
+      userGetListRight(){
+        let self = this;
+        let rightObj = JSON.parse(JSON.stringify(this.userQueryParamsRight));
+        rightObj.userIds = [];
+        for(let i=0;i<self.dialogTableDataList.length;i++){
+          rightObj.userIds.push(self.dialogTableDataList[i].userId);
+        }
+        findUserList(rightObj).then(response => {
+          this.userTotalRight = response.total;
+          this.userTableListRight = response.rows;
+        });
+      },
+      userChangeLeft(selection){
+        this.userNumLeft = selection.length;
+        this.userIdsLeft = selection.map(item => item.userId);
+      },
+      userChangeRight(selection){
+        this.userNumRight = selection.length;
+        this.userIdsRight = selection.map(item => item.userId);
+      },
+      //人员穿梭按钮
+      userArrowButton(type){
+        let self = this;
+        if(type == 1){
+          //右至左
+          if(this.$refs.rightUserTable.selection[0]){
+            let list = JSON.parse(JSON.stringify(this.dialogTableDataList));
+            let userIdsRight = JSON.parse(JSON.stringify(this.$refs.rightUserTable.selection))
+            for(let i=0;i<userIdsRight.length;i++){
+              for(let s=0;s<list.length;s++){
+                if(userIdsRight[i].userId == list[s].userId){
+                  list.splice(s,1);
+                  s--
+                }
+              }
+            }
+            this.$set(this,'dialogTableDataList',list);
+            this.$refs.rightUserTable.clearSelection();
+            this.userHandleQueryLeft();
+            this.userHandleQueryRight();
+          }else{
+            this.msgError('请先勾选右侧列表')
+          }
+        }else if(type == 2){
+          //左至右
+          if(this.userIdsLeft[0]){
+            let list = JSON.parse(JSON.stringify(this.dialogTableDataList));
+            let userIdsLeft = JSON.parse(JSON.stringify(this.$refs.leftUserTable.selection))
+            for(let i=0;i<userIdsLeft.length;i++){
+              let obj = {
+                userId:userIdsLeft[i].userId,
+                name:userIdsLeft[i].nickName,
+                jobNum:userIdsLeft[i].userName,
+                deptName:userIdsLeft[i].deptName,
+                deptId:userIdsLeft[i].deptId,
+                userType:userIdsLeft[i].userType,
+              }
+              list.push(obj);
+            }
+            if(list.length>50){
+              this.msgError('巡查成员最多50人')
+              return
+            }
+            this.$set(this,'dialogTableDataList',list);
+            this.$refs.leftUserTable.clearSelection();
+            this.userHandleQueryLeft();
+            this.userHandleQueryRight();
+          }else{
+            this.msgError('请先勾选左侧列表')
+          }
+        }
+      },
+      /*===记录勾选数据===
+        需要再el-table 添加  :row-key="getRowKeys"
+        需要在selection 添加 :reserve-selection="true"
+      */
+      getRowKeys(row) {
+        return row.userId
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .trainingCourseAddDialog{
+    .add-dialog-form-box{
+      height: 610px;
+    }
+    .dialogFormFlex{
+      display:flex;
+    }
+    .inspectionPlan-dialog-user-box{
+      display: flex;
+      overflow: hidden;
+      height:610px;
+      .el-table__empty-text{
+        background-size: 30%!important;
+      }
+      .dept-table-title-box{
+        display: flex;
+        padding:0 20px;
+        background: rgba(1,131,250,0.1);
+        p{
+          flex:1;
+          color:#0183FA;
+          font-size:16px;
+          line-height:40px;
+        }
+        p:nth-child(1){
+          text-align: left;
+        }
+        p:nth-child(2){
+          text-align: right;
+        }
+      }
+      .dept-table-max-box{
+        border: 1px solid #e0e0e0;
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        padding:20px;
+        .form-index{
+          .el-input__inner{
+            border-right:none;
+            padding-right:0;
+          }
+          .el-input-group__append{
+            background: #fff;
+            cursor: pointer;
+            padding:0 10px;
+          }
+        }
+        input{
+          border: 1px solid #DCDFE6;
+        }
+      }
+      .left-max-box{
+        height:610px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width:632px;
+      }
+      .right-max-box{
+        height:610px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        width:632px;
+      }
+      .center-box{
+        width:68px;
+        p{
+          display: block;
+          border-radius:50%;
+          width:30px;
+          height:30px;
+          line-height:30px;
+          text-align: center;
+          background: rgba(245,245,245,1);
+          color:rgba(62,62,62,1);
+          cursor: pointer;
+          font-size:16px;
+        }
+        p:nth-child(1){
+          margin:270px 19px 0;
+        }
+        p:nth-child(2){
+          margin:14px 19px 0;
+        }
+        p:hover{
+          color:#fff;
+          background: #0183fa;
+        }
+      }
+      .el-icon-search{
+        cursor: pointer;
+      }
+      ::v-deep .el-input-group__append{
+        padding:0;
+        p{
+          text-align: center;
+          line-height: 34px;
+          width:50px;
+          height:34px;
+          font-size:16px;
+        }
+      }
+    }
+    .dialog-footer{
+      display: flex;
+      .dialog-footer-null-p{
+        flex:1;
+      }
+    }
+  }
+</style>

src/views/safetyEducationExam/trainingCourse/index.vue

@@ -22,7 +22,7 @@
           <p class="reset-button-one" @click="resetForm">重置</p>
         </el-form-item>
         <el-form-item style="float: right;">
-          <p class="inquire-button-one" style="width:100px;" @click="addDialogOpen">+  新增课程</p>
+          <p class="inquire-button-one" style="width:100px;" @click="controlsButton(1)">+  新增课程</p>
         </el-form-item>
       </el-form>
     </div>
@@ -42,9 +42,9 @@
           <template slot-scope="scope">
             <div class="table-button-box">
               <p class="table-button-null"></p>
-              <p class="table-button-p" @click="controlsButton(1,scope.row)">详情</p>
+              <p class="table-button-p" @click="controlsButton(3,scope.row)">详情</p>
               <p class="table-button-p" @click="controlsButton(2,scope.row)">编辑</p>
-              <p class="table-button-p" @click="controlsButton(3,scope.row)">删除</p>
+              <p class="table-button-p" @click="controlsButton(4,scope.row)">删除</p>
               <p class="table-button-null"></p>
             </div>
           </template>
@@ -55,53 +55,41 @@
                   :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                   @pagination="getList"/>
     </div>
-
-    <el-dialog :title='dialogTitle' @close="dialogClose" :visible.sync="dialogType" v-if="dialogType" width="1373px">
-      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="80px">
-        <el-form-item label="预案名称" prop="name">
-          <el-input v-model="dialogForm.name" placeholder="请输入预案名称" maxLength="15"/>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="dialogClose">取 消</el-button>
-        <el-button style="width:100px;" type="primary" @click="dialogSubmit">配置规则</el-button>
-      </div>
-    </el-dialog>
+    <!--添加/编辑弹窗-->
+    <add-dialog v-if="addDialogType" :addDialogData="addDialogData"></add-dialog>
+    <info-dialog v-if="infoDialogType" :infoDialogData="infoDialogData"></info-dialog>
   </div>
 </template>
 
 <script>
+  import addDialog from './addDialog.vue'
+  import infoDialog from './infoDialog.vue'
   export default {
     name: 'trainingCourse',
+    components: {
+      addDialog,
+      infoDialog
+    },
     data(){
       return{
         // 遮罩层
         loading: false,
+        //查询数据
         queryParams:{
           type:1,
           searchValue:"",
           page:1,
           pageSize:20,
         },
-        tableData: [{}],
+        //列表数据
+        tableData: [{ id:"123", }],
         total:10,
-        dialogType:false,
-        dialogTitle:"",
-        dialogForm:{
-          data1:"",
-          data2:"",
-          data3:"",
-          data4:"",
-          data5:"",
-          data6:"",
-          data7:"",
-          data8:"",
-          data9:"",
-          data10:"",
-          data11:"",
-          data12:"",
-        },
-        rules:{}
+        //新增弹窗数据
+        addDialogType:false,
+        addDialogData:{},
+        //详情弹窗数据
+        infoDialogType:false,
+        infoDialogData:{},
       }
     },
     created(){
@@ -111,16 +99,19 @@
       this.getList();
     },
     methods:{
+      //列表状态切换
       queryTypeClick(type){
         if(this.queryParams.type != type){
           this.$set(this.queryParams,'type',type);
           this.getList();
         }
       },
+      //列表搜索
       onSearch(){
         this.$set(this.queryParams,'page',1);
         this.getList();
       },
+      //列表重置
       resetForm(){
         this.$set(this,'queryParams',{
           type:1,
@@ -138,29 +129,49 @@
         //   this.loading = false;
         // });
       },
-      //新增按钮
-      addDialogOpen(){
-        this.$set(this,'dialogTitle','添加');
-        this.$set(this,'dialogType',true);
-      },
-      dialogSubmit(){
-
-      },
-      dialogClose(){
-        this.$set(this,'dialogType',false);
-      },
       //操作按钮
       controlsButton(type,row){
         if(type == 1){
-          //查看详情
+          //新增
+          this.$set(this,'addDialogData',{});
+          this.$set(this,'addDialogType',true);
         }else if(type == 2){
           //编辑
-          this.$set(this,'dialogTitle','编辑');
-          this.$set(this,'dialogType',true);
+          this.$set(this,'addDialogData',row);
+          this.$set(this,'addDialogType',true);
         }else if(type == 3){
+          //详情
+          this.$set(this,'infoDialogType',true);
+          this.$set(this,'infoDialogData',row);
+        }else if(type == 4){
           //删除
+          let self = this;
+          this.$confirm('是否确认删除?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            // checkPlanDelete({id:row.id}).then(response => {
+            //   self.msgSuccess(response.msg)
+            //   self.getList();
+            // })
+          }).then(() => {
+          }).catch(() => {});
+        }else if(type == 5){
+          //关闭新增&编辑窗口
+          this.$set(this,'addDialogType',false);
+          this.$set(this,'addDialogData',{});
+        }else if(type == 6){
+          //关闭新增&编辑窗口 并刷新页面
+          this.$set(this,'addDialogType',false);
+          this.$set(this,'addDialogData',{});
+          this.resetForm();
+        }else if(type == 7){
+          //关闭详情窗口
+          this.$set(this,'infoDialogType',false);
+          this.$set(this,'infoDialogData',{});
         }
-      }
+      },
     }
   }
 </script>

src/views/safetyEducationExam/trainingCourse/infoDialog.vue

@@ -0,0 +1,405 @@
+<template>
+  <el-dialog class="trainingCourseInfoDialog" :title='dialogTitle'
+             :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false"
+             :visible.sync="dialogType" v-if="dialogType" width="1161px">
+    <div class="info-max-big-box" v-if="infoType == 1">
+      <div class="info-big-box">
+        <div>
+          <p>课程名称：</p>
+          <p>{{infoData.data1}}</p>
+        </div>
+        <div>
+          <p>是否开课：</p>
+          <p>{{infoData.data2==1?'已开课':'未开课'}}</p>
+        </div>
+      </div>
+      <div class="info-big-box">
+        <div>
+          <p>主讲老师：</p>
+          <p>{{infoData.data3}}</p>
+        </div>
+        <div>
+          <p>辅导老师：</p>
+          <p>{{infoData.data4}}</p>
+        </div>
+      </div>
+      <div class="info-big-box">
+        <div>
+          <p>上课人员：</p>
+          <p class="color-p cursor-p" @click="pageTypeClick(2)">已选择学生 ({{infoData.data5.length}}人)</p>
+        </div>
+        <div>
+          <p>上课场所：</p>
+          <p>{{infoData.data6}}</p>
+        </div>
+      </div>
+      <div class="info-big-box">
+        <div>
+          <p>上课日期：</p>
+          <p>{{infoData.data7}}</p>
+        </div>
+        <div>
+          <p>上课时间：</p>
+          <p>{{infoData.data8}}</p>
+        </div>
+      </div>
+      <div class="info-big-box-one">
+        <p>课程内容：</p>
+        <p>{{infoData.data9?infoData.data9:'无'}}</p>
+      </div>
+      <p class="info-big-box-title" v-if="infoData.data2==1">课后总结</p>
+      <div class="info-big-box-user" v-if="infoData.data2==1">
+        <p>签到人员：</p>
+        <p @click="pageTypeClick(3)">
+          <span>实际签到人数（{{infoData.data10}}人）</span>
+          <span v-if="infoData.data11>0">、有{{infoData.data11}}人未签到</span>
+          <span v-if="infoData.data12>0">、非计划内签到{{infoData.data12}}人</span>
+        </p>
+      </div>
+      <div class="info-big-box-img" v-if="infoData.data2==1" :class="!infoData.data13[0]?'info-big-box-img-margin-bottom':''">
+        <p>上传照片：</p>
+        <div>
+          <p v-if="!infoData.data13[0]">无</p>
+          <img v-for="(item,index) in infoData.data13" :key="index"
+               @click="pageTypeClick(4,item,index)" :src="item">
+        </div>
+      </div>
+      <div class="info-big-box-one" v-if="infoData.data2==1">
+        <p>课程总结：</p>
+        <p>{{infoData.data9?infoData.data9:'无'}}</p>
+      </div>
+    </div>
+    <div class="user-max-big-box" v-if="infoType == 2 || infoType == 3">
+      <el-form class="form-box" :model="userQueryParams" ref="examineForm" :inline="true">
+        <el-form-item label="关键字" prop="name">
+          <el-input
+            style="width:150px;"
+            maxlength="10"
+            clearable
+            v-model="userQueryParams.searchValue"
+            placeholder="请输入姓名"/>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-select v-model="userQueryParams.userQueryParamsType"
+                     style="width:150px;"
+                     placeholder="请选择启动条件" clearable>
+            <el-option
+              v-for="dict in typeOptions"
+              :key="dict.key"
+              :label="dict.value"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否计划内" v-if="infoType == 3">
+          <el-select v-model="userQueryParams.userQueryParamsProject"
+                     style="width:150px;"
+                     placeholder="请选择启动条件" clearable>
+            <el-option
+              v-for="dict in projectOptions"
+              :key="dict.key"
+              :label="dict.value"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <p class="inquire-button-one" @click="onSearch">查询</p>
+          <p class="reset-button-one" @click="resetForm">重置</p>
+        </el-form-item>
+      </el-form>
+      <p class="sign-in-num">
+        <span>签到人数：{{infoData.data10}}</span>
+        <span>、未签到人数：{{infoData.data11}}</span>
+        <span v-if="infoType == 3">、计划外签到人数：{{infoData.data12}}</span>
+      </p>
+      <el-table border :data="tableData" ref="multipleTable">
+        <el-table-column label="序号" prop="code" width="50"/>
+        <el-table-column label="姓名" prop="name" show-overflow-tooltip/>
+        <el-table-column label="导师" prop="mainPoint" width="150" show-overflow-tooltip/>
+        <el-table-column label="班级" prop="mainPoint" width="150" show-overflow-tooltip/>
+        <el-table-column label="所在部门" prop="mainPoint" width="300" show-overflow-tooltip v-if="infoType == 2"/>
+        <el-table-column label="所在部门" prop="mainPoint" width="150" show-overflow-tooltip v-if="infoType == 3"/>
+        <el-table-column label="是否计划内" prop="mainPoint" width="150" show-overflow-tooltip v-if="infoType == 3"/>
+        <el-table-column label="状态" prop="mainPoint" width="150" show-overflow-tooltip/>
+      </el-table>
+      <pagination :page-sizes="[20, 30, 40, 50]" v-show="total>0" :total="total"
+                  layout="total, prev, pager, next, sizes, jumper"
+                  :page.sync="userQueryParams.pageNum" :limit.sync="userQueryParams.pageSize"
+                  @pagination="getList"/>
+    </div>
+    <div class="img-max-big-box" v-if="infoType == 4">
+      <div class="look-img-box scrollbar-box">
+        <img class="look-img" :src="lookUrl">
+      </div>
+    </div>
+    <p class="position-off-button el-icon-close" @click="dialogClose"></p>
+    <div slot="footer" class="img-button-box" v-if="infoType == 4">
+      <p class="img-null-p"></p>
+      <div class="img-button-min-box">
+        <img v-for="(item,index) in infoData.data13" :key="index"
+             :class="index==lookIndex?'lookImg':''"
+             @click="lockImgButton(item,index)" :src="item">
+      </div>
+      <p class="img-null-p"></p>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    name: 'trainingCourseInfoDialog',
+    props:{
+      infoDialogData:{},
+    },
+    data(){
+      return{
+        dialogTitle:"",
+        dialogType:true,
+        dialogUserType:false,
+        //页面状态 1.详情 2.人员 3.照片
+        infoType:1,
+        //详情数据
+        infoData:{
+          data1:'计划计划计划标题',
+          data2:1,
+          data3:'张老师',
+          data4:'张老师、陈老师',
+          data5:[{userId:'1'},{userId:'2'},{userId:'3'}],
+          data6:'环境与测绘学院，实验大楼，大气污染实验室',
+          data7:'2023-05-01至2023-05-01',
+          data8:'08:00至09:00',
+          data9:'内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容',
+          data10:'28',
+          data11:'15',
+          data12:'8',
+          data15:[{userId:'1'},{userId:'2'},{userId:'3'}],
+          data13:[
+            'https://img1.baidu.com/it/u=3593301246,2849300752&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+            'https://img2.baidu.com/it/u=3673010870,2493779584&fm=253&fmt=auto&app=138&f=JPEG?w=705&h=500',
+            'https://img1.baidu.com/it/u=4270144465,1604793144&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
+            'https://img2.baidu.com/it/u=3219435629,4248079746&fm=253&fmt=auto&app=138&f=JPEG?w=705&h=500',
+            'https://img2.baidu.com/it/u=3344911223,3409692090&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313'
+          ],
+          data14:'课程总结内容',
+        },
+        // 查看图片url
+        lookUrl:null,
+        // 查看图片index
+        lookIndex:null,
+        //人员查询相关
+        userQueryParams:{
+          pageNum:1,
+          pageSize:20,
+          searchValue:"",
+          userQueryParamsType:"",
+          userQueryParamsProject:"",
+        },
+        typeOptions:[{key:"1",value:"已签到"},{key:"2",value:"未签到"}],
+        projectOptions:[{key:"1",value:"是"},{key:"2",value:"否"}],
+        tableData:[],
+        total:0,
+      }
+    },
+    created(){
+
+    },
+    mounted(){
+      this.initialize();
+    },
+    methods:{
+      //初始化
+      initialize(){
+        this.$set(this,'dialogTitle','详情');
+      },
+      //页面状态切换
+      pageTypeClick(type,item,index){
+        if(this.infoType != type){
+          if(type == 2){
+
+          }else if(type == 3){
+
+          }else if(type == 4){
+            this.$set(this,'lookUrl',item);
+            this.$set(this,'lookIndex',index);
+          }
+          this.$set(this,'dialogTitle',type == 2?'上课人员':(type == 3?'签到人员':(type == 4?'照片':'')));
+          this.$set(this,'infoType',type);
+        }
+      },
+      //查看图片切换
+      lockImgButton(item,index){
+        if(index != this.lookIndex){
+          this.$set(this,'lookUrl',item);
+          this.$set(this,'lookIndex',index);
+        }
+      },
+      //页面取消按钮
+      dialogClose(){
+        if(this.infoType == 1){
+          this.$parent.controlsButton(7)
+        }else{
+          this.$set(this,'dialogTitle','详情')
+          this.$set(this,'infoType',1);
+        }
+      },
+      //人员列表查询
+      onSearch(){},
+      //人员列表重置
+      resetForm(){},
+      //获取人员列表
+      getList(){
+
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .trainingCourseInfoDialog{
+    .info-max-big-box{
+      height: 600px;
+      .info-big-box:nth-child(1){
+        margin-top:0;
+      }
+      .info-big-box{
+        display: flex;
+        margin:26px 79px 0;
+        div{
+          display: flex;
+          p{
+            font-size:16px;
+            line-height:20px;
+            color:#333;
+          }
+          p:nth-child(1){
+            width:90px;
+          }
+          p:nth-child(2){
+            flex:1;
+          }
+        }
+        div:nth-child(1){
+          width:486px;
+          margin-right:79px;
+        }
+        div:nth-child(2){
+          width:438px;
+        }
+      }
+      .info-big-box-one{
+        display: flex;
+        margin:26px 79px 20px;
+        p{
+          font-size:16px;
+          line-height:20px;
+          color:#333;
+        }
+        p:nth-child(1){
+          width:90px;
+        }
+        p:nth-child(2){
+          flex:1;
+        }
+      }
+      .info-big-box-title{
+        padding:0 30px;
+        font-size:18px;
+        color:#333;
+        line-height: 40px;
+        background: #F5F5F5;
+      }
+      .info-big-box-user{
+        display: flex;
+        margin:26px 79px 0;
+        p{
+          font-size:16px;
+          line-height:20px;
+        }
+        p:nth-child(1){
+          width:90px;
+        }
+        p:nth-child(2){
+          color:#0183fa;
+          cursor: pointer;
+        }
+      }
+      .info-big-box-img{
+        display: flex;
+        margin:26px 79px 0;
+        p{
+          font-size:16px;
+          line-height:20px;
+          width:90px;
+        }
+        div{
+          img{
+            width:160px;
+            height:90px;
+            margin-right:10px;
+            border-radius:4px;
+            cursor: pointer;
+          }
+        }
+      }
+      .cursor-p{
+        cursor: pointer;
+      }
+      .color-p{
+        color:#0183fa!important;
+      }
+    }
+    .user-max-big-box{
+      height: 600px;
+      display: flex;
+      flex-direction: column;
+      padding:0 30px;
+      .sign-in-num{
+        background: rgba(1,131,250,0.2);
+        color:#0183FA;
+        line-height:40px;
+        margin-bottom:20px;
+        padding:0 14px;
+      }
+    }
+    .img-max-big-box{
+      height: 470px;
+      .look-img-box{
+        height:470px;
+        overflow-x: hidden;
+        img{
+          width: 836px;
+          margin:0 137px;
+        }
+      }
+    }
+    .position-off-button{
+      position: absolute;
+      right:20px;
+      top:20px;
+      cursor: pointer;
+      font-size:20px;
+    }
+
+    .img-button-box{
+      display: flex;
+      .img-null-p{
+        flex:1;
+      }
+      .img-button-min-box{
+        display: flex;
+        img{
+          border:4px solid #fff;
+          width:160px;
+          height:90px;
+          margin-right:10px;
+          border-radius:4px;
+          cursor: pointer;
+        }
+        .lookImg{
+          border:4px solid #0183fa!important;
+        }
+      }
+    }
+  }
+</style>