From eed08717f23e9e03064d480979009bab5358066b Mon Sep 17 00:00:00 2001
From: wanglei <wl2666675>
Date: Wed, 18 Jun 2025 17:56:49 +0800
Subject: [PATCH] =?UTF-8?q?=E8=80=83=E6=A0=B8=E6=A8=A1=E6=9D=BF=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/views/kaohe/template/index.vue | 189 ++++++++++++--------
 1 file changed, 115 insertions(+), 74 deletions(-)

diff --git a/ruoyi-ui/src/views/kaohe/template/index.vue b/ruoyi-ui/src/views/kaohe/template/index.vue
index daa2b37..999a6c9 100644
--- a/ruoyi-ui/src/views/kaohe/template/index.vue
+++ b/ruoyi-ui/src/views/kaohe/template/index.vue
@@ -9,22 +9,6 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="考核项Id" prop="khitemId">
-        <el-input
-          v-model="queryParams.khitemId"
-          placeholder="请输入考核项Id"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="考核项名称" prop="itemName">
-        <el-input
-          v-model="queryParams.itemName"
-          placeholder="请输入考核项名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -81,8 +65,6 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="主键ID" align="center" prop="id" />
       <el-table-column label="模板名称" align="center" prop="temName" />
-      <el-table-column label="考核项Id" align="center" prop="khitemId" />
-      <el-table-column label="考核项名称" align="center" prop="itemName" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -112,15 +94,22 @@
     />
 
     <!-- 添加或修改考核模板对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="模板名称" prop="temName">
           <el-input v-model="form.temName" placeholder="请输入模板名称" />
         </el-form-item>
-        <el-form-item label="考核项" prop="itemName">
-          <el-input placeholder="请选择考核项" readonly v-model="form.itemName" @focus="selectKhitem">
-            <i slot="suffix" class="el-input__icon el-icon-search" style="color:#0f00d1; font-weight: bolder"></i>
-          </el-input>
+        <el-form-item label="考核项">
+          <el-button type="primary" @click="selectKhitem" size="mini">选择考核项</el-button>
+          <el-table :data="form.items" 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="delKhitemList(scope.row,scope.$index)"></i>
+              </template>
+            </el-table-column>
+            <el-table-column label="主键" align="center" prop="id" />
+            <el-table-column label="考核名称" align="center" prop="itemName" />
+          </el-table>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -130,39 +119,48 @@
     </el-dialog>
 
     <!-- 选择考核项 -->
-    <el-dialog title="双击选择考核项" :visible.sync="khitem.open" width="900px" append-to-body>
-      <div>
-        <el-form :model="khitem.queryParams" :inline="true" label-width="90px">
-          <el-form-item label="考核项名称" prop="itemName" style="margin-bottom: 10px">
-            <el-input
-              v-model="khitem.queryParams.itemName"
-              placeholder="请输入考核项名称"
-              clearable
-              @keyup.enter.native="khitemQuery"
-            />
-          </el-form-item>
-          <el-form-item style="margin-bottom: 10px">
-            <el-button type="primary" icon="el-icon-search" size="small" @click="khitemQuery">搜索</el-button>
-          </el-form-item>
-        </el-form>
-        <el-table border v-loading="khitem.loading" :data="khitem.list" @row-dblclick="khitemRowChange">
-          <el-table-column label="主键" align="center" prop="id" />
-          <el-table-column label="考核名称" align="center" prop="itemName" />
-          <el-table-column label="考核类型Id" align="center" prop="typeId" />
-          <el-table-column label="考核类型" align="center" prop="type" />
-          <el-table-column label="备注" align="center" prop="remark" />
-        </el-table>
-        <pagination
-          v-show="khitem.total>0"
-          :total="khitem.total"
-          :page.sync="khitem.queryParams.pageNum"
-          :limit.sync="khitem.queryParams.pageSize"
-          @pagination="khitemQuery"
-        />
-        <div slot="footer" class="dialog-footer">
-          <el-button @click="khitemCancel">取 消</el-button>
+    <el-dialog title="选择考核项" :visible.sync="khitem.open" width="1200px" append-to-body>
+      <div style="display:flex;width: 100%;justify-content: space-between">
+        <div style="width: 40%;">
+          <div style="height: 45px;line-height: 45px;font-size: 14px;font-weight: bolder">
+            选中考核项 <span style="color: #39CCCC">{{ khitem.selectList.length }}</span>
+          </div>
+          <el-table :data="khitem.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="itemName" />
+          </el-table>
+        </div>
+        <div style="width: 59%;">
+          <el-form :model="khitem.queryParams" :inline="true" label-width="90px">
+            <el-form-item label="考核项名称" prop="itemName" style="margin-bottom: 10px">
+              <el-input
+                v-model="khitem.queryParams.itemName"
+                placeholder="请输入考核项名称"
+                clearable
+                @keyup.enter.native="khitemQuery"
+              />
+            </el-form-item>
+            <el-form-item style="margin-bottom: 10px">
+              <el-button type="primary" icon="el-icon-search" size="small" @click="khitemQuery">搜索</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table border ref="khitemTable" v-loading="khitem.loading" :data="khitem.list" @select="khitemSelect" @select-all="khitemSelectAll">
+            <el-table-column type="selection" width="55" align="center" />
+            <el-table-column label="主键" align="center" prop="id" />
+            <el-table-column label="考核名称" align="center" prop="itemName" />
+            <el-table-column label="考核类型" align="center" prop="type" />
+            <el-table-column label="备注" align="center" prop="remark" />
+          </el-table>
         </div>
       </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="khitemConfirm">确 认</el-button>
+      </div>
     </el-dialog>
 
   </div>
@@ -198,9 +196,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        temName: null,
-        khitemId: null,
-        itemName: null
+        temName: null
       },
       // 表单参数
       form: {},
@@ -208,12 +204,6 @@ export default {
       rules: {
         temName: [
           { required: true, message: "模板名称不能为空", trigger: "blur" }
-        ],
-        khitemId: [
-          { required: true, message: "考核项Id不能为空", trigger: "blur" }
-        ],
-        itemName: [
-          { required: true, message: "考核项名称不能为空", trigger: "blur" }
         ]
       },
       /** 选择考核项*/
@@ -225,11 +215,13 @@ export default {
         // 列表查询参数
         queryParams: {
           pageNum: 1,
-          pageSize: 10,
+          pageSize: 10000000000000,
           itemName: undefined
         },
         // 表格数据
         list: [],
+        // 选中表格数据
+        selectList: [],
         // 总条数
         total: 0,
       },
@@ -258,8 +250,7 @@ export default {
       this.form = {
         id: null,
         temName: null,
-        khitemId: null,
-        itemName: null
+        items: []
       }
       this.resetForm("form")
     },
@@ -334,6 +325,7 @@ export default {
     // 选择考核项
     selectKhitem(){
       this.khitem.open = true;
+      this.khitem.selectList = [...this.form.items]
       this.khitem.queryParams.pageNum = 1;
       this.khitemQuery();
     },
@@ -342,19 +334,68 @@ export default {
       this.khitem.loading = true;
       listItems(this.khitem.queryParams).then(response => {
         this.khitem.list = response.rows;
-        this.khitem.total = response.total;
         this.khitem.loading = false;
+        this.$nextTick(()=> {
+          this.khitem.selectList.forEach(item =>{
+            this.khitem.list.forEach(row => {
+              if(row.id == item.id){
+                this.$refs.khitemTable.toggleRowSelection(row,true);
+              }
+            });
+          })
+        })
       });
     },
-    /** 考核项选择弹出框关闭*/
-    khitemCancel() {
+    /** 考核项选择弹出框 确认*/
+    khitemConfirm() {
+      this.form.items = this.khitem.selectList;
       this.khitem.open = false
     },
-    // 考核项选择 选中数据
-    khitemRowChange(val) {
-      this.form.khitemId = val.id;
-      this.form.itemName = val.itemName;
-      this.khitem.open = false;
+    // 当用户手动勾选数据行的 Checkbox 时触发的事件	    参数 selection, row
+    khitemSelect(val,row) {
+      let spliceIndex = undefined;
+      this.khitem.selectList.forEach((item,index)=>{
+        if(item.id === row.id){
+          spliceIndex = index
+        }
+      })
+      if(spliceIndex===undefined){
+        this.khitem.selectList.push(row)
+      }else {
+        this.khitem.selectList.splice(spliceIndex,1)
+      }
+    },
+    // 当用户手动勾选全选 Checkbox 时触发的事件	      参数 selection
+    khitemSelectAll(val){
+      this.$nextTick(()=> {
+        if(val.length > 0){
+          val.forEach(item=>{
+            if(this.khitem.selectList.filter(item1=>{ return item1.id===item.id}).length<1){
+              this.khitem.selectList.push(item)
+            }
+          })
+        }else {
+          this.khitem.list.forEach(item=>{
+            this.khitem.selectList.forEach((item1,index)=>{
+              if(item1.id===item.id){
+                this.khitem.selectList.splice(index,1)
+              }
+            })
+          })
+        }
+      })
+    },
+    // 移除
+    selectListDel(row,index){
+      this.khitem.selectList.splice(index,1)
+      this.khitem.list.forEach(item=>{
+        if(row.id===item.id){
+          this.$refs.khitemTable.toggleRowSelection(item,false);
+        }
+      })
+    },
+    delKhitemList(row,index){
+      this.form.items.splice(index,1)
     },
   }
 }