mes-web/src/view/pdm/ws-clock/clock-user.vue

<!-- @desc:工位打卡  @auth:周兴  @time:2023/3/15 17:03 -->
<template>
  <div class="main-div" ref="mainDiv">
    <!--加载中-->
    <loading :loading="loading" v-if="!modalVisible"></loading>
    <DkCollapse ref="collapse" @on-change="changeCollapse">
      <DkPanel prop="wsClockInformation">
        <!--  下拉区域  -->
        <DkForm slot="content" ref="formInline" v-model="formData" style="width: 95%">
          <!-- 工位编码-->
          <DkFormItem prop="stationCode">
            <SelectPop v-model="formData.stationId" :multiple="false" :options="stationList" ref="roleName"
                       @on-select="chooseStation"
                       labelKey="stationCode"
                       valueKey=stationId>
            </SelectPop>
          </DkFormItem>
          <!-- 工位名称-->
          <DkFormItem prop="stationName">
            <InputPop ref="stationName" :readonly="true" v-model="formData.stationName"/>
          </DkFormItem>
        </DkForm>
      </DkPanel>
      <!-- 打卡明细-->
      <DkPanel prop="wsClockItemInformation">
        <EditTable slot="content" ref="editTableWsClockItem" name="table"
                   :height="tableHeight"
                   major-field="staffId"
                   :enabledRepeat=false
                   controlId="jobId"
                   :operate-flag="false"
                   :auto-next-flag="false"
                   :id="'table-'+$options.name"
                   :columns="editTableColumn"
                   :data="formData.wsClockItemList"
                   @current-change="currentChange"
                   @chooseData="chooseData"
        ></EditTable>
      </DkPanel>
    </DkCollapse>

    <!--      下部分按钮区域-->
    <DkSaveButton ref="saveButton" :loading="loading" :viewFlag="true" @save="save" @close="closeForm">
      <DkButton ref="saveWork" type="primary"
                @click="save(true)" style="margin-right: 10px;" :loading="loading">{{ $t('saveWork') }}
      </DkButton>
      <DkButton ref="saveOffWork" type="primary"
                @click="save(false)" style="margin-right: 10px;" :loading="loading">{{ $t('saveOffWork') }}
      </DkButton>
    </DkSaveButton>
  </div>
</template>

<script>
import {formMixin} from "@/mixins/form";
import {getTagNavListFromLocalstorage} from "@/libs/base/util";

export default {
  name: "ws-clock-user",
  mixins: [formMixin],
  data() {
    let self = this
    return {
      formData: {
        userId: this.$store.state.user.id,//工号id
        stationId: '',//工位id
        stationName: '',//工位名称
        wsClockItemList: [], //打卡明细
      },
      stationList: [],//工位数据
      jobList: [],//工种数据
      rowIndex: 0,//打卡明细选中行
      editTableColumn: [
        // 工种名称
        {field: 'jobName', type: 'disabled', width: '255'},
        // 业务员
        {
          field: 'staffName',
          width: 255,
          sortBoolean: false,
          multiple: false,
          type: 'tableSelect',
          param: () => {
            return {
              jobId: (self.formData.wsClockItemList && self.formData.wsClockItemList[self.rowIndex])
                ? parseInt(self.formData.wsClockItemList[self.rowIndex].jobId) : null,
              staffUserId: this.$store.state.user.id
            }
          },
          dataType: self.$config.tableSelectType.staff,
          fieldUpdate: self.$updateColumns.userChooseStaff,
          searchDetailFlag: false
        },
        // 替班员工
        {
          field: 'replaceStaffName',
          width: 255,
          sortBoolean: false,
          multiple: false,
          type: 'tableSelect',
          dataType: self.$config.tableSelectType.staff,
          fieldUpdate: self.$updateColumns.userChooseReplaceStaff,
          searchDetailFlag: false
        },
      ],
    }
  },
  methods: {

    //region 获取数据源
    /**
     * @desc   : 获取工位
     * @author : 夏常明
     * @date   : 2023/3/1 15:37
     */
    getStationList() {
      let params = {
        ftyId: this.$store.state.user.ftyId,
        userId: this.$store.state.user.id,//工号id
      }
      this.excute(this.$service.commonService, this.$service.commonService.getWsStationByUser, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {

          this.stationList = res.data;
          //工位数量为1 默认选中
          if (this.stationList.length == 1) {
            this.formData.stationId = this.stationList[0].stationId;
            this.formData.stationName = this.stationList[0].stationName;
          }
        }
      })
    },
    /**
     * @desc   : 获取工种
     * @author : 夏常明
     * @date   : 2023/3/1 15:40
     */
    getJobList() {
      let params = {
        ftyId: this.$store.state.user.ftyId,
        userId: this.$store.state.user.id,//工号id
      }
      this.excute(this.$service.commonService, this.$service.commonService.getWorkTeamByUserId, params).then(res => {
        if (res.code === this.$config.SUCCESS_CODE) {
          this.formData.wsClockItemList = res.data;
        }
      })
    },
    /**
     * @desc   : 工位选中改变事件
     * @author : 夏常明
     * @date   : 2023/3/1 16:14
     */
    chooseStation(val) {
      if (val) {
        let row = this.stationList.find(item => item.stationId == val);
        this.formData.stationName = row.stationName
      } else {
        this.formData.stationName = '';
      }

    },

    //endregion

    //region 触发事件
    /**
     * @desc   : 打卡明细行切换时间
     * @author : 夏常明
     * @date   : 2023/2/27 17:14
     */
    currentChange(e) {
      this.rowIndex = 0
      this.rowIndex = e.rowIndex
    },
    /**
     * @desc   : 选择数据
     * @author : 周兴
     * @date   : 2023/3/1 15:34
     */
    chooseData(row, rowIndex, colItem) {
      // 如果选择员工需要清空替班，选择替班需要清空员工
      if (colItem.field === 'staffName') {
        this.$set(this.formData.wsClockItemList[rowIndex], 'replaceStaffId', null);
        this.$set(this.formData.wsClockItemList[rowIndex], 'replaceStaffName', null)
      } else if (colItem.field === 'replaceStaffName') {
        this.$set(this.formData.wsClockItemList[rowIndex], 'staffId', null);
        this.$set(this.formData.wsClockItemList[rowIndex], 'staffName', null)
      }
    },
    /**
     * @desc   : 校验数据是否全
     * @author : 周兴
     * @date   : 2023/2/2 15:57
     */
    validData(flag) {
      if (flag) {
        let table = this.$refs.editTableWsClockItem.getTableData();
        // 判断是否有打卡明细信息
        if (!table || table.length === 0) {
          this.$Message.warning(this.$t('W_103'))
          return false;
        }
        for (let i = 0; i < table.length; i++) {
          // 员工和替班员工需要 二选一
          if (!table[i].staffId && !table[i].replaceStaffId) {
            this.$Message.warning(this.$t('W_107', {'param1': (i + 1)}))
            this.setErrToRow(table[i], this.$t('W_108'));// 给行增加错误提示信息
            return false;
          }
        }
      }

      return true;
    },
    /**
     * @desc   : 保存数据
     * @author : 夏常明
     * @date   : 2023/3/2 8:35
     */
    saveData(flag) {
      if (flag) {
        return this.excute(this.$service.wsClockService, this.$service.wsClockService.insert, this.params)
      } else {
        let params = {
          userId: this.$store.state.user.id,
        }
        return this.excute(this.$service.wsClockService, this.$service.wsClockService.saveOffWork, params)
      }

    },
    /**
     * @desc   : 给参数赋值
     * @author : 姜宁
     * @date   : 2023/2/1 15:28
     */
    setParams() {
      this.params = {...this.formData}
      //装载区域
      this.params.wsClockItemList = this.$refs.editTableWsClockItem.getTableData();
      this.params.wsClockItemList.forEach(it => {
        if (!it.staffId) {
          it.staffId = it.replaceStaffId;
          it.userId = this.$store.state.user.id;
          it.stationId = this.formData.stationId;
        }
      })
    },
    /**
     * @desc   : 关闭窗体
     * @author : 周兴
     * @date   : 2023/3/15 17:11
     */
    closeForm() {
      this.close();
      this.$nextTick(() => {
        // 跳转到首页
        if (!this.$store.state.app.tagNavList || this.$store.state.app.tagNavList.length === 0) {
          this.$router.push({name: this.$config.homeName})
        }
      })
    },
    //endregion

  },
  /**
   * @desc   : 在实例创建完成后被立即同步调用
   * @author : 周兴
   * @date   : 2022/3/3 10:32
   */
  created() {
    this.getStationList();//获取工位
    this.getJobList();//获取工位
    this.resizeTableFlag = true;  // 计算表格高度
  },
}
</script>

<style scoped>

</style>