气体管理/区域管理

zhouwenxuan

2023-08-30 15669173497dce16b5d0f17bf4bef36c0d87115c

 src/views/basicDataManage/areaManage/index.vue

@@ -3,10 +3,10 @@
        <el-card shadow="hover">
            <div class="system-menu-search mb15">
                <el-form :inline="true" >
                    <el-form-item label="气体名称：">
                        <el-input  v-model="state.tableData.listQuery.searchParams.areaName"  placeholder="区域名称" ></el-input>
                    <el-form-item label="区域名称：">
                        <el-input  v-model="state.tableData.listQuery.searchParams.name"  placeholder="区域名称" ></el-input>
                    </el-form-item>
                    <el-button size="default" type="primary" class="ml10">
                    <el-button size="default" type="primary" class="ml10" @click="search()">
                        <el-icon>
                            <ele-Search />
                        </el-icon>
@@ -32,7 +32,7 @@
                <el-table-column align="center"  label="区域经纬度">
                    <template #default="scope">
                        <div v-for="(item, index) in scope.row.areaLngLat" :key="index">
                            [{{item.lng}},{{item.lat}}]
                            [ {{item.lng}} , {{item.lat}} ]
                        </div>
                    </template>
                </el-table-column>
@@ -65,44 +65,57 @@
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {reactive, ref, onMounted} from "vue";
import { TableDataState } from "/@/types/areaManage";
import areaDialog from "./component/areaDialog.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {areaManageApi} from "/@/api/basicDataManage/areaManage";

const areaRef = ref();
const state = reactive<TableDataState>({
    tableData: {
        data: [
            // {
            //     id: 'xxx',
            //     areaName: 'xxx',
            //     areaLngLat: [
            //         {
            //             lng: '11',
            //             lat:'22'
            //         },
            //         {
            //             lng: '11',
            //             lat:'22'
            //         }
            //     ],
            //     areaColor: "#ffffff"
            // }
        ],
        data: [],
        total: 0,
        loading: false,
        listQuery: {
            pageIndex: 1,
            pageSize: 10,
            searchParams:{
                areaName:''
                name: ''
            }
        }
    }
});

const initAreaData = () => {
//页面加载
onMounted(() => {
    initAreaData();
});

const initAreaData = async () => {
    let res = await areaManageApi().getAreaPage(state.tableData.listQuery);
    if(res.data.code == 100) {
        if(res.data.data && res.data.data.length > 0) {
            state.tableData.data = res.data.data.map((item: any) => {
                return {
                    id: item.id,
                    areaName: item.name,
                    areaLngLat: item.regionLngLats,
                    areaColor: item.color
                }
            });
        }else {
            state.tableData.data = [];
        }
        state.tableData.total = res.data.total;
        state.tableData.listQuery.pageIndex = res.data.pageIndex;
        state.tableData.listQuery.pageSize = res.data.pageSize;
    }else {
        ElMessage({
            type: 'warning',
            message: res.data.msg
        });
    }
    console.log("数据列表")
};
const onHandleSizeChange = (val: number) => {
@@ -125,17 +138,31 @@
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .then( async() => {
            let res = await areaManageApi().delArea({id: val.id});
            if(res.data.code == 100) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                reset();
            }else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        })
};
const search = () => {
    state.tableData.listQuery.pageIndex = 1;
    initAreaData();
}
const reset = () => {
    state.tableData.listQuery.searchParams.areaName = '';
    state.tableData.listQuery.pageIndex = 1;
    state.tableData.listQuery.searchParams.name = '';
    initAreaData();
}
</script>
<style scoped lang="scss">