修改

src/layout/homeParts/form-1.vue

@@ -27,7 +27,7 @@ let ruleForm: Object = reactive({
   desc: '',
   remarks: '',
 });
-
+// 验证
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
 });
@@ -47,7 +47,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
     }
   });
 };
-
+// 重置
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.resetFields();

src/layout/homeParts/header-1.vue

@@ -3,7 +3,7 @@
     <el-row class="head">
       <el-col :span="8" class="left">
         <el-image :src="data.imgUrl" class="image"></el-image>
-        <span>{{ data.name || '建表项目' }}-管理中心</span>
+        <span>{{ data.name }}-管理中心</span>
       </el-col>
       <el-col :span="16" class="right">
         <span>{{ data.user.name || '游客' }}</span>
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
 const data = reactive({
-  name: '',
+  name: '建表项目',
   user: { name: '王泓璎' },
   imgUrl: new URL('@/assets/image/logo.png', import.meta.url).href,
 });

src/layout/homeParts/left-1.vue

@@ -35,55 +35,111 @@
     </el-col>
   </div>
   <el-dialog v-model="data.dialog" title="项目管理" :before-close="handleClose">
-    <Form @submitForm="submitForm" :ruleForm="ruleForm"></Form>
+    <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="desc">
+        <el-input v-model="ruleForm.desc" type="textarea" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remarks">
+        <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 { reactive, ref } from 'vue';
-import Form from '@/layout/homeParts/form-1.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
 const data = reactive({
   id: '',
   dialog: ref(false),
 });
 let items: any = reactive([]);
-let ruleForm: Object = reactive({
-  _id: '',
-  name: '',
-  desc: '',
-  remarks: '',
-});
+// 请求列表
 const res: IQueryResult = await store.projectQuery();
 items = res.data;
 
 const emit = defineEmits(['onMenu']);
+// 点击菜单
 const onMenu = (item: { _id: string; name: string }) => {
   data['id'] = item._id;
   emit('onMenu', item);
 };
+
+// 添加
 const toAdd = async (type: string) => {
   if (type == 'edit') {
     const aee: IQueryResult = await store.projectFetch(data.id);
+    console.log(aee.data);
     ruleForm = aee.data;
   } else if (type == 'add') {
-    ruleForm = {};
+    ruleForm = { name: '', desc: '', remark: '' };
   }
   data.dialog = true;
 };
-const submitForm = () => {
-  console.log(ruleForm);
+// 提交保存
+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();
+      }
+    }
+  });
 };
+// 重置
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+// 关闭弹窗
 const handleClose = () => {
-  console.log(ruleForm);
-
+  ruleForm = { name: '', desc: '', remark: '' };
   data.dialog = false;
 };
-const toDelete = () => {};
+// 删除;
+const toDelete = async () => {
+  ElMessageBox.confirm('是否确认删除该项目', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(async () => {
+    const res: IQueryResult = await store.projecDelete(data.id);
+    if (res.errcode == 0) {
+      ElMessage({ type: 'success', message: '删除成功' });
+    }
+  });
+};
 // #endregion
 </script>
 

src/stores/counter.ts

@@ -55,6 +55,33 @@ export const useCounterStore = defineStore('counter', () => {
     const res = await axios.$get(`${tableApi.url}/${payload}`);
     return res;
   };
+  const tableCreate = async (payload: any): Promise<IQueryResult> => {
+    const res = await axios.$post(`${tableApi.url}`, payload);
+    return res;
+  };
+  const tableUpdate = async (payload: any): Promise<IQueryResult> => {
+    const id = _.get(payload, 'id', _.get(payload, '_id'));
+    const res = await axios.$post(`${tableApi.url}/${id}`, payload);
+    return res;
+  };
+  const tableDelete = async (payload: any): Promise<IQueryResult> => {
+    const res = await axios.$delete(`${tableApi.url}/${payload}`);
+    return res;
+  };
 
-  return { count, doubleCount, increment, projectQuery, projectFetch, projectCreate, projecUpdate, projecDelete, tabelQuery, tableFetch };
+  return {
+    count,
+    doubleCount,
+    increment,
+    projectQuery,
+    projectFetch,
+    projectCreate,
+    projecUpdate,
+    projecDelete,
+    tabelQuery,
+    tableFetch,
+    tableCreate,
+    tableUpdate,
+    tableDelete,
+  };
 });

src/views/index.vue

@@ -21,26 +21,23 @@ import Form from './parts/form-1.vue';
 import Table from './parts/table-1.vue';
 const store = useStore();
 const data = reactive({
-  tableData: [],
   id: ref(''),
   name: '项目名称',
   show: 'list',
 });
 let list: any = reactive([]);
-let id = ref('');
 const props = defineProps({ id: String });
 if (props.id) {
-  if (data.id == props.id) {
-    console.log(data.id);
-  } else {
-    id.value = props.id;
-    // 项目
-    const aee: IQueryResult = await store.projectFetch(props.id);
-    data.name = aee.data.name;
-    // 列表
-    const res: IQueryResult = await store.tabelQuery({ project: props.id });
-    list = res.data;
-  }
+  // data.id == props.id;
+  // if (data.id == props.id) {
+  //   console.log(data.id);
+  // } else {
+  // 项目
+  const aee: IQueryResult = await store.projectFetch(props.id);
+  data.name = aee.data.name;
+  // 列表
+  const res: IQueryResult = await store.tabelQuery({ project: props.id });
+  list = res.data;
 }
 
 // list = props.data.list;
@@ -51,16 +48,15 @@ let form: Object = reactive({
   name_zh: '',
   remark: '',
 });
-
+// 添加修改
 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;
+    // form = res.data;
   } else {
-    form = {};
+    // form = { _id: '', name: '', columns: [], name_zh: '', remark: '' };
   }
-
   data.id = query.id;
   data.show = query.type;
 };

src/views/parts/form-1.vue

@@ -87,13 +87,16 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue';
 import moment from 'moment';
+import { useCounterStore as useStore } from '@/stores/counter';
+import type { IQueryResult } from '@/util/types.util';
 
 import type { FormInstance, FormRules } from 'element-plus';
-const emit = defineEmits(['toBack']);
+const store = useStore();
 
 const formRef = ref<FormInstance>();
 let form: Object = reactive({
-  _id: '',
+  // _id: '',
+  project: '63e3117543fdfb4d0f73262c',
   name: '',
   columns: [],
   name_zh: '',
@@ -115,10 +118,13 @@ const data = reactive({
     { label: '否', value: false },
   ],
 });
-const props = defineProps({ form: Object });
-console.log(props.form);
 
-form = props.form;
+const emit = defineEmits(['toBack']);
+
+// const props = defineProps({ form: Object });
+// console.log(props.form);
+
+// form = props.form;
 const rules = reactive<FormRules>({
   name: [{ required: true, message: '表名', trigger: 'blur' }],
 });
@@ -137,10 +143,22 @@ const toDel = (row: {}) => {
   console.log(row);
 };
 const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log('1');
+  
+  console.log(form);
+
   if (!formEl) return;
-  await formEl.validate((valid, fields) => {
+  await formEl.validate(async (valid, fields) => {
     if (valid) {
-      console.log('submit!');
+      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();
+      // }
     } else {
       console.log('error submit!', fields);
     }