diff --git a/src/pages/OperationCenter/OperationSales/AdsMgm/loadable.jsx b/src/pages/OperationCenter/OperationSales/AdsMgm/loadable.jsx index 8516853..1846c43 100644 --- a/src/pages/OperationCenter/OperationSales/AdsMgm/loadable.jsx +++ b/src/pages/OperationCenter/OperationSales/AdsMgm/loadable.jsx @@ -508,6 +508,10 @@ function AdsMgm() { // 设置-确定 const handleComfirm = () => { let newArr = [...sortArr]; + if (!modalObj?.name) { + message.error("请输入分类标签名称"); + return; + } // 是否修改 const isEdit = modalObj.index < newArr.length; (isEdit diff --git a/src/pages/OperationCenter/OperationSales/InformationMgm/index.scss b/src/pages/OperationCenter/OperationSales/InformationMgm/index.scss index 0001364..69b85dc 100644 --- a/src/pages/OperationCenter/OperationSales/InformationMgm/index.scss +++ b/src/pages/OperationCenter/OperationSales/InformationMgm/index.scss @@ -305,63 +305,86 @@ } } - .ul-list { - width: 300px; + .cr-box { + width: 540px; margin: 10px auto 20px; - border: 1px solid #ccc; + border: 1px solid #ebeef5; - li { + .list-top { width: 100%; - height: 40px; - border-bottom: 1px solid #ccc; + padding: 18px 20px; + border-bottom: 1px solid #ebeef5; display: flex; - align-items: center; justify-content: space-between; - >span { - .anticon { - cursor: pointer; - margin-left: 10px; + span:last-child { + color: #409eff; + cursor: pointer; + } + } - &.anticon-edit, - &.anticon-plus-circle { - color: rgb(64, 158, 255); - } + .list-wrap { + width: 100%; + padding: 20px; - &.anticon-minus-circle { - display: none; - color: rgb(245, 108, 108); - } - } + .list-ul { + width: 100%; + padding-left: 20px; - &:nth-last-child(3) { - width: 40px; - text-align: center; + &.list-outer { + padding-left: 0; } - &:nth-last-child(2) { - flex: 1; - text-align: center; - @include textEllipsis("one"); - } + .list-item { + width: 100%; - &:nth-last-child(1) { - width: 60px; + .li-box { + padding: 3px 0; + display: flex; + justify-content: space-between; + align-items: center; + cursor: pointer; + &:hover,&.active{ + background-color: #f0f6f9; + } + + .btn, + .gap { + display: inline-block; + width: 15px; + height: 15px; + margin-right: 5px; + } + + .tool { + display: inline-block; + text-align: center; + min-width: 200px; + + span+span { + margin-left: 15px; + } + + span { + color: rgb(64, 158, 255); + cursor: pointer; + + &:last-child { + color: rgb(245, 108, 108); + } + } + } + } } - } - - &:last-child { - border-bottom: unset; - cursor: pointer; - } - &:hover { - >span .anticon-minus-circle { - display: inline-block; + .no-data { + text-align: center; } } } + } + } .extra-group { diff --git a/src/pages/OperationCenter/OperationSales/InformationMgm/loadable.jsx b/src/pages/OperationCenter/OperationSales/InformationMgm/loadable.jsx index 7b8eae7..b806189 100644 --- a/src/pages/OperationCenter/OperationSales/InformationMgm/loadable.jsx +++ b/src/pages/OperationCenter/OperationSales/InformationMgm/loadable.jsx @@ -15,15 +15,13 @@ import { Upload, Popover, Checkbox, - TimePicker, Cascader, Tooltip, } from "antd"; import { CalendarOutlined, - EditOutlined, - MinusCircleOutlined, - PlusCircleOutlined, + CaretRightOutlined, + CaretDownOutlined, LoadingOutlined, PlusOutlined, DeleteOutlined, @@ -83,7 +81,7 @@ function InformationMgm() { title: "", // 标题 author: "", // 作者 areaId: [], // 区域 - releaseType: [], // 发布渠道 + releaseType: ["1"], // 发布渠道 shareTitle: "", // 分享标题 shareDescribe: "", // 分享描述 shareImgUrl: "", // 分享缩略图 @@ -104,13 +102,11 @@ function InformationMgm() { const [rowData, setRowData] = useState(defRowData); // 上传状态 const [uploading, setUploading] = useState(false); - // 设置分类数组 - const [sortArr, setSortArr] = useState([]); // 设置分类弹窗 const [modalObj, setModalObj] = useState({ visible: false, // 弹窗状态 - title: "修改标签", // 弹窗标题 - index: 0, //标签索引 + title: "添加", // 弹窗标题 + id: 0, //标签id name: "", //标签名称 }); const [general, setGeneral] = useState(""); //普通文本内容 @@ -125,6 +121,10 @@ function InformationMgm() { isStick: [], // 置顶状态 category: [], // 分类 }); + // 选择树节点 + const [checkId, setCheckId] = useState(""); + // 折叠树节点 + const [foldIds, setFoldIds] = useState([]); // 访问接口，获取下拉 useEffect(() => { @@ -137,21 +137,16 @@ function InformationMgm() { getData(); }, [isAjax]); - // 展示状态-下拉 - const statusArr = [ - { value: "0", label: "已保存" }, - { value: "1", label: "待上架" }, - { value: "2", label: "已上架" }, - { value: "3", label: "已下架" }, - ]; // 操作-下拉 const items = [ { key: "0", label: 预览 }, { key: "1", label: 详情 }, - { key: "2", label: 编辑 }, - { key: "3", label: 上架 }, - { key: "4", label: 下架 }, - { key: "5", label: 封存 }, + { key: "2", label: 发布 }, + { key: "3", label: 编辑 }, + { key: "4", label: 上架 }, + { key: "5", label: 下架 }, + { key: "6", label: 封存 }, + { key: "7", label: 删除 }, ]; // 表头 @@ -288,23 +283,27 @@ function InformationMgm() { align: "center", width: 140, render: (val, row, index) => { + // 更新状态 1=待发布 2=已上架 3=已下架 0=已保存 4=已封存 + const status = row?.status; return ( [0, 1, 2, 3, 7].includes(i)) + : status == 2 + ? items.filter((v, i) => [0, 1, 5].includes(i)) + : status == 3 + ? items.filter((v, i) => [0, 1, 3, 4, 6].includes(i)) + : status == 0 + ? items.filter((v, i) => [0, 1, 2, 3, 7].includes(i)) + : items.filter((v, i) => [0, 1].includes(i)), onClick: (key) => { return clickDropDown(key, row); }, }} - placement="bottomLeft" - arrow - onOpenChange={(open) => { - if (open) { - // setCurrentPersonRecord(row) - } else { - // setCurrentPersonRecord({}) - } - }} > @@ -315,22 +314,31 @@ function InformationMgm() { // 操作 const clickDropDown = (param, record) => { - console.log(param.key); + // console.log(param.key, record); setRowData(record); if (param.key == "1") { // 详情 setPageType("3"); } else if (param.key == "2") { + // 发布 + handleStatus(record?.informationId, "1"); + } else if (param.key == "3") { // 编辑 setPageType("2"); - setGeneral(""); + setGeneral(record?.general || ""); setContent(record?.content || "


"); - } else if (param.key == "3") { - // 上架 } else if (param.key == "4") { - // 下架 + // 上架 + handleStatus(record?.informationId, "2"); } else if (param.key == "5") { + // 下架 + handleStatus(record?.informationId, "3"); + } else if (param.key == "6") { // 封存 + handleStatus(record?.informationId, "4"); + } else if (param.key == "7") { + // 删除 + deleteItem(record?.informationId); } else { // 预览 if (record?.jumpUrl) { @@ -341,6 +349,42 @@ function InformationMgm() { } }; + // 改变状态 更新状态 1=待发布 2=已上架 3=已下架 0=已保存 4=已封存 + const handleStatus = (id, status) => { + ajax.doInfoStatus({ informationId: id, status }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + message.success(res?.message); + setPageInfo({ ...pageInfo, ...{ pageNum: 1 } }); + setIsAjax(!isAjax); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + } + ); + }; + + // 删除 + const deleteItem = (id) => { + ajax.doInfoDelete({ informationId: id }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + message.success(res?.message); + setPageInfo({ ...pageInfo, ...{ pageNum: 1 } }); + setIsAjax(!isAjax); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + } + ); + }; + // 分页 const paginationProps = { position: ["bottomCenter"], @@ -384,7 +428,7 @@ function InformationMgm() { }; // console.log(postData, newObj); setTabLoading(true); - ajax.getInformationList({ ...newObj, ...pageInfo }).then( + ajax.getInfoList({ ...newObj, ...pageInfo }).then( (res) => { if (parseInt(res?.status) === 20000) { setResultData(res?.data || {}); @@ -411,18 +455,6 @@ function InformationMgm() { }; // 下拉菜单 const getSelectList = () => { - ajax.getInformationLabel().then( - (res) => { - if (parseInt(res?.status) === 20000) { - setAllSelect(res?.data || {}); - } else { - message.error(res?.message); - } - }, - (err) => { - console.log(err); - } - ); // 获取区域树结构 ajaxCom.getAreaTree().then( (res) => { @@ -446,15 +478,10 @@ function InformationMgm() { // 获取列表数据 const getTypeList = () => { - ajax.getAdvertTypeList().then( + ajax.getInfoLabel().then( (res) => { if (parseInt(res?.status) === 20000) { - // setSortArr(res?.data || []); - setSortArr([ - { value: "0", label: "新闻" }, - { value: "1", label: "体育" }, - { value: "2", label: "测试" }, - ]); + setAllSelect(res?.data || {}); } else { message.error(res?.message); } @@ -466,23 +493,26 @@ function InformationMgm() { }; // 设置-改 - const handleEditItem = (val, num) => { + const handleEditItem = (obj) => { setModalObj({ visible: true, - title: "修改标签", - index: num, - name: val?.label, + title: "修改", + id: obj?.id, + name: obj?.name, }); }; - // 设置-减 - const handleDelItem = (val, num) => { - ajax.doAdvertTypeDelete({ categoryId: sortArr[num]["value"] }).then( + // 设置-删 + const handleDelItem = (id) => { + ajax.doInfoLabelDelete({ id }).then( (res) => { if (parseInt(res?.status) === 20000) { message.success(res?.message); getTypeList(); - // setSortArr(sortArr.filter((v, i) => i !== num)); + // setAllSelect({ + // ...allSelect, + // category: allSelect?.category.filter((v, i) => v.id != id), + // }); } else { message.error(res?.message); } @@ -494,39 +524,38 @@ function InformationMgm() { }; // 设置-加 - const handleAddItem = () => { + const handleAddItem = (fid) => { setModalObj({ visible: true, - title: "创建标签", - index: sortArr.length, + title: "添加", + id: fid, name: "", }); }; // 设置-确定 const handleComfirm = () => { - let newArr = [...sortArr]; + if (!modalObj?.name) { + message.error("请输入分类名称"); + return; + } // 是否修改 - const isEdit = modalObj.index < newArr.length; + const isEdit = modalObj.title == "修改"; (isEdit - ? ajax.doAdvertTypeEdit({ - categoryId: newArr[modalObj.index]["value"], + ? ajax.doInfoLabelEdit({ + id: modalObj.id, + name: modalObj.name, + }) + : ajax.doInfoLabelInsert({ + fid: modalObj.id, name: modalObj.name, }) - : ajax.doAdvertTypeInsert({ name: modalObj.name }) ).then( (res) => { if (parseInt(res?.status) === 20000) { message.success(res?.message); setModalObj({ ...modalObj, visible: false }); getTypeList(); - // let newArr = [...sortArr]; - // if (isEdit) { - // newArr[modalObj.index]["label"] = modalObj.name; - // } else { - // newArr.push({ value: modalObj.index, label: modalObj.name }); - // } - // setSortArr(newArr); } else { message.error(res?.message); } @@ -539,8 +568,21 @@ function InformationMgm() { // 新增-栏位改变 const handleForm = (key, val) => { - if (key === "jumpUrlType") { + const numKeys = [ + "readBasics", + "readMultiple", + "pointBasics", + "pointMultiple", + ]; + if (key === "isReprint") { + setGeneral(""); + setContent("


"); setRowData({ ...rowData, [key]: val, jumpUrl: "" }); + } else if (numKeys.includes(key)) { + setRowData({ + ...rowData, + [key]: val.replace(/[^\d]/g, "").replace(/0*(\d+)/, "$1"), + }); } else { setRowData({ ...rowData, [key]: val }); } @@ -645,7 +687,7 @@ function InformationMgm() { // 保存 const handleSaveInfo = () => { console.log(rowData); - ajax[rowData?.informationId ? "doInformationEdit" : "doInformationInsert"]({ + ajax[rowData?.informationId ? "doInfoEdit" : "doInfoInsert"]({ ...rowData, general, content, @@ -670,6 +712,66 @@ function InformationMgm() { setIsAjax(!isAjax); }; + // 树折叠、展开 + const toggle = (obj) => { + if (foldIds.includes(obj.id)) { + setFoldIds(foldIds.filter((v) => v != obj.id)); + } else { + setFoldIds([...foldIds, ...[obj.id]]); + } + }; + // 树-点击 + const clickItem = (obj) => { + setCheckId(obj.id); + }; + + // 生成树结构 + const renderTree = (nodes, levels) => { + return nodes.map((modal, index) => { + const lvs = [...(levels || []), ...[index]]; + const isFolder = modal?.children?.length; + return ( +
  • +
    { + e.stopPropagation(); + clickItem(modal); + }} + > + + {isFolder ? ( + toggle(modal)}> + {foldIds.includes(modal.id) ? ( + + ) : ( + + )} + + ) : ( + + )} + + {modal.name}({modal.num}) + + + + handleEditItem(modal)}>修改 + {lvs.length == 1 ? ( + handleAddItem(modal.id)}>添加 + ) : null} + handleDelItem(modal.id)}>删除 + +
    + {isFolder && !foldIds.includes(modal.id) ? ( + + ) : null} +
    • + ); + }); + }; + return (
    {/* 主页 */} @@ -805,7 +907,14 @@ function InformationMgm() { > 创建资讯 -
    @@ -1141,17 +1250,19 @@ function InformationMgm() { -
    -
    原文链接：
    -
    - handleForm("jumpUrl", e.target.value)} - /> + {rowData?.isReprint == 1 ? ( +
    +
    原文链接：
    +
    + handleForm("jumpUrl", e.target.value)} + /> +
    -
    + ) : null}
    定时发布时间：
    @@ -1174,34 +1285,36 @@ function InformationMgm() {
    -
    -
    -
    - - - -
    -
    - handleForm("jumpUrl", e.target.value)} - /> + {rowData?.isReprint != 1 ? ( +
    +
    +
    + + + +
    +
    + handleForm("jumpUrl", e.target.value)} + /> +
    -
    -
    -
    内容：
    -
    - { - setContent(v); - setGeneral(k); - }} - /> +
    +
    内容：
    +
    + { + setContent(v); + setGeneral(k); + }} + /> +
    -
    + ) : null}
    {/* 详情 */} @@ -1349,33 +1462,25 @@ function InformationMgm() { {/* 设置 */}
    +
    -
      - {sortArr?.length - ? sortArr.map((v, i) => { - return ( -
    • - {i + 1} - {v?.label || "-"} - - handleEditItem(v, i)} /> - handleDelItem(v, i)} - /> - -
      • - ); - }) - : null} -
    • - 创建分类标签 - - - -
      • -
    +
    +
    + 分类名称 + handleAddItem("0")}>添加分类 +
    +
    +
      + {allSelect?.category?.length ? ( + renderTree(allSelect?.category) + ) : ( +
    • 暂无数据
      • + )} +
    +
    +
    setModalObj({ ...modalObj, name: e.target.value })} /> diff --git a/src/services/OperationCenter/OperationMarket/information.js b/src/services/OperationCenter/OperationMarket/information.js index b01f9ca..041396a 100644 --- a/src/services/OperationCenter/OperationMarket/information.js +++ b/src/services/OperationCenter/OperationMarket/information.js @@ -2,21 +2,31 @@ import ajax from "@/config/ajax"; // --资讯管理-- export default { // 所有下拉 - getInformationLabel: (data) => + getInfoLabel: (data) => ajax({ url: "/api/ope/information/get_label", type: "get", data }), - // // 应用路径 - // getPushPath: (data) => - // ajax({ url: "/api/ope/push/get_path", type: "get", data }), // 列表 - getInformationList: (data) => + getInfoList: (data) => ajax({ url: "/api/ope/information/list", type: "post", data }), // 新增 - doInformationInsert: (data) => + doInfoInsert: (data) => ajax({ url: "/api/ope/information/insert", type: "post", data }), // 修改 - doInformationEdit: (data) => + doInfoEdit: (data) => ajax({ url: "/api/ope/information/edit", type: "post", data }), - // // 删除 - // doPushDelete: (data) => - // ajax({ url: "/api/ope/push/delete", type: "post", data }), + // 改变状态 + doInfoStatus: (data) => + ajax({ url: "/api/ope/information/status_edit", type: "post", data }), + // 删除 + doInfoDelete: (data) => + ajax({ url: "/api/ope/information/delete", type: "post", data }), + + // 分类标签-修改 + doInfoLabelEdit: (data) => + ajax({ url: "/api/ope/information/label_edit", type: "post", data }), + // 分类标签-删除 + doInfoLabelDelete: (data) => + ajax({ url: "/api/ope/information/label_delete", type: "post", data }), + // 分类标签-新增 + doInfoLabelInsert: (data) => + ajax({ url: "/api/ope/information/label_insert", type: "post", data }), };