update

src/stores/counter.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 import { AxiosWrapper } from '@/util/axios-wrapper';
 import _ from 'lodash';
 
-import type { IQueryType, IQueryResult } from '@/util/types.util';
+import type { IQueryType, IQueryResult, IQueryParams } from '@/util/types.util';
 const axios = new AxiosWrapper();
 const projectApi = {
   url: '/api/util/dbInit/project',
@@ -18,7 +18,7 @@ export const useCounterStore = defineStore('counter', () => {
     count.value++;
   }
 
-  const projectQuery = async ({ skip = 0, limit = undefined, ...info } = {}): Promise<IQueryResult> => {
+  const projectQuery = async ({ skip = 0, limit = undefined, ...info }: IQueryParams = {}): Promise<IQueryResult> => {
     let cond: IQueryType = {};
     if (skip) cond.skip = skip;
     if (limit) cond.limit = limit;
@@ -26,8 +26,8 @@ export const useCounterStore = defineStore('counter', () => {
     const res = await axios.$get(`${projectApi.url}`, cond);
     return res;
   };
-  const projectFetch = async (payload: any): Promise<IQueryResult> => {
-    const res = await axios.$get(`${projectApi.url}/${payload}`);
+  const projectFetch = async (id: string): Promise<IQueryResult> => {
+    const res = await axios.$get(`${projectApi.url}/${id}`);
     return res;
   };
   const projectCreate = async (payload: any): Promise<IQueryResult> => {
@@ -43,7 +43,7 @@ export const useCounterStore = defineStore('counter', () => {
     const res = await axios.$delete(`${projectApi.url}/${payload}`);
     return res;
   };
-  const tabelQuery = async ({ skip = 0, limit = undefined, ...info } = {}): Promise<IQueryResult> => {
+  const tabelQuery = async ({ skip = 0, limit = undefined, ...info }: IQueryParams = {}): Promise<IQueryResult> => {
     let cond: IQueryType = {};
     if (skip) cond.skip = skip;
     if (limit) cond.limit = limit;

src/util/types.util.ts

@@ -20,3 +20,9 @@ export interface IQueryResult {
   errmsg?: string | number;
   data: valueType;
 }
+
+export interface IQueryParams {
+  skip?: number;
+  limit?: number;
+  [props: string]: any;
+}

src/views/index.vue

@@ -14,29 +14,41 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
+import _ from 'lodash';
+import { reactive } 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';
 const store = useStore();
-const data = reactive({
-  tableData: [],
-  id: ref(''),
+
+interface dataType {
+  tableData: Array<any>;
+  id: string | undefined;
+  name: string;
+  show: string;
+  [prop: string]: any;
+}
+
+const data: dataType = reactive({
+  tableData: [] as any[],
+  id: '',
   name: '项目名称',
   show: 'list',
+  test: { t: '1' },
 });
+let test = $ref('');
+test = 'abc';
 let list: any = reactive([]);
-let id = ref('');
-const props = defineProps({ id: String });
+let props = defineProps({ id: String });
 if (props.id) {
-  if (data.id == props.id) {
+  if (data.id && 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;
+    Object.assign(data, { id: props.id, name: _.get(aee, 'name') });
     // 列表
     const res: IQueryResult = await store.tabelQuery({ project: props.id });
     list = res.data;