考核模板页面修改

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

@@ -137,7 +137,7 @@
             <el-input
               v-model="type.queryParams.name"
               placeholder="请输入类型名称"
-              clearablesize="small"
+              clearable
               @keyup.enter.native="typeQuery"
             />
           </el-form-item>

ruoyi-ui/src/views/kaohe/template/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="temName">
         <el-input
           v-model="queryParams.temName"
@@ -9,10 +9,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="考核项id" prop="khitemId">
+      <el-form-item label="考核项Id" prop="khitemId">
         <el-input
           v-model="queryParams.khitemId"
-          placeholder="请输入考核项id"
+          placeholder="请输入考核项Id"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -81,7 +81,7 @@
       <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="考核项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">
@@ -102,7 +102,7 @@
         </template>
       </el-table-column>
     </el-table>
-    
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -113,15 +113,14 @@
 
     <!-- 添加或修改考核模板对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <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="考核项id" prop="khitemId">
+        <el-form-item label="考核项" prop="itemName">
-          <el-input v-model="form.khitemId" placeholder="请输入考核项id" />
+          <el-input placeholder="请选择考核项" readonly v-model="form.itemName" @focus="selectKhitem">
-        </el-form-item>
+            <i slot="suffix" class="el-input__icon el-icon-search" style="color:#0f00d1; font-weight: bolder"></i>
-        <el-form-item label="考核项名称" prop="itemName">
+          </el-input>
-          <el-input v-model="form.itemName" placeholder="请输入考核项名称" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -129,11 +128,49 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </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>
+        </div>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { listTemplate, getTemplate, delTemplate, addTemplate, updateTemplate } from "@/api/kaohe/template"
+import { listItems } from "@/api/kaohe/items"
 
 export default {
   name: "Template",
@@ -173,12 +210,29 @@ export default {
           { required: true, message: "模板名称不能为空", trigger: "blur" }
         ],
         khitemId: [
-          { required: true, message: "考核项id不能为空", trigger: "blur" }
+          { required: true, message: "考核项Id不能为空", trigger: "blur" }
         ],
         itemName: [
           { required: true, message: "考核项名称不能为空", trigger: "blur" }
         ]
-      }
+      },
+      /** 选择考核项*/
+      khitem: {
+        // 是否显示弹出层
+        open: false,
+        // 列表遮罩层
+        loading: true,
+        // 列表查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          itemName: undefined
+        },
+        // 表格数据
+        list: [],
+        // 总条数
+        total: 0,
+      },
     }
   },
   created() {
@@ -276,7 +330,32 @@ export default {
       this.download('kaohe/template/export', {
         ...this.queryParams
       }, `template_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 选择考核项
+    selectKhitem(){
+      this.khitem.open = true;
+      this.khitem.queryParams.pageNum = 1;
+      this.khitemQuery();
+    },
+    /** 考核项列表查询 */
+    khitemQuery() {
+      this.khitem.loading = true;
+      listItems(this.khitem.queryParams).then(response => {
+        this.khitem.list = response.rows;
+        this.khitem.total = response.total;
+        this.khitem.loading = false;
+      });
+    },
+    /** 考核项选择弹出框关闭*/
+    khitemCancel() {
+      this.khitem.open = false
+    },
+    // 考核项选择 选中数据
+    khitemRowChange(val) {
+      this.form.khitemId = val.id;
+      this.form.itemName = val.itemName;
+      this.khitem.open = false;
+    },
   }
 }
 </script>