优化布局推荐

src/views/content/layout/columns.ts

@@ -13,16 +13,16 @@ export const columns = [
     fixed: 'left',
     width: 50,
   },
-  {
-    title: '位置编号',
-    key: 'location',
-    width: 100,
-  },
   {
     title: '位置描述',
     key: 'description',
     width: 200,
   },
+  {
+    title: '位置编号',
+    key: 'location',
+    width: 100,
+  },
   {
     title: '排序',
     key: 'sort',

src/views/content/layout/edit.vue

@@ -14,6 +14,9 @@
         label-placement="left"
         label-width="85px"
       >
+        <n-form-item label="描述" path="description">
+          <n-input type="textarea" v-model:value="formData.description" placeholder="请输入描述" />
+        </n-form-item>
         <n-form-item
           label="位置编号"
           path="location"
@@ -21,9 +24,6 @@
         >
           <number-input v-model="formData.location" placeholder="请输入位置编号" clearable />
         </n-form-item>
-        <n-form-item label="描述" path="description">
-          <n-input type="textarea" v-model:value="formData.description" placeholder="请输入描述" />
-        </n-form-item>
         <n-form-item label="排序" path="sort">
           <n-input-number v-model:value="formData.sort" />
         </n-form-item>
@@ -66,11 +66,16 @@
       default: 0,
     },
   });
+
+  /**
+   * 定义模态
+   */
   const [modalRegister, { openModal, setSubLoading }] = useModal({
     title: props.layoutId ? '编辑布局' : '添加布局',
     subBtuText: '确定',
     width: 600,
   });
+
   /**
    * 执行提交
    */
@@ -118,7 +123,10 @@
       setFormData();
     }
   });
-  //导出方法
+
+  /**
+   * 定义函数
+   */
   defineExpose({
     openModal,
   });

src/views/content/layout/index.vue

@@ -27,7 +27,6 @@
               </template>
               新建
             </n-button>
-
             <n-button
               type="error"
               @click="handleDelete"
@@ -63,12 +62,13 @@
   import { getLayoutList, layoutDelete, layoutBatchDelete } from '@/api/content/layout';
   import { columns } from './columns';
   import { PlusOutlined, DeleteOutlined, FormOutlined } from '@vicons/antd';
-  import CreateModal from './CreateModal.vue';
   import editDialog from './edit.vue';
-  import { basicModal, useModal } from '@/components/Modal';
   import { schemas } from './querySchemas';
   import { renderIcon } from '@/utils';
 
+  /**
+   * 定义常量
+   */
   const message = useMessage();
   const dialog = useDialog();
   const basicTableRef = ref();
@@ -76,15 +76,20 @@
   const editVisible = ref(false);
   const layoutId = ref(0);
   const rowKeys = ref([]);
-  const exportLoading = ref(false);
-
   const showModal = ref(false);
+
+  /**
+   * 定义查询参数
+   */
   const formParams = reactive({
     description: '',
   });
 
+  /**
+   * 定义操作栏
+   */
   const actionColumn = reactive({
-    width: 400,
+    width: 200,
     title: '操作',
     align: 'center',
     key: 'action',
@@ -112,24 +117,36 @@
     },
   });
 
-  function addTable() {
+  /**
-    showModal.value = true;
+   * 加载数据列表
-  }
+   * @param res 参数
-
+   */
   const loadDataTable = async (res) => {
     rowKeys.value = [];
     const result = await getLayoutList({ ...formParams, ...res });
     return result;
   };
 
+  /**
+   * 数据行选中事件
+   * @param keys 参数
+   */
   function onCheckedRow(keys) {
     rowKeys.value = keys;
   }
 
+  /**
+   * 刷新数据表
+   * @param noRefresh 参数
+   */
   function reloadTable(noRefresh = '') {
     basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
   }
 
+  /**
+   * 执行提交表单
+   * @param values 参数
+   */
   function handleSubmit(values: Recordable) {
     for (const key in formParams) {
       formParams[key] = '';
@@ -140,6 +157,9 @@
     reloadTable();
   }
 
+  /**
+   * 执行重置
+   */
   function handleReset(values: Recordable) {
     for (const key in formParams) {
       formParams[key] = '';
@@ -150,6 +170,9 @@
     reloadTable();
   }
 
+  /**
+   * 执行注册
+   */
   const [register, {}] = useForm({
     gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
     labelWidth: 80,
@@ -165,6 +188,7 @@
     await nextTick();
     createModalRef.value.openModal();
   };
+
   /**
    * 执行编辑
    */
@@ -174,6 +198,7 @@
     await nextTick();
     createModalRef.value.openModal();
   }
+
   /**
    * 执行删除
    * @param id 参数

src/views/content/layoutItem/edit.vue

@@ -94,20 +94,23 @@
   import chooseArticle from './layout/index.vue';
   import { useLockFn } from '@/utils/useLockFn';
 
+  /**
+   * 定义常量
+   */
   const emit = defineEmits(['success', 'update:visible']);
   const formRef = ref();
   const articleRef = ref();
+  const message = useMessage();
+  const chooseVisible = ref(false);
+  const layoutList = ref([]);
 
   /**
    * 定义表单参数
    */
-  const message = useMessage();
-  const chooseVisible = ref(false);
-  const layoutList = ref([]);
   const formData = reactive({
     id: '',
-    layoutId: undefined,
+    layoutId: '',
-    type: undefined,
+    type: '',
     typeText: '',
     typeId: '',
     image: '',
@@ -130,6 +133,9 @@
     },
   });
 
+  /**
+   * 定义数据
+   */
   const typeList = [
     { label: 'CMS文章', value: 1 },
     { label: '通知公告', value: 2 },
@@ -171,6 +177,7 @@
       .catch((error) => {});
   };
   const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
+
   /**
    * 关闭窗体
    */
@@ -190,6 +197,7 @@
       }
     }
   };
+
   /**
    * 选择推荐内容成功回调事件
    */
@@ -213,6 +221,7 @@
     let list = await getLayoutAllList();
     layoutList.value = list ? list : [];
   };
+
   /**
    * 钩子函数
    */

src/views/content/layoutItem/index.vue

@@ -27,7 +27,6 @@
               </template>
               新建
             </n-button>
-
             <n-button
               type="error"
               @click="handleDelete"
@@ -63,12 +62,13 @@
   import { getLayoutList, layoutDelete, layoutBatchDelete } from '@/api/content/layoutItem';
   import { columns } from './columns';
   import { PlusOutlined, DeleteOutlined, FormOutlined } from '@vicons/antd';
-  import CreateModal from './CreateModal.vue';
   import editDialog from './edit.vue';
-  import { basicModal, useModal } from '@/components/Modal';
   import { schemas } from './querySchemas';
   import { renderIcon } from '@/utils';
 
+  /**
+   * 定义常量
+   */
   const message = useMessage();
   const dialog = useDialog();
   const basicTableRef = ref();
@@ -76,14 +76,19 @@
   const editVisible = ref(false);
   const layoutId = ref(0);
   const rowKeys = ref([]);
-  const exportLoading = ref(false);
-
   const showModal = ref(false);
+
+  /**
+   * 定义查询参数
+   */
   const formParams = reactive({
-    name: '',
+    layoutId: '',
-    status: '',
+    type: '',
   });
 
+  /**
+   * 定义操作栏
+   */
   const actionColumn = reactive({
     width: 200,
     title: '操作',
@@ -113,24 +118,36 @@
     },
   });
 
-  function addTable() {
+  /**
-    showModal.value = true;
+   * 加载数据列表
-  }
+   * @param res 参数
-
+   */
   const loadDataTable = async (res) => {
     rowKeys.value = [];
     const result = await getLayoutList({ ...formParams, ...res });
     return result;
   };
 
+  /**
+   * 数据行选中事件
+   * @param keys 参数
+   */
   function onCheckedRow(keys) {
     rowKeys.value = keys;
   }
 
+  /**
+   * 刷新数据列表
+   * @param noRefresh 参数
+   */
   function reloadTable(noRefresh = '') {
     basicTableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
   }
 
+  /**
+   * 执行提交表单
+   * @param values 参数
+   */
   function handleSubmit(values: Recordable) {
     for (const key in formParams) {
       formParams[key] = '';
@@ -141,6 +158,10 @@
     reloadTable();
   }
 
+  /**
+   * 执行重置
+   * @param values 参数
+   */
   function handleReset(values: Recordable) {
     for (const key in formParams) {
       formParams[key] = '';
@@ -151,6 +172,9 @@
     reloadTable();
   }
 
+  /**
+   * 执行注册
+   */
   const [register, {}] = useForm({
     gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
     labelWidth: 80,
@@ -165,6 +189,7 @@
     await nextTick();
     editVisible.value = true;
   };
+
   /**
    * 执行编辑
    */
@@ -173,6 +198,7 @@
     await nextTick();
     editVisible.value = true;
   }
+
   /**
    * 执行删除
    * @param id 参数

src/views/content/layoutItem/layout/index.vue

@@ -40,6 +40,7 @@
 
   const emit = defineEmits(['success', 'update:visible', 'update:checked-row-keys']);
   const message = useMessage();
+
   /**
    * 定义接收的参数
    */
@@ -58,10 +59,15 @@
   const selectRow = ref({});
   const tableRef = ref();
   const checkedKeys = ref([]);
+
+  /**
+   * 定义模态
+   */
   const [modalRegister, { openModal, setSubLoading }] = useModal({
     title: '选择文章',
     width: 1000,
   });
+
   /**
    * 定义查询参数
    */
@@ -127,7 +133,7 @@
   }
 
   /**
-   * 注册
+   * 执行注册
    */
   const [register, {}] = useForm({
     gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
@@ -173,6 +179,12 @@
       },
     };
   };
+
+  /**
+   * 行点击事件
+   * @param record 数据记录
+   * @param row 数据行
+   */
   const rowClick = (record, row) => {
     console.log(record);
     checkedKeys.value = record;
@@ -184,7 +196,9 @@
    */
   onMounted(() => {});
 
-  //导出方法
+  /**
+   * 定义函数
+   */
   defineExpose({
     openModal,
   });