first commit

src/views/config/templateManage/i18n/en.ts

@@ -0,0 +1,16 @@
+export default {
+  templateManage: {
+    templateName: 'Template Name',
+    inputPlaceholder: 'Please enter template name',
+    table: {
+      templateName: 'Template Name',
+      templateType: 'Template Type',
+      createTime: 'Create Time',
+      viewBtn: 'Preview',
+    },
+    templateTypeMap: {
+      contract: 'Contract Template',
+      document: 'Document Template',
+    },
+  },
+};

src/views/config/templateManage/i18n/zh-cn.ts

@@ -0,0 +1,16 @@
+export default {
+  templateManage: {
+    templateName: '模板名称',
+    inputPlaceholder: '请输入模板名称',
+    table: {
+      templateName: '模板名称',
+      templateType: '模板类型',
+      createTime: '创建时间',
+      viewBtn: '预览',
+    },
+    templateTypeMap: {
+      contract: '合同模板',
+      document: '文档模板',
+    },
+  },
+};

src/views/config/templateManage/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <el-row class="ml10 mb8">
+        <el-form :inline="true" :model="queryForm" @keyup.enter="getDataList" ref="queryRef">
+          <el-form-item :label="$t('templateManage.templateName')">
+            <el-input v-model="queryForm.templateName" :placeholder="$t('templateManage.inputPlaceholder')" style="max-width:240px" />
+          </el-form-item>
+          <el-form-item>
+            <el-button icon="search" type="primary" @click="getDataList">{{ $t('common.queryBtn') }}</el-button>
+            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </el-row>
+
+      <el-table :data="state.dataList" style="width:100%" v-loading="state.loading" border row-key="id">
+        <el-table-column type="index" label="#" width="60" />
+        <el-table-column prop="templateName" :label="$t('templateManage.table.templateName')" />
+        <el-table-column prop="templateType" :label="$t('templateManage.table.templateType')">
+          <template #default="{ row }">
+            {{ getTypeName(row.templateType) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('templateManage.table.createTime')" width="180" />
+        <el-table-column :label="$t('common.action')" width="160">
+          <template #default="{ row }">
+            <el-button text size="small" type="primary" icon="view">{{ $t('templateManage.table.viewBtn') }}</el-button>
+            <el-button text size="small" type="primary" icon="delete" @click="handleDelete(row.id)">{{ $t('common.delBtn') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { BasicTableProps, useTable } from '/@/hooks/table';
+import { useMessage, useMessageBox } from '/@/hooks/message';
+import { fetchTemplatesPage, deleteTemplate } from '/@/api/config/templateManage';
+import { flowNameOptions } from '/@/hooks/enums';
+
+const { t } = useI18n();
+const message = useMessage();
+
+const getTypeName = (templateType: number) => {
+  const option = flowNameOptions.find(item => item.value === templateType)
+  if (option) {
+    return t(`flowTypes.${option.label}`)
+  }
+  return templateType
+}
+
+// query form
+const queryForm = reactive({ templateName: '' });
+
+const state: BasicTableProps = reactive({
+  queryForm,
+  pageList: fetchTemplatesPage,
+});
+
+const { getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state);
+
+const handleDelete = async (ids: string) => {
+  try {
+    await useMessageBox().confirm(t('common.delConfirmText'));
+  } catch {
+    return;
+  }
+
+  try {
+    await deleteTemplate(ids);
+    message.success(t('common.delSuccessText'));
+    getDataList();
+  } catch (err: any) {
+    message.error(err?.msg || err?.message || t('common.operateFail'));
+  }
+};
+
+const resetQuery = () => {
+  queryForm.templateName = '';
+  getDataList();
+};
+
+// initial fetch
+getDataList();
+</script>
+
+<style scoped>
+.layout-container .layout-padding-view {
+  overflow: auto;
+}
+</style>