From 88a9f88c694a8270c6fee6a5c39393dcc72c234a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=AA=E6=B3=BD=E9=BE=99?= <jizelong@qq.com>
Date: Sun, 25 Dec 2022 15:06:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/PeopleChange/index.vue     |  19 +-
 .../PeopleGuestChange/ChangPapelTable.vue     | 133 ++++++++
 .../components/PeopleGuestChange/index.vue    | 285 ++++++++++++++++++
 .../textPaper/components/Lesson.vue           |  54 ++--
 4 files changed, 464 insertions(+), 27 deletions(-)
 create mode 100644 danger-manage-web/src/components/PeopleGuestChange/ChangPapelTable.vue
 create mode 100644 danger-manage-web/src/components/PeopleGuestChange/index.vue

diff --git a/danger-manage-web/src/components/PeopleChange/index.vue b/danger-manage-web/src/components/PeopleChange/index.vue
index 1eb33fb..2008c8c 100644
--- a/danger-manage-web/src/components/PeopleChange/index.vue
+++ b/danger-manage-web/src/components/PeopleChange/index.vue
@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2022-12-19 17:39:55
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2022-12-21 17:36:34
+ * @LastEditTime: 2022-12-24 16:12:47
  * @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/ChangePapel.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -30,7 +30,7 @@
         <el-input
           v-model="staffName"
           size="mini"
-          placeholder="请输入内容"
+          placeholder="请输入姓名"
           suffix-icon="el-icon-date"
           style="width: 48%"
         >
@@ -108,8 +108,8 @@ export default {
       if (Array.isArray(this.selectNameList)) {
         json = this.selectNameList.map((item) => {
           return {
-            staffId: item.staffId,
-            staffName: item.staffName,
+            peoPleId: item.staffId,
+            peoPleName: item.staffName,
           };
         });
       } else {
@@ -122,7 +122,12 @@ export default {
   methods: {
     changeNameList(jsonSelectNameList) {
       if (jsonSelectNameList) {
-        this.selectNameList = JSON.parse(jsonSelectNameList);
+        this.selectNameList = JSON.parse(jsonSelectNameList).map((item) => {
+          return {
+            staffId: item.peoPleId,
+            staffName: item.peoPleName,
+          };
+        });
       } else {
         this.selectNameList = [];
       }
@@ -203,8 +208,8 @@ export default {
   .middle {
     align-items: center;
     justify-content: center;
-    div{
-      color:#1890FF;
+    div {
+      color: #1890ff;
       font-weight: 2000;
     }
   }
diff --git a/danger-manage-web/src/components/PeopleGuestChange/ChangPapelTable.vue b/danger-manage-web/src/components/PeopleGuestChange/ChangPapelTable.vue
new file mode 100644
index 0000000..8f475e3
--- /dev/null
+++ b/danger-manage-web/src/components/PeopleGuestChange/ChangPapelTable.vue
@@ -0,0 +1,133 @@
+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2022-12-19 15:23:58
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2022-12-24 16:51:34
+ * @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/Lesson-table.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div>
+    <el-table
+      v-loading="loading"
+      :data="nameList"
+      height="305"
+      @select="select"
+      @select-all="all"
+      ref="multipleTable"
+    >
+      <el-table-column type="selection"></el-table-column>
+      <el-table-column label="负责人" align="center" prop="staffName">
+      </el-table-column>
+      <el-table-column
+        label="手机号"
+        align="center"
+        prop="deptName"
+        :formatter="formatter"
+      >
+      </el-table-column>
+      <el-table-column
+        label="所属单位"
+        align="center"
+        prop="profession"
+        :formatter="formatter"
+      >
+      </el-table-column>
+    </el-table>
+    <!-- <div> -->
+    <el-pagination
+      :layout="'prev, pager, next'"
+      v-show="total > 0"
+      :total="total"
+      :current-page="queryParams.pageNum"
+      :page-sizes="[queryParams.pageSize]"
+      @current-change="currentChangeClick"
+    />
+    <!-- </div> -->
+  </div>
+</template>
+
+<script>
+import { listStaff } from "@/api/safetyManagement/staff";
+export default {
+  name: "",
+  props: {
+    selectNameList: {
+      type: Array,
+    },
+  },
+  created() {
+    // this.listStaff();
+  },
+  data() {
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        deptId: null,
+        staffName: null,
+      },
+      total: 0,
+      nameList: [],
+      loading: false,
+    };
+  },
+  methods: {
+    listStaff() {
+      this.loading = true;
+      listStaff(this.queryParams).then((res) => {
+        this.total = res.total;
+        this.nameList = res.rows;
+        this.$nextTick((item) => {
+          this.selectNameList.forEach((item) => {
+            this.toggleSelection(item.staffId, true);
+          });
+          this.loading = false;
+        });
+      });
+    },
+    // toggleSelection(rows) {
+    //   if (rows) {
+    //     rows.forEach((row) => {
+    //       this.$refs.multipleTable.toggleRowSelection(row);
+    //     });
+    //   } else {
+    //     this.$refs.multipleTable.clearSelection();
+    //   }
+    // },
+    select(all, row) {
+      this.$emit("selectOne", all, row);
+    },
+    all(all) {
+      console.log(all);
+      // true是全选，false是全清
+      let allSelect = false;
+      if (all.length == 0 || (all.length == 1 && [0] == undefined)) {
+        allSelect = false;
+      } else if (all.length > 1) {
+        allSelect = true;
+      }
+      this.$emit("selectAll", this.nameList, allSelect);
+    },
+    // 切换选项
+    toggleSelection(staffId, SeclctFlag = false) {
+      const item = this.nameList.find((item) => {
+        return item.staffId == staffId;
+      });
+      this.$refs.multipleTable.toggleRowSelection(item, SeclctFlag);
+    },
+
+    currentChangeClick(val) {
+      this.queryParams.pageNum = val;
+      this.listStaff();
+    },
+    formatter(row, column, cellValue, index) {
+      // console.log(row, column, cellValue, index);
+      if (!cellValue) return "-";
+      else return cellValue;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>
diff --git a/danger-manage-web/src/components/PeopleGuestChange/index.vue b/danger-manage-web/src/components/PeopleGuestChange/index.vue
new file mode 100644
index 0000000..1c46506
--- /dev/null
+++ b/danger-manage-web/src/components/PeopleGuestChange/index.vue
@@ -0,0 +1,285 @@
+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2022-12-19 17:39:55
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2022-12-24 16:12:56
+ * @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/ChangePapel.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+
+<template>
+  <div class="changePeople-wrapper flex">
+    <div class="changePeople-left">
+      <div class="top-search flex">
+        <el-select
+          v-model="deptId"
+          filterable
+          placeholder="请选择"
+          size="mini"
+          style="width: 40%"
+          clearable
+        >
+          <el-option
+            v-for="item in searchList"
+            :key="item.deptId"
+            :label="item.deptName"
+            :value="item.deptId"
+          >
+          </el-option>
+        </el-select>
+        <el-input
+          v-model="staffName"
+          size="mini"
+          placeholder="请输入姓名"
+          suffix-icon="el-icon-date"
+          style="width: 48%"
+        >
+        </el-input>
+        <div>
+          <el-button @click="searchTable" size="mini">搜索</el-button>
+        </div>
+      </div>
+      <div class="left-middle-table">
+        <ChangPapelTable
+          ref="table"
+          :selectNameList.sync="selectNameList"
+          @selectOne="selectOne"
+          @selectAll="selectAll"
+        />
+      </div>
+      <!-- <div class="bottom-text">共有3n人</div> -->
+    </div>
+    <div class="middle flex">
+      <div>>>></div>
+    </div>
+    <div class="changePeople-right flex">
+      <div class="people-card flex zzz">
+        <div
+          class="item flex"
+          v-for="item in selectNameList"
+          :key="item.staffId"
+        >
+          <div>{{ item.staffName }}</div>
+          <div class="close" @click="deleteName(item.staffId)">x</div>
+        </div>
+      </div>
+      <div class="bottom-text">已选择n人</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ChangPapelTable from "./ChangPapelTable";
+import { listDept } from "@/api/system/dept";
+
+export default {
+  name: "PeopleGuestChange",
+  components: {
+    ChangPapelTable,
+  },
+  props: {
+    // 传进组件的已经被选择的人名
+    jsonSelectNameList: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      selectNameList: [],
+      searchList: [],
+      deptId: null,
+      staffName: null,
+    };
+  },
+  created() {
+    listDept().then((res) => {
+      console.log(res);
+      this.searchList = res.data;
+    });
+  },
+  mounted() {},
+  watch: {
+    selectNameList() {
+      let json;
+      if (this.selectNameList.length == 0) {
+        json = null;
+      }
+      if (Array.isArray(this.selectNameList)) {
+        json = this.selectNameList.map((item) => {
+          return {
+            peoPleId: item.staffId,
+            peoPleName: item.staffName,
+          };
+        });
+      } else {
+        json = this.selectNameList;
+      }
+
+      this.$emit("getPeopleList", JSON.stringify(json));
+    },
+  },
+  methods: {
+    changeNameList(jsonSelectNameList) {
+      if (jsonSelectNameList) {
+        this.selectNameList = JSON.parse(jsonSelectNameList).map((item) => {
+          return {
+            staffId: item.peoPleId,
+            staffName: item.peoPleName,
+          };
+        });
+      } else {
+        this.selectNameList = [];
+      }
+      this.$refs.table.listStaff();
+    },
+    searchTable() {
+      this.$refs.table.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        deptId: this.deptId,
+        staffName: this.staffName,
+      };
+      this.$refs.table.listStaff();
+    },
+    deleteName(staffId) {
+      const index = this.selectNameList.findIndex((item) => {
+        return item.staffId == staffId;
+      });
+      if (index >= 0) {
+        console.log(index);
+        this.selectNameList.splice(index, 1);
+        this.$refs.table.toggleSelection(staffId);
+      }
+    },
+    addName(row) {
+      const index = this.selectNameList.findIndex((item) => {
+        // console.log(item.id)
+        return item.staffId == row.staffId;
+      });
+      console.log(index);
+      if (index >= 0) {
+        this.selectNameList.splice(index, 1);
+      } else {
+        this.selectNameList.push(row);
+      }
+    },
+    selectAll(all, allSelect) {
+      // console.log(all);
+      console.log(allSelect);
+      if (allSelect) {
+        all.forEach((item) => {
+          const index = this.selectNameList.findIndex((iten) => {
+            return iten.staffId == item.staffId;
+          });
+          if (index < 0) {
+            this.selectNameList.push(item);
+          }
+        });
+      } else {
+        all.forEach((item) => {
+          this.deleteName(item.staffId);
+        });
+      }
+    },
+    selectOne(all, row) {
+      this.addName(row);
+      // console.log(all,row)
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.changePeople-wrapper {
+  width: 100%;
+  height: 400px;
+  // background-color: red;
+  margin-top: 10px;
+  justify-content: space-between;
+  & > div {
+    flex-direction: column;
+  }
+  .changePeople-left,
+  .changePeople-right {
+    width: 415px;
+    height: 100%;
+    border: 1px solid #e5e6eb;
+  }
+  .middle {
+    align-items: center;
+    justify-content: center;
+    div {
+      color: #1890ff;
+      font-weight: 2000;
+    }
+  }
+  .changePeople-left {
+    padding: 14px 20px 11px 16px;
+    flex-direction: column;
+
+    .top-search {
+      margin-bottom: 12px;
+      justify-content: space-between;
+    }
+    .left-middle-table {
+      flex: 1;
+      // background: red;
+    }
+    .bottom-text {
+      padding-top: 10px;
+      font-size: 12px;
+      height: 20px;
+      line-height: 20px;
+      text-align: right;
+      color: #1890ff;
+    }
+  }
+  .changePeople-right {
+    flex-direction: column;
+    padding-top: 14px;
+    height: 100%;
+
+    .people-card {
+      flex-wrap: wrap;
+      align-content: flex-start;
+      width: 100%;
+      flex: 1;
+      height: 0;
+      padding-left: 11px;
+      overflow-y: scroll;
+      &::-webkit-scrollbar {
+        display: none; /* Chrome Safari */
+      }
+      .item {
+        width: 70px;
+        height: 30px;
+        line-height: 30px;
+        padding-left: 10px;
+        padding-right: 5px;
+        margin-right: 10px;
+        color: #3d3d3d;
+        box-sizing: border-box;
+        margin-bottom: 10px;
+        box-sizing: border-box;
+        border: 1px solid #a3d3ff;
+        border-radius: 3px;
+        font-size: 12px;
+        position: relative;
+        justify-content: space-between;
+      }
+      .close {
+        cursor: pointer;
+      }
+    }
+    .bottom-text {
+      // padding-top: 10px;
+      padding-right: 10px;
+      font-size: 12px;
+      height: 20px;
+      line-height: 20px;
+      text-align: right;
+      color: #1890ff;
+    }
+  }
+}
+</style>
diff --git a/danger-manage-web/src/views/educationPlanExam/textPaper/components/Lesson.vue b/danger-manage-web/src/views/educationPlanExam/textPaper/components/Lesson.vue
index 3feb779..c7a070c 100644
--- a/danger-manage-web/src/views/educationPlanExam/textPaper/components/Lesson.vue
+++ b/danger-manage-web/src/views/educationPlanExam/textPaper/components/Lesson.vue
@@ -2,7 +2,7 @@
  * @Author: 纪泽龙 jizelong@qq.com
  * @Date: 2022-09-22 10:59:44
  * @LastEditors: 纪泽龙 jizelong@qq.com
- * @LastEditTime: 2022-12-21 17:30:33
+ * @LastEditTime: 2022-12-24 15:50:39
  * @FilePath: /danger-manage-web/src/views/lessonsProgram/components/Lession.vue
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
@@ -15,12 +15,13 @@
       label-width="auto"
       :rules="rules"
     >
+      <el-form-item label="题库名称" prop="bankName">
+        <el-input style="width: 500px" v-model="form.bankName"></el-input>
+      </el-form-item>
       <div class="top flex">
-        <el-form-item label="题库名称" prop="bankName">
-          <el-input style="width: 500px" v-model="form.bankName"></el-input>
-        </el-form-item>
         <el-form-item label="开始时间" prop="releaseTime">
           <el-date-picker
+            style="width: 220px; margin-right: 44px"
             v-model="form.startTime"
             value-format="yyyy-MM-dd HH:mm:ss"
             type="datetime"
@@ -29,16 +30,22 @@
           >
           </el-date-picker>
         </el-form-item>
+        <el-form-item label="结束时间" prop="releaseTime">
+          <el-date-picker
+            v-model="form.endTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            type="datetime"
+            placeholder="结束时间"
+            default-time="12:00:00"
+          >
+          </el-date-picker>
+        </el-form-item>
       </div>
-      <el-form-item label="结束时间" prop="releaseTime">
-        <el-date-picker
-          v-model="form.endTime"
-          value-format="yyyy-MM-dd HH:mm:ss"
-          type="datetime"
-          placeholder="结束时间"
-          default-time="12:00:00"
-        >
-        </el-date-picker>
+      <el-form-item label="考试范围" prop="releaseTime">
+        <el-radio-group v-model="form.personelType">
+          <el-radio :label="1">内部员工</el-radio>
+          <el-radio :label="2">访客和承包商</el-radio>
+        </el-radio-group>
       </el-form-item>
 
       <el-form-item label="选择人员" prop="releaseTime">
@@ -46,7 +53,7 @@
         <!-- jsonSelectNameList就是呗选中的人员的json -->
         <!-- getPeopleList 是每次选中或者删除人员都会返回 一个所有人员列表的json串，[{staffId:staffId,staffName:staffName},{staffId:staffId,staffName:staffName}] -->
         <!-- 要在jsonSelectNameList赋值完毕之后 调用一下 this.$refs.changePaple.changeNameList  135行 -->
-        <ChangePapel
+        <PeopleGuestChange
           ref="changePaple"
           :jsonSelectNameList="jsonSelectNameList"
           @getPeopleList="getPeopleList"
@@ -57,7 +64,10 @@
 </template>
 
 <script>
+// 内部
 import ChangePapel from "@/components/PeopleChange";
+// 访客承包商
+import PeopleGuestChange from "@/components/PeopleGuestChange";
 // import { mapGetters } from "vuex";
 // import {
 //   addLessons,
@@ -89,6 +99,7 @@ export default {
   },
   components: {
     ChangePapel,
+    PeopleGuestChange
   },
   data() {
     return {
@@ -100,9 +111,12 @@ export default {
         // enclosure: "",
         deptId: null,
         abc: 0,
+        personelType: 1,
       },
       // 参考人员
-      jsonSelectNameList: null,
+      // jsonSelectNameList: null,
+      jsonSelectNameList: '[{"peoPleId":880,"peoPleName":"孙卓亚"},{"peoPleId":871,"peoPleName":"张玉宾"}]',
+      // 考试范围
 
       // 归属部门列表
       deptOptions: [],
@@ -134,9 +148,9 @@ export default {
     // this.getTreeselect();
   },
   mounted() {
-    // this.jsonSelectNameList 
-    
-      // '[{"staffId":880,"staffName":"孙卓亚"},{"staffId":871,"staffName":"张玉宾"},{"staffId":869,"staffName":"李二朝"},{"staffId":870,"staffName":"盖永峰"},{"staffId":868,"staffName":"刘丽艳"},{"staffId":867,"staffName":"霍文俊"},{"staffId":866,"staffName":"刘志坚"},{"staffId":865,"staffName":"郝文权"},{"staffId":864,"staffName":"齐雪军"},{"staffId":852,"staffName":"刘江平"},{"staffId":853,"staffName":"谷建海"},{"staffId":851,"staffName":"丁振国"},{"staffId":850,"staffName":"齐江波"},{"staffId":849,"staffName":"周立新"},{"staffId":848,"staffName":"史志波"},{"staffId":847,"staffName":"王增波"},{"staffId":846,"staffName":"杨彦龙"},{"staffId":845,"staffName":"杨华国"},{"staffId":844,"staffName":"王青华"}]';
+    // this.jsonSelectNameList
+
+    // '[{"staffId":880,"staffName":"孙卓亚"},{"staffId":871,"staffName":"张玉宾"},{"staffId":869,"staffName":"李二朝"},{"staffId":870,"staffName":"盖永峰"},{"staffId":868,"staffName":"刘丽艳"},{"staffId":867,"staffName":"霍文俊"},{"staffId":866,"staffName":"刘志坚"},{"staffId":865,"staffName":"郝文权"},{"staffId":864,"staffName":"齐雪军"},{"staffId":852,"staffName":"刘江平"},{"staffId":853,"staffName":"谷建海"},{"staffId":851,"staffName":"丁振国"},{"staffId":850,"staffName":"齐江波"},{"staffId":849,"staffName":"周立新"},{"staffId":848,"staffName":"史志波"},{"staffId":847,"staffName":"王增波"},{"staffId":846,"staffName":"杨彦龙"},{"staffId":845,"staffName":"杨华国"},{"staffId":844,"staffName":"王青华"}]';
     this.$refs.changePaple.changeNameList(this.jsonSelectNameList);
   },
   methods: {
@@ -244,14 +258,14 @@ export default {
 .form-wrapper {
   padding-top: 22px;
   width: 100%;
-  height: 550px;
+  height: 600px;
   // overflow: hidden;
   // padding-bottom: 10px;
   margin-bottom: 20px;
   // border-bottom: 1px solid #bbbbbb;
   .top {
     width: 100%;
-    justify-content: space-between;
+    // justify-content: space-between;
   }
 }
 </style>
-- 
2.18.1