ezhizao_yzbh_vue/src/views/business/deduction/fileDialog.vue

<template>
    <el-dialog v-model="visible" :width="width" append-to-body draggable show-close :close-on-click-modal="false">
        <template #header>
            <div class="dialog-title-container">
                <span class="title-label" style="color: #fff;">
                    <el-icon>
                        <Document />
                    </el-icon> 附件信息</span>
                <!-- <el-icon @click="close">
            <Close />
          </el-icon> -->
            </div>
        </template>
        <div class="dialog-list-container">
            <!-- <img style="height: 148px; width: 148px" :src="`${baseUrl}/${form}`" class="avatar"
                @click="openEvidience('form')" /> -->
            <el-table ref="dbTable" :data="list" size="small" border header-row-class-name="list-header-row"
                row-class-name="list-row" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40" align="center" />
                <el-table-column type="index" label="序号" width="46" align="center" />
                <el-table-column label="文件名" prop="originalFileName" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        <el-button size="small" type="primary" link @click="openFile(scope.row)">{{
                            scope.row.originalFileName
                            }}</el-button>
                    </template>
                </el-table-column>
            </el-table>




            <div style="display: flex; justify-content: space-between; margin-top: 10px;margin-bottom: 10px;">
                <div>
                    补传文件
                </div>
                <div>
                    <el-upload action="#" :http-request="upload" :with-credentials="true" :show-file-list="false"
                        multiple>
                        <el-button size="small" type="primary" icon="Upload">点击上传</el-button>
                    </el-upload>
                </div>

            </div>
            <el-table ref="filesTable" :data="supplementList" size="small" border
                header-row-class-name="list-header-row">
                <el-table-column type="index" label="序号" width="47" align="center" />
                <el-table-column label="文件名" prop="originalFileName" align="center">
                    <template #default="scope">
                        <el-link :href="`${baseUrl}${scope.row.fileUrl}`" :underline="false" target="_blank"
                            type="primary">
                            {{ scope.row.originalFileName }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="47" align="center">
                    <template #default="scope">
                        <el-button link size="small" type="danger"
                            @click="handleDelFile(scope.row.id,scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div style="height: 100px;">

        </div>
        <!-- <pagination v-show="total > 0" :total="total" v-model:page="query.pageNum" v-model:limit="query.pageSize"
            @pagination="loadData" style="background-color: rgba(0, 0, 0, 0);" /> -->
    </el-dialog>
</template>
<script setup>
    import { reactive } from 'vue';
    import { listFile } from '@/api/system/file'
    import { saveFiles, remove } from "@/api/business/production/deduction";
    import { uploadFile } from "@/api/tool/file";
    const props = defineProps(
        {
            width: {
                type: String,
                default: '800px'
            }
        }
    )

    // import api from '@/api/biz/fileStorage'
    const data = reactive({
        visible: false,
        list: [],
        total: 0,
        query: {
            name: '',
            total: 0,
            pageSize: 15,
            pageNum: 1
        },
        selection: [],
        baseUrl: import.meta.env.VITE_APP_BASE_API,
        options: {}
    })
    const form = ref();
    const { visible, list, query, selection, baseUrl, options, total } = toRefs(data)
    const supplementList = ref([])
    function open(arg) {
        visible.value = true
        options.value = arg
        loadData()
    }
    /**
     * 对话框关闭 事件
     */
    function close() {
        visible.value = false
    }
    /**
     * 加载数据
     */
    const loadData = async () => {
        const res = await listFile({ ...query.value, ...options.value })
        list.value = res.rows
        total.value = res.total
        list.value = list.value.filter(item => {
            return item.supplement != 1
        })
        form.value = list.value[0].fileUrl

        supplementList.value = res.rows.filter(item => {
            return item.supplement === 1
        })

    }

    function upload(param) {
        const formData = new FormData();
        formData.append("file", param.file);
        uploadFile(formData).then((res) => {
            if (res.code === 200) {
                const file = {};
                file.fileName = res.originalFilename;
                file.url = res.url;
                file.originalFileName = res.originalFilename;
                file.fileUrl = res.fileName;
                file.masterId = options.value.masterId;
                file.supplement = 1;
                file.masterTableName = "biz_deduction";
                saveFiles(file)
                supplementList.value.push(file);

            }
        });
    }
    /**
     * 列表checkbox列选择 事件
     */
    function handleSelectionChange(selection) {
        selection.value = selection
    }
    function handleDelFile(id, index) {
        console.log(id, index);
        if (id == undefined) {
            supplementList.value.splice(index, 1);
        } else {
            let data = { id: id }
            remove(data).then(res => {
                if (res.code === 200) {
                    supplementList.value.splice(index, 1);
                }
            })
        }

    }
    function openEvidience() {
        
        window.open(`${baseUrl.value}/${form.value}`);
    }
    /**
     * 搜索 事件
     */
    function handleSearch() {
        loadData()
    }
    function openFile(attach) {
        window.open(`${baseUrl.value}/${attach.fileUrl}`, attach.fileName)
    }

    defineExpose({
        open
    })
</script>