应用设置UI调整，本地数据提交前有效性校验

src/views/yqrange/range-setting.vue

@@ -4,7 +4,7 @@
     <div class="yqrange-index-content" id="screenSet">
       <!--<div class="header-title">云鹊小圈</div>-->
 
-      <el-form ref="settingForm" :model="settingForm"
+      <!-- <el-form ref="settingForm" :model="settingForm"
                label-width="150px"
                label-suffix="："
                class="basic-form">
@@ -21,10 +21,33 @@
             <el-input v-model="item.seqNo" style="width:60px;margin-left:40px;" size="small" placeholder="序号"/>
           </el-form-item>
         </div>
-      </el-form>
+      </el-form> -->
+
+      <el-table :data="settingForm.settingData" class="customer-table" style="margin-left:70px;"
+        :header-cell-style="{background:'#ffffff'}">
+        <el-table-column label="" prop="appType" width="120"></el-table-column>
+        <el-table-column label="" width="180">
+          <template slot-scope="scope">
+            <el-radio-group size="small" v-model="scope.row.showOff">
+              <el-radio :label="1">开启</el-radio>
+              <el-radio :label="0">关闭</el-radio>
+            </el-radio-group>
+          </template>
+        </el-table-column>
+        <el-table-column label="重命名" width="150">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.appName" style="width:120px;" size="small" placeholder="重命名"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="序号" width="200">
+          <template slot-scope="scope">
+            <el-input v-model="scope.row.seqNo" style="width:60px;" size="small" placeholder="序号"/>
+          </template>
+        </el-table-column>
+      </el-table>
 
       <div style="margin-top: 60px;margin-left: 150px;">
-        <el-button type="primary" @click="save()" center>保存</el-button>
+        <el-button type="primary" @click="checkSubmitData()" center>保存</el-button>
         <!--<el-button @click="cancle()">取 消</el-button>-->
       </div>
 
@@ -36,6 +59,7 @@
 import { openLoading, closeLoading } from "../../utils/utils";
 import BreadCrumb from "@/components/breadcrumb.vue";
 import { getRangeList,updateRangeStatus, getCircleSettingList, saveCircleSetting} from "../../utils/yqrange/yqrangeApi";
+import { isEmptyUtils } from "../../utils/index";
 
 export default {
   components: {
@@ -82,57 +106,37 @@ export default {
         if(res.code == "000000") {
           this.settingForm.settingData = res.data;
         } else {
-          // this.$message.error(res.data.message);
           this.settingForm.settingData = [];
         }
-        // if(this.settingForm.settingData == [] || this.settingForm.settingData.length == 0){
-
-        //   this.settingForm.settingData = [{
-        //     appTag: 1,
-        //     showOff: 1
-        //   },
-        //     {
-        //       appTag: 2,
-        //       showOff: 1
-        //     },
-        //     {
-        //       appTag: 3,
-        //       showOff: 1
-        //     },
-        //     {
-        //       appTag: 4,
-        //       showOff: 1
-        //     },
-        //     {
-        //       appTag: 5,
-        //       showOff: 0
-        //     }];
-        // }
-
-        // for(let i = 0; i < this.settingForm.settingData.length; i++){
-        //   if(this.settingForm.settingData[i].appTag == 1){
-        //     this.settingForm.settingData[i].appTagName = "教培"
-        //   }
-        //   else if(this.settingForm.settingData[i].appTag == 2){
-        //     this.settingForm.settingData[i].appTagName = "直播"
-        //   }
-        //   else if(this.settingForm.settingData[i].appTag == 3){
-        //     this.settingForm.settingData[i].appTagName = "继教课程"
-        //   }
-        //   else if(this.settingForm.settingData[i].appTag == 4){
-        //     this.settingForm.settingData[i].appTagName = "职称培训"
-        //   }
-        //   else if(this.settingForm.settingData[i].appTag == 5){
-        //     this.settingForm.settingData[i].appTagName = "云鹊豆商城"
-        //   }
-        // }
-
       }).catch((error) => {
         this.$message.error("请重试");
       })
 
     },
 
+    checkSubmitData() {
+      for(let i=0; i<this.settingForm.settingData.length; i++) {
+        if (isEmptyUtils(this.settingForm.settingData[i].seqNo)) {
+          this.$message.error("序号不可为空，请检查");
+          return;
+        }
+        if (this.settingForm.settingData[i].seqNo > this.settingForm.settingData.length) {
+          this.$message.error("序号必须从1开始顺序排列，不能有跳序情况，请检查");
+          return;
+        }
+        for(let j=0; j<this.settingForm.settingData.length; j++) {
+          if (i == j) {
+            continue;
+          }
+          if (this.settingForm.settingData[i].seqNo == this.settingForm.settingData[j].seqNo) {
+            this.$message.error("序号不可重复，请检查");
+            return;
+          }
+        }
+      }
+      this.save();
+    },
+
     // 保存
     save(){
       let params = {
@@ -199,4 +203,36 @@ export default {
       /*margin-top: 30px;*/
     /*}*/
   /*}*/
+  // 去掉表格单元格边框
+.customer-table th{
+    border:none;
+  }
+.customer-table td,.customer-table th.is-leaf {
+  border:none;
+}
+// 表格最外边框
+.el-table--border, .el-table--group{
+  border: none;
+}
+// 头部边框
+.customer-table thead tr th.is-leaf{
+  width: 0;
+}
+.customer-table thead tr th:nth-last-of-type(2){
+  width: 0;
+}
+// 表格最外层边框-底部边框
+.el-table--border::after, .el-table--group::after{
+  width: 0;
+}
+.customer-table::before{
+  width: 0;
+}
+.customer-table .el-table__fixed-right::before,.el-table__fixed::before{
+  width: 0;
+}
+// 表格有滚动时表格头边框
+.el-table--border th.gutter:last-of-type {
+    width: 0;
+}
 </style>