完成日工时管理，辅助工时配置页面

licp

2024-05-10 003a8f7289388e2c7697a6329991b405598183f9

完成日工时管理，辅助工时配置页面

 src/assets/api/controller.js

@@ -23,6 +23,7 @@
    sealScope,
    informationNotification,
    performanceShift,
    auxiliaryWorkingHours,
    }
}

@@ -260,6 +261,13 @@
const performanceShift = {
  add:"/performanceShift/add",//绩效管理-班次-排班
  page:"/performanceShift/page",//绩效管理-班次-分页查询
  update:"/performanceShift/update/",//绩效管理-班次-班次状态修改
  update:"/performanceShift/update",//绩效管理-班次-班次状态修改
}

const auxiliaryWorkingHours = {
  selectAuxiliaryWorkingHours:"/auxiliaryWorkingHours/selectAuxiliaryWorkingHours",//查询辅助工时
  deleteAuxiliaryWorkingHours:"/auxiliaryWorkingHours/deleteAuxiliaryWorkingHours",//删除辅助工时
  upAuxiliaryWorkingHours:"/auxiliaryWorkingHours/upAuxiliaryWorkingHours",//修改辅助工时
  insertAuxiliaryWorkingHours:"/auxiliaryWorkingHours/insertAuxiliaryWorkingHours",//新增辅助工时
}


 src/components/do/b3-work-time-management/work-time-config.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,206 @@
<template>
  <div class="work-time-config">
    <div class="search">
      <div class="search_thing">
                <div class="search_label">编号：</div>
                <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                        v-model="componentData.entity.number" @keyup.enter.native="refreshTable()"></el-input></div>
            </div>
            <div class="search_thing">
                <div class="search_label">实验室：</div>
                <el-select v-model="componentData.entity.laboratory" placeholder="全部" size="small">
                    <el-option v-for="item in laboratoryList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search_thing">
                <div class="search_label">部门：</div>
                <div class="search_input">
          <el-select v-model="componentData.entity.department" placeholder="全部" size="small">
                      <el-option v-for="item in partList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
            </div>
            <div class="search_thing" style="padding-left: 30px;">
                <el-button size="small" @click="refresh()">重 ç½®</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
            </div>
      <el-button size="small" type="primary" style="position: absolute;right: 50px;" @click="openAdd">新 å¢ž</el-button>
        </div>
    <div class="table">
      <ValueTable ref="ValueTable0"
                :url="$api.auxiliaryWorkingHours.selectAuxiliaryWorkingHours" :upUrl="$api.auxiliaryWorkingHours.upAuxiliaryWorkingHours"
                :delUrl="$api.auxiliaryWorkingHours.deleteAuxiliaryWorkingHours" :componentData="componentData" :key="upIndex" />
    </div>
  </div>
</template>

<script>
import { number } from 'echarts'
import ValueTable from '../../tool/value-table.vue'
export default {
  components: {
    ValueTable
  },
  data () {
    return{
      componentData: {
                    entity: {
                        number: null,
                        department: null,
                        laboratory: null,
                        orderBy: {
                            field: 'id',
                            order: 'desc'
                        }
                    },
                    isIndex: true,
                    showSelect: false,
                    select: true,
                    do: [{
                        id: 'delete',
                        font: '删除',
                        type: 'text',
                        method: 'doDiy'
                    }, {
                        id: 'update',
                        font: '编辑',
                        type: 'text',
                        method: 'doDiy'
                    }],
                    tagField: {
                        laboratory: {
                            select: []
                        },
                        label: {
                            select: []
                        },
                        // department: {
                        //     select: []
                        // },
                    },
                    linkEvent: {
                    },
                    selectField: {
                        laboratory: {
                            select: []
                        },
                        label: {
                            select: []
                        },
                        // department: {
                        //     select: []
                        // },
                    },
                    requiredAdd: ['number','auxiliaryProject','laboratory','label','approvedWorkingHour','department'],
                    requiredUp: ['number','auxiliaryProject','laboratory','label','approvedWorkingHour','department']
            },
      entityCopy: {},
            upIndex: 0,
      laboratoryList:[],
      partList:[],
      addPower:true
    }
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.componentData.entity)
    this.getPower()
    this.obtainItemParameterList()
    this.selectEnumByCategoryForUnit()
  },
  methods: {
    refresh(){
      this.componentData.entity = this.HaveJson(this.entityCopy)
                this.upIndex++
    },
    refreshTable(){
      this.$refs['ValueTable0'].selectList()
    },
    getPower(radio) {
                let power = JSON.parse(sessionStorage.getItem('power'))
                let up = false
                let del = false
                let add = false
                for (var i = 0; i < power.length; i++) {
                    if (power[i].menuMethod == 'upDeviceParameter') {
                        up = true
                    }
                    if (power[i].menuMethod == 'delDeviceParameter') {
                        del = true
                    }
                    if (power[i].menuMethod == 'addDeviceParameter') {
                        add = true
                    }
                }
                if (!up) {
                    this.componentData.do.splice(1, 1)
                }
                if (!del) {
                    this.componentData.do.splice(0, 1)
                }
                this.addPower = add
        },
    openAdd() {
      this.$refs.ValueTable0.openAddDia(this.$api.auxiliaryWorkingHours.insertAuxiliaryWorkingHours);
    },
    obtainItemParameterList() {
      this.$axios.get(this.$api.laboratoryScope.obtainItemParameterList).then(res => {
        let data = []
        res.data.forEach(a => {
          data.push({
            label: a.laboratoryName,
            value: a.id
          })
        })
        this.laboratoryList = data
        this.componentData.selectField.laboratory.select = data
        this.componentData.tagField.laboratory.select = data
      })
    },
    selectEnumByCategoryForUnit() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "单位"
      }).then(res => {
        this.componentData.selectField.label.select = res.data
        this.componentData.tagField.label.select = res.data
      })
    },
  }
}
</script>

<style scoped>
.work-time-config{
  height: 100%;
}
.search {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .search_thing {
        width: 250px;
        display: flex;
        align-items: center;
    }

    .search_label {
        width: 70px;
        font-size: 14px;
        text-align: right;
    }

    .search_input {
        width: calc(100% - 70px);
    }
  .table {
        margin-top: 10px;
        background-color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 60px - 80px - 10px - 40px);
        padding: 20px;
    }
</style>

 src/components/do/b3-work-time-management/work-time-management.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,538 @@
<template>
  <div class="work-time-management">
    <div class="search">
      <div class="search_thing">
                <div class="search_label">周次：</div>
                <div class="search_input" style="display: flex;align-items: center;">
          <el-input size="small" placeholder="开始周次" clearable
                        v-model="componentData.entity.number"></el-input>
            <span>&nbsp;-&nbsp;</span>
          <el-input size="small" placeholder="结束周次" clearable
                        v-model="componentData.entity.number"></el-input>
        </div>
            </div>
            <div class="search_thing" style="width: 200px;">
                <div class="search_label">星期：</div>
                <el-select v-model="componentData.entity.laboratory" placeholder="全部" size="small">
                    <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search_thing">
                <div class="search_label">时间范围：</div>
                <div class="search_input">
          <el-date-picker
            style="width: 100%;"
            v-model="componentData.entity.number"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
            </div>
      <!-- ä»¥ä¸‹è¿™ä¸¤ä¸ªä¸ºç»„长角色特有的 -->
      <div class="search_thing" style="width: 200px;">
                <div class="search_label" >名字：</div>
                <el-input size="small" placeholder="请输入" clearable
                        v-model="componentData.entity.number"></el-input>
            </div>
      <div class="search_thing" style="width: 200px;">
                <div class="search_label">状态：</div>
                <el-select v-model="componentData.entity.laboratory" placeholder="全部" size="small">
                    <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search_thing" style="padding-left: 30px;width: 100px;">
                <el-button size="small" @click="refresh()">重 ç½®</el-button>
                <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
            </div>
        </div>
    <div style="display: flex;align-items: center;justify-content: space-between;margin-top: 10px;">
      <el-radio-group v-model="currentTable" size="small" :key="'111'">
        <el-radio-button label="ValueTable0">
          è¾…助工时
        </el-radio-button>
        <el-radio-button label="ValueTable1">
          äº§é‡å·¥æ—¶
        </el-radio-button>
      </el-radio-group>
      <div style="display: flex;align-items: center;">
        <p style="font-size: 14px;margin-right: 30px;">
        äº§é‡å·¥æ—¶æ±‡æ€»ï¼š<span style="font-size: 16px;color: #3A7BFA;">11.333</span>&nbsp;&nbsp;&nbsp;&nbsp;辅助工时汇总：<span style="font-size: 16px;color: #3A7BFA;">12.333</span>
        </p>
        <el-button size="small" type="primary" style="margin-right: 16px;" @click="openAdd">录入数据</el-button>
        <el-button size="small" type="primary">导 å‡º</el-button>
      </div>
    </div>
    <div class="table">
      <ValueTable ref="ValueTable0"
        v-show="currentTable == 'ValueTable0'"
                :url="$api.auxiliaryWorkingHours.selectAuxiliaryWorkingHours" :upUrl="$api.auxiliaryWorkingHours.upAuxiliaryWorkingHours"
                :delUrl="$api.auxiliaryWorkingHours.deleteAuxiliaryWorkingHours" :componentData="componentData" :key="upIndex" />
      <ValueTable ref="ValueTable1"
      v-show="currentTable == 'ValueTable1'"
                :url="$api.auxiliaryWorkingHours.selectAuxiliaryWorkingHours" :upUrl="$api.auxiliaryWorkingHours.upAuxiliaryWorkingHours"
                :delUrl="$api.auxiliaryWorkingHours.deleteAuxiliaryWorkingHours" :componentData="componentData1" :key="upIndex1" />
    </div>
    <el-dialog :title="formData.id?'编辑':'录入数据'" :visible.sync="addVisible" width="600px" :before-close="handleClose">
            <el-row style="display:flex;justify-content: space-around;">
                <el-col :span="12">
                    <el-form :model="formData" label-width="90px">
            <el-form-item label="录入时间:">
              <el-radio-group v-model="formData.value0" size="small">
                <el-radio :label="0">今天</el-radio>
                <el-radio :label="1">明天</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年份:">
              <el-input v-model="formData.year" disabled size="small"></el-input>
            </el-form-item>
            <el-form-item label="周次:">
              <el-input v-model="formData.value2" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="星期:">
              <el-input v-model="formData.value3" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="班次:">
              <el-input v-model="formData.value4" size="small" disabled></el-input>
            </el-form-item>
          </el-form>
                </el-col>
        <el-col :span="12">
                    <el-form :model="formData" label-width="90px">
            <el-form-item label="编号:">
              <el-input v-model="formData.value5" size="small"></el-input>
            </el-form-item>
            <el-form-item label="数量:">
              <el-input v-model="formData.value6" size="small" ></el-input>
            </el-form-item>
            <el-form-item label="核准工时:">
              <el-input v-model="formData.value7" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="辅助工时:">
              <el-input v-model="formData.value8" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="辅助项目:">
              <el-input v-model="formData.value9" size="small" disabled></el-input>
            </el-form-item>
          </el-form>
                </el-col>
            </el-row>
      <el-form :model="formData" label-width="90px">
        <el-form-item label="辅助说明:">
          <el-input v-model="formData.value10" type="textarea"
  :rows="3" size="small"></el-input>
        </el-form-item>
      </el-form>
            <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-button @click="handleClose">取 æ¶ˆ</el-button>
                    <el-button type="primary" @click="submitAdd" :loading="addLoad">ç¡® å®š</el-button>
                </el-row>
            </span>
        </el-dialog>
    <el-dialog :title="title" :visible.sync="checkVisible" width="600px">
            <el-row style="display:flex;justify-content: space-around;">
                <el-col :span="12">
                    <el-form :model="formData0" label-width="90px">
            <el-form-item label="年份:">
              <el-input v-model="formData0.year" size="small"></el-input>
            </el-form-item>
            <el-form-item label="周次:">
              <el-input v-model="formData0.value2" size="small"></el-input>
            </el-form-item>
            <el-form-item label="星期:">
              <el-input v-model="formData0.value3" size="small"></el-input>
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input v-model="formData0.value4" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="班次:">
              <el-select v-model="formData0.value4" placeholder="请选择" size="small">
                <el-option v-for="item in classType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
                </el-col>
        <el-col :span="12">
                    <el-form :model="formData0" label-width="90px">
            <el-form-item label="编号:">
              <el-input v-model="formData0.value5" size="small"></el-input>
            </el-form-item>
            <el-form-item label="数量:">
              <el-input v-model="formData0.value6" size="small" ></el-input>
            </el-form-item>
            <el-form-item label="核准工时:">
              <el-input v-model="formData0.value7" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="辅助工时:">
              <el-input v-model="formData0.value8" size="small" disabled></el-input>
            </el-form-item>
            <el-form-item label="辅助项目:">
              <el-input v-model="formData0.value9" size="small" disabled></el-input>
            </el-form-item>
          </el-form>
                </el-col>
            </el-row>
      <el-form :model="formData0" label-width="90px">
        <el-form-item label="复核说明:">
          <el-input v-model="formData0.value10" type="textarea"
  :rows="3" size="small"></el-input>
        </el-form-item>
      </el-form>
            <span slot="footer" class="dialog-footer">
                <el-row>
                    <el-button @click="submitCheck(0)" :loading="checkLoadN">{{title=='审核'?'不通过':'不批准'}}</el-button>
                    <el-button type="primary" @click="submitCheck(1)" :loading="checkLoadY">{{title=='审核'?'通 è¿‡':'批 å‡†'}}</el-button>
                </el-row>
            </span>
        </el-dialog>
  </div>
</template>

<script>
import ValueTable from '../../tool/value-table.vue'
export default {
  components: {
    ValueTable
  },
  data () {
    return{
      componentData: {
                    entity: {
                        number: null,
                        department: null,
                        laboratory: null,
                        orderBy: {
                            field: 'id',
                            order: 'desc'
                        }
                    },
                    isIndex: true,
                    showSelect: false,
                    select: false,
                    do: [{
                        id: 'delete',
                        font: '删除',
                        type: 'text',
                        method: 'doDiy'
                    }, {
                        id: 'handleEdit',
                        font: '编辑',
                        type: 'text',
                        method: 'handleEdit'
                    },{
                        id: 'handleCheck',
                        font: '审核',
                        type: 'text',
                        method: 'handleCheck'
                    }, {
                        id: 'handleRatify',
                        font: '批准',
                        type: 'text',
                        method: 'handleRatify'
                    }],
                    tagField: {
                        deviceStatus: {
                            select: []
                        },
                        equipmentManager: {
                            select: []
                        },
                        authorizedPerson: {
                            select: []
                        },
            insProductIds:{
              select:[]
            }
                    },
                    linkEvent: {
                        deviceName: {
                            method: 'selectAllByOne'
                        }
                    },
                    selectField: {
                        authorizedPerson: {
                            select: [],
                            choose: true
                        },
                        equipmentManager: {
                            select: []
                        },
            insProductIds:{
              select:[],
              choose: true
            }
                    },
                    requiredAdd: [],
                    requiredUp: []
            },
      entityCopy: {},
            upIndex: 0,
      componentData1: {
                    entity: {
                        number: null,
                        department: null,
                        laboratory: null,
                        orderBy: {
                            field: 'id',
                            order: 'desc'
                        }
                    },
                    isIndex: true,
                    showSelect: false,
                    select: false,
                    do: [],
                    tagField: {
                        deviceStatus: {
                            select: []
                        },
                        equipmentManager: {
                            select: []
                        },
                        authorizedPerson: {
                            select: []
                        },
            insProductIds:{
              select:[]
            }
                    },
                    linkEvent: {
                        deviceName: {
                            method: 'selectAllByOne'
                        }
                    },
                    selectField: {
                        authorizedPerson: {
                            select: [],
                            choose: true
                        },
                        equipmentManager: {
                            select: []
                        },
            insProductIds:{
              select:[],
              choose: true
            }
                    },
                    requiredAdd: [],
                    requiredUp: []
            },
      upIndex1:0,
      weekList:[
        {label: '星期一', value: 1},
        {label: '星期二', value: 2},
        {label: '星期三', value: 3},
        {label: '星期四', value: 4},
        {label: '星期五', value: 5},
        {label: '星期六', value: 6},
        {label: '星期日', value: 7}
      ],
      currentTable:'ValueTable0',
      addVisible:false,
      addLoad:false,
      formData:{
        value0:0,
        year:new Date().getFullYear(),
        value2:this.getCurrentWeekNumber(),
        value3:this.getWeek(),
        value4:'',
        value5:'',
        value6:'',
        value7:'',
        value8:'',
        value9:'',
        value10:'',
      },
      formData0:{
        value0:0,
        year:new Date().getFullYear(),
        value2:this.getCurrentWeekNumber(),
        value3:this.getWeek(),
        value4:'',
        value5:'',
        value6:'',
        value7:'',
        value8:'',
        value9:'',
        value10:'',
      },
      checkVisible:false,
      checkLoadN:false,
      checkLoadY:false,
      title:'审核',
      classType:[],
      stateList:[
        {
          value:0,
          label:'已提交'
        },
        {
          value:1,
          label:'已审核'
        },
        {
          value:2,
          label:'已批准'
        },
      ]
    }
  },
  watch:{
    'formData.value0'(val){
      if(val==0){
        this.formData.year = new Date().getFullYear();
        this.formData.value2 = this.getCurrentWeekNumber()
        this.formData.value3 = this.getWeek()
      }else{
        var today = new Date(); // èŽ·å–当前日期
        var yesterday = new Date(today); // å¤åˆ¶å½“前日期
        yesterday.setDate(today.getDate() - 1); // è®¾ç½®ä¸ºå‰ä¸€å¤©
        var timestamp = new Date(yesterday.getTime());
        this.formData.year = timestamp.getFullYear();
        this.formData.value2 = this.getCurrentWeekNumber(timestamp)
        this.formData.value3 = this.getWeek(timestamp)
      }
    }
  },
  mounted(){
    this.getCurrentWeekNumber()
    this.selectEnumByCategory()
  },
  methods:{
    refreshTable(){},
    refresh(){},
    openAdd(){
      this.formData = {
        value0:0,
        year:new Date().getFullYear(),
        value2:this.getCurrentWeekNumber(),
        value3:this.getWeek(),
        value4:'',
        value5:'',
        value6:'',
        value7:'',
        value8:'',
        value9:'',
        value10:'',
      }
      this.addVisible = true
    },
    handleEdit(row){
      this.formData = row;
      this.addVisible = true
    },
    handleClose(){
      this.addVisible = false
    },
    submitAdd(){
      if(!this.formData.value5){
        this.$message.error('请输入编号')
        return
      }
      if(!this.formData.value6){
        this.$message.error('请输入数量')
        return
      }
      this.addLoad = true
    },
    handleCheck(row){
      this.title = '审核'
      this.formData0 = row;
      this.checkVisible = true
    },
    handleRatify(row){
      this.title = '批准'
      this.formData0 = row;
      this.checkVisible = true
    },
    submitCheck(e){
      if(!this.formData0.value5){
        this.$message.error('请输入编号')
        return
      }
      if(!this.formData0.value6){
        this.$message.error('请输入数量')
        return
      }
      this.checkLoadY = true
    },
    selectEnumByCategory() {
      this.$axios.post(this.$api.enums.selectEnumByCategory, {
        category: "班次类型"
      }).then(res => {
        this.classType = res.data
      })
    },
    getCurrentWeekNumber(now=new Date()) {
      const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay()); // å‘¨å¤©
      const firstWeekOfYear = new Date(startOfWeek.getFullYear(), 0, 0); // å½“年的第一个周天
      const firstWeekOfNextYear = new Date(firstWeekOfYear.getFullYear() + 1, 0, 0); // ä¸‹ä¸€å¹´çš„第一个周天
      const daysSinceNewYear = (startOfWeek - firstWeekOfYear) / (24 * 60 * 60 * 1000); // è®¡ç®—自新年以来的天数
      const weeksSinceNewYear = Math.floor(daysSinceNewYear / 7); // å¤©æ•°é™¤ä»¥7得到周数

      if (startOfWeek > now) {
        // å¦‚果当前周的周天还没到，则返回上年的最后一周
        return weeksSinceNewYear;
      } else if (firstWeekOfNextYear <= now) {
        // å¦‚果当前周的周天已经过了，则返回当年的周数
        return weeksSinceNewYear +1;
      } else {
        // å¦åˆ™è¿”回当年的最后一周
        return weeksSinceNewYear + 2;
      }
    },
    getWeek(e=new Date()){
      // let str = '日一二三四五六'
      let d = e.getDay()
      // let c = str.charAt(d)
      // return `周${c}`
      return d
    },
  }
}
</script>

<style scoped>
.work-time-management{
  height: 100%;
  overflow-y: scroll;
  /* scrollbar-width: none;  */
}
/* .work-time-management::-webkit-scrollbar {
  display: none;
} */
.search {
        background-color: #fff;
        height: 80px;
        display: flex;
        align-items: center;
    }

    .search_thing {
        width: 300px;
        display: flex;
        align-items: center;
    }

    .search_label {
        width: 70px;
        font-size: 14px;
        text-align: right;
    }

    .search_input {
        width: calc(100% - 70px);
    }
  .table {
        margin-top: 10px;
        background-color: #fff;
        width: calc(100% - 40px);
        height: calc(100% - 60px - 80px - 10px - 40px - 25px);
        padding: 20px;
    }
</style>

 src/components/do/b3-work-time-management/work-time-statistics.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
<template>
  <div class="work-time-statistics">
    å·¥æ—¶ç»Ÿè®¡
  </div>
</template>

<script>
export default {
  data () {
    return{

    }
  }
}
</script>

<style>

</style>

 src/components/view/b3-classes.vue

@@ -8,6 +8,7 @@
          v-model="query.year"
          type="year"
          size="small"
          format="yyyy"
          placeholder="选择年"
          style="width: 140px;"
          :clearable="false">
@@ -41,12 +42,12 @@
      <el-button size="small" type="primary" @click="refreshTable()">查 è¯¢</el-button>
    </div>
    <div class="search_thing btns" style="padding-left: 30px;">
      <el-button size="small" type="primary">导 å‡º</el-button>
      <el-button size="small" type="primary" @click="schedulingVisible = true">排 ç­</el-button>
      <el-button size="small" type="primary" v-if="downPower">导 å‡º</el-button>
      <el-button size="small" type="primary" @click="schedulingVisible = true" v-if="addPower">排 ç­</el-button>
    </div>
  </div>
  <div class="center" v-loading="pageLoading">
    <scroll-pagination @load="init" :finishLoding="finishLoding">
    <scroll-pagination @load="init" :finishLoding="finishLoding" v-show="query.month&&list.length>0">
      <div class="clearfix">
        <div class="fixed-left">
          <div class="content-title" style="padding-left: 16px;box-sizing: border-box;">
@@ -59,7 +60,9 @@
              <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p>
              <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早: {{ item.day0 }}, ä¸­: {{ item.day1 }}, å¤œ: {{ item.day2 }}, ä¼‘: {{ item.day3 }}, å‡: {{ item.day4 }}</p>
              <p style="margin-top: 4px;"><span style="color: #999999;font-size: 12px;display: inline-block;transform: scale(0.8) translateX(-10px);">合计出勤: </span><span style="font-size: 16px;
    color: #FF4902;">{{ item.totalAttendance }}天</span></p>
    color: #FF4902;">{{ query.month?item.monthlyAttendance
.totalAttendance:item.sidebarAnnualAttendance
.totalAttendance }}天</span></p>
            </div>
          </div>
        </div>
@@ -67,9 +70,11 @@
          <div class="content">
            <div class="content-title content-title-right" style="border-bottom: 0;">
              <div class="content-title-item" v-for="(item,index) in weeks" :key="'b'+index">
                <span class="month">{{ item.weekNum }}周</span>
                <span class="day">{{ item.day }}</span>
                <span class="week">{{ item.week }}</span>
                <span class="month" style="position: absolute;top: 4px;" v-if="item.week=='周日'">{{ item.weekNum }}周</span>
                <p style="height: 26px;position: absolute;bottom: 12px;">
                  <span class="day">{{ item.day }}</span>
                  <span class="week">{{ item.week }}</span>
                </p>
              </div>
            </div>
            <div class="content-body" v-for="(item,index) in list" :key="'c'+index"
@@ -77,11 +82,12 @@
          v-on:mouseleave="currentUserIndex=null">
              <div class="content-body-item" v-for="(m,i) in item.list" :key="'d'+i" :class="{hoverType:currentUserIndex==index}">
                <div class="work-box" :class="{type0:m.shift==='0',type1:m.shift==='1',type2:m.shift==='2',type3:m.shift==='3',type4:m.shift==='4',}">
                  <div class="work-box-left">
                  <!-- <div class="work-box-left">
                    <span>{{ getShiftByDic(m.shift) }}</span>
                  </div>
                  <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)">
                    <i class="el-icon-arrow-down el-icon--right" style="font-size: 20px;color: #fff;cursor: pointer;"></i>
                  </div> -->
                  <el-dropdown trigger="click" placement="bottom" @command="e=>handleCommand(e,m)" :disabled="!downPower">
                    <!-- <i class="el-icon-arrow-down el-icon--right" style="font-size: 20px;color: #fff;cursor: pointer;"></i> -->
                    <span style="cursor: pointer;">{{ getShiftByDic(m.shift) }}</span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-for="(n,j) in classType" :key="'h'+j" :command="n.value">{{ n.label }}</el-dropdown-item>
                    </el-dropdown-menu>
@@ -93,6 +99,56 @@
        </div>
      </div>
    </scroll-pagination>
    <scroll-pagination @load="initYear" :finishLoding="finishLoding" v-show="!query.month&&list.length>0" style="width: 100%;">
      <div class="clearfix year-table">
      <div class="fixed-left">
        <div class="content-title" style="padding-left: 16px;box-sizing: border-box;">
            äººå‘˜åç§°
        </div>
        <div class="content-user" :class="{hoverType:currentUserIndex==index}" v-for="(item,index) in list" :key="'e'+index" v-on:mouseenter="onMouseEnter(index)"
          v-on:mouseleave="currentUserIndex=null">
            <div class="user-pic">{{ item.name.charAt(0) }}</div>
            <div class="user-info">
              <p style="font-size: 14px;color: #3A7BFA;line-height: 24px;">{{ item.name }}</p>
              <p style="color: #999999;font-size: 12px;transform: scale(0.8) translateX(-20px);white-space: nowrap;width: 150px;overflow-x: show;">早: {{ item.day0 }}, ä¸­: {{ item.day1 }}, å¤œ: {{ item.day2 }}, ä¼‘: {{ item.day3 }}, å‡: {{ item.day4 }}</p>
              <p style="margin-top: 4px;"><span style="color: #999999;font-size: 12px;display: inline-block;transform: scale(0.8) translateX(-10px);">合计出勤: </span><span style="font-size: 16px;
    color: #FF4902;">{{ query.month?item.monthlyAttendance
.totalAttendance:item.sidebarAnnualAttendance
.totalAttendance }}天</span></p>
            </div>
          </div>
        </div>
        <div class="scroll-right">
          <div class="content">
            <div>
              <div class="content-title content-title-right" style="border-bottom: 0;height: 52px;" :style="`display: grid;
              grid-template-columns: repeat(${monthList.length}, 1fr);`">
                <div class="content-title-item" v-for="(item,index) in monthList" :key="'b'+index" style="height: 52px;">
                  <span class="month">{{ item }}月</span>
              </div>
            </div>
            <div
            class="content-body"
            v-for="(item,index) in list"
            :key="'c'+index"
            v-on:mouseenter="onMouseEnter(index)"
            v-on:mouseleave="currentUserIndex=null"
            :style="`display: grid;
            grid-template-columns: repeat(${monthList.length}, 1fr);`"
            >
              <div class="content-body-item" v-for="(m,i) in monthList.length" :key="'d'+i" :class="{hoverType:currentUserIndex==index}">
                <p style="color:rgb(153, 153, 153);font-size: 12px;">合计出勤：<span style="font-size: 14px;color:#000">12</span></p>
                <p style="color:rgb(153, 153, 153);font-size: 12px;">
                  æ—©: 12, ä¸­: 12, å¤œ: 12, ä¼‘: 12, å‡: 12
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </scroll-pagination>
    <span style="color:#909399;font-size:14px;position: absolute;left:50%;top: 50%;transform: translate(-59%,-50%);" v-if="list.length==0">暂无数据</span>
  </div>
  <el-dialog title="排班" :visible.sync="schedulingVisible" width="400px">
    <div class="search_thing">
@@ -151,188 +207,68 @@
  },
  data () {
    return{
      currentYear:new Date().getFullYear(),
      currentMonth:new Date().getMonth()+1,
      addPower:true,
      upPower:true,
      downPower:true,
      query:{
        userName:'',
        laboratory:'',
        year:'',
        month:''
        year:new Date(),
        month:new Date().getMonth()+1
        // month:''
      },
      monthOptions:[
        {
          value:'1',
          value:1,
          label:'1月'
        },
        {
          value:'2',
          value:2,
          label:'2月'
        },
        {
          value:'3',
          value:3,
          label:'3月'
        },
        {
          value:'4',
          value:4,
          label:'4月'
        },
        {
          value:'5',
          value:5,
          label:'5月'
        },
        {
          value:'6',
          value:6,
          label:'6月'
        },
        {
          value:'7',
          value:7,
          label:'7月'
        },
        {
          value:'8',
          value:8,
          label:'8月'
        },
        {
          value:'9',
          value:9,
          label:'9月'
        },
        {
          value:'10',
          value:10,
          label:'10月'
        },
        {
          value:'11',
          value:11,
          label:'11月'
        },
        {
          value:'12',
          value:12,
          label:'12月'
        },
      ],
      laboratory:[],
      weeks:[],
      workList:[
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'中班',
          time:'8:00-16:00',
        },
        {
          type:'夜班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
        {
          type:'早班',
          time:'8:00-16:00',
        },
      ],
      classType:[],
      currentUserIndex:null,
      schedulingVisible:false,
@@ -347,8 +283,24 @@
      currentPage: 1, // å½“前页
      pageSize: 10, // ä¸€é¡µ10条
      total: '',
      pageLoading: true, // ç»„件loading的展示,默认为true
      finishLoding: false // åŠ è½½å®Œæˆï¼Œæ˜¾ç¤ºå·²ç»æ²¡æœ‰æ›´å¤šäº†
      pageLoading: false, // ç»„件loading的展示,默认为true
      finishLoding: false, // åŠ è½½å®Œæˆï¼Œæ˜¾ç¤ºå·²ç»æ²¡æœ‰æ›´å¤šäº†
      monthList:[]
    }
  },
  watch: {
    'query.year'(val){
      this.monthList = []
      if(val.getFullYear()==new Date().getFullYear()){
        for(let i=new Date().getMonth()+1;i>0;i--){
          this.monthList.push(i)
        }
      }else{
        for (let i=12;i>0;i--) {
          this.monthList.push(i)
        }
      }
      this.monthList.reverse()
    }
  },
  mounted(){
@@ -356,6 +308,12 @@
    this.obtainItemParameterList()
    this.getUsers()
    this.init()
    this.monthList = []
    for(let i=new Date().getMonth()+1;i>0;i--){
      this.monthList.push(i)
    }
    this.monthList.reverse()
    // this.getPower()
  },
  methods: {
    refresh(){
@@ -364,8 +322,8 @@
      this.query = {
        userName:'',
        laboratory:'',
        year:'',
        month:''
        year:new Date(),
        month:new Date().getMonth()+1
      }
      this.init()
    },
@@ -378,39 +336,52 @@
      if(this.currentPage==1){
        this.pageLoading = true
      }
      let year = this.query.year.getFullYear()
      let month0 = this.query.month?this.query.month:new Date().getMonth()+1
      let month = month0>9?month0:'0'+month0
      this.$axios.post(this.$api.performanceShift.page, {
        size:this.pageSize,
        current:this.currentPage,
        time:this.query.month?this.query.year+'-'+this.query.month:this.query.year,
        time:year+'-'+month+'-01 00:00:00',
        userName:this.query.userName,
        laboratory:this.query.laboratory,
        }).then(res => {
          this.pageLoading = false
          if (res.code == 201) return
          this.total = res.data.total
          let list = res.data.records.map(item=>{
            for (let key in item) {
          let list = res.data.page.records.map(item=>{
            for (let key in item.monthlyAttendance) {
              let type = this.getDayByDic(key)
              if(type!=undefined||type!=null){
                item[`day${type}`] = item[key]
                item[`day${type}`] = item.monthlyAttendance[key]
              }
            }
            return item
          });
          // å³ä¾§æ—¥æœŸèŽ·å–
          if(this.currentPage==1){
            if(list&&list.length>0){
              this.weeks = [];
              list[0].list&&list[0].list.forEach(item=>{
                let obj = {
                  weekNum:item.weekly,
                  week:item.headerTime.split(' ')[1],
                  day:item.headerTime.split(' ')[0]
                }
                this.weeks.push(obj)
              })
          // if(this.currentPage==1){
          //   if(list&&list.length>0){
          //     this.weeks = [];
          //     list[0].list&&list[0].list.forEach(item=>{
          //       let obj = {
          //         weekNum:item.weekly,
          //         week:item.headerTime.split(' ')[1],
          //         day:item.headerTime.split(' ')[0]
          //       }
          //       this.weeks.push(obj)
          //     })
          //   }
          // }
          let headerList = res.data.headerList;
          this.weeks = [];
          headerList.forEach(item=>{
            let obj = {
              weekNum:item.weekly,
              week:item.headerTime.split(' ')[1],
              day:item.headerTime.split(' ')[0]
            }
          }
            this.weeks.push(obj)
          })
          if(list.length==0){
            this.finishLoding = true;
          }else{
@@ -423,7 +394,29 @@
            }
            this.currentPage++;
          }
          console.log(this.list)
        })
    },
    initYear(){},
    getPower() {
      let power = JSON.parse(sessionStorage.getItem('power'))
      let add = false
      let up = false
      let down = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'update') {
          up = true
        }
        if (power[i].menuMethod == 'delDeviceParameter') {
          down = true
        }
        if (power[i].menuMethod == 'add') {
          add = true
        }
      }
      this.addPower = add
      this.upPower = up
      this.downPower = down
    },
    onMouseEnter(index){
      this.currentUserIndex = index
@@ -487,10 +480,14 @@
    },
    handleCommand(e,m){
      if(e!=m.shift){
        this.$axios.put(this.$api.performanceShift.update+m.id, {
        this.$axios.put(this.$api.performanceShift.update, {
          id:m.id,
          shift:e
        }).then(res => {
        }, {
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
          if (res.code == 201) return
          this.$message.success('操作成功')
          m.shift = e
@@ -610,32 +607,33 @@
}
.content-title-item{
  height: 100%;
  width: 100px;
  width: 60px;
  flex-shrink: 0;
  border-bottom: 1px solid #EEEEEE;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}
.content-title-item .month{
  font-size: 12px;
  color: #3A7BFA;
  box-sizing: border-box;
  padding: 0 4px;
  padding: 0 1px;
  border-radius: 50%;
  background: #D6E4FF;
  line-height: 30px;
  text-align: center;
  margin-right: 6px;
  line-height: 22px;
}
.content-title-item .day{
  font-size: 16px;
  font-size: 14px;
  color: #333333;
  margin-right: 6px;
  /* margin-right: 4px; */
}
.content-title-item .week{
  font-size: 14px;
  font-size: 12px;
  color: #999999;
}
.content-body{
@@ -643,8 +641,8 @@
  align-items: center;
}
.content-body-item{
  height: 80px;
  width: 100px;
  height: 70px;
  width: 60px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 4px;
@@ -664,28 +662,43 @@
}
.work-box.type0{
  background: rgba(58,123,250,0.15);
  color: #3A7BFA;
  color: #3A7BFA !important;
}
.work-box.type0 span{
  color: #3A7BFA !important;
}
.work-box.type1{
  background: #E3DCFE;
  color: #635998;
  color: #635998 !important;
}
.work-box.type1 span{
  color: #635998 !important;
}
.work-box.type2{
  background: #FAE2CA;
  color: #BC8D5E;
  color: #BC8D5E !important;
}
.work-box.type2 span{
  color: #BC8D5E !important;
}
.work-box.type3{
  background: #E1F3D8;
  color: #67C23A;
  color: #67C23A !important;
}
.work-box.type3 span{
  color: #67C23A !important;
}
.work-box.type4{
  background: #FDE2E2;
  color: #F56C6C;
  color: #F56C6C !important;
}
.el-icon-arrow-down::before{
.work-box.type4 span{
  color: #F56C6C !important;
}
/* .el-icon-arrow-down::before{
  color: #c6c4c4;
}
.type0 .el-icon-arrow-down::before{
} */
/* .type0 .el-icon-arrow-down::before{
  color: #fff;
}
.type1 .el-icon-arrow-down::before{
@@ -699,7 +712,7 @@
}
.type4 .el-icon-arrow-down::before{
  color: #fff;
}
} */
.work-box-left{
  display: flex;
  justify-content: center;
@@ -708,7 +721,7 @@
}
.content-user{
  width: 100%;
  height: 80px;
  height: 70px;
  box-sizing: border-box;
  border-bottom: 1px solid #EEEEEE;
  display: flex;
@@ -732,4 +745,37 @@
.hoverType{
  background: rgba(58,123,250,0.05);
}
.year-table{
  width: 100%;
}
/* .year-table .scroll-right{
  width: calc(100% -220px);
} */
.year-table .scroll-right{
  flex: 1;
}
.year-table .month{
  font-size: 14px;
  color: #3A7BFA;
  box-sizing: border-box;
  padding: 0 4px;
  border-radius: 50%;
  background: #D6E4FF;
  text-align: center;
  line-height: 30px;
}
.year-table .content-title-item{
  width: 100%;
}
.year-table .content-body{
  /* width: calc(100% -220px) !important; */
}
.year-table .content-body-item{
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
</style>

 src/components/view/b3-work-time-management.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,38 @@
<template>
  <div class="work-time-management">
    <el-radio-group v-model="currentComponent" size="small" style="margin-top: 16px;margin-bottom: 16px;">
      <el-radio-button label="workTimeStatistics">
        å·¥æ—¶ç»Ÿè®¡
      </el-radio-button>
      <el-radio-button label="workTimeManagement">
        æ—¥å·¥æ—¶ç®¡ç†
      </el-radio-button>
      <el-radio-button label="workTimeConfig">
        è¾…助工时配置
      </el-radio-button>
    </el-radio-group>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import workTimeStatistics from '../do/b3-work-time-management/work-time-statistics.vue'
import workTimeManagement from '../do/b3-work-time-management/work-time-management.vue'
import workTimeConfig from '../do/b3-work-time-management/work-time-config.vue'
export default {
  components: {
    workTimeStatistics,
    workTimeManagement,
    workTimeConfig
  },
  data() {
    return{
      currentComponent:'workTimeConfig'
    }
  }
}
</script>

<style scoped>

</style>

 static/js/menu.js

@@ -69,7 +69,7 @@
        c: [{
            v: "工时管理",
            i: "font icon-erjidaohang",
            u: "",
            u: "b3-work-time-management",
            p: ""
        }, {
            v: "人员考勤",