dd_pc/src/components/publics/workpoints.vue

<template>
  <div class="all">
    <div class="initialPoint">
      <div class="initia_title">{{initia_head.initial_suername}}</div>
      <div class="initia_title_1">{{initia_head.initial_suertext}}</div>

      <!-- <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>

      <el-button
        type="primary"
        class="initia_button"
        @click="save()"
        :style="'margin: 20px 0 20px '+initia_head.initial_left"
      >保存</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    initia_arr: Array,
    initia_head: Object,
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    save() {
      let arr = [];
      for (var i = 0; i < this.initia_arr.length; i++) {
        if (this.initia_arr[i].initia_input.age !== "") {
          arr.push({
            sj: this.initia_arr[i].initia_input.age,
          });
          if (arr.length == this.initia_arr.length) {
            this.$emit("initia", arr);
            this.disableds = false;
          }
        } else {
          this.$message({
            message: "请输入分值",
            type: "warning",
          });
          return;
        }
      }
    },
  },
};
</script>

<style>
.el-form-item__label {
  text-align: left;
}
.initialPoint {
  margin-left: 30px;
}
.initia_mark {
  background: #409eff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  margin-left: 4px;
  cursor: default;
}
.initia_title {
  font-size: 20px;
  color: rgba(48, 49, 51, 1);
  padding-top: 30px;
  font-family: PingFangSC-Regular;
}
.initia_title_1 {
  color: #606266;
  font-size: 14px;
  margin-top: 10px;
}
.nitia_list_input {
  width: 160px;
  height: 40px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
}
</style>