Merge branch 'main' of http://123.132.248.154:10000/gitY/LinYeFangHuo

src/views/demo/layer/EditorModel.vue

@@ -0,0 +1,165 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="样式编辑器"
+    :showCancelBtn="false"
+    :showOkBtn="false"
+  >
+    <div>
+      <div class="v-json-box">
+        <CodeEditor :value="editorJson" ref="myEditor" :mode="MODE.JSON" @change="changeHandle" />
+      </div>
+      <div class="copy-btn-box">
+        <a-button @click="formatting" type="primary">格式化文本</a-button>
+        <a-button @click="styleCancel">取消</a-button>
+        <a-button @click="editorSubmit" type="primary">提交</a-button>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { BasicModal, useModalInner } from '@/components/Modal';
+  import { CodeEditor, MODE } from '@/components/CodeEditor';
+  import axios from 'axios';
+  import { getAppEnvConfig } from '@/utils/env';
+  import { fun_Delete } from '@/api/demo/files';
+
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
+  async function fetchXMLDataWithAxios(url) {
+    try {
+      const response = await axios.get(url, { responseType: 'text' });
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching XML data:', error);
+    }
+  }
+  const fileData = ref();
+  const { createMessage, createConfirm } = useMessage();
+  defineOptions({ name: 'MenuDrawer' });
+  const editorJson = ref();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    setModalProps({ confirmLoading: false });
+    fileData.value = data.urlData;
+    // 使用方法
+    fetchXMLDataWithAxios(VITE_GLOB_API_URL + '/' + data.urlData.url).then((xmlDoc) => {
+      editorJson.value = xmlDoc;
+    });
+  });
+  const styleCancel = () => {
+    const params = [fileData.value.id];
+    createConfirm({
+      iconType: 'info',
+      title: '取消',
+      content: '取消会删除当前文件',
+      onOk: async () => {
+        fun_Delete(params).then((res) => {
+          createMessage.success('删除成功!');
+          closeModal();
+        });
+      },
+    });
+  };
+  const formatting = () => {
+    editorJson.value = formateXml(editorJson.value);
+  };
+
+  // 格式化 XML 的函数
+  function formateXml(xmlStr) {
+    let text = xmlStr;
+    // 使用 replace 去除多余空格
+    text =
+      '\n' +
+      text
+        .replace(/(<\w+)(\s.*?>)/g, function ($0, name, props) {
+          return name + ' ' + props.replace(/\s+(\w+=)/g, ' $1');
+        })
+        .replace(/></g, '>\n<');
+
+    // 处理注释
+    text = text
+      .replace(/\n/g, '\r')
+      .replace(/<!--(.+?)-->/g, function ($0, text) {
+        var ret = '<!--' + escape(text) + '-->';
+        return ret;
+      })
+      .replace(/\r/g, '\n');
+
+    // 调整格式，以压栈方式递归调整缩进
+    var rgx = /\n(<(([^\?]).+?)(?:\s|\s*?>|\s*?(\/)>)(?:.*?(?:(?:(\/)>)|(?:<(\/)\2>)))?)/gm;
+    var nodeStack = [];
+    var output = text.replace(
+      rgx,
+      function ($0, all, name, isBegin, isCloseFull1, isCloseFull2, isFull1, isFull2) {
+        var isClosed =
+          isCloseFull1 == '/' || isCloseFull2 == '/' || isFull1 == '/' || isFull2 == '/';
+        var prefix = '';
+        if (isBegin == '!') {
+          //!开头
+          prefix = setPrefix(nodeStack.length);
+        } else {
+          if (isBegin != '/') {
+            ///开头
+            prefix = setPrefix(nodeStack.length);
+            if (!isClosed) {
+              // 非关闭标签
+              nodeStack.push(name);
+            }
+          } else {
+            nodeStack.pop(); // 弹栈
+            prefix = setPrefix(nodeStack.length);
+          }
+        }
+        var ret = '\n' + prefix + all;
+        return ret;
+      },
+    );
+
+    var prefixSpace = -1;
+    var outputText = output.substring(1);
+    // 处理数据为空的换行，将类似 <CostCurr3>\n    </CostCurr3> 转换为 <CostCurr3> </CostCurr3>
+    // outputText = outputText.replace(/<([^>]+)>\s*<\/(\1)>/g, '<$1> </$1>');
+
+    // 还原注释内容
+    outputText = outputText
+      .replace(/\n/g, '\r')
+      .replace(/(\s*)<!--(.+?)-->/g, function ($0, prefix, text) {
+        if (prefix.charAt(0) == '\r') prefix = prefix.substring(1);
+        text = unescape(text).replace(/\r/g, '\n');
+        var ret = '\n' + prefix + '<!--' + text.replace(/^\s*/gm, prefix) + '-->';
+        return ret;
+      });
+    outputText = outputText.replace(/\s+$/g, '').replace(/\r/g, '\r\n');
+    return outputText;
+  }
+
+  // 计算缩进前缀的函数
+  function setPrefix(prefixIndex) {
+    var result = '';
+    var span = '    '; // 缩进长度
+    var output = [];
+    for (var i = 0; i < prefixIndex; ++i) {
+      output.push(span);
+    }
+    result = output.join('');
+    return result;
+  }
+
+  const changeHandle = (value) => {
+    editorJson.value = value;
+  };
+  const editorSubmit = () => {};
+</script>
+<style lang="less" scoped>
+  .v-json-box {
+    height: 500px;
+  }
+  .copy-btn-box {
+    margin-top: 10px;
+    button {
+      margin-left: 20px;
+    }
+  }
+</style>

src/views/demo/layer/index.vue

@@ -117,32 +117,40 @@
         </a-form>
       </div>
       <!-- 样式配置 -->
-      <div class="data-style" v-if="false">
+      <div class="data-style" v-if="showTable == 'style'">
         <div class="img-box">
-          <a-upload-dragger v-model:fileList="fileList" name="file" @change="handleChange">
+          <a-upload-dragger
+            v-model:fileList="fileList"
+            name="file"
+            @change="handleChange"
+            :multiple="false"
+            :maxCount="1"
+            :customRequest="handleCustomRequest"
+            v-if="!fileUrl"
+          >
             <p class="ant-upload-drag-icon">
               <inbox-outlined></inbox-outlined>
             </p>
             <p class="ant-upload-text">上传SLD文件</p>
           </a-upload-dragger>
+          <div v-else>
+            <p>{{ fileUrlView.name }}</p>
+            <a-button type="primary" @click="editorHandle">在编辑器中打开</a-button>
+          </div>
+        </div>
+        <div class="data-button">
+          <a-button type="primary" @click="showTable = ''" danger> 关闭 </a-button>
+          <a-button @click="styleCancel"> 取消 </a-button>
+          <a-button type="primary" @click="styleSubmit"> 提交 </a-button>
         </div>
-        <!-- <a-upload
-          v-model:file-list="fileList"
-          list-type="picture-card"
-          class="upload-list-inline"
-          :customRequest="handleCustomRequest"
-          >
-          :accept="'.jpg,.jpeg,.png'"
-          <InboxOutlined />
-          <div class="ant-upload-text">上传</div>
-        </a-upload> -->
       </div>
     </div>
     <AddModel @register="registerAddModal" :treeData="treeData" @success="handleSuccess" />
+    <EditorModel @register="registerEditorModal" />
   </PageWrapper>
 </template>
 <script setup lang="ts">
-  import { LayerTree, AddModel, Map } from './page';
+  import { LayerTree, AddModel, Map, EditorModel } from './page';
   import { ref, UnwrapRef, reactive } from 'vue';
   import { PageWrapper } from '@/components/Page';
   import { useModal } from '@/components/Modal';
@@ -152,14 +160,19 @@
   import { getRoleListByPage } from '@/api/demo/system';
   import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
   import { useMessage } from '@/hooks/web/useMessage';
+  import { uploadFile, fun_Delete } from '@/api/demo/files';
+  import { getAppEnvConfig } from '@/utils/env';
 
+  const { VITE_GLOB_API_URL } = getAppEnvConfig();
   const { createConfirm, createMessage } = useMessage();
   const showTable = ref('');
   const tableVisible = ref(false);
-  const styleVisible = ref(false);
   const selectVal = ref();
   const columnVal = ref(1);
+  const fileList = ref([]);
   const [registerAddModal, { openModal: openAddModal }] = useModal();
+  const [registerEditorModal, { openModal: openEditorModal }] = useModal();
+
   const keyWord = ref('');
   const [registerTable, { reload, getSelectRows, clearSelectedRowKeys }] = useTable({
     // 表格名称
@@ -292,25 +305,58 @@
   };
   const posData = (record) => {};
   const styleHandle = () => {
-    styleVisible.value = true;
+    showTable.value = 'style';
   };
   const handleChange = (info) => {
     console.log(info);
+    fileList.value = info.fileList;
   };
+  const fileUrl = ref('');
+  const fileUrlView: any = ref({});
   // 上传文件接口
-  const handleCustomRequest = (file) => {
+  const handleCustomRequest = (options) => {
-    console.log(file);
+    console.log(options);
-    // fileList.value = [];
+    fileList.value = [];
-    // const formData = new FormData();
+    const formData = new FormData();
-    // formData.append('files', file.file);
+    formData.append('files', options.file);
-    // uploadFile(formData)
+    fileUrlView.value.name = options.file.name;
-    //   .then((res: any) => {
+    uploadFile(formData)
-    //     modalData.value.imgUrl = res[0].filePath;
+      .then((res: any) => {
-    //     imageUrl.value = VITE_GLOB_API_URL_VAR.value + res[0].filePath;
+        fileUrl.value = res[0].filePath;
-    //   })
+        fileUrlView.value.url = VITE_GLOB_API_URL + '/' + res[0].filePath;
-    //   .catch((err) => {
+        fileUrlView.value.id = res[0].id;
-    //     file.onError(err);
+        createMessage.success('上传成功!');
-    //   });
+      })
+      .catch((err) => {
+        options.onError(err);
+      });
+  };
+  const styleSubmit = () => {
+    console.log(fileUrl.value);
+  };
+  const styleCancel = () => {
+    if (fileUrlView.value.id) {
+      const params = [fileUrlView.value.id];
+      createConfirm({
+        iconType: 'info',
+        title: '取消',
+        content: '取消会删除当前文件',
+        onOk: async () => {
+          fun_Delete(params).then((res) => {
+            console.log(res);
+            createMessage.success('删除成功!');
+            showTable.value = '';
+          });
+        },
+      });
+    } else {
+      showTable.value = '';
+    }
+  };
+  const editorHandle = () => {
+    openEditorModal(true, {
+      urlData: fileUrlView.value,
+    });
   };
 </script>
 
@@ -386,5 +432,13 @@
     .img-box {
       height: 200px;
     }
+    .data-button {
+      position: absolute;
+      width: 100%;
+      bottom: 30px;
+      button {
+        margin-left: 10px;
+      }
+    }
   }
 </style>

src/views/demo/layer/page.ts

@@ -1,3 +1,4 @@
 export { default as LayerTree } from './LayerTree.vue';
 export { default as AddModel } from './AddModel.vue';
 export { default as Map } from './Map.vue';
+export { default as EditorModel } from './EditorModel.vue';