修改

src/api/okr/index.js

@@ -132,6 +132,19 @@ export function SetOKRScoreConfigInfo(data) {
   })
 }
 
+/**
+ * 设置分数规则状态
+ * @param {JSON参数} data 
+ */
+export function SetOKRScoreConfigState(data) {
+  return request({
+    url: '/OKRPeriod/SetOKRScoreConfigState',
+    method: 'post',
+    data
+  })
+}
+
+
 
 
 

src/components/okr/score-form.vue

 <style>
-  .scoreRemind {
+  .scoreSetForm .scoreRemind {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
 
-  .scoreTitle {
+  .scoreSetForm .scoreTitle {
     color: #F72E52;
     font-size: 12px;
   }
 
-  .rule_list {
+  .scoreSetForm .rule_list {
     width: 100%;
     height: auto;
   }
 
-  .score_Top {
+  .scoreSetForm .score_Top {
     height: 30px;
     background-color: #EEEEEF;
     font-size: 12px;
     padding: 5px 20px;
   }
 
-  .score_Tname {
+  .scoreSetForm .score_Tname {
     color: #2D2D2D;
     font-weight: bold;
   }
 
-  .score_IconList span {
+  .scoreSetForm .score_IconList span {
     display: inline-block;
     margin-right: 20px;
     color: #2961FE;
     cursor: pointer;
   }
 
-  .score_IconList span i {
+  .scoreSetForm .score_IconList span i {
     margin-right: 5px;
   }
 
-  .score_IconList span:last-child {
+  .scoreSetForm .score_IconList span:last-child {
     margin-right: 0;
   }
 
-  .rule_InnerList {
+  .scoreSetForm .rule_InnerList {
     min-height: 60px;
     padding: 0 20px;
     border-bottom: 1px solid #F4F4F4;
   }
 
-  .rule_Item {
+  .scoreSetForm .rule_Item {
     display: inline-block;
     margin: 10px 30px 10px 0;
   }
 
-  .rule_comback {
+  .scoreSetForm .rule_comback {
     width: 60px;
     height: 20px;
     background-color: #EEEEEF;
@@ -64,12 +64,14 @@
     font-size: 12px;
   }
 
-  .score_Num {
+  .scoreSetForm .score_Num {
     display: inline-block;
     position: relative;
     top: -26px;
   }
-
+  .scoreSetForm .isDefaultColor{
+    color:#A1AAB2!important;
+  }
 </style>
 <template>
   <div class="scoreSetForm">
@@ -86,9 +88,10 @@
       <div class="scoreRemind score_Top">
         <div class="score_Tname">{{item.Name}}</div>
         <div class="score_IconList">
-          <span><i class="iconfont icon-dagou"></i>默认</span>
-          <span><i class="iconfont icon-edit" @click="addScoreRull(item)"></i>编辑</span>
-          <span><i class="iconfont icon-shanchu"></i>删除</span>
+          <span @click="setDefault(item)" v-if="item.IsDefault==2" class="isDefaultColor"><i class="iconfont icon-dagou"></i>默认</span>
+          <span @click="setDefault(item)" v-else><i class="iconfont icon-dagou"></i>默认</span>
+          <span @click="addScoreRull(item)"><i class="iconfont icon-edit"></i>编辑</span>
+          <span @click="delRuleList(item)"><i class="iconfont icon-shanchu"></i>删除</span>
         </div>
       </div>
       <div class="rule_InnerList">
@@ -107,7 +110,8 @@
 </template>
 <script>
   import {
-    GetOKRScoreConfigPageList
+    GetOKRScoreConfigPageList,
+    SetOKRScoreConfigState,
   } from '../../api/okr/index';
   import scoresetForm from '../../components/okr/scoreset-form';
   export default {
@@ -144,20 +148,55 @@
       },
       //新增分数规则
       addScoreRull(obj) {
-        if(obj){
-           this.scoreObj=obj;
-        }else{
-           this.scoreObj=null;
+        if (obj) {
+          this.scoreObj = obj;
+        } else {
+          this.scoreObj = null;
         }
-        this.isShowScoreSet=true;
+        this.isShowScoreSet = true;
       },
-      //   //关闭流程设置
+      //关闭流程设置
       closeScoreForm() {
         this.isShowScoreSet = false;
       },
       refreshPage() {
         this.getList();
       },
+      //删除分数规则
+      delRuleList(item) {
+        this.$q.dialog({
+          title: '提示信息',
+          message: '是否确定删除？',
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          let msg = {
+            ScoreId: item.Id,
+            Type: 2
+          }
+          SetOKRScoreConfigState(msg).then(res => {
+            if (res.Code == 1) {
+              this.getList();
+            }
+          })
+        }).onCancel(() => {
+
+        });
+      },
+      //设为默认
+      setDefault(item) {
+        let msg = {
+          ScoreId: item.Id,
+          Type: 1
+        }
+        SetOKRScoreConfigState(msg).then(res => {
+          if (res.Code == 1) {
+            this.getList();
+          }
+        })
+      }
     }
   }
 

src/components/okr/scoreset-form.vue

 <style>
-    .scoreForm_List{
-        width:100%;
-        min-height:80px;
-        background-color: #F7F7F7;
-        padding:15px;
-    }
-    .score_MyNum{
-        margin-bottom:10px;
-    }
-    .addScoreBtn{
-        width:100%;
-        height:40px;
-        border:1px dashed #2961FE;
-        text-align: center;
-        line-height: 40px;
-        margin-top:20px;
-        color:#2961FE;
-        cursor: pointer;
-    }
+  .scoresetForm .scoreForm_List {
+    width: 100%;
+    min-height: 80px;
+    background-color: #F7F7F7;
+    padding: 15px;
+  }
+
+  .scoresetForm .score_MyNum {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .scoresetForm .addScoreBtn {
+    width: 100%;
+    height: 40px;
+    border: 1px dashed #2961FE;
+    text-align: center;
+    line-height: 40px;
+    margin-top: 20px;
+    color: #2961FE;
+    cursor: pointer;
+  }
+
+  .scoresetForm .scoreIlist:hover {
+    color: red;
+  }
+
+  .scoresetForm .scoreContent {
+    max-height: 450px;
+  }
+
 </style>
 <template>
   <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
-    <q-card style="width: 700px;max-width:700px;">
+    <q-card style="width: 700px;max-width:700px;" class="scoresetForm">
       <q-card-section>
         <div class="text-h6">{{(saveObj&&saveObj.Id>0)?"修改分数规则":"新增分数规则"}}</div>
       </q-card-section>
       <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
-        <div class="row wrap">
+        <div class="row wrap scoreContent">
           <div class="col-12">
             <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.Name" ref="Name"
               class="col-12 q-pb-lg" label="规则名称" :rules="[val => !!val || '请填写规则名称']" />
           </div>
           <div class="col-12">
-            <div class="scoreForm_List" v-for="(item,index) in msg.DetailList" :key="index">
-                <div class="score_MyNum">分数1：</div>
-                <div>
-                    <el-input style="width:300px;display:inline-block;" v-model="item.Name" placeholder="分数名称"></el-input>
-                    <el-input style="width:100px;display:inline-block;margin-left:20px;" v-model="item.ScoreMin" placeholder="最小分数"></el-input>
-                    <el-input style="width:100px;display:inline-block;margin-left:20px;" v-model="item.ScoreMax" placeholder="最大分数"></el-input>
-                    <el-select :ref="'colorSelect'+index" placeholder="" v-model="item.Color" style="width: 70px;display:inline-block;margin-left:20px;" @change="handleChange(item.Color,index)">
-                        <el-option
-                        v-for="item in colorList"
-                        :key="item"
-                        label=" "
-                        :value="item"
-                        v-html="'<div style=background-color:'+ item+';width:' +'25px'+';height:'+'25px'+';border-radius:'+'50%'+'></div>'">
-                        </el-option>
-                    </el-select>
+            <div class="scoreForm_List" v-for="(item,index) in msg.DetailList" :key="index" style="margin-bottom:10px;">
+              <div class="score_MyNum">
+                <div>分数{{index+1}}：</div>
+                <div style="cursor:pointer;">
+                  <i class="iconfont icon-shanchu scoreIlist" @click="delDeailList(index)"></i>
                 </div>
+              </div>
+              <div>
+                <el-input style="width:300px;display:inline-block;" v-model="item.Name" placeholder="分数名称"></el-input>
+                <el-input style="width:90px;display:inline-block;margin-left:20px;"
+                  @keyup.native="checkPrice(item,'ScoreMin')" v-model="item.ScoreMin" placeholder="最小分数"></el-input>
+                <el-input style="width:90px;display:inline-block;margin-left:20px;"
+                  @keyup.native="checkPrice(item,'ScoreMax')" v-model="item.ScoreMax" placeholder="最大分数"></el-input>
+                <el-select :ref="'colorSelect'+index" placeholder="" v-model="item.Color"
+                  style="width: 70px;display:inline-block;margin-left:20px;" @change="handleChange(item.Color,index)">
+                  <el-option v-for="item in colorList" :key="item" label=" " :value="item"
+                    v-html="'<div style=background-color:'+ item+';width:' +'25px'+';height:'+'25px'+';border-radius:'+'50%'+'></div>'">
+                  </el-option>
+                </el-select>
+              </div>
             </div>
           </div>
-          <div class="addScoreBtn">＋新增分数</div>
+          <div class="addScoreBtn" @click="addScoreList()">＋新增分数</div>
         </div>
       </q-card-section>
       <q-card-actions align="right" class="bg-white">
@@ -74,42 +92,48 @@
     },
     data() {
       return {
-        msg:{
-          Id:0,
-          Name:'', //规则名称
-          DetailList:[{
-            Name:'', //分数名称
-            ScoreMin:'', //最小分数
-            ScoreMax:'', //最大分数
-            Color:'' //颜色
+        msg: {
+          Id: 0,
+          Name: '', //规则名称
+          DetailList: [{
+            Name: '', //分数名称
+            ScoreMin: '', //最小分数
+            ScoreMax: '', //最大分数
+            Color: '' //颜色
           }],
         },
-        myColor:'',
-        colorList:["#FFC0CB", "#DB7093", "#FF1493", "#DC143C"],
-        persistent:true
+        myColor: '',
+        colorList: ["#F72E52", "#FA9595", "#ED3AC5", "#F28C1D", "#8175FB", "#FEB528", "#2961FE", "#3FC4FF", "#51BDA5",
+          "#08D220"
+        ],
+        persistent: true
       }
     },
     computed: {},
     created() {
-    //  if (this.color && this.color.length > 0) {
-    //     this.myColor = this.color;
-    //     this.setSelectColor(this.color)
-    //   }
+      //  if (this.color && this.color.length > 0) {
+      //     this.myColor = this.color;
+      //     this.setSelectColor(this.color)
+      //   }
     },
     mounted() {
-       console.log(this.saveObj,'saveObj');
+      console.log(this.saveObj, 'saveObj');
+      if (this.saveObj && this.saveObj.Id > 0) {
+        this.msg.Id = this.saveObj.Id;
+        this.msg.Name = this.saveObj.Name;
+        this.msg.DetailList = this.saveObj.DetailList;
+        this.msg.DetailList.forEach((x, index) => {
+          this.setSelectColor(x.Color, index);
+        })
+      }
     },
     methods: {
-        //设置颜色选择框中颜色
-      setSelectColor(color,index) {
-        //通过操作dom节点改变样式
-        console.log(color,'color');
+      //设置颜色选择框中颜色
+      setSelectColor(color, index) {
+        let str = `colorSelect${index}`;
         this.$nextTick(() => {
-            console.log(this.$refs.colorSelect0,'colorSelect');
-          let dom = this.$refs.colorSelect0;
-          console.log(dom,'domm');
+          let dom = this.$refs[str][0];
           if (dom) {
-              console.log(dom.$el,'eleleleleelele');
             dom = dom.$el.children[0];
             let inputDom = dom.querySelectorAll(".el-input__inner");
             let icon = dom.querySelectorAll(".el-input__icon");
@@ -119,18 +143,63 @@
         })
       },
       //关闭天窗
-      closeScoreForm(){
+      closeScoreForm() {
         this.$emit('close');
-        this.persistent=false;
+        this.persistent = false;
       },
-      handleChange(val,index) {
-        this.setSelectColor(val,index);
+      handleChange(val, index) {
+        this.setSelectColor(val, index);
         //触发update事件更新父组件绑定值
         this.$emit('update', val);
       },
       //保存
-      saveScore(){
-
+      saveScore() {
+        for (let i = 0; i < this.msg.DetailList.length; i++) {
+          if (this.msg.DetailList[i].Name == '') {
+            this.$q.notify({
+              type: 'negative',
+              position: "top",
+              message: `请填写第${i+1}分数名称`
+            })
+            return;
+          }
+          if (this.msg.DetailList[i].ScoreMin == '') {
+            this.$q.notify({
+              type: 'negative',
+              position: "top",
+              message: `请填写第${i+1}最小分数`
+            })
+            return;
+          }
+          if (this.msg.DetailList[i].ScoreMax == '') {
+            this.$q.notify({
+              type: 'negative',
+              position: "top",
+              message: `请填写第${i+1}最大分数`
+            })
+            return;
+          }
+        }
+        SetOKRScoreConfigInfo(this.msg).then(res => {
+          if (res.Code == 1) {
+            this.$emit('success');
+            this.closeScoreForm();
+          }
+        })
+      },
+      //新增分数
+      addScoreList() {
+        let obj = {
+          Name: '', //分数名称
+          ScoreMin: '', //最小分数
+          ScoreMax: '', //最大分数
+          Color: '' //颜色
+        }
+        this.msg.DetailList.push(obj);
+      },
+      //删除分数
+      delDeailList(index) {
+        this.msg.DetailList.splice(index, 1);
       }
     },
   }