修改

src/layout/Home.vue

@@ -6,7 +6,7 @@
       </el-header>
       <el-container>
         <el-aside class="one">
-          <HomeLeft @onMenu="onMenu"></HomeLeft>
+          <HomeLeft @onMenu="onMenu" @toDelete="toDelete"></HomeLeft>
         </el-aside>
         <el-main>
           <el-scrollbar class="two">
@@ -19,12 +19,27 @@
 </template>
 <script setup lang="ts">
 import { reactive, nextTick } from 'vue';
+import { useCounterStore as useStore } from '@/stores/counter';
+import type { IQueryResult } from '@/util/types.util';
+import { ElMessage } from 'element-plus';
 import HomeLeft from '@/layout/homeParts/left-1.vue';
 import HomeHead from '@/layout/homeParts/header-1.vue';
+const store = useStore();
 const Obj = reactive({ id: '', name: '', ifRouterAlive: true });
 const onMenu = async (value: { id: string; name: string }) => {
   Obj.id = value.id;
   Obj.name = value.name;
+  load();
+};
+const toDelete = async () => {
+  const res: IQueryResult = await store.projecDelete(Obj.id);
+  if (res.errcode == 0) {
+    ElMessage({ type: 'success', message: '删除成功' });
+    Obj.id = '';
+    load();
+  }
+};
+const load = async () => {
   Obj.ifRouterAlive = false;
   nextTick(() => {
     Obj.ifRouterAlive = true;

src/layout/homeParts/form-1.vue

@@ -17,16 +17,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { Ref } from 'vue';
+
 import { reactive, ref } from 'vue';
 import type { FormInstance, FormRules } from 'element-plus';
 
 const formSize = ref('default');
 const ruleFormRef = ref<FormInstance>();
-let ruleForm: Object = reactive({
-  name: '',
-  desc: '',
-  remarks: '',
-});
+let ruleForm: Ref<{ name: String; desc: String; remark: String }> = ref({ name: '', desc: '', remark: '' });
 // 验证
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
@@ -34,12 +32,12 @@ const rules = reactive<FormRules>({
 console.log(ruleForm);
 
 const props = defineProps({ ruleForm: Object });
-ruleForm = props.ruleForm;
+ruleForm.value = props.ruleForm as { name: String; desc: String; remark: String };
 // 提交保存
 const emit = defineEmits(['submitForm']);
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
-  await formEl.validate((valid, fields) => {
+  await formEl.validate((valid) => {
     if (valid) {
       emit('submitForm');
     } else {

src/layout/homeParts/left-1.vue

@@ -56,10 +56,11 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
 import type { Ref } from 'vue';
+import _ from 'lodash';
 import { useCounterStore as useStore } from '@/stores/counter';
 import type { IQueryResult } from '@/util/types.util';
 import type { FormInstance, FormRules } from 'element-plus';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
 const store = useStore();
 const formSize = ref('default');
 const ruleFormRef = ref<FormInstance>();
@@ -79,8 +80,7 @@ const search = async () => {
 onMounted(() => {
   search();
 });
-
-const emit = defineEmits(['onMenu']);
+const emit = defineEmits(['onMenu', 'toDelete']);
 // 点击菜单
 const onMenu = (item: { _id: string; name: string }) => {
   data['id'] = item._id;
@@ -89,7 +89,7 @@ const onMenu = (item: { _id: string; name: string }) => {
 // #endregion
 // #region 表单添加修改
 // 表单
-let ruleForm: Ref<{}> = ref({});
+let ruleForm: Ref<{ name: String; desc: String; remark: String }> = ref({ name: '', desc: '', remark: '' });
 // 验证
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
@@ -98,7 +98,7 @@ const rules = reactive<FormRules>({
 const toAdd = async (type: string) => {
   if (type == 'edit') {
     const aee: IQueryResult = await store.projectFetch(data.id);
-    ruleForm.value = aee.data as {};
+    ruleForm.value = aee.data as { name: String; desc: String; remark: String };
   } else if (type == 'add') {
     ruleForm.value = { name: '', desc: '', remark: '' };
   }
@@ -107,10 +107,9 @@ const toAdd = async (type: string) => {
 // 提交保存
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
+  await formEl.validate(async (valid) => {
     if (valid) {
-      console.log(ruleForm.value._id);
-      if (ruleForm.value._id) {
+      if (_.get(ruleForm.value, '_id')) {
         const res: IQueryResult = await store.projecUpdate(ruleForm.value);
         if (res.errcode == 0) handleClose();
       } else {
@@ -139,11 +138,8 @@ const toDelete = async () => {
     cancelButtonText: '取消',
     type: 'warning',
   }).then(async () => {
-    const res: IQueryResult = await store.projecDelete(data.id);
-    if (res.errcode == 0) {
-      search();
-      ElMessage({ type: 'success', message: '删除成功' });
-    }
+    emit('toDelete');
+    search();
   });
 };
 </script>

src/views/index.vue

@@ -15,7 +15,7 @@
           <el-button class="button" type="success" size="large" disabled>添加表</el-button>
         </el-col>
       </el-col>
-      <Table :list="list" @toEdit="toEdit" @toAddDir="toAddDir" @toAddTab="toAddTab"></Table>
+      <Table :id="data.id" @toEdit="toEdit" @toEditDir="toEditDir" @toAddDir="toAddDir" @toAddTab="toAddTab" ref="clear"></Table>
     </el-col>
     <el-col class="form" v-else-if="data.show == 'form'">
       <Form @toBack="toBack" :form="form"></Form>
@@ -70,72 +70,82 @@ const data: dataType = reactive({
   dialog: ref(false),
 });
 
-let list: Ref<any[]> = ref([]);
-// 查询
+const clear = ref<any>();
+// 查询详情
 const search = async () => {
-  // 详情
   const aee: IQueryResult = await store.projectFetch(data.id);
   Object.assign(data, { id: props.id, name: _.get(aee.data, 'name') });
-  // 列表
-  const res: IQueryResult = await store.tableQuery({ project: data.id });
-  list.value = res.data as any[];
+  // 调用table组件search方法
+  clear.value.search();
 };
 let props = defineProps({ id: String });
 if (props.id) {
   if (data.id && data.id == props.id) {
     console.log(data.id);
   } else {
-    data.id = props.id;
-    search();
-    const res: IQueryResult = await store.tableQuery({ project: data.id });
-    list.value = res.data as any[];
+    data.id = props.id as string;
   }
 }
-
+// #region 添加修改表
 let form: Ref<{}> = ref({});
 // 添加修改
 const toAdd = async () => {
   form.value = { columns: [], project: data.id };
   data.show = 'form';
-  search();
 };
+// 添加下级表
 const toAddTab = (query: { id: string }) => {
   form.value = { project: data.id, dir: query.id, columns: [] };
   data.show = 'form';
 };
+// 修改表
 const toEdit = async (query: { id: string }) => {
   const res: IQueryResult = await store.tableFetch(query.id);
   form.value = res.data as {};
   data.show = 'form';
-  // search();
 };
+// 返回
 const toBack = async () => {
-  data.show = 'list';
   search();
+  data.show = 'list';
 };
-// #region 弹窗创建文件夹
+// #endregion
+// #region 弹窗----文件夹
 // 表单
-let ruleForm: Ref<{}> = ref({});
+let ruleForm: Ref<{ project: string; super: string; name: String; sort: String; remark: String }> = ref({
+  project: '',
+  super: '',
+  name: '',
+  sort: '',
+  remark: '',
+});
 // 验证
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
 });
+// 添加文件夹
 const toDer = () => {
-  ruleForm.value.project = data.id;
+  ruleForm.value.project = data.id as any;
   data.dialog = true;
 };
+// 添加下级文件夹
 const toAddDir = (query: { id: string }) => {
-  ruleForm.value.project = data.id;
+  ruleForm.value.project = data.id as any;
   ruleForm.value.super = query.id;
   data.dialog = true;
 };
+// 修改文件夹
+const toEditDir = async (query: { id: string }) => {
+  const res: IQueryResult = await store.dirFetch(query.id);
+  ruleForm.value = res.data as { project: ''; super: ''; name: ''; sort: ''; remark: '' };
+  data.dialog = true;
+};
 // 提交保存
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
-  await formEl.validate(async (valid, fields) => {
+  await formEl.validate(async (valid) => {
     if (valid) {
-      console.log(ruleForm.value);
-      if (ruleForm.value._id) {
+      if (_.get(ruleForm.value, '_id')) {
         const res: IQueryResult = await store.dirUpdate(ruleForm.value);
         if (res.errcode == 0) handleClose();
       } else {
@@ -152,8 +162,9 @@ const resetForm = (formEl: FormInstance | undefined) => {
 };
 // 关闭弹窗
 const handleClose = () => {
-  ruleForm.value = {};
-  search();
+  ruleForm.value = { project: '', super: '', name: '', sort: '', remark: '' };
+  // 调用table组件search方法
+  clear.value.search();
   data.dialog = false;
 };
 // #endregion

src/views/parts/form-1.vue

@@ -74,8 +74,8 @@
           <el-table-column label="操作" align="center" width="175">
             <template #default="{ row }">
               <el-button text type="danger" @click="toDel(row)">删除</el-button>
-              <el-button text type="primary" @click="toDel(row)">向下</el-button>
-              <el-button text type="success" @click="toDel(row)">向上</el-button>
+              <!-- <el-button text type="primary" @click="toDel(row)">向下</el-button>
+              <el-button text type="success" @click="toDel(row)">向上</el-button> -->
             </template>
           </el-table-column>
         </el-table>
@@ -85,24 +85,17 @@
 </template>
 
 <script lang="ts" setup>
+import _ from 'lodash';
+import type { Ref } from 'vue';
 import { reactive, ref } from 'vue';
-import moment from 'moment';
 import { useCounterStore as useStore } from '@/stores/counter';
 import type { IQueryResult } from '@/util/types.util';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElMessage } from 'element-plus';
 
 import type { FormInstance, FormRules } from 'element-plus';
 const store = useStore();
 
 const formRef = ref<FormInstance>();
-let form: Object = reactive({
-  // _id: '',
-  project: '63e3117543fdfb4d0f73262c',
-  name: '',
-  columns: [],
-  name_zh: '',
-  remark: '',
-});
 const data = reactive({
   typeList: [
     { label: '字符串', value: 'String' },
@@ -124,38 +117,49 @@ const emit = defineEmits(['toBack']);
 
 const props = defineProps({ form: Object });
 // console.log(props.form);
-
-form = props.form;
+let form: Ref<{ columns: any; name_zh: string; remark: string; name: string; project: string; dir: string }> = ref({
+  columns: [],
+  name_zh: '',
+  remark: '',
+  name: '',
+  project: '',
+  dir: '',
+});
+form.value = props.form as { columns: []; name_zh: ''; remark: ''; name: ''; project: ''; dir: '' };
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '表名', trigger: 'blur' }],
 });
 interface Arr {
-  id: number;
+  // id: number;
   name?: string;
   // [prop:string]: string;
+  index: boolean;
+  required: boolean;
+  type: string;
 }
-
+// 添加字段
 const toAdd = () => {
-  let list: Array<Arr> = form.columns;
-  list.push({ id: moment().valueOf() });
+  let list: Array<Arr> = form.value.columns;
+  list.push({ index: false, required: false, type: 'String' });
 };
-
-const toDel = (row: {}) => {
-  console.log(row);
+// 删除字段
+const toDel = (row: { title: String }) => {
+  let info = form.value.columns.filter((i: any) => i.title != row.title);
+  form.value.columns = info;
 };
+// 提交
 const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
     if (valid) {
-      console.log(form);
-      if (form._id) {
-        const res: IQueryResult = await store.tableUpdate(form);
+      if (_.get(form.value, '_id')) {
+        const res: IQueryResult = await store.tableUpdate(form.value);
         if (res.errcode == 0) {
           ElMessage({ type: 'success', message: '维护信息成功' });
           toBack();
         }
       } else {
-        const res: IQueryResult = await store.tableCreate(form);
+        const res: IQueryResult = await store.tableCreate(form.value);
         if (res.errcode == 0) {
           ElMessage({ type: 'success', message: '维护信息成功' });
           toBack();
@@ -195,17 +199,6 @@ const toBack = () => {
   margin: 20px 0 0 0;
   padding: 10px;
 }
-/* .form::-webkit-scrollbar {
-  width: 1px;
-}
-.form::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background: rgba(108, 43, 43, 0.2);
-}
-.form::-webkit-scrollbar-track {
-  border-radius: 0;
-  background: rgba(0, 0, 0, 0.1);
-} */
 .el-radio {
   margin-right: 4px;
 }

src/views/parts/table-1.vue

@@ -10,18 +10,21 @@
         :header-cell-style="{ 'text-align': 'center' }"
         row-key="_id"
         default-expand-all
+        v-loading="loading"
       >
         <el-table-column prop="name_zh" label="表名中文"> </el-table-column>
         <el-table-column prop="name" label="表名"> </el-table-column>
         <el-table-column prop="remark" label="备注"> </el-table-column>
         <el-table-column fixed="right" label="操作">
           <template #default="scope">
-            <el-button link type="primary" @click.prevent="toEdit(scope.row)">修改</el-button>
-            <el-button link type="primary" @click.prevent="toAddDir(scope.row)" v-if="scope.row.type == 'dir'">添加下级文件夹</el-button>
-            <el-button link type="primary" @click.prevent="toAddTab(scope.row)" v-if="scope.row.type == 'dir'">添加下级表</el-button>
+            <el-button link type="primary" @click.prevent="toEditDir(scope.row)" v-if="scope.row.type == 'dir'">修改</el-button>
+            <el-button link type="primary" @click.prevent="toEdit(scope.row)" v-if="scope.row.type == 'table'">修改</el-button>
+            <el-button link type="success" @click.prevent="toAddDir(scope.row)" v-if="scope.row.type == 'dir'">添加下级文件夹</el-button>
+            <el-button link type="success" @click.prevent="toAddTab(scope.row)" v-if="scope.row.type == 'dir'">添加下级表</el-button>
             <el-button link type="warning">导出</el-button>
             <el-button link type="warning">导出ts</el-button>
-            <el-button link type="danger" @click.prevent="toDel(scope.row)">删除</el-button>
+            <el-button link type="danger" @click.prevent="toDelDir(scope.row)" v-if="scope.row.type == 'dir'">删除</el-button>
+            <el-button link type="danger" @click.prevent="toDel(scope.row)" v-if="scope.row.type == 'table'">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -29,36 +32,51 @@
   </el-col>
 </template>
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 import type { Ref } from 'vue';
 import { useCounterStore as useStore } from '@/stores/counter';
 import type { IQueryResult } from '@/util/types.util';
 import { ElMessage, ElMessageBox } from 'element-plus';
 const store = useStore();
 let list: Ref<any[]> = ref([]);
-const props = defineProps({ list: Array });
-console.log(props.list);
-
-list.value = props.list as any[];
-
-const emit = defineEmits(['toEdit', 'toAddDir', 'toAddTab']);
-// 修改
+// 查询列表
+const search = async () => {
+  const res: IQueryResult = await store.tableQuery({ project: props.id });
+  list.value = res.data as any[];
+};
+const props = defineProps({ list: Array, id: String });
+const loading = ref(false);
+if (props.id) {
+  loading.value = true;
+  search();
+  loading.value = false;
+}
+// 暴露table组件search方法
+defineExpose({ search });
+const emit = defineEmits(['toEdit', 'toEditDir', 'toAddDir', 'toAddTab']);
+// 修改表
 const toEdit = (row: { _id: string }) => {
   let query: Object = { id: row._id };
   emit('toEdit', query);
 };
+// 修改文件夹
+const toEditDir = (row: { _id: string }) => {
+  let query: Object = { id: row._id };
+  emit('toEditDir', query);
+};
+// 添加下级文件夹
 const toAddDir = (row: { _id: string }) => {
   let query: Object = { id: row._id };
   emit('toAddDir', query);
 };
+// 添加下级表
 const toAddTab = (row: { _id: string }) => {
   let query: Object = { id: row._id };
   emit('toAddTab', query);
 };
-// 删除
+// 删除表
 const toDel = (row: { _id: string }) => {
-  console.log(row._id);
-  ElMessageBox.confirm('是否确认删除该表', '提示', {
+  ElMessageBox.confirm('是否确认删除该条数据', '提示', {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
     type: 'warning',
@@ -66,6 +84,21 @@ const toDel = (row: { _id: string }) => {
     const res: IQueryResult = await store.tableDelete(row._id);
     if (res.errcode == 0) {
       ElMessage({ type: 'success', message: '删除成功' });
+      search();
+    }
+  });
+};
+// 删除文件夹
+const toDelDir = (row: { _id: string }) => {
+  ElMessageBox.confirm('是否确认删除该条数据', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    const res: IQueryResult = await store.dirDelete(row._id);
+    if (res.errcode == 0) {
+      ElMessage({ type: 'success', message: '删除成功' });
+      search();
     }
   });
 };