监管端班级新增编辑功能

src/views/classMessage/classMessage/components/initClass.vue

@@ -8,7 +8,7 @@
     width="90%"
     top="50px">
     <el-row>
-      <el-col :span="18">
+      <el-col :span="12">
         <el-form ref="form" :rules="rules" :model="form" label-width="110px">
           <el-row :gutter="10">
             <el-col :span="8">
@@ -73,19 +73,6 @@
                 </el-select>
               </el-form-item>
             </el-col>
-            <el-col v-if="false" :span="8">
-              <el-form-item v-if="false" label="培训有效期" prop="VALIDITY_PERIOD">
-                <el-date-picker
-                  v-model="form.VALIDITY_PERIOD"
-                  :disabled="isShow"
-                  type="daterange"
-                  value-format="yyyy-MM-dd"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期"
-                  style="width:  100%"/>
-              </el-form-item>
-            </el-col>
           </el-row>
           <el-row>
             <el-col :span="24">
@@ -153,23 +140,23 @@
                 tooltip-effect="dark"
                 height="450px"
                 border
-                fit
                 highlight-current-row
+                @row-dblclick="clickAddSelect"
                 @selection-change="updateSelect"
 
               >
-                <el-table-column :reserve-selection="true" type="selection" width="55" align="center"/>
-                <el-table-column type="index" label="序号" width="50" align="center"/>
-                <el-table-column prop="USERNAME" label="用户名"/>
-                <el-table-column prop="NAME" label="姓名"/>
+                <el-table-column :reserve-selection="true" fixed type="selection" width="55" align="center"/>
+                <el-table-column fixed type="index" label="序号" width="50" align="center"/>
+                <el-table-column prop="USERNAME" width="200px" label="用户名"/>
+                <el-table-column prop="NAME" width="150px" label="姓名"/>
+                <el-table-column prop="CARD_ID" label="身份证号" width="150px"/>
+                <el-table-column prop="BELONG_TO_CORP_NAME" width="300px" label="所属企业"/>
+                <el-table-column prop="DEPARTMENT_NAME" width="300px" label="部门"/>
                 <el-table-column prop="SEX" width="50px" label="性别">
                   <template slot-scope="{row}">
                     {{ row.SEX === '0' ? '男' : '女' }}
                   </template>
                 </el-table-column>
-                <el-table-column prop="CARD_ID" label="身份证号" width="150px"/>
-                <el-table-column prop="BELONG_TO_CORP_NAME" label="所属企业"/>
-                <el-table-column prop="DEPARTMENT_NAME" label="部门"/>
                 <el-table-column prop="PHOTO" label="免冠照片" width="120px">
                   <template slot-scope="{row}">
                     <el-image
@@ -185,36 +172,37 @@
                       style="width: 100px; height: 100px">
                   </template>
                 </el-table-column>
-                <el-table-column prop="PHONE" label="联系电话"/>
-                <el-table-column prop="STATUS" label="培训结果">
+                <el-table-column prop="PHONE" width="200px" label="联系电话"/>
+                <el-table-column v-if="false" prop="STATUS" label="培训结果">
                   <template slot-scope="{row}">
                     <template v-if="row.STATUS === '0'">不合格</template>
                     <template v-else-if="row.STATUS === '1'">合格</template>
                   </template>
                 </el-table-column>
-                <el-table-column label="操作" align="center" width="200">
+                <el-table-column fixed="right" label="操作" align="center" width="100">
                   <template slot-scope="{row}">
+                    <el-tooltip class="item" effect="dark" content="加入本次课程" placement="top-start">
+                      <el-button
+                        v-if="!row.isSelect"
+                        type="warning"
+                        icon="el-icon-plus"
+                        circle
+                        @click="addSelect(row)"/>
+                    </el-tooltip>
+                    <el-tooltip class="item" effect="dark" content="已加入本次课程" placement="top-start">
+                      <el-button
+                        v-if="row.isSelect"
+                        type="success"
+                        icon="el-icon-check"
+                        circle/>
+                    </el-tooltip>
+                    <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
                       <el-button
-                      v-if="form.CLASS_STATUS === '2' && row.STATUS === '1'"
                         type="primary"
-                      icon="el-icon-edit"
-                      size="mini"
-                      @click="getUserInfo(row)">查看
-                    </el-button>
-                    <el-button
-                      v-if="row.STATUS === '0' && form.CLASS_STATUS === '1'"
-                      type="primary"
-                      icon="el-icon-edit"
-                      size="mini"
-                      @click="changFlag(row,'1')">合格
-                    </el-button>
-                    <el-button
-                      v-if="row.STATUS == '1' && form.CLASS_STATUS === '1'"
-                      type="danger"
-                      icon="el-icon-delete"
-                      size="mini"
-                      @click="changFlag(row,'0')">不合格
-                    </el-button>
+                        icon="el-icon-info"
+                        circle
+                        @click="viewUserInfo(row)"/>
+                    </el-tooltip>
                   </template>
                 </el-table-column>
               </el-table>
@@ -222,22 +210,33 @@
           </el-row>
         </el-form>
       </el-col>
-      <el-col :span="6">
+      <el-col :span="12">
         <div style="margin-left: 10px">
           <div>已选择人员数量：{{
-            ($refs.multipleTable && $refs.multipleTable.selection) ? $refs.multipleTable.selection.length : 0
+            (selectPeopleList && selectPeopleList.length) ? selectPeopleList.length : 0
           }}
           </div>
           <div class="el-form-item__label">已选择人员名称：</div>
           <el-table
             :data="selectPeopleList"
             border
-            height="600px"
-            style="width: 100%;margin-left: 10px">
-            <el-table-column prop="NAME" fixed label="姓名" width="150px" style="width: 150px"/>
+            height="642px"
+            style="width: 100%;margin-left: 10px"
+            @row-dblclick="clickAddSelect">
+            <el-table-column prop="NAME" fixed label="姓名" width="100px" style="width: 150px"/>
             <el-table-column prop="USERNAME" label="用户名" width="150px" style="width: 150px"/>
-            <el-table-column prop="BELONG_TO_CORP_NAME" label="所属企业" width="150px" style="width: 150px"/>
-            <el-table-column prop="CARD_ID" label="身份证号" width="150px"/>
+            <el-table-column prop="BELONG_TO_CORP_NAME" label="所属企业" width="200px" style="width: 150px"/>
+            <el-table-column prop="CARD_ID" label="身份证号" width="200px"/>
+            <el-table-column fixed="right" label="操作" align="center">
+              <template slot-scope="{row}">
+                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
+                  <el-button type="danger" icon="el-icon-delete" circle @click="deleteSelect(row)"/>
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="详情" placement="top-start">
+                  <el-button type="primary" icon="el-icon-info" circle @click="viewUserInfo(row)"/>
+                </el-tooltip>
+              </template>
+            </el-table-column>
           </el-table>
         </div>
       </el-col>
@@ -245,34 +244,23 @@
     <div slot="footer" class="dialog-footer">
       <el-button @click="close">取 消</el-button>
       <el-button @click="fullscreen">{{ fullscreenFlag ? '取消全屏' : '全 屏' }}</el-button>
-      <el-button v-if="!form.CLASS_STATUS || form.CLASS_STATUS === ''" type="primary" @click="fullscreen">确 定
-      </el-button>
-      <el-button
-        v-if="form.CLASS_STATUS === '0' || form.CLASS_STATUS === '1'"
-        type="primary"
-        @click="getExcel(form.CLASS_MESSAGE_ID)">导出excel
-      </el-button>
-      <el-button v-if="form.CLASS_STATUS === '1'" type="primary" @click="graduation(form.CLASS_MESSAGE_ID)">班级结业
-      </el-button>
-      <el-button v-if="form.CLASS_STATUS === '2'" type="primary" @click="getCertificate(form.CLASS_MESSAGE_ID)">
-        导出结业证书
-      </el-button>
+      <el-button type="primary" @click="confirm">确 定</el-button>
     </div>
     <user ref="userInfo" append-to-body/>
     <user_pdf ref="userPdf" append-to-body/>
+    <user-info ref="userInfos" append-to-body/>
   </el-dialog>
 </template>
 <script>
 import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
 import { requestFN } from '@/utils/request'
 import waves from '@/directive/waves' // waves directive
-import axios from 'axios'
-import dayjs from 'dayjs' // waves directive
 import user from './user.vue'
 import User_pdf from './user_pdf.vue'
+import UserInfo from '../../../xgf/flow_audit/userInfo.vue'
 
 export default {
-  components: { User_pdf, Pagination, user },
+  components: { UserInfo, User_pdf, Pagination, user },
   directives: { waves },
   props: {
     title: {
@@ -303,7 +291,9 @@ export default {
         BELONG_TO_CORP: '',
         NAME: '',
         PHONE: '',
-        CARD_ID: ''
+        CARD_ID: '',
+        EDIT_FLAG: '',
+        CLASS_MESSAGE_ID: ''
       },
       warehouse: {
         placeList: [],
@@ -341,6 +331,8 @@ export default {
       this.loading = true
       this.visible = true
       if (e && e.CLASS_MESSAGE_ID && e.CLASS_MESSAGE_ID !== '') {
+        this.util.EDIT_FLAG = '1'
+        this.util.CLASS_MESSAGE_ID = e.CLASS_MESSAGE_ID
         this.getInformation(e)
       } else {
         this.getPeopleList()
@@ -359,10 +351,14 @@ export default {
           return
         }
         this.selectPeopleList = rows
+        for (let i = 0; i < this.selectPeopleList.length; i++) {
+          this.selectPeopleList[i].isSelect = true
+        }
+        this.getPeopleList()
       }
     },
     confirm() {
-      const list = this.$refs.multipleTable.selection
+      const list = this.selectPeopleList
       if (!list || !list.length || list.length === 0) {
         this.$message.error('没有人员数据')
         return
@@ -394,6 +390,7 @@ export default {
       })
     },
     close() {
+      console.log('清理缓存')
       this.visible = false
       this.form = {
         CLASS_NAME: '', // 班级名称
@@ -404,7 +401,14 @@ export default {
         CLASS_STATUS: ''// 班级状态（0-待开班、1-已开班、2-完成）
       }
       this.selectPeopleList = []
-      this.util.BELONG_TO_CORP = ''
+      this.util = {
+        BELONG_TO_CORP: '',
+        NAME: '',
+        PHONE: '',
+        CARD_ID: '',
+        EDIT_FLAG: '',
+        CLASS_MESSAGE_ID: ''
+      }
       this.$refs.multipleTable.clearSelection()
     },
     getDic() {
@@ -457,7 +461,16 @@ export default {
         pageSize = this.form.CLASS_SIZE
       }
       requestFN('/classMessage/getPeopleList?showCount=' + pageSize + '&currentPage=1', this.util).then((data) => {
-        this.peopleList = data.varList
+        const _peopleList = data.varList
+        if (data.varList && data.varList.length > 0) {
+          _peopleList.forEach((item) => {
+            const list = this.selectPeopleList.filter(ver => ver.USER_ID === item.USER_ID)
+            if (list && list.length > 0) {
+              item.isSelect = true
+            }
+          })
+        }
+        this.peopleList = _peopleList
         this.loading = false
       }).catch((e) => {
         this.loading = false
@@ -469,7 +482,12 @@ export default {
           if (data.code === '0') {
             this.form = data.pd
             this.form.VALIDITY_PERIOD = [this.form.VALIDITY_PERIOD_START, this.form.VALIDITY_PERIOD_END]
-            this.peopleList = this.form.peopleList
+            this.selectPeopleList = this.form.peopleList
+            this.$refs.multipleTable.selection = this.form.peopleList
+            this.form.peopleList.forEach(row => {
+              this.$refs.multipleTable.toggleRowSelection(row)
+            })
+            this.getPeopleList()
           } else {
             this.$message.error('数据异常')
           }
@@ -478,82 +496,10 @@ export default {
           this.loading = false
         })
     },
-    getExcel(id) {
-      const loading = this.$loading({
-        lock: true,
-        text: '加载中...',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      })
-      axios.get(config.httpurl + '/classMessage/excel?CLASS_MESSAGE_ID=' + id, {
-        responseType: 'blob'
-      }).then(res => {
-        setTimeout(() => {
-          const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
-          const downloadElement = document.createElement('a')
-          const href = window.URL.createObjectURL(blob)
-          downloadElement.style.display = 'none'
-          downloadElement.href = href
-          downloadElement.download = dayjs().format('YYYY-MM-DD HH:mm:ss')
-          document.body.appendChild(downloadElement)
-          downloadElement.click()
-          document.body.removeChild(downloadElement)
-          window.URL.revokeObjectURL(href)
-          this.$emit('getResult', '')
-          loading.close()
-          this.close()
-        }, 2000)
-      }).catch((e) => {
-        console.log(e)
-        loading.close()
-        this.$message.error('导出失败,或未查询到隐患')
-      })
-    },
-    changFlag(row, flag) {
-      row.STATUS = flag
-      requestFN('/classMessage/enterGrades', { CLASS_INFO_ID: row.CLASS_INFO_ID, STATUS: flag })
-        .then((data) => {
-          this.$message({
-            type: 'success',
-            message: '操作成功'
-          })
-          this.$emit('getResult', '')
-        }).catch((e) => {
-        })
-    },
-    graduation(id) {
-      this.$confirm('确定要结业吗, 结业后成绩将无法更改', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        requestFN('/classMessage/graduation', { CLASS_MESSAGE_ID: id })
-          .then((data) => {
-            this.$message({
-              type: 'success',
-              message: '操作成功'
-            })
-            this.visible = false
-            this.loading = false
-            this.close()
-            this.$emit('getResult', '')
-          }).catch((e) => {
-            this.loading = false
-          })
-      }).catch(() => {
-        this.$message({
-          type: 'info',
-          message: '已取操作'
-        })
-      })
-    },
     getUserInfo(row) {
       console.log(row)
       this.$refs.userInfo.init(row)
     },
-    getCertificate(CLASS_MESSAGE_ID) {
-      this.$refs.userPdf.init({ CLASS_MESSAGE_ID: CLASS_MESSAGE_ID })
-    },
     changePeopleList() {
       requestFN('/classMessage/getPeopleList?showCount=' + this.form.CLASS_SIZE + '&currentPage=1',
         { BELONG_TO_CORP: this.util.BELONG_TO_CORP }
@@ -572,8 +518,46 @@ export default {
     },
     fullscreen() {
       this.fullscreenFlag = !this.fullscreenFlag
+    },
+    addSelect(row) {
+      this.selectPeopleList.push(row)
+      this.$refs.multipleTable.toggleRowSelection(row)
+      this.getPeopleList()
+    },
+    clickAddSelect(row, column, event) {
+      if (!row.isSelect) {
+        this.addSelect(row)
+      }
+    },
+    clickDeleteSelect(row, column, event) {
+      if (!row.isSelect) {
+        this.deleteSelect(row)
+      }
+    },
+    deleteSelect(row) {
+      this.selectPeopleList = this.selectPeopleList.filter(ver => ver.USER_ID !== row.USER_ID)
+      this.$refs.multipleTable.clearSelection()
+      this.form.peopleList.forEach(row => {
+        this.$refs.multipleTable.toggleRowSelection(row)
+      })
+      this.getPeopleList()
+    },
+    viewUserInfo(row) {
+      this.$refs.userInfos.init({ XGF_USER_ID: row.USER_ID })
     }
   }
 }
 
 </script>
+
+<style lang="scss" scoped>
+/* 设置默认高度-滚动条高度 */
+.el-table__fixed {
+  height: calc(100% - 15px) !important;
+}
+
+/* 用于消除固定列下方的伪元素边框线 */
+.el-table__fixed:before {
+  height: 0px;
+}
+</style>

src/views/classMessage/classMessage/components/list.vue

@@ -71,12 +71,13 @@
           {{ row.CLASS_STATUS === '0'?'待开班':(row.CLASS_STATUS === '1'?'已开班':'完成') }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="400" fixed="right">
+      <el-table-column label="操作" align="center" width="360" fixed="right">
         <template slot-scope="{row}">
           <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row.CLASS_MESSAGE_ID)">查看</el-button>
-          <el-button v-show=" row.CLASS_STATUS === '0'" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.CLASS_MESSAGE_ID)">删除</el-button>
-          <el-button v-show=" row.CLASS_STATUS === '1'" type="primary" size="mini" @click="uploadExcel(row)">信息反馈</el-button>
-          <el-button v-show=" row.CLASS_STATUS === '0'" type="primary" icon="el-icon-edit" size="mini" @click="changeName(row)">修改班级名称</el-button>
+          <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleInit(row.CLASS_MESSAGE_ID)">编辑</el-button>
+          <el-button v-if=" row.CLASS_STATUS === '0'" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.CLASS_MESSAGE_ID)">删除</el-button>
+          <el-button v-if=" row.CLASS_STATUS === '1'" type="primary" size="mini" @click="uploadExcel(row)">信息反馈</el-button>
+          <el-button v-if=" row.CLASS_STATUS === '0'" type="primary" icon="el-icon-edit" size="mini" @click="changeName(row)">修改班级名称</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -193,6 +194,11 @@ export default {
       this.isShow = true
       this.$refs.edit.init({ CLASS_MESSAGE_ID: ID })
     },
+    handleInit(ID) {
+      this.title = '详情'
+      this.isShow = false
+      this.$refs.initClass.init({ CLASS_MESSAGE_ID: ID })
+    },
     handleDelete(id) {
       this.$confirm('确定要删除吗?', {
         confirmButtonText: '确定',