chore: 模板初步设计

src/views/system/devtools/template/TemplateModal.vue

@@ -1,53 +1,61 @@
 <template>
   <BasicModal
     v-bind="$attrs"
-    width="720px"
+    defaultFullscreen
+    :canFullscreen="false"
     @register="registerModal"
     @ok="handleSubmit"
   >
     <BasicForm @register="registerForm"/>
+    <AceEditor v-model:value="state.content" @register="registerAceEditor"/>
   </BasicModal>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { reactive } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './template.data';
-  import { addGenQueryType, editGenQueryType, getGenQueryType } from '/@/api/platform/system/controller/genQueryType';
+  import { getGenCodeTemplateGroup, saveAndGencodeTemplateObj } from '/@/api/platform/system/controller/gencodeTemplateGroup';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
+  import { AceEditor, useAceEditor } from '/@/components/AceEditor';
 
-  /** 通用变量统一声明区域 */
-  const tag = ref<Nullable<string>>('');
+  const state = reactive({
+    tag: '',
+    content: ''
+  });
   /** https://v3.cn.vuejs.org/api/options-data.html#emits */
   const emit = defineEmits(['success', 'register']);
   const [registerForm, { resetFields, setFieldsValue, validate, clearValidate, setProps, updateSchema }] = useForm({
-    labelWidth: 100,
+    labelWidth: 120,
     schemas: formSchema,
     showActionButtonGroup: false,
     baseColProps: { span: 24 }
   });
+  const [registerAceEditor, { setProps: setAceEditorProps }] = useAceEditor({
+    lang: 'javascript',
+    options: {
+      useWorker: true,
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: true,
+    }
+  });
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: BoxPayload = { _tag: '' }) => {
     // 处理清除脏数据
     await resetFields();
     await clearValidate();
     await setProps({ disabled: false });
     // 处理设置数据
-    tag.value = data._tag;
+    state.tag = data._tag;
     const id = data.record?.id;
-    const props: Partial<ModalProps> = { confirmLoading: false, showOkBtn: true };
+    const props: Partial<ModalProps> = { confirmLoading: false };
     // 采用tag标签区分操作
-    switch (unref(tag)) {
+    switch (state.tag) {
       case 'add':
-        props.title = '新增查询类型';
-        break;
-      case 'view':
-        props.title = '查看查询类型';
-        props.showOkBtn = false;
-        await setProps({ disabled: true });
-        await setFieldsValue(await getGenQueryType(id));
+        props.title = '新增模板';
         break;
       case 'edit':
-        props.title = '编辑查询类型';
-        await setFieldsValue(await getGenQueryType(id));
+        props.title = '编辑模板';
+        await setFieldsValue(await getGenCodeTemplateGroup(id));
         break;
     }
     // 尾部:设置处理后的最终配置数据
@@ -61,15 +69,7 @@
       const formData = await validate();
       // 处理提交之前逻辑
       setModalProps({ confirmLoading: true });
-      // 采用tag标签区分操作
-      switch (unref(tag)) {
-        case 'add':
-          await addGenQueryType(formData);
-          break;
-        case 'edit':
-          await editGenQueryType(formData);
-          break;
-      }
+
       // 处理提交完成之后逻辑
       closeModal();
       emit('success');

src/views/system/devtools/template/index.vue

@@ -32,7 +32,7 @@
               {
                 label: '复制',
                 icon: 'fa-regular:copy',
-                onClick: handleViewEdit.bind(null, record)
+                onClick: handleCopy.bind(null, record)
               },
               {
                 label: '删除',
@@ -51,7 +51,7 @@
 <script lang="ts" setup>
   import { reactive, toRaw } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { listGenQueryType, delGenQueryType } from '/@/api/platform/system/controller/genQueryType';
+  import { listGenCodeTemplateGroup, delGenCodeTemplateGroup } from '/@/api/platform/system/controller/gencodeTemplateGroup';
   import { useModal } from '/@/components/Modal';
   import TemplateModal from './TemplateModal.vue';
   import { columns, searchFormSchema } from './template.data';
@@ -72,7 +72,7 @@
   const { createConfirm, createMessage } = useMessage();
   const [registerModal, { openModal }] = useModal();
   const [registerTable, { reload, clearSelectedRowKeys, getSelectRowKeys }] = useTable({
-    api: listGenQueryType,
+    api: listGenCodeTemplateGroup,
     rowKey: 'id',
     columns,
     formConfig: {
@@ -109,9 +109,8 @@
     openModal(true,{ _tag: 'add' });
   }
 
-  function handleViewEdit(record?: Recordable) {
+  function handleCopy(record?: Recordable) {
     record = record || { id: getSelectRowKeys() };
-    openModal(true, { _tag: 'view', record });
   }
 
   function handleEdit(record?: Recordable) {
@@ -126,7 +125,7 @@
       title: '警告',
       content: `是否确认删除id编号为${ids}的数据吗?`,
       onOk: async () => {
-        await delGenQueryType(ids);
+        await delGenCodeTemplateGroup(ids);
         createMessage.success('删除成功!');
         handleRefreshTable();
       }

src/views/system/devtools/template/template.data.ts

@@ -11,7 +11,6 @@ export const columns: BasicColumn[] = [
   {
     title: '模板分类',
     dataIndex: 'type',
-    width: 100,
     customRender: ({record}) => {
       const type = record.type;
       // 采用二进制~~取反,只要为null或者0等等一些其他的空元素都会转为0
@@ -23,9 +22,8 @@ export const columns: BasicColumn[] = [
     }
   },
   {
-    title: '是否系统模板',
+    title: '系统模板',
     dataIndex: 'isSystem',
-    width: 80,
     customRender: ({ record }) => {
       const isSystem = record.isSystem;
       // 采用二进制~~取反,只要为null或者0等等一些其他的空元素都会转为0
@@ -91,7 +89,7 @@ export const formSchema: FormSchema[] = [
   },
   {
     field: 'isSystem',
-    label: '是否系统模板',
+    label: '系统模板',
     component: 'Select',
     required: true,
     componentProps: {
@@ -102,4 +100,15 @@ export const formSchema: FormSchema[] = [
     },
     colProps: { span: 12 },
   },
+  {
+    label: '备注',
+    field: 'remarks',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 2
+    },
+    colProps: {
+      span: 24
+    }
+  }
 ];