1255 lines
48 KiB
Vue
1255 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(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="60%" 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">
|
||
草 稿
|
||
</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="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-row>
|
||
<el-row>
|
||
<el-form-item label="装备单位：" prop="unitName">
|
||
<el-input
|
||
autocomplete="off"
|
||
style="width: 350px" maxlength="20"
|
||
v-model="equipmentDeploymentParams.unitName"
|
||
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="code">
|
||
<el-input
|
||
autocomplete="off"
|
||
style="width: 350px" maxlength="40"
|
||
v-model="equipmentDeploymentParams.code"
|
||
clearable />
|
||
</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="productionDate">
|
||
<el-date-picker
|
||
v-model="equipmentDeploymentParams.productionDate"
|
||
placeholder="请选择出厂日期"
|
||
value-format="yyyy-MM-dd"
|
||
type="date" style="width: 350px;">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="租赁价格(天/元)：" prop="dayLeasePrice">
|
||
<el-input
|
||
@input="(v)=>(equipmentDeploymentParams.dayLeasePrice=v.replace(/[^\d.]/g,''))"
|
||
v-model="equipmentDeploymentParams.dayLeasePrice"
|
||
placeholder="请输入租赁价格"
|
||
clearable maxlength="20"
|
||
style="width: 350px;"
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="联系人：" prop="person">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.person"
|
||
placeholder="请输入联系人"
|
||
clearable maxlength="20"
|
||
style="width: 350px;"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="联系电话：" prop="personPhone">
|
||
<el-input
|
||
v-model="equipmentDeploymentParams.personPhone"
|
||
placeholder="请输入联系电话"
|
||
clearable maxlength="20"
|
||
style="width: 350px;"
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
<el-row>
|
||
<el-form-item label="整机重量(KG)：" prop="deviceWeight">
|
||
<el-input
|
||
@input="(v)=>(equipmentDeploymentParams.deviceWeight=v.replace(/[^\d.]/g,''))"
|
||
v-model="equipmentDeploymentParams.deviceWeight"
|
||
placeholder="请输入整机重量"
|
||
clearable maxlength="20"
|
||
style="width: 350px;"
|
||
/>
|
||
</el-form-item>
|
||
</el-row>
|
||
|
||
<!-- <el-form-item label="检测信息" prop="detectionList">
|
||
<uploadComponent
|
||
v-if="!disabledForm || isEditDisabled"
|
||
:maxLimit="1"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
|
||
width="120px"
|
||
height="120px"
|
||
:autoUpload="true"
|
||
:successResultCallBack="successResultCallBackFnjc">
|
||
<template v-slot:default>
|
||
<el-icon size="20" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</uploadComponent>
|
||
|
||
<template v-else>
|
||
<a
|
||
style="color: rgb(97, 226, 153); cursor: pointer"
|
||
target="_blank"
|
||
:href="equipmentDeploymentParams.jcUrl">
|
||
查 看 附 件
|
||
</a>
|
||
</template>
|
||
</el-form-item>
|
||
<el-form-item label="保险信息" prop="insureList">
|
||
<uploadComponent
|
||
v-if="!disabledForm || isEditDisabled"
|
||
:maxLimit="1"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.pdf', '.jpg', '.jpeg', '.png']"
|
||
width="120px"
|
||
height="120px"
|
||
:autoUpload="true"
|
||
:successResultCallBack="successResultCallBackFnbs">
|
||
<template v-slot:default>
|
||
<el-icon size="20" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</uploadComponent>
|
||
|
||
<template v-else>
|
||
<a
|
||
style="color: rgb(97, 226, 153); cursor: pointer"
|
||
target="_blank"
|
||
:href="equipmentDeploymentParams.bsUrl">
|
||
查 看 附 件
|
||
</a>
|
||
</template>
|
||
</el-form-item>
|
||
<el-form-item label="设备图片" prop="picList">
|
||
<uploadComponent
|
||
v-if="!disabledForm && isEditDisabled"
|
||
:maxLimit="8"
|
||
listType="picture-card"
|
||
:acceptTypeList="['.jpg', '.jpeg', '.png']"
|
||
width="120px"
|
||
height="120px"
|
||
:successResultCallBack="successResultCallBackFnDevicePic"
|
||
:autoUpload="true"
|
||
:multiple="true">
|
||
<template v-slot:default>
|
||
<el-icon size="48" color="#aaa"><Plus /></el-icon>
|
||
</template>
|
||
</uploadComponent>
|
||
<span v-if="!disabledForm">
|
||
至少一张，最多八张
|
||
设备图片格式为jpg、png、和gif，文件不得超过5M，否则将无法上传。请从前后左右四个方向以及从主要工作部件，内部结构等方面展示设备
|
||
</span>
|
||
|
||
<template v-if="disabledForm && !isEditDisabled">
|
||
<template v-if="equipmentDeploymentParams.devPicList.length > 0">
|
||
<el-image
|
||
v-for="item in equipmentDeploymentParams.devPicList"
|
||
:key="item"
|
||
style="width: 120px; height: 120px; margin-right: 8px"
|
||
:src="item"
|
||
fit="cover" />
|
||
</template>
|
||
<template v-else>暂无图片</template>
|
||
</template>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
<div class="title">
|
||
<span class="title-sign"></span>
|
||
<span class="title-text">装备图片</span>
|
||
</div>
|
||
<div class="uploadBox">
|
||
<div class="labelBox">
|
||
<div style="margin-left: 20px;">
|
||
<span style="color: red;">*</span>
|
||
<span style="font-size: 14px;color: #606266;font-weight: 600;">主展示图: </span>
|
||
</div>
|
||
<div style="margin-left: 20px;">
|
||
<el-upload ref="upload" :limit="6" :headers="headerInfo"
|
||
:action="actionUrl" :show-file-list="false" accept=".png, .jpg, .jpeg"
|
||
:on-success="handleFileSuccess" :auto-upload="true"
|
||
:before-upload="beforeUpload" :on-error="uploadError"
|
||
>
|
||
<el-button icon="FolderOpened">上传文件</el-button>
|
||
</el-upload>
|
||
</div>
|
||
<div style="color: #999;font-size: 12px;margin-left: 20px;">支持格式：.jpg .png，单个文件大小不能超过2M</div>
|
||
</div>
|
||
<div class="imgsBox">
|
||
<!-- <div class="imgItem" v-if="mainFileList.length==0">
|
||
<div class="icon-list" style="left: 60px;">
|
||
<span class="imgItem__icon" >
|
||
<i class="el-icon-plus"/>
|
||
</span>
|
||
</div>
|
||
</div> -->
|
||
<div class="imgItem" v-for="(item,index) in mainFileList" :key="index">
|
||
<img class="picture-card" :src="item.fileUrl" alt="">
|
||
<div class="icon-list">
|
||
<span class="imgItem__icon hide" @click="handleDownload(item)">
|
||
<i class="el-icon-download"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="picturePreview(item)">
|
||
<i class="el-icon-zoom-in"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="handleRemove(mainFileList,index)">
|
||
<i class="el-icon-delete"/>
|
||
</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)">
|
||
<i class="el-icon-download"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="picturePreview(item)">
|
||
<i class="el-icon-zoom-in"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="handleRemove(detailsFileList,index)">
|
||
<i class="el-icon-delete"/>
|
||
</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)">
|
||
<i class="el-icon-download"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="picturePreview(item)">
|
||
<i class="el-icon-zoom-in"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="handleRemove(insurancePdf,index)">
|
||
<i class="el-icon-delete"/>
|
||
</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)">
|
||
<i class="el-icon-download"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="picturePreview(item)">
|
||
<i class="el-icon-zoom-in"/>
|
||
</span>
|
||
<span class="imgItem__icon hide" @click="handleRemove(examinationPdf,index)">
|
||
<i class="el-icon-delete"/>
|
||
</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="100%" height="500px" :src="dialogImageUrl" />
|
||
</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: auto;
|
||
height: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
margin-left: 20px;
|
||
|
||
.imgItem{
|
||
width: 160px;
|
||
height: 160px;
|
||
margin-right: 40px;
|
||
border: 1px dashed #bbb;
|
||
position: relative;
|
||
.picture-card{
|
||
width: 160px;
|
||
height: 160px;
|
||
}
|
||
.icon-list{
|
||
width: 60px;height: 20px;
|
||
position: absolute;
|
||
top: 70px;
|
||
left: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.imgItem__icon{
|
||
margin: 0 5px;
|
||
}
|
||
.file-name{
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
|
||
.hide{
|
||
display: none;
|
||
}
|
||
.imgItem:hover .hide{
|
||
display: block;
|
||
}
|
||
|
||
}
|
||
.tipBox{
|
||
color: red;
|
||
font-size: 12px;
|
||
margin-left: 20px;
|
||
}
|
||
</style>
|