Merge remote-tracking branch 'origin/master'

cuilei

2025-06-13 1e653db94c24389cc7615fd4a7ef1d63b00af534

 src/views/dnc/base/modules/TerminalIndex/EquipmentStartWork.vue

@@ -4,124 +4,194 @@

    <a-tabs default-active-key="1">
      <a-tab-pane tab="打卡上下班" key="1" dataset="first">
        <a-space>
          <div>设备名称：</div>
          <a-select style="width: 250px">
        <a-form-model ref="form" :model="model" :rules="validateRules" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="设备名称" prop="equipmentIdList">
                <a-select v-model="model.equipmentIdList" mode="multiple" placeholder="请选择设备" :maxTagCount="3"
                          allow-clear>
                  <a-select-option v-for="item in equipmentList" :key="item.equipmentId">
                    {{item.equipmentId+`[${item.equipmentName}]`}}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>

          </a-select>
        </a-space>
          <div style="text-align: center;margin-top: 150px">
            <a-space>
              <a-button size="large" type="primary" @click="handleClockInAndOut('In',1)" :loading="clockInLoading1"
                        :disabled="clockOutLoading1||clockInLoading2||clockOutLoading2">早班上班
              </a-button>
              <a-button size="large" type="primary" @click="handleClockInAndOut('Out',1)" :loading="clockOutLoading1"
                        :disabled="clockInLoading1||clockInLoading2||clockOutLoading2">
                早班下班
              </a-button>
              <a-button size="large" type="primary" @click="handleClockInAndOut('In',2)" :loading="clockInLoading2"
                        :disabled="clockOutLoading1||clockInLoading1||clockOutLoading2">晚班上班
              </a-button>
              <a-button size="large" type="primary" @click="handleClockInAndOut('Out',2)" :loading="clockOutLoading2"
                        :disabled="clockOutLoading1||clockInLoading2||clockInLoading1">
                晚班下班
              </a-button>
            </a-space>
          </div>
        </a-form-model>


        <div class="button">上班</div>
      </a-tab-pane>

      <a-tab-pane tab="当前设备状态" key="2">
        <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false"/>
        <a-table :dataSource="dataSource" :columns="columns" rowKey="id" bordered :pagination="false"
                 :loading="loading"/>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction, postAction } from '@/api/manage'
  import moment from 'moment'

  export default {
    name: 'EquipmentStartWork',
    mixins: [JeecgListMixin],
    data() {
      return {
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        equipmentList: [],
        columns: [
          {
            title: '用户编号',
            align: 'center',
            dataIndex: 'userId'
            dataIndex: 'punchUserUserName',
            width: 250
          },
          {
            title: '用户名称',
            align: 'center',
            dataIndex: 'username'
            dataIndex: 'punchUserRealName'
          },
          {
            title: '设备编号',
            align: 'center',
            dataIndex: 'equipmentId'
            dataIndex: 'equipmentId',
            width: 200
          },
          {
            title: '班次',
            align: 'center',
            dataIndex: 'shiftScheduleName',
            width: 150
          },
          {
            title: '上班打卡时间',
            align: 'center',
            dataIndex: 'startWorkTime'
            dataIndex: 'checkInTime'
          },
          {
            title: '下班打卡时间',
            align: 'center',
            dataIndex: 'finishWorkTime'
            dataIndex: 'checkOutTime'
          }
        ],
        dataSource: [
          {
            id: 1,
            equipmentId: '3140132',
            userId: '140016',
            username: '李骞',
            startWorkTime: '2023/11/13 9:29',
            finishWorkTime: ''
          },
          {
            id: 2,
            equipmentId: '3140130',
            userId: '140016',
            username: '李骞',
            startWorkTime: '2023/11/13 9:29',
            finishWorkTime: ''
          }
        ],
        validateRules: {
          equipmentIdList: [
            { required: true, message: '请选择设备!', trigger: 'change' }
          ]
        },
        clockInLoading1: false,
        clockOutLoading1: false,
        clockInLoading2: false,
        clockOutLoading2: false,
        url: {
          list: ''
          equipmentList: '/mdc/mdcEquipment/getEquipmentList',
          clockIn: '/mdcEquipmentPunch/workUp',
          clockOut: '/mdcEquipmentPunch/workDown',
          list: '/mdcEquipmentPunch/list'
        }
      }
    },
    created() {
      this.getEquipmentListByApi()
    },
    methods: {
      // 获取设备列表
      getEquipmentListByApi() {
        const that = this
        getAction(this.url.equipmentList)
          .then(res => {
            if (res.success) that.equipmentList = res.result
          })
      },

      /**
       * 打卡上下班事件
       * @param clockInOrOut In为上班 Out为下班
       * @param shiftSchedule 1为早班 2为晚班
       */
      handleClockInAndOut(clockInOrOut, shiftSchedule) {
        const that = this
        this.$refs.form.validate(valid => {
          if (valid) {
            that['clock' + clockInOrOut + 'Loading' + shiftSchedule] = true
            that.queryParam = {}
            that.queryParam['shiftSchedule'] = shiftSchedule
            that.queryParam['check' + clockInOrOut + 'Time'] = moment().format('YYYY-MM-DD HH:mm:ss')
            that.queryParam.equipmentId = that.model.equipmentIdList.join()
            console.log('queryParam', that.queryParam)

            postAction(that.url['clock' + clockInOrOut], that.queryParam)
              .then(res => {
                console.log('res', res)
                if (res.success) {
                  that.$notification.success({
                    message: '消息',
                    description: res.message
                  })
                  that.loadData()
                } else {
                  that.$notification.warning({
                    message: '消息',
                    description: res.message
                  })
                }
              })
              .finally(() => {
                that['clock' + clockInOrOut + 'Loading' + shiftSchedule] = false
              })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .full-screen-container {
    padding: 24px;
  /deep/ .ant-tabs {
    flex: 1;
    display: flex;
    flex-direction: column;

    /deep/ .ant-tabs {
    .ant-tabs-content {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;

      .ant-tabs-content {
        width: 100%;
        flex: 1;

        .ant-tabs-tabpane[dataset='first'] {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .button {
            font-weight: bold;
            padding: 40px 80px;
            border: 1px solid rgba(0, 0, 0, .2);
            border-radius: 10px;
            margin-top: 200px;
            cursor: pointer;
            box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.2),
              -6px -6px 16px rgba(255, 255, 255, 0.8),
            inset 0 0 0 transparent;

            &:hover {
              box-shadow: 0 0 0 transparent,
              inset 6px 6px 12px rgba(0, 0, 0, 0.2),
                inset -6px -6px 12px rgba(255, 255, 255, 0.8);
            }
          }
        }
      .ant-tabs-tabpane[dataset='first'] {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }