From 85bd4345438a4c6248a6436ea5aebc45e7ed5540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=97=E6=80=9D?= <965386816@qq.com>
Date: Mon, 4 Sep 2023 16:24:12 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=9B=B4=E6=96=B0'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/addprovide/index.vue | 680 ++++++++++++++++-----------------
 vite.config.js                 |   4 +-
 2 files changed, 338 insertions(+), 346 deletions(-)

diff --git a/src/views/addprovide/index.vue b/src/views/addprovide/index.vue
index 2ac4262..be2d7ba 100644
--- a/src/views/addprovide/index.vue
+++ b/src/views/addprovide/index.vue
@@ -1,358 +1,350 @@
 <template>
-    <!-- 使用示例 -->
-    <div class="example">
-      <el-main>
-        <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
-              >
-              <el-button @click="sysDept(ruleFormRef)">重置</el-button>
-              <el-button @click="route.back">返回</el-button>
-            </el-col>
-          </el-row>
-          <el-form-item label="服务名称" prop="name">
-            <el-input v-model="form.region.name" />
-          </el-form-item>
-          <el-row>
-            <el-col :span="11">
-              <el-form-item label="所属部门" prop="deptId">
-                <el-select
-                  @change="log"
-                  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
-                  v-model="form.region.metadataId"
-                  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>
-          </el-row>
-          <el-row>
-            <el-col :span="11">
-              <el-form-item label="是否需要用户认证" prop="isAuth">
-                <el-select v-model="form.region.isAuth" placeholder="请选择">
-                  <el-option label="是" :value="1" />
-                  <el-option label="否" :value="0" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="2" />
-            <el-col :span="11">
-              <el-form-item label="是否外网公开" prop="isPublic">
-                <el-select v-model="form.region.isPublic" placeholder="请选择">
-                  <el-option label="是" :value="1" />
-                  <el-option label="否" :value="0" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item label="资源描述" prop="intro">
-            <el-input v-model="form.region.intro" type="textarea" />
-          </el-form-item>
-        </el-form>
-      </el-main>
-      <el-footer>
+  <!-- 使用示例 -->
+  <div class="example">
+    <el-main>
+      <el-form ref="ruleFormRef" :model="form.region" :rules="addpro">
         <el-row style="margin-bottom: 24px">
-          <el-col :span="2">
-            <el-button type="primary" @click="opneDialogs">新建</el-button>
+          <el-col :span="24">
+            <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
+            <el-button @click="sysDept(ruleFormRef)">重置</el-button>
+            <el-button @click="route.back">返回</el-button>
           </el-col>
         </el-row>
-        <el-table
-          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
-          :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="intro" label="接口描述" />
-          <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)"
-                >编辑</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-      </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 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 play = reactive({
-    oplen: [],
-    region: [],
-    index: "",
-  });
-  const form = reactive({
-    region: {
-      deptId: "",
-      deptStr: "",
-      id: "",
-      interfaceList: [],
-      intro: "",
-      isAuth: 0,
-      isPublic: 0,
-      metadataId: "",
-      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监听
-    inputArray.forEach((element, index) => {
-      if (element.model) {
-        element.lable = null;
+        <el-form-item label="服务名称" prop="name">
+          <el-input v-model="form.region.name" />
+        </el-form-item>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="所属部门" prop="deptId">
+              <el-select @change="log" 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 v-model="form.region.metadataId" 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>
+        </el-row>
+        <el-row>
+          <el-col :span="11">
+            <el-form-item label="是否需要用户认证" prop="isAuth">
+              <el-select v-model="form.region.isAuth" placeholder="请选择">
+                <el-option label="是" :value="1" />
+                <el-option label="否" :value="0" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="2" />
+          <el-col :span="11">
+            <el-form-item label="是否外网公开" prop="isPublic">
+              <el-select v-model="form.region.isPublic" placeholder="请选择">
+                <el-option label="是" :value="1" />
+                <el-option label="否" :value="0" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="资源描述" prop="intro">
+          <el-input v-model="form.region.intro" type="textarea" />
+        </el-form-item>
+      </el-form>
+    </el-main>
+    <el-footer>
+      <el-row style="margin-bottom: 24px">
+        <el-col :span="2">
+          <el-button type="primary" @click="opneDialogs">新建</el-button>
+        </el-col>
+      </el-row>
+      <el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :data="interData">
+        <el-table-column prop="catalogId" label="目录" />
+        <el-table-column prop="name" label="接口名称" />
+        <el-table-column prop="url" label="接口地址" />
+        <el-table-column prop="tableName" 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="primary" text @click="fromVlauesj(scope.row)">编辑</el-button>
+            <el-popconfirm title="确定要删除吗?" @confirm="delet(scope.row.id)">
+              <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>
+  </div>
+</template>
+<script setup>
+import { ref, reactive, watch, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import http from "@/utils/request.js";
+import { useRoute, useRouter } from "vue-router";
+const route = useRouter();
+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: "",
+    deptStr: "",
+    id: "",
+    interfaceList: [],
+    intro: "",
+    isAuth: 0,
+    isPublic: 0,
+    metadataId: "",
+    name: "",
+  },
+});
+const opneDialogs = () => {
+  dialogVisible.value = true
+  http.get(`/api/interface/tables`).then(response => {
+    if (response.code == 200) {
+      tablesList.value = response.data
+    }
+  })
+}
+const tableChange = (val) => {
+  http.get(`/api/interface/fields?tableName=${val}`).then(response => {
+    if (response.code == 200) {
+      data1.value = []
+      response.data.forEach(item => {
+        data1.value.push({
+          key: item.field,
+          label: `${item.field}(${item.comment ? item.comment : '‘’'})`,
+        })
+      })
+    }
+  })
+}
+const interFaceSave = (formEl) => {
+  if (!formEl) return
+  formInline.fields = formInline.fields.join(',')
+
+  console.log('formInline', formInline);
+  formEl.validate((valid) => {
+    if (valid) {
+      if (byId.value) {
+        http.post(`/api/interface/${byId.value}`, formInline).then(response => {
+          if (response.code == 200) {
+            ElMessage.success('修改成功')
+          }
+        })
+      } else {
+        http.post(`/api/interface`, formInline).then(response => {
+          if (response.code == 200) {
+            ElMessage.success('新增成功')
+          }
+        })
       }
-    });
-    moreConditionsXmgl.value = !moreConditionsXmgl.value;
-  };
-  // 编辑赋值
-  const fromVlauesj = (datas) => {
-    play.index = datas.$index;
-    inputArray.forEach((element, index) => {
-      if (element.model) {
-        element.lable = datas.row[element.model];
-      }
-    });
-    // 添加id
-    moreConditionsXmgl.value = !moreConditionsXmgl.value;
-  };
-  // 接受子组件数据
-  const funFlag = (val) => {
-    if (play.index == "") {
-      form.region.interfaceList.push(JSON.parse(JSON.stringify(val)));
-      handleChildren1();
+      dialogVisible.value = false
+      init()
+      handleInterface()
+      fromIm.value?.resetFields();
     } else {
-      form.region.interfaceList[play.index] = JSON.parse(JSON.stringify(val));
-      play.index = "";
-  
-      handleChildren1();
+      return false
     }
-  };
-  
-  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 (form.region.interfaceList.length == 0) {
-          ElMessage.error("需创建一条接口数据");
-        } else {
-          dataCatalog();
-        }
-      } else {
-        console.log("error submit!", fields);
-      }
-    });
-  };
-  const delet = (e) => {
-    if (form.region.interfaceList.length <= 1) {
-      ElMessage.error("需保留一条数据");
-    } else {
-      form.region.interfaceList.splice(e.$index, 1);
+  })
+}
+
+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('删除成功')
     }
-  };
-  // metadataProject();
-  </script>
-  <style lang="scss" scoped>
-  .example {
-    .el-header {
-      background-color: rgb(246, 246, 246);
+  })
+
+}
+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
     }
-    .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;
-        }
+  })
+}
+
+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;
-      min-height: calc(50.3vh);
-      background-color: #fff;
-    }
   }
-  .el-button {
-    padding: 8px 10px;
+
+  .el-main {
+    background-color: #fff;
+
+    .el-scrollbar {
+      padding-right: 15px;
+    }
+
+    :deep(.set-select) {
+      width: 100%;
+    }
+
+    :deep(.el-select) {
+      width: 100%;
+    }
   }
-  </style>
+
+  .el-footer {
+    padding-top: 15px;
+    margin-top: 16px;
+    min-height: calc(50.3vh);
+    background-color: #fff;
+  }
+}
+
+.el-button {
+  padding: 8px 10px;
+}
+</style>
         
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 86a4487..8495233 100644
--- a/vite.config.js
+++ b/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