hac/src/views/people/company-rule.vue

<template>
    <HcCard title="公司制度数据">
        <template #extra>
            <el-button hc-btn type="primary" @click="addUploadFile">
                上传新制度
            </el-button>
        </template>
        <HcTable :column="tableColumn" :datas="tableData" :table-loading="tableLoading">
            <template #originalName="{ row }">
                <div class="text-link text-blue" @click="viewPdf(row)">
                    {{ row?.originalName }}
                </div>
            </template>
            <template #action="{ row, index }">
                <el-button type="primary" size="small" @click="replaceUploadFile(row)">
                    重新上传
                </el-button>
            </template>
        </HcTable>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange" />
        </template>

        <!-- 上传组件 -->
        <HcUploadFile ref="uploadFileRef" :options="uploadOptions" :params="uploadParams" @success="uploadFileSuccess" />
    </HcCard>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import { getTokenHeader } from '~src/api/request/header'
import mainApi from '~api/people/companyRule.js'
import { getArrValue } from 'js-fast-way'

onActivated(() => {
    getTableData()
})

const searchForm = ref({
    current: 1, size: 20, total: 0,
})
//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表格数据
const tableColumn = [
    { key: 'originalName', name: '制度名称' },
    { key: 'action', name: '操作', width: 120 },
]
const tableData = ref([])

//获取表格数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    const { error, code, data } = await mainApi.getPage(searchForm.value)
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data['records'])
        searchForm.value.total = data['total'] || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

//上传配置
const uploadFileRef = ref(null)
const uploadParams = ref({})
const uploadOptions = {
    url: '/api/blade-control/corporationinfo/put-corporationinfo',
    headers: getTokenHeader(),
    multiple: false,
    size: 50,
}

//新增上传
const addUploadFile = () => {
    uploadParams.value = {}
    uploadFileRef.value?.selectFile()
}

//重新上传
const replaceUploadFile = (row) => {
    uploadParams.value = { id: row.id }
    uploadFileRef.value?.selectFile()
}

//上传完成
const uploadFileSuccess = (res) => {
    uploadFileRef.value?.setModalShow(false)
    getTableData()
}

//查看pdf
const viewPdf = ({ linkUrl }) => {
    if (linkUrl) {
        window.open(linkUrl, '_blank')
    } else {
        window.$message.error('暂无文件')
    }
}
</script>

<style lang='scss' scoped>

</style>