fix:修改上传图片地址

web

2 天以前 55373c6b400d879ba4a4cdae752fe5140c7b11f6

 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/facility/supplier.js";
import facilityTypeApi from "@/api/facility/facilityType.js";
import commonParameters from "@/api/configuration/commonParameters/index.js";
import waterFacilityParameter from "@/api/facility/parameter.js";
import {PREURL} from '@/config/index'
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,19 +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];
@@ -183,9 +171,9 @@
const title = ref("");
const isDetail = ref(false);
const multipleSelection = ref([])
let  tableParamHeader = ref({
let tableParamHeader = ref({
    name: '参数名称',
    mark:'参数标识',
    mark: '参数标识',
    unit: '参数单位',
})
/**
@@ -193,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()
@@ -269,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>
@@ -309,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]"
@@ -345,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
@@ -408,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">
@@ -434,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()"
@@ -455,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>