From d8e36b774b16c966d0372ecebe03cb1abfac10aa Mon Sep 17 00:00:00 2001 From: lu <2478382412@qq.com> Date: Wed, 22 Mar 2023 23:26:16 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=A0=87=E7=AD=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/axios/api.tsx | 10 +- src/mock/SystemSettings.js | 74 ++++---- src/routers/SystemSettings/index.tsx | 12 ++ .../LabelManagement/AddLabel.tsx | 123 +++++++++++++ .../LabelManagement/LabelTable.tsx | 67 ++++--- .../LabelManagement/UpdateLabel.tsx | 163 ++++++++++++++++++ 6 files changed, 390 insertions(+), 59 deletions(-) create mode 100644 src/views/SystemSettings/LabelManagement/AddLabel.tsx create mode 100644 src/views/SystemSettings/LabelManagement/UpdateLabel.tsx diff --git a/src/axios/api.tsx b/src/axios/api.tsx index 89e4acb..717b4a2 100644 --- a/src/axios/api.tsx +++ b/src/axios/api.tsx @@ -7,10 +7,18 @@ export function Label_list(params = {}) { export function Label_revisestatus(params = {}) { return service.post('/LabelData/revisestatus', params) } -// 修改标签名称(暂未使用) +// 新增标签 +export function Label_add(params = {}) { + return service.post('/LabelData/add', params) +} +// 修改标签名称 export function Label_edit(params = {}) { return service.post('/LabelData/edit', params) } +// 编辑标签列表 +export function Label_editlist(params = {}) { + return service.post('/LabelData/editlist', params) +} // 删除标签 export function Label_del(params = {}) { return service.post('/LabelData/del', params) diff --git a/src/mock/SystemSettings.js b/src/mock/SystemSettings.js index c11ce99..3942e9f 100644 --- a/src/mock/SystemSettings.js +++ b/src/mock/SystemSettings.js @@ -62,7 +62,7 @@ Mock.mock('/api/LabelData/del', 'post', (params) => { } }) -// 修改标签信息 +// 编辑标签信息 Mock.mock('/api/LabelData/edit', 'post', (params) => { const editlist = JSON.parse(params.body) console.log(editlist); @@ -70,47 +70,45 @@ Mock.mock('/api/LabelData/edit', 'post', (params) => { var index = LabelData.labeldata.findIndex((item) => { return item.id == id }) - if (index != -1) { + if (LabelData.labeldata[index].id == editlist.id && + LabelData.labeldata[index].tagname == editlist.tagname && + LabelData.labeldata[index].name == editlist.name && + LabelData.labeldata[index].time == editlist.time && + LabelData.labeldata[index].status == editlist.status) { + return { code: '304', status: 'no', msg: '与原信息一致' } + } else { + LabelData.labeldata[index].id = editlist.id LabelData.labeldata[index].tagname = editlist.tagname + LabelData.labeldata[index].name = editlist.name + LabelData.labeldata[index].time = editlist.time + LabelData.labeldata[index].status = editlist.status + localStorage.setItem('labeldata', JSON.stringify(LabelData)) - return { code: 200, msg: "修改成功", labeldata: LabelData.labeldata } + return { + code: '200', + status: 'ok', + labeldata: LabelData.labeldata + } } }) -// 编辑咨讯(修改) -// Mock.mock('/api/InforData/edit', 'post', (params) => { -// var editlist = JSON.parse(params.body) -// console.log(editlist); -// var id = editlist.id -// var index = InforData.infordata.findIndex((item) => { -// return item.id == id -// }) -// if (InforData.infordata[index].id == editlist.id && InforData.infordata[index].images == editlist.images && InforData.infordata[index].title == editlist.title && InforData.infordata[index].tclass == editlist.tclass && InforData.infordata[index].status == editlist.status && InforData.infordata[index].con == editlist.con) { -// return { code: '304', status: 'no', msg: '与原信息一致' } -// } else { -// InforData.infordata[index].id = editlist.id -// InforData.infordata[index].images = editlist.images -// InforData.infordata[index].title = editlist.title -// InforData.infordata[index].tclass = editlist.tclass -// InforData.infordata[index].status = editlist.status -// InforData.infordata[index].con = editlist.con +// 获取标签管理列表 +Mock.mock('/api/LabelData/editlist', 'post', (params) => { + var { id } = JSON.parse(params.body) + console.log(id); + var list = LabelData.labeldata.find((item) => { + return item.id == id + }) + return { code: 200, editlist: list } +}) -// localStorage.setItem('infordata', JSON.stringify(InforData)) -// return { -// code: '200', -// status: 'ok', -// inforlist: InforData.infordata -// } -// } -// }) -// 获取机构管理列表 -// Mock.mock('/api/InforData/editlist', 'post', (params) => { -// var { id } = JSON.parse(params.body) -// console.log(id); -// var list = InforData.infordata.find((item) => { -// return item.id == id -// }) -// return { code: 200, editlist: list } -// }) +// 新增标签 +Mock.mock('/api/LabelData/add', 'post', (params) => { + const labellist = JSON.parse(params.body) + console.log(labellist); + LabelData.labeldata.unshift(labellist) + localStorage.setItem('labeldata', JSON.stringify(LabelData)) + return { code: 200, msg: '新增成功', labeldata: LabelData.labeldata } +}) // 搜索标签关键词 Mock.mock('/api/LabelData/search', 'post', (params) => { @@ -425,7 +423,7 @@ Mock.mock('/api/BanData/edit', 'post', (params) => { } } }) -// 获取机构管理列表 +// 获取轮播图管理列表 Mock.mock('/api/BanData/editlist', 'post', (params) => { var { id } = JSON.parse(params.body) console.log(id); diff --git a/src/routers/SystemSettings/index.tsx b/src/routers/SystemSettings/index.tsx index a2d62bb..6f576fd 100644 --- a/src/routers/SystemSettings/index.tsx +++ b/src/routers/SystemSettings/index.tsx @@ -6,6 +6,9 @@ const RoleManagement = lazy(() => import('../../views/SystemSettings/RoleManagem const InformationManagement = lazy(() => import('../../views/SystemSettings/InformationManagement/InformationManagement')) //咨讯管理 const DrugManagement = lazy(() => import('../../views/SystemSettings/DrugManagement/DrugManagement')) //药品管理 const BannerManagement = lazy(() => import('../../views/SystemSettings/BannerManagement/BannerManagement')) //轮播图管理 +// 新增标签\修改标签 +const AddLabel = lazy(() => import('../../views/SystemSettings/LabelManagement/AddLabel')) +const UpdateLabel = lazy(() => import('../../views/SystemSettings/LabelManagement/UpdateLabel')) // 新增管理员\修改管理员 const AddMan = lazy(() => import('../../views/SystemSettings/RoleManagement/AddMan')) const UpdateMan = lazy(() => import('../../views/SystemSettings/RoleManagement/UpdateMan')) @@ -42,6 +45,15 @@ export default [ path: "/MyLayout/BannerManagement", element: }, + // 新增标签、修改标签 + { + path: "/MyLayout/AddLabel", + element: + }, + { + path: "/MyLayout/UpdateLabel", + element: + }, // 新增管理员、修改管理员 { path: "/MyLayout/AddMan", diff --git a/src/views/SystemSettings/LabelManagement/AddLabel.tsx b/src/views/SystemSettings/LabelManagement/AddLabel.tsx new file mode 100644 index 0000000..09cd563 --- /dev/null +++ b/src/views/SystemSettings/LabelManagement/AddLabel.tsx @@ -0,0 +1,123 @@ +import React, { useState } from 'react'; +import '../style/public.scss' +import { Button, Form, Input, Select, DatePicker, Upload, message, Switch } from 'antd'; +import type { FormInstance } from 'antd/es/form'; +import { useNavigate, useSearchParams } from 'react-router-dom'; +import { Label_add, Label_list, Label_revisestatus } from '../../../axios/api' +import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker'; + +const { RangePicker } = DatePicker; + +const onChangetime = ( + value: DatePickerProps['value'] | RangePickerProps['value'], + dateString: [string, string] | string, +) => { + console.log('Selected Time: ', value); + console.log('Formatted Selected Time: ', dateString); +}; + +const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => { + console.log('onOk: ', value); +}; + +const { Option } = Select; +interface Props { + id: string; + tagname: string; + name: string; + time: string; + status: boolean; +} +const PubText: React.FC = () => { + const [form] = Form.useForm() + const push = useNavigate() + const [data, setData] = useState([]) + //接受路由跳转传递过来的值search + var [params, setParams] = useSearchParams() + var val = params.get('data') + const formRef = React.useRef(null); + + const onReset = () => { + formRef.current?.resetFields(); + }; + + // 获取label列表 + const labellist = () => { + Label_list().then((res) => { + console.log(res.data) + setData(res.data.labeldata) + }) + } + + // 修改标签使用状态 + const changeStatus = () => { + + Label_revisestatus({ id: val }).then((res) => { + // console.log(res.status) + if (res.status === 200) { + labellist() + } + }) + } + + const back = () => { + push('/MyLayout/LabelManagement') + } + // 实现input的响应式数据 + const onFinish = (value: any) => { + // 发送新增轮播图的请求 + Label_add(value).then((res) => { + console.log(res.data) + if (res.data.code == 200) { + message.open({ + type: 'success', + content: '添加成功', + }); + push('/MyLayout/LabelManagement') + } + }) + } + return ( + <> +

新增轮播图

+

轮播图信息

+
+ + + + + + + + + + + + + + changeStatus()} /> + + + + + + + +
+ + ); +}; + +export default PubText; \ No newline at end of file diff --git a/src/views/SystemSettings/LabelManagement/LabelTable.tsx b/src/views/SystemSettings/LabelManagement/LabelTable.tsx index 8b6815c..2b3a9b9 100644 --- a/src/views/SystemSettings/LabelManagement/LabelTable.tsx +++ b/src/views/SystemSettings/LabelManagement/LabelTable.tsx @@ -1,8 +1,25 @@ import React, { useEffect, useState } from 'react'; -import { Space, Table, Switch, message, Input, Modal, Popconfirm, AutoComplete, Button } from 'antd'; +import { Space, Table, Switch, message, Input, Modal, Popconfirm, AutoComplete, Button, DatePicker } from 'antd'; import type { ColumnsType } from 'antd/es/table'; import { Label_list, Label_revisestatus, Label_edit, Label_del, Label_search } from '../../../axios/api'; +import { useNavigate } from 'react-router-dom'; + +import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker'; + +const { RangePicker } = DatePicker; + +const onChangetime = ( + value: DatePickerProps['value'] | RangePickerProps['value'], + dateString: [string, string] | string, +) => { + console.log('Selected Time: ', value); + console.log('Formatted Selected Time: ', dateString); +}; + +const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => { + console.log('onOk: ', value); +}; interface DataType { id: React.Key; @@ -12,25 +29,26 @@ interface DataType { } const LabelTable: React.FC = () => { + const push = useNavigate() const [data, setData] = useState([]) const [isModalOpen, setIsModalOpen] = useState(false); const [messageApi, contextHolder] = message.useMessage(); - const showModal = (record: any) => { - setIsModalOpen(true); - // 修改标签信息 - Label_edit(record.id).then((res) => { - console.log(res.data) - }) - }; - - const handleOk = () => { - setIsModalOpen(false); - messageApi.open({ - type: 'success', - content: '提交成功', - }); - }; + // const showModal = (record: any) => { + // setIsModalOpen(true); + // // 修改标签信息 + // Label_edit(record.id).then((res) => { + // console.log(res.data) + // }) + // }; + + // const handleOk = () => { + // setIsModalOpen(false); + // messageApi.open({ + // type: 'success', + // content: '提交成功', + // }); + // }; const handleCancel = () => { setIsModalOpen(false); @@ -98,6 +116,12 @@ const LabelTable: React.FC = () => { }) } + // 编辑修改信息 + const edit = (val: any) => { + console.log(val) + push({ pathname: '/MyLayout/UpdateLabel', search: `?data=${val}` }) + } + const columns: ColumnsType = [ { title: '编号', @@ -133,7 +157,7 @@ const LabelTable: React.FC = () => { fixed: 'right', render: (_, record: any) => ( - 编辑 + edit(record.id)}>编辑 del(record.id)}> 删除 @@ -141,6 +165,9 @@ const LabelTable: React.FC = () => { ), }, ]; + const AddLabel = () => { + push("/MyLayout/AddLabel") + } return ( <> @@ -153,17 +180,17 @@ const LabelTable: React.FC = () => { - {contextHolder} - + {/*
标签名称
- + */} record.id} /> diff --git a/src/views/SystemSettings/LabelManagement/UpdateLabel.tsx b/src/views/SystemSettings/LabelManagement/UpdateLabel.tsx new file mode 100644 index 0000000..7c3556a --- /dev/null +++ b/src/views/SystemSettings/LabelManagement/UpdateLabel.tsx @@ -0,0 +1,163 @@ +import React, { useState, useEffect } from 'react'; +import '../style/public.scss' +import { Button, Form, Input, Select, DatePicker, message, Switch } from 'antd'; +import type { FormInstance } from 'antd/es/form'; +import { useNavigate, useSearchParams } from 'react-router-dom'; +import { Label_edit, Label_editlist, Label_del, Label_list, Label_revisestatus } from '../../../axios/api' +import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker'; + +// 时间 +// const { RangePicker } = DatePicker; +// const onChangetime = ( +// value: DatePickerProps['value'] | RangePickerProps['value'], +// dateString: [string, string] | string, +// ) => { +// console.log('Selected Time: ', value); +// console.log('Formatted Selected Time: ', dateString); +// }; + +// const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => { +// console.log('onOk: ', value); +// }; + +// 下拉框 +const { Option } = Select; +interface Value { + id: string; + tagname: string; + name: string; + time: string; + status: boolean; +} +const PubText: React.FC = () => { + const [form] = Form.useForm() + const push = useNavigate() + //接受路由跳转传递过来的值search + var [params, setParams] = useSearchParams() + var val = params.get('data') + console.log(val); + // 定义空的状态，用来获取点击的哪一个文章的信息 + var [editlist, SetEditList] = useState() + + const formRef = React.useRef(null); + + const [data, setData] = useState([]) + + const labellist = () => { + // 获取标签管理列表 + Label_list().then((res) => { + console.log(res.data.labeldata) + setData(res.data.labeldata) + }) + } + + // 将editlist通过组件传值，传递给表单 + useEffect(() => { + Label_editlist({ id: val }).then((res: any) => { + if (res.data.code == 200) { + console.log(res.data.editlist); + + form.setFieldsValue(res.data.editlist) + // SetEditList() + } + }) + + // 当传递过来的key值发生变化时，发送请求，渲染表单 + }, [val]) + + const onDel = () => { + Label_del({ id: val }).then((res) => { + if (res.data.code == 200) { + labellist() + message.open({ + type: 'success', + content: '删除成功', + }); + push('/MyLayout/LabelManagement') + } + }) + }; + + const back = () => { + push('/MyLayout/LabelManagement') + } + // 修改标签使用状态 + const changeStatus = () => { + console.log(val); + + Label_revisestatus({ id: val }).then((res) => { + // console.log(res.status) + if (res.status === 200) { + labellist() + // message.open({ + // type: 'success', + // content: '状态修改成功', + // }); + } + }) + } + // 实现input的响应式数据 + const onFinish = (value: any) => { + console.log(value) + // 发送新增标签的请求 + Label_edit(value).then((res) => { + console.log(res.data) + if (res.data.code == 200) { + message.open({ + type: 'success', + content: '修改成功', + }); + push('/MyLayout/LabelManagement') + } else { + message.open({ + type: 'warning', + content: '未做任何修改', + }); + } + }) + } + return ( + <> +

编辑轮播图

+

轮播图信息

+
+ + + + + + + + + + + {/* */} + + + + changeStatus()} /> + + + + + + + + + + ); +}; + +export default PubText; \ No newline at end of file -- Gitee