wangjiadong
/
comp
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cms 文章管理 功能添加

Browse Source
main
hechao.zhu 1 year ago
parent f3e529c6b3
commit 35805f42f6
2 changed files with 158 additions and 165 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      jeecgboot-vue3-master/src/views/cms/admin/articel/CmsArticle.api.ts
  2. 317
      jeecgboot-vue3-master/src/views/cms/admin/articel/CmsArticleList.vue

6
jeecgboot-vue3-master/src/views/cms/admin/articel/CmsArticle.api.ts
Unescape View File

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

317
jeecgboot-vue3-master/src/views/cms/admin/articel/CmsArticleList.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save