feat: 发布新任务 - 车型测评任务

src/views/task/new/index.vue

@@ -14,15 +14,15 @@
           :type="formType === 2 ? 'primary' : 'default'"
           round
           @click="formType = 2"
-          >车型审查任务
-        </el-button>
-        <el-button
-          size="mini"
-          :type="formType === 3 ? 'primary' : 'default'"
-          round
-          @click="formType = 3"
-          >车型检验任务
+          >车型测评任务
         </el-button>
+        <!--        <el-button-->
+        <!--          size="mini"-->
+        <!--          :type="formType === 3 ? 'primary' : 'default'"-->
+        <!--          round-->
+        <!--          @click="formType = 3"-->
+        <!--          >车型检验任务-->
+        <!--        </el-button>-->
       </el-form-item>
 
       <div class="subtitle">基础信息</div>
@@ -352,6 +352,24 @@
           </el-form-item>
         </el-col>
       </el-row>
+
+      <!--   测试场景   -->
+      <div v-show="formType === 2">
+        <div class="subtitle" style="margin-top: 20px">测试场景</div>
+        <div class="test-scenario-container">
+          <div
+            v-for="(item, index) in testScenarioList"
+            :key="index"
+            :class="{
+              'test-scenario': item.check === false,
+              'check-test-scenario': item.check === true
+            }"
+            @click="handleTestScenario(item)"
+          >
+            <div>{{ item.label }}</div>
+          </div>
+        </div>
+      </div>
     </el-form>
 
     <div class="bottom-button">
@@ -375,15 +393,45 @@
 </template>
 <script>
 export default {
-  dicts: ['sys_task_status', 'sys_pro', 'confidentiality_level'],
+  dicts: [
+    'sys_task_status',
+    'sys_pro',
+    'confidentiality_level',
+    'test_scenario'
+  ],
   data() {
     return {
       name: '',
       formType: 1,
+      showTestScenario: false,
       // 新增/保存 - 对象
       model: {},
       loading: false,
       tableData: [],
+      checkTestScenarioList: [],
+      testScenarioList: [
+        { value: 0, label: 'TBOX-蜂窝以太网接口', check: false },
+        { value: 0, label: 'WiFi API接口', check: false },
+        { value: 0, label: 'WiFi Client接口', check: false },
+        { value: 0, label: '充电以太网接口', check: false },
+        { value: 0, label: 'CAN 诊断接口(OBD)', check: false },
+        { value: 0, label: '以太网诊断接口(OBD)', check: false },
+        { value: 0, label: '车载摄像头以太网接口(无线)', check: false },
+        { value: 0, label: '第三方应用软件', check: false },
+        { value: 0, label: '远程控车应用', check: false },
+        { value: 0, label: 'USB接口', check: false },
+        { value: 0, label: 'XCB标定', check: false },
+        { value: 0, label: 'CCP标定', check: false },
+        { value: 0, label: '安全启动', check: false },
+        { value: 0, label: '远程控车', check: false },
+        { value: 0, label: 'V2X', check: false },
+        { value: 0, label: 'BT', check: false },
+        { value: 0, label: 'BLE', check: false },
+        { value: 0, label: 'NFC', check: false },
+        { value: 0, label: '射频钥匙', check: false },
+        { value: 0, label: '软件升级', check: false },
+        { value: 0, label: 'ECU固体', check: false }
+      ],
       rules: {
         no: [{ required: true, message: '任务编号不能为空', trigger: 'blur' }],
         taskName: [
@@ -487,12 +535,21 @@ export default {
     'model.trademark': {
       handler(newValue, oldValue) {
         if (newValue) {
-          console.log('aaa')
           this.$refs.form.clearValidate('trademark')
         } else {
           this.$refs.form.validateField('trademark')
         }
       }
+    },
+    formType: {
+      handler(newValue, oldValue) {
+        console.log('formType', newValue)
+        if (newValue === '1') {
+          this.formType = 1
+        } else if (newValue === '2') {
+          this.formType = 2
+        }
+      }
     }
   },
   methods: {
@@ -506,6 +563,20 @@ export default {
       this.userList.find(item => item.name === row.name).disabled = false
       this.tableData.find(item => item.name === row.name).name = ''
     },
+    handleTestScenario(item) {
+      // 查看item.value在this.checkTestScenarioList里面存不存在
+      // 存在则删除
+      if (this.checkTestScenarioList.includes(item.label)) {
+        this.checkTestScenarioList.splice(
+          this.checkTestScenarioList.indexOf(item.label),
+          1
+        )
+        item.check = false
+      } else {
+        item.check = true
+        this.checkTestScenarioList.push(item.value)
+      }
+    },
     /**
      * 小组信息删除
      * @param row 行内信息
@@ -589,6 +660,7 @@ export default {
     },
     // 保存
     handleAdd() {
+      console.log('a', this.checkTestScenarioList)
       this.$refs.form.validate(valid => {
         if (valid) {
           this.$modal.msgSuccess('发布成功')
@@ -613,4 +685,35 @@ export default {
 .add-number {
   width: 100%;
 }
+.test-scenario-container {
+  display: flex;
+  flex-wrap: wrap;
+  .test-scenario {
+    width: 220px;
+    height: 40px;
+    border: 1px solid #dcdfe6;
+    background-color: #ffffff;
+    margin: 0 10px 10px 0;
+    border-radius: 30px;
+    div {
+      text-align: center;
+      position: relative;
+      top: 8px;
+    }
+  }
+  .check-test-scenario {
+    width: 220px;
+    height: 40px;
+    border: 1px solid #a1cfff;
+    background-color: #f0f7ff;
+    margin: 0 10px 10px 0;
+    border-radius: 30px;
+    div {
+      color: #68b6ff;
+      text-align: center;
+      position: relative;
+      top: 8px;
+    }
+  }
+}
 </style>