cms栏目管理功能添加

dev
hechao.zhu 1 year ago
parent 303f10c000
commit 0ce0bab975
  1. 181
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/cms/controller/CmsColumnController.java
  2. 3
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/cms/entity/CmsColumn.java
  3. 19
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/cms/mapper/CmsColumnMapper.java
  4. 19
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/cms/mapper/xml/CmsColumnMapper.xml
  5. 40
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/cms/service/ICmsColumnService.java
  6. 189
      jeecg-boot-master/jeecg-module-demo/src/main/java/org/jeecg/modules/demo/cms/service/impl/CmsColumnServiceImpl.java
  7. 32
      jeecgboot-vue3-master/src/views/cms/admin/column/CmsColumn.api.ts
  8. 56
      jeecgboot-vue3-master/src/views/cms/admin/column/CmsColumn.data.ts
  9. 243
      jeecgboot-vue3-master/src/views/cms/admin/column/CmsColumnList.vue
  10. 4
      jeecgboot-vue3-master/src/views/cms/admin/column/components/CmsColumnForm.vue
  11. 106
      jeecgboot-vue3-master/src/views/cms/admin/column/components/CmsColumnModal.vue

@ -6,11 +6,13 @@ import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.apache.commons.lang.StringUtils;
import org.jeecg.common.api.vo.Result;
import org.jeecg.common.aspect.annotation.AutoLog;
import org.jeecg.common.system.base.controller.JeecgController;
import org.jeecg.common.system.query.QueryGenerator;
import org.jeecg.common.system.vo.SelectTreeModel;
import org.jeecg.common.util.oConvertUtils;
import org.jeecg.modules.demo.cms.entity.CmsColumn;
import org.jeecg.modules.demo.cms.service.ICmsColumnService;
import org.springframework.beans.factory.annotation.Autowired;
@ -20,6 +22,7 @@ import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Arrays;
import java.util.List;
/**
* @Description: cms栏目
@ -58,6 +61,168 @@ public class CmsColumnController extends JeecgController<CmsColumn, ICmsColumnSe
return Result.OK(pageList);
}
/**
* 分页列表查询
*
* @param CmsColumn
* @param pageNo
* @param pageSize
* @param req
* @return
*/
@GetMapping(value = "/rootList")
public Result<IPage<CmsColumn>> rootList(CmsColumn CmsColumn,
@RequestParam(name = "pageNo", defaultValue = "1") Integer pageNo,
@RequestParam(name = "pageSize", defaultValue = "10") Integer pageSize,
HttpServletRequest req) {
// String hasQuery = req.getParameter("hasQuery");
// if (hasQuery != null && "true".equals(hasQuery)) {
// QueryWrapper<CmsColumn> queryWrapper = QueryGenerator.initQueryWrapper(CmsColumn, req.getParameterMap());
// List<CmsColumn> list = cmsColumnService.queryTreeListNoPage(queryWrapper);
// IPage<CmsColumn> pageList = new Page<>(1, 10, list.size());
// pageList.setRecords(list);
// return Result.OK(pageList);
// } else {
// String parentId = CmsColumn.getPid();
// if (oConvertUtils.isEmpty(parentId)) {
// parentId = "0";
// }
// CmsColumn.setPid(null);
// QueryWrapper<CmsColumn> queryWrapper = QueryGenerator.initQueryWrapper(CmsColumn, req.getParameterMap());
// // 使用 eq 防止模糊查询
// queryWrapper.eq("pid", parentId);
// Page<CmsColumn> page = new Page<CmsColumn>(pageNo, pageSize);
// IPage<CmsColumn> pageList = cmsColumnService.page(page, queryWrapper);
// for (CmsColumn CmsColumn1 : pageList.getRecords()) {
// if (CmsColumn1.getPid().equals("0"))
// CmsColumn1.setPid("无上级");
// }
//
// return Result.OK(pageList);
// }
if (oConvertUtils.isEmpty(CmsColumn.getPid())) {
CmsColumn.setPid("0");
}
Result<IPage<CmsColumn>> result = new Result<>();
QueryWrapper<CmsColumn> queryWrapper = QueryGenerator.initQueryWrapper(CmsColumn, req.getParameterMap());
String name = CmsColumn.getName();
if (StringUtils.isBlank(name)) {
queryWrapper.eq("pid", CmsColumn.getPid());
}
Page<CmsColumn> page = new Page<CmsColumn>(pageNo, pageSize);
IPage<CmsColumn> pageList = cmsColumnService.page(page, queryWrapper);
result.setSuccess(true);
result.setResult(pageList);
return result;
}
/**
* vue3专用加载节点的子数据
*
* @param pid
* @return
*/
@RequestMapping(value = "/loadTreeChildren", method = RequestMethod.GET)
public Result<List<SelectTreeModel>> loadTreeChildren(@RequestParam(name = "pid") String pid) {
Result<List<SelectTreeModel>> result = new Result<>();
try {
List<SelectTreeModel> ls = cmsColumnService.queryListByPid(pid);
result.setResult(ls);
result.setSuccess(true);
} catch (Exception e) {
e.printStackTrace();
result.setMessage(e.getMessage());
result.setSuccess(false);
}
return result;
}
/**
* vue3专用加载一级节点/如果是同步 则所有数据
*
* @param async
* @param pcode
* @return
*/
@RequestMapping(value = "/loadTreeRoot", method = RequestMethod.GET)
public Result<List<SelectTreeModel>> loadTreeRoot(@RequestParam(name = "async") Boolean async,
@RequestParam(name = "pcode") String pcode) {
Result<List<SelectTreeModel>> result = new Result<>();
try {
List<SelectTreeModel> ls = cmsColumnService.queryListByCode(pcode);
if (!async) {
loadAllChildren(ls);
}
result.setResult(ls);
result.setSuccess(true);
} catch (Exception e) {
e.printStackTrace();
result.setMessage(e.getMessage());
result.setSuccess(false);
}
return result;
}
/**
* vue3专用递归求子节点 同步加载用到
*
* @param ls
*/
private void loadAllChildren(List<SelectTreeModel> ls) {
for (SelectTreeModel tsm : ls) {
List<SelectTreeModel> temp = cmsColumnService.queryListByPid(tsm.getKey());
if (temp != null && temp.size() > 0) {
tsm.setChildren(temp);
loadAllChildren(temp);
}
}
}
/**
* 获取子数据
*
* @param CmsColumn
* @param req
* @return
*/
//@AutoLog(value = "基础能力设置-获取子数据")
@ApiOperation(value = "基础能力设置-获取子数据", notes = "基础能力设置-获取子数据")
@GetMapping(value = "/childList")
public Result<List<CmsColumn>> queryPageList(CmsColumn CmsColumn, HttpServletRequest req) {
Result<List<CmsColumn>> result = new Result();
QueryWrapper<CmsColumn> queryWrapper = QueryGenerator.initQueryWrapper(CmsColumn, req.getParameterMap());
List<CmsColumn> list = cmsColumnService.list(queryWrapper);
result.setSuccess(true);
result.setResult(list);
return result;
}
/**
* 批量查询子节点
*
* @param parentIds 父ID多个采用半角逗号分割
* @param parentIds
* @return
*/
//@AutoLog(value = "基础能力设置-批量获取子数据")
@ApiOperation(value = "基础能力设置-批量获取子数据", notes = "基础能力设置-批量获取子数据")
@GetMapping("/getChildListBatch")
public Result getChildListBatch(@RequestParam("parentIds") String parentIds) {
try {
QueryWrapper<CmsColumn> queryWrapper = new QueryWrapper<>();
List<String> parentIdList = Arrays.asList(parentIds.split(","));
queryWrapper.in("pid", parentIdList);
List<CmsColumn> list = cmsColumnService.list(queryWrapper);
IPage<CmsColumn> pageList = new Page<>(1, 10, list.size());
pageList.setRecords(list);
return Result.OK(pageList);
} catch (Exception e) {
log.error(e.getMessage(), e);
return Result.error("批量查询子节点失败:" + e.getMessage());
}
}
/**
* 添加
*
@ -96,11 +261,17 @@ public class CmsColumnController extends JeecgController<CmsColumn, ICmsColumnSe
*/
@AutoLog(value = "cms栏目-通过id删除")
@ApiOperation(value = "cms栏目-通过id删除", notes = "cms栏目-通过id删除")
// @RequiresPermissions("cms:cms_column:delete")
@DeleteMapping(value = "/delete")
public Result<String> delete(@RequestParam(name = "id", required = true) String id) {
cmsColumnService.removeById(id);
return Result.OK("删除成功!");
public Result<CmsColumn> delete(@RequestParam(name = "id", required = true) String id) {
Result<CmsColumn> result = new Result();
CmsColumn sysCategory = cmsColumnService.getById(id);
if (sysCategory == null) {
result.error500("未找到对应实体");
} else {
this.cmsColumnService.delete(id);
result.success("删除成功!");
}
return result;
}
/**

@ -8,6 +8,7 @@ import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;
import org.jeecg.common.aspect.annotation.Dict;
import org.jeecgframework.poi.excel.annotation.Excel;
import java.io.Serializable;
@ -64,6 +65,7 @@ public class CmsColumn implements Serializable {
*/
@Excel(name = "显示", width = 15)
@ApiModelProperty(value = "显示")
@Dict(dicCode = "captain_code")
private String isShow;
/**
* 名称
@ -82,5 +84,6 @@ public class CmsColumn implements Serializable {
*/
@Excel(name = "是否有子节点", width = 15)
@ApiModelProperty(value = "是否有子节点")
@Dict(dicCode = "captain_code")
private String hasChild;
}

@ -1,8 +1,10 @@
package org.jeecg.modules.demo.cms.mapper;
import java.util.List;
import java.util.Map;
import org.apache.ibatis.annotations.Param;
import org.jeecg.common.system.vo.SelectTreeModel;
import org.jeecg.modules.demo.cms.entity.CmsColumn;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
@ -14,4 +16,21 @@ import com.baomidou.mybatisplus.core.mapper.BaseMapper;
*/
public interface CmsColumnMapper extends BaseMapper<CmsColumn> {
/**
* 编辑节点状态
* @param id
* @param status
*/
void updateTreeNodeStatus(@Param("id") String id,@Param("status") String status);
/**
* vue3专用根据父级ID查询树节点数据
*
* @param pid
* @param query
* @return
*/
List<SelectTreeModel> queryListByPid(@Param("pid") String pid, @Param("query") Map<String, String> query);
}

@ -2,4 +2,23 @@
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.jeecg.modules.demo.cms.mapper.CmsColumnMapper">
<select id="queryListByPid" parameterType="java.lang.Object" resultType="org.jeecg.common.system.vo.SelectTreeModel">
select
id as "key",
name as "title",
(case when has_child = '1' then 0 else 1 end) as isLeaf,
pid as parentId
from cms_column
where pid = #{pid}
<if test="query != null">
<foreach collection="query.entrySet()" item="value" index="key">
and ${key} = #{value}
</foreach>
</if>
</select>
<update id="updateTreeNodeStatus" parameterType="java.lang.String">
update has_child set has_child = #{status} where id = #{id}
</update>
</mapper>

@ -1,7 +1,11 @@
package org.jeecg.modules.demo.cms.service;
import org.jeecg.modules.demo.cms.entity.CmsColumn;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.service.IService;
import org.jeecg.common.system.vo.SelectTreeModel;
import org.jeecg.modules.demo.cms.entity.CmsColumn;
import java.util.List;
/**
* @Description: cms栏目
@ -11,4 +15,38 @@ import com.baomidou.mybatisplus.extension.service.IService;
*/
public interface ICmsColumnService extends IService<CmsColumn> {
/**根节点父ID的值*/
public static final String ROOT_PID_VALUE = "0";
/**树节点有子节点状态值*/
public static final String HASCHILD = "1";
/**树节点无子节点状态值*/
public static final String NOCHILD = "0";
/**
* 查询所有数据无分页
*
* @param queryWrapper
* @return List<CmsColumn>
*/
List<CmsColumn> queryTreeListNoPage(QueryWrapper<CmsColumn> queryWrapper);
/**
* vue3专用根据父级编码加载分类字典的数据
*
* @param parentCode
* @return
*/
List<SelectTreeModel> queryListByCode(String parentCode);
/**
* vue3专用根据pid查询子节点集合
*
* @param pid
* @return
*/
List<SelectTreeModel> queryListByPid(String pid);
void delete(String id);
}

@ -1,19 +1,204 @@
package org.jeecg.modules.demo.cms.service.impl;
import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.LambdaUpdateWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.jeecg.common.constant.SymbolConstant;
import org.jeecg.common.exception.JeecgBootException;
import org.jeecg.common.system.vo.SelectTreeModel;
import org.jeecg.common.util.oConvertUtils;
import org.jeecg.modules.demo.cms.entity.CmsColumn;
import org.jeecg.modules.demo.cms.mapper.CmsColumnMapper;
import org.jeecg.modules.demo.cms.service.ICmsColumnService;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
/**
* @Description: cms栏目
* @Author: jeecg-boot
* @Date: 2023-10-11
* @Date: 2023-10-11
* @Version: V1.0
*/
@Service
public class CmsColumnServiceImpl extends ServiceImpl<CmsColumnMapper, CmsColumn> implements ICmsColumnService {
@Override
public List<CmsColumn> queryTreeListNoPage(QueryWrapper<CmsColumn> queryWrapper) {
List<CmsColumn> dataList = baseMapper.selectList(queryWrapper);
List<CmsColumn> mapList = new ArrayList<>();
for (CmsColumn data : dataList) {
String pidVal = data.getPid();
//递归查询子节点的根节点
if (pidVal != null && !ICmsColumnService.NOCHILD.equals(pidVal)) {
CmsColumn rootVal = this.getTreeRoot(pidVal);
if (rootVal != null && !mapList.contains(rootVal)) {
mapList.add(rootVal);
}
} else {
if (!mapList.contains(data)) {
mapList.add(data);
}
}
}
return mapList;
}
@Override
public List<SelectTreeModel> queryListByCode(String parentCode) {
String pid = ROOT_PID_VALUE;
if (oConvertUtils.isNotEmpty(parentCode)) {
LambdaQueryWrapper<CmsColumn> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(CmsColumn::getPid, parentCode);
List<CmsColumn> list = baseMapper.selectList(queryWrapper);
if (list == null || list.size() == 0) {
throw new JeecgBootException("该编码【" + parentCode + "】不存在,请核实!");
}
if (list.size() > 1) {
throw new JeecgBootException("该编码【" + parentCode + "】存在多个,请核实!");
}
pid = list.get(0).getId();
}
return baseMapper.queryListByPid(pid, null);
}
@Override
public List<SelectTreeModel> queryListByPid(String pid) {
if (oConvertUtils.isEmpty(pid)) {
pid = ROOT_PID_VALUE;
}
return baseMapper.queryListByPid(pid, null);
}
@Override
@Transactional(rollbackFor = Exception.class)
public void delete(String ids) {
String allIds = this.queryTreeChildIds(ids);
String pids = this.queryTreePids(ids);
//1.删除时将节点下所有子节点一并删除
this.baseMapper.deleteBatchIds(Arrays.asList(allIds.split(",")));
//2.将父节点中已经没有下级的节点,修改为没有子节点
if (oConvertUtils.isNotEmpty(pids)) {
LambdaUpdateWrapper<CmsColumn> updateWrapper = new UpdateWrapper<CmsColumn>()
.lambda()
.in(CmsColumn::getId, Arrays.asList(pids.split(",")))
.set(CmsColumn::getHasChild, "0");
this.update(updateWrapper);
}
}
/**
* 查询需修改标识的父节点ids
*
* @param ids
* @return
*/
private String queryTreePids(String ids) {
StringBuffer sb = new StringBuffer();
//获取id数组
String[] idArr = ids.split(",");
for (String id : idArr) {
if (id != null) {
CmsColumn category = this.baseMapper.selectById(id);
//根据id查询pid值
String metaPid = category.getPid();
//查询此节点上一级是否还有其他子节点
LambdaQueryWrapper<CmsColumn> queryWrapper = new LambdaQueryWrapper<>();
queryWrapper.eq(CmsColumn::getPid, metaPid);
queryWrapper.notIn(CmsColumn::getId, Arrays.asList(idArr));
List<CmsColumn> dataList = this.baseMapper.selectList(queryWrapper);
boolean flag = (dataList == null || dataList.size() == 0) && !Arrays.asList(idArr).contains(metaPid)
&& !sb.toString().contains(metaPid);
if (flag) {
//如果当前节点原本有子节点 现在木有了,更新状态
sb.append(metaPid).append(",");
}
}
}
if (sb.toString().endsWith(SymbolConstant.COMMA)) {
sb = sb.deleteCharAt(sb.length() - 1);
}
return sb.toString();
}
/**
* 根据所传pid查询旧的父级节点的子节点并修改相应状态值
*
* @param pid
*/
private void updateOldParentNode(String pid) {
if (!ICmsColumnService.ROOT_PID_VALUE.equals(pid)) {
Long count = baseMapper.selectCount(new QueryWrapper<CmsColumn>().eq("pid", pid));
if (count == null || count <= 1) {
// baseMapper.updateTreeNodeStatus(pid, ICmsColumnService.NOCHILD);
this.lambdaUpdate().set(CmsColumn::getPid, ICmsColumnService.NOCHILD)
.eq(CmsColumn::getPid, pid).update();
}
}
}
/**
* 递归查询节点的根节点
*
* @param pidVal
* @return
*/
private CmsColumn getTreeRoot(String pidVal) {
CmsColumn data = baseMapper.selectById(pidVal);
if (data != null && !ICmsColumnService.ROOT_PID_VALUE.equals(data.getPid())) {
return this.getTreeRoot(data.getPid());
} else {
return data;
}
}
/**
* 根据id查询所有子节点id
*
* @param ids
* @return
*/
private String queryTreeChildIds(String ids) {
//获取id数组
String[] idArr = ids.split(",");
StringBuffer sb = new StringBuffer();
for (String pidVal : idArr) {
if (pidVal != null) {
if (!sb.toString().contains(pidVal)) {
if (sb.toString().length() > 0) {
sb.append(",");
}
sb.append(pidVal);
this.getTreeChildIds(pidVal, sb);
}
}
}
return sb.toString();
}
/**
* 递归查询所有子节点
*
* @param pidVal
* @param sb
* @return
*/
private StringBuffer getTreeChildIds(String pidVal, StringBuffer sb) {
List<CmsColumn> dataList = baseMapper.selectList(new QueryWrapper<CmsColumn>().eq("pid", pidVal));
if (dataList != null && dataList.size() > 0) {
for (CmsColumn tree : dataList) {
if (!sb.toString().contains(tree.getId())) {
sb.append(",").append(tree.getId());
}
this.getTreeChildIds(tree.getId(), sb);
}
}
return sb;
}
}

@ -4,13 +4,16 @@ import { useMessage } from "/@/hooks/web/useMessage";
const { createConfirm } = useMessage();
enum Api {
list = '/cms/cmsColumn/list',
list = '/cms/cmsColumn/rootList',
save='/cms/cmsColumn/add',
edit='/cms/cmsColumn/edit',
deleteOne = '/cms/cmsColumn/delete',
deleteBatch = '/cms/cmsColumn/deleteBatch',
importExcel = '/cms/cmsColumn/importExcel',
exportXls = '/cms/cmsColumn/exportXls',
loadTreeData = '/cms/cmsColumn/loadTreeRoot',
getChildList = '/cms/cmsColumn/childList',
getChildListBatch = '/cms/cmsColumn/getChildListBatch',
}
/**
* api
@ -58,7 +61,32 @@ export const batchDelete = (params, handleSuccess) => {
*
* @param params
*/
export const saveOrUpdate = (params, isUpdate) => {
// export const saveOrUpdate = (params, isUpdate) => {
// let url = isUpdate ? Api.edit : Api.save;
// return defHttp.post({url: url, params});
// }
export const saveOrUpdateDict = (params, isUpdate) => {
let url = isUpdate ? Api.edit : Api.save;
return defHttp.post({url: url, params});
}
/**
*
* @param params
*/
export const loadTreeData = (params) =>
defHttp.get({url: Api.loadTreeData,params});
/**
*
* @param params
*/
export const getChildList = (params) =>
defHttp.get({url: Api.getChildList, params});
/**
*
* @param params
*/
export const getChildListBatch = (params) =>
defHttp.get({url: Api.getChildListBatch, params},{isTransformResponse:false});

@ -4,20 +4,21 @@ import { rules} from '/@/utils/helper/validator';
import { render } from '/@/utils/common/renderUtils';
//列表数据
export const columns: BasicColumn[] = [
// {
// title: '父级节点',
// align:"center",
// dataIndex: 'pid'
// },
{
title: '栏目名称',
align:"center",
dataIndex: 'name'
},
{
title: '父级节点',
align:"center",
dataIndex: 'pid'
align:"left",
dataIndex: 'name',
width: 350,
},
{
title: '是否有子节点',
title: '显示',
align:"center",
dataIndex: 'hasChild'
dataIndex: 'isShow_dictText'
},
{
title: '排序',
@ -36,6 +37,18 @@ export const searchFormSchema: FormSchema[] = [
];
//表单数据
export const formSchema: FormSchema[] = [
{
label: '父级节点',
field: 'pid',
component: 'JTreeSelect',
componentProps: {
dict: 'cms_column,name,id',
pidField: 'pid',
pidValue: '0',
hasChildField: 'has_child',
},
dynamicDisabled: true,
},
{
label: '栏目名称',
field: 'name',
@ -46,15 +59,24 @@ export const formSchema: FormSchema[] = [
];
},
},
// {
// label: '是否有子节点',
// field: 'hasChild',
// component: 'Input',
// },
{
label: '父级节点',
field: 'pid',
component: 'Input',
},
{
label: '是否有子节点',
field: 'hasChild',
component: 'Input',
label: '显示',
field: 'isShow',
component: 'RadioGroup',
componentProps: {
//options里面由一个一个的radio组成,支持disabled
options: [
{ label: '是', value: 1, },
{ label: '否', value: 0 },
],
defaultValue:1,
},
},
{
label: '排序',

@ -1,17 +1,20 @@
<template>
<div>
<!--引用表格-->
<BasicTable @register="registerTable" :rowSelection="rowSelection">
<BasicTable
@register="registerTable"
:rowSelection="rowSelection"
:expandedRowKeys="expandedRowKeys"
@expand="handleExpand"
@fetch-success="onFetchSuccess"
>
<!--插槽:table标题-->
<template #tableTitle>
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增
</a-button>
<!-- <a-button type="primary" @click="handleCreate" 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">
<!--<a-dropdown v-if="selectedRowKeys.length > 0">
<template #overlay>
<a-menu>
<a-menu-item key="1" @click="batchHandleDelete">
@ -20,29 +23,15 @@
</a-menu-item>
</a-menu>
</template>
<a-button>批量操作
<Icon icon="mdi:chevron-down"></Icon>
<a-button
>批量操作
<Icon icon="ant-design:down-outlined"></Icon>
</a-button>
</a-dropdown>
</a-dropdown>-->
</template>
<!--操作栏-->
<template #action="{ record }">
<TableAction :actions="getTableAction(record)"
:dropDownActions="getDropDownAction(record)"/>
</template>
<!--字段回显插槽-->
<template #htmlSlot="{text}">
<div v-html="text"></div>
</template>
<!--省市区字段回显插槽-->
<template #pcaSlot="{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>
<TableAction :actions="getTableAction(record)"/>
</template>
</BasicTable>
<!-- 表单区域 -->
@ -54,13 +43,22 @@
import {ref, computed, unref} from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import {useModal} from '/@/components/Modal';
import {useListPage} from '/@/hooks/system/useListPage'
import CmsColumnModal from './components/CmsColumnModal.vue'
import {columns, searchFormSchema} from './CmsColumn.data';
import {list, deleteOne, batchDelete, getImportUrl, getExportUrl} from './CmsColumn.api';
import {downloadFile} from '/@/utils/common/renderUtils';
import {
list,
batchDelete,
getImportUrl,
getExportUrl,
getChildList,
getChildListBatch,
deleteOne
} from './CmsColumn.api';
import {useListPage} from '/@/hooks/system/useListPage'
// import {downloadFile} from '/@/utils/common/renderUtils';
const checkedKeys = ref<Array<string | number>>([]);
const expandedRowKeys = ref([]);
// const checkedKeys = ref<Array<string | number>>([]);
//model
const [registerModal, {openModal}] = useModal();
//table
@ -79,9 +77,10 @@
fieldMapToTime: [],
},
actionColumn: {
width: 120,
width: 180,
fixed: 'right'
},
isTreeTable: true,
},
exportConfig: {
name: "cms栏目",
@ -91,20 +90,21 @@
url: getImportUrl,
success: handleSuccess
},
})
});
const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext
//table
const [registerTable, {reload,collapseAll,updateTableDataRecord, findTableDataRecord,getDataSource}, {rowSelection, selectedRowKeys}] = tableContext
/**
* 新增事件
*/
function handleAdd() {
function handleCreate() {
openModal(true, {
isUpdate: false,
showFooter: true,
});
}
/**
* 编辑事件
*/
@ -131,54 +131,183 @@
* 删除事件
*/
async function handleDelete(record) {
await deleteOne({id: record.id}, handleSuccess);
await deleteOne({id: record.id}, importSuccess);
}
/**
* 批量删除事件
*/
async function batchHandleDelete() {
await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
const ids = selectedRowKeys.value.filter((item) => !item.includes('loading'));
await batchDelete({ ids: ids }, importSuccess);
}
/**
* 成功回调
* 导入
*/
function handleSuccess() {
function importSuccess() {
//update-begin---author:wangshuai ---date:20220530 for[issues/54]------------
(selectedRowKeys.value = []) && reload();
//update-end---author:wangshuai ---date:20220530 for[issues/54]--------------
}
/**
* 操作栏
/**
* 添加下级
*/
function getTableAction(record) {
return [
{
label: '编辑',
onClick: handleEdit.bind(null, record),
function handleAddSub(record) {
openModal(true, {
record,
isUpdate: false,
});
}
/**
* 成功回调
*/
async function handleSuccess({ isUpdate,isSubAdd, values, expandedArr }) {
if (isUpdate) {
//
updateTableDataRecord(values.id, values);
} else {
if (!values['pid']) {
//
reload();
} else {
//
//update-begin-author:liusq---date:20230411--for: [issue/4550]---
if(isSubAdd){
await expandTreeNode(values.pid);
//update-end-author:liusq---date:20230411--for: [issue/4550]---
}else{
expandedRowKeys.value = [];
for (let key of unref(expandedArr)) {
await expandTreeNode(key);
}
}
}
]
}
}
/**
* 下拉操作栏
* 接口请求成功后回调
*/
function onFetchSuccess(result) {
getDataByResult(result.items) && loadDataByExpandedRows();
}
/**
* 根据已展开的行查询数据用于保存后刷新时异步加载子级的数据
*/
function getDropDownAction(record) {
async function loadDataByExpandedRows() {
if (unref(expandedRowKeys).length > 0) {
const res = await getChildListBatch({ parentIds: unref(expandedRowKeys).join(',') });
if (res.success && res.result.records.length > 0) {
//
let records = res.result.records;
const listMap = new Map();
for (let item of records) {
let pid = item['pid'];
if (unref(expandedRowKeys).includes(pid)) {
let mapList = listMap.get(pid);
if (mapList == null) {
mapList = [];
}
mapList.push(item);
listMap.set(pid, mapList);
}
}
let childrenMap = listMap;
let fn = (list) => {
if (list) {
list.forEach((data) => {
if (unref(expandedRowKeys).includes(data.id)) {
data.children = getDataByResult(childrenMap.get(data.id));
fn(data.children);
}
});
}
};
fn(getDataSource());
}
}
}
/**
* 处理数据集
*/
function getDataByResult(result) {
if (result && result.length > 0) {
return result.map((item) => {
//
if (item['hasChild'] == '1') {
let loadChild = { id: item.id + '_loadChild', name: 'loading...', isLoading: true };
item.children = [loadChild];
}
return item;
});
}
}
/**
*树节点展开合并
* */
async function handleExpand(expanded, record) {
// (expanded)(children)(isLoading)
if (expanded) {
expandedRowKeys.value.push(record.id);
if (record.children.length > 0 && !!record.children[0].isLoading) {
let result = await getChildList({ pid: record.id });
if (result && result.length > 0) {
record.children = getDataByResult(result);
} else {
record.children = null;
record.hasChild = '0';
}
}
} else {
let keyIndex = expandedRowKeys.value.indexOf(record.id);
if (keyIndex >= 0) {
expandedRowKeys.value.splice(keyIndex, 1);
}
}
}
/**
*操作表格后处理树节点展开合并
* */
async function expandTreeNode(key) {
let record:any = findTableDataRecord(key);
if(!expandedRowKeys.value.includes(key)){
expandedRowKeys.value.push(key);
}
let result = await getChildList({ pid: key });
if (result && result.length > 0) {
record.children = getDataByResult(result);
} else {
record.children = null;
record.hasChild = '0';
}
updateTableDataRecord(key, record);
}
/**
* 操作栏
*/
function getTableAction(record) {
return [
{
label: '详情',
onClick: handleDetail.bind(null, record),
}, {
label: '编辑',
onClick: handleEdit.bind(null, record),
},
{
label: '删除',
popConfirm: {
title: '是否确认删除',
title: '确定删除吗?',
confirm: handleDelete.bind(null, record),
}
}
]
},
},
{
label: '添加下级',
onClick: handleAddSub.bind(null, { pid: record.id }),
},
];
}
</script>
<style scoped>

@ -13,7 +13,7 @@
import {defHttp} from '/@/utils/http/axios';
import { propTypes } from '/@/utils/propTypes';
import {getBpmFormSchema} from '../CmsColumn.data';
import {saveOrUpdate} from '../CmsColumn.api';
import {saveOrUpdateDict} from '../CmsColumn.api';
export default defineComponent({
name: "CmsColumnForm",
@ -55,7 +55,7 @@
let data = getFieldsValue();
let params = Object.assign({}, formData, data);
console.log('表单数据', params)
await saveOrUpdate(params, true)
await saveOrUpdateDict(params, true)
}
initFormData();

@ -1,5 +1,5 @@
<template>
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="getTitle" :width="800" @ok="handleSubmit">
<BasicForm @register="registerForm"/>
</BasicModal>
</template>
@ -9,48 +9,94 @@
import {BasicModal, useModalInner} from '/@/components/Modal';
import {BasicForm, useForm} from '/@/components/Form/index';
import {formSchema} from '../CmsColumn.data';
import {saveOrUpdate} from '../CmsColumn.api';
import {loadTreeData, saveOrUpdateDict} from '../CmsColumn.api';
// Emits
const emit = defineEmits(['register','success']);
const isUpdate = ref(true);
const expandedRowKeys = ref([]);
const treeData = ref([]);
//
let model:Nullable<Recordable> = null;
//
const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({
const [registerForm, {setProps,resetFields, setFieldsValue, validate,updateSchema}] = useForm({
//labelWidth: 150,
schemas: formSchema,
showActionButtonGroup: false,
baseColProps: {span: 24}
baseColProps: {span: 24},
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 18 },
},
});
//
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
//
await resetFields();
setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
//
await setFieldsValue({
...data.record,
});
}
//
setProps({ disabled: !data?.showFooter })
//
await resetFields();
expandedRowKeys.value = [];
setModalProps({confirmLoading: false, minHeight: 80 ,showOkBtn: !!!data?.hideFooter});
isUpdate.value = !!data?.isUpdate;
if (data?.record) {
model = data.record;
//
await setFieldsValue({
...data.record,
});
} else {
model = null;
}
//
treeData.value = await loadTreeData({'async': false,'pcode':''});
//
setProps({ disabled: !!data?.hideFooter })
});
//
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
//
async function handleSubmit(v) {
try {
let values = await validate();
setModalProps({confirmLoading: true});
//
await saveOrUpdate(values, isUpdate.value);
//
closeModal();
//
emit('success');
} finally {
setModalProps({confirmLoading: false});
const getTitle = computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
/**
* 根据pid获取展开的节点
* @param pid
* @param arr
*/
function getExpandKeysByPid(pid,arr){
if(pid && arr && arr.length>0){
for(let i=0;i<arr.length;i++){
if(arr[i].key==pid && unref(expandedRowKeys).indexOf(pid)<0){
expandedRowKeys.value.push(arr[i].key);
getExpandKeysByPid(arr[i]['parentId'],unref(treeData))
}else{
getExpandKeysByPid(pid,arr[i].children)
}
}
}
}
//
async function handleSubmit() {
try {
let values = await validate();
setModalProps({confirmLoading: true});
//
await saveOrUpdateDict(values, isUpdate.value);
//
closeModal();
//
await getExpandKeysByPid(values['pid'],unref(treeData))
//(isUpdate:;values:;expandedArr:)
emit('success', {
isUpdate: unref(isUpdate),
values: {...values},
expandedArr: unref(expandedRowKeys).reverse(),
//
changeParent: model != null && (model['pid'] != values['pid']),
});
} finally {
setModalProps({confirmLoading: false});
}
}
</script>

Loading…
Cancel
Save