1393 lines
48 KiB
Vue
1393 lines
48 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 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="small" label-width="auto">
|
||
<el-form-item label="装备名称：" prop="deviceName">
|
||
<el-input v-model.trim="queryParams.deviceName" style="width: 160px" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="装备编号：" prop="code">
|
||
<el-input v-model.trim="queryParams.code" style="width: 160px" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="装备状态：" prop="maStatus">
|
||
<el-select style="width: 160px" v-model="queryParams.maStatus" clearable>
|
||
<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-form-item label="装备类目：" prop="deviceTypeList">
|
||
<el-cascader
|
||
v-model="deviceTypeList"
|
||
:show-all-levels="false"
|
||
:options="deviceTypeTree"
|
||
:props="partTypeTreeProps"
|
||
filterable
|
||
clearable
|
||
collapse-tags
|
||
style="width: 160px"
|
||
placeholder="请选择装备类目"
|
||
ref="deviceTypeCascader"
|
||
@change="deviceTypeChange"
|
||
></el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="更新时间：" prop="dateRange">
|
||
<el-date-picker
|
||
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-form-item>
|
||
<el-button type="primary" @click="queryTableList">查询</el-button>
|
||
<el-button type="success" @click="resetTableList(queryFormRef)">重置</el-button>
|
||
<el-button type="primary" @click="equipmentDeployment">装备新增</el-button>
|
||
<el-button type="warning" @click="handleUpdateUpDown(null, 2)">批量上架</el-button>
|
||
<el-button type="warning" @click="handleUpdateUpDown(null, 1)">批量下架</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 表格 -->
|
||
<el-table
|
||
:data="tableData"
|
||
style="width: auto"
|
||
row-key="maId"
|
||
show-overflow-tooltip
|
||
max-height="400px"
|
||
:header-cell-style="{ background: '#3E98FF', 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)：">
|
||
<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;
|
||
}
|
||
</style>
|