<template>
|
<basic-container>
|
<avue-crud
|
:option="option"
|
:table-loading="loading"
|
:data="data"
|
v-model:page="page"
|
:permission="permissionList"
|
v-model="form"
|
ref="crud"
|
@row-update="rowUpdate"
|
@row-save="rowSave"
|
@row-del="rowDel"
|
:before-open="beforeOpen"
|
@search-change="searchChange"
|
@search-reset="searchReset"
|
@selection-change="selectionChange"
|
@current-change="currentChange"
|
@size-change="sizeChange"
|
@refresh-change="refreshChange"
|
@on-load="onLoad"
|
>
|
<template #menu-left>
|
<el-button type="primary" icon="el-icon-upload" @click="handleDebug"> 上传图斑 </el-button>
|
<el-button type="primary" icon="el-icon-setting" @click="goTypeManagement">
|
类型管理
|
</el-button>
|
<el-button type="success" icon="el-icon-download" @click="downloadPatch"> 导出 </el-button>
|
</template>
|
|
<template #menu="scope">
|
<el-button type="primary" text icon="el-icon-view" @click="uploadPatch(scope.row, 'detail')"
|
>详情
|
</el-button>
|
<el-button type="primary" text icon="el-icon-edit" @click="uploadPatch(scope.row, 'edit')"
|
>编辑
|
</el-button>
|
<el-button type="primary" text icon="el-icon-delete" @click="rowDel">删除 </el-button>
|
</template>
|
</avue-crud>
|
|
<el-dialog title="上传图斑" append-to-body align-center v-model="box" width="550px">
|
<el-form
|
ref="ruleFormRef"
|
style="max-width: 600px"
|
:model="ruleForm"
|
:rules="rules"
|
label-width="auto"
|
>
|
<el-form-item label="文件名称" prop="name">
|
<el-input v-model="ruleForm.name" />
|
</el-form-item>
|
<el-form-item label="图斑类型" prop="region">
|
<el-select v-model="ruleForm.region" placeholder="Activity zone">
|
<el-option label="Zone one" value="shanghai" />
|
<el-option label="Zone two" value="beijing" />
|
</el-select>
|
</el-form-item>
|
<el-form-item class="center-align">
|
<el-button type="primary"> 图斑上传 </el-button>
|
</el-form-item>
|
<el-form-item class="center-align">
|
<span>注：仅支持gis平台导出的zip压缩文件</span>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
<!-- 图斑详情 -->
|
<SpotDetails v-model:show="uploadPatchDialog" :title="spotDetailsTitle"></SpotDetails>
|
<!-- <patchDetails ref="patchDetails" /> -->
|
</basic-container>
|
</template>
|
|
<script setup>
|
import {
|
spotManagementTableApi,
|
searchManagementApi,
|
uploadManagementApi,
|
tableMapListApi,
|
exportExcel
|
} from '@/api/patchManagement/index';
|
import { getRegionTreeAll } from '@/api/job/task';
|
import { ref, computed, watch } from 'vue';
|
import { useStore } from 'vuex';
|
import { useRouter } from 'vue-router';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { getListPage, getDetail, add, update, remove, enable, disable } from '@/api/resource/oss';
|
import func from '@/utils/func';
|
import patchDetails from '@/views/resource/components/patchDetails.vue';
|
import SpotDetails from '@/views/resource/components/spotDetails.vue';
|
const spotDetailsTitle = ref('');
|
const store = useStore();
|
const router = useRouter();
|
const ruleFormRef = ref(null);
|
let deptTreeData = ref([]);
|
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
|
const ruleForm = reactive({
|
name: 'Hello',
|
region: '',
|
count: '',
|
date1: '',
|
date2: '',
|
delivery: false,
|
location: '',
|
type: [],
|
resource: '',
|
desc: '',
|
});
|
const rules = reactive({
|
name: [
|
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
],
|
region: [
|
{
|
required: true,
|
message: 'Please select Activity zone',
|
trigger: 'change',
|
},
|
],
|
});
|
|
// ===== state =====
|
const form = ref({});
|
const query = ref({});
|
const loading = ref(true);
|
const box = ref(false);
|
|
const page = ref({
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
});
|
|
const selectionList = ref([]);
|
|
const option = ref({
|
addBtn: false,
|
tip: false,
|
searchShow: true,
|
searchMenuSpan: 8,
|
searchMenuPosition: 'right',
|
border: true,
|
index: true,
|
selection: true,
|
grid: false,
|
menuWidth: 240,
|
labelWidth: 100,
|
dialogWidth: 880,
|
dialogClickModal: false,
|
height: 'auto',
|
calcHeight: 20,
|
refreshBtn: false,
|
gridBtn: false,
|
searchShowBtn: false,
|
columnBtn: false,
|
viewBtn: false,
|
editBtn: false,
|
delBtn: false,
|
column: [
|
{
|
label: '文件名称',
|
prop: 'name',
|
span: 24,
|
search: true,
|
searchSpan: 4,
|
rules: [{ required: true, message: '请输入文件名称', trigger: 'blur' }],
|
},
|
{
|
label: '图斑类型',
|
prop: 'ossCode',
|
span: 24,
|
searchLabelWidth: 100,
|
search: true,
|
searchSpan: 4,
|
type: 'select',
|
dicData: [
|
{ label: 'Zone one', value: 'shanghai' },
|
{ label: 'Zone two', value: 'beijing' },
|
],
|
props: {
|
label: 'label',
|
value: 'value',
|
},
|
rules: [{ required: true, message: '请输入图斑类型', trigger: 'blur' }],
|
},
|
{
|
label: '图斑数量',
|
prop: 'ossCode',
|
span: 24,
|
rules: [{ required: true, message: '请输入图斑数量', trigger: 'blur' }],
|
},
|
{
|
label: '异常图斑数量',
|
prop: 'ossCode',
|
span: 24,
|
rules: [{ required: true, message: '请输入异常图斑数量', trigger: 'blur' }],
|
},
|
{
|
label: '行政区划',
|
prop: 'ossCode111',
|
span: 24,
|
searchLabelWidth: 100,
|
search: true,
|
searchSpan: 4,
|
type: 'tree',
|
dicData: deptTreeData,
|
props: {
|
label: 'name',
|
value: 'id',
|
children: 'childrens',
|
},
|
rules: [{ required: true, message: '请选择行政区划', trigger: 'blur' }],
|
},
|
{
|
label: '数据来源',
|
prop: 'ossCode',
|
span: 24,
|
rules: [{ required: true, message: '请输入数据来源', trigger: 'blur' }],
|
},
|
{
|
label: '创建时间',
|
prop: 'ossCode',
|
span: 24,
|
rules: [{ required: true, message: '请输入创建时间', trigger: 'blur' }],
|
},
|
{
|
label: '创建人',
|
prop: 'bucketName',
|
span: 24,
|
searchLabelWidth: 100,
|
search: true,
|
searchSpan: 4,
|
type: 'select',
|
dicData: [
|
{ label: '张三', value: 'zhangsan' },
|
{ label: '李四', value: 'lisi' },
|
{ label: '王五', value: 'wangwu' },
|
],
|
props: {
|
label: 'label',
|
value: 'value',
|
},
|
rules: [{ required: true, message: '请输入创建人', trigger: 'blur' }],
|
},
|
],
|
});
|
|
const data = ref([]);
|
// ===== refs =====
|
const crudRef = ref(null);
|
const uploadPatchDialog = ref(null);
|
|
// ===== computed =====
|
const userInfo = computed(() => store.getters.userInfo);
|
const permission = computed(() => store.getters.permission);
|
|
const permissionList = computed(() => ({
|
addBtn: !!permission.value.oss_add,
|
viewBtn: !!permission.value.oss_view,
|
delBtn: !!permission.value.oss_delete,
|
editBtn: !!permission.value.oss_edit,
|
}));
|
|
const ids = computed(() => selectionList.value.map(ele => ele.id).join(','));
|
// 获取行政区划
|
const requestDockInfo = () => {
|
getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
|
deptTreeData.value = res.data.data ? [res.data.data] : [];
|
|
console.log('xingzhengquhua', deptTreeData.value);
|
});
|
};
|
// ===== watch =====
|
watch(
|
() => form.value.category,
|
() => {
|
const category = func.toInt(form.value.category);
|
option.value.column.forEach(item => {
|
if (item.prop === 'appId') {
|
item.display = category === 4;
|
}
|
});
|
}
|
);
|
// ===== methods =====
|
const rowSave = (row, done, loading) => {
|
add(row).then(
|
() => {
|
onLoad(page.value);
|
ElMessage.success('操作成功!');
|
done();
|
},
|
error => {
|
console.log(error);
|
loading();
|
}
|
);
|
};
|
|
const rowUpdate = (row, index, done, loading) => {
|
update(row).then(
|
() => {
|
onLoad(page.value);
|
ElMessage.success('操作成功!');
|
done();
|
},
|
error => {
|
console.log(error);
|
loading();
|
}
|
);
|
};
|
|
const rowDel = row => {
|
ElMessageBox.confirm('确定将选择数据删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
});
|
// .then(() => remove(row.id))
|
// .then(() => {
|
// onLoad(page.value);
|
// ElMessage.success('操作成功!');
|
// });
|
};
|
|
const searchReset = () => {
|
query.value = {};
|
onLoad(page.value);
|
};
|
|
const searchChange = (params, done) => {
|
query.value = params;
|
page.value.currentPage = 1;
|
onLoad(page.value, params);
|
done();
|
};
|
|
const selectionChange = list => {
|
selectionList.value = list;
|
};
|
|
const selectionClear = () => {
|
selectionList.value = [];
|
crudRef.value?.toggleSelection();
|
};
|
|
const handleDebug = row => {
|
box.value = true;
|
};
|
const beforeOpen = (done, type) => {
|
// if (['edit', 'view'].includes(type)) {
|
// getDetail(form.value.id).then(res => {
|
// form.value = res.data.data
|
// })
|
// }
|
done();
|
};
|
|
const currentChange = currentPage => {
|
page.value.currentPage = currentPage;
|
};
|
|
const sizeChange = pageSize => {
|
page.value.pageSize = pageSize;
|
};
|
|
const refreshChange = () => {
|
onLoad(page.value, query.value);
|
};
|
|
const onLoad = (pageInfo, params = {}) => {
|
console.log('参数', pageInfo);
|
const searchparams = {
|
current: pageInfo.currentPage,
|
size: pageInfo.pageSize,
|
};
|
loading.value = true;
|
getListPage(pageInfo.currentPage, pageInfo.pageSize, Object.assign({}, params, query.value)).then(
|
res => {
|
const d = res.data.data;
|
page.value.total = d.total;
|
data.value = d.records;
|
loading.value = false;
|
selectionClear();
|
}
|
);
|
};
|
|
// 图斑详情/编辑
|
const uploadPatch = (row, type = 'detail') => {
|
uploadPatchDialog.value = true;
|
spotDetailsTitle.value = type === 'detail' ? '图斑详情' : '图斑编辑';
|
};
|
|
// 跳转至图斑类型管理页面
|
const goTypeManagement = () => {
|
router.push({ path: '/resource/patchTypeManagement' });
|
};
|
|
// 下载图斑
|
const downloadPatch = () => {
|
crudRef.value?.download();
|
};
|
onMounted(() => {
|
requestDockInfo();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.center-align :deep(.el-form-item__content) {
|
justify-content: center !important;
|
}
|
</style>
|
