| | |
| | | <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"> |
| | | <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-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> |
| | | <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 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 type="primary" text icon="el-icon-edit" @click="uploadPatch(scope.row, 'edit')" |
| | | >编辑 |
| | | </el-button> |
| | | <el-button type="primary" text icon="el-icon-delete" @click="handleDebug(scope.row)">删除 |
| | | </el-button> |
| | | <el-button type="primary" text icon="el-icon-delete" @click="rowDel">删除 </el-button> |
| | | </template> |
| | | </avue-crud> |
| | | |
| | | <el-dialog title="上传图斑" append-to-body v-model="box" width="550px"> |
| | | <avue-form ref="form" :option="debugOption" v-model="debugForm" @submit="handleSubmit" /> |
| | | <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> |
| | | <SpotDetails v-model:show="uploadPatchDialog" :title="spotDetailsTitle"></SpotDetails> |
| | | <!-- <patchDetails ref="patchDetails" /> --> |
| | | </basic-container> |
| | | </template> |
| | | |
| | | <script setup> |
| | | 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 { |
| | | 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 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 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 selectionList = ref([]); |
| | | |
| | | const option = ref({ |
| | | addBtn: false, |
| | |
| | | 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', |
| | | prop: 'ossCode111', |
| | | span: 24, |
| | | searchLabelWidth: 100, |
| | | search: true, |
| | | searchSpan: 4, |
| | | rules: [{ required: true, message: '请输入行政区划', trigger: 'blur' }], |
| | | type: 'tree', |
| | | dicData: deptTreeData, |
| | | props: { |
| | | label: 'name', |
| | | value: 'id', |
| | | children: 'childrens', |
| | | }, |
| | | rules: [{ required: true, message: '请选择行政区划', trigger: 'blur' }], |
| | | }, |
| | | { |
| | | label: '数据来源', |
| | |
| | | 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([]) |
| | | |
| | | const debugForm = ref({ |
| | | code: '', |
| | | backgroundUrl: '', |
| | | }) |
| | | |
| | | const debugOption = ref({ |
| | | submitText: '提交', |
| | | column: [ |
| | | { |
| | | label: '资源编号', |
| | | prop: 'code', |
| | | disabled: true, |
| | | span: 24, |
| | | }, |
| | | { |
| | | label: '上传背景', |
| | | prop: 'backgroundUrl', |
| | | type: 'upload', |
| | | listType: 'picture-img', |
| | | dataType: 'string', |
| | | action: '/blade-resource/oss/endpoint/put-file', |
| | | propsHttp: { res: 'data', url: 'link' }, |
| | | span: 24, |
| | | }, |
| | | ], |
| | | }) |
| | | |
| | | const data = ref([]); |
| | | // ===== refs ===== |
| | | const crudRef = ref(null) |
| | | const uploadPatchDialog = ref(null) |
| | | const crudRef = ref(null); |
| | | const uploadPatchDialog = ref(null); |
| | | |
| | | // ===== computed ===== |
| | | const userInfo = computed(() => store.getters.userInfo) |
| | | const permission = computed(() => store.getters.permission) |
| | | 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 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) |
| | | const category = func.toInt(form.value.category); |
| | | option.value.column.forEach(item => { |
| | | if (item.prop === 'appId') { |
| | | item.display = category === 4 |
| | | item.display = category === 4; |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | ) |
| | | |
| | | watch( |
| | | () => debugForm.value.code, |
| | | () => { |
| | | const column = debugOption.value.column.find(item => item.prop === 'backgroundUrl') |
| | | if (column) { |
| | | column.action = `/blade-resource/oss/endpoint/put-file?code=${debugForm.value.code}` |
| | | } |
| | | } |
| | | ) |
| | | |
| | | ); |
| | | // ===== methods ===== |
| | | const rowSave = (row, done, loading) => { |
| | | add(row).then( |
| | | () => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | done() |
| | | onLoad(page.value); |
| | | ElMessage.success('操作成功!'); |
| | | done(); |
| | | }, |
| | | error => { |
| | | console.log(error) |
| | | loading() |
| | | console.log(error); |
| | | loading(); |
| | | } |
| | | ) |
| | | } |
| | | ); |
| | | }; |
| | | |
| | | const rowUpdate = (row, index, done, loading) => { |
| | | update(row).then( |
| | | () => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | done() |
| | | onLoad(page.value); |
| | | ElMessage.success('操作成功!'); |
| | | done(); |
| | | }, |
| | | error => { |
| | | console.log(error) |
| | | loading() |
| | | console.log(error); |
| | | loading(); |
| | | } |
| | | ) |
| | | } |
| | | ); |
| | | }; |
| | | |
| | | const rowDel = row => { |
| | | ElMessageBox.confirm('确定将选择数据删除?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => remove(row.id)) |
| | | .then(() => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | }) |
| | | } |
| | | }); |
| | | // .then(() => remove(row.id)) |
| | | // .then(() => { |
| | | // onLoad(page.value); |
| | | // ElMessage.success('操作成功!'); |
| | | // }); |
| | | }; |
| | | |
| | | const searchReset = () => { |
| | | query.value = {} |
| | | onLoad(page.value) |
| | | } |
| | | query.value = {}; |
| | | onLoad(page.value); |
| | | }; |
| | | |
| | | const searchChange = (params, done) => { |
| | | query.value = params |
| | | page.value.currentPage = 1 |
| | | onLoad(page.value, params) |
| | | done() |
| | | } |
| | | query.value = params; |
| | | page.value.currentPage = 1; |
| | | onLoad(page.value, params); |
| | | done(); |
| | | }; |
| | | |
| | | const selectionChange = list => { |
| | | selectionList.value = list |
| | | } |
| | | selectionList.value = list; |
| | | }; |
| | | |
| | | const selectionClear = () => { |
| | | selectionList.value = [] |
| | | crudRef.value?.toggleSelection() |
| | | } |
| | | |
| | | const handleEnable = row => { |
| | | ElMessageBox.confirm('是否确定启用这条配置?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => enable(row.id)) |
| | | .then(() => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | crudRef.value?.toggleSelection() |
| | | }) |
| | | } |
| | | |
| | | const handleDisable = row => { |
| | | ElMessageBox.confirm('是否确定禁用用这条配置?', '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning', |
| | | }) |
| | | .then(() => disable(row.id)) |
| | | .then(() => { |
| | | onLoad(page.value) |
| | | ElMessage.success('操作成功!') |
| | | crudRef.value?.toggleSelection() |
| | | }) |
| | | } |
| | | selectionList.value = []; |
| | | crudRef.value?.toggleSelection(); |
| | | }; |
| | | |
| | | const handleDebug = row => { |
| | | box.value = true |
| | | debugForm.value.code = row.ossCode |
| | | debugForm.value.backgroundUrl = '' |
| | | } |
| | | |
| | | const handleSubmit = (formData, done) => { |
| | | ElMessage.success(`获取到图片地址:[${formData.backgroundUrl}]`) |
| | | done() |
| | | } |
| | | |
| | | box.value = true; |
| | | }; |
| | | const beforeOpen = (done, type) => { |
| | | if (['edit', 'view'].includes(type)) { |
| | | getDetail(form.value.id).then(res => { |
| | | form.value = res.data.data |
| | | }) |
| | | } |
| | | done() |
| | | } |
| | | // if (['edit', 'view'].includes(type)) { |
| | | // getDetail(form.value.id).then(res => { |
| | | // form.value = res.data.data |
| | | // }) |
| | | // } |
| | | done(); |
| | | }; |
| | | |
| | | const currentChange = currentPage => { |
| | | page.value.currentPage = currentPage |
| | | } |
| | | page.value.currentPage = currentPage; |
| | | }; |
| | | |
| | | const sizeChange = pageSize => { |
| | | page.value.pageSize = pageSize |
| | | } |
| | | page.value.pageSize = pageSize; |
| | | }; |
| | | |
| | | const refreshChange = () => { |
| | | onLoad(page.value, query.value) |
| | | } |
| | | onLoad(page.value, query.value); |
| | | }; |
| | | |
| | | const onLoad = (pageInfo, params = {}) => { |
| | | 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() |
| | | }) |
| | | } |
| | | 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' }) |
| | | } |
| | | router.push({ path: '/resource/patchTypeManagement' }); |
| | | }; |
| | | |
| | | // 下载图斑 |
| | | const downloadPatch = () => { |
| | | crudRef.value?.download() |
| | | } |
| | | crudRef.value?.download(); |
| | | }; |
| | | onMounted(() => { |
| | | requestDockInfo(); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"></style> |
| | | <style scoped lang="scss"> |
| | | .center-align :deep(.el-form-item__content) { |
| | | justify-content: center !important; |
| | | } |
| | | </style> |