guzijian / bsth-alcohol-sign-web · Files

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="日期" prop="date">
        <el-date-picker v-model="queryParams.date" format="YYYY-MM" value-format="YYYY-MM" type="month"
          placeholder="选择开始日期" />
      </el-form-item>
      <el-form-item label="工号" prop="jobCode">
        <el-input v-model="queryParams.jobCode" placeholder="请输入工号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="工种" prop="posts">
        <el-input v-model="queryParams.posts" placeholder="请输入工种" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-text class="mx-1" size="small">注意：当前页面只显示已经生成了排班的人员，管理员只能编辑未来的排班明细，排班明细是每个人每月只会生成一次</el-text>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" @click="handleEdit">编 辑</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="User" :disabled="single" @click="handleUser">顶 班</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Clock" @click="handleCreateAttendance">生成当月</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Refresh" @click="handleAgainCreateAttendance">重新生成</el-button>
      </el-col>
    </el-row>

    <el-table max-height="600" v-loading="loading" :stripe="true" :data="driverList" border
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" align="center" fixed="left" />
      <el-table-column label="工号" show-overflow-tooltip="true" align="center" width="100" prop="jobCode" fixed="left" />
      <el-table-column label="姓名" show-overflow-tooltip="true" align="center" width="100" prop="name" fixed="left" />
      <el-table-column label="部门" show-overflow-tooltip="true" align="center" width="100" prop="fleetName"
        fixed="left" />
      <el-table-column label="工种" show-overflow-tooltip="true" align="center" width="100" prop="posts" fixed="left" />
      <el-table-column label="班次" show-overflow-tooltip="true" align="center" width="100" prop="ruleDictName"
        fixed="left" />
      <el-table-column v-for="(item, index) in globalDateFields" :label="item.date" align="center">
        <el-table-column :label="item.weekDay" align="center" width="225" :prop="item.date" />
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- 删除和修改对话框 -->
    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <template #header>
        <el-radio-group v-model="radio" size="large">
          <el-radio-button label="修改" />
          <el-radio-button label="删除" />
        </el-radio-group>
      </template>
      <el-text v-show="radio == '删除'" class="mx-1" size="small">删除操作请使用在离职员工身上，删除了的记录是没办法进行修改的</el-text>
      <div v-show="radio == '修改'" style="margin-bottom: 30px;">
        <schedulingAdd v-if="open" :schedulingNowValue="schedulingNowValue" ref="schedulingChildren"
          :schedulingOptions="schedulingOptions" />
      </div>

      <!-- 修改|删除 -->
      <el-form :inline="true" label-width="100px">
        <!-- 选择人员 -->
        <el-form-item>
          <people ref="updateChildren" leftTitle="所有人员" rightTitle="已选择人员" />
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="startDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date"
            placeholder="选择开始日期" :disabled-date="disabledDate" />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="endDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date"
            placeholder="选择开始日期" :disabled-date="disabledDate" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 顶班 -->
    <el-dialog :title="'顶班 ' + jobCodes + '/' + name" v-model="updateDataFlag" width="800px" append-to-body>
      <el-text class="mx-1" size="small">规则不选择默认顶替当天排班规则，被顶班人员会自动设置为休息。</el-text>
      <schedulingAdd v-if="updateDataFlag" ref="schedulingChildrenSecond" :schedulingNowValue="schedulingNowValue"
        :schedulingOptions="schedulingOptions" />
      <el-form :inline="true" style="margin-top: 15px;" v-if="updateDataFlag" ref="updateDataRef"
        :model="updateDataUser" label-width="100px">
        <el-form-item label="顶班日期" :required="true">
          <el-date-picker v-model="updateDataUser.date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date"
            placeholder="选择顶班日期" @change="handleDateChange" :disabled-date="disabledDate" />
        </el-form-item>
        <el-form-item label="顶班员工" :required="true">
          <el-select v-model="otherJobCode" :disabled="!updateDataUser.date" filterable placeholder="选择顶班人员">
            <el-option v-for="item in peopleList" :key="item.jobCode" :label="item.label" :value="item.jobCode" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormUpdate">确 定</el-button>
          <el-button @click="cancelUpdate">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 重新生成 -->
    <el-dialog title="重新生成" v-model="againCreateFlag" width="800px" append-to-body>
      <el-form :model="againCreateRequestVo">
        <el-form-item>
          <el-tooltip effect="dark" content="重新生成的排班不会覆盖今天及之前的排班数据,且会按照最新的排班设置生成，如果不小心删除了排班也可以通过重新生成按钮生成一次。"
            placement="right"><el-icon>
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </el-form-item>
        <el-form-item label="日期" prop="month">
          <el-date-picker v-model="againCreateRequestVo.month" format="YYYY-MM" value-format="YYYY-MM" type="month"
            placeholder="选择重新生成月份" />
        </el-form-item>
        <el-form-item label="人员" prop="jobCode">
          <people ref="newAddChildren" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitAgainCreate">确 定</el-button>
          <el-button @click="cancelAgainCreate">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Driver">
import { againCreateAttendance, createAttendance, deleteAttendance, getPeopleList, getTodayFreeUser, updateAttendance, updateSchedulingByUser } from '@/api/attendance/attendance';
import { listSchedulingAll } from "@/api/scheduling/scheduling";
import moment from 'moment';
// @ts-ignore
import { reactive, watch } from 'vue';
import schedulingAdd from '../../schedulingAssociateNum/Attendance/scheduling/index.vue';
import people from '../components/people/index.vue';
const { proxy } = getCurrentInstance();

// 全局日期
let globalDateFields = ref([]);
const againCreateRequestVo = ref({
  month: null,
  jobCode: null
})
const updateChildren = ref(null)
const newAddChildren = ref(null)
const peopleList = ref([])
const otherJobCode = ref(null)
const schedulingChildren = ref(null);
const schedulingChildrenSecond = ref(null);
const name = ref(null);
const radio = ref("修改")
const driverList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const jobCodes = ref([]);
const single = ref(true);
const total = ref(0);
const title = ref("");
const schedulingOptions = ref(null)
const startDate = ref(moment(new Date()).add(1, 'days').format("YYYY-MM-DD"))
const endDate = ref()
const schedulingNowValue = ref()
const againCreateFlag = ref(false)
const data = reactive({
  form: {},
  queryParams: {
    jobCode: null,
    posts: null,
    name: null,
    fleetName: null,
    pageNum: 1,
    pageSize: 10,
  }
});

// 顶班请求体
const updateDataUser = ref({
  jobCode: null,
  ruleId: null,
  otherJobCode: null,
  date: null,
  type: 1,
})
const resetUpdateDataUser = () => {
  updateDataUser.value = {
    jobCode: null,
    ruleId: null,
    otherJobCode: null,
    date: null,
  }
  otherJobCode.value = null
  schedulingNowValue.value = null
  proxy.resetForm("updateDataRef");
}
const updateDataFlag = ref(false)

const handleCreateAttendance = () => {
  proxy.$modal.confirm('确定生成当月的排班吗?').then(function () {
    loading.value = true
    return createAttendance(queryParams.value.date);
  }).then(res => {
    loading.value = false
    proxy.$modal.msgSuccess("生成成功");
    getList();
  }).catch(res => {
    loading.value = false
    getList();
  })
}

const { queryParams, form, rules } = toRefs(data);
/** 查询驾驶员信息列表 */
function getList() {
  loading.value = true;
  getPeopleList(queryParams.value).then((response) => {
    driverList.value = response.rows.map(item => {
      let nowItem = {
        fleetName: item.fleetName,
        jobCode: item.jobCode,
        name: item.name,
        posts: item.posts,
        ruleDictName: item.ruleDictName
      }
      for (let index = 0; index < item.monthList.length; index++) {
        const element = item.monthList[index];
        nowItem[element.day] = element.rangeTime;
      }
      return nowItem;
    })

    total.value = response.total;
    loading.value = false;
  });
}


const disabledDate = (date) => {
  const today = new Date()
  const lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
  return date < today;
}

// 取消按钮
function cancel() {
  open.value = false;
  reset();
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    jobCode: null,
    name: null,
    posts: null,
  };
}


/**
 * 获取所有日期
 */
function getCurrentMonthDaysOfWeek() {
  let splitString = queryParams.value.date.split('-');
  const year = Number(splitString[0]);
  const month = Number(splitString[1] - 1);
  globalDateFields.value = []
  // 获取当前月份的第一天
  const firstDayOfMonth = moment({ year, month }).startOf('month');

  // 获取当前月份的最后一天
  const lastDayOfMonth = moment({ year, month }).endOf('month');

  // 遍历每一天并获取日期和星期
  const currentDay = moment(firstDayOfMonth);
  while (currentDay.isSameOrBefore(lastDayOfMonth)) {
    const date = currentDay.format('MM月DD日');
    const weekDay = getWeek(currentDay.day());
    // 初始值
    globalDateFields.value.push({
      date: date,
      weekDay: weekDay
    })
    currentDay.add(1, 'day');
  }
}

/**
 * 根据日期获取星期
 * @param {*} week
 */
function getWeek(week) {
  switch (week) {
    case 1:
      return '周一'
    case 2:
      return '周二'
    case 3:
      return '周三'
    case 4:
      return '周四'
    case 5:
      return '周五'
    case 6:
      return '周六'
    case 0:
      return '周日'
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
  getCurrentMonthDaysOfWeek();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  jobCodes.value = selection.map((item) => item.jobCode);
  single.value = selection.length != 1;
  if (!single.value) {
    name.value = selection[0].name
  }
}


/** 编辑按钮操作 */
function handleEdit() {
  title.value = "编辑排班明细"
  // 获取规则
  listSchedulingAll().then(res => {
    schedulingOptions.value = res.data;
    open.value = true
  })
}

/** 提交按钮 */
function submitForm() {
  if (radio.value == "修改") {
    handleUpdate()
  } else {
    handleDelete()
  }
}
function cancelUpdate() {
  updateDataFlag.value = false;
}

const handleLeftChange = (val) => {
  // console.log(val);
}

const handleRightChange = (val) => {
  // console.log(val);
}
/**
 * 处理顶班
 */
function handleUser() {
  // 获取规则
  listSchedulingAll().then(res => {
    schedulingOptions.value = res.data;
    updateDataFlag.value = true
  })
}

function handleDateChange(val) {
  otherJobCode.value = null;
  peopleList.value = []
  getTodayFreeUser({ date: val }).then(res => {
    peopleList.value = res.data.map(item => {
      return {
        jobCode: item.jobCode,
        label: item.jobCode + '/' + item.name
      }
    })
  })
}

/**
 * 顶班修改
 */
function submitFormUpdate() {
  proxy.$refs["updateDataRef"].validate(valid => {
    if (valid) {
      proxy.$modal.confirm('是否确定顶班工号为"' + jobCodes.value[0] + '"的数据项？').then(function () { })
        .then(function () {
          updateDataUser.value.jobCode = jobCodes.value[0]
          updateDataUser.value.otherJobCode = otherJobCode.value;
          if (schedulingChildrenSecond.value.childrenItemValue) {
            updateDataUser.value.ruleId = schedulingChildrenSecond.value.childrenItemValue.id
          }
          if (updateDataUser.value.ruleId) {
            updateDataUser.value.type = 2
          } else {
            updateDataUser.value.type = 1
          }
          return updateSchedulingByUser(updateDataUser.value);
        })
        .then(res => {
          proxy.$modal.msgSuccess("顶班成功");
          updateDataFlag.value = false
          getList()
          resetUpdateDataUser()
        })
    }
  })
}

watch(updateDataFlag, (val1, val2) => {
  if (!updateDataFlag.value) {
    resetUpdateDataUser();
  }
}
)

watch(againCreateFlag, (val1, val2) => {
  // if (!againCreateFlag.value) {
  //   againCreateRequestVo.value = {
  //     month: null,
  //     jobCode: []
  //   }
  // }
})

function handleAgainCreateAttendance() {
  againCreateFlag.value = true;
}

function handleUpdate() {
  // 判断当前规则是否为空
  if (updateChildren.value.childrenItemValue && schedulingChildren.value.childrenItemValue) {
    console.log(updateChildren.value.childrenItemValue);
    console.log(schedulingChildren.value.childrenItemValue);
    let updateData = {
      jobCode: updateChildren.value.childrenItemValue,
      ruleId: schedulingChildren.value.childrenItemValue.id,
      startDate: startDate.value,
      endDate: endDate.value
    }
    proxy.$modal
      .confirm('是否确认修改排班明细')
      .then(function () {
        return updateAttendance(updateData)
      })
      .then(res => {
        proxy.$modal.msgSuccess("对应的排班明细已经修改成功");
        getList();
        open.value = false
      })
      .catch(() => {
        open.value = false
      })
  }
}

const submitAgainCreate = () => {
  proxy.$modal
    .confirm('确定要重新生成吗？')
    .then(function () {
      againCreateRequestVo.value.jobCode = newAddChildren.value.childrenItemValue
      return againCreateAttendance(againCreateRequestVo.value)
    })
    .then((res) => {
      proxy.$modal.msgSuccess("重新生成完毕！");
      againCreateFlag.value = false
      getList()
    })
}

const cancelAgainCreate = () => {
  againCreateFlag.value = false
}

/** 删除操作 */
function handleDelete() {
  let deleteData = {
    jobCode: updateChildren.value.childrenItemValue,
    startDate: startDate.value,
    endDate: endDate.value
  }
  proxy.$modal
    .confirm('是否确认删除排班明细')
    .then(function () {
      return deleteAttendance(deleteData)
    })
    .then((res) => {
      proxy.$modal.msgSuccess("对应的排班明细已经删除成功");
      getList();
      open.value = false
    })
}

queryParams.value.date = moment().format("YYYY-MM")
getList();
getCurrentMonthDaysOfWeek();

</script>

<style scoped>
.people-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>