打卡签到：修改部门选项，导出

huminmin

3 天以前 d264fc8d172da088aa71ce2d1e94b21ddb75d662

 src/views/personnelManagement/attendanceCheckin/index.vue

@@ -50,44 +50,47 @@
      </el-descriptions>
    </el-card>

    <!-- 查询条件（管理员考勤日报） -->
    <div class="search_form">
      <div>
        <span class="search_title">部门：</span>
        <el-select
          v-model="searchForm.deptId"
          placeholder="请选择部门"
          style="width: 180px"
          clearable
        >
          <el-option
            v-for="item in deptOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
    <div class="attendance-operation">
      <!-- 查询条件（管理员考勤日报） -->
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="部门：" prop="deptId">
          <el-tree-select
              v-model="searchForm.deptId"
              :data="deptOptions"
              :props="{ value: 'id', label: 'label', children: 'children' }"
              value-key="id"
              placeholder="请选择部门"
              check-strictly
              style="width: 200px"
          />
        </el-select>
        </el-form-item>

        <span class="search_title ml10">日期：</span>
        <el-date-picker
          v-model="searchForm.date"
          type="date"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          placeholder="请选择日期"
          clearable
        />
        <el-form-item label="日期：" prop="date">
          <el-date-picker
              v-model="searchForm.date"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              placeholder="请选择日期"
              clearable
          />
        </el-form-item>

        <el-button type="primary" @click="fetchData" style="margin-left: 10px">
          搜索
        </el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
      <div>
        <el-button icon="Download" @click="handleExport">
          导出考勤日报
        </el-button>
      </div>
        <el-form-item>
          <el-button type="primary" @click="fetchData">
            <el-icon><Search /></el-icon>
            搜索
          </el-button>
          <el-button @click="resetSearch">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <el-button icon="Download" @click="handleExport">
        导出考勤日报
      </el-button>
    </div>

    <!-- 考勤日报表格 -->
@@ -174,13 +177,16 @@

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  createPersonalAttendanceRecord,
  findPersonalAttendanceRecords, findTodayPersonalAttendanceRecord
} from "@/api/personnelManagement/personalAttendanceRecords.js";
import Pagination from "@/components/Pagination/index.vue";
import {deptTreeSelect} from "@/api/system/user.js";
import {Refresh, Search} from "@element-plus/icons-vue";

const { proxy } = getCurrentInstance()
const tableLoading = ref(false)
// 分页参数
const page = reactive({
@@ -192,12 +198,7 @@
const todayRecord = ref({})

// 部门选项
const deptOptions = [
  { label: "生产一部", value: "生产一部" },
  { label: "生产二部", value: "生产二部" },
  { label: "设备维护部", value: "设备维护部" },
  { label: "质检部", value: "质检部" },
];
const deptOptions = ref([])

// 查询表单
const searchForm = reactive({
@@ -261,10 +262,31 @@
  return "";
};

// 查询部门列表
const fetchDeptOptions = () => {
  deptTreeSelect().then(response => {
    deptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
  })
}

/** 过滤禁用的部门 */
function filterDisabledDept(deptList) {
  return deptList.filter(dept => {
    if (dept.disabled) {
      return false
    }
    if (dept.children && dept.children.length) {
      dept.children = filterDisabledDept(dept.children)
    }
    return true
  })
}


// 查询
const fetchData = () => {
  tableLoading.value = true
  findPersonalAttendanceRecords({...page, searchForm}).then((res) => {
  findPersonalAttendanceRecords({...page, ...searchForm}).then((res) => {
    tableData.value = res.data.records;
    page.value.total = res.data.total;
  }).finally(() => {
@@ -291,9 +313,18 @@
  fetchData();
};

// 导出（演示）
const handleExport = () => {
  ElMessage.success("当前为演示页面，导出功能未对接实际接口");
  ElMessageBox.confirm("是否确认导出？", "导出", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        proxy.download("/personalAttendanceRecords/export", {}, "考勤记录.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
};

// 打卡
@@ -316,6 +347,7 @@
  searchForm.date = `${Y}-${M}-${D}`;
  fetchData();
  fetchTodayData()
  fetchDeptOptions();
});

onBeforeUnmount(() => {
@@ -371,5 +403,10 @@
::v-deep(.row-abnormal) {
  background-color: #fff5f5;
}

.attendance-operation {
  display: flex;
  justify-content: space-between;
}
</style>