feat: 场景模板管理-模板管理 兼容上飞定制

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

@@ -0,0 +1,235 @@
+<template>
+  <div>
+    <TitleCommon_shangfei
+      v-model="cardaddDrawer"
+      :type="props.type"
+      :pagesize="currentPageSize"
+      :pagenumber="currentPage"
+      :drawer="cardaddDrawer"
+      :tab="props.tab"
+      @find-data-by-name="searchDataByName"
+      @submit-drawer="addData"
+      @add-form="clickAddData"
+      @handle-close="closeDrawer"
+      @clear-data="clearData"
+    >
+    </TitleCommon_shangfei>
+
+    <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>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="备注" prop="remark" />
+        <el-table-column label="创建时间" prop="createdAt" />
+        <el-table-column label="操作">
+          <template #default="scoped">
+            <el-popconfirm title="确认要删除吗？" @confirm="deleteTableData(scoped.row)">
+              <template #reference>
+                <img
+                  :src="del"
+                  alt="delete"
+                  class="actionIcon"
+                  style="height: 30px; width: 30px; padding: 5px"
+                />
+              </template>
+            </el-popconfirm>
+            <img
+              :src="edit"
+              alt="edit"
+              class="actionIcon"
+              @click="showEditDrawer(scoped.row)"
+              style="height: 30px; width: 30px; padding: 5px"
+              v-if="props.type === '标签'"
+            />
+          </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"
+        />
+      </div>
+    </div>
+
+    <el-drawer
+      v-model="cardeditDrawer"
+      direction="rtl"
+      :title="type === '模板' ? '编辑模板' : '编辑标签'"
+      :before-close="handleClose"
+    >
+      <DrawerCommonVue_shangfei
+        :detail="currentdrawerFormData"
+        :type="props.type"
+        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_shangfei, { FormModelCommon } from './DrawerCommon_shangfei.vue';
+  import TitleCommon_shangfei, { DataCommon } from './TitleCommon_shangfei.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('场景');
+
+  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;
+    tab: LabelType;
+    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) => {
+    done();
+    closeDrawer();
+  };
+
+  // 编辑提交数据
+  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>
+  .actionIcon {
+    display: inline-block;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <el-form ref="ruleDrawerRef" :model="form" label-width="100px">
+      <el-form-item
+        :label="props.type === '模板' ? '模板名称' : '标签名称'"
+        prop="name"
+        :rules="[
+          {
+            required: true,
+            message: '输入模板名称',
+            trigger: 'blur',
+          },
+        ]"
+      >
+        <el-input placeholder="请输入模板名称" v-model="form.name" />
+      </el-form-item>
+
+      <!-- <el-form-item
+        v-if="
+          isEqual(props.detail, {}) ||
+          !props.detail.code ||
+          (props.detail.code && props.detail.code == '')
+        "
+        :label="props.type === '模板' ? '模板代码' : '标签代码'"
+        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="0" :inactive-value="1" />
+      </el-form-item>
+
+      <div style="margin-top: 100px; margin-left: 180px">
+        <el-button style="margin-left: 50px" @click="resetForm(ruleDrawerRef)">重置</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';
+  import { cloneDeep, isEqual } from 'lodash-es';
+  import { uid } from 'uid';
+
+  export interface FormModelCommon {
+    id?: number;
+    code: string;
+    name: string;
+    status: number;
+    remark: string;
+  }
+  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,
+  // });
+
+  console.log('123xs', 123);
+
+  const form = ref<FormModelCommon>({
+    id: undefined,
+    name: '',
+    code: '',
+    remark: '',
+    status: 0,
+  });
+
+  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) {
+    if (!formE1) return;
+    formE1.resetFields();
+    form.value.name = '';
+    // form.value.code = '';
+    form.value.remark = '';
+    form.value.status = 0;
+    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);
+      } 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_shangfei.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <CardCommon_shangfei
+      :type="type"
+      :tab="props.tab"
+      :search-data-by-name="findSceneLabelFun"
+      :get-data="getSceneLabelListFun"
+      :delete-table-data="deleteSceneLabelFun"
+      :submit-drawer="updateSceneLabelFun"
+      :add-data="saveSceneLabelFun"
+    >
+    </CardCommon_shangfei>
+  </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_shangfei, { TableModel } from './CardCommon_shangfei.vue';
+  import { DataCommon } from './TitleCommon.vue';
+  import { ref } from 'vue';
+  const type = ref('标签');
+
+  const props = defineProps<{
+    tab: LabelType;
+  }>();
+
+  // 添加数据
+  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_shangfei.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <CardCommon_shangfei
+      :type="type"
+      :tab="props.tab"
+      :search-data-by-name="findSceneModuleFun"
+      :get-data="getSceneLabelListFun"
+      :delete-table-data="deleteSceneModuleFun"
+      :submit-drawer="updateSceneModuleFun"
+      :add-data="saveSceneModuleFun"
+    >
+    </CardCommon_shangfei>
+  </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_shangfei, { TableModel } from './CardCommon_shangfei.vue';
+  import { DataCommon } from './TitleCommon.vue';
+  import { ref } from 'vue';
+  import { LabelType } from './constant';
+  const type = ref('模板');
+
+  const props = defineProps<{
+    tab: LabelType;
+  }>();
+
+  // 添加数据
+  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

@@ -2,15 +2,28 @@
   <div style="width: 100%">
     <div>
       <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-        <el-tab-pane label="公司模板" name="scene">
-          <SceneManagerVue tab="scene" />
-        </el-tab-pane>
-        <el-tab-pane label="场景标签" name="label">
-          <LabelManagerVue tab="label" />
-        </el-tab-pane>
-        <el-tab-pane label="车间模板" name="workspace">
-          <WorkspaceManagerVue tab="workspace" />
-        </el-tab-pane>
+        <div v-if="disableDepartmentEdit">
+          <el-tab-pane label="公司模板" name="scene">
+            <SceneManagerVue_shangfei tab="scene" />
+          </el-tab-pane>
+          <el-tab-pane label="场景标签" name="label">
+            <LabelManagerVue_shangfei tab="label" />
+          </el-tab-pane>
+          <el-tab-pane label="车间模板" name="workspace">
+            <WorkspaceManagerVue_shangfei tab="workspace" />
+          </el-tab-pane>
+        </div>
+        <div v-else>
+          <el-tab-pane label="公司模板" name="scene">
+            <SceneManagerVue tab="scene" />
+          </el-tab-pane>
+          <el-tab-pane label="场景标签" name="label">
+            <LabelManagerVue tab="label" />
+          </el-tab-pane>
+          <el-tab-pane label="车间模板" name="workspace">
+            <WorkspaceManagerVue tab="workspace" />
+          </el-tab-pane>
+        </div>
       </el-tabs>
     </div>
   </div>
@@ -20,9 +33,18 @@
   import { ref } from 'vue';
   import type { TabsPaneContext } from 'element-plus';
   import LabelManagerVue from './LabelManager.vue';
+  import LabelManagerVue_shangfei from './LabelManager_shangfei.vue';
   import WorkspaceManagerVue from './WorkspaceManager.vue';
+  import WorkspaceManagerVue_shangfei from './WorkspaceManager_shangfei.vue';
   import SceneManagerVue from './SceneManager.vue';
+  import SceneManagerVue_shangfei from './SceneManager_shangfei.vue';
   import { LabelType } from './constant';
+  import { useGlobSetting } from '@/hooks/setting';
+
+  const globSetting = useGlobSetting();
+  const disableDepartmentEdit = globSetting.disableDepartmentEdit;
+
+  console.log('disableDepartmentEdit', disableDepartmentEdit);
 
   const activeName = ref('scene');
   const currentLabel = ref<LabelType>('scene');

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

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div class="form-tip">{{ '提示：' + getTipByTab(props.tab) }}</div>
+    <el-form inline ref="ruleFormRef" :model="form">
+      <el-form-item style="margin-top: 0px">
+        <el-input
+          v-model="form.name"
+          :placeholder="`请输入` + props.type + `名称`"
+          class="input-with-select"
+        >
+          <template #append>
+            <el-button :icon="Search" @click="findDataByName(ruleFormRef)" />
+          </template>
+        </el-input>
+
+        <!-- <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="Plus"
+        @click="addForm"
+        style="position: absolute; right: 0; width: 100px"
+        v-if="props.type === '标签'"
+      >
+        {{ props.type }}</el-button
+      >
+    </el-form>
+  </div>
+
+  <el-drawer
+    v-model="titleDrawer"
+    direction="rtl"
+    :title="props.type === '模板' ? '添加模板' : '添加标签'"
+    :before-close="handleClose"
+  >
+    <DrawerCommonVue_shangfei
+      :detail="drawerFormData"
+      :type="props.type"
+      @submit-drawer="submitDrawer"
+    />
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+  import { Search, Plus } from '@element-plus/icons-vue';
+  import { onMounted, ref, watch } from 'vue';
+  import { ElMessageBox, FormInstance } from 'element-plus';
+  import DrawerCommonVue_shangfei, { FormModelCommon } from './DrawerCommon_shangfei.vue';
+  import { useKeyPress } from 'vue-hooks-plus';
+  import { LabelType, getTipByTab } from './constant';
+
+  export type CreateType = '添加模板' | '修改模板';
+  const props = defineProps<{
+    type: string;
+    pagesize: number;
+    pagenumber: number;
+    drawer: boolean;
+    tab: LabelType;
+  }>();
+  const emit = defineEmits([
+    'findDataByName',
+    'submitDrawer',
+    'handleClose',
+    'addForm',
+    'clearData',
+  ]);
+  const form = ref({
+    name: '',
+  });
+  const ruleFormRef = ref<FormInstance>();
+  const currentType = ref<CreateType>('添加模板');
+  const defaultFormValue = { id: 0, code: '', name: '', remark: '', status: 0 };
+  const drawerFormData = ref<FormModelCommon>({ ...defaultFormValue } as FormModelCommon);
+
+  export interface DataCommon {
+    name: string;
+    size: number;
+    page: number;
+  }
+  useKeyPress('enter', () => {
+    findDataByName(ruleFormRef.value);
+  });
+  const titleDrawer = ref(false);
+  watch(
+    () => props.drawer,
+    (newdrawer) => {
+      titleDrawer.value = newdrawer;
+    },
+    { immediate: true },
+  );
+
+  // 根据名称找到数据-finish
+  function findDataByName(formEl: FormInstance | undefined) {
+    console.log('findDataByName');
+    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);
+    setTimeout(() => {
+      drawerFormData.value = { ...defaultFormValue };
+    }, 500);
+  }
+
+  const handleClose = (done: () => void) => {
+    done();
+    emit('handleClose');
+  };
+
+  // function clearData() {
+  //     emit('clearData');
+  // }
+
+  onMounted(() => {});
+</script>
+
+<style scoped>
+  .form-tip {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #909399;
+    line-height: 38px;
+    text-align: left;
+    font-style: normal;
+  }
+</style>

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

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <CardCommon_shangfei
+      :type="type"
+      :tab="props.tab"
+      :search-data-by-name="findWorkshopModuleFun"
+      :get-data="getWorkshopModuleListFun"
+      :delete-table-data="deleteWorkshopModuleFun"
+      :submit-drawer="updateWorkshopModuleFun"
+      :add-data="saveWorkshopModuleFun"
+    >
+    </CardCommon_shangfei>
+  </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_shangfei, { TableModel } from './CardCommon_shangfei.vue';
+  import { DataCommon } from './TitleCommon.vue';
+  import { ref } from 'vue';
+  const type = ref('模板');
+
+  const props = defineProps<{
+    tab: LabelType;
+  }>();
+
+  // 添加数据
+  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>