duty-management-web/src/views/system/sign-manage/index.vue

<template>
  <div class="__normal-page">
    <div class="__normal-content">
      <CusContent
          v-model:tableHead="tableHead"
          @handleReset="handleReset"
          @handleSearch="onSearch"
      >
        <template #fieldOut>
          <CusForm labelWidth="100px" @handleEnter="onSearch">
            <CusFormColumn
                label="席位编号:"
                v-model:param="queryForm.seatSerialNumber"/>
            <CusFormColumn
                label="单位:"
                link="select"
                v-model:param="queryForm.deptId"
                :options="$store.state.dictionary.deptList"/>
            <CusFormColumn
                label="值班员:"
                v-model:param="queryForm.dutyPerson"/>
            <CusFormColumn
                label="联系方式:"
                v-model:param="queryForm.linkPhone"/>
            <CusFormColumn
                label="签卡类型:"
                link="select"
                v-model:param="queryForm.type"
                :options="$store.state.dictionary.signTypeList"/>
            <CusFormColumn
                label="签卡状态:"
                link="select"
                v-model:param="queryForm.status"
                :options="$store.state.dictionary.signStatusList"/>
            <CusFormColumn
                label="签卡时间:"
                link="datetime"
                type="datetimerange"
                v-model:param="queryForm.signTime"/>
            <CusSearchButtons
                @handleReset="handleReset"
                @handleSearch="onSearch"
            />
          </CusForm>
        </template>
        <template #buttons>
          <div class="__cus-button_submit __hover" @click="onExport">
            <SvgIcon name="export" size="16"/>导出
          </div>
        </template>
        <template #table>
          <CusTable
              v-loading="loading"
              ref="ref_cusTable"
              :tableData="queryResult.tableData"
              :tableHead="tableHead"
              :total="queryResult.total"
              :page="queryPage.pageNum"
              :pageSize="queryPage.pageSize"
              v-model:selected="selected"
              @handlePage="handlePage"
          >
            <template #type-column-value="{ scope }">
              {{$store.state.dictionary.signTypeMap.get(scope.row.type) || scope.row.type}}
            </template>
            <template #status-column-value="{ scope }">
              <span :style="`color: ${$store.state.dictionary.signStatusColor.get(scope.row.status)};`">{{$store.state.dictionary.signStatusMap.get(scope.row.status) || scope.row.status}}</span>
            </template>
          </CusTable>
        </template>
      </CusContent>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage} from "element-plus";
import {getSignList, signExport} from "@/api/modules/sign";
import {downLoadBlob} from "@/utils/downLoadUrl";

export default defineComponent({
  name: '',
  components: {},
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      //  加载中
      loading: false,
      //  查询分页参数
      queryPage: {
        pageNum: 1,
        pageSize: 10
      },
      //  查询结果
      queryResult: {
        total: 0,
        tableData: []
      },
      //  查询表单参数
      queryForm: <any>{},
      //  查询表单参数备份
      back_queryForm: {},
      //  表格表头
      tableHead: [
        {value: "unitName", label: "单位", show: true},
        {value: "seatSerialNumber", label: "席位编号", show: true},
        {value: "dutyPerson", label: "值班员", show: true},
        {value: "linkPhone", label: "联系方式", show: true, width: 120},
        {value: "type", label: "签卡类型", show: true},
        {value: "status", label: "签卡状态", show: true},
        {value: "time", label: "签卡时间", show: true, width: 180},
        {value: "signTime", label: "考勤时间", show: true, width: 180},
      ],
      selected: []
    });
    const ref_cusTable = ref()
    //  获取字典
    const initDictionary = () => {
      store.dispatch('dictionary/LOAD_DEPT')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'sign_type')
      store.dispatch('dictionary/LOAD_DICT_LIST', 'sign_status')
    }
    //  查询分页参数改变处理方法
    const handlePage = ({page, pageSize}: any) => {
      state.queryPage.pageNum = page
      state.queryPage.pageSize = pageSize
      handleSearch(page, pageSize)
    }
    //  列表刷新方法
    const refreshSearch = () => {
      state.queryPage.pageNum = 1
      handleSearch(state.queryPage.pageNum, state.queryPage.pageSize)
    }
    //  重置查询表单方法
    const handleReset = () => {
      state.queryForm = {}
      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
      refreshSearch()
    }
    //  查询方法
    const handleSearch = (page = 1, pageSize = 10) => {
      //  添加分页参数
      const queryParams: any = {
        pageNum: page,
        pageSize: pageSize,
      }
      //  添加表单参数
      for (const [k, v] of Object.entries(state.back_queryForm)) {
        if (that.$util.isValue(v)) {
          if (k === 'signTime') {
            queryParams['beginTime'] = v[0]
            queryParams['endTime'] = v[1]
          } else {
            queryParams[k] = v
          }
        }
      }
      state.loading = true
      that.$api.getSignList(queryParams).then((res: any) => {
        if (res.code === 200) {
          state.queryResult.tableData = res.rows
          state.queryResult.total = res.total
        } else {
          ElMessage.error(res.message)
        }
        state.loading = false
      }).catch(() => {
        state.loading = false
      })
    }
    //  点击查询按钮后
    const onSearch = () => {
      ref_cusTable.value.resetFilter()
      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
      refreshSearch()
    }
    const onExport = () => {
      const queryParams: any = {
      }
      if (state.selected.length > 0) {
        queryParams['ids'] = state.selected.map(v => v.id)
      } else {
        //  添加表单参数
        for (const [k, v] of Object.entries(state.back_queryForm)) {
          if (that.$util.isValue(v)) {
            if (k === 'signTime') {
              queryParams['beginTime'] = v[0]
              queryParams['endTime'] = v[1]
            } else {
              queryParams[k] = v
            }
          }
        }
      }
      that.$api.signExport(queryParams).then(res => {
        downLoadBlob(res, '签卡记录.xlsx')
        ElMessage.success('导出成功！')
      }).catch(() => {
        ElMessage.error('导出失败！')
      })
    }
    onMounted(() => {
      state.back_queryForm = JSON.parse(JSON.stringify(state.queryForm))
      initDictionary()
      refreshSearch()
    })
    return {
      ref_cusTable,
      ...toRefs(state),
      handleSearch,
      handlePage,
      handleReset,
      onSearch,
      onExport,
      refreshSearch
    }
  },
})
</script>

<style scoped lang="scss">
</style>