Merge branch 'template-manager-xym' into 'master'

完成模板管理模块下场景管理、标签管理、车间模板的功能

See merge request tian-group/skyeye-admin-fe!9

mock/login/routers.ts

@@ -93,6 +93,20 @@ const list = [
           alwaysShow: false,
         },
       },
+      {
+        path: 'template',
+        name: 'template',
+        component: '/system-config/template/TemplateManager',
+        meta: {
+          title: '模板管理',
+          noCache: false,
+          hidden: false,
+          isFrame: '1',
+          status: '0',
+          isRoot: false,
+          alwaysShow: false,
+        },
+      },
     ],
   },
   {

src/api/template/template.ts

@@ -0,0 +1,189 @@
+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,
+}
+
+export interface SceneLabel {
+    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,
+}
+
+export interface Records {
+    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,
+}
+
+
+// 查询所有场景模板
+export function getSceneModuleList(pageNumber: number, pageSize: number) {
+    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 getSceneLabelList(pageNumber: number, pageSize: number) {
+    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 },
+    });
+}
+
+// 查询所有车间模板
+export function getWorkshopModuleList(pageNumber: number, pageSize: number) {
+    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 saveSceneModule(sceneModule: 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,
+    });
+}
+
+// 添加车间模板
+export function saveWorkshopModule(workshopModule: 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',
+    });
+}
+
+// 删除场景标签
+export function deleteSceneLabel(sceneLabelId: number) {
+    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',
+
+    });
+}
+
+// 编辑场景模板
+export function updateSceneModule(sceneModule: 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,
+    });
+}
+
+// 编辑车间模板
+export function updateWorkshopModule(workshopModule: WorkshopModule) {
+    return http.request({
+        url: '/template/updateWorkshopModule',
+        method: 'put',
+        params: workshopModule,
+    });
+}

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

@@ -0,0 +1,207 @@
+<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>
+
+    <div class="table" style="margin-top: 20px;">
+      <el-table style="width: 100%" :data="tableData" highlight-current-row>
+        <el-table-column :label="props.type + `名称`" width="250" prop="name" />
+        <el-table-column :label="props.type + `代码`" width="200" prop="code" />
+
+        <el-table-column prop="status" label="状态" width="150">
+          <template #default="scope">
+            <el-tag v-if="scope.row.status === 0" type="success">正常</el-tag>
+            <el-tag v-else type="danger">异常</el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="备注" width="200" prop="remark" />
+        <el-table-column label="创建时间" width="250" prop="createdAt" />
+        <el-table-column label="操作" width="200">
+          <template #default="scoped">
+            <el-button size="small" @click="deleteTableData(scoped.row)">删除</el-button>
+            <el-button size="small" @click="showEditDrawer(scoped.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <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"
+        style="margin-left: 600px; margin-top: 20px" />
+    </div>
+
+    <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';
+
+// 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();
+    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 addData(data: SceneModule) {
+
+  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 });
+}
+
+// 清空输入框数据-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 });
+}
+
+
+onMounted(() => {
+  // getData(props.currentPage, props.currentPageSize);
+  getData({ page: currentPage.value, size: currentPageSize.value });
+
+});
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <el-form ref="ruleDrawerRef" :model="form" label-width="100px">
+      <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-input placeholder="请输入模板代码" v-model="form.code" />
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input placeholder="请输入备注" v-model="form.remark" />
+      </el-form-item>
+
+      <el-form-item label="模板上传">
+        <el-upload>
+          <el-button disabled>上传</el-button>
+        </el-upload>
+      </el-form-item>
+
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="form.status" active-value=1 inactive-value=0 />
+      </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)">提交</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);
+    }
+  });
+}
+
+onMounted(() => {
+  console.log('drawercommon-form', form);
+  console.log('drawercommon-props', props.detail);
+});
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,121 @@
+<template>
+    <div>
+
+        <CardCommon :type='type' :search-data-by-name="findSceneLabelFun" :get-data="getSceneLabelListFun"
+            :delete-table-data="deleteSceneLabelFun" :submit-drawer="updateSceneLabelFun" :add-data="saveSceneLabelFun">
+        </CardCommon>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { updateSceneLabel, getSceneLabelList, deleteSceneLabel, findSceneLabelByName, saveSceneLabel, SceneLabel } 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 saveSceneLabelFun(data: SceneLabel) {
+    return saveSceneLabel(data).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `添加数据失败`,
+                })
+            },
+        })
+    });
+};
+
+// 根据名称查找
+function findSceneLabelFun(data: DataCommon) {
+    console.log('findSceneLabelByName', data.name, data.page, data.size);
+    return findSceneLabelByName(data.name, data.page, data.size).then((res) => {
+        console.log(res)
+        return res;
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `查询数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 查找数据列表-finish
+function getSceneLabelListFun(data) {
+    return getSceneLabelList(data.page, data.size).then((res) => {
+        return res
+    }).catch(error => {
+        ElMessageBox.alert(error.message, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `查询数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 删除数据
+function deleteSceneLabelFun(data: TableModel) {
+    console.log('detele', data);
+    return deleteSceneLabel(data.id).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `删除数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 编辑数据
+function updateSceneLabelFun(data: SceneLabel) {
+    console.log('edit', data);
+    return updateSceneLabel(data).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `编辑数据失败`,
+                })
+            },
+        })
+    });
+}
+
+
+
+
+
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,121 @@
+<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>
+</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 => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            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 res;
+    }).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 => {
+        ElMessageBox.alert(error.message, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `查询数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 删除数据
+function deleteSceneModuleFun(data: TableModel) {
+    console.log('detele', data);
+    return deleteSceneModule(data.id).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `删除数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 编辑数据
+function updateSceneModuleFun(data: SceneModule) {
+    console.log('edit', data);
+    return updateSceneModule(data).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `编辑数据失败`,
+                })
+            },
+        })
+    });
+}
+
+
+
+
+
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,50 @@
+<template>
+  <div style="width: 100%">
+    <div>
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="场景管理" name="scene">
+          <SceneManagerVue />
+        </el-tab-pane>
+        <el-tab-pane label="场景标签管理" name="label">
+          <LabelManagerVue />
+        </el-tab-pane>
+        <el-tab-pane label="车间模板" name="workspace">
+          <WorkspaceManagerVue />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+
+
+  </div>
+</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';
+    } else {
+      currentLabel.value = 'workspace';
+
+    }
+  }
+};
+</script>
+  
+<style scoped></style>
+  

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

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <el-form inline ref="ruleFormRef" :model="form">
+            <el-form-item style="margin-top: 20px;">
+                <el-input style="width: 200px" :placeholder="`请输入` + props.type + `名称`" v-model="form.name" clearable
+                    @clear="clearData" />
+            </el-form-item>
+            <el-button type="primary" :icon="Search" @click="findDataByName(ruleFormRef)">查询</el-button>
+            <el-button type="primary" :icon="Files" @click="addForm"> 添加</el-button>
+        </el-form>
+    </div>
+
+
+    <el-drawer v-model="titleDrawer" direction="rtl" :title="currentType" :before-close="handleClose">
+        <DrawerCommonVue :detail="drawerFormData" @submit-drawer="submitDrawer" />
+    </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { Search, Files } from '@element-plus/icons-vue';
+import { onMounted, ref, watch } from 'vue';
+import { ElMessageBox, FormInstance } from 'element-plus';
+import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
+
+export type CreateType = '添加模板' | '修改模板';
+const props = defineProps<{ type: string, pagesize: number, pagenumber: number, drawer: boolean }>();
+const emit = defineEmits(['findDataByName', 'submitDrawer', 'handleClose', 'addForm', 'clearData'])
+const form = ref({
+    name: '',
+});
+const ruleFormRef = ref<FormInstance>();
+const currentType = ref<CreateType>('添加模板');
+const drawerFormData = ref<FormModelCommon>({} as FormModelCommon);
+
+
+export interface DataCommon {
+    name: string,
+    size: number,
+    page: number,
+}
+
+const titleDrawer = ref(false);
+watch(
+    () => props.drawer,
+    (newdrawer) => {
+        titleDrawer.value = newdrawer;
+    },
+    { immediate: true },
+);
+
+
+// 根据名称找到数据-finish
+function findDataByName(formEl: FormInstance | undefined) {
+    if (!formEl) return;
+    formEl.validate((valid, fields) => {
+        if (valid) {
+            const data = ref<DataCommon>({
+                name: form.value.name,
+                size: props.pagesize,
+                page: props.pagenumber,
+            })
+            emit('findDataByName', data.value);
+        } else {
+            console.log('error submit!', fields);
+        }
+    });
+}
+
+function addForm() {
+    currentType.value = '添加模板';
+    emit('addForm')
+}
+
+// 添加
+function submitDrawer(data) {
+    emit('submitDrawer', data);
+    drawerFormData.value = { id: 0, code: '', name: '', remark: '', status: 0 };
+}
+
+
+const handleClose = (done: () => void) => {
+    ElMessageBox.confirm('是否确认关闭?')
+        .then(() => {
+            done();
+        })
+        .catch(() => {
+            // catch error
+        });
+    emit('handleClose');
+};
+
+function clearData() {
+    emit('clearData');
+}
+
+
+onMounted(() => {
+
+});
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,122 @@
+<template>
+    <div>
+
+        <CardCommon :type='type' :search-data-by-name="findWorkshopModuleFun" :get-data="getWorkshopModuleListFun"
+            :delete-table-data="deleteWorkshopModuleFun" :submit-drawer="updateWorkshopModuleFun"
+            :add-data="saveWorkshopModuleFun">
+        </CardCommon>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { updateWorkshopModule, getWorkshopModuleList, deleteWorkshopModule, findWorkshopModuleByName, saveWorkshopModule, WorkshopModule } 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 saveWorkshopModuleFun(data: WorkshopModule) {
+    return saveWorkshopModule(data).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `添加数据失败`,
+                })
+            },
+        })
+    });
+};
+
+// 根据名称查找
+function findWorkshopModuleFun(data: DataCommon) {
+    console.log('findWorkshopModuleByName', data.name, data.page, data.size);
+    return findWorkshopModuleByName(data.name, data.page, data.size).then((res) => {
+        console.log(res)
+        return res;
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `查询数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 查找数据列表-finish
+function getWorkshopModuleListFun(data) {
+    return getWorkshopModuleList(data.page, data.size).then((res) => {
+        return res
+    }).catch(error => {
+        ElMessageBox.alert(error.message, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `查询数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 删除数据
+function deleteWorkshopModuleFun(data: TableModel) {
+    console.log('detele', data);
+    return deleteWorkshopModule(data.id).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `删除数据失败`,
+                })
+            },
+        })
+    });
+}
+
+// 编辑数据
+function updateWorkshopModuleFun(data: WorkshopModule) {
+    console.log('edit', data);
+    return updateWorkshopModule(data).then(res => {
+        console.log(res);
+        return res;
+
+    }).catch(error => {
+        ElMessageBox.alert(error, '异常', {
+            confirmButtonText: 'OK',
+            callback: () => {
+                ElMessage({
+                    type: 'info',
+                    message: `编辑数据失败`,
+                })
+            },
+        })
+    });
+}
+
+
+
+
+
+</script>
+
+<style scoped></style>