考勤统计的列表联调+表头动态数据重组的逻辑处理+详情数据的重组问题+更新考勤的接口联调

haoxuan

2024-04-23 9ad048e36bef6d735bf0ef0c12698696e7d5100b

 src/views/employeeSalary/attendanceStatistics/components/AttendanceStatisticsDetails.vue

@@ -4,75 +4,80 @@
    <div slot="title" class="tac drawerHeader">详情</div>
    <div class="dialog-content-box">
      <el-form class="form-box" ref="form" :rules="rules" :model="form" label-width="140px" label-position="right">
        <el-form-item label="员工姓名：" prop="id">
          {{ form.name }}
        <el-form-item label="员工姓名：" prop="workerName">
          {{ form.workerName ||'--'}}
        </el-form-item>
        <el-form-item label="员工ID：" prop="isCore">
          {{ form.name }}
        <el-form-item label="员工ID：" prop="workerId">
          {{ form.workerId||'--' }}
        </el-form-item>
        <el-form-item label="工种：" prop="id">
          {{ form.name }}
        <el-form-item label="工种：" prop="workType">
          {{ form.workType||'--' }}
        </el-form-item>
        <el-form-item label="考勤日期：" prop="isCore">
          {{ form.name }}
        <el-form-item label="考勤日期：" prop="month">
          {{ form.month||'--' }}
        </el-form-item>
        <el-form-item label="状态：" prop="id">
        <el-form-item label="状态：" prop="status">
          <template v-if="!isEditOne">
            <i  class="el-icon-circle-check cursor_pointer font_size_20 color_67c23a"></i>
           {{ form.name }}
            <i  v-if='form.status==1' class="el-icon-circle-check cursor_pointer font_size_20 color_67c23a"></i>
           <span :class="getClassName(form.status)">
            {{ getAttendanceStatus(form.status) }}
            </span>
           <i @click="editOneClick" class="el-icon-edit-outline cursor_pointer font_size_20"></i>
          </template>
          <template v-else>
            <el-select v-model="form.phoneNum" filterable placeholder="请选择"  class="margin_right_15px" style="width: calc(100% - 80px)">
            <el-option v-for="item in DeviceList" :key="item.id" :label="item.name" :value="item.id">
            <el-select v-model="form.status" filterable placeholder="请选择"  class="margin_right_15px" style="width: calc(100% - 120px)">
            <el-option v-for="item in attendanceStatusList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
              <el-button type="text" @click="submitEditOneClick('form')">确定</el-button>
              <el-button type="text" @click="cancelEditClick('isEditOne')">取消</el-button>
          </template>
        </el-form-item>
        <el-form-item label="上班打卡时间：" prop="isCore">
          {{ form.name }}
        <el-form-item label="上班打卡时间：" prop="startWorkTime">
          {{ form.startWorkTime||'--' }}
        </el-form-item>
        <el-form-item label="下班打卡时间：" prop="id">
          {{ form.name }}
        <el-form-item label="下班打卡时间：" prop="endWorkTime">
          {{ form.endWorkTime||'--' }}
        </el-form-item>
        <el-form-item label="班次：" prop="isCore">
          {{ form.name }}
        <el-form-item label="班次：" prop="classes">
          {{ form.classes ||'--'}}
        </el-form-item>
        <el-form-item label="班次开始时间：" prop="id">
          {{ form.name }}
        <el-form-item label="班次开始时间：" prop="classesStartTime">
          {{ form.classesStartTime ||'--'}}
        </el-form-item>
        <el-form-item label="班次结束时间：" prop="isCore">
          {{ form.name }}
        <el-form-item label="班次结束时间：" prop="classesEndTime">
          {{ form.classesEndTime||'--' }}
        </el-form-item>
        <el-form-item label="工作日加班时长：" prop="id">
        <el-form-item label="工作日加班时长：" prop="weekdayOverTime">
          <template v-if="!isEditTwo">
           {{ form.name }}
           {{ form.weekdayOverTime }}
           <i @click="editTwoClick" class="el-icon-edit-outline cursor_pointer font_size_20"></i>
          </template>
          <template v-else>
            <el-input
                v-model.number="form.produceAheadDay"
                v-model.number="form.weekdayOverTime"
                maxlength="20"
                style="width: calc(100% - 80px)"
                style="width: calc(100% - 120px)"
                clearable
                placeholder="请输入"
                class="margin_right_15px"
              ></el-input>
              <el-button type="text" @click="submitEditTwoClick('form')">确定</el-button>
              <el-button type="text" @click="cancelEditClick('isEditTwo')">取消</el-button>
          </template>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer tac">
      <el-button type="cancel" @click="cancelMethod()">取消</el-button>
      <el-button type="primary" @click="submitForm('form')">确定</el-button>
      <el-button type="cancel" @click="cancelMethod()">关闭</el-button>
      <!-- <el-button type="primary" @click="submitForm('form')">确定</el-button> -->
    </div>
  </el-dialog>
</template>

<script>
import { getDeleteFollowRecord } from "@/api/employeeManage/employeeInfo.js"
import { updateAttendance } from "@/api/employeeSalary/attendanceManage.js"
import { getDataByType } from "@/api/data"
export default {
  props: {
    editRow: {
@@ -89,23 +94,9 @@
      },
      isEditOne:false,
      isEditTwo:false,
      DeviceList:[],
      attendanceStatusList: getDataByType("attendanceStatus"),
      rules: {
        id: [
          {
            required: true,
            message: "请输入人员姓名",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入员工编码",
            trigger: ["blur", "change"],
          },
        ],
        produceAheadDay: [
        weekdayOverTime: [
          {
            required: false,
            message: "请输入",
@@ -132,38 +123,64 @@
    },
  },
  methods: {
    getAttendanceStatus(val){
      let string = "";
      if (val) {
        for (let i in this.attendanceStatusList) {
          if (this.attendanceStatusList[i].id == val) {
            string = this.attendanceStatusList[i].value;
          }
        }
      }
      return string;
    },
    getClassName(val){
      let classname=''
       // 1==正常 2===加班 3==休假 4===异常
      if(val==1){
        classname = "color_67c23a";
      }else if(val==2){
        classname = "color_FF9900 ";
      }else if(val==3){
        classname = "color_333";
      }else if(val==4){
        classname = "color_red";
      }
      return classname
    },
    editOneClick(){
      this.isEditOne=true
    },
    submitEditOneClick(){
      this.isEditOne=false
      this.submitForm('form','isEditOne')
    },
    editTwoClick(){
      this.isEditTwo=true
    },
    submitEditTwoClick(){
      this.isEditTwo=false
      this.submitForm('form','isEditTwo')
    },
    formInfo() {
      if (this.islook) {
        this.form = {
          isCore: "",
          id: "",
        };
        this.form = {};
        this.$nextTick(()=>{
          this.$refs["form"].resetFields();
          if (this.editRow.id) {
          if (this.editRow.workerId) {
            this.form = JSON.parse(JSON.stringify(this.editRow));
          }
        })
      }
    },
    cancelEditClick(name){
      this[name]=false
      this.formInfo()
    },
    validatorNum(rule, value, callback) {
      if (value) {
      if (value&&this.isEditTwo) {
        if (value == undefined || value == null) {
          callback(new Error("请输入有效数字"));
        } else {
          var reg = /^\+?[0-9]\d*$/;
          var reg = /^\+?[1-9]\d*$/;
          if (!reg.test(value)) {
            callback(new Error("请填写不小于0的数字"));
          } else {
@@ -178,31 +195,28 @@
      this.$refs["form"].resetFields();
      this.islook = false;
    },
    submitForm(formName) {
    submitForm(formName,name) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form));
          if (this.editRow.type == "add") {
            getDeleteFollowRecord(form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "添加成功！",
                  type: "success",
                });
                this.cancelMethod();
              }
            });
          } else {
            getDeleteFollowRecord(form).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "编辑成功！",
                  type: "success",
                });
                this.cancelMethod();
              }
            });
          let day=(Number(form.dateDay)<10)?'0'+form.dateDay:form.dateDay
          let params={
            date:form.month+'-'+day,
            overTimeDuration:Number(form.weekdayOverTime),
            status:form.status,
            workerId:form.workerId
          }
            updateAttendance(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "操作成功！",
                  type: "success",
                });
                this[name]=false
                this.$emit('shutdown')
                this.cancelMethod();
              }
            });
        } else {
          console.log('error submit!!');
          return false;