完成工时管理前端

licp

2024-05-13 c5f70afac4dd35b3a6033eef8aae530d674425e0

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

@@ -1,19 +1,246 @@
<template>
  <div class="work-time-statistics">
    工时统计
    <div class="search">
      <div class="search_thing">
            <div class="search_label">日期：</div>
            <div class="search_input" style="display: flex;align-items: center;">
          <el-date-picker
            v-model="componentData.entity.laboratory"
            type="month"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择月" size="small" style="width: 100%;">
          </el-date-picker>
        </div>
         </div>
         <div class="search_thing">
            <div class="search_label">员工：</div>
            <el-select v-model="componentData.entity.laboratory" placeholder="全部" size="small" @change="refreshTable()">
               <el-option v-for="item in personList" :key="item.id" :label="item.name" :value="item.id">
               </el-option>
            </el-select>
         </div>
         <div class="search_thing">
            <div class="search_label">部门：</div>
            <div class="search_input">
          <el-select v-model="componentData.entity.laboratory" placeholder="全部" size="small" @change="refreshTable()">
               <el-option v-for="item in weekList" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
            </el-select>
        </div>
         </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>
      <el-button size="small" type="primary" style="position: absolute;right: 50px;" @click="handleDown">导 出</el-button>
      <el-button size="small" type="primary" style="position: absolute;right: 120px;" @click="handleUp" v-show="currentTable == 'value0'">导 入</el-button>
      </div>
    <el-radio-group v-model="currentTable" size="small" :key="'111'" style="margin-top: 10px;">
      <el-radio-button label="value0">
        原始工时
      </el-radio-button>
      <el-radio-button label="value1">
        修正工时
      </el-radio-button>
    </el-radio-group>
    <div class="table">
      <ValueTable ref="ValueTable0"
        v-show="currentTable == 'value0'"
            :url="$api.auxiliaryWorkingHours.selectAuxiliaryWorkingHours"
            :componentData="componentData" :inputUrl="$api.auxiliaryWorkingHours.selectAuxiliaryWorkingHours" :downUrl="$api.auxiliaryWorkingHours.selectAuxiliaryWorkingHours" :key="upIndex" />
      <ValueTable ref="ValueTable1"
        v-show="currentTable == 'value1'"
            :url="$api.auxiliaryWorkingHours.selectAuxiliaryWorkingHours"
            :componentData="componentData0" :key="upIndex" />
    </div>
  </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: [],
               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: []
         },
      componentData0: {
               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: []
         },
      upIndex:0,
      weekList:[],
      personList:[],
      currentTable:'value0'
    }
  },
  mounted(){
    this.getUsers()
  },
  methods: {
    refresh(){},
    refreshTable(){},
    getUsers(){
      this.$axios.post(this.$api.user.selectUserList, {
               page: {
            current: -1,
            size: -1,
          },
               entity: {
            name: null,
          }
            }, {
               headers: {
                  'Content-Type': 'application/json'
               }
            }).then(res => {
               if (res.code === 201) {
                  return
               }
          let arr = res.data.body.records
          this.personList = arr
        })
    },
    handleDown(){
      if(this.currentTable == 'value0'){
        this.$refs.ValueTable0.downFile(false)
      }else{
        this.$refs.ValueTable1.downFile(false)
      }
    },
    handleUp(){
      this.$refs.ValueTable0.openUpload()
    }
  }
}
</script>

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

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

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

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