'更新'

src/views/addprovide/index.vue

@@ -5,9 +5,7 @@
       <el-form ref="ruleFormRef" :model="form.region" :rules="addpro">
         <el-row style="margin-bottom: 24px">
           <el-col :span="24">
-              <el-button type="primary" @click="submitForm(ruleFormRef)"
+            <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
-                >保存</el-button
-              >
             <el-button @click="sysDept(ruleFormRef)">重置</el-button>
             <el-button @click="route.back">返回</el-button>
           </el-col>
@@ -18,33 +16,16 @@
         <el-row>
           <el-col :span="11">
             <el-form-item label="所属部门" prop="deptId">
-                <el-select
+              <el-select @change="log" v-model="form.region.deptId" placeholder="请选择部门">
-                  @change="log"
+                <el-option v-for="(item, index) in play.oplen" :key="index" :label="item.name" :value="item.id" />
-                  v-model="form.region.deptId"
-                  placeholder="请选择部门"
-                >
-                  <el-option
-                    v-for="(item, index) in play.oplen"
-                    :key="index"
-                    :label="item.name"
-                    :value="item.id"
-                  />
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="2" />
           <el-col :span="11">
             <el-form-item label="资源目录" prop="metadataId">
-                <el-select
+              <el-select v-model="form.region.metadataId" placeholder="请选择资源目录">
-                  v-model="form.region.metadataId"
+                <el-option v-for="(item, index) in play.region" :key="index" :label="item.name" :value="item.id" />
-                  placeholder="请选择资源目录"
-                >
-                  <el-option
-                    v-for="(item, index) in play.region"
-                    :key="index"
-                    :label="item.name"
-                    :value="item.id"
-                  />
               </el-select>
             </el-form-item>
           </el-col>
@@ -79,51 +60,126 @@
           <el-button type="primary" @click="opneDialogs">新建</el-button>
         </el-col>
       </el-row>
-        <el-table
+      <el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :data="interData">
-          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+        <el-table-column prop="catalogId" label="目录" />
-          :data="form.region.interfaceList"
-        >
-          <el-table-column prop="sortNo" label="序号" />
         <el-table-column prop="name" label="接口名称" />
         <el-table-column prop="url" label="接口地址" />
-          <el-table-column prop="scope" label="开发范围" />
+        <el-table-column prop="tableName" label="表名" />
-          <el-table-column prop="intro" label="接口描述" />
+        <el-table-column prop="fields" label="字段" />
+        <el-table-column prop="scope" label="范围" />
+        <el-table-column prop="state" label="状态">
+          <template #default="scope">
+            <div>
+              {{ scope.row.state ? '启用' : '未启用' }}
+            </div>
+          </template>
+        </el-table-column>
         <el-table-column prop="操作" label="操作">
           <template #default="scope">
-              <el-button type="danger" text @click="delet(scope)">删除</el-button
+            <el-button type="primary" text @click="fromVlauesj(scope.row)">编辑</el-button>
-              ><el-button type="primary" text @click="fromVlauesj(scope)"
+            <el-popconfirm title="确定要删除吗?" @confirm="delet(scope.row.id)">
-                >编辑</el-button
+              <template #reference>
-              >
+                <el-button type="danger" text>删除</el-button>
+              </template>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
+
+      <el-dialog v-model="dialogVisible" title="Tips" width="800px" close-on-press-escape="false"
+        close-on-click-modal="false">
+        <div style="padding-right: 30px;">
+          <el-form ref="fromIm" :model="formInline" class="demo-form-inline" label-width="100" :rules="rules">
+            <el-form-item label="目录" prop="catalogId">
+              <el-select v-model="formInline.catalogId" placeholder="请选择目录" clearable>
+                <el-option v-for="item, index in catalogIdList " :key="index" :label="item" :value="item" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="接口名称:" prop="name">
+              <el-input v-model="formInline.name" placeholder="请输入接口名称" clearable />
+            </el-form-item>
+            <el-form-item label="接口地址:" prop="url">
+              <el-input v-model="formInline.url" placeholder="请输入接口地址" clearable />
+            </el-form-item>
+            <el-form-item label="表名:" prop="tableName">
+              <el-select v-model="formInline.tableName" placeholder="请选择表名" @change="tableChange" clearable>
+                <el-option v-for="item, index in  tablesList " :key="index" :label="item" :value="item" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="字段" prop="fields" v-if="formInline.tableName !== ''">
+              <el-transfer filterable v-model="formInline.fields" :data="data1" />
+            </el-form-item>
+            <el-form-item label="范围:" prop="scope">
+              <el-input v-model="formInline.scope" placeholder="请输入范围" clearable />
+            </el-form-item>
+            <el-form-item label="简介:" prop="intro">
+              <el-input v-model="formInline.intro" placeholder="请输入简介" clearable />
+            </el-form-item>
+            <el-form-item label="状态:" prop="state">
+              <el-switch v-model="formInline.state" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="interFaceSave(fromIm)">保存</el-button>
+            <el-button type="primary" @click="handleHide(fromIm)">
+              取消
+            </el-button>
+          </span>
+        </template>
+      </el-dialog>
     </el-footer>
-      <!-- <yd_diainputXMGL
-        ref="childrenRef"
-        @funFlag="funFlag"
-        @resetForm="resetForm"
-        :inputArray="inputArray"
-        :width="width"
-        :inputArrays="inputArrays"
-        :dialogVisible="moreConditionsXmgl"
-        :control="true"
-      /> -->
   </div>
 </template>
 <script setup>
-  import { ref, reactive, watch, nextTick } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
-//   import yd_diainputXMGL from "@/components/yd_diang_xmgl.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import http from "@/utils/request.js";
 import { useRoute, useRouter } from "vue-router";
 const route = useRouter();
-  const routes = useRoute();
 const ruleFormRef = ref();
+const dialogVisible = ref(false)
+const fromIm = ref()
+const tablesList = ref([])
+const interData = ref([])
+
 const play = reactive({
   oplen: [],
   region: [],
   index: "",
 });
+const formInline = reactive({
+  catalogId: '',
+  name: '',
+  url: '',
+  tableName: '',
+  fields: [],
+  scope: '',
+  intro: '',
+  state: false,
+})
+const data1 = ref([])
+const rules = reactive({
+  name: [{
+    required: true,
+    message: '请输入接口名称',
+    trigger: 'blur',
+  }],
+  url: [{
+    required: true,
+    message: '请输入接口地址',
+    trigger: 'blur',
+  }],
+  tableName: [{
+    required: true,
+    message: '请输入表名',
+    trigger: 'blur',
+  }],
+
+})
+const byId = ref('')
+const catalogIdList = ref([])
 const form = reactive({
   region: {
     deptId: "",
@@ -137,213 +193,148 @@
     name: "",
   },
 });
-  // 声明组件方法
-  const childrenRef = ref(null);
-  // 关闭弹窗方法
-  const handleChildren1 = () => childrenRef.value.resetForms();
-  const width = ref("40%");
-  const inputArray = reactive([
-    {
-      type: "input",
-      title: "序号",
-      model: "sortNo",
-      row: 24,
-      placeholder: "请输入",
-      optionsValue: "updataOption",
-      SetectPla: "请选择",
-    },
-    {
-      type: "input",
-      title: "接口名称",
-      model: "name",
-      row: 24,
-      placeholder: "请输入",
-      optionsValue: "updataOption",
-      SetectPla: "请选择",
-    },
-    {
-      type: "input",
-      title: "接口地址",
-      model: "url",
-      row: 24,
-      placeholder: "请输入",
-      optionsValue: "updataOption",
-      SetectPla: "请选择",
-    },
-    {
-      type: "input",
-      title: "开发范围",
-      model: "scope",
-      row: 24,
-      placeholder: "请输入",
-      optionsValue: "updataOption",
-      SetectPla: "请选择",
-    },
-    {
-      type: "input",
-      title: "接口描述",
-      model: "intro",
-      row: 24,
-      placeholder: "请输入",
-      optionsValue: "updataOption",
-      SetectPla: "请选择",
-    },
-  ]);
-  // 表单验证
-  const inputArrays = reactive({
-    sortNo: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    url: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    scope: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    intro: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-  });
-  const addpro = reactive({
-    name: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    deptId: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    metadataId: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    isAuth: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    isPublic: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-    intro: [{ required: true, message: "内容不能为空", trigger: "blur" }],
-  });
-  /* 更多弹框 */
-  const moreConditionsXmgl = ref(false);
-  
-  // 打开弹框
 const opneDialogs = () => {
-    // 取反 watch监听
+  dialogVisible.value = true
-    inputArray.forEach((element, index) => {
+  http.get(`/api/interface/tables`).then(response => {
-      if (element.model) {
+    if (response.code == 200) {
-        element.lable = null;
+      tablesList.value = response.data
     }
-    });
+  })
-    moreConditionsXmgl.value = !moreConditionsXmgl.value;
-  };
-  // 编辑赋值
-  const fromVlauesj = (datas) => {
-    play.index = datas.$index;
-    inputArray.forEach((element, index) => {
-      if (element.model) {
-        element.lable = datas.row[element.model];
 }
-    });
+const tableChange = (val) => {
-    // 添加id
+  http.get(`/api/interface/fields?tableName=${val}`).then(response => {
-    moreConditionsXmgl.value = !moreConditionsXmgl.value;
+    if (response.code == 200) {
-  };
+      data1.value = []
-  // 接受子组件数据
+      response.data.forEach(item => {
-  const funFlag = (val) => {
+        data1.value.push({
-    if (play.index == "") {
+          key: item.field,
-      form.region.interfaceList.push(JSON.parse(JSON.stringify(val)));
+          label: `${item.field}(${item.comment ? item.comment : '‘’'})`,
-      handleChildren1();
+        })
-    } else {
+      })
-      form.region.interfaceList[play.index] = JSON.parse(JSON.stringify(val));
+    }
-      play.index = "";
+  })
+}
+const interFaceSave = (formEl) => {
+  if (!formEl) return
+  formInline.fields = formInline.fields.join(',')
 
-      handleChildren1();
+  console.log('formInline', formInline);
-    }
+  formEl.validate((valid) => {
-  };
-  
-  const resetForm = (val) => {
-    console.log(val);
-  };
-  const sysDept = (formEl) => {
-    if (!formEl) return;
-    formEl.resetFields();
-    form.region.interfaceList = [];
-  };
-  // 获取部门
-  const metadataProject = () => {
-    http.get("/metadata/sysDept").then((resp) => {
-      if (resp.code == 200) {
-        play.oplen = resp.data;
-      } else {
-        ElMessage.error(resp.message);
-      }
-    });
-  };
-  const deptId = (e) => {
-    http.get(`/metadata/metadata/list/?deptId=${e}`).then((resp) => {
-      if (resp.code == 200) {
-        play.region = resp.data;
-      } else {
-        ElMessage.error(resp.message);
-      }
-    });
-  };
-  const log = (e) => {
-    http
-      .get(`/metadata/metadata/list/?deptId=${form.region.deptId}`)
-      .then((resp) => {
-        form.region.metadataId = "";
-        if (resp.code == 200) {
-          play.region = resp.data;
-        } else {
-          ElMessage.error(resp.message);
-        }
-      });
-  };
-  
-  const dataCatalog = async () => {
-    http.post("/metadata/dataCatalog", form.region).then((resp) => {
-      if (resp.code == 200) {
-        ElMessage.success("保存成功");
-      } else {
-        ElMessage.error(resp.message);
-      }
-    });
-  };
-  const submitForm = async (formEl) => {
-    if (!formEl) return;
-    await formEl.validate((valid, fields) => {
     if (valid) {
-        console.log(form.region.interfaceList.length);
+      if (byId.value) {
-        if (form.region.interfaceList.length == 0) {
+        http.post(`/api/interface/${byId.value}`, formInline).then(response => {
-          ElMessage.error("需创建一条接口数据");
+          if (response.code == 200) {
-        } else {
+            ElMessage.success('修改成功')
-          dataCatalog();
           }
+        })
       } else {
-        console.log("error submit!", fields);
+        http.post(`/api/interface`, formInline).then(response => {
+          if (response.code == 200) {
+            ElMessage.success('新增成功')
           }
-    });
+        })
-  };
+      }
-  const delet = (e) => {
+      dialogVisible.value = false
-    if (form.region.interfaceList.length <= 1) {
+      init()
-      ElMessage.error("需保留一条数据");
+      handleInterface()
+      fromIm.value?.resetFields();
     } else {
-      form.region.interfaceList.splice(e.$index, 1);
+      return false
     }
-  };
+  })
-  // metadataProject();
+}
+
+const delet = (value) => {
+  console.log('value', value);
+  http.delete(`/api/interface/${value}`).then(response => {
+    if (response.code == 200) {
+      console.log('response');
+      handleInterface()
+      byId.value = ''
+      ElMessage.success('删除成功')
+    }
+  })
+
+}
+const handleHide = () => {
+  dialogVisible.value = false
+  fromIm.value?.resetFields();
+  init()
+}
+const init = () => {
+  formInline.catalogId = '',
+    formInline.name = '',
+    formInline.url = '',
+    formInline.tableName = '',
+    formInline.fields = [],
+    formInline.scope = '',
+    formInline.intro = '',
+    formInline.state = false
+  byId.value = ''
+}
+const fromVlauesj = (val) => {
+  dialogVisible.value = true
+  formInline.catalogId = val.catalogId,
+    formInline.name = val.name,
+    formInline.url = val.url,
+    formInline.tableName = val.tableName,
+    opneDialogs()
+  tableChange(val.tableName)
+  formInline.fields = val.fields,
+    formInline.scope = val.scope,
+    formInline.intro = val.intro,
+    formInline.state = val.state
+  byId.value = val.id
+}
+const handleInterface = () => {
+  http.get(`/api/interface`).then(response => {
+    if (response.code == 200) {
+      interData.value = response.data
+    }
+  })
+}
+
+onMounted(() => {
+  handleInterface()
+})
 </script>
 <style lang="scss" scoped>
 .example {
   .el-header {
     background-color: rgb(246, 246, 246);
   }
+
   .el-aside {
     width: 15%;
     min-width: 200px;
     background-color: #fff;
+
     .el-menu {
       min-height: calc(100vh - 130px);
       border: #fff solid;
+
       .el-menu-item.is-active {
         color: #409eff;
       }
     }
   }
+
   .el-main {
     background-color: #fff;
+
     .el-scrollbar {
       padding-right: 15px;
     }
+
     :deep(.set-select) {
       width: 100%;
     }
+
     :deep(.el-select) {
       width: 100%;
     }
   }
+
   .el-footer {
     padding-top: 15px;
     margin-top: 16px;
@@ -351,6 +342,7 @@
     background-color: #fff;
   }
 }
+
 .el-button {
   padding: 8px 10px;
 }

vite.config.js

@@ -30,14 +30,14 @@ export default defineConfig({
       '/api': { 
         // target: 'http://10.0.0.29:9999',
         // target: 'http://demo35.ydool.net/',
-        target: 'http://192.168.1.14:7777',
+        target: 'http://192.168.1.27:7777',
         // target: 'http://10.0.0.63:7777', // 刘进
         changeOrigin: true,
         // rewrite: (path) => path.replace(/^\/api/, '')
         // ws: true,// 开启webSocket
       },
       '/metadata': {
-        target: 'http://192.168.1.14:7777',
+        target: 'http://192.168.1.27:7777',
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, '')
         // ws: true,// 开启webSocket