Zlpt_Portal/src/views/user/goodsManagement/index.vue

<script setup lang="ts">
import TableComponent from 'components/TableComponent/index.vue'
import FormComponent from 'components/FormComponent/index.vue'
import PagingComponent from 'components/PagingComponent/index.vue'
import uploadComponent from 'components/uploadComponent/index.vue'
import previewImg from './previewImg/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { ref } from 'vue'
import { useStore } from 'store/user'
const store = useStore()
import { mainStore } from 'store/main'
const store2 = mainStore()
import {
    getEquipmentTypeApi, //装备类型
    getCompanyListApi, //所属公司
    getEquipmentListApi, //列表
    getDetailApi, //详情
    equipmentAddApi, //新增
    insertDraftApi, //草稿（编辑）
    removeDeviceApi, //删除
    updateUpDownApi, //上下架
} from 'http/api/usercenter/goodsmang'

// 注册地址拼装
const AssemblyRegisterAddress: any = reactive([])
const deviceType: any = reactive([])

onMounted(() => {
    // 获取装备树
    getTypeTreeData()
    // 获取下拉
    getCompanyList()
    // 获取省级数据
    // store.getprovinceList()
    // 获取设备类型
    // store.getDeviceTypeList()
})
// 设备类型树
const deviceTypeTree: any = ref([])
const partTypeTreeProps: any = ref({
    children: 'children',
    label: 'name',
    multiple: false,
    value: 'id',
})
// 获取装备树
const getTypeTreeData = async () => {
    const res: any = await getEquipmentTypeApi()
    console.log('treeData==========', res)
    deviceTypeTree.value = res.data
}
//装备类目-change
const deviceTypeChange = (val: any) => {
    console.log(val)
    if (val.length > 0) {
        queryParams.value.typeId = val[3]
    } else {
        queryParams.value.typeId = ''
    }
}
//反显 树结构数据获取父
const getSelectId = (list: any, id: any) => {
    for (let i in list) {
        if (list[i].id == id) {
            //查询到就返回该数组对象的value
            return [list[i].id]
        }
        if (list[i].children) {
            let node: any = getSelectId(list[i].children, id)
            if (node !== undefined) {
                //查询到把父节把父节点加到数组前面
                node.unshift(list[i].id)
                return node
            }
        }
    }
}

/* 装备树选中数组 */
const deviceTypeList: any = ref([])
//日期周期
const dateRange: any = ref([])
/* 查询参数 */
const queryParams: any = ref({
    deviceName: '',
    code: '',
    maStatus: '',
    typeId: '',
    pageSize: 10,
    pageNum: 1,
})
const queryFormRef = ref<FormInstance>()
const total: any = ref(0)
const tableData: any = ref([])
/* 查询按钮 */
const queryTableList = () => {
    queryParams.value.pageNum = 1
    getList()
}
// 重置
const resetTableList = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    dateRange.value = []
    deviceTypeList.value = []
    queryParams.value.typeId = null
    queryTableList()
}
// 获取数据列表
const getList = async () => {
    console.log(queryParams.value.pageNum, '***9999', queryParams.value.pageSize)
    const res: any = await getEquipmentListApi(queryParams.value)
    console.log(res, '列表数据**--**')
    total.value = res.total
    tableData.value = res.rows.filter((item: any) => item !== null)
}
// 获取数据列表
getList()

//---列表按钮事件---
// 装备新增按钮
const equipmentDeployment = () => {
    settleinTitle.value = '新增装备'
    disabledForm.value = false
    isEditDisabled.value = true
    equipmentDeploymentParams.value = {
        deviceName: '',
        deviceTypeList: [],
        deviceCount: 1,
        unitName: '',
        code: '',
        brand: '',
        typeId: '',
        companyId: '',
        productionDate: '',
        dayLeasePrice: '',
        person: '',
        personPhone: '',
        deviceWeight: '',
    }
    mainFileList.value = []
    detailsFileList.value = []
    insurancePdf.value = []
    examinationPdf.value = []
    // 打开入驻弹框
    dialogFormVisibleSettlein.value = true
}

const maId: any = ref('')
// 编辑按钮
const editRowInfo = (row: any) => {
    settleinTitle.value = '装备编辑'
    getDetailData(row)
    disabledForm.value = false
    isEditDisabled.value = true
}
/* 查看按钮 */
const previewRowInfo = (row: any) => {
    settleinTitle.value = '装备详情'
    getDetailData(row)
    disabledForm.value = true
    isEditDisabled.value = false
}
// 删除按钮
const deleteRowInfo = async (row: any) => {
    ElMessageBox.confirm('是否确定删除？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            return removeDeviceApi([row.maId])
        })
        .then((res) => {
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                getList()
            }
        })
        .catch(() => {})
}
//获取详情接口
const getDetailData = async (row: any) => {
    console.log(row, '----row----')
    maId.value = row.maId
    const res: any = await getDetailApi(row.maId)
    console.log(res, '----detail----')
    equipmentDeploymentParams.value = res.data
    equipmentDeploymentParams.value.companyId = Number(res.data.companyId)
    mainFileList.value = res.data.mainFileList
    detailsFileList.value = res.data.detailsFileList
    insurancePdf.value = res.data.insurancePdf
    examinationPdf.value = res.data.examinationPdf
    //反显 装备树
    equipmentDeploymentParams.value.deviceTypeList = getSelectId(
        deviceTypeTree.value,
        equipmentDeploymentParams.value.typeId,
    )
    dialogFormVisibleSettlein.value = true
    // equipmentDeploymentParams.value.cityId = String(equipmentDeploymentParams.value.cityId)
    // equipmentDeploymentParams.value.areaId = String(equipmentDeploymentParams.value.areaId)
    // equipmentDeploymentParams.value.provinceId = String(
    //     equipmentDeploymentParams.value.provinceId
    // )
    // equipmentDeploymentParams.value.leaseScope = String(
    //     equipmentDeploymentParams.value.leaseScope
    // )
    // equipmentDeploymentParams.value.groupId = Number(equipmentDeploymentParams.value.groupId)
    // equipmentDeploymentParams.value.typeId = Number(equipmentDeploymentParams.value.typeId)
    // store.getprovinceList()
    // store.getmarketList(row.provinceId)
    // store.getareaList(row.cityId)
    // store.getDeviceTypeList()
    // store.getDeviceTypeSonList(row.companyId)
    // store.getDeviceTypeSunList(row.groupId)
}

const ids: any = ref([])
const handleSelectionChange = (selection: any) => {
    ids.value = selection.map((item: any) => item.maId)
}
// 上下架（批量）
const handleUpdateUpDown = (row: any, maStatus: any) => {
    ElMessageBox.confirm('是否确定操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            let maIds = []
            if (!row) {
                maIds = ids.value
            } else {
                maIds.push(row.maId)
            }
            if (maIds.length == 0) {
                ElMessage({ type: 'error', message: '请选择要操作的数据' })
                return
            }
            return updateUpDownApi({ maIds, maStatus })
        })
        .then((res) => {
            if (res.code == 200) {
                ElMessage({
                    type: 'success',
                    message: '操作成功',
                })
                getList()
            }
        })
        .catch(() => {})
}

// // 省级数据源
// const selProvinceList: any = computed(() => {
//     return store.provinceList
// })

// // 获取市级数据源
// const selMarketList: any = computed(() => {
//     return store.marketList
// })

// // 获取区级数据源
// const selAreaList: any = computed(() => {
//     return store.areaList
// })

// // 设备类型大类
// const selDeviceTypeList: any = computed(() => {
//     return store.deviceTypeList
// })

// // 设备类型子类
// const selDeviceTypeSonList: any = computed(() => {
//     return store.deviceTypeSonList
// })

// // 设备类型小类
// const selDeviceTypeSunList: any = computed(() => {
//     return store.deviceTypeSunList
// })

// // 省级下拉框选中时获取市级
// const changeProvince = (val: any) => {
//     // console.log(val, '省选择**')
//     store.getmarketList(val.split(',')[0])

//     // AssemblyRegisterAddress[0] = val.split(',')[1]
// }
// // 市级下拉框选中获取区级数据
// const changeMarket = (val: any) => {
//     store.getareaList(val.split(',')[0])
//     // AssemblyRegisterAddress[1] = val.split(',')[1]
// }
// // 区级下拉框获取区级数据
// const opeChangeArea = (val: any) => {
//     // AssemblyRegisterAddress[2] = val.split(',')[1]
// }
// // 设备类型大类
// const changeDeviceType = (val: any) => {
//     store.getDeviceTypeSonList(val)
//     // deviceType[0] = val.split(',')[1]
// }
// // 设备类型子类
// const changeDeviceTypeSon = (val: any) => {
//     store.getDeviceTypeSunList(val)
//     // deviceType[1] = val.split(',')[1]
// }
// // 设备类型小类
// const changeDeviceTypeSun = (val: any) => {
//     // deviceType[2] = val.split(',')[1]
// }

/*
        ----装备弹窗-----
    */
/* 查看 */
const disabledForm = ref(false)
/* 编辑 */
const isEditDisabled = ref(false)
/* 入驻框的标题 */
const settleinTitle = ref('')
//所属公司
const companyDataList: any = ref([])
/*
 *  商品入驻弹框参数
 */
const equipmentDeploymentParams: any = ref({
    deviceName: '',
    deviceTypeList: [],
    deviceCount: 1,
    unitName: '',
    code: '',
    brand: '',
    typeId: '',
    companyId: '',
    productionDate: '',
    dayLeasePrice: '',
    person: '',
    personPhone: '',
    deviceWeight: '',
})
//编码类型禁止修改数目
const countDisabled = ref(false)
//装备类目-change
const dialogTypeCascader = ref()
//装备类目-change
const dialogTypeChange = () => {
    const deviceTypeList = dialogTypeCascader.value.getCheckedNodes()
    console.log(deviceTypeList)
    equipmentDeploymentParams.value.unitName = deviceTypeList[0].data.unitName
    let manageType = deviceTypeList[0].data.manageType
    if (manageType == '1') {
        //数量
        equipmentDeploymentParams.value.deviceCount = 1
        countDisabled.value = false
    } else if (manageType == '0') {
        //编码
        equipmentDeploymentParams.value.deviceCount = 1
        countDisabled.value = true
    }
}
//获取所属公司下拉数据
const getCompanyList = async () => {
    const res: any = await getCompanyListApi()
    console.log(res, '列表数据**--**-----------')
    companyDataList.value = res.data
}
// 装备弹框显示隐藏
const dialogFormVisibleSettlein: any = ref(false)
const ruleFormRef: any = ref(null)
//表单校验规则
const equipRules = ref({
    deviceName: [
        {
            required: true,
            message: '请输入装备名称',
            trigger: 'blur',
        },
    ],
    deviceTypeList: [
        {
            required: true,
            message: '请选择装备类目',
            trigger: 'change',
        },
    ],
    deviceCount: [
        {
            required: true,
            message: '请输入装备数量',
            trigger: 'blur',
        },
    ],
    brand: [
        {
            required: true,
            message: '请输入装备品牌',
            trigger: 'blur',
        },
    ],
    code: [
        {
            required: true,
            message: '请输入装备编号',
            trigger: 'change',
        },
    ],
    companyId: [
        {
            required: true,
            message: '请选择所属公司',
            trigger: 'change',
        },
    ],
    productionDate: [
        {
            required: true,
            message: '请选择出厂日期',
            trigger: 'change',
        },
    ],
    dayLeasePrice: [
        {
            required: true,
            message: '请输入日租金',
            trigger: 'blur',
        },
    ],
    person: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
    personPhone: [
        { required: true, message: '联系电话不能为空', trigger: 'blur' },
        {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
        },
    ],
    deviceWeight: [
        //
        { required: true, message: '整机重量不能为空', trigger: 'blur' },
    ],
})
// 弹框保存提交
const submitBtn = () => {
    ruleFormRef.value.validate(async (valid: any) => {
        if (valid) {
            if (
                equipmentDeploymentParams.value.deviceTypeList &&
                equipmentDeploymentParams.value.deviceTypeList.length > 0
            ) {
                equipmentDeploymentParams.value.typeId =
                    equipmentDeploymentParams.value.deviceTypeList[3]
            } else {
                equipmentDeploymentParams.value.typeId = ''
            }
            if (mainFileList.value.length == 0 || mainFileList.value.length > 6) {
                ElMessage({ type: 'error', message: '主展示图不得少于1张，不得多于6张' })
                return
            }
            if (detailsFileList.value.length == 0 || detailsFileList.value.length > 6) {
                ElMessage({ type: 'error', message: '详情展示图不得少于1张，不得多于6张' })
                return
            }
            let param = {
                ...equipmentDeploymentParams.value,
                mainFileList: mainFileList.value, //主展示
                detailsFileList: detailsFileList.value, //详情展示
                insurancePdf: insurancePdf.value, //合格证
                examinationPdf: examinationPdf.value, //检测证明
            }
            const res: any = await equipmentAddApi(param)
            if (res.code === 200) {
                ElMessage({
                    type: 'success',
                    message: '保存成功',
                })
                dialogFormVisibleSettlein.value = false
                // ruleFormRef.value.resetField()
                getList()
            }
        }
    })
}
//草稿
const saveTemp = async () => {
    if (
        equipmentDeploymentParams.value.deviceTypeList &&
        equipmentDeploymentParams.value.deviceTypeList.length > 0
    ) {
        equipmentDeploymentParams.value.typeId = equipmentDeploymentParams.value.deviceTypeList[3]
    } else {
        equipmentDeploymentParams.value.typeId = ''
    }
    if (
        equipmentDeploymentParams.value.deviceName == '' ||
        equipmentDeploymentParams.value.companyId == ''
    ) {
        ElMessage({ type: 'error', message: '保存草稿请至少填写装备名称及所属公司！' })
        return
    }
    // if(mainFileList.value.length==0||mainFileList.value.length>6){
    //     ElMessage({type: 'error',message: '主展示图不得少于1张，不得多于6张'})
    //     return
    // }
    // if(detailsFileList.value.length==0||detailsFileList.value.length>6){
    //     ElMessage({type: 'error',message: '详情展示图不得少于1张，不得多于6张'})
    //     return
    // }
    let param = {
        ...equipmentDeploymentParams.value,
        mainFileList: mainFileList.value, //主展示
        detailsFileList: detailsFileList.value, //详情展示
        insurancePdf: insurancePdf.value, //合格证
        examinationPdf: examinationPdf.value, //检测证明
    }
    const res: any = await insertDraftApi(param)
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '保存成功',
        })
        dialogFormVisibleSettlein.value = false
        // ruleFormRef.value.resetField()
        getList()
    }
}
/* 关闭按钮 */
const closeDialogBtn = () => {
    ruleFormRef.value.resetFields()
    dialogFormVisibleSettlein.value = false
}
/* 关闭对话框 */
const handleClose = (done: () => void) => {
    ruleFormRef.value.resetFields()
    done()
    dialogFormVisibleSettlein.value = false
}

/* 检测信息图片地址 */
const successResultCallBackFnjc = (val: any) => {
    equipmentDeploymentParams.value.detectionList = []
    equipmentDeploymentParams.value.detectionList.push(val.msg)
    equipmentDeploymentParams.value.fileList.push({
        dicId: '28',
        fileUrl: val.msg,
    })
}
/* 保险信息图片地址 */
const successResultCallBackFnbs = (val: any) => {
    equipmentDeploymentParams.value.insureList = []
    equipmentDeploymentParams.value.insureList.push(val.msg)
    equipmentDeploymentParams.value.fileList.push({
        dicId: '29',
        fileUrl: val.msg,
    })
}
/* 设备图片信息地址 */
const successResultCallBackFnDevicePic = (val: any) => {
    equipmentDeploymentParams.value.picList = []
    equipmentDeploymentParams.value.picList.push(val.msg)
    if (!equipmentDeploymentParams.value.picUrl) {
        equipmentDeploymentParams.value.picUrl = val.msg
    }
    equipmentDeploymentParams.value.fileList.push({
        dicId: '20',
        fileUrl: val.msg,
    })
}

const mainFileList: any = ref([]) //主展示
const detailsFileList: any = ref([]) //详情展示
const insurancePdf: any = ref([]) //合格证
const examinationPdf: any = ref([]) //检测证明
//图片查看弹窗
const dialogVisible: any = ref(false)
const dialogImageUrl = ref('')
//上传地址+header
const imgUploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
const actionUrl = ref(imgUploadUrl)
const headerInfo = reactive({
    Authorization: 'Bearer ' + store2.token,
})
// 文件上传前处理-上传大小
const beforeUpload = (file: any) => {
    if (file.size / 1024 / 1024 > 2) {
        ElMessage({
            type: 'error',
            message: '上传文件大小不能超过2M!',
        })
        // this.$message.error({ message: `上传文件大小不能超过2M!`,});
        return false
    }
}
// 文件上传失败
const uploadError = () => {
    ElMessage({
        type: 'error',
        message: '上传文件失败!',
    })
    // this.$message.error({message: `上传文件失败!`});
}
// 文件上传成功处理
const handleFileSuccess = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        mainFileList.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(mainFileList.value)
    }
}
// 文件上传成功处理
const handleFileSuccess2 = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        detailsFileList.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(detailsFileList.value)
    }
}
// 文件上传成功处理
const handleFileSuccess3 = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        insurancePdf.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(insurancePdf.value)
    }
}
// 文件上传成功处理
const handleFileSuccess4 = (response: any) => {
    if (response.code == 200) {
        let obj = {
            modelId: maId.value,
            fileName: response.data.name.split('/')[4],
            fileUrl: response.data.url,
        }
        console.log(obj)
        examinationPdf.value.push(obj)
        ElMessage({
            type: 'success',
            message: '上传成功！',
        })
        console.log(examinationPdf.value)
    }
}
//文件下载
const handleDownload = (file: any) => {
    const windowName = file.name
    window.open(file.fileUrl, windowName)
}
//文件查看
const picturePreview = (file: any) => {
    dialogImageUrl.value = file.fileUrl
    dialogVisible.value = true
}
//文件查看
const handleRemove = (list: any, index: Number) => {
    list.splice(index, 1)
}
</script>

<template>
    <!-- 商品管理 -->
    <el-form :model="queryParams" ref="queryFormRef" :inline="true" size="default" label-width="0">
        <el-row>
            <el-col :span="6">
                <el-form-item prop="deviceName">
                    <el-input
                        v-model.trim="queryParams.deviceName"
                        style="width: 100%"
                        clearable
                        placeholder="请输入装备名称"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item prop="code">
                    <el-input
                        v-model.trim="queryParams.code"
                        style="width: 100%"
                        clearable
                        placeholder="请输入装备编号"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item prop="maStatus">
                    <el-select
                        style="width: 100%"
                        v-model="queryParams.maStatus"
                        clearable
                        placeholder="请选择装备状态"
                    >
                        <el-option label="草稿状态" value="0"></el-option>
                        <el-option label="上架" value="1"></el-option>
                        <el-option label="下架" value="2"></el-option>
                        <el-option label="在租" value="3"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item prop="deviceTypeList">
                    <el-cascader
                        v-model="deviceTypeList"
                        :show-all-levels="false"
                        :options="deviceTypeTree"
                        :props="partTypeTreeProps"
                        filterable
                        clearable
                        collapse-tags
                        style="width: 100%"
                        placeholder="请选择装备类目"
                        ref="deviceTypeCascader"
                        @change="deviceTypeChange"
                    ></el-cascader>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <el-form-item prop="dateRange">
                    <el-date-picker
                        style="width: 100%"
                        v-model="dateRange"
                        type="datetimerange"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="至"
                        start-placeholder="更新开始日期"
                        end-placeholder="更新结束日期"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="18">
                <el-form-item>
                    <el-button class="primary-lease" type="primary" @click="queryTableList"
                        >查询</el-button
                    >
                    <el-button
                        class="primary-lease"
                        type="primary"
                        @click="resetTableList(queryFormRef)"
                        >重置</el-button
                    >
                    <el-button class="primary-lease" type="primary" @click="equipmentDeployment"
                        >装备新增</el-button
                    >
                    <el-button
                        class="primary-lease"
                        type="primary"
                        @click="handleUpdateUpDown(null, 2)"
                        >批量上架</el-button
                    >
                    <el-button
                        class="primary-lease"
                        type="primary"
                        @click="handleUpdateUpDown(null, 1)"
                        >批量下架</el-button
                    >
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table
        :data="tableData"
        style="width: auto"
        row-key="maId"
        show-overflow-tooltip
        :header-cell-style="{ background: '#00a288', color: '#fff' }"
        @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
        <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
        <el-table-column align="center" prop="deviceName" label="装备名称" />
        <el-table-column align="center" prop="code" label="装备编号" />
        <el-table-column align="center" prop="typeName" label="装备类目">
            <template #default="{ row }">
                <span
                    >{{ row.firstName }} <span v-show="row.firstName">></span> {{ row.secondName
                    }}<span v-show="row.secondName">></span>{{ row.thirdName }}</span
                >
            </template>
        </el-table-column>
        <el-table-column align="center" prop="typeName" label="装备型号" />

        <el-table-column align="center" label="装备状态" width="80px">
            <template #default="{ row }">
                <el-tag v-if="row.maStatus == 0" size="small" type="info">草稿状态</el-tag>
                <el-tag v-if="row.maStatus == 1" size="small" type="warning">下架</el-tag>
                <el-tag v-if="row.maStatus == 2" size="small" type="success">上架</el-tag>
                <el-tag v-if="row.maStatus == 3" size="small" type="danger">在租</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="操作" min-width="160px" align="center">
            <template #default="{ row }">
                <el-button size="small" @click="previewRowInfo(row)">查看</el-button>
                <el-button
                    v-if="row.maStatus == 0 || row.maStatus == 1"
                    size="small"
                    type="primary"
                    @click="editRowInfo(row)"
                >
                    编辑
                </el-button>
                <el-button
                    v-if="row.maStatus == 2"
                    size="mini"
                    type="warning"
                    @click="handleUpdateUpDown(row, 1)"
                >
                    下架
                </el-button>
                <el-button
                    v-if="row.maStatus == 1"
                    size="mini"
                    type="warning"
                    @click="handleUpdateUpDown(row, 2)"
                >
                    上架
                </el-button>
                <el-button
                    v-if="row.maStatus == 0 || row.maStatus == 1"
                    size="small"
                    type="danger"
                    @click="deleteRowInfo(row)"
                >
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <PagingComponent
        @getListChange="getList"
        v-model:pageSize="queryParams.pageSize"
        v-model:currentPage="queryParams.pageNum"
        :total="total"
    />

    <!-- 装备弹框 -->
    <el-dialog
        v-model="dialogFormVisibleSettlein"
        :title="settleinTitle"
        width="65%"
        align-center
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
        <el-row :gutter="10" class="mb8" style="display: flex; align-items: center">
            <el-button type="" @click="closeDialogBtn"> 关 闭 </el-button>
            <el-button
                type="warning"
                @click="saveTemp"
                v-if="
                    !equipmentDeploymentParams.maStatus || equipmentDeploymentParams.maStatus == 0
                "
            >
                草 稿
            </el-button>
            <el-button type="primary" @click="submitBtn" v-if="!disabledForm || isEditDisabled">
                提 交
            </el-button>
        </el-row>

        <div class="title">
            <span class="title-sign"></span>
            <span class="title-text">基本信息</span>
        </div>
        <el-form
            label-width="160"
            ref="ruleFormRef"
            :model="equipmentDeploymentParams"
            :rules="equipRules"
            :disabled="disabledForm"
        >
            <el-form-item label="装备名称：" prop="deviceName">
                <el-input
                    autocomplete="off"
                    style="width: 850px"
                    maxlength="30"
                    v-model="equipmentDeploymentParams.deviceName"
                    clearable
                />
            </el-form-item>
            <el-row>
                <el-form-item label="装备类目：" prop="deviceTypeList">
                    <el-cascader
                        v-model="equipmentDeploymentParams.deviceTypeList"
                        :show-all-levels="false"
                        :options="deviceTypeTree"
                        :props="partTypeTreeProps"
                        filterable
                        clearable
                        collapse-tags
                        style="width: 350px"
                        placeholder="请选择装备类目"
                        ref="dialogTypeCascader"
                        @change="dialogTypeChange"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="所属公司：" prop="companyId">
                    <el-select
                        v-model="equipmentDeploymentParams.companyId"
                        placeholder="请选择所属公司"
                        clearable
                        style="width: 350px"
                    >
                        <el-option
                            v-for="item in companyDataList"
                            :key="item.companyId"
                            :label="item.companyName"
                            :value="item.companyId"
                        />
                    </el-select>
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="设备数量：" prop="deviceCount">
                    <el-input
                        @input="
                            (v) =>
                                (equipmentDeploymentParams.deviceCount = v.replace(/[^\d.]/g, ''))
                        "
                        v-model="equipmentDeploymentParams.deviceCount"
                        placeholder="请输入设备数量"
                        clearable
                        maxlength="20"
                        style="width: 350px"
                        :disabled="countDisabled"
                    />
                </el-form-item>
                <el-form-item label="装备单位：" prop="unitName">
                    <el-input
                        autocomplete="off"
                        style="width: 350px"
                        maxlength="20"
                        v-model="equipmentDeploymentParams.unitName"
                        clearable
                    />
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="装备编号" prop="code">
                    <el-input
                        autocomplete="off"
                        style="width: 350px"
                        maxlength="40"
                        v-model="equipmentDeploymentParams.code"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="装备品牌" prop="brand">
                    <el-input
                        v-model="equipmentDeploymentParams.brand"
                        autocomplete="off"
                        maxlength="20"
                        style="width: 350px"
                        clearable
                    />
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="出厂日期：" prop="productionDate">
                    <el-date-picker
                        v-model="equipmentDeploymentParams.productionDate"
                        placeholder="请选择出厂日期"
                        value-format="YYYY-MM-DD"
                        type="date"
                        style="width: 350px"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="租赁价格(天/元)：" prop="dayLeasePrice">
                    <el-input
                        @input="
                            (v) =>
                                (equipmentDeploymentParams.dayLeasePrice = v.replace(/[^\d.]/g, ''))
                        "
                        v-model="equipmentDeploymentParams.dayLeasePrice"
                        placeholder="请输入租赁价格"
                        clearable
                        maxlength="20"
                        style="width: 350px"
                    />
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="联系人：" prop="person">
                    <el-input
                        v-model="equipmentDeploymentParams.person"
                        placeholder="请输入联系人"
                        clearable
                        maxlength="20"
                        style="width: 350px"
                    />
                </el-form-item>
                <el-form-item label="联系电话：" prop="personPhone">
                    <el-input
                        v-model="equipmentDeploymentParams.personPhone"
                        placeholder="请输入联系电话"
                        clearable
                        maxlength="20"
                        style="width: 350px"
                    />
                </el-form-item>
            </el-row>
            <el-row>
                <el-form-item label="整机重量(KG)：" prop="deviceWeight">
                    <el-input
                        @input="
                            (v) =>
                                (equipmentDeploymentParams.deviceWeight = v.replace(/[^\d.]/g, ''))
                        "
                        v-model="equipmentDeploymentParams.deviceWeight"
                        placeholder="请输入整机重量"
                        clearable
                        maxlength="20"
                        style="width: 350px"
                    />
                </el-form-item>
            </el-row>

            <!-- <el-form-item label="检测信息" prop="detectionList">
                <uploadComponent
                    v-if="!disabledForm || isEditDisabled"
                    :maxLimit="1"
                    listType="picture-card"
                    :acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
                    width="120px"
                    height="120px"
                    :autoUpload="true"
                    :successResultCallBack="successResultCallBackFnjc">
                    <template v-slot:default>
                        <el-icon size="20" color="#aaa"><Plus /></el-icon>
                    </template>
                </uploadComponent>

                <template v-else>
                    <a
                        style="color: rgb(97, 226, 153); cursor: pointer"
                        target="_blank"
                        :href="equipmentDeploymentParams.jcUrl">
                        查 看 附 件
                    </a>
                </template>
            </el-form-item>
            <el-form-item label="保险信息" prop="insureList">
                <uploadComponent
                    v-if="!disabledForm || isEditDisabled"
                    :maxLimit="1"
                    listType="picture-card"
                    :acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
                    width="120px"
                    height="120px"
                    :autoUpload="true"
                    :successResultCallBack="successResultCallBackFnbs">
                    <template v-slot:default>
                        <el-icon size="20" color="#aaa"><Plus /></el-icon>
                    </template>
                </uploadComponent>

                <template v-else>
                    <a
                        style="color: rgb(97, 226, 153); cursor: pointer"
                        target="_blank"
                        :href="equipmentDeploymentParams.bsUrl">
                        查 看 附 件
                    </a>
                </template>
            </el-form-item>
            <el-form-item label="设备图片" prop="picList">
                <uploadComponent
                    v-if="!disabledForm && isEditDisabled"
                    :maxLimit="8"
                    listType="picture-card"
                    :acceptTypeList="['.jpg', '.jpeg', '.png']"
                    width="120px"
                    height="120px"
                    :successResultCallBack="successResultCallBackFnDevicePic"
                    :autoUpload="true"
                    :multiple="true">
                    <template v-slot:default>
                        <el-icon size="48" color="#aaa"><Plus /></el-icon>
                    </template>
                </uploadComponent>
                <span v-if="!disabledForm">
                    至少一张，最多八张
                    设备图片格式为jpg、png、和gif，文件不得超过5M，否则将无法上传。请从前后左右四个方向以及从主要工作部件，内部结构等方面展示设备
                </span>

                <template v-if="disabledForm && !isEditDisabled">
                    <template v-if="equipmentDeploymentParams.devPicList.length > 0">
                        <el-image
                            v-for="item in equipmentDeploymentParams.devPicList"
                            :key="item"
                            style="width: 120px; height: 120px; margin-right: 8px"
                            :src="item"
                            fit="cover" />
                    </template>
                    <template v-else>暂无图片</template>
                </template>
            </el-form-item> -->
        </el-form>
        <div class="title">
            <span class="title-sign"></span>
            <span class="title-text">装备图片</span>
        </div>
        <div class="uploadBox">
            <div class="labelBox">
                <div style="margin-left: 20px">
                    <span style="color: red">*</span>
                    <span style="font-size: 14px; color: #606266; font-weight: 600"
                        >主展示图:
                    </span>
                </div>
                <div style="margin-left: 20px">
                    <el-upload
                        ref="upload"
                        :limit="6"
                        :headers="headerInfo"
                        :action="actionUrl"
                        :show-file-list="false"
                        accept=".png, .jpg, .jpeg"
                        :on-success="handleFileSuccess"
                        :auto-upload="true"
                        :before-upload="beforeUpload"
                        :on-error="uploadError"
                    >
                        <el-button icon="FolderOpened">上传文件</el-button>
                    </el-upload>
                </div>
                <div style="color: #999; font-size: 12px; margin-left: 20px">
                    支持格式：.jpg .png，单个文件大小不能超过2M
                </div>
            </div>
            <div class="imgsBox">
                <!-- <div class="imgItem" v-if="mainFileList.length==0">
                    <div class="icon-list" style="left: 60px;">
                        <span class="imgItem__icon" >
                            <i class="el-icon-plus"/>
                        </span>
                    </div>
                </div> -->
                <div class="imgItem" v-for="(item, index) in mainFileList" :key="index">
                    <img class="picture-card" :src="item.fileUrl" alt="" />
                    <div class="icon-list">
                        <span class="imgItem__icon hide" @click="handleDownload(item)">
                            <el-icon :size="20"><Download /></el-icon>
                        </span>
                        <span class="imgItem__icon hide" @click="picturePreview(item)">
                            <el-icon :size="20"><ZoomIn /></el-icon>
                        </span>
                        <span class="imgItem__icon hide" @click="handleRemove(mainFileList, index)">
                            <el-icon :size="20"><Delete /></el-icon>
                        </span>
                    </div>
                    <p class="file-name">{{ item.fileName }}</p>
                </div>
            </div>
            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
        </div>
        <div class="uploadBox">
            <div class="labelBox">
                <div style="margin-left: 20px">
                    <span style="color: red">*</span>
                    <span style="font-size: 14px; color: #606266; font-weight: 600"
                        >详情页展示图:
                    </span>
                </div>
                <div style="margin-left: 20px">
                    <el-upload
                        ref="upload"
                        :limit="6"
                        :headers="headerInfo"
                        :action="actionUrl"
                        :show-file-list="false"
                        accept=".png, .jpg, .jpeg"
                        :on-success="handleFileSuccess2"
                        :auto-upload="true"
                        :before-upload="beforeUpload"
                        :on-error="uploadError"
                    >
                        <el-button icon="FolderOpened">上传文件</el-button>
                    </el-upload>
                </div>
                <div style="color: #999; font-size: 12px; margin-left: 20px">
                    支持格式：.jpg .png，单个文件大小不能超过2M
                </div>
            </div>
            <div class="imgsBox">
                <div class="imgItem" v-for="(item, index) in detailsFileList" :key="index">
                    <img class="picture-card" :src="item.fileUrl" alt="" />
                    <div class="icon-list">
                        <span class="imgItem__icon hide" @click="handleDownload(item)">
                            <el-icon :size="20"><Download /></el-icon>
                        </span>
                        <span class="imgItem__icon hide" @click="picturePreview(item)">
                            <el-icon :size="20"><ZoomIn /></el-icon>
                        </span>
                        <span
                            class="imgItem__icon hide"
                            @click="handleRemove(detailsFileList, index)"
                        >
                            <el-icon :size="20"><Delete /></el-icon>
                        </span>
                    </div>
                    <p class="file-name">{{ item.fileName }}</p>
                </div>
            </div>
            <div class="tipBox">*注:图片排序为平台展示顺序，不得少于1张，不得多于6张</div>
        </div>
        <div class="title">
            <span class="title-sign"></span>
            <span class="title-text">装备证书</span>
        </div>
        <div class="uploadBox">
            <div class="labelBox">
                <div style="margin-left: 20px">
                    <span style="color: red">*</span>
                    <span style="font-size: 14px; color: #606266; font-weight: 600">合格证: </span>
                </div>
                <div style="margin-left: 20px">
                    <el-upload
                        ref="upload"
                        :limit="6"
                        :headers="headerInfo"
                        :action="actionUrl"
                        :show-file-list="false"
                        accept=".png, .jpg, .jpeg"
                        :on-success="handleFileSuccess3"
                        :auto-upload="true"
                        :before-upload="beforeUpload"
                        :on-error="uploadError"
                    >
                        <el-button icon="FolderOpened">上传文件</el-button>
                    </el-upload>
                </div>
                <div style="color: #999; font-size: 12px; margin-left: 20px">
                    支持格式：.jpg .png，单个文件大小不能超过2M
                </div>
            </div>
            <div class="imgsBox">
                <div class="imgItem" v-for="(item, index) in insurancePdf" :key="index">
                    <img class="picture-card" :src="item.fileUrl" alt="" />
                    <div class="icon-list">
                        <span class="imgItem__icon hide" @click="handleDownload(item)">
                            <el-icon :size="20"><Download /></el-icon>
                        </span>
                        <span class="imgItem__icon hide" @click="picturePreview(item)">
                            <el-icon :size="20"><ZoomIn /></el-icon>
                        </span>
                        <span class="imgItem__icon hide" @click="handleRemove(insurancePdf, index)">
                            <el-icon :size="20"><Delete /></el-icon>
                        </span>
                    </div>
                    <p class="file-name">{{ item.fileName }}</p>
                </div>
            </div>
        </div>
        <div class="uploadBox">
            <div class="labelBox">
                <div style="margin-left: 20px">
                    <span style="color: red">*</span>
                    <span style="font-size: 14px; color: #606266; font-weight: 600"
                        >检测证明:
                    </span>
                </div>
                <div style="margin-left: 20px">
                    <el-upload
                        ref="upload"
                        :limit="6"
                        :headers="headerInfo"
                        :action="actionUrl"
                        :show-file-list="false"
                        accept=".png, .jpg, .jpeg"
                        :on-success="handleFileSuccess4"
                        :auto-upload="true"
                        :before-upload="beforeUpload"
                        :on-error="uploadError"
                    >
                        <el-button icon="FolderOpened">上传文件</el-button>
                    </el-upload>
                </div>
                <div style="color: #999; font-size: 12px; margin-left: 20px">
                    支持格式：.jpg .png，单个文件大小不能超过2M
                </div>
            </div>
            <div class="imgsBox">
                <div class="imgItem" v-for="(item, index) in examinationPdf" :key="index">
                    <img class="picture-card" :src="item.fileUrl" alt="" />
                    <div class="icon-list">
                        <span class="imgItem__icon hide" @click="handleDownload(item)">
                            <el-icon :size="20"><Download /></el-icon>
                        </span>
                        <span class="imgItem__icon hide" @click="picturePreview(item)">
                            <el-icon :size="20"><ZoomIn /></el-icon>
                        </span>
                        <span
                            class="imgItem__icon hide"
                            @click="handleRemove(examinationPdf, index)"
                        >
                            <el-icon :size="20"><Delete /></el-icon>
                        </span>
                    </div>
                    <p class="file-name">{{ item.fileName }}</p>
                </div>
            </div>
        </div>

        <!-- <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="closeDialogBtn">关 闭</el-button>
                <el-button @click="submitBtn" v-if="!disabledForm || isEditDisabled" type="success">
                    提 交
                </el-button>
            </span>
        </template> -->
    </el-dialog>

    <!-- 图片查看弹窗 -->
    <el-dialog v-model="dialogVisible" width="500px" height="500px">
        <img width="500" height="500" :src="dialogImageUrl" alt="description" />
    </el-dialog>
</template>

<style lang="scss" scoped>
.el-form {
    margin: 15px 0;
}

.title {
    margin: 10px;
    margin-left: 20px;
    display: flex;
    align-items: center;
}
.title-sign {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #409eff;
}
.title-text {
    font-weight: 700;
    margin-left: 10px;
}

.uploadBox {
    margin: 20px 40px;
}
.labelBox {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.imgsBox {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 30px;
    margin-left: 20px;

    .imgItem {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        margin-bottom: 30px;
        border: 1px dashed #bbb;
        position: relative;
        .picture-card {
            width: 150px;
            height: 150px;
        }
        .icon-list {
            width: 60px;
            height: 20px;
            position: absolute;
            top: 70px;
            left: 30px;
            display: flex;
            align-items: center;
        }
        .imgItem__icon {
            margin: 0 5px;
            cursor: pointer;
        }
        .file-name {
            font-size: 10px;
            width: 100%;
            word-break: break-all;
        }
    }

    .hide {
        display: none;
    }
    .imgItem:hover .hide {
        display: block;
    }
}
.tipBox {
    color: red;
    font-size: 12px;
    margin-left: 20px;
}

:deep.el-form--inline .el-form-item {
    margin-right: 6px;
    width: 95%;
}
</style>