cms 文章管理 功能添加

jeecgboot-vue3-master/src/views/cms/admin/articel/CmsArticle.api.ts

@@ -11,6 +11,7 @@ enum Api {
   deleteBatch = '/cms/cmsArticle/deleteBatch',
   importExcel = '/cms/cmsArticle/importExcel',
   exportXls = '/cms/cmsArticle/exportXls',
+  operationStatus = '/cms/cmsArticle/operationStatus',
 }
 /**
  * 导出api
@@ -21,6 +22,11 @@ export const getExportUrl = Api.exportXls;
  * 导入api
  */
 export const getImportUrl = Api.importExcel;
+
+
+export const updateStatus = (params) => defHttp.post({url: Api.operationStatus, params});
+
+
 /**
  * 列表接口
  * @param params

jeecgboot-vue3-master/src/views/cms/admin/articel/CmsArticleList.vue

@@ -1,70 +1,32 @@
 <template>
   <div>
     <!--引用表格-->
-   <BasicTable @register="registerTable" :rowSelection="rowSelection">
-     <!--插槽:table标题-->
+    <BasicTable @register="registerTable" :rowSelection="rowSelection">
+      <!--插槽:table标题-->
       <template #tableTitle>
-          <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-          <a-button  type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
-        <!--  <j-upload-button  type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
-          <a-dropdown v-if="selectedRowKeys.length > 0">
-              <template #overlay>
-                <a-menu>
-                  <a-menu-item key="1" @click="batchHandleDelete">
-                    <Icon icon="ant-design:delete-outlined"></Icon>
-                    删除
-                  </a-menu-item>
-                </a-menu>
-              </template>
-              <a-button>批量操作
-                <Icon icon="mdi:chevron-down"></Icon>
-              </a-button>
-          </a-dropdown>-->
+        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
+        </a-button>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出
+        </a-button>
       </template>
-       <!--操作栏-->
+      <!--操作栏-->
       <template #action="{ record }">
-<!--        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>-->
-        <TableAction :actions="getTableAction(record)" />
-        <!--<TableAction
-          :stopButtonPropagation="true"
-          :actions="[
-                {
-                  label: '1',
-                  // type: 'link',
-                  size: 'small',
-                  icon: 'ant-design:plus-circle-outlined',
-                  onClick: add.bind(null, record),
-                },
-                {
-                  label: '2',
-                  // type: 'link',
-                  size: 'small',
-                  icon: 'fa6-regular:pen-to-square',
-                  onClick: editor.bind(null, record),
-                },
-                {
-                  label: '3',
-                  // color: 'error',
-                  icon: 'ic:outline-delete-outline',
-                  popConfirm: {
-                    title: '确定删除该数据吗？',
-                    confirm: del.bind(null, record),
-                  },
-                },
-              ]"
-        />-->
+        <!--        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>-->
+        <TableAction :actions="getTableAction(record)"/>
       </template>
       <!--字段回显插槽-->
       <template #htmlSlot="{text}">
-         <div v-html="text"></div>
+        <div v-html="text"></div>
       </template>
       <!--省市区字段回显插槽-->
       <template #pcaSlot="{text}">
-         {{ getAreaTextByCode(text) }}
+        {{ getAreaTextByCode(text) }}
       </template>
       <template #fileSlot="{text}">
-         <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
-         <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button>
+        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
+        <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined"
+                  size="small" @click="downloadFile(text)">下载
+        </a-button>
       </template>
     </BasicTable>
     <!-- 表单区域 -->
@@ -73,137 +35,162 @@
 </template>
 
 <script lang="ts" name="cms-cmsArticle" setup>
-  import {ref, computed, unref} from 'vue';
-  import {BasicTable, useTable, TableAction} from '/@/components/Table';
+  import {ref} from 'vue';
   import {useModal} from '/@/components/Modal';
-  import { useListPage } from '/@/hooks/system/useListPage'
-  import CmsArticleModal from './components/CmsArticleModal.vue'
+  import {useListPage} from '/@/hooks/system/useListPage'
   import {columns, searchFormSchema} from './CmsArticle.data';
-  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './CmsArticle.api';
+  import {
+    batchDelete,
+    deleteOne,
+    getExportUrl,
+    getImportUrl,
+    list,
+    updateStatus
+  } from './CmsArticle.api';
   // import { downloadFile } from '/@/utils/common/renderUtils';
   const checkedKeys = ref<Array<string | number>>([]);
   //注册model
   const [registerModal, {openModal}] = useModal();
   //注册table数据
-  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
-      tableProps:{
-           title: '文章',
-           api: list,
-           columns,
-           canResize:false,
-           formConfig: {
-              //labelWidth: 120,
-              schemas: searchFormSchema,
-              autoSubmitOnEnter:true,
-              showAdvancedButton:true,
-              fieldMapToNumber: [
-              ],
-              fieldMapToTime: [
-              ],
-            },
-           actionColumn: {
-               width: 120,
-               fixed:'right'
-            },
+  const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
+    tableProps: {
+      title: '文章',
+      api: list,
+      columns,
+      canResize: false,
+      formConfig: {
+        //labelWidth: 120,
+        schemas: searchFormSchema,
+        autoSubmitOnEnter: true,
+        showAdvancedButton: true,
+        fieldMapToNumber: [],
+        fieldMapToTime: [],
       },
-       exportConfig: {
-            name:"文章",
-            url: getExportUrl,
-          },
-          importConfig: {
-            url: getImportUrl,
-            success: handleSuccess
-          },
+      actionColumn: {
+        width: 120,
+        fixed: 'right'
+      },
+    },
+    exportConfig: {
+      name: "文章",
+      url: getExportUrl,
+    },
+    importConfig: {
+      url: getImportUrl,
+      success: handleSuccess
+    },
   })
 
-  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
+  const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext
 
-   /**
-    * 新增事件
-    */
+  /**
+   * 新增事件
+   */
   function handleAdd() {
-     openModal(true, {
-       isUpdate: false,
-       showFooter: true,
-     });
+    openModal(true, {
+      isUpdate: false,
+      showFooter: true,
+    });
   }
-   /**
-    * 编辑事件
-    */
+
+  /**
+   * 编辑事件
+   */
   function handleEdit(record: Recordable) {
-     openModal(true, {
-       record,
-       isUpdate: true,
-       showFooter: true,
-     });
-   }
-   /**
-    * 详情
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: true,
+    });
+  }
+
+  /**
+   * 详情
    */
   function handleDetail(record: Recordable) {
-     openModal(true, {
-       record,
-       isUpdate: true,
-       showFooter: false,
-     });
-   }
-   /**
-    * 删除事件
-    */
+    openModal(true, {
+      record,
+      isUpdate: true,
+      showFooter: false,
+    });
+  }
+
+  function operationStatus(record: Recordable, isopen) {
+    record.isopen = isopen;
+    updateStatus(record)
+    reload()
+  }
+
+  /**
+   * 删除事件
+   */
   async function handleDelete(record) {
-     await deleteOne({id: record.id}, handleSuccess);
-   }
-   /**
-    * 批量删除事件
-    */
+    await deleteOne({id: record.id}, handleSuccess);
+  }
+
+  /**
+   * 批量删除事件
+   */
   async function batchHandleDelete() {
-     await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
-   }
-   /**
-    * 成功回调
-    */
+    await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
+  }
+
+  /**
+   * 成功回调
+   */
   function handleSuccess() {
-      (selectedRowKeys.value = []) && reload();
-   }
-   /**
-      * 操作栏
-      */
-  function getTableAction(record){
-       return [
-         {
-           label: '编辑',
-           onClick: handleEdit.bind(null, record),
-         },
-         {
-           label: '取消发布',
-           onClick: handleEdit.bind(null, record),
-         },
-         {
-           label: '删除',
-           popConfirm: {
-             title: '是否确认删除',
-             confirm: handleDelete.bind(null, record),
-           }
-         }
-       ]
-   }
-     /**
-        * 下拉操作栏
-        */
-  function getDropDownAction(record){
-       return [
-         {
-           label: '详情',
-           onClick: handleDetail.bind(null, record),
-         }, {
-           label: '删除',
-           popConfirm: {
-             title: '是否确认删除',
-             confirm: handleDelete.bind(null, record),
-           }
-         }
-       ]
-   }
+    (selectedRowKeys.value = []) && reload();
+  }
+
+  /**
+   * 操作栏
+   */
+  function getTableAction(record) {
+    const actions = [
+      {
+        label: '编辑',
+        onClick: handleEdit.bind(null, record),
+      },
+      {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        }
+      }
+    ];
+    if (record.status == "0") {
+      actions.unshift({
+        label: '发布',
+        onClick: operationStatus.bind(null, record, "1"),
+      });
+    }
+    if (record.status == "1") {
+      actions.unshift({
+        label: '取消发布',
+        onClick: operationStatus.bind(null, record, "0"),
+      });
+    }
+    return actions;
+  }
+
+  /**
+   * 下拉操作栏
+   */
+  function getDropDownAction(record) {
+    return [
+      {
+        label: '详情',
+        onClick: handleDetail.bind(null, record),
+      }, {
+        label: '删除',
+        popConfirm: {
+          title: '是否确认删除',
+          confirm: handleDelete.bind(null, record),
+        }
+      }
+    ]
+  }
 
 
 </script>