mky-vent-base/src/views/vent/gas/gasInspectNonfc/components/uploadOrdown.vue

<template>
    <div class="uploadOrdown">
        <a-form :model="formState" :label-col="{ span: 7 }" :wrapper-col="{ span: 14 }" autocomplete="off">
            <a-form-item label="巡检类型：">
                <JDictSelectTag v-model:value="formState.insType" placeholder="请选择巡检类型" dictCode="ins_type"
                    style="width: 240px" />
            </a-form-item>

            <a-form-item label="选择文件：" v-if="modalType == 'upload'">
                <a-upload :before-upload="beforeUpload" @remove="handleRemove" :multiple="false" :file-list="fileList">
                    <a-button type="primary" preIcon="ant-design:cloud-upload-outlined">选择文件</a-button>
                </a-upload>
            </a-form-item>
        </a-form>
        <div class="btn">
            <a-button class="btn-item" type="primary" @click="handlerComfirm">确定</a-button>

            <a-button class="btn-item" @click="handlerCancel">取消</a-button>
        </div>
    </div>
</template>

<script setup lang=ts>
import { ref, reactive, computed } from 'vue'
import { message } from 'ant-design-vue';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';

let props = defineProps({
    modalType: {
        type: String,
        default: ''
    }
})

let formState = reactive({
    insType: '',
})
let fileList = reactive<any[]>([])
let $emit = defineEmits(['handlerComfirm', 'handlerCancel'])

//选择文件
let beforeUpload = (file) => {
    console.log(file, '选中文件');
    fileList.length = 0;
    let index = file.name.indexOf('.');
    let name = file.name.substring(index + 1);
    if (name == 'png' || name == 'jpg' || name == 'gif' || name == 'psd' || name == 'webp') {
        message.warning('禁止上传图片类型的文件!');
    } else {
        fileList.push(file);
    }
};
// 文件移除
let handleRemove = (file) => {
    const index = fileList.indexOf(file);
    const newFileList = fileList.slice();
    newFileList.splice(index, 1);
    fileList.length = 0;
};

//确认
let handlerComfirm = () => {
    if (props.modalType == 'upload') {
        const formData = new FormData();
        formData.append('file', fileList[0]);
        formData.append('insType', formState.insType);
        $emit('handlerComfirm', formData)
    } else {
        $emit('handlerComfirm', formState)
    }
}
//取消
let handlerCancel = () => {
    formState.insType = ''
    $emit('handlerCancel', formState)
}
</script>

<style lang="less" scoped>
.uploadOrdown {
    position: relative;
    padding: 10px 15px;
    box-sizing: border-box;

    .btn {
        padding: 10px 10px 0px 10px;
        display: flex;
        justify-content: flex-end;

        .btn-item {
            margin: 0px 5px;
        }
    }
}

::v-deep .zxm-upload-list-item-name {
    color: #fff;
}

::v-deep .zxm-upload-list-item-name:hover {
    background-color: transparent !important;
}
</style>