feat:初步完成所有功能

src/api/template/template.ts

@@ -3,10 +3,10 @@ import { http } from '@/utils/http/axios';
 export interface SceneModule {
   code: string;
   // createdAt: string,
-  id?: number;
+  id?: number | null;
   // isDeleted: number,
   name: string;
-  previewImage: string | null;
+  previewImage: string | null | undefined;
   remark: string;
   isDisabled: number;
   elementIdList?: Array<string>;
@@ -80,7 +80,7 @@ export interface Response<Records> {
 // 查询所有场景模板,这边是新的
 export function getSceneModuleList(data: { pageNumber: number; pageSize: number }) {
   return http.request<Response<Records>>({
-    url: '/viewTemplate/queryViewTemplatePage',
+    url: '/admin/viewTemplate/queryViewTemplatePage',
     method: 'post',
     data,
   });
@@ -88,7 +88,7 @@ export function getSceneModuleList(data: { pageNumber: number; pageSize: number
 // 查询所有场景模板,全量接口
 export function getAllSceneModuleList() {
   return http.request<Records[]>({
-    url: '/viewTemplate/queryViewTemplateList',
+    url: '/admin/viewTemplate/queryViewTemplateList',
     method: 'post',
   });
 }
@@ -146,12 +146,20 @@ export function findWorkshopModuleByName(
   });
 }
 
-// 添加场景模板
-export function saveSceneModule(sceneModule: SceneModule) {
+// 添加场景模板,老的注释掉
+// export function saveSceneModule(sceneModule: SceneModule) {
+//   return http.request({
+//     url: '/template/saveSceneModule',
+//     method: 'post',
+//     params: sceneModule,
+//   });
+// }
+// 添加场景模板,老的注释掉
+export function saveSceneModule(data: SceneModule) {
   return http.request({
-    url: '/template/saveSceneModule',
+    url: '/admin/viewTemplate/saveViewTemplate',
     method: 'post',
-    params: sceneModule,
+    data,
   });
 }
 
@@ -173,10 +181,17 @@ export function saveWorkshopModule(workshopModule: WorkshopModule) {
   });
 }
 
+// 删除场景模板,老的注释掉
+// export function deleteSceneModule(sceneModuleId: number) {
+//   return http.request({
+//     url: `/template/deleteSceneModule?sceneModuleId=${sceneModuleId}`,
+//     method: 'delete',
+//   });
+// }
 // 删除场景模板
 export function deleteSceneModule(sceneModuleId: number) {
   return http.request({
-    url: `/template/deleteSceneModule?sceneModuleId=${sceneModuleId}`,
+    url: `/admin/viewTemplate/deleteViewTemplate?viewTemplateId=${sceneModuleId}`,
     method: 'delete',
   });
 }
@@ -197,12 +212,21 @@ export function deleteWorkshopModule(workshopModuleId: number) {
   });
 }
 
+// 编辑场景模板,老的注释掉
+// export function updateSceneModule(sceneModule: SceneModule) {
+//   return http.request({
+//     url: '/template/updateSceneModule',
+//     method: 'put',
+//     params: sceneModule,
+//   });
+// }
+
 // 编辑场景模板
-export function updateSceneModule(sceneModule: SceneModule) {
+export function updateSceneModule(data: SceneModule) {
   return http.request({
-    url: '/template/updateSceneModule',
+    url: '/admin/viewTemplate/updateViewTemplate',
     method: 'put',
-    params: sceneModule,
+    data,
   });
 }
 

src/views/templateManage/CardCommon.vue

@@ -12,6 +12,16 @@
       @clear-data="clearData"
     >
     </TitleCommon> -->
+    <el-image-viewer
+      v-if="showViewer"
+      :url-list="urlList"
+      @close="
+        () => {
+          showViewer = false;
+        }
+      "
+      :z-index="99"
+    />
 
     <div class="body">
       <el-button type="primary" :icon="Plus" @click="addForm" style="margin-bottom: 16px">
@@ -52,7 +62,7 @@
             />
           </template> -->
           <template #default="scope">
-            <el-button link type="primary" size="small" @click="showEditDrawer(scope.row)"
+            <el-button link type="primary" size="small" @click="showPreview(scope.row)"
               ><el-tooltip class="box-item" effect="dark" content="预览" placement="top">
                 <el-icon :size="16">
                   <View />
@@ -67,7 +77,7 @@
               </el-tooltip>
             </el-button>
 
-            <el-button link type="primary" size="small" @click="deleteTableData(scope.row)"
+            <el-button link type="primary" size="small" @click="showDeleteDialog(scope.row)"
               ><el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                 <el-icon :size="16">
                   <Delete />
@@ -91,20 +101,29 @@
       </div>
     </div>
 
-    <el-drawer
-      v-model="cardeditDrawer"
-      direction="rtl"
-      :title="type === '模板' ? '编辑模板' : '编辑标签'"
-      :before-close="handleClose"
-    >
-      <DrawerCommonVue :type="props.type" :drawer-type="drawerType" :add-item="addData" />
-    </el-drawer>
+    <DrawerCommonVue
+      ref="childRef"
+      :type="props.type"
+      :drawer-type="drawerType"
+      :add-item="addData"
+      :edit-item="submitDrawer"
+    />
+    <el-dialog v-model="dialogVisible" title="删除该条模板" width="30%" align-center>
+      <p>删除后，其他功能若关联该结构，也将同步更新。</p>
+      <p>是否确认删除？</p>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="deleteTableData(currentRow)">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
   import { onMounted, ref } from 'vue';
-  import { ElDrawer } from 'element-plus';
+  import { ElImageViewer } from 'element-plus';
   import { Plus, EditPen, View, Delete } from '@element-plus/icons-vue';
   import DrawerCommonVue, { FormModelCommon } from './DrawerCommon.vue';
   import { Records, SceneModule } from '@/api/template/template';
@@ -124,7 +143,16 @@
 
   const addForm = () => {
     drawerType.value = 'add';
-    cardeditDrawer.value = true;
+    openDrawer(true);
+    setDrawerForm({
+      id: null,
+      code: '',
+      name: '',
+      component: '',
+      remark: '',
+      thumbnail: null,
+      isDisabled: 0,
+    });
   };
 
   export type CreateType = '添加模板' | '编辑模板' | '添加标签' | '编辑标签';
@@ -132,9 +160,10 @@
     id: number;
     name: string;
     code: string;
-    status: number;
+    isDisabled: number;
     remark: string;
     createAt: string;
+    previewImage: string;
   }
 
   export interface ModelCommon {
@@ -147,9 +176,9 @@
   }
 
   // const currentType = ref<CreateType>('编辑模板');
-  const currentdrawerFormData = ref<FormModelCommon>({} as FormModelCommon);
-  const cardeditDrawer = ref(false);
-  const cardaddDrawer = ref(false);
+  // 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);
@@ -157,34 +186,86 @@
 
   const drawerType = ref('add'); //抽屉的功能是新建还是编辑
 
+  const childRef = ref<typeof DrawerCommonVue | null>(null);
+
+  const setDrawerForm = (detailsData: FormModelCommon) => {
+    if (childRef.value) {
+      // console.log('调用了子组件函数');
+      childRef.value.setForm(detailsData);
+    }
+  };
+
+  const openDrawer = (index: boolean) => {
+    if (childRef.value) {
+      // console.log('调用了子组件函数');
+      childRef.value.drawerSwitch(index);
+    }
+  };
+
+  const fillFileList = (name: string, url: string) => {
+    if (childRef.value) {
+      // console.log('调用了子组件函数');
+      childRef.value.setFileList(name, url);
+    }
+  };
+
+  const dialogVisible = ref(false);
+  const currentRow = ref<TableModel>({} as TableModel);
+
+  const showDeleteDialog = (row: TableModel) => {
+    dialogVisible.value = true;
+    currentRow.value = row;
+  };
+
   // 删除数据-finish
   function deleteTableData(row: TableModel) {
     // emit('deleteTableData', row);
-    props.deleteTableData(row).then((res) => {
-      console.log('deleteTableData', res);
+    props.deleteTableData(row).then(() => {
+      dialogVisible.value = false;
       getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
     });
   }
 
+  const showViewer = ref(false);
+
+  const urlList = ref<string[]>();
+
+  const showPreview = (row: TableModel) => {
+    urlList.value = [];
+    // console.log('preViewImg=', row.previewImage);
+    urlList.value.push(row.previewImage);
+    showViewer.value = true;
+  };
+
   // 编辑数据弹框-finish
   function showEditDrawer(row: TableModel) {
-    cardeditDrawer.value = true;
-    console.log('row', row);
-    currentdrawerFormData.value = row;
+    drawerType.value = 'edit';
+    openDrawer(true);
+
+    setDrawerForm({
+      id: row.id,
+      code: row.code,
+      name: row.name,
+      component: '',
+      remark: row.remark,
+      thumbnail: row.previewImage,
+      isDisabled: row.isDisabled,
+    });
+    fillFileList(row.name, row.previewImage);
   }
 
   // 弹框关闭事件-finish
-  const handleClose = (done: () => void) => {
-    done();
-    closeDrawer();
-  };
+  // const handleClose = (done: () => void) => {
+  //   done();
+  //   closeDrawer();
+  // };
 
   // 编辑提交数据
   function submitDrawer(data: SceneModule) {
-    console.log('编辑提交数据：', data);
-    props.submitDrawer(data).then((res) => {
-      console.log('submitDrawer', res);
-      closeDrawer();
+    // console.log('编辑提交数据：', data);
+    props.submitDrawer(data).then(() => {
+      // console.log('submitDrawer', res);
+      openDrawer(false);
       getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
     });
   }
@@ -192,7 +273,7 @@
   // 查询数据列表-finish
   function getData(data: Page) {
     props.getData(data).then((res) => {
-      console.log('getData', res);
+      // console.log('getData', res);
       tableData.value = res.records;
       total.value = res.totalRow;
     });
@@ -207,15 +288,15 @@
   // }
 
   // 单机添加按钮，控制弹框显示-finish
-  function clickAddData() {
-    cardaddDrawer.value = true;
-  }
+  // function clickAddData() {
+  //   cardaddDrawer.value = true;
+  // }
 
   // 添加数据-finish
   function addData(data: SceneModule) {
     props.addData(data).then(() => {
       // console.log('addData', res);
-      closeDrawer();
+      openDrawer(false);
       //如果是创建了新的，则列表回到第一页；如果只是编辑则列表位置不变
       currentPage.value = 1;
       currentPageSize.value = 10;
@@ -223,17 +304,17 @@
     });
   }
 
-  function closeDrawer() {
-    cardaddDrawer.value = false;
-    cardeditDrawer.value = false;
-    // getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });更新数据另外干，不用每次关闭抽屉就拉后端
-  }
+  // function closeDrawer() {
+  //   cardaddDrawer.value = false;
+  //   cardeditDrawer.value = false;
+  //   // getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });更新数据另外干，不用每次关闭抽屉就拉后端
+  // }
 
   // 清空输入框数据-finish
-  function clearData() {
-    // getSceneLabelList(currentPage.value, currentPageSize.value);
-    getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
-  }
+  // function clearData() {
+  //   // getSceneLabelList(currentPage.value, currentPageSize.value);
+  //   getData({ pageNumber: currentPage.value, pageSize: currentPageSize.value });
+  // }
 
   // 页数-finish
   function handleSizeChangeFun(val: number) {

src/views/templateManage/DrawerCommon.vue

@@ -1,93 +1,105 @@
 <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="看板组件">
-        <el-select v-model="form.component" disabled>
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="预览图片">
-        <el-upload
-          ref="uploadRef"
-          :class="{ 'no-el-upload': fileList.length > 0 }"
-          :action="actionUrl"
-          :on-preview="handlePictureCardPreview"
-          :on-remove="handleUploadRemove"
-          :on-success="handleUploadSuccess"
-          :before-upload="beforeThumbnailUpload"
-          :limit="1"
-          :headers="getHeaders()"
-          :data="{ bizType: 'COMPANY_THUMBNAIL' }"
-          list-type="picture-card"
-          v-model:file-list="fileList"
+    <el-drawer v-model="openDrawer" :title="props.drawerType === 'add' ? '添加模板' : '编辑模板'">
+      <el-form ref="ruleDrawerRef" :model="form" label-width="100px">
+        <el-form-item
+          label="模板名称"
+          prop="name"
+          :rules="[
+            {
+              required: true,
+              message: '输入模板名称',
+              trigger: 'blur',
+            },
+          ]"
         >
-          <!-- <img v-if="ruleForm.thumbnail" :src="ruleForm.thumbnail" />
+          <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="看板组件">
+          <el-select v-model="form.component" disabled>
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          label="预览图片"
+          prop="thumbnail"
+          :rules="[
+            {
+              required: true,
+              message: '上传预览图片',
+              trigger: 'blur',
+            },
+          ]"
+        >
+          <el-upload
+            ref="uploadRef"
+            :class="{ 'no-el-upload': fileList.length > 0 }"
+            :action="actionUrl"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleUploadRemove"
+            :on-success="handleUploadSuccess"
+            :before-upload="beforeThumbnailUpload"
+            :limit="1"
+            :headers="getHeaders()"
+            :data="{ bizType: 'COMPANY_THUMBNAIL' }"
+            list-type="picture-card"
+            v-model:file-list="fileList"
+          >
+            <!-- <img v-if="ruleForm.thumbnail" :src="ruleForm.thumbnail" />
             <el-icon v-else><Plus /></el-icon> -->
-          <el-icon v-if="!form.thumbnail || form.thumbnail.length === 0"><Plus /></el-icon>
-        </el-upload>
-      </el-form-item>
+            <el-icon v-if="!form.thumbnail || form.thumbnail.length === 0"><Plus /></el-icon>
+          </el-upload>
+        </el-form-item>
 
-      <el-form-item label="备注" prop="remark">
-        <el-input placeholder="请输入备注" v-model="form.remark" />
-      </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input placeholder="请输入备注" v-model="form.remark" />
+        </el-form-item>
 
-      <!-- <el-form-item label="模板上传">
+        <!-- <el-form-item label="模板上传">
         <el-upload>
           <el-button disabled>上传</el-button>
         </el-upload>
       </el-form-item> -->
 
-      <!-- <el-form-item label="状态" prop="status">
+        <!-- <el-form-item label="状态" prop="status">
         <el-switch v-model="form.status" :active-value="0" :inactive-value="1" />
       </el-form-item> -->
 
-      <el-form-item label="状态" label-position="right">
-        <el-radio-group v-model="status" aria-label="label position">
-          <el-radio-button :value="0">启用</el-radio-button>
-          <el-radio-button :value="1">禁用</el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item style="margin-top: 100px">
-        <el-button style="margin-left: auto" @click="resetForm(ruleDrawerRef)">重置</el-button>
-        <el-button @click="submitDrawer(ruleDrawerRef)" type="primary">提交</el-button>
-      </el-form-item>
-    </el-form>
+        <el-form-item label="状态" label-position="right">
+          <el-radio-group v-model="status" aria-label="label position">
+            <el-radio-button :value="0">启用</el-radio-button>
+            <el-radio-button :value="1">禁用</el-radio-button>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item style="margin-top: 100px">
+          <el-button style="margin-left: auto" @click="resetForm(ruleDrawerRef)">重置</el-button>
+          <el-button @click="submitDrawer(ruleDrawerRef)" type="primary">提交</el-button>
+        </el-form-item>
+      </el-form>
+    </el-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from 'vue';
+  import { ref, computed, defineExpose } from 'vue';
   import { FormInstance, ElMessage } from 'element-plus';
   import { onMounted } from 'vue';
   // import { cloneDeep, isEqual } from 'lodash-es';
@@ -100,20 +112,24 @@
   // import { uid } from 'uid';
 
   export interface FormModelCommon {
-    id?: number;
+    id?: number | null;
     code: string;
     name: string;
     component: string;
     remark: string;
-    thumbnail: string | null;
+    thumbnail: string | null | undefined;
+    isDisabled?: number;
   }
   export type CreateType = 'create' | 'edit';
   const props = defineProps<{
     type: string;
     drawerType: string;
     addItem: (data: SceneModule) => unknown;
+    editItem: (data: SceneModule) => unknown;
   }>();
 
+  const openDrawer = ref(false);
+
   const form = ref<FormModelCommon>({
     name: '',
     code: '',
@@ -135,10 +151,20 @@
   const { urlPrefix } = useGlobSetting();
 
   const actionUrl = computed(() => {
-    return urlJoin(urlPrefix!, `/issue/uploadPicture`);
+    return urlJoin(urlPrefix!, `admin/minio/uploadFile`);
   });
   const uploadRef = ref();
   const fileList = ref<UploadFile[]>([]);
+
+  // watch(
+  //   fileList,
+  //   (newVal) => {
+  //     form.value.thumbnail = newVal[0]?.url;
+  //   },
+  //   {
+  //     deep: true, // 如果数组中是对象，则需要设置deep选项来深度监听
+  //   },
+  // );
   const dialogImageUrl = ref('');
   const dialogVisible = ref(false);
 
@@ -177,6 +203,36 @@
     // console.log('resetForm');
   }
 
+  const setForm = (details: FormModelCommon) => {
+    // console.log('form=====', form.value);
+    form.value.id = details.id;
+    form.value.name = details.name;
+    form.value.code = details.code;
+    form.value.remark = details.remark;
+    status.value = details.isDisabled ? details.isDisabled : 0;
+    form.value.thumbnail = details.thumbnail;
+  };
+
+  const drawerSwitch = (index: boolean) => {
+    openDrawer.value = index;
+  };
+
+  const setFileList = (name: string, url: string) => {
+    fileList.value = [];
+    fileList.value.push({
+      name: name + '模板图片',
+      status: 'success',
+      uid: 1,
+      url: url,
+    });
+  };
+
+  defineExpose({
+    setForm,
+    drawerSwitch,
+    setFileList,
+  });
+
   function submitDrawer(formEl: FormInstance | undefined) {
     if (!formEl) return;
     formEl.validate((valid, fields) => {
@@ -188,6 +244,14 @@
           dataUpload.value.remark = form.value.remark;
           dataUpload.value.isDisabled = status.value;
           props.addItem(dataUpload.value);
+        } else {
+          dataUpload.value.id = form.value.id;
+          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.editItem(dataUpload.value);
         }
       } else {
         console.log('error submit!', fields);
@@ -195,7 +259,12 @@
     });
   }
 
-  onMounted(() => {});
+  onMounted(() => {
+    if (props.drawerType === 'add') {
+      console.log('出发了重置');
+      resetForm(undefined);
+    }
+  });
 </script>
 
 <style scoped>