admin-vben5/apps/web-antd/src/views/property/attendanceManagement/attendanceGroupSettings/change-shift-schedule.vue

<script setup lang="ts">

import {useVbenModal} from '@vben/common-ui';
import {shiftColumns} from './data';
import {shiftList} from "#/api/property/attendanceManagement/shiftSetting";
import {Table, Form, FormItem, Button, Input} from 'ant-design-vue';
import {reactive, ref} from 'vue'
import type {ShiftVO} from "#/api/property/attendanceManagement/shiftSetting/model";

const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: handleOpenChange,
  onClosed() {
  },
  onConfirm: handleConfirm,
});

const emit = defineEmits<{ shiftInfo: [info: ShiftVO], shiftList: [list: ShiftVO[]] }>();
const handleType = ref<number>(1);
const tableLoading = ref<boolean>(true);

async function handleConfirm() {
  try {
    modalApi.lock(true);
    if (state.selectedRowKeys.length) {
      let arr = shiftData.value.filter(item => state.selectedRowKeys.includes(item.id))
      if (handleType.value == 1 && arr.length) {
        await emit('shiftInfo', arr[0]);
      } else if (handleType.value == 2 && arr.length) {
        await emit('shiftList', arr);
      }
    }
    modalApi.close();
  } catch (error) {
    console.error(error);
  } finally {
    modalApi.lock(false);
  }
}

async function handleOpenChange(open: boolean) {
  if (!open) {
    return null;
  }
  state.selectedRowKeys = []
  handleType.value = modalApi.getData()?.type;
  await queryShiftData()
  modalApi.modalLoading(true);
  modalApi.modalLoading(false);
}

const shiftData = ref<ShiftVO[]>([])
const shiftName = ref<string>('')

async function queryShiftData() {
  tableLoading.value = true
  let params = {
    name: shiftName.value,
    pageNum: 1,
    pageSize: 1000
  }
  const res = await shiftList(params)
  shiftData.value = res.rows
  tableLoading.value = false
}

// 行勾选状态
const state = reactive({
  selectedRowKeys: [],
});

// 勾选变化时的回调
const onSelectChange = (selectedRowKeys: string[]) => {
  if (selectedRowKeys.length > 1 && handleType.value == 1) {
    state.selectedRowKeys = selectedRowKeys.slice(-1);
  } else {
    state.selectedRowKeys = selectedRowKeys;
  }
};
//重置操作
const resetHandle = () => {
  shiftName.value = ''
  queryShiftData()
}
</script>

<template>
  <BasicModal :fullscreen-button="false" title="选择班次" class="w-[70%]">
    <Form
      class="form-container"
      layout="inline"
    >
      <FormItem
        label="班次名称"
        name="username">
        <Input v-model:value="shiftName"></Input>
      </FormItem>

      <FormItem>
        <Button @click="resetHandle">重置</Button>
        <Button type="primary" style="margin-left: 20px" @click="queryShiftData">搜索</Button>
      </FormItem>
    </Form>
    <Table
      class="table-container"
      bordered
      :columns="shiftColumns"
      :data-source="shiftData"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange  }"
      size="small"
      :pagination="false"
      rowKey="id"
      :scroll="{ y: 350 }"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record,index }">
        <template v-if="column.dataIndex==='id'">
          {{ index + 1 }}
        </template>
        <template v-if="column.dataIndex==='attendanceTime'">
          <span v-if="record.isRest">
            {{ record.startTime + '~' + record.restStartTime }}&nbsp;
            {{ record.restEndTime + '~' + record.endTime }}
          </span>
          <span v-else>
            {{ record.startTime + '~' + record.endTime }}
          </span>
        </template>
      </template>
    </Table>
  </BasicModal>
</template>

<style scoped>
.table-container {
  min-height: 400px;
}

.form-container {
  padding: 10px 0 20px 0;
  font-size: 0.875rem;
  font-weight: 500;
}
</style>