考核项页面修改

ruoyi-ui/src/views/kaohe/items/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="itemName">
         <el-input
           v-model="queryParams.itemName"
@@ -9,10 +9,10 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="考核类型id" prop="typeId">
+      <el-form-item label="考核类型Id" prop="typeId">
         <el-input
           v-model="queryParams.typeId"
-          placeholder="请输入考核类型id"
+          placeholder="请输入考核类型Id"
           clearable
           @keyup.enter.native="handleQuery"
         />
@@ -73,7 +73,7 @@
       <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="考核类型id" align="center" prop="typeId" />
+      <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-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -106,12 +106,17 @@
 
     <!-- 添加或修改考核项对话框 -->
     <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="90px">
         <el-form-item label="考核名称" prop="itemName">
           <el-input v-model="form.itemName" placeholder="请输入考核名称" />
         </el-form-item>
-        <el-form-item label="考核类型id" prop="typeId">
+<!--        <el-form-item label="考核类型Id" prop="typeId">
-          <el-input v-model="form.typeId" placeholder="请输入考核类型id" />
+          <el-input v-model="form.typeId" placeholder="请输入考核类型Id" />
+        </el-form-item>-->
+        <el-form-item label="考核类型" prop="type">
+          <el-input placeholder="请选择考核类型" readonly v-model="form.type" @focus="selectType">
+            <i slot="suffix" class="el-input__icon el-icon-search" style="color:#0f00d1; font-weight: bolder"></i>
+          </el-input>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" placeholder="请输入备注" />
@@ -122,11 +127,52 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+
+    <!-- 选择考核类型 -->
+    <el-dialog title="双击选择考核类型" :visible.sync="type.open" width="900px" append-to-body>
+      <div>
+        <el-form :model="type.queryParams" :inline="true" label-width="70px">
+          <el-form-item label="类型名称" prop="name" style="margin-bottom: 10px">
+            <el-input
+              v-model="type.queryParams.name"
+              placeholder="请输入类型名称"
+              clearablesize="small"
+              @keyup.enter.native="typeQuery"
+            />
+          </el-form-item>
+          <el-form-item style="margin-bottom: 10px">
+            <el-button type="primary" icon="el-icon-search" size="small" @click="typeQuery">搜索</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-table border v-loading="type.loading" :data="type.list" @row-dblclick="typeRowChange">
+          <el-table-column label="主键ID" align="center" prop="id" />
+          <el-table-column label="类型名称" align="center" prop="name" />
+          <el-table-column label="备注" align="center" prop="remark" />
+        </el-table>
+
+        <pagination
+          v-show="type.total>0"
+          :total="type.total"
+          :page.sync="type.queryParams.pageNum"
+          :limit.sync="type.queryParams.pageSize"
+          @pagination="typeQuery"
+        />
+
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="typeCancel">取 消</el-button>
+        </div>
+      </div>
+
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
 import { listItems, getItems, delItems, addItems, updateItems } from "@/api/kaohe/items"
+import { listType } from "@/api/kaohe/type"
 
 export default {
   name: "Items",
@@ -165,7 +211,24 @@ export default {
         itemName: [
           { required: true, message: "考核名称不能为空", trigger: "blur" }
         ],
-      }
+      },
+      /** 选择考核类型*/
+      type: {
+        // 是否显示弹出层
+        open: false,
+        // 列表遮罩层
+        loading: true,
+        // 列表查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          name: undefined
+        },
+        // 表格数据
+        list: [],
+        // 总条数
+        total: 0,
+      },
     }
   },
   created() {
@@ -268,7 +331,32 @@ export default {
       this.download('kaohe/items/export', {
         ...this.queryParams
       }, `items_${new Date().getTime()}.xlsx`)
-    }
+    },
+    // 选择考核类型
+    selectType(){
+      this.type.open = true;
+      this.type.queryParams.pageNum = 1;
+      this.typeQuery();
+    },
+    /** 考核类型列表查询 */
+    typeQuery() {
+      this.type.loading = true;
+      listType(this.type.queryParams).then(response => {
+        this.type.list = response.rows;
+        this.type.total = response.total;
+        this.type.loading = false;
+      });
+    },
+    /** 考核类型选择弹出框关闭*/
+    typeCancel() {
+      this.type.open = false
+    },
+    // 考核类型选择 选中数据
+    typeRowChange(val) {
+      this.form.typeId = val.id;
+      this.form.type = val.name;
+      this.type.open = false;
+    },
   }
 }
 </script>