修改-

src/layout/homeParts/left-1.vue

@@ -42,7 +42,7 @@
       <el-form-item label="描述" prop="desc">
         <el-input v-model="ruleForm.desc" type="textarea" />
       </el-form-item>
-      <el-form-item label="备注" prop="remarks">
+      <el-form-item label="备注" prop="remark">
         <el-input v-model="ruleForm.remark" type="textarea" />
       </el-form-item>
       <el-form-item>
@@ -54,35 +54,31 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, ref, onMounted } from 'vue';
+import type { Ref } from 'vue';
 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';
 const store = useStore();
-
 const formSize = ref('default');
 const ruleFormRef = ref<FormInstance>();
-// 表单
-let ruleForm = reactive({
-  name: '',
-  remark: '',
-  desc: '',
-});
-// 验证
-const rules = reactive<FormRules>({
-  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
-});
 
-// #region 1
+// #region 请求列表
 const data = reactive({
   id: '',
   dialog: ref(false),
 });
-let items: any = reactive([]);
 // 请求列表
-const res: IQueryResult = await store.projectQuery();
-items = res.data;
+// ref方式
+let items: Ref<any[]> = ref([]);
+const search = async () => {
+  const res: IQueryResult = await store.projectQuery();
+  items.value = res.data as any[];
+};
+onMounted(() => {
+  search();
+});
 
 const emit = defineEmits(['onMenu']);
 // 点击菜单
@@ -90,15 +86,21 @@ const onMenu = (item: { _id: string; name: string }) => {
   data['id'] = item._id;
   emit('onMenu', item);
 };
-
+// #endregion
+// #region 表单添加修改
+// 表单
+let ruleForm: Ref<{}> = ref({});
+// 验证
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
+});
 // 添加
 const toAdd = async (type: string) => {
   if (type == 'edit') {
     const aee: IQueryResult = await store.projectFetch(data.id);
-    console.log(aee.data);
-    ruleForm = aee.data;
+    ruleForm.value = aee.data as {};
   } else if (type == 'add') {
-    ruleForm = { name: '', desc: '', remark: '' };
+    ruleForm.value = { name: '', desc: '', remark: '' };
   }
   data.dialog = true;
 };
@@ -107,12 +109,13 @@ const submitForm = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
     if (valid) {
-      const res: IQueryResult = await store.projectCreate(ruleForm);
-      if (res.errcode == 0) {
-        // 重新请求列表
-        // const aee: IQueryResult = await store.projectQuery();
-        // items = aee.data;
-        handleClose();
+      console.log(ruleForm.value._id);
+      if (ruleForm.value._id) {
+        const res: IQueryResult = await store.projecUpdate(ruleForm.value);
+        if (res.errcode == 0) handleClose();
+      } else {
+        const res: IQueryResult = await store.projectCreate(ruleForm.value);
+        if (res.errcode == 0) handleClose();
       }
     }
   });
@@ -124,9 +127,11 @@ const resetForm = (formEl: FormInstance | undefined) => {
 };
 // 关闭弹窗
 const handleClose = () => {
-  ruleForm = { name: '', desc: '', remark: '' };
+  ruleForm.value = { name: '', desc: '', remark: '' };
+  search();
   data.dialog = false;
 };
+// #endregion
 // 删除;
 const toDelete = async () => {
   ElMessageBox.confirm('是否确认删除该项目', '提示', {
@@ -136,11 +141,11 @@ const toDelete = async () => {
   }).then(async () => {
     const res: IQueryResult = await store.projecDelete(data.id);
     if (res.errcode == 0) {
+      search();
       ElMessage({ type: 'success', message: '删除成功' });
     }
   });
 };
-// #endregion
 </script>
 
 <style scoped>

src/stores/counter.ts

@@ -11,13 +11,15 @@ const projectApi = {
 const tableApi = {
   url: '/api/util/dbInit/table',
 };
+const dirApi = {
+  url: '/api/util/dbInit/dir',
+};
 export const useCounterStore = defineStore('counter', () => {
   const count = ref(0);
   const doubleCount = computed(() => count.value * 2);
   function increment() {
     count.value++;
   }
-
   const projectQuery = async ({ skip = 0, limit = undefined, ...info }: IQueryParams = {}): Promise<IQueryResult> => {
     let cond: IQueryType = {};
     if (skip) cond.skip = skip;
@@ -26,8 +28,8 @@ export const useCounterStore = defineStore('counter', () => {
     const res = await axios.$get(`${projectApi.url}`, cond);
     return res;
   };
-  const projectFetch = async (id: string): Promise<IQueryResult> => {
-    const res = await axios.$get(`${projectApi.url}/${id}`);
+  const projectFetch = async (payload: any): Promise<IQueryResult> => {
+    const res = await axios.$get(`${projectApi.url}/${payload}`);
     return res;
   };
   const projectCreate = async (payload: any): Promise<IQueryResult> => {
@@ -43,7 +45,32 @@ export const useCounterStore = defineStore('counter', () => {
     const res = await axios.$delete(`${projectApi.url}/${payload}`);
     return res;
   };
-  const tabelQuery = async ({ skip = 0, limit = undefined, ...info }: IQueryParams = {}): Promise<IQueryResult> => {
+  const dirQuery = async ({ skip = 0, limit = undefined, ...info }: IQueryParams = {}): Promise<IQueryResult> => {
+    let cond: IQueryType = {};
+    if (skip) cond.skip = skip;
+    if (limit) cond.limit = limit;
+    cond = { ...cond, ...info };
+    const res = await axios.$get(`${dirApi.url}`, cond);
+    return res;
+  };
+  const dirFetch = async (payload: any): Promise<IQueryResult> => {
+    const res = await axios.$get(`${dirApi.url}/${payload}`);
+    return res;
+  };
+  const dirCreate = async (payload: any): Promise<IQueryResult> => {
+    const res = await axios.$post(`${dirApi.url}`, payload);
+    return res;
+  };
+  const dirUpdate = async (payload: any): Promise<IQueryResult> => {
+    const id = _.get(payload, 'id', _.get(payload, '_id'));
+    const res = await axios.$post(`${dirApi.url}/${id}`, payload);
+    return res;
+  };
+  const dirDelete = async (payload: any): Promise<IQueryResult> => {
+    const res = await axios.$delete(`${dirApi.url}/${payload}`);
+    return res;
+  };
+  const tableQuery = async ({ skip = 0, limit = undefined, ...info }: IQueryParams = {}): Promise<IQueryResult> => {
     let cond: IQueryType = {};
     if (skip) cond.skip = skip;
     if (limit) cond.limit = limit;
@@ -78,10 +105,15 @@ export const useCounterStore = defineStore('counter', () => {
     projectCreate,
     projecUpdate,
     projecDelete,
-    tabelQuery,
+    tableQuery,
     tableFetch,
     tableCreate,
     tableUpdate,
     tableDelete,
+    dirQuery,
+    dirFetch,
+    dirCreate,
+    dirUpdate,
+    dirDelete,
   };
 });

src/views/index.vue

@@ -5,23 +5,53 @@
       <span>{{ data.name }}</span>
     </el-col>
     <el-col class="list" v-if="data.show == 'list'">
-      <Table @toAdd="toAdd" :list="list" @toEdit="toAdd"></Table>
+      <el-col :span="24" class="btn">
+        <el-col v-if="data.id">
+          <el-button class="button" type="primary" size="large" @click="toDer()">添加文件夹</el-button>
+          <el-button class="button" type="success" size="large" @click="toAdd()">添加表</el-button>
+        </el-col>
+        <el-col v-else>
+          <el-button class="button" type="primary" size="large" disabled>添加文件夹</el-button>
+          <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>
     </el-col>
     <el-col class="form" v-else-if="data.show == 'form'">
-      <Form @toBack="toAdd" :form="form"></Form>
+      <Form @toBack="toBack" :form="form"></Form>
     </el-col>
   </el-col>
+  <el-dialog v-model="data.dialog" title="文件夹" :before-close="handleClose">
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" :size="formSize" status-icon>
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="ruleForm.name" />
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input v-model="ruleForm.sort" type="number" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="ruleForm.remark" type="textarea" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button>
+        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
 import _ from 'lodash';
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
+import type { Ref } from 'vue';
 import { useCounterStore as useStore } from '@/stores/counter';
 import type { IQueryResult } from '@/util/types.util';
 import Form from './parts/form-1.vue';
 import Table from './parts/table-1.vue';
-import { $ref } from 'vue/macros';
+import type { FormInstance, FormRules } from 'element-plus';
 const store = useStore();
+const formSize = ref('default');
+const ruleFormRef = ref<FormInstance>();
 
 interface dataType {
   tableData: Array<any>;
@@ -29,52 +59,104 @@ interface dataType {
   name: string;
   show: string;
   [prop: string]: any;
+  // dialog: boolean;
 }
-
 const data: dataType = reactive({
   tableData: [] as any[],
   id: '',
   name: '项目名称',
   show: 'list',
   test: { t: '1' },
+  dialog: ref(false),
 });
-let test = $ref('');
-test = 'abc';
-let list: any = reactive([]);
+
+let list: Ref<any[]> = ref([]);
+// 查询
+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[];
+};
 let props = defineProps({ id: String });
 if (props.id) {
   if (data.id && data.id == props.id) {
     console.log(data.id);
   } else {
-    // 项目
-    const aee: IQueryResult = await store.projectFetch(props.id);
-    Object.assign(data, { id: props.id, name: _.get(aee, 'name') });
-    // 列表
-    const res: IQueryResult = await store.tabelQuery({ project: props.id });
-    list = res.data;
+    data.id = props.id;
+    search();
+    const res: IQueryResult = await store.tableQuery({ project: data.id });
+    list.value = res.data as any[];
   }
 }
 
-// list = props.data.list;
-let form: Object = reactive({
-  _id: '',
-  name: '',
-  columns: [],
-  name_zh: '',
-  remark: '',
-});
+let form: Ref<{}> = ref({});
 // 添加修改
-const toAdd = async (query: { id: string; type: string }) => {
-  console.log(query.id);
-  if (query.id) {
-    const res: IQueryResult = await store.tableFetch(query.id);
-    // form = res.data;
-  } else {
-    // form = { _id: '', name: '', columns: [], name_zh: '', remark: '' };
-  }
-  data.id = query.id;
-  data.show = query.type;
+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();
+};
+// #region 弹窗创建文件夹
+// 表单
+let ruleForm: Ref<{}> = ref({});
+// 验证
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
+});
+const toDer = () => {
+  ruleForm.value.project = data.id;
+  data.dialog = true;
+};
+const toAddDir = (query: { id: string }) => {
+  ruleForm.value.project = data.id;
+  ruleForm.value.super = query.id;
+  data.dialog = true;
+};
+// 提交保存
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      console.log(ruleForm.value);
+      if (ruleForm.value._id) {
+        const res: IQueryResult = await store.dirUpdate(ruleForm.value);
+        if (res.errcode == 0) handleClose();
+      } else {
+        const res: IQueryResult = await store.dirCreate(ruleForm.value);
+        if (res.errcode == 0) handleClose();
+      }
+    }
+  });
+};
+// 重置
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+// 关闭弹窗
+const handleClose = () => {
+  ruleForm.value = {};
+  search();
+  data.dialog = false;
 };
+// #endregion
 </script>
 
 <style scoped>
@@ -83,6 +165,15 @@ const toAdd = async (query: { id: string; type: string }) => {
   padding: 24px;
   height: 92vh;
 }
+.btn {
+  height: 50px;
+  margin: 10px 0;
+  text-align: center;
+  background: #86b2a5;
+}
+.button {
+  margin: 0 10%;
+}
 .head {
   height: 10vh;
   background: #fff;

src/views/parts/form-1.vue

@@ -89,6 +89,7 @@ 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 type { FormInstance, FormRules } from 'element-plus';
 const store = useStore();
@@ -121,10 +122,10 @@ const data = reactive({
 
 const emit = defineEmits(['toBack']);
 
-// const props = defineProps({ form: Object });
+const props = defineProps({ form: Object });
 // console.log(props.form);
 
-// form = props.form;
+form = props.form;
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '表名', trigger: 'blur' }],
 });
@@ -143,22 +144,23 @@ const toDel = (row: {}) => {
   console.log(row);
 };
 const submitForm = async (formEl: FormInstance | undefined) => {
-  console.log('1');
-  
-  console.log(form);
-
   if (!formEl) return;
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       console.log(form);
-      // const res: IQueryResult = await store.tableCreate(form);
-      // if (res.errcode == 0) {
-      //   console.log('1');
-      //   // 重新请求列表
-      //   // const aee: IQueryResult = await store.projectQuery();
-      //   // items = aee.data;
-      //   // handleClose();
-      // }
+      if (form._id) {
+        const res: IQueryResult = await store.tableUpdate(form);
+        if (res.errcode == 0) {
+          ElMessage({ type: 'success', message: '维护信息成功' });
+          toBack();
+        }
+      } else {
+        const res: IQueryResult = await store.tableCreate(form);
+        if (res.errcode == 0) {
+          ElMessage({ type: 'success', message: '维护信息成功' });
+          toBack();
+        }
+      }
     } else {
       console.log('error submit!', fields);
     }

src/views/parts/table-1.vue

@@ -1,19 +1,27 @@
 <template>
   <el-col class="list">
-    <el-col :span="24" class="btn">
-      <el-button type="primary" size="large" @click="toAdd()">添加表</el-button>
-    </el-col>
     <div class="table">
-      <el-table :data="list" border size="large" max-height="70vh" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ 'text-align': 'center' }">
+      <el-table
+        :data="list"
+        border
+        size="large"
+        max-height="70vh"
+        :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ 'text-align': 'center' }"
+        row-key="_id"
+        default-expand-all
+      >
         <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="warning">导出</el-button>
             <el-button link type="warning">导出ts</el-button>
-            <el-button link type="danger">删除</el-button>
+            <el-button link type="danger" @click.prevent="toDel(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -21,29 +29,49 @@
   </el-col>
 </template>
 <script setup lang="ts">
-import { reactive } from 'vue';
-let list: any = reactive([]);
+import { reactive, 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 });
-// eslint-disable-next-line vue/no-setup-props-destructure
-list = props.list;
-const emit = defineEmits(['toAdd', 'toEdit']);
-const toAdd = () => {
-  let query: Object = { type: 'form' };
-  emit('toAdd', query);
-};
+console.log(props.list);
+
+list.value = props.list as any[];
+
+const emit = defineEmits(['toEdit', 'toAddDir', 'toAddTab']);
+// 修改
 const toEdit = (row: { _id: string }) => {
-  let query: Object = { type: 'form', id: row._id };
+  let query: Object = { id: row._id };
   emit('toEdit', 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('是否确认删除该表', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    const res: IQueryResult = await store.tableDelete(row._id);
+    if (res.errcode == 0) {
+      ElMessage({ type: 'success', message: '删除成功' });
+    }
+  });
+};
 </script>
 
 <style scoped>
-.btn {
-  height: 50px;
-  margin: 10px 0;
-  text-align: right;
-  background: #86b2a5;
-}
 .table {
   background: #ccc;
   overflow-y: scroll;