195 lines
7.0 KiB
Vue
195 lines
7.0 KiB
Vue
<template>
|
||
<div class="centent">
|
||
<div class="header">
|
||
<el-button type="primary" @click="dialogVisible = true">添加</el-button>
|
||
</div>
|
||
<div class="center">
|
||
<el-table
|
||
:data="tableData"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:cell-style="{ 'text-align': 'center' }"
|
||
style="width: 100%"
|
||
header-row-class-name="tabth"
|
||
>
|
||
<el-table-column prop="data" label="日期" />
|
||
<el-table-column prop="layerName" label="图层名:" />
|
||
<el-table-column prop="type" label="种类" />
|
||
<el-table-column prop="suiffx" label="格式" />
|
||
<el-table-column prop="remark" label="备注" />
|
||
<el-table-column prop="操作" label="操作">
|
||
<template #default="scope">
|
||
<el-button
|
||
size="small"
|
||
type="danger"
|
||
@click="handleDelete(scope.$index, scope.row)"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-dialog v-model="dialogVisible" title="添加" width="30%" :before-close="handleClose">
|
||
<el-form label-width="100px" :model="formLabelAlign" style="max-width: 460px">
|
||
<el-form-item label="日期:">
|
||
<el-input v-model="formLabelAlign.data" placeholder="例如：2023-06-15" />
|
||
</el-form-item>
|
||
<el-form-item label="图层名:">
|
||
<el-input
|
||
v-model="formLabelAlign.layerName"
|
||
placeholder="例如：2023-06-15-xiaomai"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="种类:">
|
||
<el-select
|
||
popper-class="select_type"
|
||
v-model="formLabelAlign.type"
|
||
width="100"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option label="湿润" value="湿润" />
|
||
<el-option label="适宜" value="适宜" />
|
||
<el-option label="轻度干旱" value="轻度干旱" />
|
||
<el-option label="中度干旱" value="中度干旱" />
|
||
<el-option label="重度干旱" value="重度干旱" />
|
||
<el-option label="无冻害" value="无冻害" />
|
||
<el-option label="轻度冻害" value="轻度冻害" />
|
||
<el-option label="中度冻害" value="中度冻害" />
|
||
<el-option label="重度冻害" value="重度冻害" />
|
||
<el-option label="洪涝" value="洪涝" />
|
||
<el-option label="好" value="好" />
|
||
<el-option label="较好" value="较好" />
|
||
<el-option label="适中" value="适中" />
|
||
<el-option label="较差" value="较差" />
|
||
<el-option label="差" value="差" />
|
||
<el-option label="茶叶" value="茶叶" />
|
||
<el-option label="大豆" value="大豆" />
|
||
<el-option label="花生" value="花生" />
|
||
<el-option label="蓝莓" value="蓝莓" />
|
||
<el-option label="地瓜" value="地瓜" />
|
||
<el-option label="小麦" value="小麦" />
|
||
<el-option label="玉米" value="玉米" />
|
||
<el-option label="马铃薯" value="马铃薯" />
|
||
<el-option label="白菜和萝卜" value="白菜和萝卜" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="格式:">
|
||
<el-select popper-class="select_type" v-model="formLabelAlign.suffix" width="100" placeholder="请选择">
|
||
<el-option label="tif" value="features" />
|
||
<el-option label="shp" value="gridValue" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="备注">
|
||
<el-input v-model="formLabelAlign.remark" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="addlist">确认</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||
import { ElMessageBox } from 'element-plus';
|
||
import { getsaveMap } from '@/api/manage/manaje.js';
|
||
const dialogVisible = ref(false);
|
||
|
||
const formLabelAlign = reactive({
|
||
data: '',
|
||
type: '',
|
||
suffix: '',
|
||
remark: '',
|
||
layerName: '',
|
||
});
|
||
|
||
const tableData = [
|
||
{
|
||
date: '2016-05-03',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
{
|
||
date: '2016-05-02',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
{
|
||
date: '2016-05-04',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
{
|
||
date: '2016-05-01',
|
||
name: 'Tom',
|
||
address: 'No. 189, Grove St, Los Angeles',
|
||
},
|
||
];
|
||
|
||
/*-----------接口---------------*/
|
||
|
||
const getsaveMaps = data => {
|
||
console.log(data);
|
||
getsaveMap({ mapServices: data }).then(res => {
|
||
console.log(res.data);
|
||
});
|
||
};
|
||
|
||
/*------------事件----------------*/
|
||
const addlist = () => {
|
||
dialogVisible.value = false;
|
||
getsaveMaps(formLabelAlign);
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.centent {
|
||
width: 98%;
|
||
margin: 10px;
|
||
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.08);
|
||
.header {
|
||
padding: 10px;
|
||
}
|
||
.center {
|
||
padding: 0 20px;
|
||
:deep(
|
||
.el-table .el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th
|
||
) {
|
||
color: rgba(0, 0, 0, 1);
|
||
}
|
||
height: 93%;
|
||
:deep(.el-table__inner-wrapper) {
|
||
height: 96% !important;
|
||
}
|
||
.example-pagination-block {
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
:deep(.tabth) {
|
||
background-color: rgba(247, 247, 247, 1);
|
||
.el-table-fixed-column--left {
|
||
background: rgba(247, 247, 247, 1) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
<style lang="scss">
|
||
.select_type {
|
||
background: #fff;
|
||
.el-select-dropdown__item.hover {
|
||
background: rgba(217, 231, 255, 0.2);
|
||
}
|
||
.el-select-dropdown__item {
|
||
color: black;
|
||
}
|
||
}
|
||
</style>
|