文章管理优化

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

@@ -23,10 +23,8 @@ export const getExportUrl = Api.exportXls;
  */
 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

@@ -8,11 +8,53 @@
         </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>-->
       </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),
+                  },
+                },
+              ]"
+        />-->
       </template>
       <!--字段回显插槽-->
       <template #htmlSlot="{text}">
@@ -35,162 +77,166 @@
 </template>
 
 <script lang="ts" name="cms-cmsArticle" setup>
-  import {ref} from 'vue';
-  import {useModal} from '/@/components/Modal';
-  import {useListPage} from '/@/hooks/system/useListPage'
-  import {columns, searchFormSchema} from './CmsArticle.data';
-  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'
-      },
+import {ref} from 'vue';
+import {BasicTable, TableAction} from '/@/components/Table';
+import {useModal} from '/@/components/Modal';
+import {useListPage} from '/@/hooks/system/useListPage'
+import CmsArticleModal from './components/CmsArticleModal.vue'
+import {columns, searchFormSchema} from './CmsArticle.data';
+import {
+  batchDelete,
+  deleteOne,
+  getExportUrl,
+  getImportUrl,
+  list,
+  updateStatus
+} from './CmsArticle.api';
+// import {updateStatus} from './CmsArticle.api';
+import {Update} from "/@/views/topic/Topic.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: [],
     },
-    exportConfig: {
-      name: "文章",
-      url: getExportUrl,
+    actionColumn: {
+      width: 180,
+      fixed: 'right'
     },
-    importConfig: {
-      url: getImportUrl,
-      success: handleSuccess
-    },
-  })
+  },
+  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,
-    });
-  }
+/**
+ * 新增事件
+ */
+function handleAdd() {
+  openModal(true, {
+    isUpdate: false,
+    showFooter: true,
+  });
+}
 
-  /**
-   * 编辑事件
-   */
-  function handleEdit(record: Recordable) {
-    openModal(true, {
-      record,
-      isUpdate: true,
-      showFooter: true,
-    });
-  }
+/**
+ * 编辑事件
+ */
+function handleEdit(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: true,
+  });
+}
 
-  /**
-   * 详情
-   */
-  function handleDetail(record: Recordable) {
-    openModal(true, {
-      record,
-      isUpdate: true,
-      showFooter: false,
-    });
-  }
+function update2(record: Recordable, isopen) {
+  record.isopen = isopen;
+  updateStatus(record)
+  reload()
+}
 
-  function operationStatus(record: Recordable, isopen) {
-    record.isopen = isopen;
-    updateStatus(record)
-    reload()
-  }
+/**
+ * 详情
+ */
+function handleDetail(record: Recordable) {
+  openModal(true, {
+    record,
+    isUpdate: true,
+    showFooter: false,
+  });
+}
 
-  /**
-   * 删除事件
-   */
-  async function handleDelete(record) {
-    await deleteOne({id: record.id}, handleSuccess);
-  }
+/**
+ * 删除事件
+ */
+async function handleDelete(record) {
+  await deleteOne({id: record.id}, handleSuccess);
+}
 
-  /**
-   * 批量删除事件
-   */
-  async function batchHandleDelete() {
-    await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
-  }
+/**
+ * 批量删除事件
+ */
+async function batchHandleDelete() {
+  await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
+}
 
-  /**
-   * 成功回调
-   */
-  function handleSuccess() {
-    (selectedRowKeys.value = []) && reload();
-  }
+/**
+ * 成功回调
+ */
+function handleSuccess() {
+  (selectedRowKeys.value = []) && reload();
+}
 
-  /**
-   * 操作栏
-   */
-  function getTableAction(record) {
-    const actions = [
-      {
-        label: '编辑',
-        onClick: handleEdit.bind(null, record),
-      },
-      {
-        label: '删除',
-        popConfirm: {
-          title: '是否确认删除',
-          confirm: handleDelete.bind(null, record),
-        }
+/**
+ * 操作栏
+ */
+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;
+  ];
+  if (record.status == "1") {
+    actions.unshift({
+      label: '取消发布',
+      onClick: update2.bind(null, record, "0"),
+    });
   }
+  if (record.status == "0") {
+    actions.unshift({
+      label: '发布',
+      onClick: update2.bind("1", record, "1"),
+    });
+  }
+  return actions;
+}
 
-  /**
-   * 下拉操作栏
-   */
-  function getDropDownAction(record) {
-    return [
-      {
-        label: '详情',
-        onClick: handleDetail.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),
       }
-    ]
-  }
+    }
+  ]
+}
 
 
 </script>