考核评测页面修改

ruoyi-ui/src/views/kaohe/pingce/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
       <el-form-item label="考核名称" prop="pcTitle">
         <el-input
           v-model="queryParams.pcTitle"
@@ -9,14 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="模板id" prop="templateId">
-        <el-input
-          v-model="queryParams.templateId"
-          placeholder="请输入模板id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item label="模板名称" prop="templateName">
         <el-input
           v-model="queryParams.templateName"
@@ -25,21 +17,15 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="评测结果id" prop="pcResultId">
+      <el-form-item label="评测状态" prop="state">
-        <el-input
+        <el-select v-model="queryParams.state" placeholder="请选择评测状态" clearable>
-          v-model="queryParams.pcResultId"
+          <el-option
-          placeholder="请输入评测结果id"
+            v-for="dict in dict.type.kh_state"
-          clearable
+            :key="dict.value"
-          @keyup.enter.native="handleQuery"
+            :label="dict.label"
-        />
+            :value="dict.value"
-      </el-form-item>
-      <el-form-item label="评测状态(0 开始 1 进行中 2 完成)" prop="state">
-        <el-input
-          v-model="queryParams.state"
-          placeholder="请输入评测状态(0 开始 1 进行中 2 完成)"
-          clearable
-          @keyup.enter.native="handleQuery"
           />
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@@ -98,10 +84,13 @@
       <el-table-column label="主键" align="center" prop="id" />
       <el-table-column label="考核名称" align="center" prop="pcTitle" />
       <el-table-column label="考核描述" align="center" prop="pcDescription" />
-      <el-table-column label="模板id" align="center" prop="templateId" />
       <el-table-column label="模板名称" align="center" prop="templateName" />
-      <el-table-column label="评测结果id" align="center" prop="pcResultId" />
+      <el-table-column label="评测结果Id" align="center" prop="pcResultId" />
-      <el-table-column label="评测状态(0 开始 1 进行中 2 完成)" align="center" prop="state" />
+      <el-table-column label="评测状态" align="center" prop="state">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.kh_state" :value="scope.row.state"/>
+        </template>
+      </el-table-column>
       <el-table-column label="备注" align="center" prop="remark" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
@@ -132,25 +121,31 @@
     />
 
     <!-- 添加或修改考核评测对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="考核名称" prop="pcTitle">
           <el-input v-model="form.pcTitle" placeholder="请输入考核名称" />
         </el-form-item>
-        <el-form-item label="考核描述" prop="pcDescription">
-          <el-input v-model="form.pcDescription" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="模板id" prop="templateId">
-          <el-input v-model="form.templateId" placeholder="请输入模板id" />
-        </el-form-item>
         <el-form-item label="模板名称" prop="templateName">
-          <el-input v-model="form.templateName" placeholder="请输入模板名称" />
+          <el-input placeholder="请选择模板名称" readonly v-model="form.templateName" @focus="changeTemp">
+            <i slot="suffix" class="el-input__icon el-icon-search" style="color: #1890ff; font-weight: bolder"></i>
+          </el-input>
         </el-form-item>
-        <el-form-item label="评测结果id" prop="pcResultId">
+        <el-form-item label="考核描述" prop="pcDescription">
-          <el-input v-model="form.pcResultId" placeholder="请输入评测结果id" />
+          <el-input v-model="form.pcDescription" type="textarea" placeholder="请输入内容" />
         </el-form-item>
-        <el-form-item label="评测状态(0 开始 1 进行中 2 完成)" prop="state">
+        <el-form-item label="职工">
-          <el-input v-model="form.state" placeholder="请输入评测状态(0 开始 1 进行中 2 完成)" />
+          <el-button type="primary" @click="selectEmp" size="mini">选择职工</el-button>
+          <el-table :data="form.pcEmps" style="width: 100%; margin-top: 10px" border max-height="500">
+            <el-table-column label="操作" width="100" fixed align="center">
+              <template slot-scope="scope">
+                <i class="el-icon-remove-outline" style="font-size: 20px;color:#F56C6C;" @click="delEmpList(scope.row,scope.$index)"></i>
+              </template>
+            </el-table-column>
+            <el-table-column label="主键" align="center" prop="id" />
+            <el-table-column label="部门名称" align="center" prop="deptName" :show-overflow-tooltip="true" min-width="120"/>
+            <el-table-column label="职工姓名" align="center" prop="empName" :show-overflow-tooltip="true" min-width="120"/>
+          </el-table>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
@@ -161,14 +156,149 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 选择模板信息 -->
+    <el-dialog title="模板选择" :visible.sync="temp.open" width="500px">
+      <div>
+        <el-form :model="temp.queryParams" :inline="true" label-width="68px">
+          <el-form-item label="模板名称" prop="userName" style="margin-bottom: 10px">
+            <el-input
+              v-model="temp.queryParams.temName"
+              placeholder="请输入模板名称"
+              clearable
+              @keyup.enter.native="tempQuery"
+            />
+          </el-form-item>
+          <el-form-item style="margin-bottom: 10px">
+            <el-button type="primary" icon="el-icon-search" size="small" @click="tempQuery">搜索</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table border v-loading="temp.loading" :data="temp.list" @row-click="tempRowChange">
+          <el-table-column label="主键ID" align="center" prop="id" />
+          <el-table-column label="模板名称" align="center" prop="temName" />
+        </el-table>
+
+        <pagination
+          v-show="temp.total>0"
+          :total="temp.total"
+          :page.sync="temp.queryParams.pageNum"
+          :limit.sync="temp.queryParams.pageSize"
+          @pagination="tempQuery"
+        />
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="tempCancel">取 消</el-button>
+        </div>
+      </div>
+
+    </el-dialog>
+
+    <!-- 选择职工 -->
+    <el-dialog title="选择职工" :visible.sync="emp.open" width="1200px" append-to-body>
+      <div style="display:flex;width: 100%;justify-content: space-between">
+        <div style="width: 30%; border-right: 1px solid #eeeeee; padding-right: 10px;">
+          <div style="height: 45px;line-height: 45px;font-size: 14px;font-weight: bolder">
+            选中职工 <span style="color: #39CCCC">{{ emp.selectList.length }}</span>
+          </div>
+          <el-table :data="emp.selectList" style="width: 100%" border max-height="500">
+            <el-table-column label="操作" width="50" fixed align="center">
+              <template slot-scope="scope">
+                <i class="el-icon-remove-outline" style="font-size: 20px;color:#F56C6C;" @click="selectListDel(scope.row,scope.$index)"></i>
+              </template>
+            </el-table-column>
+            <el-table-column label="主键" align="center" prop="id" />
+            <el-table-column label="部门名称" align="center" prop="deptName" :show-overflow-tooltip="true" min-width="100"/>
+            <el-table-column label="职工姓名" align="center" prop="empName" :show-overflow-tooltip="true" min-width="100"/>
+          </el-table>
+        </div>
+        <div style="width: 69%;">
+          <el-row :gutter="20">
+            <!--部门数据-->
+            <el-col :span="6" :xs="24">
+              <div class="head-container">
+                <el-input
+                  v-model="deptName"
+                  placeholder="请输入部门名称"
+                  clearable
+                  size="small"
+                  prefix-icon="el-icon-search"
+                  style="margin-bottom: 20px"
+                />
+              </div>
+              <div class="head-container">
+                <el-tree
+                  :data="emp.deptOptions"
+                  :props="emp.defaultProps"
+                  :expand-on-click-node="false"
+                  :filter-node-method="empfilterNode"
+                  ref="tree"
+                  node-key="id"
+                  default-expand-all
+                  highlight-current
+                  @node-click="empNodeClick"
+                />
+              </div>
+            </el-col>
+            <el-col :span="18" :xs="24">
+              <el-form :model="emp.queryParams" :inline="true" label-width="70px">
+                <el-form-item label="职工名称" prop="empName" style="margin-bottom: 10px">
+                  <el-input
+                    v-model="emp.queryParams.empName"
+                    placeholder="请输入职工名称"
+                    clearable
+                    @keyup.enter.native="empQuery"
+                  />
+                </el-form-item>
+                <el-form-item style="margin-bottom: 10px">
+                  <el-button type="primary" icon="el-icon-search" size="small" @click="empQuery">搜索</el-button>
+                </el-form-item>
+              </el-form>
+              <el-table border ref="empTable" v-loading="emp.loading" :data="emp.list" @select="empSelect" @select-all="empSelectAll">
+                <el-table-column type="selection" width="50" align="center" />
+                <el-table-column label="主键" align="center" prop="id" fixed width="50"/>
+                <el-table-column label="部门名称" align="center" prop="deptName" :show-overflow-tooltip="true" min-width="120"/>
+                <el-table-column label="职工姓名" align="center" prop="empName" :show-overflow-tooltip="true" min-width="120"/>
+                <el-table-column label="性别" align="center" prop="sex" :show-overflow-tooltip="true" min-width="50">
+                  <template slot-scope="scope">
+                    <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
+                  </template>
+                </el-table-column>
+                <el-table-column label="年龄" align="center" prop="age" min-width="50"/>
+              </el-table>
+              <pagination
+                v-show="emp.total>0"
+                :total="emp.total"
+                :page.sync="emp.queryParams.pageNum"
+                :limit.sync="emp.queryParams.pageSize"
+                @pagination="empQuery"
+              />
+            </el-col>
+          </el-row>
+
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="empConfirm">确 认</el-button>
+      </div>
+    </el-dialog>
+
+
   </div>
 </template>
 
 <script>
 import { listPingce, getPingce, delPingce, addPingce, updatePingce } from "@/api/kaohe/pingce"
+import { deptTreeSelect } from "@/api/system/user";
+import { listTemplate } from "@/api/kaohe/template"
+import { listEmployee } from "@/api/kaohe/employee"
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 
 export default {
   name: "Pingce",
+  dicts: ['kh_state', 'sys_user_sex'],
+  components: { Treeselect },
   data() {
     return {
       // 遮罩层
@@ -213,13 +343,80 @@ export default {
         templateName: [
           { required: true, message: "模板名称不能为空", trigger: "blur" }
         ],
+      },
+      /** 选择模板*/
+      temp: {
+        type: 1,
+        // 是否显示弹出层
+        open: false,
+        // 列表遮罩层
+        loading: true,
+        // 列表查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10
+        },
+        // 表格数据
+        list: [],
+        // 总条数
+        total: 0,
+      },
+      // 部门名称
+      deptName: undefined,
+      /** 选择职工*/
+      emp: {
+        // 部门树选项
+        deptOptions: undefined,
+        defaultProps: {
+          children: "children",
+          label: "label"
+        },
+        // 是否显示弹出层
+        open: false,
+        // 列表遮罩层
+        loading: true,
+        // 列表查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          empName: undefined,
+          deptId: undefined,
+        },
+        // 表格数据
+        list: [],
+        // 选中表格数据
+        selectList: [],
+        // 总条数
+        total: 0,
+      },
     }
+  },
+  watch: {
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val);
     }
   },
   created() {
-    this.getList()
+    this.getList();
   },
   methods: {
+    /** 查询部门下拉树结构 */
+    getDeptTree() {
+      deptTreeSelect().then(response => {
+        this.emp.deptOptions = response.data;
+      });
+    },
+    // 筛选节点
+    empfilterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    // 节点单击事件
+    empNodeClick(data) {
+      this.emp.queryParams.deptId = data.id;
+      this.empQuery();
+    },
     /** 查询考核评测列表 */
     getList() {
       this.loading = true
@@ -242,6 +439,7 @@ export default {
         pcDescription: null,
         templateId: null,
         templateName: null,
+        pcEmps:[],
         pcResultId: null,
         state: null,
         createBy: null,
@@ -319,7 +517,110 @@ export default {
       this.download('kaohe/pingce/export', {
         ...this.queryParams
       }, `pingce_${new Date().getTime()}.xlsx`)
+    },
+    /** 选择模板信息*/
+    changeTemp(val) {
+      this.temp.type = val;
+      this.temp.open = true;
+      this.temp.queryParams.pageNum = 1;
+      this.tempQuery();
+    },
+    /** 模板信息列表查询 */
+    tempQuery() {
+      this.temp.loading = true;
+      listTemplate(this.temp.queryParams).then(response => {
+        this.temp.list = response.rows;
+        this.temp.total = response.total;
+        this.temp.loading = false;
+      });
+    },
+    /** 模板信息选择弹出框关闭*/
+    tempCancel() {
+      this.temp.open = false
+    },
+    // 模板选择 选中数据
+    tempRowChange(val) {
+      this.form.templateId = val.id;
+      this.form.templateName = val.temName;
+      this.temp.open = false;
+    },
+    // 选择职工
+    selectEmp(){
+      this.emp.open = true;
+      this.emp.selectList = [...this.form.pcEmps]
+      this.emp.queryParams.pageNum = 1;
+      this.getDeptTree();
+      this.empQuery();
+    },
+    /** 职工列表查询 */
+    empQuery() {
+      this.emp.loading = true;
+      listEmployee(this.emp.queryParams).then(response => {
+        this.emp.list = response.rows;
+        this.emp.total = response.total;
+        this.emp.loading = false;
+        this.$nextTick(()=> {
+          this.emp.selectList.forEach(item =>{
+            this.emp.list.forEach(row => {
+              if(row.id == item.id){
+                this.$refs.empTable.toggleRowSelection(row,true);
+              }
+            });
+          })
+        })
+      });
+    },
+    /** 职工选择弹出框 确认*/
+    empConfirm() {
+      this.form.pcEmps = this.emp.selectList;
+      this.emp.open = false
+    },
+    // 当用户手动勾选数据行的 Checkbox 时触发的事件	    参数 selection, row
+    empSelect(val,row) {
+      let spliceIndex = undefined;
+      this.emp.selectList.forEach((item,index)=>{
+        if(item.id === row.id){
+          spliceIndex = index
         }
+      })
+      if(spliceIndex===undefined){
+        this.emp.selectList.push(row)
+      }else {
+        this.emp.selectList.splice(spliceIndex,1)
+      }
+    },
+    // 当用户手动勾选全选 Checkbox 时触发的事件	      参数 selection
+    empSelectAll(val){
+      this.$nextTick(()=> {
+        if(val.length > 0){
+          val.forEach(item=>{
+            if(this.emp.selectList.filter(item1=>{ return item1.id===item.id}).length<1){
+              this.emp.selectList.push(item)
+            }
+          })
+        }else {
+          this.emp.list.forEach(item=>{
+            this.emp.selectList.forEach((item1,index)=>{
+              if(item1.id===item.id){
+                this.emp.selectList.splice(index,1)
+              }
+            })
+          })
+        }
+      })
+    },
+    // 移除
+    selectListDel(row,index){
+      this.emp.selectList.splice(index,1)
+      this.emp.list.forEach(item=>{
+        if(row.id===item.id){
+          this.$refs.empTable.toggleRowSelection(item,false);
+        }
+      })
+    },
+    delEmpList(row,index){
+      this.form.pcEmps.splice(index,1)
+    },
   }
 }
 </script>