feat: 添加新增配置逻辑

.env.development

@@ -0,0 +1,2 @@
+VITE_BASE_URL = 'http://127.0.0.1:5000'
+VITE_DESIGN_URL = 'http://127.0.0.1:3000'

.env.production

@@ -0,0 +1,2 @@
+VITE_BASE_URL = 'https://api.formily.top'
+VITE_DESIGN_URL = 'http://design.formily.top'

configList/components/ConfigList.vue

@@ -7,10 +7,12 @@
       </div>
       <el-table v-loading="loading" :data="tableDataObject.list">
         <el-table-column prop="name" label="名称" />
-        <el-table-column prop="id" label="ID" />
-        <el-table-column prop="id" label="ID">
+        <el-table-column prop="bid" label="配置ID" />
+        <el-table-column prop="config" label="配置" />
+        <el-table-column prop="createDate" label="创建日期" />
+        <!-- <el-table-column prop="id" label="ID">
           <template #default="scope">{{ scope.row.type }}</template>
-        </el-table-column>
+        </el-table-column> -->
         <el-table-column prop="operate" label="操作" width="180">
           <template #default="scope">
             <el-button type="primary" text @click="handleEdit(scope.row)"
@@ -36,15 +38,39 @@
       </div>
     </div>
   </div>
+  <el-dialog v-model="dialogFormVisible" title="创建低代码配置" width="500">
+    <el-form :model="form">
+      <el-form-item label="配置名称" :label-width="formLabelWidth">
+        <el-input v-model="form.name" autocomplete="off" />
+      </el-form-item>
+      <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
+        <el-select v-model="form.region" placeholder="Please select a zone">
+          <el-option label="Zone No.1" value="shanghai" />
+          <el-option label="Zone No.2" value="beijing" />
+        </el-select>
+      </el-form-item> -->
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveConfig"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { usePagination } from "../composition/use-pagination";
 import { ElMessageBox } from "element-plus";
 import { ElMessage } from "element-plus";
+import apiServer from "../utils/axios";
+import { log } from "console";
 
 const loading = ref(false);
-
+const dialogFormVisible = ref(false);
+const form = reactive({
+  name: "",
+});
 async function findPage() {
   loading.value = true;
   const payload = {
@@ -54,8 +80,12 @@ async function findPage() {
   try {
     console.log(JSON.stringify(payload, null, 2));
     await new Promise((r) => setTimeout(r, 500));
-    // const res = await apiGetList(payload)
-    const res = { list: [{}, {}], total: 100 };
+    const res: any = await apiServer.get("/configList/list", {
+      params: payload,
+    });
+    console.log("res", res);
+
+    // const res = { list: [{}, {}], total: 100 };
     tableDataObject.list = res.list;
     tableDataObject.total = res.total;
   } catch (e) {
@@ -104,6 +134,14 @@ async function handleDelete(row: any) {
 }
 
 function addConfig() {
+  dialogFormVisible.value = true;
+}
+
+function saveConfig() {
+  gotoConfigPage();
+}
+
+function gotoConfigPage() {
   function generateId() {
     let chars =
       "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
@@ -115,9 +153,13 @@ function addConfig() {
   }
   // 生成一个 16 位的随机 ID
   let randomId = generateId();
+  const name = encodeURIComponent(form.name);
   console.log(randomId);
   //   window.open(`http://127.0.0.1:3000?bid=${randomId}`, "_blank");
-  window.open(`http://design.formily.top?bid=${randomId}`, "_blank");
+  window.open(
+    `${import.meta.env.VITE_DESIGN_URL}?bid=${randomId}&name=${name}`,
+    "_blank"
+  );
 }
 </script>
 

configList/utils/axios.ts

@@ -0,0 +1,69 @@
+import axios from "axios";
+import { ElMessage } from "element-plus";
+// import { useGlobalStore } from "@/stores/global";
+
+const NOT_LOGIN_CODE = -1;
+// const { accountInfo } = useGlobalStore();
+
+console.log("axios base url", import.meta.env.VITE_BASE_URL);
+// console.log("axios base url", process.env.VUE_APP_BASE_URL);
+const instance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  timeout: 60000,
+  // headers: { token: accountInfo.token },
+});
+
+// axios.interceptors.request.use(resolve func, reject func)
+// Add a request interceptor
+instance.interceptors.request.use(
+  async function (config) {
+    // Do something before request is sent
+    console.log("request 拦截: ", config);
+
+    // 为所有请求加一个时间戳参数
+    config.url += (config?.url?.includes("?") ? "&" : "?") + "t=" + +new Date();
+
+    // config.headers = { token: accountInfo.token };
+    // 防止刷新后，状态管理数据清空，导致找不到 token
+    config.headers = {
+      token: localStorage.getItem("config-fe-token"),
+    };
+    return config; // 用来请求的参数
+  },
+  function (error: any) {
+    // Do something with request error
+    return Promise.reject(error);
+  }
+);
+
+instance.interceptors.response.use(
+  function (response) {
+    // Any status code that lie within the range of 2xx cause this function to trigger
+    // Do something with response data
+    console.log("响应拦截", response);
+
+    // 如果身份校验失败，返回登录页
+    // response.data.code === 111 && (window.location.href = response.data);
+
+    const { code, msg, plainMsg } = response.data;
+
+    if (code !== 0) {
+      ElMessage.error(plainMsg ? `${msg}: ${plainMsg}` : msg);
+      // 如果是没有登录，跳转到登录页面
+      if (code === NOT_LOGIN_CODE) {
+        // router.push("/login");
+        // TODO: 弹窗或跳转到登录页面
+      }
+    }
+
+    return response?.data?.data; // 过滤掉除data参数外的其它参数，响应接收到的值。
+    // return response;
+  },
+  function (error) {
+    // Any status codes that falls outside the range of 2xx cause this function to trigger
+    // Do something with response error
+    return Promise.reject(error);
+  }
+);
+
+export default instance;

package.json

@@ -10,6 +10,7 @@
     "vue": "^3.2.37"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "cross-env": "^7.0.3",
     "element-plus": "^2.6.1",
     "vitepress": "^1.0.0-alpha.8"