feat: 先提交下好rebase新的proxy

src/api/template/template.ts

@@ -3,11 +3,13 @@ import { http } from '@/utils/http/axios';
 export interface SceneModule {
   code: string;
   // createdAt: string,
-  id: number;
+  id?: number;
   // isDeleted: number,
   name: string;
+  previewImage: string | null;
   remark: string;
-  status: number;
+  isDisabled: number;
+  elementIdList?: Array<string>;
   // updatedAt: string,
 }
 

src/views/templateManage/CardCommon.vue

@@ -15,22 +15,23 @@
 
     <div class="body">
       <el-button type="primary" :icon="Plus" @click="addForm" style="margin-bottom: 16px">
-        {{ props.type }}</el-button
+        添加模板</el-button
       >
       <el-table style="width: 100%" :data="tableData" highlight-current-row>
-        <el-table-column :label="props.type + `名称`" prop="name" />
+        <el-table-column label="模板名称" prop="name" min-width="14%" />
         <!-- <el-table-column :label="props.type + `代码`" prop="code" /> -->
-
-        <el-table-column prop="status" label="状态">
+        <el-table-column label="模板编码" prop="code" min-width="14%" />
+        <el-table-column label="看板组件" min-width="14%" />
+        <el-table-column prop="isDisabled" label="状态" min-width="14%">
           <template #default="scope">
             <el-tag v-if="scope.row.isDisabled === 0" type="success">启用</el-tag>
             <el-tag v-else type="danger">禁用</el-tag>
           </template>
         </el-table-column>
 
-        <el-table-column label="备注" prop="remark" />
-        <el-table-column label="创建时间" prop="createdAt" />
-        <el-table-column label="操作">
+        <el-table-column label="创建时间" prop="createdAt" min-width="14%" />
+        <el-table-column label="备注" prop="remark" min-width="16%" />
+        <el-table-column label="操作" min-width="14%">
           <!-- <template #default="scoped">
             <el-popconfirm title="确认要删除吗？" @confirm="deleteTableData(scoped.row)">
               <template #reference>
@@ -96,12 +97,7 @@
       :title="type === '模板' ? '编辑模板' : '编辑标签'"
       :before-close="handleClose"
     >
-      <DrawerCommonVue
-        :detail="currentdrawerFormData"
-        :type="props.type"
-        v-if="currentdrawerFormData"
-        @submit-drawer="submitDrawer"
-      />
+      <DrawerCommonVue :type="props.type" :drawer-type="drawerType" :add-item="addData" />
     </el-drawer>
   </div>
 </template>
@@ -111,10 +107,7 @@
   import { ElDrawer } from 'element-plus';
   import { Plus, EditPen, View, Delete } from '@element-plus/icons-vue';
   import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
-  import TitleCommon from './TitleCommon.vue';
   import { Records, SceneModule } from '@/api/template/template';
-  import del from '@/assets/icons/del.png';
-  import edit from '@/assets/icons/edit.png';
   // import { LabelType } from './constant';
 
   // const currentFormType = ref('场景');
@@ -130,6 +123,7 @@
   }>();
 
   const addForm = () => {
+    drawerType.value = 'add';
     cardeditDrawer.value = true;
   };
 
@@ -148,8 +142,8 @@
   }
 
   export interface Page {
-    page: number;
-    size: number;
+    pageNumber: number;
+    pageSize: number;
   }
 
   // const currentType = ref<CreateType>('编辑模板');
@@ -161,12 +155,14 @@
   const total = ref(100);
   const tableData = ref<Records[]>([]);
 
+  const drawerType = ref('add'); //抽屉的功能是新建还是编辑
+
   // 删除数据-finish
   function deleteTableData(row: TableModel) {
     // emit('deleteTableData', row);
     props.deleteTableData(row).then((res) => {
       console.log('deleteTableData', res);
-      getData({ page: currentPage.value, size: currentPageSize.value });
+      getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
     });
   }
 
@@ -189,7 +185,7 @@
     props.submitDrawer(data).then((res) => {
       console.log('submitDrawer', res);
       closeDrawer();
-      getData({ page: currentPage.value, size: currentPageSize.value });
+      getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
     });
   }
 
@@ -217,42 +213,44 @@
 
   // 添加数据-finish
   function addData(data: SceneModule) {
-    props.addData(data).then((res) => {
-      console.log('addData', res);
+    props.addData(data).then(() => {
+      // console.log('addData', res);
       closeDrawer();
-
-      getData({ page: currentPage.value, size: currentPageSize.value });
+      //如果是创建了新的，则列表回到第一页；如果只是编辑则列表位置不变
+      currentPage.value = 1;
+      currentPageSize.value = 10;
+      getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
     });
   }
 
   function closeDrawer() {
     cardaddDrawer.value = false;
     cardeditDrawer.value = false;
-    getData({ page: currentPage.value, size: currentPageSize.value });
+    // getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });更新数据另外干，不用每次关闭抽屉就拉后端
   }
 
   // 清空输入框数据-finish
   function clearData() {
     // getSceneLabelList(currentPage.value, currentPageSize.value);
-    getData({ page: currentPage.value, size: currentPageSize.value });
+    getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
   }
 
   // 页数-finish
   function handleSizeChangeFun(val: number) {
     currentPageSize.value = val;
-    getData({ page: currentPage.value, size: currentPageSize.value });
+    getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
   }
 
   // 翻页-finish
   function handlePageChangeFun(val: number) {
     currentPage.value = val;
     console.log('currentPage:' + currentPage.value);
-    getData({ page: currentPage.value, size: currentPageSize.value });
+    getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
   }
 
   onMounted(() => {
     // getData(props.currentPage, props.currentPageSize);
-    getData({ page: currentPage.value, size: currentPageSize.value });
+    getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
   });
 </script>
 

src/views/templateManage/DrawerCommon.vue

@@ -73,8 +73,8 @@
 
       <el-form-item label="状态" label-position="right">
         <el-radio-group v-model="status" aria-label="label position">
-          <el-radio-button :value="1">启用</el-radio-button>
-          <el-radio-button :value="0">禁用</el-radio-button>
+          <el-radio-button :value="0">启用</el-radio-button>
+          <el-radio-button :value="1">禁用</el-radio-button>
         </el-radio-group>
       </el-form-item>
 
@@ -87,47 +87,50 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, watch, computed } from 'vue';
+  import { ref, computed } from 'vue';
   import { FormInstance, ElMessage } from 'element-plus';
   import { onMounted } from 'vue';
-  import { cloneDeep, isEqual } from 'lodash-es';
+  // import { cloneDeep, isEqual } from 'lodash-es';
   import type { UploadRawFile, UploadFile } from 'element-plus';
   import { Plus } from '@element-plus/icons-vue';
   import { getHeaders } from '@/utils/http/axios';
   import { useGlobSetting } from '@/hooks/setting';
   import urlJoin from 'url-join';
-  import { uid } from 'uid';
+  import { SceneModule } from '@/api/template/template';
+  // import { uid } from 'uid';
 
   export interface FormModelCommon {
     id?: number;
     code: string;
     name: string;
     component: string;
-    image: string;
     remark: string;
-    thumbnail?: string;
+    thumbnail: string | null;
   }
   export type CreateType = 'create' | 'edit';
-  const props = defineProps<{ detail: FormModelCommon; type: string }>();
-  const emit = defineEmits(['submitDrawer']);
-  // const form = ref<FormModelCommon>({
-  //   id: props.detail.id,
-  //   name: props.detail.name,
-  //   code: props.detail.code,
-  //   remark: props.detail.remark,
-  //   status: props.detail.status,
-  // });
+  const props = defineProps<{
+    type: string;
+    drawerType: string;
+    addItem: (data: SceneModule) => unknown;
+  }>();
 
   const form = ref<FormModelCommon>({
-    id: undefined,
     name: '',
     code: '',
     component: '',
-    image: '',
     remark: '',
+    thumbnail: null,
   });
 
-  const status = ref(1); //el-radio不能绑对象，因此把他独立出来
+  const dataUpload = ref<SceneModule>({
+    code: '',
+    name: '',
+    previewImage: null,
+    remark: '',
+    isDisabled: 0,
+  });
+
+  const status = ref(0); //el-radio不能绑对象，因此把他独立出来
 
   const { urlPrefix } = useGlobSetting();
 
@@ -161,23 +164,6 @@
     return true;
   };
 
-  const getValue = () => {
-    const dataForm = cloneDeep(props.detail);
-    form.value.id = dataForm.id;
-    form.value.name = dataForm.name;
-    form.value.code = dataForm.code;
-    form.value.remark = dataForm.remark;
-    form.value.status = dataForm.status;
-  };
-
-  watch(
-    () => props.detail,
-    () => {
-      getValue();
-    },
-    { immediate: true },
-  );
-
   const ruleDrawerRef = ref<FormInstance>();
 
   function resetForm(formE1: FormInstance | undefined) {
@@ -186,33 +172,30 @@
     form.value.name = '';
     form.value.code = '';
     form.value.remark = '';
-    form.value.status = 0;
-    console.log('resetForm');
+    status.value = 0;
+    form.value.thumbnail = null;
+    // console.log('resetForm');
   }
 
   function submitDrawer(formEl: FormInstance | undefined) {
-    console.log('common-', form, props.detail.code);
     if (!formEl) return;
     formEl.validate((valid, fields) => {
       if (valid) {
-        const drawerData = {
-          id: form.value.id,
-          name: form.value.name,
-          code: form.value.code === '' ? uid(16) : form.value.code,
-          remark: form.value.remark,
-          status: form.value.status,
-        };
-        emit('submitDrawer', drawerData);
+        if (props.drawerType === 'add') {
+          dataUpload.value.code = form.value.code;
+          dataUpload.value.name = form.value.name;
+          dataUpload.value.previewImage = form.value.thumbnail;
+          dataUpload.value.remark = form.value.remark;
+          dataUpload.value.isDisabled = status.value;
+          props.addItem(dataUpload.value);
+        }
       } else {
         console.log('error submit!', fields);
       }
     });
   }
 
-  onMounted(() => {
-    console.log('drawercommon-form', form);
-    console.log('drawercommon-props', props.detail);
-  });
+  onMounted(() => {});
 </script>
 
 <style scoped>

src/views/templateManage/SceneManager.vue

@@ -73,8 +73,8 @@
   // }
 
   // 查找数据列表-finish
-  function getSceneLabelListFun(data) {
-    return getSceneModuleList(data.page, data.size)
+  function getSceneLabelListFun(data: { pageNumber: number; pageSize: number }) {
+    return getSceneModuleList({ pageNumber: data.pageNumber, pageSize: data.pageSize })
       .then((res) => {
         return res;
       })