排行榜配置置灰

src/components/yqrange/gp-ranking.vue

@@ -9,39 +9,39 @@
 
 
     <el-form-item label="显示排行榜" class="required-label">
-      <el-radio-group v-model="formData.rankShowFlag" size="small" class="required-label">
+      <el-radio-group v-model="formData.rankShowFlag" size="small" class="required-label" @change="changeRankShow">
         <el-radio :label="0">关闭</el-radio>
         <el-radio :label="1">开启</el-radio>
       </el-radio-group>
     </el-form-item>
 
-    <el-form-item label="最多上榜人数" class="required-label" v-if="formData.rankShowFlag == 1">
+    <el-form-item label="最多上榜人数" class="required-label">
       <el-radio-group v-model="formData.maxQuantity" size="small" class="required-label">
-        <el-radio :label="50"></el-radio>
-        <el-radio :label="100"></el-radio>
-        <el-radio :label="200"></el-radio>
+        <el-radio :label="50" :disabled="styleEditFlag"></el-radio>
+        <el-radio :label="100" :disabled="styleEditFlag"></el-radio>
+        <el-radio :label="200" :disabled="styleEditFlag"></el-radio>
       </el-radio-group>
     </el-form-item>
 
-    <el-form-item label="榜单类型" class="required-label" v-if="formData.rankShowFlag == 1">
+    <el-form-item label="榜单类型" class="required-label">
           <el-checkbox-group v-model="rankTypeList" @change="changeRankType">
             <!--<el-checkbox size="small" :label="1">本院排行</el-checkbox>-->
             <!--<el-checkbox size="small" :label="3">本市排行</el-checkbox>-->
             <!--<el-checkbox size="small" :label="5">本圈排行</el-checkbox>-->
-            <el-checkbox v-for="item in selectedRankTypeList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
+            <el-checkbox :disabled="styleEditFlag" v-for="item in selectedRankTypeList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
           </el-checkbox-group>
     </el-form-item>
-    <el-form-item label="显示规则" class="required-label" v-if="formData.rankShowFlag == 1">
+    <el-form-item label="显示规则" class="required-label">
       <el-radio-group v-model="formData.ruleShowFlag" size="small" class="required-label">
-        <el-radio :label="0">关闭</el-radio>
-        <el-radio :label="1">开启</el-radio>
+        <el-radio :label="0" :disabled="styleEditFlag">关闭</el-radio>
+        <el-radio :label="1" :disabled="styleEditFlag">开启</el-radio>
       </el-radio-group>
     </el-form-item>
 
 
-    <el-form-item label="规则跳转模块" v-if="formData.rankShowFlag == 1 && formData.ruleShowFlag == 1" class="required-label">
+    <el-form-item label="规则跳转模块" v-if="formData.ruleShowFlag == 1" class="required-label">
       <el-col :span="18">
-      <el-select filterable v-model="formData.rankModule.name" @change="moduleChange" placeholder="请选择模块" style="width:88%">
+      <el-select filterable :disabled="styleEditFlag" v-model="formData.rankModule.name" @change="moduleChange" placeholder="请选择模块" style="width:88%">
         <el-option
           v-for="item2 in moduleArray.nameList"
           :key="item2.id"
@@ -51,10 +51,10 @@
       </el-select>
       </el-col>
     </el-form-item>
-    <div v-for="(i,j) in formData.rankModule.paramList2" :key="j" class="required-label" v-if="formData.rankShowFlag == 1 && formData.ruleShowFlag == 1">
+    <div v-for="(i,j) in formData.rankModule.paramList2" :key="j" class="required-label" v-if="formData.ruleShowFlag == 1">
       <el-form-item label="选择参数" v-if="formData.rankModule.paramFlag == 1">
         <el-col :span="18">
-        <el-select v-model="formData.rankModule.paramList[j].value" filterable placeholder="请选择参数" style="width:88%">
+        <el-select :disabled="styleEditFlag" v-model="formData.rankModule.paramList[j].value" filterable placeholder="请选择参数" style="width:88%">
           <el-option
             v-for="(item3,index3) in i"
             :key="index3"
@@ -67,7 +67,7 @@
       </el-form-item>
     </div>
 
-    <el-form-item label="不参与排行的成员" v-if="formData.rankShowFlag == 1">
+    <el-form-item label="不参与排行的成员">
       <div v-for="(item, index) in mobilePhonesArray" :key="index">
         <el-row>
           <el-col :span="10">
@@ -76,10 +76,10 @@
                         v-model="item.value"
                         placeholder="请输入手机号"
                         style="width:85%;"
-                        type="text"
+                        type="text" :disabled="styleEditFlag"
               ></el-input>
           </el-col>
-          <el-col :span="2" style="margin-top: 9px;">
+          <el-col :span="2" style="margin-top: 9px;" v-if="!styleEditFlag">
             <img
               @click="addPhone(index)"
               class="edit-img"
@@ -139,6 +139,7 @@
         }
       };
       return {
+        styleEditFlag: false,// 是否可以编辑
         moduleArray: [],
         rankTypeList:[],
         mobilePhonesArray:[],
@@ -191,6 +192,12 @@
         getRankConfig(req).then(function (res) {
           if(res.code == "000000") {
             vm.formData = res.data;
+            if(vm.formData.rankShowFlag == 0){
+              vm.styleEditFlag = true;
+            }
+            else {
+              vm.styleEditFlag = false;
+            }
 
             vm.selectedRankTypeList = new Array();
             vm.rankTypeList = new Array();
@@ -268,11 +275,19 @@
         if(vm.mobilePhonesArray != null){
           vm.formData.mobilePhones = new Array();
           for(let i = 0; i < vm.mobilePhonesArray.length; i++){
+
+            if(vm.formData.rankShowFlag == 1
+              && vm.mobilePhonesArray[i].value != ""
+              &&!vm.checkPhone(vm.mobilePhonesArray[i].value)){
+              vm.$message.error("请输入正确的手机号！");
+              return;
+            }
             vm.formData.mobilePhones.push(vm.mobilePhonesArray[i].value);
           }
         }
 
 
+        if(vm.formData.rankShowFlag == 1){
 
           if(!vm.checkRankTypeList()){
             return;
@@ -285,6 +300,7 @@
           if(!vm.checkParamList()){
             return;
           }
+        }
 
         if(vm.formData.ruleShowFlag == 0){
           vm.formData.rankModule = {
@@ -551,6 +567,14 @@
         else {
           return true;
         }
+      },
+      changeRankShow(){
+        if(vm.formData.rankShowFlag == 1){
+          vm.styleEditFlag = false;
+        }
+        else {
+          vm.styleEditFlag = true;
+        }
       }
     }
   }