fix: 模板管理状态bug

src/api/template/template.ts

@@ -1,189 +1,193 @@
 import { http } from '@/utils/http/axios';
 
 export interface SceneModule {
-    code: string,
-    // createdAt: string,
-    id: number,
-    // isDeleted: number,
-    name: string,
-    remark: string,
-    status: number,
-    // updatedAt: string,
+  code: string;
+  // createdAt: string,
+  id: number;
+  // isDeleted: number,
+  name: string;
+  remark: string;
+  status: number;
+  // updatedAt: string,
 }
 
 export interface SceneLabel {
-    code: string,
-    // createdAt: string,
-    id: number,
-    // isDeleted: number,
-    name: string,
-    remark: string,
-    status: number,
-    // updatedAt: string,
+  code: string;
+  // createdAt: string,
+  id: number;
+  // isDeleted: number,
+  name: string;
+  remark: string;
+  status: number;
+  // updatedAt: string,
 }
 
 export interface WorkshopModule {
-    code: string,
-    // createdAt: string,
-    id: number,
-    // isDeleted: number,
-    name: string,
-    remark: string,
-    status: number,
-    // updatedAt: string,
+  code: string;
+  // createdAt: string,
+  id: number;
+  // isDeleted: number,
+  name: string;
+  remark: string;
+  status: number;
+  // updatedAt: string,
 }
 
 export interface Records {
-    code: string,
-    createdAt: string,
-    id: number,
-    isDeleted: number,
-    name: string,
-    remark: string,
-    status: number,
-    updatedAt: string,
+  code: string;
+  createdAt: string;
+  id: number;
+  isDeleted: number;
+  name: string;
+  remark: string;
+  status: number;
+  updatedAt: string;
 }
 
 export interface Response<Records> {
-    pageNumber: number,
-    pageSize: number,
-    records: Records[],
-    totalPage: number,
-    totalRow: number,
+  pageNumber: number;
+  pageSize: number;
+  records: Records[];
+  totalPage: number;
+  totalRow: number;
 }
 
-
 // 查询所有场景模板
 export function getSceneModuleList(pageNumber: number, pageSize: number) {
-    return http.request<Response<Records>>({
-        url: '/template/findSceneModule',
-        method: 'get',
-        params: { pageNumber: pageNumber, pageSize: pageSize },
-    });
+  return http.request<Response<Records>>({
+    url: '/template/findSceneModule',
+    method: 'get',
+    params: { pageNumber: pageNumber, pageSize: pageSize },
+  });
 }
 
 // 根据场景名称查询场景模板
-export function findSceneModuleByName(sceneModuleName: string, pageNumber: number, pageSize: number) {
-    return http.request<Response<Records>>({
-        url: '/template/findSceneModule',
-        method: 'get',
-        params: { pageNumber: pageNumber, pageSize: pageSize, sceneModuleName: sceneModuleName, },
-    });
+export function findSceneModuleByName(
+  sceneModuleName: string,
+  pageNumber: number,
+  pageSize: number,
+) {
+  return http.request<Response<Records>>({
+    url: '/template/findSceneModule',
+    method: 'get',
+    params: { pageNumber: pageNumber, pageSize: pageSize, sceneModuleName: sceneModuleName },
+  });
 }
 
-
 // 查询所有场景标签模板
 export function getSceneLabelList(pageNumber: number, pageSize: number) {
-    return http.request<Response<Records>>({
-        url: '/template/findSceneLabel',
-        method: 'get',
-        params: { pageNumber: pageNumber, pageSize: pageSize },
-    });
+  return http.request<Response<Records>>({
+    url: '/template/findSceneLabel',
+    method: 'get',
+    params: { pageNumber: pageNumber, pageSize: pageSize },
+  });
 }
 
 // 根据场景标签名称查询场景标签模板
 export function findSceneLabelByName(sceneLabelName: string, pageNumber: number, pageSize: number) {
-    return http.request<Response<Records>>({
-        url: '/template/findSceneLabel',
-        method: 'get',
-        params: { sceneLabelName: sceneLabelName, pageNumber: pageNumber, pageSize: pageSize },
-    });
+  return http.request<Response<Records>>({
+    url: '/template/findSceneLabel',
+    method: 'get',
+    params: { sceneLabelName: sceneLabelName, pageNumber: pageNumber, pageSize: pageSize },
+  });
 }
 
 // 查询所有车间模板
 export function getWorkshopModuleList(pageNumber: number, pageSize: number) {
-    return http.request<Response<Records>>({
-        url: '/template/findWorkshopModule',
-        method: 'get',
-        params: { pageNumber: pageNumber, pageSize: pageSize },
-    });
+  return http.request<Response<Records>>({
+    url: '/template/findWorkshopModule',
+    method: 'get',
+    params: { pageNumber: pageNumber, pageSize: pageSize },
+  });
 }
 
 // 根据车间名称查询车间模板
-export function findWorkshopModuleByName(workshopModuleName: string, pageNumber: number, pageSize: number) {
-    return http.request<Response<Records>>({
-        url: '/template/findWorkshopModule',
-        method: 'get',
-        params: { workshopModuleName: workshopModuleName, pageNumber: pageNumber, pageSize: pageSize },
-    });
+export function findWorkshopModuleByName(
+  workshopModuleName: string,
+  pageNumber: number,
+  pageSize: number,
+) {
+  return http.request<Response<Records>>({
+    url: '/template/findWorkshopModule',
+    method: 'get',
+    params: { workshopModuleName: workshopModuleName, pageNumber: pageNumber, pageSize: pageSize },
+  });
 }
 
 // 添加场景模板
 export function saveSceneModule(sceneModule: SceneModule) {
-    return http.request({
-        url: '/template/saveSceneModule',
-        method: 'post',
-        params: sceneModule,
-    });
+  return http.request({
+    url: '/template/saveSceneModule',
+    method: 'post',
+    params: sceneModule,
+  });
 }
 
 // 添加场景标签模板
 export function saveSceneLabel(sceneLabel: SceneLabel) {
-    return http.request({
-        url: '/template/saveSceneLabel',
-        method: 'post',
-        params: sceneLabel,
-    });
+  return http.request({
+    url: '/template/saveSceneLabel',
+    method: 'post',
+    params: sceneLabel,
+  });
 }
 
 // 添加车间模板
 export function saveWorkshopModule(workshopModule: WorkshopModule) {
-    return http.request({
-        url: '/template/saveWorkshopModule',
-        method: 'post',
-        params: workshopModule,
-    });
+  return http.request({
+    url: '/template/saveWorkshopModule',
+    method: 'post',
+    params: workshopModule,
+  });
 }
 
 // 删除场景模板
 export function deleteSceneModule(sceneModuleId: number) {
-    return http.request({
-        url: `/template/deleteSceneModule?sceneModuleId=${sceneModuleId}`,
-        method: 'delete',
-    });
+  return http.request({
+    url: `/template/deleteSceneModule?sceneModuleId=${sceneModuleId}`,
+    method: 'delete',
+  });
 }
 
 // 删除场景标签
 export function deleteSceneLabel(sceneLabelId: number) {
-    return http.request({
-        url: `/template/deleteSceneLabel?sceneLabelId=${sceneLabelId}`,
-        method: 'delete',
-
-    });
+  return http.request({
+    url: `/template/deleteSceneLabel?sceneLabelId=${sceneLabelId}`,
+    method: 'delete',
+  });
 }
 
 // 删除车间模板
 export function deleteWorkshopModule(workshopModuleId: number) {
-    return http.request({
-        url: `/template/deleteWorkshopModule?workshopModuleId=${workshopModuleId}`,
-        method: 'delete',
-
-    });
+  return http.request({
+    url: `/template/deleteWorkshopModule?workshopModuleId=${workshopModuleId}`,
+    method: 'delete',
+  });
 }
 
 // 编辑场景模板
 export function updateSceneModule(sceneModule: SceneModule) {
-    return http.request({
-        url: '/template/updateSceneModule',
-        method: 'put',
-        params: sceneModule,
-    });
+  return http.request({
+    url: '/template/updateSceneModule',
+    method: 'put',
+    params: sceneModule,
+  });
 }
 
 // 编辑场景标签
 export function updateSceneLabel(sceneLabel: SceneLabel) {
-    return http.request({
-        url: '/template/updateSceneLabel',
-        method: 'put',
-        params: sceneLabel,
-    });
+  return http.request({
+    url: '/template/updateSceneLabel',
+    method: 'put',
+    params: sceneLabel,
+  });
 }
 
 // 编辑车间模板
 export function updateWorkshopModule(workshopModule: WorkshopModule) {
-    return http.request({
-        url: '/template/updateWorkshopModule',
-        method: 'put',
-        params: workshopModule,
-    });
-}
+  return http.request({
+    url: '/template/updateWorkshopModule',
+    method: 'put',
+    params: workshopModule,
+  });
+}

src/views/system-config/template/CardCommon.vue

@@ -1,21 +1,28 @@
 <template>
   <div>
-
-
-    <TitleCommon v-model="cardaddDrawer" :type="props.type" :pagesize="currentPageSize" :pagenumber="currentPage"
-      :drawer="cardaddDrawer" @find-data-by-name="searchDataByName" @submit-drawer="addData" @add-form="clickAddData"
-      @handle-close="closeDrawer" @clear-data="clearData">
+    <TitleCommon
+      v-model="cardaddDrawer"
+      :type="props.type"
+      :pagesize="currentPageSize"
+      :pagenumber="currentPage"
+      :drawer="cardaddDrawer"
+      @find-data-by-name="searchDataByName"
+      @submit-drawer="addData"
+      @add-form="clickAddData"
+      @handle-close="closeDrawer"
+      @clear-data="clearData"
+    >
     </TitleCommon>
 
-    <div style="margin-top: 20px;">
+    <div style="margin-top: 20px">
       <el-table style="width: 100%" :data="tableData" highlight-current-row>
         <el-table-column :label="props.type + `名称`" prop="name" />
         <el-table-column :label="props.type + `代码`" prop="code" />
 
         <el-table-column prop="status" label="状态">
           <template #default="scope">
-            <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
-            <el-tag v-else type="danger">异常</el-tag>
+            <el-tag v-if="scope.row.status === 0" type="success">启用</el-tag>
+            <el-tag v-else type="danger">禁用</el-tag>
           </template>
         </el-table-column>
 
@@ -23,190 +30,197 @@
         <el-table-column label="创建时间" prop="createdAt" />
         <el-table-column label="操作">
           <template #default="scoped">
-            <img :src="del" alt="" @click="deleteTableData(scoped.row)" style="height: 30px;width: 30px; padding: 5px">
-            <img :src="edit" alt="" @click="showEditDrawer(scoped.row)" style="height: 30px;width: 30px; padding: 5px">
-
+            <img
+              :src="del"
+              alt=""
+              @click="deleteTableData(scoped.row)"
+              style="height: 30px; width: 30px; padding: 5px"
+            />
+            <img
+              :src="edit"
+              alt=""
+              @click="showEditDrawer(scoped.row)"
+              style="height: 30px; width: 30px; padding: 5px"
+            />
           </template>
         </el-table-column>
       </el-table>
 
       <div>
-        <el-pagination v-model:currentPage="currentPage" v-model:currentPageSize="currentPageSize"
-          :page-sizes="[10, 20, 50, 100, 200]" layout="->,total,sizes,prev,pager,next,jumper" :total="total"
-          @size-change="handleSizeChangeFun" @current-change="handlePageChangeFun" />
+        <el-pagination
+          v-model:currentPage="currentPage"
+          v-model:currentPageSize="currentPageSize"
+          :page-sizes="[10, 20, 50, 100, 200]"
+          layout="->,total,sizes,prev,pager,next,jumper"
+          :total="total"
+          @size-change="handleSizeChangeFun"
+          @current-change="handlePageChangeFun"
+        />
       </div>
-
     </div>
 
-    <el-drawer v-model="cardeditDrawer" direction="rtl" :title="currentType" :before-close="handleClose">
-      <DrawerCommonVue :detail="currentdrawerFormData" v-if="currentdrawerFormData" @submit-drawer="submitDrawer" />
+    <el-drawer
+      v-model="cardeditDrawer"
+      direction="rtl"
+      :title="currentType"
+      :before-close="handleClose"
+    >
+      <DrawerCommonVue
+        :detail="currentdrawerFormData"
+        v-if="currentdrawerFormData"
+        @submit-drawer="submitDrawer"
+      />
     </el-drawer>
-
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { ElDrawer, ElMessageBox, } from 'element-plus';
-import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
-import TitleCommon, { DataCommon } from './TitleCommon.vue';
-import { Records, SceneModule } from '@/api/template/template';
-import del from '@/assets/icons/del.png';
-import edit from '@/assets/icons/edit.png';
-
-// const currentFormType = ref('场景');
-
-export type CreateType = '添加模板' | '修改模板';
-export interface TableModel {
-  id: number;
-  name: string;
-  code: string;
-  status: number;
-  remark: string;
-  createAt: string;
-}
-
-export interface ModelCommon {
-  drawerFormData: FormModelCommon | null
-}
-
-export interface Page {
-  page: number,
-  size: number,
-}
-
-const currentType = ref<CreateType>('添加模板');
-const currentdrawerFormData = ref<FormModelCommon>({} as FormModelCommon);
-const cardeditDrawer = ref(false);
-const cardaddDrawer = ref(false);
-const currentPage = ref(1);
-const currentPageSize = ref(10);
-const total = ref(100);
-const tableData = ref<Records[]>([]);
-
-
-
-
-const props = defineProps<{
-  type: string,
-  addData: (d: SceneModule) => Promise<unknown>,
-  searchDataByName: (d: DataCommon) => Promise<unknown>
-  deleteTableData: (d: TableModel) => Promise<unknown>,
-  submitDrawer: (d: SceneModule) => Promise<unknown>,
-  getData: (d: Page) => Promise<unknown>,
-}>();
-
-
-// 删除数据-finish
-function deleteTableData(row: TableModel) {
-  // emit('deleteTableData', row);
-  props.deleteTableData(row).then(res => {
-    console.log('deleteTableData', res);
-    getData({ page: currentPage.value, size: currentPageSize.value });
-  })
-}
-
-// 编辑数据弹框-finish
-function showEditDrawer(row: TableModel) {
-  cardeditDrawer.value = true;
-  console.log('row', row)
-  currentdrawerFormData.value = row;
-}
-
-// 弹框关闭事件-finish
-const handleClose = (done: () => void) => {
-  ElMessageBox.confirm('是否确认关闭?')
-    .then(() => {
-      done();
+  import { onMounted, ref } from 'vue';
+  import { ElDrawer, ElMessageBox } from 'element-plus';
+  import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
+  import TitleCommon, { DataCommon } from './TitleCommon.vue';
+  import { Records, SceneModule } from '@/api/template/template';
+  import del from '@/assets/icons/del.png';
+  import edit from '@/assets/icons/edit.png';
+
+  // const currentFormType = ref('场景');
+
+  export type CreateType = '添加模板' | '修改模板';
+  export interface TableModel {
+    id: number;
+    name: string;
+    code: string;
+    status: number;
+    remark: string;
+    createAt: string;
+  }
+
+  export interface ModelCommon {
+    drawerFormData: FormModelCommon | null;
+  }
+
+  export interface Page {
+    page: number;
+    size: number;
+  }
+
+  const currentType = ref<CreateType>('添加模板');
+  const currentdrawerFormData = ref<FormModelCommon>({} as FormModelCommon);
+  const cardeditDrawer = ref(false);
+  const cardaddDrawer = ref(false);
+  const currentPage = ref(1);
+  const currentPageSize = ref(10);
+  const total = ref(100);
+  const tableData = ref<Records[]>([]);
+
+  const props = defineProps<{
+    type: string;
+    addData: (d: SceneModule) => Promise<unknown>;
+    searchDataByName: (d: DataCommon) => Promise<unknown>;
+    deleteTableData: (d: TableModel) => Promise<unknown>;
+    submitDrawer: (d: SceneModule) => Promise<unknown>;
+    getData: (d: Page) => Promise<unknown>;
+  }>();
+
+  // 删除数据-finish
+  function deleteTableData(row: TableModel) {
+    // emit('deleteTableData', row);
+    props.deleteTableData(row).then((res) => {
+      console.log('deleteTableData', res);
+      getData({ page: currentPage.value, size: currentPageSize.value });
+    });
+  }
+
+  // 编辑数据弹框-finish
+  function showEditDrawer(row: TableModel) {
+    cardeditDrawer.value = true;
+    console.log('row', row);
+    currentdrawerFormData.value = row;
+  }
+
+  // 弹框关闭事件-finish
+  const handleClose = (done: () => void) => {
+    ElMessageBox.confirm('是否确认关闭?')
+      .then(() => {
+        done();
+        closeDrawer();
+      })
+      .catch(() => {
+        // catch error
+      });
+  };
+
+  // 编辑提交数据
+  function submitDrawer(data: SceneModule) {
+    console.log('编辑提交数据：', data);
+    props.submitDrawer(data).then((res) => {
+      console.log('submitDrawer', res);
       closeDrawer();
-
-    })
-    .catch(() => {
-      // catch error
+      getData({ page: currentPage.value, size: currentPageSize.value });
     });
+  }
+
+  // 查询数据列表-finish
+  function getData(data: Page) {
+    props.getData(data).then((res) => {
+      console.log('getData', res);
+      tableData.value = res.records;
+      total.value = res.totalRow;
+    });
+  }
 
-};
-
-
-// 编辑提交数据
-function submitDrawer(data: SceneModule) {
-  console.log('编辑提交数据：', data)
-  props.submitDrawer(data).then(res => {
-    console.log('submitDrawer', res)
-    closeDrawer();
-    getData({ page: currentPage.value, size: currentPageSize.value });
-  })
-}
-
-
-
-// 查询数据列表-finish
-function getData(data: Page) {
-  props.getData(data).then(res => {
-    console.log('getData', res)
-    tableData.value = res.records;
-    total.value = res.totalRow;
-  });
-
-}
-
-// 根据名称找到数据-finish
-function searchDataByName(data: DataCommon) {
-  props.searchDataByName(data).then(res => {
-    console.log('searchDataByName', res);
-    tableData.value = res.records;
-  })
-}
-
-// 单机添加按钮，控制弹框显示-finish
-function clickAddData() {
-  cardaddDrawer.value = true;
+  // 根据名称找到数据-finish
+  function searchDataByName(data: DataCommon) {
+    props.searchDataByName(data).then((res) => {
+      console.log('searchDataByName', res);
+      tableData.value = res.records;
+    });
+  }
 
-}
+  // 单机添加按钮，控制弹框显示-finish
+  function clickAddData() {
+    cardaddDrawer.value = true;
+  }
 
-// 添加数据-finish
-function addData(data: SceneModule) {
+  // 添加数据-finish
+  function addData(data: SceneModule) {
+    props.addData(data).then((res) => {
+      console.log('addData', res);
+      closeDrawer();
 
-  props.addData(data).then(res => {
-    console.log('addData', res);
-    closeDrawer();
+      getData({ page: currentPage.value, size: currentPageSize.value });
+    });
+  }
 
+  function closeDrawer() {
+    cardaddDrawer.value = false;
+    cardeditDrawer.value = false;
     getData({ page: currentPage.value, size: currentPageSize.value });
-  })
-
-}
-
-function closeDrawer() {
-  cardaddDrawer.value = false;
-  cardeditDrawer.value = false;
-  getData({ page: currentPage.value, size: currentPageSize.value });
-}
+  }
 
-// 清空输入框数据-finish
-function clearData() {
-  // getSceneLabelList(currentPage.value, currentPageSize.value);
-  getData({ page: currentPage.value, size: currentPageSize.value });
-}
-
-// 页数-finish
-function handleSizeChangeFun(val: number) {
-  currentPageSize.value = val;
-  getData({ page: currentPage.value, size: currentPageSize.value });
-}
-
-// 翻页-finish
-function handlePageChangeFun(val: number) {
-  currentPage.value = val;
-  console.log('currentPage:' + currentPage.value);
-  getData({ page: currentPage.value, size: currentPageSize.value });
-}
+  // 清空输入框数据-finish
+  function clearData() {
+    // getSceneLabelList(currentPage.value, currentPageSize.value);
+    getData({ page: currentPage.value, size: currentPageSize.value });
+  }
 
+  // 页数-finish
+  function handleSizeChangeFun(val: number) {
+    currentPageSize.value = val;
+    getData({ page: currentPage.value, size: currentPageSize.value });
+  }
 
-onMounted(() => {
-  // getData(props.currentPage, props.currentPageSize);
-  getData({ page: currentPage.value, size: currentPageSize.value });
+  // 翻页-finish
+  function handlePageChangeFun(val: number) {
+    currentPage.value = val;
+    console.log('currentPage:' + currentPage.value);
+    getData({ page: currentPage.value, size: currentPageSize.value });
+  }
 
-});
+  onMounted(() => {
+    // getData(props.currentPage, props.currentPageSize);
+    getData({ page: currentPage.value, size: currentPageSize.value });
+  });
 </script>
 
 <style scoped></style>

src/views/system-config/template/DrawerCommon.vue

@@ -1,23 +1,31 @@
 <template>
   <div>
     <el-form ref="ruleDrawerRef" :model="form" label-width="100px">
-      <el-form-item label="模板名称" prop="name" :rules="[
-        {
-          required: true,
-          message: '输入模板名称',
-          trigger: 'blur',
-        },
-      ]">
+      <el-form-item
+        label="模板名称"
+        prop="name"
+        :rules="[
+          {
+            required: true,
+            message: '输入模板名称',
+            trigger: 'blur',
+          },
+        ]"
+      >
         <el-input placeholder="请输入模板名称" v-model="form.name" />
       </el-form-item>
 
-      <el-form-item label="模板代码" prop="code" :rules="[
-        {
-          required: true,
-          message: '输入模板代码',
-          trigger: 'blur',
-        },
-      ]">
+      <el-form-item
+        label="模板代码"
+        prop="code"
+        :rules="[
+          {
+            required: true,
+            message: '输入模板代码',
+            trigger: 'blur',
+          },
+        ]"
+      >
         <el-input placeholder="请输入模板代码" v-model="form.code" />
       </el-form-item>
 
@@ -32,82 +40,81 @@
       </el-form-item>
 
       <el-form-item label="状态" prop="status">
-        <el-switch v-model="form.status" active-value=1 inactive-value=0 />
+        <el-switch v-model="form.status" :active-value="0" :inactive-value="1" />
       </el-form-item>
 
       <div style="margin-top: 100px; margin-left: 250px">
         <el-button style="margin-left: 50px" @click="resetForm(ruleDrawerRef)">重置</el-button>
-        <el-button style="margin-left: 50px" @click="submitDrawer(ruleDrawerRef)" type="primary">提交</el-button>
+        <el-button style="margin-left: 50px" @click="submitDrawer(ruleDrawerRef)" type="primary"
+          >提交</el-button
+        >
       </div>
     </el-form>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { FormInstance } from 'element-plus';
-import { onMounted } from 'vue';
-
-
-export interface FormModelCommon {
-  id: number;
-  code: string;
-  name: string;
-  status: number;
-  remark: string;
-}
-export type CreateType = 'create' | 'edit';
-const props = defineProps<{ detail: FormModelCommon }>();
-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,
-});
-
-watch(
-  () => props.detail,
-  (newdetail) => {
-    form.value = newdetail;
-  },
-  { immediate: true },
-);
-
-const ruleDrawerRef = ref<FormInstance>();
-
-function resetForm(formE1: FormInstance | undefined) {
-  if (!formE1) return;
-  formE1.resetFields();
-  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,
-        remark: form.value.remark,
-        status: form.value.status,
-      };
-      emit('submitDrawer', drawerData);
-
-    } else {
-      console.log('error submit!', fields);
-    }
+  import { ref, watch } from 'vue';
+  import { FormInstance } from 'element-plus';
+  import { onMounted } from 'vue';
+
+  export interface FormModelCommon {
+    id: number;
+    code: string;
+    name: string;
+    status: number;
+    remark: string;
+  }
+  export type CreateType = 'create' | 'edit';
+  const props = defineProps<{ detail: FormModelCommon }>();
+  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,
   });
-}
 
-onMounted(() => {
-  console.log('drawercommon-form', form);
-  console.log('drawercommon-props', props.detail);
-});
+  watch(
+    () => props.detail,
+    (newdetail) => {
+      form.value = newdetail;
+    },
+    { immediate: true },
+  );
+
+  const ruleDrawerRef = ref<FormInstance>();
+
+  function resetForm(formE1: FormInstance | undefined) {
+    if (!formE1) return;
+    formE1.resetFields();
+    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,
+          remark: form.value.remark,
+          status: form.value.status,
+        };
+        emit('submitDrawer', drawerData);
+      } else {
+        console.log('error submit!', fields);
+      }
+    });
+  }
+
+  onMounted(() => {
+    console.log('drawercommon-form', form);
+    console.log('drawercommon-props', props.detail);
+  });
 </script>
 
 <style scoped></style>

src/views/system-config/template/SceneManager.vue

@@ -1,121 +1,133 @@
 <template>
-    <div>
-
-        <CardCommon :type='type' :search-data-by-name="findSceneModuleFun" :get-data="getSceneLabelListFun"
-            :delete-table-data="deleteSceneModuleFun" :submit-drawer="updateSceneModuleFun" :add-data="saveSceneModuleFun">
-        </CardCommon>
-
-    </div>
+  <div>
+    <CardCommon
+      :type="type"
+      :search-data-by-name="findSceneModuleFun"
+      :get-data="getSceneLabelListFun"
+      :delete-table-data="deleteSceneModuleFun"
+      :submit-drawer="updateSceneModuleFun"
+      :add-data="saveSceneModuleFun"
+    >
+    </CardCommon>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { updateSceneModule, getSceneModuleList, deleteSceneModule, findSceneModuleByName, saveSceneModule, SceneModule } from '@/api/template/template';
-import { ElMessage, ElMessageBox } from 'element-plus';
-import CardCommon, { TableModel } from './CardCommon.vue'
-import { DataCommon } from './TitleCommon.vue';
-import { ref } from 'vue';
-const type = ref('模板');
-
-
-// 添加数据
-function saveSceneModuleFun(data: SceneModule) {
-    return saveSceneModule(data).then(res => {
+  import {
+    updateSceneModule,
+    getSceneModuleList,
+    deleteSceneModule,
+    findSceneModuleByName,
+    saveSceneModule,
+    SceneModule,
+  } from '@/api/template/template';
+  import { ElMessage, ElMessageBox } from 'element-plus';
+  import CardCommon, { TableModel } from './CardCommon.vue';
+  import { DataCommon } from './TitleCommon.vue';
+  import { ref } from 'vue';
+  const type = ref('模板');
+
+  // 添加数据
+  function saveSceneModuleFun(data: SceneModule) {
+    return saveSceneModule(data)
+      .then((res) => {
         console.log(res);
         return res;
-
-    }).catch(error => {
+      })
+      .catch((error) => {
         ElMessageBox.alert(error, '异常', {
-            confirmButtonText: 'OK',
-            callback: () => {
-                ElMessage({
-                    type: 'info',
-                    message: `添加数据失败`,
-                })
-            },
-        })
-    });
-};
-
-// 根据名称查找
-function findSceneModuleFun(data: DataCommon) {
+          confirmButtonText: 'OK',
+          callback: () => {
+            ElMessage({
+              type: 'info',
+              message: `添加数据失败`,
+            });
+          },
+        });
+      });
+  }
+
+  // 根据名称查找
+  function findSceneModuleFun(data: DataCommon) {
     console.log('findSceneModuleByName', data.name, data.page, data.size);
-    return findSceneModuleByName(data.name, data.page, data.size).then((res) => {
-        console.log(res)
+    return findSceneModuleByName(data.name, data.page, data.size)
+      .then((res) => {
+        console.log(res);
         return res;
-    }).catch(error => {
+      })
+      .catch((error) => {
         ElMessageBox.alert(error, '异常', {
-            confirmButtonText: 'OK',
-            callback: () => {
-                ElMessage({
-                    type: 'info',
-                    message: `查询数据失败`,
-                })
-            },
-        })
-    });
-}
-
-// 查找数据列表-finish
-function getSceneLabelListFun(data) {
-    return getSceneModuleList(data.page, data.size).then((res) => {
-        return res
-    }).catch(error => {
+          confirmButtonText: 'OK',
+          callback: () => {
+            ElMessage({
+              type: 'info',
+              message: `查询数据失败`,
+            });
+          },
+        });
+      });
+  }
+
+  // 查找数据列表-finish
+  function getSceneLabelListFun(data) {
+    return getSceneModuleList(data.page, data.size)
+      .then((res) => {
+        return res;
+      })
+      .catch((error) => {
         ElMessageBox.alert(error.message, '异常', {
-            confirmButtonText: 'OK',
-            callback: () => {
-                ElMessage({
-                    type: 'info',
-                    message: `查询数据失败`,
-                })
-            },
-        })
-    });
-}
-
-// 删除数据
-function deleteSceneModuleFun(data: TableModel) {
+          confirmButtonText: 'OK',
+          callback: () => {
+            ElMessage({
+              type: 'info',
+              message: `查询数据失败`,
+            });
+          },
+        });
+      });
+  }
+
+  // 删除数据
+  function deleteSceneModuleFun(data: TableModel) {
     console.log('detele', data);
-    return deleteSceneModule(data.id).then(res => {
+    return deleteSceneModule(data.id)
+      .then((res) => {
         console.log(res);
         return res;
-
-    }).catch(error => {
+      })
+      .catch((error) => {
         ElMessageBox.alert(error, '异常', {
-            confirmButtonText: 'OK',
-            callback: () => {
-                ElMessage({
-                    type: 'info',
-                    message: `删除数据失败`,
-                })
-            },
-        })
-    });
-}
-
-// 编辑数据
-function updateSceneModuleFun(data: SceneModule) {
+          confirmButtonText: 'OK',
+          callback: () => {
+            ElMessage({
+              type: 'info',
+              message: `删除数据失败`,
+            });
+          },
+        });
+      });
+  }
+
+  // 编辑数据
+  function updateSceneModuleFun(data: SceneModule) {
     console.log('edit', data);
-    return updateSceneModule(data).then(res => {
+    return updateSceneModule(data)
+      .then((res) => {
         console.log(res);
         return res;
-
-    }).catch(error => {
+      })
+      .catch((error) => {
         ElMessageBox.alert(error, '异常', {
-            confirmButtonText: 'OK',
-            callback: () => {
-                ElMessage({
-                    type: 'info',
-                    message: `编辑数据失败`,
-                })
-            },
-        })
-    });
-}
-
-
-
-
-
+          confirmButtonText: 'OK',
+          callback: () => {
+            ElMessage({
+              type: 'info',
+              message: `编辑数据失败`,
+            });
+          },
+        });
+      });
+  }
 </script>
 
-<style scoped></style>
+<style scoped></style>

src/views/system-config/template/TemplateManager.vue

@@ -17,48 +17,46 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import type { TabsPaneContext } from 'element-plus';
-import LabelManagerVue from './LabelManager.vue';
-import WorkspaceManagerVue from './WorkspaceManager.vue';
-import SceneManagerVue from './SceneManager.vue';
-
-const activeName = ref('scene');
-export type LabelType = 'scene' | 'label' | 'workspace';
-const currentLabel = ref<LabelType>('scene');
-
-const handleClick = (tab: TabsPaneContext) => {
-  console.log(tab.paneName);
-  if (tab.paneName === 'scene') {
-    currentLabel.value = 'scene';
-  } else {
-    if (tab.paneName === 'label') {
-      currentLabel.value = 'label';
+  import { ref } from 'vue';
+  import type { TabsPaneContext } from 'element-plus';
+  import LabelManagerVue from './LabelManager.vue';
+  import WorkspaceManagerVue from './WorkspaceManager.vue';
+  import SceneManagerVue from './SceneManager.vue';
+
+  const activeName = ref('scene');
+  export type LabelType = 'scene' | 'label' | 'workspace';
+  const currentLabel = ref<LabelType>('scene');
+
+  const handleClick = (tab: TabsPaneContext) => {
+    console.log(tab.paneName);
+    if (tab.paneName === 'scene') {
+      currentLabel.value = 'scene';
     } else {
-      currentLabel.value = 'workspace';
+      if (tab.paneName === 'label') {
+        currentLabel.value = 'label';
+      } else {
+        currentLabel.value = 'workspace';
+      }
     }
-  }
-};
+  };
 </script>
 
 <style>
+  .demo-tabs > .el-tabs__content {
+    padding: 32px;
+    color: #6b778c;
+    font-size: 32px;
+    font-weight: 600;
+  }
 
+  .el-tabs__item:hover {
+    /* color: rgb(53, 120, 220); */
+    background-color: rgb(53, 120, 220);
+  }
 
-.demo-tabs>.el-tabs__content {
-  padding: 32px;
-  color: #6b778c;
-  font-size: 32px;
-  font-weight: 600;
-}
-
-.el-tabs__item:hover {
-  /* color: rgb(53, 120, 220); */
-  background-color: rgb(53, 120, 220);
-}
-
-.el-tabs__item.is-active {
-  /* color: rgb(221, 239, 255); */
-  background-color: rgb(221, 239, 255);
-  border:3px solid #4693f1 !important
-}
+  .el-tabs__item.is-active {
+    /* color: rgb(221, 239, 255); */
+    background-color: rgb(221, 239, 255);
+    border: 3px solid #4693f1 !important;
+  }
 </style>