web_dist/src/views/technology-archives/TechnologyArchivesSearch.vue

<template>
  <div class="layout_container">
    <header>
      <el-input v-model="text" class="w-50 m-2" style="width: 360px" placeholder="请输入工号/身份证号/姓名" clearable>
        <template #prepend>工号/身份证号/姓名 </template>
      </el-input>
      <el-select v-model="textType" placeholder="请选择文档类型" clearable style="width: 160px;margin-left: 3px">
        <el-option v-for="item in typeList" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
      <el-button type="primary" icon="Search" @click="queryTechnologyArchivesInfo" style="margin-left: 10px">查询</el-button>
      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
    </header>
    <div class="layout_main">
      <div class="layout_display_flex_y">
        <div class="layout_flex_1-y layout_el-table">
          <el-table :data="technologyArchivesData.slice(pageSize * (currentPage - 1), pageSize * currentPage)"
            stripe border highlight-current-row row-key="childKey" style="width: 100%">
            <el-table-column type="index" label="序号" align="center" fixed></el-table-column>
            <el-table-column prop="id" label="id" v-if="false"></el-table-column>
            <template v-for="col in displayData">
              <el-table-column v-if="col.columns" :prop="col.name" :label="col.display"
                :width="col.width" :align="col.align">
                <template v-for="cell in col.columns">
                  <el-table-column v-if="col.show" :prop="cell.name" :label="cell.display"
                    :width="cell.width" :align="cell.align" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column v-else :prop="cell.name" :label="cell.display"
                    :width="cell.width" :align="cell.align">
                  </el-table-column>
                </template>
              </el-table-column>
              <el-table-column v-else-if="col.show" :prop="col.name" :label="col.display" :width="col.width"
                :align="col.align" show-overflow-tooltip>
              </el-table-column>
              <el-table-column v-else-if="col.name === 'xm'" :prop="col.name" :label="col.display" :width="col.width" :align="col.align" fixed>
              </el-table-column>
              <el-table-column v-else :prop="col.name" :label="col.display" :width="col.width" :align="col.align">
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div>
          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
             :total="technologyArchivesData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
             @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="TechnologyArchivesSearch">
import {nextTick, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {
  exportTechnologyArchivesInfo,
  selectTechnologyArchivesInfo,
  selectTechnologyArchivesType
} from "@/api/technology-archives/technology-archives";
import {useUserStore} from "@/pinia/user-store";

let param = ref({
  textType: '',
  text: '',
  exportName: ''
})
const userInfo = useUserStore().userInfo
const text = ref('')
const textType = ref('tamain')
const technologyArchivesData = ref([])
const displayData = ref([])
const pageSize = ref(30)
const currentPage = ref(1)
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}
onMounted(() => {
  nextTick(() => {
    queryAcType()
    queryTechnologyArchivesInfo()
  })
})
const typeList = ref([])
const queryAcType = () => {
  selectTechnologyArchivesType("all")
    .then((res) => {
      if(res){
        typeList.value = res.taList
      }
    })
}
const queryTechnologyArchivesInfo = async () => {
  if(!textType.value){
    ElMessage({
      type: "warning",
      message: '请选择文档类型！',
      duration: 2500,
      showClose: true,
    });
    return
  }
  param.value.textType = textType.value
  param.value.text = text.value
  await selectTechnologyArchivesInfo(param.value)
    .then((res) => {
      if(res){
        technologyArchivesData.value = res.taData
        displayData.value = res.displayData
      }
    })
}

// 导出档案信息
const exportData = () => {
  if (technologyArchivesData.value.length <= 0) {
    ElMessage({
      message: '没有可以导出的数据！',
      type: 'warning',
      duration: 2500,
      showClose: true,
    })
    return
  }
  let p = typeList.value.filter((item) => {
    return item.code === textType.value
  })
  param.value.exportName = p[0].name
  exportTechnologyArchivesInfo(param.value)
}
</script>