bonus-ui/src/views/business/businessHandling/directApply.vue

<template>
    <div class="app-container">
        <el-form :model="maForm" ref="maForm" size="small" :rules="rules" label-width="100px" :disabled="isDetail">
            <el-row :gutter="20" class="cont-center" style="margin-bottom: 20px">
                <el-col :span="7" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px; overflow-y: auto">
                        <!-- card body -->
                        <el-form-item label="转出单位" prop="backUnitId">
                            <treeselect
                                v-model="maForm.backUnitId"
                                :disabled="isEdit || isDetail"
                                :options="uniteList"
                                :normalizer="normalizer"
                                :show-count="true"
                                style="width: 240px"
                                :disable-branch-nodes="true"
                                noChildrenText="没有数据了"
                                noOptionsText="没有数据"
                                noResultsText="没有搜索结果"
                                placeholder="请选择转出单位"
                                @select="uniteChange"
                            />
                        </el-form-item>
                        <el-form-item label="转出工程" prop="backProId">
                            <treeselect
                                v-model="maForm.backProId"
                                :disabled="isEdit || isDetail"
                                :options="projectList"
                                :normalizer="normalizer"
                                :show-count="true"
                                style="width: 240px"
                                :disable-branch-nodes="true"
                                noChildrenText="没有数据了"
                                noOptionsText="没有数据"
                                noResultsText="没有搜索结果"
                                placeholder="请选择转出工程"
                                @select="projectChange"
                            />
                        </el-form-item>
                        <el-form-item label="转出人" prop="backMan">
                            <el-input
                                v-model="maForm.backMan"
                                placeholder="请输入转出人"
                                clearable
                                maxlength="50"
                                style="width: 240px"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="联系电话" prop="backPhone">
                            <el-input
                                v-model="maForm.backPhone"
                                placeholder="请输入联系电话"
                                clearable
                                maxlength="11"
                                style="width: 240px"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                    </el-card>
                </el-col>
                <el-col :span="2" :offset="0">
                    <div class="cont-center">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="require('@/assets/img/transform.png')"
                            fit="fit"
                        ></el-image>
                    </div>
                </el-col>
                <el-col :span="7" :offset="0">
                    <el-card shadow="always" :body-style="{ padding: '20px' }" style="min-width: 400px; overflow-y: auto">
                        <!-- card body -->
                        <el-form-item label="转入单位" prop="leaseUnitId">
                            <treeselect
                                v-model="maForm.leaseUnitId"
                                :disabled="isDetail"
                                :options="lessUniteList"
                                :normalizer="normalizer"
                                :show-count="true"
                                style="width: 240px"
                                :disable-branch-nodes="true"
                                noChildrenText="没有数据了"
                                noOptionsText="没有数据"
                                noResultsText="没有搜索结果"
                                placeholder="请选择转入单位"
                                @select="leaseUniteChange"
                            />
                        </el-form-item>
                        <el-form-item label="转入工程" prop="leaseProId">
                            <treeselect
                                v-model="maForm.leaseProId"
                                :disabled="isDetail"
                                :options="leaseProjectList"
                                :normalizer="normalizer"
                                :show-count="true"
                                style="width: 240px"
                                :disable-branch-nodes="true"
                                noChildrenText="没有数据了"
                                noOptionsText="没有数据"
                                noResultsText="没有搜索结果"
                                placeholder="请选择转入工程"
                                @select="leaseProjectChange"
                            />
                        </el-form-item>
                        <el-form-item label="转入人" prop="leaseMan">
                            <el-input
                                v-model="maForm.leaseMan"
                                placeholder="请输入转入人"
                                clearable
                                maxlength="50"
                                style="width: 240px"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                        <el-form-item label="联系电话" prop="leasePhone">
                            <el-input
                                v-model="maForm.leasePhone"
                                placeholder="请输入联系电话"
                                clearable
                                maxlength="11"
                                style="width: 240px"
                                @keyup.enter.native="handleQuery"
                            />
                        </el-form-item>
                    </el-card>
                </el-col>

                <el-col :span="8" :offset="0">
                    <el-form-item label="" prop="dirUrls">
                        <el-upload
                            :action="uploadUrl"
                            :file-list="maForm.dirUrls"
                            :show-file-list="true"
                            :auto-upload="true"
                            :headers="headers"
                            :key="uploadKey"
                            :limit="3"
                            list-type="picture-card"
                            accept=".png, .jpg, .jpeg, .pdf"
                            :before-upload="beforeUpload"
                            :on-change="handleChangeBusinessList"
                            :class="{ disabledFbs: uploadDisabled }"
                            :on-preview="picturePreviewFbs"
                            :on-remove="handleRemoveElectricianImgList"
                            :disabled="isDetail"
                        >
                            <!-- 文件格式下载，图片格式预览 -->
                            <div slot="file" slot-scope="{ file }">
                                <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="file.url"
                                    alt=""
                                />
                                <!-- <div v-else class="picture-card-container">
                                    <img class="picture-card" :src="urlTemp" alt="" />
                                    <p class="file-name">{{ file.name }}</p>
                                </div> -->
                                <span class="el-upload-list__item-actions">
                                    <!-- <span
                                        v-if="updataIf(file)"
                                        class="el-upload-list__item-delete"
                                        @click="handleDownload(file)"
                                    >
                                        <i class="el-icon-download" />
                                    </span> -->
                                    <span class="el-upload-list__item-preview" @click="picturePreviewFbs(file)">
                                        <i class="el-icon-zoom-in" />
                                    </span>
                                    <span
                                        v-if="!isDetail"
                                        class="el-upload-list__item-delete"
                                        @click="handleRemoveElectricianImgList(file)"
                                    >
                                        <i class="el-icon-delete" />
                                    </span>
                                </span>
                            </div>
                            <i class="el-icon-plus avatar-uploader-icon">
                                <div style="font-size: 14px; margin-top: 10px">上传图片</div>
                            </i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="mb8">
                <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" inline>
                    <el-form-item label="物资类型" prop="maId">
                        <treeselect
                            v-model="queryParams.maId"
                            :options="materialTypeOpts"
                            :normalizer="normalizer2"
                            :show-count="true"
                            style="width: 240px"
                            :disable-branch-nodes="true"
                            noChildrenText="没有数据了"
                            noOptionsText="没有数据"
                            noResultsText="没有搜索结果"
                            placeholder="请选择物资类型"
                            @select="selectMaType"
                        />
                    </el-form-item>

                    <el-form-item label="规格型号" prop="typeId">
                        <el-select v-model="queryParams.typeId" placeholder="请选择规格型号" clearable filterable>
                            <el-option
                                v-for="item in typeModelNameOpts"
                                :key="item.typeId"
                                :label="item.name"
                                :value="item.typeId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="关键字" prop="keyWord">
                        <el-input
                            v-model="queryParams.keyWord"
                            placeholder="请输入关键字"
                            clearable
                            @keyup.enter.native="handleQuery"
                        />
                    </el-form-item>

                    <!-- 表单按钮 -->
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleSave"
                            v-if="!isDetail"
                        >
                            {{ isEdit ? '保存' : '发起申请' }}
                        </el-button>
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-arrow-left"
                            size="mini"
                            @click="handleApplyRecord"
                        >
                            直转记录查看
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-form>

        <el-table
            v-loading="loading"
            ref="equipmentList"
            :data="equipmentList"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column align="center" label="序号" type="index" width="55" />
            <el-table-column
                v-for="(column, index) in tableColumns"
                :key="column.prop"
                :label="column.label"
                :prop="column.prop"
                align="center"
                show-overflow-tooltip
            >
                <template v-slot="scope" v-if="column.prop == 'directNum'">
                    <el-input-number
                        v-model="scope.row.directNum"
                        controls-position="right"
                        :precision="0"
                        style="width: 100%"
                        :disabled="isDetail || !scope.row.isActive"
                        :min="1"
                        @change="directNumChange(scope.row)"
                    ></el-input-number>
                </template>
            </el-table-column>

            <!-- <el-table-column label="操作" align="center" v-if="!isDetail">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" style="color: red" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column> -->
        </el-table>

        <!-- 图片查看弹窗 -->
        <el-dialog :visible.sync="dialogVisible" width="600px" height="600px">
            <img width="100%" height="500px" :src="dialogImageUrl" />
        </el-dialog>
    </div>
    
</template>

<script>
import { getMaTypeOpt } from '@/api/ma/base'
import { getListProject, getListUnite, getAgreement } from '@/api/lease/apply'
import { downloadFile, downloadFileData } from '@/utils/download'
import { getUseringData, receiveSubmit, receiveEdit, receiveDetail, getEquipmentThreeTypes } from '@/api/business/index'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getToken } from '@/utils/auth'

export default {
    name: 'DirectApply',
    dicts: ['purchase_task_status'],
    components: { Treeselect },
    data() {
        return {
            id: '',
            isEdit: false, // 是否编辑
            isDetail: false, // 是否查看
            // 遮罩层
            loading: false,
            loadingTwo: false,
            // 选中数组
            multipleSelection: [],
            // 回显选中数据
            multipleSelectionTemp: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            selectTreeProps: {
                children: 'children',
                label: 'name',
                // multiple: false,
                value: 'id'
                // multiple: true,
            },
            //租赁单位
            uniteList: [],
            lessUniteList: [],
            //租赁工程
            projectList: [],
            leaseProjectList: [],
            // 物资类型
            materialTypeOpts: [],
            // 类型规格
            typeModelNameOpts: [],
            // 表格数据
            equipmentList: [],
            // 表头
            tableColumns: [
                { label: '直转数量', prop: 'directNum' },
                { label: '类型名称', prop: 'typeName' },
                { label: '规格型号', prop: 'typeModelName' },
                { label: '设备编码', prop: 'maCode' },
                { label: '计量单位', prop: 'unitName' },
                { label: '在用数量', prop: 'useNum' },
                { label: '领料人', prop: 'leasePerson' },
                { label: '领料日期', prop: 'startTime' }
            ],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            rowData: {},
            unitId: null,
            projectId: null,
            // 查询参数
            queryParams: {
                maId: undefined, // 物资类型
                typeId: '', // 类型规格
                keyWord: ''
            },
            maForm: {
                backUnitId: undefined,
                backProId: undefined,
                backMan: '', // 转出人
                backPhone: '', // 联系电话
                backAgreementId: '', // 转出协议id
                backAgreementCode: '', // 转出协议编号
                leaseUnitId: undefined, // 转入单位
                leaseProId: undefined, // 转入工程
                leaseMan: '', // 转入人
                leasePhone: '', // 联系电话
                leaseAgreementId: '', // 转入协议id
                leaseAgreementCode: '', // 转入协议编号
                dirUrls: [] // 附件
            },
            // 表单参数
            form: {},
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            // 表单校验
            rules: {
                backUnitId: [
                    {
                        required: true,
                        message: '请选择转出单位',
                        trigger: 'blur'
                    }
                ],
                backProId: [
                    {
                        required: true,
                        message: '请选择转出工程',
                        trigger: 'blur'
                    }
                ],
                backMan: [
                    {
                        required: true,
                        message: '请输入转出人',
                        trigger: 'blur'
                    }
                ],
                backPhone: [
                    { required: true, message: '联系电话不能为空', trigger: 'blur' },
                    {
                        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur'
                    }
                ],
                leaseUnitId: [
                    {
                        required: true,
                        message: '请选择转入单位',
                        trigger: 'blur'
                    }
                ],
                leaseProId: [
                    {
                        required: true,
                        message: '请选择转入工程',
                        trigger: 'blur'
                    }
                ],
                leaseMan: [
                    {
                        required: true,
                        message: '请输入转入人',
                        trigger: 'blur'
                    }
                ],
                leasePhone: [
                    { required: true, message: '联系电话不能为空', trigger: 'blur' },
                    {
                        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
                        message: '请输入正确的手机号码',
                        trigger: 'blur'
                    }
                ],
                dirUrls: [
                    {
                        required: true, // 是否分包商(是：合同编号必填)
                        message: '请上传图片',
                        trigger: 'change'
                    }
                ]
            },
            urlTemp: '',
            delBusinessFileIdList: [],
            //图片查看弹窗
            dialogImageUrl: '',
            dialogVisible: false,
            uploadKey: Date.now(),
            uploadUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
            headers: { Authorization: 'Bearer ' + getToken() }
        }
    },
    computed: {
        //图片上传1张后，隐藏上传框
        uploadDisabled() {
            return this.maForm.dirUrls && this.maForm.dirUrls.length == 3
        }
    },
    created() {
        if (this.$route.query.type == 'edit') {
            this.isEdit = true
            this.isDetail = false
            this.id = this.$route.query.id
            const obj = Object.assign({}, this.$route, { title: '直转申请编辑' })
            this.$tab.updatePage(obj)
        } else if (this.$route.query.type == 'detail') {
            this.isEdit = false
            this.isDetail = true
            this.id = this.$route.query.id
            const obj = Object.assign({}, this.$route, { title: '直转申请详情' })
            this.$tab.updatePage(obj)
        } else {
            this.isEdit = false
            this.isDetail = false
            this.id = ''
            const obj = Object.assign({}, this.$route, { title: '直转申请' })
            this.$tab.updatePage(obj)
        }
        this.projectInfoList() // 单位工程下拉选
        if (this.isEdit || this.isDetail) {
            console.log('isEdit', this.isEdit)
            this.getTaskInfo()
        }
        console.log(this.$store, 'this.$store.getters')
        console.log(this.$route.query, 'this.$route.query')
    },
    watch: {
        // this.maForm.backAgreementId 变化时执行
        'maForm.backAgreementId': {
            handler: function (val, oldVal) {
                this.getMaTypeOpt()
            },
            deep: true
        }
    },
    methods: {
        // 查询
        handleQuery() {
            this.getList()
        },
        // 重置
        handleReset() {
            this.$refs.queryForm.resetFields()
            this.getList()
        },
        // 获取列表
        async getList() {
            try {
                const params = {
                    agreementId: this.maForm.backAgreementId,
                    ...this.queryParams
                }
                const res = await getUseringData(params)
                console.log('🚀 ~ 获取列表 ~ res:', res)
                this.equipmentList = res.data
                if (this.isEdit || this.isDetail) {
                    this.$nextTick(() => {
                        this.multipleSelection = this.multipleSelectionTemp
                        console.log('🚀 ~ 获取列表 ~ this.equipmentList:', this.multipleSelection)
                        this.multipleSelection.forEach(row => {
                            const foundRow = this.equipmentList.find(item => item.typeId === row.typeId)
                            console.log('🚀 ~ getList ~ foundRow:', foundRow)
                            if (foundRow) {
                                // 将 directNum 赋值给 foundRow
                                foundRow.directNum = row.directNum
                                // 调用 toggleRowSelection 方法选中行
                                this.$refs.equipmentList.toggleRowSelection(foundRow)
                            }
                        })
                    })
                }
            } catch (error) {
                console.log('🚀 ~ 获取列表 ~ error:', error)
                this.tableList = []
            }
        },
        // 获取物资类型
        async getMaTypeOpt() {
            try {
                const params = {
                    agreementId: this.maForm.backAgreementId
                }
                console.log('🚀 ~ getMaTypeOpt ~ params:', params)
                const res = await getEquipmentThreeTypes(params)
                console.log('🚀 ~ getMaTypeOpt ~ res:', res)
                this.materialTypeOpts = res.data
            } catch (error) {
                console.log('🚀 ~ getMaTypeOpt ~ error:', error)
            }
        },
        // 获取规格型号
        async getTypeModelNameOpt(type) {
            try {
                const params = {
                    typeId: type.typeId
                }
                const res = await getMaTypeOpt(params)
                console.log('🚀 ~ getTypeModelNameOpt ~ res:', res)
                this.typeModelNameOpts = res.data
            } catch (error) {
                console.log('🚀 ~ getTypeModelNameOpt ~ error:', error)
            }
        },
        // 获取协议id
        async getAgreementId() {
            try {
                const params = {
                    unitId: this.maForm.backUnitId,
                    projectId: this.maForm.backProId
                }
                const res = await getAgreement(params)
                console.log('🚀 ~ getAgreementId ~ res:', res)
                this.maForm.backAgreementId = res.data.agreementId
                this.maForm.backAgreementCode = res.data.agreementCode
                this.getList()
            } catch (error) {
                console.log('🚀 ~ getAgreementId ~ error:', error)
            }
        },
        async getLeaseAgreementId() {
            try {
                const params = {
                    unitId: this.maForm.leaseUnitId,
                    projectId: this.maForm.leaseProId
                }
                const res = await getAgreement(params)
                console.log('🚀 ~ getAgreementId ~ res:', res)
                this.maForm.leaseAgreementId = res.data.agreementId
                this.maForm.leaseAgreementCode = res.data.agreementCode
            } catch (error) {
                console.log('🚀 ~ getAgreementId ~ error:', error)
            }
        },
        // 查看领料记录
        handleApplyRecord() {
            this.$router.push({ path: '/business/businessHandlingRecord/directApplyRecord' })
        },
        /** 转换菜单数据结构 */
        normalizer(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.id,
                label: node.name,
                children: node.children
            }
        },
        normalizer2(node) {
            if (node.children && !node.children.length) {
                delete node.children
            }
            return {
                id: node.typeId,
                label: node.typeName,
                children: node.children
            }
        },
        selectMaType(val) {
            console.log('val', val)
            this.queryParams.typeModelName = ''
            this.typeModelNameOpts = []
            this.getTypeModelNameOpt(val)
        },
        uniteChange(val) {
            setTimeout(() => {
                getListProject({ unitId: this.maForm.backUnitId }).then(response => {
                    this.projectList = response.data
                    this.maForm.backProId = null
                })
            }, 500)
        },
        projectChange(val) {
            setTimeout(() => {
                getListUnite({}).then(response => {
                    this.uniteList = response.data
                })
                this.getAgreementId()
            }, 500)
        },
        leaseUniteChange(val) {
            setTimeout(() => {
                getListProject({ unitId: this.maForm.leaseUnitId }).then(res => {
                    this.leaseProjectList = res.data
                    this.maForm.leaseProId = null
                })
            }, 500)
        },
        leaseProjectChange(val) {
            setTimeout(() => {
                getListUnite({}).then(res => {
                    this.leaseUniteList = res.data
                })
                this.getLeaseAgreementId()
            }, 500)
        },
        /** 租赁单位和工程-下拉选 */
        projectInfoList() {
            if (!this.isEdit) {
                getListUnite({ projectId: null }).then(response => {
                    this.uniteList = response.data
                    this.lessUniteList = response.data
                })
                getListProject({ unitId: null }).then(response => {
                    this.projectList = response.data
                    this.leaseProjectList = response.data
                })
            } else {
                getListUnite({ projectId: null }).then(response => {
                    this.uniteList = response.data
                    this.lessUniteList = response.data
                })
                getListProject({ unitId: this.maForm.backUnitId }).then(response => {
                    this.projectList = response.data
                })
                getListProject({ unitId: this.maForm.leaseUnitId }).then(response => {
                    this.leaseProjectList = response.data
                })
            }
        },
        //获取任务详情--- 编辑回显数据
        async getTaskInfo() {
            const loading = this.$loading()
            try {
                const res = await receiveDetail({ id: this.id })
                console.log('🚀 ~ getTaskInfo ~ res:', res)
                this.maForm = res.data
                this.multipleSelectionTemp = res.data.directApplyDetails
                this.getList()
                console.log('🚀 ~ getTaskInfo ~ this.equipmentList:', this.equipmentList)
                loading.close()
            } catch (error) {
                console.log('🚀 ~ error:', error)
                loading.close()
            }
        },
        // 多选框选中数据
        handleSelectionChange(row) {
            console.log('选中了~', row)
            this.multipleSelection = row
            this.equipmentList.forEach(item => {
                if (this.multipleSelection.some(val => val.id === item.id)) {
                    item.isActive = true
                } else {
                    item.isActive = false
                }
            })
        },
        // 数量变更
        directNumChange(row) {
            if (row.directNum > row.useNum) {
                this.$message.error('直转数量不能大于领料数量')
                this.$nextTick(() => {
                    row.directNum = row.useNum
                })
            }
        },
        /** 保存按钮操作 */
        handleSave() {
            console.log('maForm', this.maForm)
            console.log('选中数据', this.multipleSelection)
            if (this.multipleSelection.length > 0) {
                this.$refs['maForm'].validate(valid => {
                    if (valid) {
                        this.$modal.confirm('是否确认申请').then(async () => {
                            const isPass = this.multipleSelection.every(item => {
                                return item.directNum
                            })
                            if (!isPass) {
                                this.$message.error('请填写直转数量且不能为0')
                                return
                            }

                            const loading = this.$loading()
                            try {
                                const params = {
                                    directApplyInfo: this.maForm,
                                    directApplyInfoDetails: this.multipleSelection
                                }
                                let fileList = []
                                console.log('params2222222222', params)
                                if (params.directApplyInfo.dirUrls.length > 0) {
                                    fileList = params.directApplyInfo.dirUrls.map(e => {
                                        if(e.response && e.response.code===200){
                                            return {
                                                name: e.response.data.name,
                                                url: e.response.data.url,
                                                type: e.response.data.url.substring(
                                                    e.response.data.url.lastIndexOf('.') + 1
                                                )
                                            } 
                                        }else{
                                            return {
                                                name: null,
                                                url: e.url, 
                                            }
                                        }
                                        // console.log("11111111111",e.response)
                                        // if (e.response.code === 200) {
                                        //     return {
                                        //         name: e.response.data.name,
                                        //         url: e.response.data.url,
                                        //         type: e.response.data.url.substring(
                                        //             e.response.data.url.lastIndexOf('.') + 1
                                        //         )
                                        //     }
                                        // }
                                    })

                                }

                                params.directApplyInfo.dirUrls = fileList

                                if (this.isEdit) {
                                    delete params.directApplyInfo.directApplyDetails
                                    console.log('🚀 ~ this.$modal.confirm ~ params:', params)
                                    const res = await receiveEdit(params)
                                    console.log('🚀 ~ handleSave ~ res:', res)
                                } else {
                                    const res = await receiveSubmit(params)
                                    console.log('🚀 ~ handleSave ~ res:', res)
                                }
                                this.$message.success('操作成功')
                                this.$refs['maForm'].resetFields()
                                this.equipmentList = []
                                this.multipleSelection = []
                                this.delBusinessFileIdList = []
                                loading.close()
                            } catch (error) {
                                console.log('🚀 ~ handleSave ~ error:', error)
                                loading.close()
                            }
                        })
                    }
                })
            } else {
                this.$modal.msgError('请先选择转出数据')
            }
        },
        // 上传图片
        handleChangeBusinessList(file, fileList) {
            console.log("iiiiiiiiiiiiiiiiii",file)
            console.log("ppppppppp",fileList)
            const fileListTemp = fileList.filter(item => {
                return item.uid != file.uid
            })
            const parts = file.name?.split('.')
            const extension = parts?.pop().toLowerCase()
            if (fileList.length > 3) {
                this.$message.warning('最多上传3张附件')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (!(extension === 'png' || extension === 'jpg' || extension === 'jpeg' || extension === 'pdf')) {
                this.$message.warning('文件格式不正确')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (file.size > 1024 * 1024 * 10) {
                this.$message.warning('文件大小不能超过10Mb')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (file.name.length > 40) {
                this.$message.warning('文件名长度不能超过40个字符')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            } else if (fileListTemp.some(item => item.name === file.name)) {
                this.$message.warning('文件名重复')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            }
            fileList.forEach(file => {
                if (extension === 'pdf') {
                    this.urlTemp = require('@/assets/file.png')
                }
            })
            this.maForm.dirUrls = fileList
            console.log('🚀 ~ handleChangeBusinessList ~ this.dirUrls:', this.dirUrls)
            // 手动触发表单验证
            this.$refs.maForm.validateField('dirUrls')
        },
        // 判断文件类型
        isImage(file) {
            this.urlTemp = require('@/assets/file.png')
            if (this.updataIf(file)) {
                return false
            } else {
                return true
            }
        },
        // 判断文件类型,图片预览，文件下载
        updataIf(e) {
            if (e.fileName) {
                const parts = e.fileName?.split('.')
                const extension = parts?.pop().toLowerCase()
                if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
                    return false
                } else {
                    return true
                }
            } else {
                const parts = e.url?.split('.')
                const extension = parts?.pop().toLowerCase()
                if (extension === 'png' || extension === 'jpeg' || extension === 'jpg') {
                    return false
                } else {
                    return true
                }
            }
        },
        beforeUpload(file) {
            const validExtensions = ['.png', '.jpg', '.jpeg', '.pdf'];
            const fileName = file.name.toLowerCase();
            const hasValidExtension = validExtensions.some(ext => fileName.endsWith(ext));

            if (!hasValidExtension) {
                this.$message.error('仅支持上传 .png, .jpg, .jpeg, .pdf 格式的文件');
                return false;
            }

            // 检查文件大小是否超过 10MB
            const isLt10M = file.size / 1024 / 1024 < 10;
            if (!isLt10M) {
                this.$message.error('文件大小不能超过 10MB');
                return false;
            }

            // 检查文件名长度是否超过 40 个字符
            if (file.name.length > 40) {
                this.$message.error('文件名长度不能超过 40 个字符');
                return false;
            }

            return true;
        },
        //上传组件-图片查看
        picturePreviewFbs(file) {
            console.log("xxxxxxxxxxxx",file)
            this.dialogImageUrl =file.response ? file.response.data.url : file.url.replaceAll('#', '%23')
            console.log("zzzzzzzzzz",this.dialogImageUrl)
            // const parts = file.name ? file.name:file.url.split('.')
            // console.log("yyyyyyyyy",parts)
            // const extension = parts?.pop()
            // if (extension === 'pdf') {
            //     const windowName = file.name ? file.name : file.url
            //     window.open(file.url, windowName)
            // } else {
                this.dialogVisible = true
            // }
        },
        //上传组件-图片删除
        handleRemoveElectricianImgList(file, fileList) {
            let sum = 0
            this.maForm.dirUrls.forEach((item, index) => {
                if (item.uid == file.uid) {
                    sum = index
                }
            })
            this.maForm.dirUrls.splice(sum, 1)
            if (file.status == 'success') {
                this.delBusinessFileIdList.push(file.url)
            }
            console.log('delBusinessFileIdList', this.delBusinessFileIdList)
        },
        handleDownload(file) {
            console.log(file)
            if (file.status === 'ready') {
                downloadFile({
                    fileName: file.name ? file.name : file.url,
                    fileData: file.raw,
                    fileType: 'application/vnd.ms-excel;charset=utf-8'
                })
            } else if (file.status === 'success') {
                downloadFileData({ fileName: file.url, fileUrl: file.url })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
//隐藏图片上传框的css
::v-deep .disabledFbs {
    .el-upload--picture-card {
        display: none;
        width: 100px;
        height: 100px;
    }
}
::v-deep .el-upload--picture-card {
    width: 100px;
    height: 100px;
}

::v-deep .el-upload-list__item {
    margin-bottom: 20px;
    overflow: unset !important;
    width: 103px;
    height: 103px;
}
::v-deep .el-upload-list__item-actions {
    overflow: unset !important;
    width: 100px;
    height: 100px;
}

.popper-select {
    .el-cascader-panel .el-scrollbar .el-checkbox {
        display: none;
    }

    .el-cascader-panel .el-scrollbar:nth-child(4) .el-checkbox {
        display: block !important;
    }
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.el-icon-arrow-down.is-reverse {
    transform: rotateZ(180deg);
}

// .el-tree {
//   max-height: 300px;
//   overflow-y: auto;
// }

::v-deep .highlight-text {
  background-color: #ffd04b;
  color: #000;
}

::v-deep .el-input-group__append {
    padding: 0;
    .el-button {
        padding: 0 10px;
        border: none;
        height: 100%;
        &:first-child {
            border-right: 1px solid #dcdfe6;
        }
        &[disabled] {
            color: #c0c4cc;
        }
    }
}

.type-select-dropdown {
    .el-select-dropdown__wrap {
        max-height: 400px !important;
    }

    .el-select-dropdown__item {
        height: auto;
        padding: 8px 20px;
        white-space: normal;
        word-break: break-all;
    }
}

.el-input-group__append {
    padding: 0;
    .el-button {
        padding: 0 10px;
        border: none;
        height: 100%;
        &:first-child {
            border-right: 1px solid #dcdfe6;
        }
        &[disabled] {
            color: #c0c4cc;
        }
    }
}

.el-upload-list__item-thumbnail {
    /* height: 145px !important; */
    width: 100px;
    height: 100px;
}

.picture-card-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.picture-card {
    width: 100%;
    height: 100%;
    object-fit: cover;
    justify-content: center;

    // border: 1px solid  #ddd;
    // border-radius: 4px;
}

.file-name {
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: -35px;
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #333;
    z-index: 999999;
}

.file-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
}

// 居中
.cont-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>