fix:简化项目框架，终版，处理后台现有问题

web

2025-03-18 8bd42ffbca0bcb0dc18ab17fa8858cd4b333104e

fix:简化项目框架，终版，处理后台现有问题

 src/components/UploadIcons/index.vue

@@ -93,7 +93,6 @@
          })
        })
        fileList.value = list
        console.log('回显',fileList.value)
          
        file.value = newList.split(',')
      }

 src/utils/permission.js

@@ -22,7 +22,6 @@
          }
          function permsJudge(value) {
              let perms = JSON.parse(localStorage.getItem("listPermission")|| '0');
              console.log(value, perms)
              for (let i in perms) {
                  if(typeof value == 'object'){
                      let val = value[0]

 src/views/facility/facilityList/index.vue

@@ -7,6 +7,7 @@
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();
@@ -85,16 +86,7 @@
        pointList.value = res.data.list
    })
}
getPoint()
//查询供应商
const supplierList = ref();
const getSupplier = async () => {
    await supplierApi().search({limit: 100, page: 1}).then((res) => {
        console.log("供应商" + res.data.list);
        supplierList.value = res.data.list
    })
}
getSupplier()

//查询设备类型
const facilityTypeList = ref();
const getFacilityTypeList = async () => {
@@ -102,7 +94,7 @@
        facilityTypeList.value = res.data.list
    })
}
getFacilityTypeList()

//获取参数列表数据
//设备参数table
const tableParamData = ref([]);
@@ -133,13 +125,11 @@
    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];
@@ -189,7 +179,6 @@
//已选择设备参数
const handleSelectionParams = (val) =>{
    multipleSelection.value = val
    console.log('esele',val);
}
/**
 * 设备参数操作相关
@@ -271,12 +260,21 @@
    form.value = {
        facilityCode: '',
        facilityName: '',
        facilityType: '',
        pointId: '',
        facilityUrl: '',
        remark:'',
        installDate: ''
    };
    proxy.resetForm("facilityTypeRef");
}

getList();
onMounted(() => {
    getList();
    getPoint()
    getFacilityTypeList()
})

</script>
<template>
    <div class="app-container">
@@ -383,7 +381,7 @@
                <el-form-item :label="formLabel.remark" prop="remark">
                    <el-input v-model="form.remark" :placeholder="inpTip+formLabel.remark" />
                </el-form-item>
                <el-form-item label="资料上传" prop="facilityUrl">
                <el-form-item label="资料上传" prop="facilityUrl" style="flex: 1">
                    <upload-icons @uploadData="uploadData" :imageList="form.facilityUrl" :limit="1"
                                  :disabled='isDetail ? true : false'></upload-icons>
                    <span style="display: block;">(请上传1张设备图片)</span>

 src/views/facility/monitorList/index.vue

对比新文件
@@ -0,0 +1,276 @@
<!--
 * @Author: hqs elkers@163.com
 * @Date: 2024-08-06 14:47:41
 * @LastEditors: hqs elkers@163.com
 * @LastEditTime: 2024-08-14 16:50:56
 * @FilePath: \water-qinghe-web\src\views\facilit\index.vue
 * @Description: 监控点
-->
<script setup>
import pointApi from "@/api/facility/point";
import {ref} from "vue";
import setPostParams from "@/utils/searchParams.js";

const route = useRoute();
const {proxy} = getCurrentInstance();

/**
 * 搜索相关
 */
/** 搜索按钮操作 */
function handleQuery() {
    getList({keywords: searchParams.value.keywords})
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

/**
 *  Table表格权限数据列表相关
 */

const pageParam = ref({
    total: 0,
    limit: 0,
    page: 1,
})
const tableData = ref([]);

let tableHeader = ref({
    pointName: '监控点名称',
    pointCode: '监控点编号',
    address: '详细地址',
    createTimeView: '创建时间',
    imageUrl: '图片',
    remark: '备注'
})

/** 获取权限列表 */
async function getList(val) {
    loading.value = true;
    let postParam = setPostParams(val)
    await pointApi().search(postParam).then((res) => {
        tableData.value = res.data.list
        pageParam.value.total = res.data.total
        pageParam.value.limit = res.data.limit
        pageParam.value.page = res.data.page
    })
    loading.value = false;
}

/**
 *  表单相关
 */
const formLabel = ({
    pointName: '监控点名称',
    pointCode: '监控点编号',
    address: '详细地址',
    imageUrl: '图片',
    remark: '备注'
})
const rules = ref({
    pointName: [{required: true, message: `请输入${ formLabel.pointName}`, trigger: "blur"}],
    pointCode: [{required: true, message: `请输入${ formLabel.address}`, trigger: "blur"}],
});
const form = ref({
    pointName: '',
    pointCode: '',
    address: '',
    imageUrl: '',
    remark: ''
});
const searchParams = ref({
    keywords: '',
});
/** 新增按钮操作 */
async function handleAdd() {
    reset();
    open.value = true;
    title.value = "新增";
}

/** 修改按钮操作 */
async function handleUpdate(row) {
    reset();
    Object.keys(form.value).forEach(key => {
        if (row.hasOwnProperty(key)) {
            form.value[key] = row[key];
        }
    });
    form.value.id = row.id
    open.value = true;
    title.value = "修改";
}

/** 删除按钮操作 */
function handleDelete(row) {
    proxy.$modal.confirm('是否确认删除名称为"' + row.contact + '"的数据项?').then(function () {
        return pointApi().remove(row.id);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {
    });
}


/**
 *  新增/修改弹窗Form表单相关
 */
const open = ref(false);
const loading = ref(false);
const title = ref("");

//上传文件，添加图片地址信息
const uploadData = (data) => {
    form.value.imageUrl = data.toString();
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if (form.value.id != undefined) {
                pointApi().modify(form.value).then(res => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                }).catch(() => {
                    open.value = false;
                    proxy.$modal.msgError("修改失败");
                });
            } else {
                pointApi().create(form.value).then(res => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                }).catch(() => {
                    open.value = false;
                    proxy.$modal.msgError("新增失败");
                });
            }
        }
    });
}

/** 取消按钮 */
function cancel() {
    open.value = false;
    reset();
}

/** 表单重置 */
function reset() {
    form.value = {
        pointName: '',
        pointCode: '',
        address: '',
        imageUrl: '',
        remark: ''
    };
    proxy.resetForm("formRef");
}

getList();
</script>
<template>
    <div class="app-container">
        <el-form :model="searchParams" ref="queryRef" :inline="true">
            <el-form-item label="" prop="">
                <el-input
                    v-model="searchParams.pointName"
                    placeholder="请输入搜索信息"
                    clearable
                    style="width: 200px"
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                >新增
                </el-button>
            </el-col>
        </el-row>
        <!--表格及分页-->
        <el-table v-loading="loading" :data="tableData">
            <el-table-column
                v-for="(item, key, index) of tableHeader"
                :prop="key.toString()"
                :label="item"
                :key="index"
                align="center"
            >
                <template #default="scope">
                    <div v-if="key === 'imageUrl'">
                        <img :src="scope.row.headImg" class="table-headImg"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" v-has="['update',route]"
                               @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button link type="primary" icon="Delete" v-has="['delete',route]"
                               @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </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"
        />
        <!-- 添加/修改表单 -->
        <el-dialog :title="title" v-model="open" append-to-body center>
            <el-form class="form-box" ref="formRef" :model="form" :rules="rules" label-width='120'>
                <el-form-item :label="formLabel.pointName" prop="pointName">
                    <el-input v-model="form.pointName" :placeholder="'请输入'+formLabel.pointName"/>
                </el-form-item>

                <el-form-item :label="formLabel.pointCode" prop="pointCode">
                    <el-input v-model="form.pointCode" :placeholder="'请输入'+formLabel.pointCode"/>
                </el-form-item>
                <el-form-item :label="formLabel.address" prop="address">
                    <el-input v-model="form.address" :placeholder="'请输入'+formLabel.address"/>
                </el-form-item>
                <el-form-item :label="formLabel.remark" prop="address">
                    <el-input v-model="form.remark" :placeholder="'请输入'+formLabel.remark"/>
                </el-form-item>
                <el-form-item label="图片" prop="imageUrl" style="flex: 1">
                    <upload-icons @uploadData="uploadData" :imageList="form.imageUrl" :limit="1"></upload-icons>
                    <span style="display: block;">(请上传1张设备图片)</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.form-box{
    justify-content: normal;
}
</style>