From 55373c6b400d879ba4a4cdae752fe5140c7b11f6 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 28 四月 2025 17:29:15 +0800
Subject: [PATCH] fix:修改上传图片地址
---
src/views/facility/facilityList/index.vue | 227 +++++++++++++++++++++++++-------------------------------
1 files changed, 102 insertions(+), 125 deletions(-)
diff --git a/src/views/facility/facilityList/index.vue b/src/views/facility/facilityList/index.vue
index 7f7ab47..8ebec4f 100644
--- a/src/views/facility/facilityList/index.vue
+++ b/src/views/facility/facilityList/index.vue
@@ -1,22 +1,22 @@
<script setup>
import facilityApi from "@/api/facility/index";
import pointApi from "@/api/facility/point";
-import supplierApi from "@/api/waterMeterApi/supplier.js";
import facilityTypeApi from "@/api/facility/facilityType.js";
import commonParameters from "@/api/configuration/commonParameters/index.js";
-import waterFacilityParameter from "@/api/configuration/facilityParameter/index.js";
-import {PREURL} from '@/config/index'
+import waterFacilityParameter from "@/api/facility/parameter.js";
import setPostParams from "@/utils/searchParams.js";
+import {onMounted} from "vue";
+
const route = useRoute();
-const preUrl = ref(PREURL);
const {proxy} = getCurrentInstance();
+const imgBaseUrl = import.meta.env.VITE_APP_IMG_BASEURL //图片前缀
/**
* 搜索相关
*/
/** 搜索按钮操作 */
function handleQuery() {
- getList({keywords: searchParams.value.facilityCode})
+ getList(searchParams.value)
}
/** 重置按钮操作 */
@@ -39,15 +39,9 @@
facilityCode: '设备编号',
facilityName: '设备名称',
facilityTypeName: '设备类型',
- longitude: '经度',
- latitude: '纬度',
pointName: '设备监控点',
- networkType:'网络类型',
facilityUrl: '设备图片',
- producedDate:'出厂日期',
- installDate:'安装日期',
- supplier: '设备供应商',
- createTimeView: '创建时间'
+ installDate: '安装日期',
})
/** 获取权限列表 */
@@ -68,13 +62,9 @@
facilityCode: '设备编号',
facilityName: '设备名称',
facilityType: '设备类型',
- longitude: '经度',
- latitude: '纬度',
pointId: '设备监控点',
facilityUrl: '设备图片',
- supplier: '设备供应商',
- networkType:'网络类型',
- remark:'备注信息',
+ remark: '备注信息',
createTimeView: '创建时间'
})
const rules = ref({
@@ -90,46 +80,45 @@
});
//查询监控点
const pointList = ref();
+const cascaderOption = {
+ label: 'pointName',
+ value: 'id',
+ children: 'childrenList',
+ checkStrictly: true,
+ expandTrigger: 'hover',
+ emitPath: false
+}; //级联选择器配置
const getPoint = async () => {
- await pointApi().search({limit: 10000, page: 1}).then((res) => {
- pointList.value = res.data.list
+ await pointApi().getParentPoint().then((res) => {
+ pointList.value = res.data
})
}
-getPoint()
-//查询供应商
-const supplierList = ref();
-const getSupplier = async () => {
- await supplierApi().search({limit: 10000, page: 1}).then((res) => {
- console.log("供应商" + res.data.list);
- supplierList.value = res.data.list
- })
-}
-getSupplier()
+
//查询设备类型
const facilityTypeList = ref();
const getFacilityTypeList = async () => {
- await facilityTypeApi().search({limit: 10000, page: 1}).then((res) => {
+ await facilityTypeApi().search({limit: 100, page: 1}).then((res) => {
facilityTypeList.value = res.data.list
})
}
-getFacilityTypeList()
+
//获取参数列表数据
//设备参数table
const tableParamData = ref([]);
-const getParamList = async() => {
- await commonParameters().search({limit:10000,page: 1}).then((res)=>{
+const getParamList = async () => {
+ await commonParameters().search({limit: 10000, page: 1}).then((res) => {
tableParamData.value = res.data.list;
})
}
//获取已绑定参数数据
-const getSelectParamList = async(val) => {
- await waterFacilityParameter().getParam(val).then((res)=>{
+const getSelectParamList = async (val) => {
+ await waterFacilityParameter().getParam(val).then((res) => {
const data = res.data
- console.log("参数列表",data)
- if(data.length > 0){
- data.forEach( item =>{
- tableParamData.value.forEach((tableItem)=>{
- if(item.columnsCode == tableItem.mark){
+ console.log("参数列表", data)
+ if (data.length > 0) {
+ data.forEach(item => {
+ tableParamData.value.forEach((tableItem) => {
+ if (item.columnsCode == tableItem.mark) {
tableRef.value.toggleRowSelection(tableItem, undefined)
}
})
@@ -137,18 +126,18 @@
}
})
}
+
/** 新增按钮操作 */
async function handleAdd() {
reset();
open.value = true;
+ isDetail.value = false;
title.value = "新增";
- console.log('form',form.value)
}
/** 修改按钮操作 */
async function handleUpdate(row) {
reset();
- // form.value = Object.assign({},row)
Object.keys(row).forEach(key => {
if (form.value.hasOwnProperty(key)) {
form.value[key] = row[key];
@@ -156,6 +145,7 @@
});
form.value.id = row.id
open.value = true;
+ isDetail.value = true;
title.value = "修改";
}
@@ -179,10 +169,11 @@
const openParamForm = ref(false)
const open = ref(false);
const title = ref("");
+const isDetail = ref(false);
const multipleSelection = ref([])
-let tableParamHeader = ref({
+let tableParamHeader = ref({
name: '参数名称',
- mark:'参数标识',
+ mark: '参数标识',
unit: '参数单位',
})
/**
@@ -190,36 +181,35 @@
*/
//绑定数据
const facilityData = ref({
- facilityId:'',
- parameterList:[]
+ facilityId: '',
+ parameterList: []
})
//已选择设备参数
-const handleSelectionParams = (val) =>{
+const handleSelectionParams = (val) => {
multipleSelection.value = val
- console.log('esele',val);
}
/**
* 设备参数操作相关
*/
//提交绑定
-const handleSubmit = async() =>{
- multipleSelection.value.forEach((item) =>{
+const handleSubmit = async () => {
+ multipleSelection.value.forEach((item) => {
facilityData.value.parameterList.push({
- columnsCode:item.mark,
- columnsShow:item.name,
- columnsUnits:item.unit,
+ columnsCode: item.mark,
+ columnsShow: item.name,
+ columnsUnits: item.unit,
})
})
let res = await waterFacilityParameter().create(facilityData.value)
- if(res.code == 200){
+ if (res.code == 200) {
proxy.$modal.msgSuccess('绑定成功！')
facilityData.value.parameterList = []
openParamForm.value = false
tableRef.value.clearSelection()
- }else{
+ } else {
proxy.$modal.msgError('绑定失败！')
openParamForm.value = false
tableRef.value.clearSelection()
@@ -266,35 +256,46 @@
openParamForm.value = false;
reset();
}
+
/** 绑定按钮操作 */
-const handleband = async(row) =>{
+const handleband = async (row) => {
facilityData.value.facilityId = row.id
await getParamList()
getSelectParamList(row.id)
openParamForm.value = true
}
+
/** 表单重置 */
function reset() {
form.value = {
facilityCode: '',
facilityName: '',
+ facilityType: '',
+ pointId: '',
facilityUrl: '',
+ remark: '',
+ installDate: ''
};
proxy.resetForm("facilityTypeRef");
}
-getList();
+onMounted(() => {
+ getList();
+ getPoint()
+ getFacilityTypeList()
+})
+
</script>
<template>
<div class="app-container">
<el-form :model="searchParams" ref="queryRef" :inline="true">
- <el-form-item label="" prop="">
+ <el-form-item label="" prop="keywords">
<el-input
- v-model="searchParams.facilityCode"
- placeholder="请输入搜索信息"
- clearable
- style="width: 200px"
- @keyup.enter="handleQuery"
+ v-model="searchParams.keywords"
+ placeholder="请输入搜索信息"
+ clearable
+ style="width: 200px"
+ @keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item>
@@ -306,30 +307,30 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
- type="primary"
- plain
- icon="Plus"
- @click="handleAdd"
+ type="primary"
+ plain
+ icon="Plus"
+ @click="handleAdd"
>新增
</el-button>
</el-col>
</el-row>
<!--表格及分页-->
- <el-table :data="tableData">
+ <el-table :data="tableData">
<el-table-column
- v-for="(item, key, index) of tableHeader"
- :prop="key.toString()"
- :label="item"
- :key="index"
- align="center"
+ v-for="(item, key, index) of tableHeader"
+ :prop="key.toString()"
+ :label="item"
+ :key="index"
+ align="center"
>
<template #default="scope">
<div v-if="key.toString() === 'facilityUrl'" style="height: 50px;margin: 0 auto">
- <img :src="preUrl + scope.row.facilityUrl" class="table-headImg"/>
+ <img :src="imgBaseUrl + scope.row.facilityUrl" class="table-headImg" alt=""/>
</div>
</template>
</el-table-column>
- <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleband(scope.row)">参数绑定</el-button>
<el-button link type="primary" icon="Edit" v-has="['update',route]"
@@ -342,59 +343,34 @@
</el-table-column>
</el-table>
<pagination
- :total="pageParam.total"
- v-model:page="pageParam.page"
- v-model:limit="pageParam.limit"
- :page-sizes="[10,20,30]"
- @pagination="getList"
+ :total="pageParam.total"
+ v-model:page="pageParam.page"
+ v-model:limit="pageParam.limit"
+ :page-sizes="[10,20,30]"
+ @pagination="getList"
/>
<!-- 添加/修改表单 -->
<el-dialog :title="title" v-model="open" append-to-body center>
- <el-form class="form-box" ref="facilityTypeRef" :model="form" :rules="rules" label-width='auto' >
+ <el-form class="form-box" ref="facilityTypeRef" :model="form" :rules="rules" label-width='auto'>
<el-form-item :label="formLabel.facilityCode" prop="facilityCode">
<el-input v-model="form.facilityCode" :placeholder="inpTip+formLabel.facilityCode"/>
</el-form-item>
<el-form-item :label="formLabel.facilityName" prop="facilityName">
<el-input v-model="form.facilityName" :placeholder="inpTip+formLabel.facilityName"/>
</el-form-item>
- <el-form-item :label="formLabel.longitude" prop="longitude">
- <el-input v-model="form.longitude" :placeholder="inpTip+formLabel.longitude"/>
- </el-form-item>
- <el-form-item :label="formLabel.latitude" prop="latitude">
- <el-input v-model="form.latitude" :placeholder="inpTip+formLabel.latitude"/>
- </el-form-item>
<el-form-item label="选择设备类型" prop="facilityType">
<el-select v-model="form.facilityType" :placeholder="inpTip+formLabel.facilityType">
<el-option
- v-for="(item,index) in facilityTypeList"
- :label="item.name"
- :value="item.id"
- :key="index"
+ v-for="(item,index) in facilityTypeList"
+ :label="item.name"
+ :value="item.id"
+ :key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="选择监控点" prop="pointId">
- <el-select v-model="form.pointId" :placeholder="inpTip+formLabel.pointId">
- <el-option
- v-for="(item,index) in pointList"
- :label="item.pointName"
- :value="item.id"
- :key="index"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="选择供应商" prop="supplier">
- <el-select v-model="form.supplier" :placeholder="inpTip+formLabel.supplier">
- <el-option
- v-for="(item,index) in supplierList"
- :label="item.name"
- :value="item.name"
- :key="index"
- ></el-option>
- </el-select>
- </el-form-item>
- <el-form-item label="设备出厂日期" prop="producedDate">
- <el-input v-model="form.producedDate" placeholder="请输入出厂日期(格式：xxxx年xx月xx日)" />
+ <el-cascader v-model="form.pointId" :options="pointList" :show-all-levels="false"
+ :props="cascaderOption"/>
</el-form-item>
<el-form-item label="安装日期" prop="installDate">
<el-date-picker
@@ -405,21 +381,14 @@
value-format="YYYY-MM-DD"
:disabled="isDetail ? true : false"
/>
- <!-- <el-input v-model="item.installTime" :disabled="isDetail ? true : false"></el-input> -->
- </el-form-item>
- <el-form-item :label="formLabel.networkType" prop="networkType">
- <el-input v-model="form.networkType" :placeholder="inpTip+formLabel.networkType" />
</el-form-item>
<el-form-item :label="formLabel.remark" prop="remark">
- <el-input v-model="form.remark" :placeholder="inpTip+formLabel.remark" />
+ <el-input v-model="form.remark" :placeholder="inpTip+formLabel.remark"/>
</el-form-item>
- <el-form-item><br></el-form-item>
- <el-form-item label="资料上传" prop="facilityUrl">
- <upload-icons @uploadData="uploadData" :imageList="form.facilityUrl" :limit="1"
- :disabled='isDetail ? true : false'></upload-icons>
+ <el-form-item label="资料上传" prop="facilityUrl" style="flex: 1">
+ <upload-icons @uploadData="uploadData" :imageList="form.facilityUrl" :limit="1"></upload-icons>
<span style="display: block;">(请上传1张设备图片)</span>
</el-form-item>
- <el-form-item></el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
@@ -431,8 +400,8 @@
<!-- 设备参数弹窗 -->
<el-dialog title="设备参数" v-model="openParamForm" width="50vw" center align-center append-to-body>
<!--表格-->
- <el-table ref='tableRef' :data="tableParamData" height="75vh" @selection-change="handleSelectionParams" >
- <el-table-column type="selection" width="55" align ="center" />
+ <el-table ref='tableRef' :data="tableParamData" height="75vh" @selection-change="handleSelectionParams">
+ <el-table-column type="selection" width="55" align="center"/>
<el-table-column
v-for="(item, key, index) of tableParamHeader"
:prop="key.toString()"
@@ -452,9 +421,17 @@
</template>
<style lang="scss" scoped>
-.table-headImg{
+.table-headImg {
max-width: 100px;
height: 50px;
}
+
+.form-box {
+ justify-content: normal;
+
+ :deep(.el-cascader) {
+ flex-grow: 1;
+ }
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3