update

src/views/quality/checkrule/CheckRuleAdd.vue

@@ -3,68 +3,78 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active == 2" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active == 1" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
+        <el-button v-if="active == 2" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
         <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>
-    <div class="body-wrapper">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="规则名称" prop="ruleName">
-          <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
-        </el-form-item>
-        <el-form-item label="核查类型" prop="ruleItemId">
-          <el-select v-model="form.ruleItemId" placeholder="请选择核查类型" @change="ruleItemSelectChanged">
-            <el-option
-              v-for="item in ruleItemOptions"
-              :key="item.id"
-              :label="item.itemExplain"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="规则级别" prop="ruleLevelId">
-          <el-select v-model="form.ruleLevelId" placeholder="请选择规则级别">
-            <el-option
-              v-for="item in ruleLevelOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="数据源" prop="ruleSourceId">
-          <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" @change="sourceSelectChanged">
-            <el-option
-              v-for="source in sourceOptions"
-              :key="source.id"
-              :label="source.sourceName"
-              :value="source.id"
-            />
-          </el-select>
-        </el-form-item>
-        <div>
-          <el-transfer
+    <div class="body-wrapper" style="padding-left: 20%">
+      <el-steps :active="active" finish-status="success" align-center style="width: 900px">
+        <el-step title="填写检测用例信息" />
+        <el-step title="选择检测数据源" />
+      </el-steps>
+      <el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px" style="width: 800px">
+        <div style="padding: 20px 100px">
+          <el-form-item label="用例名称" prop="ruleName">
+            <el-input v-model="form.ruleName" placeholder="请输入用例名称" />
+          </el-form-item>
+          <el-form-item label="检测类型" prop="ruleItemId">
+            <el-select v-model="form.ruleItemId" placeholder="请选择检测类型" style="width: 100%" @change="ruleItemSelectChanged">
+              <el-option
+                v-for="item in ruleItemOptions"
+                :key="item.id"
+                :label="item.itemExplain"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="用例级别" prop="ruleLevelId">
+            <el-select v-model="form.ruleLevelId" placeholder="请选择用例级别" style="width: 100%">
+              <el-option
+                v-for="item in ruleLevelOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+      </el-form>
+      <el-form v-if="active == 2" ref="form" :model="form" :rules="rules" label-width="80px" style="width: 800px">
+        <div style="padding: 20px 100px">
+          <el-form-item label="数据源" prop="ruleSourceId">
+            <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" style="width: 100%" @change="sourceSelectChanged">
+              <el-option
+                v-for="source in sourceOptions"
+                :key="source.id"
+                :label="source.sourceName"
+                :value="source.id"
+              />
+            </el-select>
+          </el-form-item>
+          <!--<el-transfer
             v-model="form.transferValue"
             filterable
             :titles="['备选', '已选']"
             :filter-method="filterMethod"
             filter-placeholder="请输入表名"
             :data="transferData"
-          />
+          />-->
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio
+                v-for="dict in statusOptions"
+                :key="dict.id"
+                :label="dict.itemText"
+              >{{ dict.itemValue }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
         </div>
-        <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in statusOptions"
-              :key="dict.id"
-              :label="dict.itemText"
-            >{{ dict.itemValue }}
-            </el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
       </el-form>
     </div>
   </el-card>
@@ -95,7 +105,8 @@ export default {
       // eslint-disable-next-line vue/no-dupe-keys
       transferData: [],
 
-      title: '核查规则新增',
+      title: '检测用例新增',
+      active: 1,
       // 展示切换
       showOptions: {
         data: {},
@@ -225,6 +236,18 @@ export default {
     showCard() {
       this.$emit('showCard', this.showOptions)
     },
+    /** 步骤条下一步 */
+    handleNextStep() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.active++
+        }
+      })
+    },
+    /** 步骤条上一步 */
+    handleLastStep() {
+      this.active--
+    },
     getRuleLevelList() {
       listRuleLevel().then(response => {
         if (response.success) {
@@ -256,7 +279,7 @@ export default {
     async sourceSelectChanged(val) {
       // this.inspectSourceId(val)
       // const tableNameOldList = []
-      const tableNameOldList = await listSourceIdBytable(val, this.form.ruleConfig.id).then(response => {
+      /* const tableNameOldList = await listSourceIdBytable(val, this.form.ruleConfig.id).then(response => {
         const result = []
         for (let i = 0; i < response.data.length; i++) {
           const tableName = response.data[i].ruleTable
@@ -292,7 +315,20 @@ export default {
 
         // console.log('tableNameOldList=', tableNameOldList)
         // this.form.transferValue = tableNameOldList
-      }
+      }*/
+
+      const source = this.sourceOptions.find(function (item) {
+        return item.id === val
+      })
+      this.form.transferValue = ['全表']
+      this.form.ruleSource = source.sourceName
+      this.form.ruleDbType = source.dbType
+      this.form.ruleTableId = 'all'
+      this.form.ruleTable = '全表'
+      this.form.ruleTableComment = ''
+      this.form.ruleColumnId = ''
+      this.form.ruleColumn = ''
+      this.form.ruleColumnComment = ''
     },
     // 根据来源数据获取已有表
     inspectSourceId(val) {