lc_finance/web/src/view/finance/financeAnalysis/components/hour.vue

<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-select
          v-model="peopleId"
          placeholder="请选择工作人员"
          clearable
          @clear="changePeopleId"
        >
          <el-option
            v-for="item in peopleList"
            :key="item.ID"
            :label="item.nickName"
            :value="item.ID"
          />
        </el-select>
      </el-col>
      <el-col
        :span="5"
        :offset="1"
      >
        <el-date-picker
          v-model="condition.yearTime"
          type="year"
          placeholder="请选择年份"
          format="YYYY"
          value-format="YYYY"
          clearable
          @clear="condition.yearTime = ''"
        />
      </el-col>
      <el-col
        :span="5"
        :offset="1"
      >
        <el-date-picker
          v-model="condition.time"
          type="month"
          placeholder="请选择月份"
          format="YYYY-MM"
          value-format="YYYY-MM"
          clearable
          @clear="condition.time = ''"
        />
      </el-col>
      <el-col
        :span="2"
        :offset="1"
      >
        <el-button
          type="primary"
          :icon="Search"
          @click="retrievalTime"
        >查询</el-button>
      </el-col>
      <el-col
        :span="2"
        style="margin-left: 20px"
      >
        <el-button
          type="primary"
          :icon="Plus"
          @click="changeAddTimeShow"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="23">
        <el-table
          :data="hour.timeList"
          stripe
        >
          <el-table-column
            label="工作人员"
            prop="Name"
          />
          <el-table-column
            label="工作天数"
            prop="SumDay"
          />
          <el-table-column
            label="总工资"
            prop="PriceSum"
          />
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col
        :span="23"
        style="display: flex;justify-content: end"
      >
        <el-pagination
          v-model:current-page="condition.pageInfo.page"
          background
          layout="prev, pager, next"
          :page-size="8"
          :total="hour.timeTotal"
          @change="changeHourPage"
        />
      </el-col>
    </el-row>
    <el-dialog
      v-model="addTimeShow"
      title="新增工时"
      width="40%"
    >
      <el-form label-width="100px">
        <el-form-item label="工人名称：">
          <el-select
            v-model="addCondition.people"
            placeholder="请选择工作人员"
            clearable
            @change="changeWorkPeople"
            @clear="addCondition.people = ''"
          >
            <el-option
              v-for="item in peopleList"
              :key="item.ID"
              :label="item.nickName"
              :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作天数：">
          <el-input-number v-model="addCondition.days" />
        </el-form-item>
        <el-form-item label="人天单价：">
          <el-input-number
            v-model="addCondition.price"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="报工时间：">
          <el-date-picker
            v-model="addCondition.peopleTime"
            placeholder="请选择报工时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            clearable
            @clear="addCondition.peopleTime = ''"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          type="primary"
          size="large"
          @click="addTime"
        >
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, defineExpose } from 'vue'
import { hourOperate } from '@/pinia/hour/Hour'
import { codeOperate } from '@/pinia/code/code'
import { createWorkingHours } from '@/api/finance'
import { Search, Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getAllUsers } from '@/api/user'
defineOptions({
  name: 'Hour'
})
const hour = hourOperate()
const serial = codeOperate()
const condition = reactive({
  pageInfo: {
    page: 1,
    pageSize: 8
  },
  code: '',
  time: '',
  yearTime: '',
  people: 0
})
const addCondition = reactive({
  projectCode: '',
  people: '',
  days: 0,
  price: 0,
  peopleTime: ''
})
const peopleId = ref('')
const peopleList = reactive([])
const addTimeShow = ref(false)
onMounted(() => {
  getAllUsers().then(res => {
    if (res.code === 0) {
      peopleList.length = 0
      peopleList.push(...res.data)
    }
  })
})

const retrievalTime = () => {
  peopleId.value === '' ? condition.people = 0 : condition.people = parseFloat(peopleId.value)
  condition.code = serial.currentCode
  hour.getTimeList(condition)
}

const addTime = () => {
  addCondition.projectCode = serial.currentCode
  for (const i in addCondition) {
    if (addCondition[i] === '' || addCondition[i] === null || addCondition[i] === 0) {
      ElMessage({
        message: '请将信息填写完整',
        type: 'error',
        showClose: true,
        duration: 2000
      })
      return
    }
  }
  createWorkingHours(addCondition).then(res => {
    if (res.code === 0) {
      ElMessage.success('添加成功')
      addTimeShow.value = false
      retrievalTime()
      addCondition.days = 0
      addCondition.people = ''
      addCondition.price = 0
      addCondition.peopleTime = ''
    }
  })
}

const changeHourPage = (page) => {
  condition.pageInfo.page = page
  retrievalTime()
}
const outsideChangePage = () => {
  condition.pageInfo.page = 1
}

defineExpose({
  outsideChangePage
})

const changeAddTimeShow = () => {
  addTimeShow.value = true
}

const changePeopleId = () => {
  peopleId.value = ''
}

const changeWorkPeople = (id) => {
  peopleList.forEach(item => {
    if (item.ID === id) {
      addCondition.price = parseFloat(item.onePrice)
    }
  })
}
</script>

<style scoped>

</style>