feat: 添加生态流量页面&做大屏分辨率适配

web

2025-03-19 ae8d9d380854076d0b2da145576ae08f14a8f835

 src/views/facility/facilityType/index.vue

@@ -7,109 +7,112 @@
 * @Description: 设备类型
-->
<script setup>
import  facilityTypeApi from "@/api/facility/facilityType";
import setPostParams from "../../../utils/searchParams.js";
import facilityTypeApi from "@/api/facility/facilityType";
import setPostParams from "@/utils/searchParams.js";

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


/**
 * 搜索相关
 */
 /** 搜索按钮操作 */
 function handleQuery() {
   getList({keywords:searchParams.value.name})
 }
 
 /** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
/** 搜索按钮操作 */
function handleQuery() {
    getList({keywords: searchParams.value.name})
}

 /**
  *  Table表格权限数据列表相关
  */
/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}

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

const pageParam = ref({
    total:0,
    limit:0,
    page:1,
    total: 0,
    limit: 0,
    page: 1,
})
const tableData = ref([]);
const inpTip= '请输入',selTip = '请选择';
let  tableHeader = ref({
        name: '类型名称',
        code: '类型编号',
        facilityType: '设备类型',
        createTimeView:'创建时间'
   })
 /** 获取权限列表 */
 async function getList(val) {
      loading.value = true;
     let postParam = setPostParams(val)
      await facilityTypeApi().search(postParam).then((res) =>{
const inpTip = '请输入', selTip = '请选择';
let tableHeader = ref({
    name: '类型名称',
    code: '类型编号',
    createTimeView: '创建时间'
})

/** 获取权限列表 */
async function getList(val) {
    loading.value = true;
    let postParam = setPostParams(val)
    await facilityTypeApi().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 = ({
      name: '类型名称',
      code: '类型编号',
      createTimeView:'创建时间'
}

/**
 *  表单相关
 */
const formLabel = ({
    name: '类型名称',
    code: '类型编号',
    createTimeView: '创建时间'
})
 const  rules = ref({
    name: [{ required: true, message: `${inpTip+formLabel.name}`, trigger: "blur" }
      
const rules = ref({
    name: [{required: true, message: `${inpTip + formLabel.name}`, trigger: "blur"}

    ],
    code: [{ required: true, message: `${inpTip+formLabel.code}`, trigger: "blur" }],
    code: [{required: true, message: `${inpTip + formLabel.code}`, trigger: "blur"}],
});
const form = ref({});
const searchParams = ref({
    keywords: '',
});
 /** 新增按钮操作 */
 async function handleAdd() {
   reset();
   open.value = true;
   title.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];  
      }  
   });
   form.value.id = row.id
   open.value = true;
   title.value = "修改";
 }

/** 新增按钮操作 */
async function handleAdd() {
    reset();
    open.value = true;
    title.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];
        }
    });
    form.value.id = row.id
    open.value = true;
    title.value = "修改";
}

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

 /**
  *  新增/修改弹窗Form表单相关
  */

/**
 *  新增/修改弹窗Form表单相关
 */
const open = ref(false);
const loading = ref(false);
const title = ref("");
@@ -118,128 +121,136 @@
const uploadData = (data) => {
    form.value.headImg = data.newFileView
}
 /** 提交按钮 */
 function submitForm() {
   proxy.$refs["facilityTypeRef"].validate(valid => {
     if (valid) {
        form.value.contactPhone = Number(form.value.contactPhone)
       if (form.value.id != undefined) {
         facilityTypeApi().modify(form.value).then(res => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         }).catch(() =>{
            open.value = false;
            proxy.$modal.msgError("修改失败");
         });
       } else {
         facilityTypeApi().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 = {
/** 提交按钮 */
function submitForm() {
    proxy.$refs["facilityTypeRef"].validate(valid => {
        if (valid) {
            form.value.contactPhone = Number(form.value.contactPhone)
            if (form.value.id != undefined) {
                facilityTypeApi().modify(form.value).then(res => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                }).catch(() => {
                    open.value = false;
                    proxy.$modal.msgError("修改失败");
                });
            } else {
                facilityTypeApi().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 = {
        name: '',
        code: ''
   };
   proxy.resetForm("facilityTypeRef");
 }
 getList();
 </script>
 <template>
    };
    proxy.resetForm("facilityTypeRef");
}

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.name"
                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.toString() == 'headImg'">
                    <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-form :model="searchParams" ref="queryRef" :inline="true">
            <el-form-item label="" prop="">
                <el-input
                    v-model="searchParams.name"
                    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.toString() == 'headImg'">
                        <img :src="scope.row.headImg" class="table-headImg"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" 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"
            :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-item :label="formLabel.name" prop="name">
               <el-input v-model="form.name" :placeholder="inpTip+formLabel.name"/>
            </el-form-item>
            <el-form-item :label="formLabel.code" prop="code">
               <el-input v-model="form.code" :placeholder="inpTip+formLabel.code" />
            </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>
        <!-- 添加/修改表单 -->
        <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-item :label="formLabel.name" prop="name">
                    <el-input v-model="form.name" :placeholder="inpTip+formLabel.name"/>
                </el-form-item>
                <el-form-item :label="formLabel.code" prop="code">
                    <el-input v-model="form.code" :placeholder="inpTip+formLabel.code"/>
                </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>
</template>

<style lang="scss" scoped>

</style>