地图配置

src/views/globalMap/topicPage.vue

@@ -46,6 +46,90 @@
         </template>
       </el-table-column>
     </el-table>
+
+    <div v-show="dialog.visible" class="common-dialog">
+      <div class="common-dialog-content">
+        <div class="common-dialog-title-box">
+          <i class="common-dialog-title-icon" />
+          <div>{{ dialog.title }}</div>
+        </div>
+        <div class="common-dialog-box">
+          <el-form ref="menuFormRef" :model="form" :rules="rules" label-width="100px">
+            <el-col :span="24">
+              <el-col :span="12">
+                <el-form-item style="width: 500px" label="菜单栏名称：" prop="menuName">
+                  <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="菜单类型：" prop="menuType">
+                  <el-radio-group v-model="form.menuType">
+                    <el-radio value="M">目录</el-radio>
+                    <el-radio value="C">菜单</el-radio>
+                    <!--                  <el-radio value="F">按钮</el-radio>-->
+                  </el-radio-group>
+                </el-form-item>
+              </el-col>
+              <el-form-item label="菜单图标：" prop="icon">
+                <!-- 图标选择器 -->
+                <!--                <icon-select v-model="form.icon" />-->
+                <FileUpload
+                  v-model="form.icon"
+                  :file-type="['jpg', 'jpeg', 'png']"
+                  :limit="1"
+                  :file-size="5"
+                  class="upload-box"
+                  @change="menuFormRef.validateField('fileList')"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="菜单模板：" prop="template">
+                <!-- 模板选择器 -->
+                <el-select v-model="form.layer_template" placeholder="请选择模板">
+                  <el-option v-for="item in templateOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="菜单排序：" prop="orderNum">
+                <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item>
+                <template #label>
+                  <span>
+                    <el-tooltip content="选择不上架则不在地图中展示" placement="top">
+                      <el-icon>
+                        <question-filled />
+                      </el-icon>
+                    </el-tooltip>
+                    上架状态：
+                  </span>
+                </template>
+                <el-radio-group v-model="form.visible">
+                  <el-radio v-for="dict in listing_status" :key="dict.value" :label="dict.value">{{ dict.label }} </el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </el-col>
+            <el-col v-if="form.menuType !== 'F'" :span="24">
+              <el-form-item label="配置地图：" prop="template">
+                <!-- 模板选择器 -->
+                <el-select v-model="form.layer_template" placeholder="请选择模板">
+                  <el-option v-for="item in mapType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-form>
+
+        </div>
+        <div class="common-dialog-footer" style="display: flex; justify-content: center">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </div>
+    </div>
   </div>
   <layer-configuration-test v-if="showTopic" @close="pageClose" :id="topicId" />
 </template>
@@ -59,6 +143,7 @@ import { MenuForm, MenuQuery, MenuVO } from '@/api/globalMap/layerConfig/types';
 import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
 import { getDicts } from '@/api/system/dict/data';
 import LayerConfigurationTest from '@/views/globalMap/layerConfigurationTest.vue';
+import { getLayerMenu } from '@/api/system/menu';
 const showSearch = ref(true);
 const topicList = ref([]);
 const queryFormRef = ref<ElFormInstance>();
@@ -80,6 +165,25 @@ const initFormData = {
   visible: '0',
   status: '0'
 };
+const templateOptions = ref([
+  { value: 'template1', label: '图层分析一' },
+  { value: 'template2', label: '图层分析二' },
+  { value: 'template3', label: '图层分析三' }
+  // 更多模板选项...
+]);
+const mapType = ref([
+  { value: '1', label: '业务图' },
+  { value: '2', label: '地形图' },
+  { value: '3', label: '卫星图' },
+  { value: '4', label: '影像图' },
+  { value: '5', label: '简版图' }
+  // 更多模板选项...
+]);
+interface MenuOptionsType {
+  menuId: number;
+  menuName: string;
+  children: MenuOptionsType[] | undefined;
+}
 const data = reactive<PageData<MenuForm, MenuQuery>>({
   form: { ...initFormData },
   queryParams: {
@@ -96,7 +200,12 @@ const menuTableRef = ref<ElTableInstance>();
 const { queryParams, form, rules } = toRefs<PageData<MenuForm, MenuQuery>>(data);
 const topic_type = ref([]);
 const showTopic = ref(false);
-
+const menuOptions = ref<MenuOptionsType[]>([]);
+const menuFormRef = ref<ElFormInstance>();
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
 
 /** 查询菜单列表 */
 const getList = async () => {
@@ -131,8 +240,38 @@ const handleTopicClick = (id) => {
 const pageClose = () => {
   showTopic.value = false;
 }
+const reset = () => {
+  form.value = { ...initFormData };
+  menuFormRef.value?.resetFields();
+};
 
-
+const handleAdd = (row?: MenuVO) => {
+  reset();
+  // getTreeselect();
+  row && row.menuId ? (form.value.parentId = row.menuId) : (form.value.parentId = 0);
+  dialog.visible = true;
+  dialog.title = '添加菜单';
+  // fullscreen: false;
+};
+/** 修改按钮操作 */
+const handleUpdate = async (row: MenuVO) => {
+  reset();
+  // await getTreeselect();
+  if (row.menuId) {
+    const { data } = await getLayerMenu(row.menuId);
+    form.value = data;
+  }
+  dialog.visible = true;
+  dialog.title = '修改菜单';
+};
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+const submitForm = () => {
+  reset();
+  dialog.visible = false;
+};
 </script>
 
 <style scoped lang="scss">