guzijian / bsth-alcohol-sign-web · Files

<template>
  <div class="app-container">
    <el-row>
      <el-col :span="7">
        <!-- 班次 -->
        <div class="scheduling-num">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <el-form :model="queryParamsNum" ref="queryRef" :inline="true">
                  <el-form-item class="custom-form-item" label="班 次" prop="ruleDictName" align="right">
                    <el-select v-model="numValue" clearable placeholder="选择班次" @change="handleNumChange">
                      <el-option v-for="item in numOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </template>
            <!-- 内容 -->
            <template #default>
              <div class="card-content">
                <el-table :height="tableHeight" :data="resultNumValue" border>
                  <el-table-column type="index" label="序号" width="60" />
                  <el-table-column prop="label" label="班次名称" width="200" align="center" />
                  <el-table-column label="操 作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                      <el-button link type="primary" icon="Edit" @click="handleNumDetail(scope.row)"
                        v-hasPermi="['scheduling:scheduling:edit']">详 情</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="7" :offset="1">
        <!-- 考勤规则 -->
        <div class="scheduling-rule">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>考勤规则</span>
                <el-button @click="handleNewAddRule">
                  <el-icon>
                    <Plus />
                  </el-icon> 新增考勤</el-button>
              </div>
            </template>
            <!-- 内容 -->
            <template #default>
              <div class="card-content">
                <el-table style="font-size: 10px;" v-loading="schedulingLoading" :height="tableHeight"
                  :data="schedulingTable" border>
                  <el-table-column type="index" label="序号" width="55" />
                  <el-table-column prop="ruleName" label="规则名称" width="80" align="center" />
                  <el-table-column prop="rangeTime" label="时间范围" />
                  <el-table-column label="操 作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                      <el-button link type="primary" icon="Edit" @click="handleScheduling(scope.row)"
                        v-hasPermi="['scheduling:scheduling:edit']">编 辑</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="7" :offset="1">
        <!-- 试用人群 -->
        <div class="match-person">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>适用人员</span>
                <el-button @click="handleMatchPeople">
                  <el-icon>
                    <Plus />
                  </el-icon> 编辑人员</el-button>
              </div>
            </template>
            <!-- 内容 -->
            <template #default>
              <div class="card-content">
                <el-table :height="tableHeight" :data="peopleNowValueTable" border>
                  <el-table-column prop="jobCode" label="工号" align="center" />
                  <el-table-column prop="name" label="姓名" align="center" />
                  <el-table-column prop="posts" label="工种" align="center" />
                  <el-table-column prop="startDate" label="开始日期" sortable align="center" width="150" fixed="right">
                    <template #default="scope">
                      <el-date-picker style="width: 100px;" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                        v-model="scope.row.startDate" type="date" placeholder="选择日期" size="small" />
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- 添加或修改班次管理对话框 -->
    <el-dialog :title="title" v-model="open" :width="detailWidth" append-to-body>
      <!-- 判断显示组件 -->
      <num v-if="resultNumDetail != null" :resultNumDetail="resultNumDetail" />
      <!-- 操作界面 -->
      <schedulingAdd v-if="updateSchedulingFlag" :schedulingNowValue="schedulingNowValue"
        :schedulingOptions="schedulingOptions" ref="newAddChildren" />
      <!-- 添加适用人群 -->
      <peopleAdd v-if="peopleAddFlag" :peopleNowValue="peopleNowValueTable" ref="peopleAddChildren" />
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="updateSchedulingFlag" type="primary" @click="deleteSchedulingRule"
            style="margin-right: 20px;">删 除</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 保存还是取消 -->
    <div class="footer-button" style="position: absolute; right: 0;margin-top: 15px;">
      <el-row class="mb-4">
        <el-button type="primary" @click="handleSaveScheduling" plain>保 存</el-button>
        <el-button type="info" @click="handleCancelScheduling" plain>取 消</el-button>
      </el-row>
    </div>

  </div>
</template>

<script setup name="Attendance">
import { getPeopleInfo, getRuleNumBySettingId, getRuleSchedulingListVoBySettingId, getTemplate, saveSchedulingSetting, updateSchedulingSetting } from "@/api/attendance/attendance";
import { getNum, listNumAll } from "@/api/num/num";
import { listSchedulingAll } from "@/api/scheduling/scheduling";
import { ElMessage } from 'element-plus';
import { v4 as uuidv4 } from 'uuid';
import { onMounted, ref } from 'vue';
// @ts-ignore
import num from './num/index.vue';
// @ts-ignore
import peopleAdd from './people/index.vue';
// @ts-ignore
import useTagsViewStore from '@/store/modules/tagsView';
import { useRoute, useRouter } from "vue-router";
// @ts-ignore
import schedulingAdd from './scheduling/index.vue';
const router = useRouter();
const route = useRoute()
const tableHeight = 700;
const title = ref('');
const open = ref(false);
const detailWidth = ref('600px');
const schedulingLoading = ref(false)
const schedulingData = ref({})

// 新增考勤详情按钮标识
const updateSchedulingFlag = ref(false);
const schedulingOptions = ref(null);
const schedulingNowValue = ref(null);
const schedulingTable = ref([]);
const newAddChildren = ref(null);
/**
 * 操作-》删除按钮
 */
const deleteSchedulingRule = () => {
  let deleteIndex = 0;
  for (let index = 0; index < schedulingTable.value.length; index++) {
    const element = schedulingTable.value[index];
    if (element.uid == schedulingNowValue.value.uid) {
      deleteIndex = index;
      break;
    }
  }
  open.value = false;
  schedulingTable.value.splice(deleteIndex, 1);
}
// 确定按钮
const handleScheduling = (val) => {
  if (resultNumValue.value != null && resultNumValue.value.length != 0) {
    title.value = "更新考勤规则"
    open.value = true;
    schedulingNowValue.value = val;
    updateSchedulingFlag.value = true;
    detailWidth.value = "600px";
  } else {
    ElMessage({
      message: '请选择班次.',
      type: 'warning',
    })
  }

}
// 新增考勤规则按钮
const handleNewAddRule = () => {
  if (schedulingOptions.value == null || schedulingOptions.value.length === 0) {
    ElMessage({
      message: '请添加排班规则.',
      type: 'warning',
    })
    return;
  }
  if (resultNumValue.value.length == 0) {
    ElMessage({
      message: '请选择班次.',
      type: 'warning',
    })
    return;
  }
  if (resultNumValue.value[0].ruleType == 2 && schedulingTable.value.length >= 7) {
    ElMessage({
      message: '星期翻班只能设置一周哦.',
      type: 'warning',
    })
    return;
  }

  if (checkTemplate()) {
    schedulingTable.value.push(getSchedulingTableItem(schedulingOptions.value[0]));
  } else {
    schedulingTable.value.push(getSchedulingTableItem(schedulingOptions.value[1]));
  }

}
/**
 * 检查班次模板
 */
const checkTemplate = () => {
  let i = schedulingTable.value.length;
  return template.value[i % template.value.length].type == 0;
}


//适用人员
const peopleAddFlag = ref(false);
const peopleAddChildren = ref(null);
const peopleNowValueTable = ref([]);
// 添加人员按钮
const handleMatchPeople = () => {
  open.value = true;
  title.value = "适用人员"
  detailWidth.value = "800px"
  peopleAddFlag.value = true;
}
const queryParamsNum = ref({
  pageNum: 1,
  pageSize: 10,
  ruleName: '',
  ruleType: '',
  status: '',
  startTime: '',
  endTime: ''
});

// 班次
const numValue = ref('')
const resultNumValue = ref([])
const numOptions = ref([])
const resultNumDetail = ref(null)
const template = ref(null);
const handleNumChange = (val) => {
  numValue.value = val;
  resultNumValue.value = numOptions.value.filter(item => item.value === val);

  if (val) {
    schedulingLoading.value = true;
    getTemplate(val).then(res => {
      template.value = res.data
      schedulingLoading.value = false;
    })
  }

  schedulingTable.value = [];
}
const handleNumDetail = (row) => {
  // 班次详情
  getNum(row.value).then(res => {
    detailWidth.value = '600px';
    open.value = true;
    title.value = '班次详情';
    resultNumDetail.value = res.data;
    if (row.ruleWeek) {
      resultNumDetail.value.ruleWeek = resultNumDetail.value.ruleWeek.split(",");
    }
  })

}

const submitForm = () => {
  open.value = false;
  if (updateSchedulingFlag.value) {
    // 修改当前选项的目标值
    updateSchedulingOptions(newAddChildren.value.childrenItemValue);
  }
  if (peopleAddFlag.value) {
    updatePeopleOptions(peopleAddChildren.value.childrenItemValue)
  }
}
// 更新规则
const updateSchedulingOptions = (val) => {
  for (let index = 0; index < schedulingTable.value.length; index++) {
    const element = schedulingTable.value[index];
    if (element.uid == schedulingNowValue.value.uid) {
      schedulingTable.value[index] = getSchedulingTableItem(val);
      break;
    }
  }
}
// 更新人员
const updatePeopleOptions = (val) => {
  let deletePeople = getDeleteChildren(val);
  let newAddPeople = getNewAddPeople(val);
  handleDeletePeopleChildren(deletePeople);
  handleNewAddPeopleChildren(newAddPeople);
}

/**
 * 删除人员
 * @param {*} val
 */
const handleDeletePeopleChildren = (val) => {
  let temporary = [];
  val.forEach(item => {
    temporary[item.jobCode] = item;
  })
  peopleNowValueTable.value = peopleNowValueTable.value.filter(item => !temporary[item.jobCode])
}

/**
 * 新增人员
 * @param {*} val
 */
const handleNewAddPeopleChildren = (val) => {
  val.forEach(item => {
    peopleNowValueTable.value.push({ ...item, startDate: null })
  })
}
/**
 * 获取删除人员
 * @param {*} val
 */
const getDeleteChildren = (val) => {
  let deleteResult = [];
  let temporaryMap = [];
  // 转换对象 方便匹配
  val.forEach(item => {
    let t = item.split(',');
    temporaryMap[t[0]] = {
      jobCode: t[0],
      name: t[1],
      posts: t[2]
    };
  })
  // 遍历对象返回删除对象
  peopleNowValueTable.value.forEach(item => {
    if (!temporaryMap[item.jobCode]) {
      deleteResult.push({
        jobCode: item.jobCode
      })
    }
  })
  return deleteResult;
}

/**
 * 获取新增人员
 * @param {*} val
 */
const getNewAddPeople = (val) => {
  let newAddResult = [];
  let temporaryMap = [];
  peopleNowValueTable.value.forEach(item => {
    temporaryMap[item.jobCode] = item;
  })
  // 返回新增对象
  val.forEach(item => {
    let el = item.split(',');
    if (!temporaryMap[el[0]]) {
      newAddResult.push({
        jobCode: el[0],
        name: el[1],
        posts: el[2]
      })
    }
  })
  return newAddResult;
}

/**
 * 处理取消按钮
 */
const handleCancelScheduling = () => {
  useTagsViewStore().delView(router.currentRoute.value);
  router.replace({
    name: 'SchedulingAssociateNum'
  })
}
/**
 * 处理保存按钮
 */
const handleSaveScheduling = () => {
  if (!checkBody()) {
    return;
  }
  // 更新接口
  if (route.query.id) {
    schedulingData.value = getSchedulingData();
    updateSchedulingSetting(schedulingData.value).then(res => {
      ElMessage({
        message: '修改成功.',
        type: 'success',
      })

      setTimeout(() => {
        useTagsViewStore().delView(router.currentRoute.value);
        router.replace({
          name: 'SchedulingAssociateNum'
        })
      }, 100);
    })

  }
  // 新增接口
  else {
    schedulingData.value = getSchedulingData();
    saveSchedulingSetting(schedulingData.value).then(res => {
      ElMessage({
        message: '新增成功.',
        type: 'success',
      })
      setTimeout(() => {
        useTagsViewStore().delView(router.currentRoute.value);
        router.replace({
          name: 'SchedulingAssociateNum'
        })
      }, 100);

    })
  }
}


const getSchedulingData = () => {
  // 处理对象
  let peopleList = peopleNowValueTable.value;
  let ruleSchedulingList = schedulingTable.value.map((item, index) => {
    let rangeTime = item.rangeTime;
    if (item.id == 0) {
      rangeTime = "休息"
    }
    return {
      rangeTime: rangeTime,
      ruleName: item.ruleName,
      ruleSchedulingId: item.id,
      sort: index
    };
  });

  let settingId = route.query.id
  if (route.query.id) {
    ruleSchedulingList = ruleSchedulingList.map(item => {
      item.settingId = settingId

      return item;
    })
    peopleList = peopleList.map(item => {
      item.settingId = settingId
      return item;
    })
  }


  return {
    id: settingId,
    ruleNumId: resultNumValue.value[0].value,
    ruleDictName: resultNumValue.value[0].label,
    ruleSchedulingList: ruleSchedulingList,
    peopleList: peopleList
  }

}

/**
 * 新增校验
 */
const checkBody = () => {
  let result = true;
  if (!resultNumValue.value.length) {
    result = false;
    ElMessage({
      message: '请选择班次.',
      type: 'warning',
    })
    return result;
  }
  //  模板校验
  if (schedulingTable.value.length % template.value.length == 0) {
    for (let index = 0; index < template.value.length; index++) {
      const element = template.value[index];
      const element1 = schedulingTable.value[index];
      if ((element.type == 0 && element1.id != 0) || (element.type != 0 && element1.id == 0)) {
        result = false;
        break;
      }
    }
  } else {
    result = false;
  }
  if (!result) {
    ElMessage({
      message: '排班规则与班次模板不匹配.',
      type: 'warning',
    })
    return result;
  }

  // 如果存在适用人员则检查开始时间
  if (peopleNowValueTable.value) {
    for (let index = 0; index < peopleNowValueTable.value.length; index++) {
      const element = peopleNowValueTable.value[index];
      if (!element.startDate) {
        ElMessage({
          message: `工号:${element.jobCode}的开始时间没有设置.`,
          type: 'warning',
        })
        result = false;
        return result;
      }
    }
  }
  return result;
}
// 监听open 清空对应信息
watch(open, (count, prevCount) => {
  if (!open.value) {
    resetDetail();
  }
})

// 重置必要信息
const resetDetail = () => {
  resultNumDetail.value = null;
  updateSchedulingFlag.value = false;
  peopleAddFlag.value = false;
}

onMounted(() => {
  //获取班次
  listNumAll().then(res => {
    res.data.forEach(item => {
      numOptions.value.push({
        value: item.id,
        label: item.ruleDictName,
        ruleType: item.ruleType,
        ruleWeek: item.ruleWeek,
      })
    });
  })
  // 获取规则
  listSchedulingAll().then(res => {
    schedulingOptions.value = res.data;
  })
  if (route.query.id) {
    getRuleNumBySettingId(route.query.id).then(res => {
      resultNumValue.value.push({
        value: res.data.id,
        label: res.data.ruleDictName,
        ruleType: res.data.ruleType,
        ruleWeek: res.data.ruleWeek,
      })
      numValue.value = resultNumValue.value[0];
      template.value = res.data.templateVos
    })
    // 获取id配置的规则
    getRuleSchedulingListVoBySettingId(route.query.id).then(res => {
      schedulingTable.value = res.data.map(item => {
        item.uid = createUUID();
        return item;
      })
    })
    getPeopleInfo({ id: route.query.id }).then((res) => {
      peopleNowValueTable.value = res.data
    })

  }
  // 获取当前排班的驾驶员列表 进入判断是否需要获取当前已设置考勤人员  根据跳转界面有无传入id
  // getPeopleInfo({ id: null }).then((res) => {
  //   console.log(res);
  // })
})

// 统一处理规则
function getSchedulingTableItem(val) {
  return { ...val, uid: createUUID() }
}

function createUUID() {
  return uuidv4().toString().replaceAll("-", "");
}


</script>


<style lang="scss" scoped>
.box-card {

  box-sizing: border-box;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.custom-form-item {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>