2417 lines
87 KiB
Vue
2417 lines
87 KiB
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 UploadComponentNew from 'components/uploadComponentNew/index.vue'
|
||
import TitleTip from 'components/TitleTip/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'
|
||
import { InfoFilled, UploadFilled } from '@element-plus/icons-vue'
|
||
import dayjs from 'dayjs'
|
||
const store2 = mainStore()
|
||
const isViewForm = ref(false)
|
||
|
||
const isDisabled = ref(false)
|
||
const isMaStatus = ref(false)
|
||
const isAdd = ref(false)
|
||
|
||
const previewDialogVisible = ref(false)
|
||
const previewDialogImageUrl = ref('')
|
||
import {
|
||
getEquipmentTypeApi, //装备类型
|
||
getCompanyListApi, //所属公司
|
||
getEquipmentListApi, //列表
|
||
getDetailApi, //详情
|
||
equipmentAddApi, //新增
|
||
equipmentEditApi, //编辑
|
||
insertDraftApi, //草稿（编辑）
|
||
removeDeviceApi, //删除
|
||
updateUpDownApi, //上下架
|
||
downLoadTemplate, //模班下载
|
||
} 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,
|
||
startTime: '',
|
||
endTime: '',
|
||
})
|
||
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 = []
|
||
queryParams.value.startTime = ''
|
||
queryParams.value.endTime = ''
|
||
deviceTypeList.value = []
|
||
queryParams.value.typeId = null
|
||
queryTableList()
|
||
}
|
||
// 获取数据列表
|
||
const getList = async () => {
|
||
console.log(queryParams.value.pageNum, '***9999', queryParams.value.pageSize)
|
||
|
||
if (dateRange.value.length > 0) {
|
||
queryParams.value.startTime = dateRange.value[0]
|
||
queryParams.value.endTime = dateRange.value[1]
|
||
}
|
||
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 = () => {
|
||
isAdd.value = true
|
||
settleinTitle.value = '新增装备'
|
||
isMaStatus.value = false
|
||
isViewForm.value = false
|
||
isEditForm.value = false
|
||
descriptionFormList.value = []
|
||
descriptionFormList.value.push({
|
||
newId: Date.now(),
|
||
insurancePdfs: [],
|
||
insuranceATempPdf: [],
|
||
examinationPdfs: [],
|
||
examinationTempPdf: [],
|
||
})
|
||
disabledForm.value = false
|
||
isEditDisabled.value = true
|
||
equipmentDeploymentParams.value = {
|
||
deviceName: '',
|
||
deviceTypeList: [],
|
||
deviceCount: 1,
|
||
unitName: '',
|
||
code: '',
|
||
brand: '',
|
||
typeId: '',
|
||
companyId: '',
|
||
productionDate: '',
|
||
dayLeasePrice: '',
|
||
person: '',
|
||
personPhone: '',
|
||
deviceWeight: '',
|
||
checkDate: '',
|
||
checkCycle: '',
|
||
}
|
||
mainFileList.value = []
|
||
detailsFileList.value = []
|
||
insurancePdf.value = []
|
||
examinationPdf.value = []
|
||
|
||
//装备证书table
|
||
;(equipTableList.value = []),
|
||
// 打开入驻弹框
|
||
(dialogFormVisibleSettlein.value = true)
|
||
}
|
||
const isEditForm = ref(false)
|
||
const maId: any = ref('')
|
||
const warningDays: any = ref(0)
|
||
// 编辑按钮
|
||
const editRowInfo = (row: any) => {
|
||
isAdd.value = false
|
||
settleinTitle.value = '装备编辑'
|
||
getDetailData(row)
|
||
isMaStatus.value = true
|
||
disabledForm.value = false
|
||
isEditDisabled.value = true
|
||
isViewForm.value = false
|
||
isEditForm.value = true
|
||
}
|
||
/* 查看按钮 */
|
||
const previewRowInfo = (row: any) => {
|
||
isAdd.value = false
|
||
settleinTitle.value = '装备详情'
|
||
getDetailData(row)
|
||
disabledForm.value = true
|
||
isEditDisabled.value = false
|
||
isViewForm.value = true
|
||
isEditForm.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) => {
|
||
await getTypeTreeData()
|
||
const { data: res }: any = await getDetailApi(row.maId)
|
||
const {
|
||
deviceName,
|
||
// deviceTypeList,
|
||
deviceCount,
|
||
unitName,
|
||
code,
|
||
brand,
|
||
typeId,
|
||
companyId,
|
||
productionDate,
|
||
dayLeasePrice,
|
||
person,
|
||
personPhone,
|
||
deviceWeight,
|
||
checkDate,
|
||
checkCycle,
|
||
mainFileList,
|
||
detailsFileList,
|
||
insurancePdf,
|
||
examinationPdf,
|
||
devInfoProperties,
|
||
tableList,
|
||
maintenanceAlarmDay,
|
||
} = res
|
||
|
||
Object.assign(addAndEditForm, {
|
||
deviceName,
|
||
deviceCount,
|
||
unitName,
|
||
code,
|
||
brand,
|
||
typeId,
|
||
companyId,
|
||
productionDate,
|
||
dayLeasePrice,
|
||
person,
|
||
personPhone,
|
||
deviceWeight,
|
||
checkDate,
|
||
checkCycle,
|
||
mainFileList,
|
||
detailsFileList,
|
||
insurancePdf,
|
||
examinationPdf,
|
||
devInfoProperties,
|
||
tableList,
|
||
maintenanceAlarmDay,
|
||
})
|
||
|
||
if (settleinTitle.value == '装备编辑') {
|
||
Object.assign(addAndEditForm, {
|
||
maId: row.maId,
|
||
})
|
||
}
|
||
|
||
descriptionFormList.value = []
|
||
descriptionFormList.value.push({
|
||
newId: Date.now(),
|
||
insurancePdfs: [],
|
||
insuranceATempPdf: [],
|
||
examinationPdfs: [],
|
||
examinationTempPdf: [],
|
||
})
|
||
descriptionFormList.value[0].insurancePdfs = insurancePdf
|
||
descriptionFormList.value[0].examinationPdfs = examinationPdf
|
||
options.value = []
|
||
addAndEditForm.deviceTypeList = getSelectId(deviceTypeTree.value, addAndEditForm.typeId)
|
||
warningDays.value = addAndEditForm.maintenanceAlarmDay
|
||
// warningDays.value = addAndEditForm.deviceTypeList[addAndEditForm.deviceTypeList.length-1].data.maintenanceAlarmDay
|
||
// warningDays.value = addAndEditForm.deviceTypeList.maintenanceAlarmDay
|
||
propertyNames.value = addAndEditForm.devInfoProperties
|
||
equipTableList.value = []
|
||
if (isEditForm.value == true) {
|
||
if (addAndEditForm.tableList != null) {
|
||
addAndEditForm.tableList.forEach((item: any) => {
|
||
equipTableList.value.push({
|
||
id: item.id,
|
||
identifyCode: item.identifyCode,
|
||
name2: item.insurancePdf[0]?.fileUrl,
|
||
checkMan: item.checkMan,
|
||
checkDate: item.checkDate,
|
||
nextCheckDate: item.nextCheckDate,
|
||
name6: item.examinationPdf[0]?.fileUrl,
|
||
insurancePdf: item.insurancePdf,
|
||
examinationPdf: item.examinationPdf,
|
||
})
|
||
})
|
||
} else {
|
||
equipTableList.value = [
|
||
{
|
||
id: '',
|
||
identifyCode: '',
|
||
name2: '',
|
||
checkMan: '',
|
||
checkDate: '',
|
||
nextCheckDate: '',
|
||
name6: '',
|
||
insurancePdf: [],
|
||
examinationPdf: [],
|
||
},
|
||
]
|
||
}
|
||
} else {
|
||
if (addAndEditForm.tableList != null) {
|
||
addAndEditForm.tableList.forEach((item: any) => {
|
||
equipTableList.value.push({
|
||
id: item.id,
|
||
identifyCode: item.identifyCode,
|
||
name2: item.insurancePdf[0]?.fileUrl,
|
||
checkMan: item.checkMan,
|
||
checkDate: item.checkDate,
|
||
nextCheckDate: item.nextCheckDate,
|
||
name6: item.examinationPdf[0]?.fileUrl,
|
||
insurancePdf: item.insurancePdf,
|
||
examinationPdf: item.examinationPdf,
|
||
})
|
||
})
|
||
} else {
|
||
equipTableList.value = []
|
||
}
|
||
}
|
||
console.log('tt23123', equipTableList.value)
|
||
// addAndEditForm.deviceTypeList[0].data.propertyNames.forEach((item:any) =>{
|
||
// options.value.push({'label':item,'value':item})
|
||
// })
|
||
dialogFormVisibleSettlein.value = true
|
||
|
||
console.log(res, '详情接口')
|
||
|
||
// 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 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: '',
|
||
checkDate: '',
|
||
checkCycle: '',
|
||
})
|
||
//编码类型禁止修改数目
|
||
const countDisabled = ref(false)
|
||
//装备类目-change
|
||
const dialogTypeCascader = ref()
|
||
//装备类目-change
|
||
const dialogTypeChange = async () => {
|
||
options.value = []
|
||
const deviceTypeList = dialogTypeCascader.value.getCheckedNodes()
|
||
// console.log(deviceTypeList)
|
||
// equipmentDeploymentParams.value.unitName = deviceTypeList[0].data.unitName
|
||
// equipmentDeploymentParams.value.dayLeasePrice = deviceTypeList[0].data.leasePrice
|
||
// isDisabled.value = true
|
||
// 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
|
||
// }
|
||
console.log('deviceTypeList', deviceTypeList[0].data.name)
|
||
warningDays.value = deviceTypeList[0].data.maintenanceAlarmDay
|
||
if (deviceTypeList[0].data.maTypeProperties == null) {
|
||
propertyNames.value = []
|
||
} else {
|
||
propertyNames.value = []
|
||
deviceTypeList[0].data.maTypeProperties.forEach((item: any) => {
|
||
propertyNames.value.push({ propertyName: item.propertyName, propertyValue: '' })
|
||
})
|
||
// propertyNames.value = deviceTypeList[0].data.maTypeProperties
|
||
deviceTypeList[0].data.maTypeProperties.forEach((item: any) => {
|
||
options.value.push({ label: item.propertyName, value: item.propertyName })
|
||
})
|
||
console.log(propertyNames.value)
|
||
}
|
||
// propertyNames.value = deviceTypeList[0].data.propertyNames
|
||
isDisabled.value = true
|
||
addAndEditForm.unitName = deviceTypeList[0].data.unitName
|
||
addAndEditForm.dayLeasePrice = deviceTypeList[0].data.leasePrice
|
||
addAndEditFormRef.value.clearValidate(['unitName', 'dayLeasePrice'])
|
||
equipTableList.value = []
|
||
equipTableList.value.push({
|
||
id: '',
|
||
identifyCode: '',
|
||
name2: '',
|
||
checkMan: '',
|
||
checkDate: '',
|
||
nextCheckDate: '',
|
||
name6: '',
|
||
insurancePdf: [],
|
||
examinationPdf: [],
|
||
})
|
||
}
|
||
|
||
//获取所属公司下拉数据
|
||
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',
|
||
},
|
||
],
|
||
unitName: [
|
||
{
|
||
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' }],
|
||
checkDate: [{ required: true, message: '校验日期不能为空', trigger: 'blur' }],
|
||
checkCycle: [{ 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',
|
||
},
|
||
],
|
||
mainFileList: [{ required: true, message: '请上传主展示图', trigger: 'change' }],
|
||
detailsFileList: [{ required: true, message: '请上传详情展示图', trigger: 'change' }],
|
||
|
||
// deviceWeight: [
|
||
// //
|
||
// { required: true, message: '整机重量不能为空', trigger: 'blur' },
|
||
// ],
|
||
})
|
||
|
||
const getProertyNameRules = (item: any) => {
|
||
if (item.mustHave == 1) {
|
||
return [{ required: true, message: '请输入属性描述', trigger: 'blur' }]
|
||
} else {
|
||
return []
|
||
}
|
||
}
|
||
|
||
const getProertyValueRules = (item: any) => {
|
||
if (item.mustHave == 1) {
|
||
return [{ required: true, message: '请输入属性值', trigger: 'blur' }]
|
||
} else {
|
||
return []
|
||
}
|
||
}
|
||
|
||
const descriptionRules = ref({
|
||
identifyCode: [{ required: true, message: '请填写装备唯一标识符', trigger: 'blur' }],
|
||
insurancePdfs: [{ required: true, message: '请上传合格证', trigger: 'change' }],
|
||
examinationPdfs: [{ required: true, message: '请上传检测证明', trigger: 'change' }],
|
||
})
|
||
// 弹框保存提交
|
||
const submitBtn = async () => {
|
||
submitFun(isEditForm.value ? 3 : 1)
|
||
// 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, //检测证明
|
||
// }
|
||
// param.maStatus == 0 ? (param.maStatus = 1) : param.maStatus
|
||
// if (
|
||
// equipmentDeploymentParams.value.maId &&
|
||
// equipmentDeploymentParams.value.maId != ''
|
||
// ) {
|
||
// const res: any = await equipmentEditApi(param)
|
||
// if (res.code === 200) {
|
||
// ElMessage({
|
||
// type: 'success',
|
||
// message: '保存成功',
|
||
// })
|
||
// dialogFormVisibleSettlein.value = false
|
||
// getList()
|
||
// }
|
||
// } else {
|
||
// const res: any = await equipmentAddApi(param)
|
||
// if (res.code === 200) {
|
||
// ElMessage({
|
||
// type: 'success',
|
||
// message: '保存成功',
|
||
// })
|
||
// dialogFormVisibleSettlein.value = false
|
||
// getList()
|
||
// }
|
||
// }
|
||
// }
|
||
// })
|
||
}
|
||
const submitFun = (type: any) => {
|
||
// type 1 提交(新增时) 2 存草稿(新增时) 3 编辑时的提交 4 编辑时存草稿
|
||
// addAndEditForm.mainFileList = [
|
||
// ...addAndEditForm.mainFileList,
|
||
// ...addAndEditForm.mainFileTempList,
|
||
// ]
|
||
// addAndEditForm.detailsFileList = [
|
||
// ...addAndEditForm.detailsFileList,
|
||
// ...addAndEditForm.detailsFileTempList,
|
||
// ]
|
||
if (isAdd.value) {
|
||
addAndEditForm.mainFileList = Array.from(
|
||
new Set([...addAndEditForm.mainFileList, ...addAndEditForm.mainFileTempList]),
|
||
)
|
||
addAndEditForm.detailsFileList = Array.from(
|
||
new Set([...addAndEditForm.detailsFileList, ...addAndEditForm.detailsFileTempList]),
|
||
)
|
||
}
|
||
|
||
addAndEditFormRef.value.validate(async (valid: any) => {
|
||
if (valid) {
|
||
let isDescription = false
|
||
// addAndEditForm.identifyCode = []
|
||
descriptionFormList.value.forEach((e: any, index: number) => {
|
||
e.insurancePdfs = [...e.insurancePdfs, ...e.insuranceATempPdf]
|
||
e.examinationPdfs = [...e.examinationPdfs, ...e.examinationTempPdf]
|
||
|
||
if (type == 3 || type == 4) {
|
||
// addAndEditForm.identifyCode = e.identifyCode
|
||
addAndEditForm.insurancePdf = e.insurancePdfs.map((e: any) => {
|
||
return { fileNam: e.fileName, fileUrl: e.fileUrl }
|
||
})
|
||
addAndEditForm.examinationPdf = e.examinationPdfs.map((e: any) => {
|
||
return { fileNam: e.fileName, fileUrl: e.fileUrl }
|
||
})
|
||
} else {
|
||
addAndEditForm.insurancePdfs[index] = e.insurancePdfs
|
||
addAndEditForm.examinationPdfs[index] = e.examinationPdfs
|
||
// addAndEditForm.identifyCode.push(e.identifyCode)
|
||
}
|
||
})
|
||
|
||
// for (let index = 0; index < descriptionFormList.value.length; index++) {
|
||
// try {
|
||
// const result = await new Promise((resolve) => {
|
||
// descriptionFormRefList.value[index].validate((res: any) => {
|
||
// resolve(res)
|
||
// })
|
||
// })
|
||
|
||
// if (!result) {
|
||
// isDescription = true
|
||
// throw new Error('表单校验失败')
|
||
// }
|
||
// } catch (error) {}
|
||
// }
|
||
addAndEditForm.tableList = equipTableList.value
|
||
for (let i = 0; i < addAndEditForm.tableList.length; i++) {
|
||
const row = addAndEditForm.tableList[i]
|
||
for (const key in row) {
|
||
if (
|
||
row.hasOwnProperty(key) &&
|
||
(row[key] === null || row[key] === '' || row[key]?.length === 0) &&
|
||
key !== 'name2' &&
|
||
key !== 'name6' &&
|
||
key !== 'id'
|
||
) {
|
||
if (key == 'identifyCode') {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: `第 ${i + 1} 行的 ${'唯一标识符'} 字段不能为空`,
|
||
})
|
||
} else if (key == 'checkMan') {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: `第 ${i + 1} 行的 ${'检修人'} 字段不能为空`,
|
||
})
|
||
} else if (key == 'checkDate') {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: `第 ${i + 1} 行的 ${'检修日期'} 字段不能为空`,
|
||
})
|
||
} else if (key == 'nextCheckDate') {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: `第 ${i + 1} 行的 ${'下次检修日期'} 字段不能为空`,
|
||
})
|
||
} else if (key == 'insurancePdf') {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: `请上传第 ${i + 1} 行的合格证`,
|
||
})
|
||
} else {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: `请上传第 ${i + 1} 行的检测证明`,
|
||
})
|
||
}
|
||
return // 如果有任何字段为空，直接返回，不进行提交
|
||
}
|
||
}
|
||
}
|
||
if (isDescription) return
|
||
addAndEditForm.mainFileList = Array.from(
|
||
new Set([...addAndEditForm.mainFileList, ...addAndEditForm.mainFileTempList]),
|
||
)
|
||
console.log(
|
||
'🚀 ~ submitFun ~ addAndEditForm.mainFileList:',
|
||
addAndEditForm.mainFileList,
|
||
)
|
||
addAndEditForm.detailsFileList = Array.from(
|
||
new Set([...addAndEditForm.detailsFileList, ...addAndEditForm.detailsFileTempList]),
|
||
)
|
||
console.log(
|
||
'🚀 ~ submitFun ~ addAndEditForm.detailsFileList:',
|
||
addAndEditForm.detailsFileList,
|
||
)
|
||
|
||
addAndEditForm.devInfoProperties = propertyNames.value
|
||
addAndEditForm.typeId =
|
||
addAndEditForm.deviceTypeList[addAndEditForm.deviceTypeList.length - 1]
|
||
|
||
let SEND_FUN_API: any = null
|
||
if (type == 1) {
|
||
SEND_FUN_API = equipmentAddApi
|
||
addAndEditForm.maStatus = 1
|
||
}
|
||
if (type == 2) {
|
||
SEND_FUN_API = equipmentAddApi
|
||
addAndEditForm.maStatus = 0
|
||
}
|
||
if (type == 3) {
|
||
SEND_FUN_API = equipmentEditApi
|
||
addAndEditForm.maStatus = 1
|
||
}
|
||
if (type == 4) {
|
||
SEND_FUN_API = equipmentEditApi
|
||
addAndEditForm.maStatus = 0
|
||
}
|
||
let res = null
|
||
try {
|
||
res = await SEND_FUN_API(addAndEditForm)
|
||
if (res.code === 200) {
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '保存成功',
|
||
duration: 1000,
|
||
})
|
||
propertyNames.value = []
|
||
dialogFormVisibleSettlein.value = false
|
||
getList()
|
||
}
|
||
} catch (error) {
|
||
console.log('error', error)
|
||
}
|
||
|
||
// 组装参数
|
||
} else {
|
||
console.log('校验失败')
|
||
}
|
||
})
|
||
}
|
||
//草稿
|
||
const saveTemp = async () => {
|
||
submitFun(isMaStatus.value ? 4 : 2)
|
||
if (true) return
|
||
}
|
||
|
||
/* 关闭按钮 */
|
||
const closeDialogBtn = () => {
|
||
// ruleFormRef.value.resetFields()
|
||
propertyNames.value = []
|
||
// 获取装备树
|
||
getTypeTreeData()
|
||
dialogFormVisibleSettlein.value = false
|
||
}
|
||
/* 关闭对话框 */
|
||
const handleClose = (done: () => void) => {
|
||
// ruleFormRef.value.resetFields()
|
||
done()
|
||
propertyNames.value = []
|
||
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 maTypeProperties: 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: '上传文件大小不能超过5M!',
|
||
})
|
||
// this.$message.error({ message: `上传文件大小不能超过5M!`,});
|
||
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)
|
||
}
|
||
|
||
const onTempDownLoad = () => {
|
||
ElMessageBox.confirm('是否确定下载', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
})
|
||
.then(() => {
|
||
return downLoadTemplate()
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
const onBatchUpload = () => {
|
||
console.log('下载')
|
||
}
|
||
|
||
const onAddDescription = () => {
|
||
const newId = Date.now()
|
||
descriptionFormList.value.push({
|
||
newId,
|
||
insurancePdfs: [],
|
||
insuranceATempPdf: [],
|
||
examinationPdfs: [],
|
||
examinationTempPdf: [],
|
||
})
|
||
}
|
||
|
||
const addAndEditForm = reactive<any>({
|
||
deviceName: '',
|
||
deviceTypeList: [],
|
||
deviceCount: 1,
|
||
unitName: '',
|
||
code: '',
|
||
brand: '',
|
||
typeId: '',
|
||
companyId: '',
|
||
productionDate: '',
|
||
dayLeasePrice: '',
|
||
person: '',
|
||
personPhone: '',
|
||
deviceWeight: '',
|
||
checkDate: '',
|
||
checkCycle: '',
|
||
mainFileList: [],
|
||
detailsFileList: [],
|
||
mainFileTempList: [],
|
||
detailsFileTempList: [],
|
||
insurancePdf: [],
|
||
examinationPdf: [],
|
||
insurancePdfs: [],
|
||
examinationPdfs: [],
|
||
devInfoProperties: [],
|
||
tableList: [],
|
||
})
|
||
// const addAndEditFormTemp = reactive<any>()
|
||
const uploadUrl = import.meta.env.VITE_API_URL + '/file/upload'
|
||
const addAndEditFormRef = ref()
|
||
// 装备描述表单
|
||
const descriptionFormList = ref<any>([
|
||
{
|
||
newId: Date.now(),
|
||
insurancePdfs: [],
|
||
insuranceATempPdf: [],
|
||
examinationPdfs: [],
|
||
examinationTempPdf: [],
|
||
},
|
||
])
|
||
const descriptionFormRefList = ref<any>([])
|
||
// 移除
|
||
const onDeleteDescription = (index: number) => {
|
||
descriptionFormList.value.splice(index, 1)
|
||
descriptionFormRefList.value.splice(index, 1)
|
||
}
|
||
|
||
const onMainFileChange = (fileList: any) => {
|
||
addAndEditForm.mainFileTempList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
addAndEditFormRef.value.clearValidate('mainFileList')
|
||
addAndEditForm.mainFileTempList.push(...fileListTemp)
|
||
}
|
||
const onDetailsFileChange = (fileList: any) => {
|
||
addAndEditForm.detailsFileTempList = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
addAndEditFormRef.value.clearValidate('detailsFileList')
|
||
addAndEditForm.detailsFileTempList.push(...fileListTemp)
|
||
}
|
||
|
||
const onInsurancePdfChange = (fileList: any, index: number) => {
|
||
descriptionFormList.value[index].insuranceATempPdf = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
descriptionFormRefList.value[index].clearValidate('insurancePdf')
|
||
descriptionFormList.value[index].insuranceATempPdf.push(...fileListTemp)
|
||
}
|
||
const onExaminationPdfChange = (fileList: any, index: number) => {
|
||
descriptionFormList.value[index].examinationTempPdf = []
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
descriptionFormRefList.value[index].clearValidate('examinationPdf')
|
||
descriptionFormList.value[index].examinationTempPdf.push(...fileListTemp)
|
||
}
|
||
|
||
const onFileChangeEquip = (fileList: any, row: any, index: number, type: number) => {
|
||
if (type == 1) {
|
||
equipTableList.value[index].insurancePdf = []
|
||
} else {
|
||
equipTableList.value[index].examinationPdf = []
|
||
}
|
||
const fileListTemp = fileList.map((e: any) => {
|
||
return {
|
||
fileName: e.name,
|
||
fileUrl: e.url,
|
||
}
|
||
})
|
||
console.log('11111', fileListTemp[0].fileUrl)
|
||
if (type == 1) {
|
||
equipTableList.value[index].name2 = fileListTemp[0].fileUrl
|
||
equipTableList.value[index].insurancePdf.push(fileListTemp[0])
|
||
} else {
|
||
equipTableList.value[index].name6 = fileListTemp[0].fileUrl
|
||
equipTableList.value[index].examinationPdf.push(fileListTemp[0])
|
||
}
|
||
}
|
||
|
||
// const onDeleteImgInDetails = () => {}
|
||
|
||
const onDeleteImgInMain = (index: any) => {
|
||
addAndEditForm.mainFileList.splice(index, 1)
|
||
}
|
||
const onDeleteImgInDetails = (index: any) => {
|
||
addAndEditForm.detailsFileList.splice(index, 1)
|
||
}
|
||
const onDeleteImgInsurancePdf = (j: any, index: any) => {
|
||
descriptionFormList.value[j].insurancePdfs.splice(index, 1)
|
||
}
|
||
const onDeleteImgExaminationPdf = (j: any, index: any) => {
|
||
descriptionFormList.value[j].examinationPdfs.splice(index, 1)
|
||
}
|
||
|
||
const onDialogClose = () => {
|
||
addAndEditFormRef.value.resetFields()
|
||
Object.assign(addAndEditForm, {
|
||
deviceName: '',
|
||
deviceTypeList: [],
|
||
deviceCount: 1,
|
||
unitName: '',
|
||
code: '',
|
||
brand: '',
|
||
typeId: '',
|
||
companyId: '',
|
||
productionDate: '',
|
||
dayLeasePrice: '',
|
||
person: '',
|
||
personPhone: '',
|
||
deviceWeight: '',
|
||
checkDate: '',
|
||
checkCycle: '',
|
||
mainFileList: [],
|
||
detailsFileList: [],
|
||
mainFileTempList: [],
|
||
detailsFileTempList: [],
|
||
insurancePdf: [],
|
||
examinationPdf: [],
|
||
insurancePdfs: [],
|
||
examinationPdfs: [],
|
||
})
|
||
}
|
||
const propertyNames = ref<any>([])
|
||
const propertyNamesTwo = ref<any>([])
|
||
const options = ref<any>([])
|
||
|
||
const onPreviewImg = (fileUrl: any) => {
|
||
previewDialogImageUrl.value = fileUrl
|
||
previewDialogVisible.value = true
|
||
}
|
||
// 计算所有装备
|
||
const chunkedItems = computed(() => {
|
||
let result = []
|
||
for (let i = 0; i < propertyNames.value.length; i += 2) {
|
||
result.push(propertyNames.value.slice(i, i + 2))
|
||
}
|
||
return result
|
||
})
|
||
|
||
const equipTableList = ref<any>([])
|
||
|
||
const handleAddBack = () => {
|
||
let obj = {
|
||
identifyCode: '',
|
||
name2: '',
|
||
checkMan: '',
|
||
checkDate: '',
|
||
nextCheckDate: '',
|
||
name6: '',
|
||
insurancePdf: [],
|
||
examinationPdf: [],
|
||
}
|
||
equipTableList.value.push(obj)
|
||
}
|
||
const handleDeleteBack = (index: number) => {
|
||
equipTableList.value.splice(index, 1)
|
||
}
|
||
|
||
const fileListEquip = ref<any>([])
|
||
|
||
const viewCertificate = (url: string) => {
|
||
window.open(url, '_blank')
|
||
}
|
||
const changeDate = (row: any, index: number) => {
|
||
console.log('3333', row)
|
||
const currentDate = new Date(row.checkDate)
|
||
console.log('1111', currentDate)
|
||
console.log('🚀 ~ 告警时间 ~ warningDays.value:', warningDays.value)
|
||
currentDate.setDate(currentDate.getDate() + Number(warningDays.value))
|
||
equipTableList.value[index].nextCheckDate = dayjs(currentDate).format('YYYY-MM-DD')
|
||
// equipTableList.value = [...equipTableList.value];
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="app-container-content">
|
||
<!-- 样式修改 -->
|
||
<!-- 商品管理 -->
|
||
<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="2"></el-option>
|
||
<el-option label="下架" value="1"></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"
|
||
:options="deviceTypeTree"
|
||
:props="partTypeTreeProps"
|
||
filterable
|
||
clearable
|
||
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"
|
||
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-button class="primary-lease" type="primary" @click="onTempDownLoad()"
|
||
>模板下载</el-button
|
||
>
|
||
<el-button class="primary-lease" type="primary" @click="onBatchUpload()"
|
||
>批量上传</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"
|
||
:selectable="
|
||
(row:any) => {
|
||
return row.maStatus != 0
|
||
}
|
||
"
|
||
/>
|
||
<el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
|
||
<el-table-column align="center" label="装备名称">
|
||
<template #default="{ row }">
|
||
{{ `${row.deviceName}` }}
|
||
</template>
|
||
</el-table-column>
|
||
<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" prop="updateTime" label="更新时间" />
|
||
<el-table-column align="center" label="装备状态">
|
||
<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 type="primary" 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="small"
|
||
type="primary"
|
||
@click="handleUpdateUpDown(row, 1)"
|
||
>
|
||
下架
|
||
</el-button>
|
||
<el-button
|
||
v-if="row.maStatus == 1"
|
||
size="small"
|
||
type="primary"
|
||
@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%"
|
||
destroy-on-close
|
||
class="centered-dialog"
|
||
:close-on-click-modal="false"
|
||
:before-close="handleClose"
|
||
@close="onDialogClose"
|
||
>
|
||
<el-row
|
||
:gutter="20"
|
||
class="mb8"
|
||
style="display: flex; justify-content: flex-end; align-items: center"
|
||
>
|
||
<el-button type="primary" class="primary-lease" @click="closeDialogBtn">
|
||
关闭
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
class="primary-lease"
|
||
@click="saveTemp"
|
||
v-if="
|
||
(!equipmentDeploymentParams.maStatus ||
|
||
equipmentDeploymentParams.maStatus == 0) &&
|
||
!isViewForm
|
||
"
|
||
>
|
||
保存草稿
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
class="primary-lease"
|
||
@click="submitBtn"
|
||
v-if="!disabledForm || isEditDisabled"
|
||
>
|
||
提交
|
||
</el-button>
|
||
</el-row>
|
||
|
||
<!-- <div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">基本信息</span>
|
||
</div> -->
|
||
<TitleTip :titleText="`基本信息`" />
|
||
<el-form
|
||
label-width="180px"
|
||
ref="addAndEditFormRef"
|
||
label-position="right"
|
||
:model="addAndEditForm"
|
||
:rules="equipRules"
|
||
:disabled="disabledForm"
|
||
>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="装备名称：" prop="deviceName">
|
||
<el-input
|
||
autocomplete="off"
|
||
maxlength="30"
|
||
v-model="addAndEditForm.deviceName"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="装备类目：" prop="deviceTypeList">
|
||
<el-cascader
|
||
v-model="addAndEditForm.deviceTypeList"
|
||
:show-all-levels="true"
|
||
:options="deviceTypeTree"
|
||
:props="partTypeTreeProps"
|
||
filterable
|
||
clearable
|
||
collapse-tags
|
||
placeholder="请选择装备类目"
|
||
ref="dialogTypeCascader"
|
||
@change="dialogTypeChange"
|
||
style="width: 100%"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="装备单位：" prop="unitName">
|
||
<el-input
|
||
autocomplete="off"
|
||
maxlength="20"
|
||
v-model="addAndEditForm.unitName"
|
||
clearable
|
||
:disabled="isDisabled || isEditForm"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="装备品牌" prop="brand">
|
||
<el-input
|
||
v-model="addAndEditForm.brand"
|
||
autocomplete="off"
|
||
maxlength="20"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="出厂日期：" prop="productionDate">
|
||
<el-date-picker
|
||
v-model="addAndEditForm.productionDate"
|
||
placeholder="请选择出厂日期"
|
||
value-format="YYYY-MM-DD"
|
||
type="date"
|
||
style="width: 100%"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="租赁价格(天/元)：" prop="dayLeasePrice">
|
||
<el-input
|
||
@input="
|
||
(v) => (addAndEditForm.dayLeasePrice = v.replace(/[^\d.]/g, ''))
|
||
"
|
||
v-model="addAndEditForm.dayLeasePrice"
|
||
placeholder="请输入租赁价格"
|
||
clearable
|
||
maxlength="20"
|
||
:disabled="isDisabled || isEditForm"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="联系人：" prop="person">
|
||
<el-input
|
||
v-model="addAndEditForm.person"
|
||
placeholder="请输入联系人"
|
||
clearable
|
||
maxlength="20"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="联系电话：" prop="personPhone">
|
||
<el-input
|
||
v-model="addAndEditForm.personPhone"
|
||
placeholder="请输入联系电话"
|
||
clearable
|
||
maxlength="20"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="校验日期：" prop="checkDate">
|
||
<el-date-picker
|
||
v-model="addAndEditForm.checkDate"
|
||
placeholder="请选择校验日期"
|
||
value-format="YYYY-MM-DD"
|
||
type="date"
|
||
style="width: 100%"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="校验周期：" prop="checkCycle">
|
||
<el-input
|
||
@input="
|
||
(v) => (addAndEditForm.checkCycle = v.replace(/[^\d.]/g, ''))
|
||
"
|
||
v-model="addAndEditForm.checkCycle"
|
||
placeholder="请输入校验周期（数字）"
|
||
clearable
|
||
maxlength="20"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<!-- <el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<el-form-item label="整机重量(KG)：">
|
||
<el-input
|
||
@input="
|
||
(v) => (addAndEditForm.deviceWeight = v.replace(/[^\d.]/g, ''))
|
||
"
|
||
v-model="addAndEditForm.deviceWeight"
|
||
placeholder="请输入整机重量"
|
||
clearable
|
||
maxlength="20"
|
||
style="width: 350px"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row> -->
|
||
<div>
|
||
<el-row
|
||
v-for="(item, index) in chunkedItems"
|
||
:key="index"
|
||
:model="item"
|
||
class="dynamic-item"
|
||
:gutter="20"
|
||
style="display: flex; margin-top: 10px; justify-content: left"
|
||
>
|
||
<el-col v-for="(itemTemp, indexTemp) in item" :key="indexTemp" :span="12">
|
||
<el-form-item :label="itemTemp.propertyName + '：'">
|
||
<el-input
|
||
v-model="itemTemp.propertyValue"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<TitleTip :titleText="`装备图片`" />
|
||
<el-row :gutter="20" v-if="!isViewForm">
|
||
<el-col :span="24">
|
||
<el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
|
||
支持格式：.jpg、.png 单个文件大小不能超过5M
|
||
<div class="tipBox">
|
||
*注:图片排序为平台展示顺序，不得少于1张，不得多于6张，建议使用图片比例1:1
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item
|
||
style="font-weight: bold"
|
||
label="主展示图："
|
||
prop="mainFileList"
|
||
>
|
||
<div
|
||
class="img-list"
|
||
v-if="addAndEditForm.mainFileList.length > 0 && !isAdd"
|
||
>
|
||
<div
|
||
v-for="(j, i) in addAndEditForm.mainFileList"
|
||
:key="j.fileUrl"
|
||
class="img-items"
|
||
>
|
||
<img :src="j.fileUrl" alt="" />
|
||
|
||
<div class="mask-img">
|
||
<div>
|
||
<el-icon
|
||
class="delete-icon"
|
||
@click="onDeleteImgInMain(i)"
|
||
v-if="!isViewForm"
|
||
>
|
||
<DeleteFilled />
|
||
</el-icon>
|
||
<el-icon
|
||
class="delete-icon"
|
||
style="margin-left: 10px"
|
||
@click="onPreviewImg(j.fileUrl)"
|
||
>
|
||
<ZoomIn />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<UploadComponentNew
|
||
v-if="!isViewForm"
|
||
:maxSize="5"
|
||
:max-limit="6"
|
||
width="100px"
|
||
height="100px"
|
||
:actionUrl="uploadUrl"
|
||
:autoUpload="true"
|
||
:multiple="true"
|
||
:minLimit="addAndEditForm.mainFileList.length"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="onMainFileChange"
|
||
>
|
||
<template v-slot:default>
|
||
<el-icon size="42" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" v-if="!isViewForm">
|
||
<el-col :span="24">
|
||
<el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
|
||
支持格式：.jpg、.png 单个文件大小不能超过5M
|
||
<div class="tipBox">
|
||
*注:图片排序为平台展示顺序，不得少于1张，不得多于6张，建议使用图片比例16:9
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item
|
||
style="font-weight: bold"
|
||
label="详情页展示图："
|
||
prop="detailsFileList"
|
||
>
|
||
<div
|
||
class="img-list"
|
||
v-if="addAndEditForm.detailsFileList.length > 0 && !isAdd"
|
||
>
|
||
<div
|
||
v-for="(j, i) in addAndEditForm.detailsFileList"
|
||
:key="j.fileUrl"
|
||
class="img-items"
|
||
>
|
||
<img :src="j.fileUrl" alt="" />
|
||
|
||
<div class="mask-img">
|
||
<div>
|
||
<el-icon
|
||
class="delete-icon"
|
||
@click="onDeleteImgInDetails(i)"
|
||
v-if="!isViewForm"
|
||
>
|
||
<DeleteFilled />
|
||
</el-icon>
|
||
<el-icon
|
||
class="delete-icon"
|
||
style="margin-left: 10px"
|
||
@click="onPreviewImg(j.fileUrl)"
|
||
>
|
||
<ZoomIn />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<UploadComponentNew
|
||
v-if="!isViewForm"
|
||
:maxSize="5"
|
||
:max-limit="6"
|
||
width="100px"
|
||
height="100px"
|
||
:actionUrl="uploadUrl"
|
||
:autoUpload="true"
|
||
:multiple="true"
|
||
:minLimit="addAndEditForm.detailsFileList.length"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="onDetailsFileChange"
|
||
>
|
||
<template v-slot:default>
|
||
<el-icon size="42" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<div style="display: flex; align-items: center">
|
||
<TitleTip :titleText="`装备证书`" />
|
||
<el-button
|
||
size="mini"
|
||
type="primary"
|
||
@click="handleAddBack"
|
||
style="margin-left: 20px; margin-top: 20px"
|
||
:disabled="!addAndEditForm.deviceTypeList"
|
||
v-if="settleinTitle == '新增装备'"
|
||
>添加</el-button
|
||
>
|
||
</div>
|
||
<!-- <el-row :gutter="20" v-if="!isEditForm && !isViewForm">
|
||
<el-col :span="24">
|
||
<el-button class="primary-lease" type="primary" @click="onAddDescription">
|
||
添加装备证书
|
||
</el-button>
|
||
</el-col>
|
||
</el-row> -->
|
||
</el-form>
|
||
|
||
<!-- <el-form
|
||
label-width="140px"
|
||
label-position="right"
|
||
:rules="descriptionRules"
|
||
v-for="(item, index) in descriptionFormList"
|
||
:ref="
|
||
($event:any) => {
|
||
descriptionFormRefList[index] = $event
|
||
}
|
||
"
|
||
:model="item"
|
||
:key="item.newId"
|
||
>
|
||
<el-row :gutter="20" style="margin-top: 12px">
|
||
<el-col :span="12">
|
||
<el-form-item
|
||
style="font-weight: bold"
|
||
label="装备唯一标识符："
|
||
prop="identifyCode"
|
||
>
|
||
<el-input
|
||
v-model="item.identifyCode"
|
||
placeholder="请输入"
|
||
maxlength="20"
|
||
/>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" v-if="!isViewForm">
|
||
<el-col :span="24">
|
||
<el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
|
||
支持格式：.jpg、.png 单个文件大小不能超过5M
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row> -->
|
||
<!-- <el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-form-item
|
||
style="font-weight: bold"
|
||
label="合格证："
|
||
prop="insurancePdfs"
|
||
>
|
||
<div class="img-list" v-if="addAndEditForm.detailsFileList.length > 0">
|
||
<div
|
||
v-for="(j, i) in item.insurancePdfs"
|
||
:key="j.fileUrl"
|
||
class="img-items"
|
||
>
|
||
<img :src="j.fileUrl" alt="" />
|
||
|
||
<div class="mask-img" v-if="!isViewForm">
|
||
<div>
|
||
<el-icon
|
||
class="delete-icon"
|
||
@click="onDeleteImgInMain(i)"
|
||
>
|
||
<DeleteFilled />
|
||
</el-icon>
|
||
<el-icon
|
||
class="delete-icon"
|
||
style="margin-left: 10px"
|
||
@click="onPreviewImg(j.fileUrl)"
|
||
>
|
||
<ZoomIn />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<UploadComponentNew
|
||
v-if="!isViewForm"
|
||
:actionUrl="uploadUrl"
|
||
:maxSize="5"
|
||
:max-limit="4"
|
||
width="100px"
|
||
height="100px"
|
||
:currentIndex="index"
|
||
:autoUpload="true"
|
||
:multiple="true"
|
||
:minLimit="item.insurancePdfs.length"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="onInsurancePdfChange"
|
||
>
|
||
<template v-slot:default>
|
||
<el-icon size="42" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" v-if="!isViewForm">
|
||
<el-col :span="24">
|
||
<el-form-item label="1" style="margin-bottom: 0" class="upload-tip">
|
||
支持格式：.jpg、.png 单个文件大小不能超过5M,
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row
|
||
:gutter="20"
|
||
:style="
|
||
index != descriptionFormList.length - 1
|
||
? 'border-bottom: 1px solid #ccc'
|
||
: ''
|
||
"
|
||
>
|
||
<el-col :span="20">
|
||
<el-form-item
|
||
style="font-weight: bold"
|
||
label="检测证明："
|
||
prop="examinationPdfs"
|
||
>
|
||
<div class="img-list" v-if="addAndEditForm.detailsFileList.length > 0">
|
||
<div
|
||
v-for="(j, i) in item.examinationPdfs"
|
||
:key="j.fileUrl"
|
||
class="img-items"
|
||
>
|
||
<img :src="j.fileUrl" alt="" />
|
||
|
||
<div class="mask-img" v-if="!isViewForm">
|
||
<div>
|
||
<el-icon
|
||
class="delete-icon"
|
||
@click="onDeleteImgInMain(i)"
|
||
>
|
||
<DeleteFilled />
|
||
</el-icon>
|
||
<el-icon
|
||
class="delete-icon"
|
||
style="margin-left: 10px"
|
||
@click="onPreviewImg(j.fileUrl)"
|
||
>
|
||
<ZoomIn />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<UploadComponentNew
|
||
v-if="!isViewForm"
|
||
:actionUrl="uploadUrl"
|
||
:maxSize="5"
|
||
:max-limit="4"
|
||
width="100px"
|
||
height="100px"
|
||
:autoUpload="true"
|
||
:multiple="true"
|
||
:minLimit="item.examinationPdfs.length"
|
||
:currentIndex="index"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="onExaminationPdfChange"
|
||
>
|
||
<template v-slot:default>
|
||
<el-icon size="42" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</UploadComponentNew>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="4" v-if="index != 0">
|
||
<el-button
|
||
size="small"
|
||
type="danger"
|
||
class="primary-lease"
|
||
@click="onDeleteDescription(index)"
|
||
>
|
||
移除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row> -->
|
||
<!-- </el-form> -->
|
||
<el-table :data="equipTableList" width="100%" height="450px">
|
||
<el-table-column label="序号" type="index" width="55" align="center" />
|
||
<el-table-column
|
||
label="唯一标识符"
|
||
prop="identifyCode"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<el-input
|
||
v-model="row.identifyCode"
|
||
style="width: 100%"
|
||
placeholder="请输入唯一标识符"
|
||
maxlength="20"
|
||
></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="合格证"
|
||
prop="name2"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<div v-if="row.name2 == ''">
|
||
<UploadComponentNew
|
||
:maxSize="10"
|
||
:max-limit="1"
|
||
width="100%"
|
||
height="100%"
|
||
:multiple="true"
|
||
:autoUpload="true"
|
||
:actionUrl="uploadUrl"
|
||
:minLimit="row.insurancePdf.length"
|
||
listType="text"
|
||
:justifyContent="`flex-start`"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="
|
||
(fileList) => onFileChangeEquip(fileList, row, $index, 1)
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<el-button
|
||
type="text"
|
||
style="color: #00a288; text-decoration: underline"
|
||
>上传</el-button
|
||
>
|
||
</div>
|
||
</UploadComponentNew>
|
||
<!-- <el-button size="mini" type="primary" @click="uploadTestReport(row)">上传</el-button> -->
|
||
</div>
|
||
<div v-else>
|
||
<el-button
|
||
type="text"
|
||
style="color: #00a288; text-decoration: underline"
|
||
@click="viewCertificate(row.insurancePdf[0].fileUrl)"
|
||
>查看</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="检修人"
|
||
prop="checkMan"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<el-input
|
||
v-model="row.checkMan"
|
||
controls-position="right"
|
||
style="width: 100%"
|
||
placeholder="请输入检修人"
|
||
></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="检修时间"
|
||
prop="checkDate"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<el-date-picker
|
||
v-model="row.checkDate"
|
||
value-format="YYYY-MM-DD"
|
||
type="date"
|
||
placeholder="请选择"
|
||
@change="changeDate(row, $index)"
|
||
style="width: 100%"
|
||
></el-date-picker>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="下次检测时间"
|
||
prop="nextCheckDate"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<el-date-picker
|
||
v-model="row.nextCheckDate"
|
||
value-format="YYYY-MM-DD"
|
||
type="date"
|
||
placeholder="请选择"
|
||
style="width: 100%"
|
||
></el-date-picker>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="检测证明"
|
||
prop="name6"
|
||
align="center"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<div v-if="row.name6 == ''">
|
||
<UploadComponentNew
|
||
:maxSize="10"
|
||
:max-limit="1"
|
||
width="100%"
|
||
height="100%"
|
||
:multiple="true"
|
||
:autoUpload="true"
|
||
:actionUrl="uploadUrl"
|
||
:minLimit="row.examinationPdf.length"
|
||
listType="text"
|
||
:justifyContent="`flex-start`"
|
||
:acceptTypeList="['.jpg', '.png']"
|
||
@onFileChange="
|
||
(fileList) => onFileChangeEquip(fileList, row, $index, 2)
|
||
"
|
||
>
|
||
<div
|
||
style="
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
"
|
||
>
|
||
<el-button
|
||
type="text"
|
||
style="color: #00a288; text-decoration: underline"
|
||
>上传</el-button
|
||
>
|
||
</div>
|
||
</UploadComponentNew>
|
||
<!-- <el-button size="mini" type="primary" @click="uploadTestReport(row)">上传</el-button> -->
|
||
</div>
|
||
<div v-else>
|
||
<el-button
|
||
type="text"
|
||
style="color: #00a288; text-decoration: underline"
|
||
@click="viewCertificate(row.examinationPdf[0].fileUrl)"
|
||
>查看</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
label="操作"
|
||
align="center"
|
||
width="150px"
|
||
v-if="settleinTitle == '新增装备'"
|
||
>
|
||
<template #default="{ row, $index }">
|
||
<div
|
||
style="
|
||
width: 100%;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
"
|
||
>
|
||
<el-button
|
||
size="mini"
|
||
type="danger"
|
||
@click="handleDeleteBack($index)"
|
||
v-show="$index != 0"
|
||
>删除</el-button
|
||
>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
<!-- 图片查看弹窗 -->
|
||
<el-dialog center width="60%" destroy-on-close v-model="previewDialogVisible">
|
||
<el-image
|
||
style="width: 100%; height: 50%"
|
||
:src="previewDialogImageUrl"
|
||
fit="cover"
|
||
:z-index="9999999999"
|
||
/>
|
||
</el-dialog>
|
||
</div>
|
||
</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: #00a288;
|
||
}
|
||
.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%;
|
||
}
|
||
|
||
:deep.upload-tip .el-form-item__label {
|
||
color: transparent;
|
||
}
|
||
|
||
.img-list {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.img-items {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-right: 8px;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.mask-img {
|
||
visibility: hidden;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: #000;
|
||
opacity: 0.5;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.delete-icon {
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
z-index: 9;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
.img-items:hover .mask-img {
|
||
visibility: visible;
|
||
}
|
||
}
|
||
|
||
.centered-dialog {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
// :deep(.el-dialog) {
|
||
// margin: 0 !important;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// max-height: 90%;
|
||
// max-width: 90%;
|
||
// }
|
||
|
||
// :deep(.el-dialog__body) {
|
||
// flex: 1;
|
||
// overflow: auto;
|
||
// }
|
||
|
||
// .dialog-content {
|
||
// padding: 20px;
|
||
// }
|
||
|
||
.app-container-content {
|
||
:deep(.el-dialog) {
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
margin: 0 !important;
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: 50% !important;
|
||
transform: translate(-50%, -50%) !important;
|
||
max-height: 100vh !important;
|
||
.el-dialog__body {
|
||
flex: 1;
|
||
overflow-y: scroll !important;
|
||
.el-table__header-wrapper .el-checkbox {
|
||
display: none !important;
|
||
}
|
||
}
|
||
.dialog-content {
|
||
padding: 20px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|