检测方案选择修改

src/views/quality/checkTypeProject/selectProject.vue

@@ -3,10 +3,9 @@
     v-if="showFlag"
     :visible.sync="showFlag"
     :modal= false
-    width="1000px"
+    width="1100px"
   >
     <el-row :gutter="20">
-
       <el-col :span="24" :xs="24">
         <el-form :model="queryParams" ref="queryProjectForm" size="small" :inline="true" v-show="showSearch" label-width="105px" align="left">
           <el-form-item label="检测项目名称" prop="ruleName">
@@ -18,16 +17,13 @@
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-
+          <el-form-item v-show="false" label="检测项目名称" prop="projectType">
-          <el-form-item label="检测方案名称" prop="projectType">
+            <el-input
-            <el-select v-model="queryParams.projectType" filterable clearable placeholder="请选择检测方案">
+              v-model="queryParams.projectType"
-              <el-option
+              placeholder="检测方案代码"
-              v-for="(item,index) in projectTypeOptions"
+              clearable
-              :key="index"
+              style="width: 240px"
-              :label="item.projectTypeName"
+            />
-              :value="item.projectTypeCode">
-              </el-option>
-            </el-select>
           </el-form-item>
 
           <el-form-item>
@@ -35,6 +31,18 @@
             <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
+        <el-row :gutter="20">
+          <el-col :span="5" :xs="24">
+            <el-tabs v-model="editTabsValue" @tab-click="handleClick" :tab-position="'right'" style="height: 600px;">
+              <el-tab-pane
+              v-for="(item) in projectTypeOptions"
+              :key="item.projectTypeCode"
+              :label="item.projectTypeName"
+              :name="item.projectTypeCode"
+              >{{ item.projectTypeName }}</el-tab-pane>
+            </el-tabs>
+          </el-col>
+          <el-col :span="19" :xs="24">
             <el-table v-loading="loading" :data="itemList" @selection-change="handleBomSelectionChange" ref="myTable" >
               <el-table-column width="50" align="center" type="selection">
               </el-table-column>
@@ -66,7 +74,7 @@
               </el-table-column>
               <el-table-column label="测量单位"  align="left" prop="unitCode" width="90"/>
               <el-table-column label="抽样方案"  align="left" prop="samplePlan" width="100" :show-overflow-tooltip="true"/>
-          <el-table-column label="合格判定"  align="left" prop="judge" width="100" :show-overflow-tooltip="true"/>
+              <el-table-column label="合格判定"  align="left" prop="judge" width="100" />
               <el-table-column label="缺陷等级"  align="left" prop="defectLevel" width="90"/>
               <el-table-column label="检验方式"  align="left" prop="checkMode" width="90" :show-overflow-tooltip="true"/>
               <el-table-column label="检验工具"  align="left" prop="checkTool" width="90"/>
@@ -80,6 +88,8 @@
             />
           </el-col>
         </el-row>
+      </el-col>
+    </el-row>
     <div slot="footer" class="dialog-footer">
               <el-button type="primary" @click="submitProjectItems">确 定</el-button>
               <el-button @click="showFlag=false">取 消</el-button>
@@ -109,6 +119,8 @@ export default {
       itemList: null,
       ruleName: null,
       projectType:null,
+      editTabsValue: '',
+      tabIndex: null,
       //树名称
       bomCode: undefined,
       defaultProps: {
@@ -120,6 +132,8 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
+        ruleName: null,
+        projectType: null,
         groupId:null,
         materialCode:null,
         typeCode:null
@@ -136,6 +150,7 @@ export default {
     getProjectList() {
       getProjectOptions(this.queryParams).then(response => {
           this.projectTypeOptions = response;
+          this.tabIndex = response.length;
       });
     },
 
@@ -166,6 +181,8 @@ export default {
     /** 重置按钮操作 */
     resetQuery() {
       this.resetForm("queryProjectForm");
+      this.queryParams.projectType = '';
+      this.editTabsValue = '';
       this.handleQuery();
     },
 
@@ -187,6 +204,11 @@ export default {
       this.ruleName = '';
       this.projectType = '';
     },
+    handleClick(tab,event) {
+      this.queryParams.projectType = tab.name;
+      this.getList();
+    }
+
   }
 };
 </script>