on_fl

src/components/publics/workpoints.vue

@@ -3,30 +3,66 @@
     <div class="initialPoint">
       <div class="initia_title">{{initia_head.initial_suername}}</div>
       <div class="initia_title_1">{{initia_head.initial_suertext}}</div>
-      <div class="nitia_list" v-for="(v,i) in initia_arr" :key="i">
-        <span>{{v.initialName}}</span>
-        <p class="initia_mark" v-show="v.initia_mark">?</p>
-        <div class="initia_mark_none">
-          <div class="initia_mark_none_text">
-            <p v-html="v.initial_text"></p>
-          </div>
-          <div class="initia_mark_none_jt"></div>
-        </div>
-        <el-input
-          v-model="v.initia_input"
-          placeholder="请输入分值"
-          oninput="if(this.value=='0'){this.value='';}else{this.value=this.value.replace(/[^0-9]/g,'')}"
-        ></el-input>
+
+      <!-- <el-form :label-width="initia_head.initial_width">
+        <el-form-item prop="base_point" style="margin: 20px 0 0 0 "  v-for="(v,i) in initia_arr" :key="i">
+            <template slot="label">
+              <span :style="'width:'+initia_head.initial_left">{{v.initialName}}</span>
+              <el-tooltip placement="top">
+                <div slot="content" class="initia_mark_none_text" v-html="v.initial_text"></div>
+                <span class="initia_mark" v-show="v.initia_mark">?</span>
+              </el-tooltip>
+            </template>
+            <el-input
+              class="nitia_list_input"
+              v-model="v.initia_input"
+              placeholder="请输入分值"
+              oninput="if(this.value=='0'){this.value='';}else{this.value=this.value.replace(/[^0-9]/g,'')}"
+            ></el-input>
+        </el-form-item>
+      </el-form>-->
+      <div v-for="(v,i) in initia_arr" :key="i">
+        <el-form
+          :model="v.initia_input"
+          ref="v.initia_input"
+          :label-width="initia_head.initial_width"
+          class="demo-ruleForm"
+        >
+          <el-form-item
+            style="margin: 20px 0 0 0 "
+            prop="age"
+            :rules="[
+              { required: true, message: '分值不能为空'},
+            ]"
+          >
+            <template slot="label">
+              <span :style="'width:'+initia_head.initial_left">{{v.initialName}}</span>
+              <el-tooltip placement="top">
+                <div slot="content" v-html="v.initial_text"></div>
+                <span class="initia_mark" v-show="v.initia_mark">?</span>
+              </el-tooltip>
+            </template>
+            <el-input
+              type="age"
+              v-model="v.initia_input.age"
+              autocomplete="off"
+              class="nitia_list_input"
+              placeholder="请输入分值"
+              oninput="if(this.value=='0'){this.value='';}else{this.value=this.value.replace(/[^0-9]/g,'')}"
+            ></el-input>
+          </el-form-item>
+        </el-form>
       </div>
-      <button
+
+      <el-button
+        type="primary"
         class="initia_button"
         @click="save()"
-        :style="'margin: 20px 0 0 '+initia_head.initial_left"
-      >保存</button>
+        :style="'margin: 20px 0 20px '+initia_head.initial_left"
+      >保存</el-button>
     </div>
   </div>
 </template>
-
 <script>
 export default {
   props: {
@@ -42,22 +78,20 @@ export default {
     save() {
       let arr = [];
       for (var i = 0; i < this.initia_arr.length; i++) {
-        if (this.initia_arr[i].initia_input !== "") {
+        if (this.initia_arr[i].initia_input.age !== "") {
           arr.push({
-            sj: this.initia_arr[i].initia_input,
+            sj: this.initia_arr[i].initia_input.age,
           });
           if (arr.length == this.initia_arr.length) {
             this.$emit("initia", arr);
-            for (let a = 0; a < this.initia_arr.length; a++) {
-              this.initia_arr[a].initia_input = "";
-            }
+            this.disableds = false;
           }
-        }else{
+        } else {
           this.$message({
-            message: '请输入内容',
-            type: 'warning'
+            message: "请输入分值",
+            type: "warning",
           });
-            return
+          return;
         }
       }
     },
@@ -66,11 +100,14 @@ export default {
 </script>
 
 <style>
+.el-form-item__label {
+  text-align: left;
+}
 .initialPoint {
   margin-left: 30px;
 }
 .initia_mark {
-  background: #c0c4cc;
+  background: #409eff;
   border-radius: 50%;
   width: 14px;
   height: 14px;
@@ -80,6 +117,7 @@ export default {
   line-height: 14px;
   text-align: center;
   margin-left: 4px;
+  cursor: default;
 }
 .initia_title {
   font-size: 20px;
@@ -92,74 +130,10 @@ export default {
   font-size: 14px;
   margin-top: 10px;
 }
-.nitia_list {
-  height: 40px;
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-.nitia_list span {
-  color: #606266;
-  font-size: 14px;
-  height: 20px;
-  white-space: nowrap;
-}
-.nitia_list input {
+.nitia_list_input {
   width: 160px;
   height: 40px;
   border-radius: 4px;
   background-color: rgba(255, 255, 255, 1);
-  border: 1px solid rgba(220, 223, 230, 1);
-  margin-left: 11px;
-}
-.initia_button {
-  border-radius: 4px;
-  background-color: rgba(38, 162, 255, 1);
-  width: 68px;
-  height: 40px;
-  border: 0;
-  color: #ffffff;
-  text-align: center;
-  line-height: 40px;
-  outline: none;
-}
-.initia_el_button {
-  width: 13px;
-  border-radius: 50%;
-}
-.initia_mark_none_jt {
-  float: left;
-  width: 0;
-  height: 0;
-  border-width: 6px;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 1) transparent transparent transparent;
-  margin-left: 56px;
-  opacity: 0.8;
-}
-.initia_mark_none_text {
-  background-color: rgba(0, 0, 0, 1);
-  border-radius: 3px;
-  opacity: 0.9;
-}
-.initia_mark_none_text p {
-  padding: 7px 15px 15px 7px;
-  color: #ffffff;
-  font-size: 12px;
-}
-.initia_mark_none {
-  position: absolute;
-  left: -10px;
-  bottom: 32px;
-  transition: 0.4s;
-  opacity: 0;
-  visibility: hidden;
-  z-index: 0;
-}
-.initia_mark:hover + .initia_mark_none {
-  opacity: 1;
-  visibility: visible;
-  z-index: 10;
 }
 </style>

src/views/check.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="all">
+  <div v-loading="loading">
     <workpoints :initia_arr="initia_arr" :initia_head="initia_head" :obj="obj" @initia="initia" />
   </div>
 </template>
@@ -9,52 +9,70 @@ import workpoints from "@/components/publics/workpoints";
 export default {
   data() {
     return {
+      loading: false,
       initia_head: {
         initial_suername: "考勤积分",
         initial_suertext: "以下考勤奖扣分，均为B分",
-        initial_left: "125px",
+        initial_left: "167px",
+        initial_width: "165px",
       },
       initia_arr: [
         {
           initialName: "月度全勤，每月加分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
         {
           initialName: "正常打卡，每次加分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
         {
           initialName: "上下班缺卡，每次扣分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
         {
           initialName: "上班迟到，每次扣分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
         // { initialName: "严重迟到，每次扣分", initia_mark: false, initia_input: "" },
         {
           initialName: "下班早退，每次扣分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
         {
           initialName: "矿工缺席，每次扣分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
         {
           initialName: "加班，每小时加分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
         {
           initialName: "请假，每小时扣分",
           initia_mark: false,
-          initia_input: "",
+          initia_input: {
+            age: "999",
+          },
         },
       ],
       obj: {
@@ -76,32 +94,37 @@ export default {
   mounted() {},
   methods: {
     initia(ok) {
+      this.loading = true;
       let objs = this.obj;
-      objs.month_full_ad = +ok[0].sj;//>=0
-      objs.normal = +ok[1].sj;//>=0
-      objs.no_sign = -ok[2].sj;//<=0
-      objs.absent = -ok[5].sj;//<=0
-      objs.on_duty_late = -ok[3].sj;//<=0
-      objs.off_duty_early = -ok[4].sj;//<=0
-      objs.ot_per_hour = +ok[6].sj;//>=0
-      objs.leave_per_hour = -ok[7].sj;//<=0
-      this.$axios.post("api/ad/update", this.obj).then((res) => {
-        console.log(res);
-        if(res.data.code==1){
-          this.$message({
-            message: '保存成功',
-            type: 'success'
-          });
-        }else{
-          this.$message.error('保存失败');
-        }
-      }).catch((err)=>{
-        console.log(err);
-      });
+      objs.month_full_ad = +ok[0].sj; //>=0
+      objs.normal = +ok[1].sj; //>=0
+      objs.no_sign = -ok[2].sj; //<=0
+      objs.absent = -ok[5].sj; //<=0
+      objs.on_duty_late = -ok[3].sj; //<=0
+      objs.off_duty_early = -ok[4].sj; //<=0
+      objs.ot_per_hour = +ok[6].sj; //>=0
+      objs.leave_per_hour = -ok[7].sj; //<=0
+      this.$axios
+        .post("api/ad/update", this.obj)
+        .then((res) => {
+          console.log(res);
+          if (res.data.code == 1) {
+            this.loading = false;
+            this.$message({
+              message: res.data.msg,
+              type: "success",
+            });
+          } else {
+            this.$message.error("提交失败");
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+        });
     },
   },
 };
 </script>
 
-<style>
+<style  scoped lang="scss">
 </style>

src/views/initialPoint.vue

@@ -1,31 +1,36 @@
 <template>
-  <div class="all">
+  <div v-loading="loading">
     <workpoints :initia_arr="initia_arr" :initia_head="initia_head" @initia="initia" />
   </div>
 </template>
-
 <script>
 import workpoints from "@/components/publics/workpoints";
 export default {
   data() {
     return {
+      loading: false,
       initia_head: {
         initial_suername: "初始分",
         initial_suertext: "基础分和工龄分均为B分",
-        initial_left: "72px",
+        initial_left: "85px",
+        initial_width: "83px",
       },
       initia_arr: [
         {
           initialName: "基础分",
           initia_mark: true,
-          initia_input: "",
+          initia_input: {
+            age: "1000",
+          },
           initial_text:
             "基础分是为了让积分保持正激励的作用，减少出现0分<br/>以下的情况，更好地激励员工挣分；<br/>设置分值后，系统将为全部员工自动加上此项基础分；<br/>此项基础分仅加一次，计入每个员工的累积总分",
         },
         {
           initialName: "工龄分",
           initia_mark: true,
-          initia_input: "",
+          initia_input: {
+            age: "1000",
+          },
           initial_text:
             "工龄分是为了更好的认可老员工；<br/>首次加分=员工已在职的月份*工龄分，未满一个月的不<br/>加分；后续加分按设置的工龄分值每月自动累加",
         },
@@ -39,23 +44,30 @@ export default {
   mounted() {},
   methods: {
     initia(ok) {
-      this.$axios.post("api/integral/site/config").then((res) => {
-        console.log(res);
-        if(res.data.code==1){
-          this.$message({
-            message: '保存成功',
-            type: 'success'
-          });
-        }else{
-          this.$message.error('保存失败');
-        }
-      }).catch((err)=>{
-        console.log(err);
-      });
+      this.loading = true;
+      this.$axios
+        .post("api/integral/site/config")
+        .then((res) => {
+          console.log(res);
+          if (res.data.code == 1) {
+            this.loading = false;
+            this.$message({
+              message: res.data.msg,
+              type: "success",
+            });
+          } else {
+            this.$message.error("提交失败");
+            this.loading = false;
+          }
+        })
+        .catch((err) => {
+          console.log(err);
+          this.loading = false;
+        });
     },
   },
 };
 </script>
 
-<style>
+<style  scoped lang="scss">
 </style>

src/views/voluntarilyPoint.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>自动积分</div>
+	<div class="">自动积分</div>
 </template>
 
 <script>