数据管理

src/api/dataManagement/dataManagement.ts

@@ -1,28 +1,48 @@
 import request from '@/utils/request';
-export function getPersonnel(params) {
+
+// 数据管理-获取数据列表
+export function getDataManagerDataList(id, params) {
   return request({
-    url: '',
+    url: '/api/dataManager/get_data/' + id,
     method: 'get',
     params: params
   });
 }
-export function getPersonnel2(id) {
+// 数据管理列表-下拉框
+export function getDataManagerList() {
   return request({
-    url: `${id}`,
+    url: '/api/dataManager/list',
     method: 'get'
   });
 }
-export function uploadPersonnel(id, personnel) {
+// 数据管理列表-下拉框
+export function getDataManagerInfo(id) {
   return request({
-    url: '' + id,
+    url: '/api/dataManager/info/' + id,
+    method: 'get'
+  });
+}
+
+// 数据管理列表-更新数据
+export function updateDataManagerInfo(queryParams) {
+  return request({
+    url: `/api/dataManager/update_data/${queryParams.tableId}/${queryParams.dataId}`,
     method: 'put',
-    data: personnel
+    data: queryParams.data
+  });
+}
+// 数据管理列表-更新数据
+export function deleteDataManagerInfo(tableId, dataId) {
+  return request({
+    url: `/api/dataManager/delete_data/${tableId}/${dataId}`,
+    method: 'delete'
   });
 }
-export function addPersonnel(personnel_list) {
+// 数据管理列表-新增数据
+export function addDataManagerInfo(queryParams) {
   return request({
-    url: '',
+    url: `/api/dataManager/add_data/${queryParams.tableId}`,
     method: 'post',
-    data: personnel_list
+    data: queryParams.data
   });
 }

src/views/dataManagement/AddDataManagement.vue

@@ -2,12 +2,27 @@
   <div class="common-dialog">
     <div class="common-dialog-content">
       <div class="common-dialog-title-box">
-        <h3 class="common-dialog-title">{{ detailId ? '修改数据' : '新建数据' }}</h3>
+        <h3 class="common-dialog-title">{{ detailData && detailData.id ? '修改数据' : '新建数据' }}</h3>
       </div>
       <div class="common-dialog-box">
         <el-form ref="formRef" :model="formData" :rules="rules" label-width="auto">
-          <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label + '：'" :prop="item.prop">
-            <el-input v-model="formData[item.prop]" type="textarea" :autosize="{ minRows: 1, maxRows: 6 }" style="width: 468px !important" />
+          <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.column_comment + '：'" :prop="item.column_name">
+            <el-date-picker
+              v-if="['date', 'datetime'].includes(item.data_type)"
+              v-model="formData[item.column_name]"
+              :type="item.data_type === 'date' ? 'date' : 'datetime'"
+              :value-format="item.data_type === 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
+              :placeholder="'请选择' + item.column_comment"
+              style="width: 468px !important"
+            />
+            <el-input
+              v-else
+              v-model="formData[item.column_name]"
+              :type="['double', 'float'].includes(item.data_type) ? 'number' : 'textarea'"
+              :placeholder="'请输入' + item.column_comment"
+              :autosize="{ minRows: 1, maxRows: 6 }"
+              style="width: 468px !important"
+            />
           </el-form-item>
         </el-form>
         <div class="common-dialog-footer">
@@ -20,9 +35,12 @@
 </template>
 
 <script lang="ts" setup>
+import { addDataManagerInfo, getDataManagerInfo, updateDataManagerInfo } from '@/api/dataManagement/dataManagement';
+import { deepClone } from '@/utils';
+
 const props = defineProps({
   dataType: String,
-  detailId: String
+  detailData: []
 });
 const emits = defineEmits(['onCancel', 'onConfirm']);
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -38,102 +56,30 @@ const closeDialog = () => {
 
 // 获取表单元素
 const getFormConfig = () => {
-  const data =
-    props.dataType === '1'
-      ? [
-          { label: '工程名称', prop: 'name', required: true },
-          { label: '建设单位', prop: 'unit', required: true },
-          { label: '人防专业监理工程师', prop: 'engineer' },
-          { label: '建设地点', prop: 'location' },
-          { label: '操作方式', prop: 'operation', required: true },
-          { label: '应建人防地下室面积(㎡)', prop: 'plannedArea' },
-          { label: '实建人防地下室面积(㎡)', prop: 'actualArea' },
-          { label: '更新时间', prop: 'updateTime' }
-        ]
-      : [
-          { label: '姓名', prop: 'name', required: true },
-          { label: '所属区域', prop: 'area', required: true },
-          { label: '单位', prop: 'company' },
-          { label: '职位', prop: 'official' },
-          { label: '联系电话', prop: 'phone' },
-          { label: '专家类型', prop: 'type', required: true }
-        ];
-  createRules(data);
-  if (props.detailId) {
-    const formObj = {};
+  getDataManagerInfo(props.dataType).then((res) => {
+    const data = res.data.columns;
+    const newRules = {};
+    const newFormItem = [];
+    const newFomrData = {};
     data.forEach((item) => {
-      formObj[item.prop] = '';
+      if (item.is_nullable === 'NO') {
+        newRules[item.column_name] = [{ required: true, message: item.column_comment + '不能为空', trigger: 'blur' }];
+      }
+      if (Object.keys(props.detailData).length === 0) {
+        if (item.column_key !== 'PRI') {
+          newFomrData[item.column_name] = '';
+        }
+      }
+      if (item.column_key !== 'PRI') {
+        newFormItem.push(item);
+      }
     });
-    formData.value = formObj;
-  }
-  formItem.value = data;
-};
-
-// 获取表单详情
-const getFormData = () => {
-  if (props.dataType === '1') {
-    if (props.detailId === '1') {
-      formData.value = {
-        id: '1',
-        name: '光华北路人防工程',
-        unit: '茂名市应急管理局',
-        maintainUnit: '茂名市应急管理局',
-        engineer: '',
-        location: '茂名市茂南区光华北路668号',
-        operation: '',
-        plannedArea: 122,
-        actualArea: 123,
-        updateTime: '2023-12-12 12:13'
-      };
-    } else if (props.detailId === '2') {
-      formData.value = {
-        id: '2',
-        name: '光华北路人防工程2',
-        unit: '茂名市应急管理局',
-        maintainUnit: '茂名市应急管理局',
-        engineer: '',
-        location: '茂名市茂南区光华北路668号',
-        operation: '',
-        plannedArea: 122,
-        actualArea: 123,
-        updateTime: '2023-12-12 12:13'
-      };
-    } else if (props.detailId === '3') {
-      formData.value = {
-        id: '3',
-        name: '光华北路人防工程3',
-        unit: '茂名市应急管理局',
-        maintainUnit: '茂名市应急管理局',
-        engineer: '',
-        location: '茂名市茂南区光华北路668号',
-        operation: '',
-        plannedArea: 122,
-        actualArea: 123,
-        updateTime: '2023-12-12 12:13'
-      };
-    }
-  } else {
-    formData.value = {
-      id: '1',
-      name: '陈洋',
-      area: '高州市',
-      company: '高州市明洋化工有限公司',
-      official: '工程师',
-      phone: '13509917455',
-      type: '森林火灾'
-    };
-  }
-};
-
-// 生成表单校验规则
-const createRules = (data) => {
-  const newRules = {};
-  data.forEach((item) => {
-    if (item.required) {
-      newRules[item.prop] = [{ required: true, message: item.label + '不能为空', trigger: 'blur' }];
+    rules.value = newRules;
+    formItem.value = newFormItem;
+    if (Object.keys(props.detailData).length === 0) {
+      formData.value = newFomrData;
     }
   });
-  rules.value = newRules;
 };
 
 // 提交表单
@@ -141,8 +87,27 @@ const submitForm = async (formEl) => {
   if (!formEl) return;
   await formEl.validate((valid) => {
     if (valid) {
-      emits('onConfirm');
-      proxy?.$modal.msgSuccess(!props.detailId ? '新增成功' : '修改成功');
+      const flag = Object.keys(props.detailData).length === 0;
+      const method = flag ? addDataManagerInfo : updateDataManagerInfo;
+      const data = deepClone(formData.value);
+      if (flag) {
+        Object.keys(data).forEach((key) => {
+          if (!data[key]) {
+            data[key] = null;
+          }
+        });
+      }
+      const queryParams = {
+        tableId: props.dataType,
+        data: data
+      };
+      if (!flag) {
+        queryParams.dataId = formData.value.id;
+      }
+      method(queryParams).then((res) => {
+        emits('onConfirm');
+        proxy?.$modal.msgSuccess(flag ? '新增成功' : '修改成功');
+      });
     }
   });
 };
@@ -152,8 +117,8 @@ onMounted(() => {
     getFormConfig();
   }
   // 修改获取详情
-  if (props.detailId) {
-    getFormData();
+  if (Object.keys(props.detailData).length > 0) {
+    formData.value = props.detailData;
   }
 });
 </script>

src/views/dataManagement/ViewDataManagement.vue

@@ -6,8 +6,15 @@
       </div>
       <div class="common-dialog-box">
         <el-form ref="formRef" :model="formData" label-width="auto">
-          <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label + '：'" :prop="item.prop">
-            <el-input v-model="formData[item.prop]" class="custom-disabled" type="textarea" autosize disabled style="width: 468px !important" />
+          <el-form-item v-for="(item, index) in formItem" :key="index" :label="item.column_comment + '：'" :prop="item.column_name">
+            <el-input
+              v-model="formData[item.column_name]"
+              class="custom-disabled"
+              type="textarea"
+              autosize
+              disabled
+              style="width: 468px !important"
+            />
           </el-form-item>
         </el-form>
         <div class="common-dialog-footer">
@@ -19,9 +26,11 @@
 </template>
 
 <script lang="ts" setup>
+import { getDataManagerInfo } from '@/api/dataManagement/dataManagement';
+
 const props = defineProps({
   dataType: String,
-  detailId: String
+  detailData: []
 });
 const emits = defineEmits(['onCancel']);
 
@@ -35,90 +44,17 @@ const closeDialog = () => {
 
 // 获取表单元素
 const getFormConfig = () => {
-  const data =
-    props.dataType === '1'
-      ? [
-          { label: '工程名称', prop: 'name', required: true },
-          { label: '建设单位', prop: 'unit', required: true },
-          { label: '人防专业监理工程师', prop: 'engineer' },
-          { label: '建设地点', prop: 'location' },
-          { label: '操作方式', prop: 'operation', required: true },
-          { label: '应建人防地下室面积(㎡)', prop: 'plannedArea' },
-          { label: '实建人防地下室面积(㎡)', prop: 'actualArea' },
-          { label: '更新时间', prop: 'updateTime' }
-        ]
-      : [
-          { label: '姓名', prop: 'name', required: true },
-          { label: '所属区域', prop: 'area', required: true },
-          { label: '单位', prop: 'company' },
-          { label: '职位', prop: 'official' },
-          { label: '联系电话', prop: 'phone' },
-          { label: '专家类型', prop: 'type', required: true }
-        ];
-  if (props.detailId) {
-    const formObj = {};
-    data.forEach((item) => {
-      formObj[item.prop] = '';
-    });
-    formData.value = formObj;
-  }
-  formItem.value = data;
-};
-
-// 获取表单详情
-const getFormData = () => {
-  if (props.dataType === '1') {
-    if (props.detailId === '1') {
-      formData.value = {
-        id: '1',
-        name: '光华北路人防工程',
-        unit: '茂名市应急管理局',
-        maintainUnit: '茂名市应急管理局',
-        engineer: '',
-        location: '茂名市茂南区光华北路668号',
-        operation: '',
-        plannedArea: 122,
-        actualArea: 123,
-        updateTime: '2023-12-12 12:13'
-      };
-    } else if (props.detailId === '2') {
-      formData.value = {
-        id: '2',
-        name: '光华北路人防工程2',
-        unit: '茂名市应急管理局',
-        maintainUnit: '茂名市应急管理局',
-        engineer: '',
-        location: '茂名市茂南区光华北路668号',
-        operation: '',
-        plannedArea: 122,
-        actualArea: 123,
-        updateTime: '2023-12-12 12:13'
-      };
-    } else if (props.detailId === '3') {
-      formData.value = {
-        id: '3',
-        name: '光华北路人防工程3',
-        unit: '茂名市应急管理局',
-        maintainUnit: '茂名市应急管理局',
-        engineer: '',
-        location: '茂名市茂南区光华北路668号',
-        operation: '',
-        plannedArea: 122,
-        actualArea: 123,
-        updateTime: '2023-12-12 12:13'
-      };
+  getDataManagerInfo(props.dataType).then((res) => {
+    const data = res.data.columns;
+    if (Object.keys(props.detailData).length === 0) {
+      const formObj = {};
+      data.forEach((item) => {
+        formObj[item.column_name] = '';
+      });
+      formData.value = formObj;
     }
-  } else {
-    formData.value = {
-      id: '1',
-      name: '陈洋',
-      area: '高州市',
-      company: '高州市明洋化工有限公司',
-      official: '工程师',
-      phone: '13509917455',
-      type: '森林火灾'
-    };
-  }
+    formItem.value = res.data.columns;
+  });
 };
 
 onMounted(() => {
@@ -126,8 +62,8 @@ onMounted(() => {
     getFormConfig();
   }
   // 修改获取详情
-  if (props.detailId) {
-    getFormData();
+  if (Object.keys(props.detailData).length > 0) {
+    formData.value = props.detailData;
   }
 });
 </script>

src/views/dataManagement/index.vue

@@ -6,7 +6,7 @@
           <el-form-item label="选择数据：" prop="planType" label-width="auto">
             <div class="flex" style="align-items: center; justify-content: flex-start">
               <el-select v-model="queryParams.dataType" placeholder="选择数据" @change="onDataTypeChange">
-                <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value" />
+                <el-option v-for="item in type" :key="item.id" :label="item.layer_name" :value="item.id" />
               </el-select>
               <div class="info">
                 <span>数据更新：{{ dataUpdateTime }}</span>
@@ -21,8 +21,15 @@
         <el-button plain icon="Upload" @click="openImportDialog">批量导入</el-button>
       </el-form-item>
     </div>
-    <el-table v-loading="loading" :data="tableData">
-      <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.prop" :label="item.label" :fixed="item.fixed" min-width="80" />
+    <el-table v-loading="loading" :data="tableData" :max-height="tableHeight">
+      <el-table-column
+        v-for="(item, index) in tableHeader"
+        :key="index"
+        :prop="item.column_name"
+        :label="item.column_comment"
+        :min-width="item.column_comment.length * 25 > 100 ? item.column_comment.length * 25 : 100"
+        align="center"
+      />
       <el-table-column label="操作" align="center" width="150px" fixed="right">
         <template #default="scope">
           <el-text v-hasPermi="['system:menu:View']" class="common-btn-text-primary" @click="handleView(scope.row)">查看</el-text>
@@ -34,16 +41,16 @@
     <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     <AddDataManagement
       v-if="dataManagementAddState.show"
-      :dataType="queryParams.dataType"
-      :detailId="dataManagementAddState.id"
-      @onCancel="handleCancel"
-      @onConfirm="onConfirm"
+      :data-type="queryParams.dataType"
+      :detail-data="dataManagementAddState.data"
+      @on-cancel="handleCancel"
+      @on-confirm="onConfirm"
     />
     <ViewDataManagement
       v-if="dataManagementViewState.show"
-      :dataType="queryParams.dataType"
-      :detailId="dataManagementViewState.id"
-      @onCancel="handleCancel"
+      :data-type="queryParams.dataType"
+      :detail-data="dataManagementViewState.data"
+      @on-cancel="handleCancel"
     />
     <DataImport v-model="showImportDialog" :url="importUrl" :file-name="importUrl" :steps-text="fileName" />
   </div>
@@ -52,6 +59,12 @@
 <script lang="ts" setup>
 import ViewDataManagement from './ViewDataManagement.vue';
 import AddDataManagement from './AddDataManagement.vue';
+import {
+  deleteDataManagerInfo,
+  getDataManagerDataList,
+  getDataManagerInfo,
+  getDataManagerList
+} from '@/api/dataManagement/dataManagement';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const queryParams = reactive({
@@ -63,6 +76,7 @@ let loading = ref(false);
 const total = ref(0); // 总条目数
 const type = ref([]);
 
+const tableHeight = ref(document.documentElement.scrollHeight - 295 + 'px');
 const tableHeader = ref([]);
 // 表格数据
 const tableData = ref([]);
@@ -75,27 +89,27 @@ let fileName = ref('');
 
 let dataManagementViewState = reactive({
   show: false,
-  id: ''
+  data: {}
 });
 
 let dataManagementAddState = reactive({
   show: false,
-  id: ''
+  data: {}
 });
 
 // 打开新增
 const handleAdd = () => {
-  dataManagementAddState.id = '';
+  dataManagementAddState.data = {};
   dataManagementAddState.show = true;
 };
 // 打开详情
 const handleView = (row: any) => {
-  dataManagementViewState.id = row.id;
+  dataManagementViewState.data = row;
   dataManagementViewState.show = true;
 };
 // 打开修改
 const handleUpdate = (row: any) => {
-  dataManagementAddState.id = row.id;
+  dataManagementAddState.data = row;
   dataManagementAddState.show = true;
 };
 // 关闭
@@ -106,17 +120,16 @@ const handleCancel = () => {
 
 const onConfirm = () => {
   handleCancel();
-  queryParams.page = 1;
+  // queryParams.page = 1;
   getList();
 };
 // 删除
 const removeItem = (item) => {
   proxy?.$modal.confirm('是否确认删除选择的数据项？').then(() => {
-    const index = tableData.value.findIndex((row) => row.id === item.id);
-    if (index !== -1) {
-      tableData.value.splice(index, 1);
-    }
-    proxy?.$modal.msgSuccess('删除成功');
+    deleteDataManagerInfo(queryParams.dataType, item.id).then(() => {
+      proxy?.$modal.msgSuccess('删除成功');
+      getList();
+    });
   });
 };
 
@@ -124,122 +137,38 @@ const removeItem = (item) => {
 const onDataTypeChange = () => {
   const index = type.value.findIndex((row) => row.value === queryParams.dataType);
   if (index !== -1) {
-    importUrl.value = type.value[index].label + '.xlsx';
-    fileName.value = type.value[index].label;
+    importUrl.value = type.value[index].layer_name + '.xlsx';
+    fileName.value = type.value[index].layer_name;
   }
   queryParams.page = 1;
   getList();
 };
 
 // 获取表格数据
-const getList = () => {
+const getList = async () => {
   loading.value = true;
-  setTimeout(() => {
-    if (queryParams.dataType === '1') {
-      const tempTableHeader = [
-        { label: 'ID', prop: 'id' },
-        { label: '工程名称', prop: 'name' },
-        { label: '建设单位', prop: 'unit' },
-        { label: '人防专业监理工程师', prop: 'engineer' },
-        { label: '建设地点', prop: 'location' },
-        { label: '操作方式', prop: 'operation' },
-        { label: '应建人防地下室面积(㎡)', prop: 'plannedArea' },
-        { label: '实建人防地下室面积(㎡)', prop: 'actualArea' },
-        { label: '更新时间', prop: 'updateTime' }
-      ];
-      for (let i = 0; i < tempTableHeader.length; i++) {
-        if (tempTableHeader[i].prop === 'id') {
-          tempTableHeader[i].fixed = true;
-          break;
-        }
-      }
-      tableHeader.value = tempTableHeader;
-      tableData.value = [
-        {
-          id: '1',
-          name: '光华北路人防工程',
-          unit: '茂名市应急管理局',
-          maintainUnit: '茂名市应急管理局',
-          engineer: '',
-          location: '茂名市茂南区光华北路668号',
-          operation: '',
-          plannedArea: 122,
-          actualArea: 123,
-          updateTime: '2023-12-12 12:13'
-        },
-        {
-          id: '2',
-          name: '光华北路人防工程2',
-          unit: '茂名市应急管理局',
-          maintainUnit: '茂名市应急管理局',
-          engineer: '',
-          location: '茂名市茂南区光华北路668号',
-          operation: '',
-          plannedArea: 122,
-          actualArea: 123,
-          updateTime: '2023-12-12 12:13'
-        },
-        {
-          id: '3',
-          name: '光华北路人防工程3',
-          unit: '茂名市应急管理局',
-          maintainUnit: '茂名市应急管理局',
-          engineer: '',
-          location: '茂名市茂南区光华北路668号',
-          operation: '',
-          plannedArea: 122,
-          actualArea: 123,
-          updateTime: '2023-12-12 12:13'
-        }
-      ];
-      total.value = 3;
-    } else {
-      const tempTableHeader = [
-        { label: 'ID', prop: 'id' },
-        { label: '姓名', prop: 'name' },
-        { label: '所属区域', prop: 'area' },
-        { label: '单位', prop: 'company' },
-        { label: '职位', prop: 'official' },
-        { label: '联系电话', prop: 'phone' },
-        { label: '专家类型', prop: 'type' }
-      ];
-      for (let i = 0; i < tempTableHeader.length; i++) {
-        if (tempTableHeader[i].prop === 'id') {
-          tempTableHeader[i].fixed = true;
-          break;
-        }
-      }
-      tableHeader.value = tempTableHeader;
-      tableData.value = [
-        {
-          id: '1',
-          name: '陈洋',
-          area: '高州市',
-          company: '高州市明洋化工有限公司',
-          official: '工程师',
-          phone: '13509917455',
-          type: '森林火灾'
-        }
-      ];
-      total.value = 1;
-    }
-    dataUpdateTime.value = '2023-12-12 12:13';
-    dataSourceUnit.value = '茂名市应急管理局';
-    loading.value = false;
-  }, 500);
+  tableHeader.value = [];
+  getDataManagerInfo(queryParams.dataType).then((res) => {
+    tableHeader.value = res.data.columns;
+  });
+  getDataManagerDataList(queryParams.dataType, { page: queryParams.page, pageSize: queryParams.pageSize })
+    .then((res) => {
+      tableData.value = res.data;
+      total.value = res.total;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
 };
 // 加载数据
 const loadData = () => {
-  // 实现数据加载逻辑
-  // 需要先获取选项，根据第一个选项获取tableData和导入配置
-  type.value = [
-    { label: '在建工地', value: '1' },
-    { label: '应急管理专家', value: '2' }
-  ];
-  importUrl.value = type.value[0].label + '.xlsx';
-  fileName.value = type.value[0].label;
-  queryParams.dataType = type.value[0].value;
-  getList();
+  getDataManagerList().then((res) => {
+    type.value = res.data;
+    importUrl.value = type.value[0].layer_name + '.xlsx';
+    fileName.value = type.value[0].layer_name;
+    queryParams.dataType = type.value[0].id;
+    getList();
+  });
 };
 
 // 打开批量导入弹窗

src/views/globalMap/layerConfiguration.vue

@@ -7,8 +7,8 @@
             <el-row :gutter="20">
               <!-- 第一行 -->
               <el-col :span="6">
-                <el-form-item label="图层名称：" prop="menuName">
-                  <el-input v-model="queryParams.menuName" placeholder="请输入图层名称" clearable @keyup.enter="handleQuery" />
+                <el-form-item label="菜单名称：" prop="menuName">
+                  <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter="handleQuery" />
                 </el-form-item>
               </el-col>
               <el-col :span="6">
@@ -117,6 +117,16 @@
                 <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item label="专题：" prop="orderNum">
+                <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="地图配置：" prop="orderNum">
+                <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+              </el-form-item>
+            </el-col>
             <el-col v-if="['T'].includes(form.menuType)" :span="12">
               <el-form-item prop="path" style="width: 480px">
                 <template #label>