ams_web/src/views/employee-information/components/EmployeeDetail.vue

<script lang="ts" setup>
/**
 * @Name: EmployeeDetail.vue
 * @Description: 电脑信息-当前
 * @Author: xinyan
 */
import { useResponse } from '/@/utils/useResponse';
import { EmployeeShopColumns, EmployeeComputerColumns } from '/@/views/employee-information/useColumns';
import * as api from '../api';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { useTableData } from '/@/utils/useTableData';
import { usePagination } from '/@/utils/usePagination';

const route = useRoute();
const id = route.query.id;
const employeeOverview: any = ref([]);
const overviewLoading = ref();
const currentView = ref('shop');
const { tableOptions, handlePageChange } = usePagination(fetchEmployeeData);

const gridOptions: any = reactive({
  border: 'inner',
  round: true,
  stripe: true,
  shopRowHighLight: true,
  height: 700,
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: 'toolbar_buttons',
      // tools: 'toolbar_tools'
    },
  },
  rowConfig: {
    isHover: true,
  },
  columnConfig: {
    resizable: true,
  },
  // pagerConfig: {
  //   total: tableOptions.value.total,
  //   page: tableOptions.value.page,
  //   limit: tableOptions.value.limit,
  // },
  loading: false,
  loadingConfig: {
    icon: 'vxe-icon-indicator roll',
    text: '正在拼命加载中...',
  },
  columns: EmployeeShopColumns,
  data: [],
});

// function pageChange({ pageSize, shopPage }: any) {
//   gridOptions.pagerConfig.limit = pageSize;
//   gridOptions.pagerConfig.page = shopPage;
//   fetchEmployeeData();
// }

// 当前信息、历史记录
async function fetchEmployeeData(view) { // 默认为当前视图
  const query = {
    // page: gridOptions.pagerConfig.page,
    // limit: gridOptions.pagerConfig.limit,
  };

  switch (view) {
    case 'shop':
      gridOptions.columns = EmployeeShopColumns;
      currentView.value = 'shop';
      query.id = id;
      await useTableData(api.getShopTableData, query, gridOptions);
      break;
    case 'computer':
      gridOptions.columns = EmployeeComputerColumns;
      currentView.value = 'computer';
      query.id = id;
      await useTableData(api.getComputerTableData, query, gridOptions);
      break;
  }
}

function switchView(view) {
  if (view !== currentView.value) { // 只有在不同的视图时才切换
    fetchEmployeeData(view); // 调用 fetchEmployeeData 来加载新的视图数据
  }
}

async function fetchEmployeeDetailOverview() {
  const res = await useResponse(id, api.getEmployeeDetailOverview, overviewLoading);
  employeeOverview.value = res.data;
}

const getImageSrc = () => {
  // 如果 `images` 有值，则返回第一张图片的 URL；否则返回占位图
  return employeeOverview.value.images && employeeOverview.value.images.length > 0
      ? employeeOverview.value.images[0].image_url
      : 'https://via.placeholder.com/150';
};

// 表格样式
const cellStyle = () => {
  return {
    fontSize: '12px',
    fontWeight: '600',
  };
};

const headerCellStyle = () => {
  return {
    fontSize: '12px',
  };
};

onMounted(() => {
  fetchEmployeeData(currentView.value);
  fetchEmployeeDetailOverview();
});
</script>

<template>
  <div class="p-2.5">
    <!-- overview-card -->
    <el-card v-loading="overviewLoading" body-class="flex items-center" shadow="hover" style="border: none">
      <el-image :src="getImageSrc()" class="mr-7 rounded-2xl" style="height: 100px; width: 100px; object-fit: contain">
        <template #error>
          <div class="mr-3.5 flex items-center justify-center text-5xl" style="height: 100px; width: 100px; background-color: #f5f5f5">
            <el-icon>
              <icon-picture />
            </el-icon>
          </div>
        </template>
      </el-image>
      <el-col :span="18">
        <div class="info-container text-lg">
          <div class="info-column">
            <div class="font-semibold">
              姓名:
              <span class="font-medium italic ml-1.5" style="color: #64748b">{{ employeeOverview.name }}</span>
            </div>
            <div class="font-semibold">
              所属部门:
              <span class="font-medium italic ml-1.5" style="color: #64748b">{{ employeeOverview.department }}</span>
            </div>
            <div class="font-semibold">
              电话:
              <span class="font-medium italic ml-1.5" style="color: #64748b">{{ employeeOverview.phone }}</span>
            </div>
            <div class="font-semibold">
              邮箱:
              <span class="font-medium italic ml-1.5" style="color: #64748b">{{ employeeOverview.email }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-card>
    <!-- table-card -->
    <el-card body-style="padding-top: 10px" class="mt-2.5" shadow="hover" style="border: none">
      <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" v-bind="gridOptions">
        <template #toolbar_buttons>
          <el-button :type="currentView === 'shop' ? 'primary' : 'default'" @click="switchView('shop')"> 店铺信息 </el-button>
          <el-button :type="currentView === 'computer' ? 'primary' : 'default'" @click="switchView('computer')"> 电脑信息 </el-button>
        </template>
        <!--<template #pager>-->
        <!--  <vxe-pager-->
        <!--      v-model:currentPage="gridOptions.pagerConfig.page"-->
        <!--      v-model:pageSize="gridOptions.pagerConfig.limit"-->
        <!--      :total="gridOptions.pagerConfig.total"-->
        <!--      size="small"-->
        <!--      @page-change="handlePageChange"-->
        <!--  >-->
        <!--  </vxe-pager>-->
        <!--</template>-->
      </vxe-grid>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.info-container {
  display: flex;
  justify-content: space-between;
}

.info-column {
  flex: 1;
  padding: 0 10px;
}

p {
  margin: 5px 0;
}
</style>