From d3b03491b6907de850a5f1dc5d3e84c3200666c7 Mon Sep 17 00:00:00 2001 From: fengxiang <361798944@qq.com> Date: Tue, 12 Dec 2023 15:27:37 +0800 Subject: [PATCH] =?UTF-8?q?feat():=20=E5=BC=80=E5=8F=91=E5=AE=A2=E8=AF=89?= =?UTF-8?q?=E5=B7=A5=E5=8D=95=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CustomerServieMgm/ComplainManage/index.scss | 322 ++- .../CustomerServieMgm/ComplainManage/loadable.jsx | 2181 ++++++++++++++++++-- 2 files changed, 2282 insertions(+), 221 deletions(-) diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/index.scss b/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/index.scss index e7c6172..5ac0a12 100644 --- a/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/index.scss +++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/index.scss @@ -392,70 +392,322 @@ $color-primary: var(--color-primary); } } -.check-detail { - .carTitle { - .font { +.complain-manage-detail { + + .form-con { + width: 100%; + } + + .form-date { + width: 100%; + } + + .ant-select:not(.ant-select-customize-input) .ant-select-selector { + background-color: #50586c !important; + } + + .ant-select-arrow .anticon { + background-color: #50586c !important; + } + + .ant-input:placeholder-shown { + background-color: #50586c !important; + } + + .custom-collapse { + margin-top: 30px; + background-color: transparent; + border: unset; + + .ant-collapse-item { + border-bottom: unset; + } + + .ant-collapse-header { + background-color: hsla(0, 0%, 100%, .04); + } + + .ant-collapse-header-text { font-weight: 700; font-size: 16px; border-left: 6px solid #409eff; padding-left: 8px; - height: 20px; - line-height: 20px; - margin-bottom: 20px; + display: flex; + justify-content: space-between; + + .green { + color: #67c23a; + } + } + + .ant-collapse-content { + background-color: transparent; + border-top: unset; + } + + .row-line { + margin-bottom: 15px; + + .ant-btn { + min-width: 90px; + height: 34px; + + &:not(&:first-child) { + margin-left: 20px; + } + } } + } - .order-msg { - margin-left: 15%; + .pl-group { + display: flex; + flex-wrap: wrap; + border-top: 1px solid #434343; + border-left: 1px solid #434343; - .order { - margin-top: 20px; + &.pl-form .pl-item{ + margin-bottom: 10px; + } - .message { - color: white; - width: 30%; - display: inline-block; - text-align: left; + .pl-item { + width: 33.33%; + display: flex; + border-right: 1px solid #434343; + border-bottom: 1px solid #434343; + + &.pl-item-lg { + width: 100%; } - span:nth-of-type(2) { - display: inline-block; - width: 65%; + >span { + text-align: center; + line-height: 2.4; + + &.required::before { + margin-right: 4px; + color: #f56c6c; + font-family: SimSun, sans-serif; + content: "*"; + } + + &:first-child { + width: 125px; + background-color: #3e4557; + } + + &:last-child { + flex: 1; + } } - .status-color { - color: red; + >div:last-child { + flex: 1; } + } + } - .status-bg { - color: rgb(56, 174, 56); + .pic-wrapper { + margin-top: 20px; + + .pic-txt { + font-size: 18px; + margin-bottom: 10px; + opacity: 0.85; + } + + .pic-box { + width: 100%; + height: 450px; + + .ant-image { + width: 100%; + height: 100%; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } } } } - .sale-msg { - margin-left: 15%; + .ant-table { + + .ant-table-body { + // overflow-y: auto !important; - .order { - margin-top: 20px; + &::-webkit-scrollbar-track-piece, + &::-webkit-scrollbar-corner, + &::-webkit-scrollbar-track { + background: #9da2ab; + } - .message { - color: white; - width: 30%; - display: inline-block; - text-align: left; + &::-webkit-scrollbar { + width: 4px; + height: 4px; } - span:nth-of-type(2) { - display: inline-block; - width: 65%; + &::-webkit-scrollbar-thumb { + background: #3B97FF; + border-radius: 2px; } } + + .ant-table.ant-table-bordered>.ant-table-container>.ant-table-content>table, + .ant-table.ant-table-bordered>.ant-table-container>.ant-table-header>table { + border-top: none !important; + border-left: none !important; + } + + .ant-table-tbody .ant-table-row .ant-table-cell { + background-color: #3e4557 !important; + color: #ffffff !important; + text-align: center; + font-size: 14px; + font-family: + Microsoft YaHei, + Microsoft YaHei-Regular; + font-weight: 400; + border-right: none !important; + border-left: none !important; + border-bottom-color: #626b7e !important; + } } .submitBtn { text-align: center; - margin-top: 30px; + margin: 15px 0 5px; cursor: pointer; + + .ant-btn { + min-width: 90px; + height: 34px; + + &:not(&:first-child) { + margin-left: 20px; + } + } + } + + .calculator { + .row-search { + display: flex; + flex-wrap: wrap; + margin-bottom: 10px; + + .form-box { + display: flex; + align-items: center; + margin-right: 30px; + margin-bottom: 20px; + + >label { + text-align: right; + padding-right: 6px; + } + + .form-con { + flex: 1; + min-width: 190px; + } + } + + .ant-btn { + min-width: 90px; + height: 34px; + + &:not(&:first-child) { + margin-left: 20px; + } + } + + } + + .row-title { + font-weight: bold; + font-size: 18px; + border-left: 6px solid #409eff; + padding-left: 8px; + margin-bottom: 20px; + } + + .total-amount { + width: 100%; + padding: 20px; + text-align: center; + font-size: 20px; + + >span { + color: #3aa9ff; + font-weight: bold; + margin-right: 10px; + } + } + + .rule-text { + padding-left: 20px; + margin-bottom: 15px; + } + + .rule-list { + padding-left: 40px; + + >div { + margin-bottom: 10px; + opacity: 0.85; + + &:not(&:first-child) { + padding-left: 20px; + } + + >div { + margin-bottom: 10px; + } + + } + } + } + + .view-sort { + .form-box { + width: 400px; + display: flex; + align-items: center; + margin-right: 30px; + margin-bottom: 30px; + + >label { + text-align: right; + padding-right: 10px; + min-width: 120px; + + &.required::before { + margin-right: 4px; + color: #f56c6c; + font-family: SimSun, sans-serif; + content: "*"; + } + } + + .form-con { + flex: 1; + min-width: 190px; + } + } + } + + .ant-tabs-nav { + margin-bottom: 20px !important; + + .ant-tabs-nav-list { + width: 200px !important; + } + } + + + .ant-pagination-mini { + text-align: right !important; } } \ No newline at end of file diff --git a/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/loadable.jsx b/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/loadable.jsx index 6fee053..96e0e62 100644 --- a/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/loadable.jsx +++ b/src/pages/OperationCenter/CustomerServieMgm/ComplainManage/loadable.jsx @@ -9,8 +9,10 @@ import { Tabs, Pagination, DatePicker, - Popover, + Dropdown, + Collapse, Modal, + Image, } from "antd"; import { dictionary } from "@/config/common"; import { SearchOutlined, DeleteOutlined } from "@ant-design/icons"; @@ -18,14 +20,29 @@ import ajax from "@/services"; import { useSessionStorageState } from "ahooks"; import { useNavigate, useLocation } from "react-router-dom"; import moment from "moment"; +import errorPic from "@/assets/images/error-img.png"; import "./index.scss"; function ComplainManage(props) { + const { Panel } = Collapse; // session缓存 const [sessionTabList, setSessionTabList] = useSessionStorageState( "ComplainManage", { value: {} } ); + // 来源 + const sourceList = [ + { value: "1", label: "12328" }, + { value: "2", label: "12345" }, + { value: "3", label: "咨询热线" }, + { value: "4", label: "其他" }, + ]; + // 工单类型 + const orderTypeList = [ + { value: "1", label: "投诉" }, + { value: "2", label: "咨询" }, + { value: "3", label: "建议" }, + ]; // 默认数据 const defaultData = { tab: "1", //工单编号 @@ -81,7 +98,135 @@ function ComplainManage(props) { total_records: 0, }); - const [visible, setVisible] = useState(false); + // 默认创建数据 + const defRowData = { + order_num: "", //工单编号 + source: "", //来源 + order_type: "", //工单类型 + reaction_unit: "", //被反映单位 + undertake_unit: "", //承办单位 + person: "", //联系人 + phone: "", //联系电话 + is_repeat: "2", //是否重复投诉 + ptpd_time: undefined, //平台派单时间 + cgwpd_time: undefined, //城管委派单时间 + tx_time: undefined, //提醒时间 + end_time: undefined, //截止时间 + specific_content: "", //投诉具体内容 + }; + + // 创建弹窗 + const [visible1, setVisible1] = useState(false); + // 创建弹窗-展开key + const [actKey1, setActKey1] = useState(["1"]); + // 详情弹窗 + const [visible2, setVisible2] = useState(false); + // 创建弹窗-展开key + const [actKey2, setActKey2] = useState(["1", "2", "3", "4"]); + // 是否处理弹窗 + const [isDeal, setIsDeal] = useState(false); + + // 客诉信息 + const [createData, setCreateData] = useState(defRowData); + // 停车信息 + const [parkData, setParkData] = useState([]); + // 处理历史 + const [historyData, setHistoryData] = useState([]); + // 处理意见 + const [dealData, setDealData] = useState({ + sjpt_num: "", //市级平台单编号 + wtyj_sort: "", //问题一级分类 + wtej_sort: "", //问题二级分类 + deal_result: "", //处理结果 + tx_time: "", //再次提醒时间 + deal_way: "", //处理方式 + satisfaction: "", //满意度 + }); + + // 计费计算器 + const [visible3, setVisible3] = useState(false); + // 计费计算器-规则下拉菜单 + const [ruleList, setRuleList] = useState([]); + // 计费计算器-搜索 + const [editData, setEditData] = useState({ + rule: "", //规则 + in_time: "", //入场时间 + out_time: "", //出场时间 + }); + // 计费计算器-收费总金额 + const [amount, setAmount] = useState(0); + // 计费计算器-模型详情数据 + const [modelData, setModelData] = useState({ + name: "", // 规则名称 + date: "", // 生效日期 + list: [ + // 具体标准 + { + period: "", // 时段 + max: "", // ，最高金额 + section: [], // 区间 + }, + ], + }); + + // 停车记录 + const [visible4, setVisible4] = useState(false); + + const defRecordData = { + park_name: "", //停车场名称 + plate: "", //车牌号 + park_type: "", //出入场类型 + in_time: moment().subtract(30, "days").format("YYYY-MM-DD"), //入场时间 + out_time: moment().format("YYYY-MM-DD"), //出场时间 + pn: 1, // 页码 + page_size: 10, // 长度 + }; + // 停车记录-搜索 + const [recordData, setRecordData] = useState(defRecordData); + // 停车记录-结果 + const [tableData, setTableData] = useState({ + data: [], + total_records: 0, + }); + // 停车记录-选中数据 + const [checkIds, setCheckIds] = useState([]); + + // 停车记录详情弹窗 + const [visible5, setVisible5] = useState(false); + // 停车记录详情数据 + const [recordDetail, setRecordDetail] = useState({}); + + // 问题分类1 + const [problemArr1, setProblemArr1] = useState([]); + // 问题分类2 + const [problemArr2, setProblemArr2] = useState([]); + + // 一级分类 + const [sortArr1, setSortArr1] = useState([]); + + // 设置弹窗 + const [visible6, setVisible6] = useState(false); + // 设置弹窗-分类 + const defSortData = { + tab: "1", // 分类表格 1-一级，2-二级 + sort1: "", // 一级分类 + sort2: "", // 二级分类 + pn: 1, // 页码 + page_size: 10, // 长度 + }; + const [sortData, setSortData] = useState(defSortData); + // 设置弹窗-分类 + const [sortTableData, setSortTableData] = useState({ + data: [], + total_records: 0, + }); + + // 添加/编辑、查看一/二级分类 + const [visible7, setVisible7] = useState(false); + // 是否添加 + const [isAdd, setIsAdd] = useState(false); + // 添加/编辑、查看数据 + const [rowData, setRowData] = useState({}); //导出 const exportData = () => { @@ -143,129 +288,1076 @@ function ComplainManage(props) { }, { title: "操作", - render: (text, record) => { + render: (val, row, index) => { + // 1-未处理，2-跟进中，3-已办结 + const items = [ + { key: "1", label: 查看详情 }, + { key: "2", label: 处理 }, + ]; return ( - <> - -
{ - CheckBtn(record); - }} - > - 查看 -
- - } - > - - - + i !== 1) : items, + onClick: (key) => { + return clickDropDown(key, row); + }, + }} + > + + + ); + }, + }, + ]; + // 操作 + const clickDropDown = (param, record) => { + // console.log(param.key, record); + if (param.key == "2") { + // 处理 + getProblemSelect1(); + setIsDeal(true); + } else { + // 详情 + setIsDeal(false); + } + getDetail(record); + }; + + // 获取详情数据 + const getDetail = (obj) => { + ajax.getComplainList({ id: obj?.id }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + let { create_data, park_data, history_data, deal_data } = + res?.data || {}; + setCreateData(create_data || {}); + setParkData(park_data || []); + setHistoryData(history_data || []); + setDealData(deal_data || {}); + setActKey2(["1", "2", "3", "4"]); + setVisible2(true); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 获取列表数据 + const getData = (value) => { + let postData = !value ? { ...formData } : { ...value }; + if (!loading) { + postData = !value ? { ...holdData } : { ...value }; + } + setTabLoading(true); + ajax.getComplainList({ ...postData, ...pageInfo }).then( + (res) => { + setLoading(false); + setTabLoading(false); + if (res?.status === 20000) { + let resDataArr = res?.data?.list + ? res.data.list.map((item) => { + item.key = item.id; + return item; + }) + : []; + setResultData({ + ...resultData, + data: resDataArr, + total_records: res?.data?.total || 0, + }); + } else { + setResultData({ data: [], total_records: 0 }); + message.error(res.message); + } + }, + (err) => { + console.log(err); + setLoading(false); + setTabLoading(false); + } + ); + }; + + // 检索数据 + const handleSearch = () => { + setLoading(true); + setPageInfo({ ...pageInfo, ...{ pn: 1 } }); + setHoldData(formData); + setIsAjax(!isAjax); + }; + + useEffect(() => { + setSessionTabList({ ...formData }); + }, [formData]); + + // 访问接口，获取表格 + useEffect(() => { + getData(); + }, [isAjax]); + + // 分页 + const paginationProps = { + className: "pagination-common", + // position: ["bottomCenter"], + showQuickJumper: true, + showSizeChanger: true, + // showTotal: () => `共 ${resultData.total_records || 0} 条`, + total: resultData?.total_records, + current: pageInfo.pn, + pageSize: pageInfo.page_size, + pageSizeOptions: Array.from( + new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + ), + onChange: (current, size) => { + setPageInfo({ + ...pageInfo, + ...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, + }); + setIsAjax(!isAjax); + }, + }; + // 弹窗-分页 + const paginationProps1 = { + className: "pagination-common", + size: "small", + showQuickJumper: true, + showSizeChanger: true, + showTotal: () => `共 ${tableData.total_records || 0} 条`, + total: tableData?.total_records, + current: recordData.pn, + pageSize: recordData.page_size, + // pageSizeOptions: Array.from( + // new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + // ), + onChange: (current, size) => { + const obj = { + ...recordData, + ...{ pn: recordData.page_size == size ? current : 1, page_size: size }, + }; + setRecordData(obj); + getRecordData(obj); + }, + }; + // 弹窗-分页 + const paginationProps2 = { + className: "pagination-common", + size: "small", + showQuickJumper: true, + showSizeChanger: true, + showTotal: () => `共 ${sortTableData.total_records || 0} 条`, + total: sortTableData?.total_records, + current: sortData.pn, + pageSize: sortData.page_size, + // pageSizeOptions: Array.from( + // new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) + // ), + onChange: (current, size) => { + const obj = { + ...sortData, + ...{ pn: sortData.page_size == size ? current : 1, page_size: size }, + }; + setSortData(obj); + getSortData(obj); + }, + }; + + // 表格选中 + const rowSelection = { + selectedRowKeys: checkIds, + onChange: (keys) => { + // console.log(keys); + setCheckIds(keys); + }, + }; + + // 表格填充 + const handleFillTable = () => { + const arr = [...checkIds]; + const list = [...(tableData?.data || [])]; + // console.log(arr, list); + if (arr?.length && list?.length) { + const newList = list.filter((v, i) => arr.includes(v?.id || i)); + setParkData(newList); + setVisible4(false); + } else { + message.error("请选择要填充的数据"); + } + }; + + // 列表1 + const columns1 = [ + { + title: "停车场", + dataIndex: "order_num", + align: "center", + }, + { + title: "泊位号", + dataIndex: "source", + align: "center", + }, + { + title: "计费类型", + dataIndex: "person", + align: "center", + }, + { + title: "车牌号", + dataIndex: "phone", + align: "center", + }, + { + title: "入场时间", + dataIndex: "send_time", + align: "center", + }, + { + title: "出场时间", + dataIndex: "end_time", + align: "center", + }, + { + title: "停车时长", + dataIndex: "order_type", + align: "center", + }, + { + title: "应收金额", + dataIndex: "order_type", + align: "center", + }, + ]; + // 列表2 + const columns2 = [ + { + title: "处理时间", + dataIndex: "order_num", + align: "center", + }, + { + title: "处理人", + dataIndex: "source", + align: "center", + }, + { + title: "市级平台订单号", + dataIndex: "person", + align: "center", + }, + { + title: "问题一级分类", + dataIndex: "phone", + align: "center", + }, + { + title: "问题二级分类", + dataIndex: "order_type", + align: "center", + }, + { + title: "处理方式", + dataIndex: "send_time", + align: "center", + }, + ]; + // 列表3 + const columns3 = [ + { + title: "序号", + align: "center", + width: 70, + render: (val, row, index) => { + return index + 1 + sortData.page_size * (sortData.pn - 1); + }, + }, + { + title: "一级分类", + dataIndex: "sort1", + align: "center", + }, + { + title: "二级分类", + dataIndex: "sort2", + align: "center", + }, + { + title: "备注", + dataIndex: "remark", + align: "center", + }, + { + title: "操作", + align: "center", + width: 90, + render: (val, row, index) => { + const items = [ + { key: "1", label: 查看 }, + { key: "2", label: 编辑 }, + ]; + return ( + { + return clickDropDown2(key, row, index); + }, + }} + > + + ); }, }, ]; - //查看弹窗 - const [getRecordData, setGetRecordData] = useState([]); - const CheckBtn = (record) => { - setGetRecordData( - Object.assign({}, getRecordData, { - road_name: record.road_name, - phone: record.phone, - plate: record.plate, - status: record.status, - method: record.method, - order_amount: record.order_amount, - phone: record.phone, - phone: record.phone, - }) + // 新列表 + const getNewColumns = () => { + const newList = [...columns1]; + newList.unshift({ + title: "序号", + align: "center", + width: 70, + render: (val, row, index) => index + 1, + }); + newList.push({ + title: "操作", + align: "center", + width: 90, + render: (val, row, index) => { + const items = [ + { key: "1", label: 详情 }, + { key: "2", label: 删除 }, + ]; + return ( + { + return clickDropDown1(key, row, index); + }, + }} + > + + + ); + }, + }); + return newList; + }; + + // 操作 + const clickDropDown1 = (param, record, index) => { + // console.log(param.key, record); + if (param.key == "2") { + // 删除 + const newArr = [...parkData]; + setParkData(newArr.filter((v, i) => i != index)); + } else { + // 详情 + getRecordDetail(record); + } + }; + // 操作 + const clickDropDown2 = (param, record) => { + // console.log(param.key, record); + setRowData(record); + setIsAdd(false); + setVisible7(true); + }; + + // 数据校验 + const checkDate = () => { + if (!createData?.source) { + message.error("请选择客诉来源"); + return false; + } + if (!createData?.order_num) { + message.error("请输入工单编号"); + return false; + } + if (!createData?.order_type) { + message.error("请选择工单类型"); + return false; + } + if (!createData?.person) { + message.error("请输入联系人姓名"); + return false; + } + if (!createData?.phone) { + message.error("请输入联系电话"); + return false; + } + if (["1", "2"].includes(createData?.source) && !createData?.ptpd_time) { + message.error("请选择平台派单时间"); + return false; + } + if (createData?.source == "2" && !createData?.cgwpd_time) { + message.error("请选择城管委派单时间"); + return false; + } + if (!createData?.tx_time) { + message.error("请选择提醒时间"); + return false; + } + if (["1", "2"].includes(createData?.source) && !createData?.end_time) { + message.error("请选择截止时间"); + return false; + } + if (!createData?.specific_content) { + message.error("请输入投诉具体内容"); + return false; + } + if ( + ["1", "2"].includes(createData?.source) && + !moment(createData.end_time).isAfter(moment(createData.tx_time)) + ) { + message.error("截止时间必须在提醒时间之后"); + return false; + } + return true; + }; + + // 1-保存、2-保存并处理 + const handleSave = (flag) => { + if (!checkDate()) { + return; + } + ajax.getComplainList({ ...createData, flag }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + message.success(res?.message); + setVisible1(false); + if (flag == 1) { + setIsDeal(true); + getDetail(res?.data?.id); + } else { + setIsAjax(!isAjax); + } + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 处理数据提交 + const handleSubmit = () => { + if (!checkDate()) { + return; + } + if (dealData?.deal_result == "2" && !dealData?.wtyj_sort) { + message.error("请选择问题一级分类"); + return; + } + if (dealData?.deal_result == "2" && !dealData?.wtej_sort) { + message.error("请选择问题二级分类"); + return; + } + if (!dealData?.deal_result) { + message.error("请选择处理结果"); + return; + } + if (dealData?.deal_result != "2" && !dealData?.tx_time) { + message.error("请选择再次提醒时间"); + return; + } + if (dealData?.deal_result == "2" && !dealData?.satisfaction) { + message.error("请选择满意度"); + return; + } + if (!dealData?.deal_way) { + message.error("请输入处理方式"); + return; + } + const newObj = { + create_data: createData, + park_data: parkData, + deal_data: dealData, + // history_data:historyData, + }; + ajax.getComplainList(newObj).then( + (res) => { + if (parseInt(res?.status) === 20000) { + message.success(res?.message); + setVisible2(false); + setIsAjax(!isAjax); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + // 添加分类 + const handleSaveSort = () => { + if (sortData?.tab == "1" && !rowData?.sort1) { + message.error("请输入一级分类名称"); + return; + } + if (sortData?.tab == "2" && !rowData?.sort1) { + message.error("请选择关联一级分类"); + return; + } + if (sortData?.tab == "2" && !rowData?.sort2) { + message.error("请输入二级分类名称"); + return; + } + ajax.getComplainList(rowData).then( + (res) => { + if (parseInt(res?.status) === 20000) { + message.success(res?.message); + setVisible7(false); + const obj = { ...sortData, pn: 1 }; + setSortData(obj); + getSortData(obj); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 获取问题分类1下拉 + const getProblemSelect1 = () => { + ajax.getComplainList().then( + (res) => { + if (parseInt(res?.status) === 20000) { + if (Array.isArray(res?.data)) { + setProblemArr1(res?.data); + } else { + setProblemArr1([]); + } + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 获取问题分类2下拉 + const getProblemSelect2 = (id) => { + if (id) { + ajax.getComplainList({ id }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + if (Array.isArray(res?.data)) { + setProblemArr2(res?.data); + } else { + setProblemArr2([]); + } + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + } else { + setProblemArr2([]); + } + }; + // 获取所有一级分类下拉 + const getSortSelect1 = () => { + ajax.getComplainList().then( + (res) => { + if (parseInt(res?.status) === 20000) { + if (Array.isArray(res?.data)) { + setSortArr1(res?.data); + } else { + setSortArr1([]); + } + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + // 获取计算规则下拉 + const getRuleSelect = () => { + ajax.getComplainList().then( + (res) => { + if (parseInt(res?.status) === 20000) { + if (Array.isArray(res?.data)) { + setRuleList(res?.data); + } else { + setRuleList([]); + } + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 获取计算模型详情 + const getRuleData = (val) => { + if (val) { + ajax.getComplainList({ rule: val }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setModelData(res?.data || {}); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + } else { + setModelData({}); + } + }; + + // 获取收费总金额 + const getAmount = () => { + if (!editData?.rule) { + message.error("请选择计算规则"); + return; + } + if (!editData?.in_time || !editData?.out_time) { + message.error("请选择出入场时间"); + return; + } + ajax.getComplainList(editData).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setAmount(res?.data || 0); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 获取停车记录 + const getRecordData = (obj) => { + setCheckIds([]); + ajax.getComplainList(obj).then( + (res) => { + if (parseInt(res?.status) === 20000) { + // setTableData(res?.data || {}); + setTableData({ + data: res?.data?.list, + total_records: 50, + }); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 获取停车记录详情 + const getRecordDetail = (obj) => { + ajax.getComplainList({ id: obj?.id }).then( + (res) => { + if (parseInt(res?.status) === 20000) { + setRecordDetail(res?.data || {}); + setVisible5(true); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 获取分类数据 + const getSortData = (obj) => { + ajax.getComplainList(obj).then( + (res) => { + if (parseInt(res?.status) === 20000) { + // setTableData(res?.data || {}); + setSortTableData({ + data: res?.data?.list, + total_records: 50, + }); + } else { + message.error(res?.message); + } + }, + (err) => { + console.log(err); + message.error("服务器异常"); + } + ); + }; + + // 编辑模版 + function renderHtml(data, setData) { + return ( +
+
+ 客诉来源 +
+ + setData({ + ...data, + order_num: e.target.value, + }) + } + /> +
+
+
+ 工单类型 +
+ + setData({ + ...data, + reaction_unit: e.target.value, + }) + } + /> +
+
+
+ 承办单位 +
+ + setData({ + ...data, + undertake_unit: e.target.value, + }) + } + /> +
+
+
+ 联系人姓名 +
+ + setData({ + ...data, + person: e.target.value, + }) + } + /> +
+
+
+ 联系电话 +
+ + setData({ + ...data, + phone: e.target.value, + }) + } + /> +
+
+
+ 是否重复投诉 +
+ + setData({ + ...data, + specific_content: e.target.value, + }) + } + /> +
+
+
); - setVisible(true); - }; - const editModal = () => { - setVisible(false); - }; - - // 获取列表数据 - const getData = (value) => { - let postData = !value ? { ...formData } : { ...value }; - if (!loading) { - postData = !value ? { ...holdData } : { ...value }; - } - setTabLoading(true); - ajax.getComplainList({ ...postData, ...pageInfo }).then( - (res) => { - setLoading(false); - setTabLoading(false); - if (res?.status === 20000) { - let resDataArr = res?.data?.list - ? res.data.list.map((item) => { - item.key = item.id; - return item; - }) - : []; - setResultData({ - ...resultData, - data: resDataArr, - total_records: res?.data?.total || 0, - }); - } else { - setResultData({ data: [], total_records: 0 }); - message.error(res.message); - } - }, - (err) => { - console.log(err); - setLoading(false); - setTabLoading(false); - } + } + // 设置模版 + function renderSetHtml() { + return ( +
+
+ {sortData?.tab == "2" ? ( + <> +
+ + + setSortData({ + ...sortData, + sort2: e.target.value, + }) + } + /> +
+ + ) : ( +
+ + + setSortData({ + ...sortData, + sort1: e.target.value, + }) + } + /> +
+ )} +
+ + + +
+
+
+ row?.id || index} + dataSource={sortTableData?.data || []} + columns={ + sortData?.tab == "1" + ? columns3.filter((v, i) => i != 2) + : columns3 + } + scroll={{ y: "300px" }} + pagination={false} + /> + + + ); - }; - - // 检索数据 - const handleSearch = () => { - setLoading(true); - setPageInfo({ ...pageInfo, ...{ pn: 1 } }); - setHoldData(formData); - setIsAjax(!isAjax); - }; - - const placeBtn = () => { - setVisible(false); - }; - - useEffect(() => { - setSessionTabList({ ...formData }); - }, [formData]); - - // 访问接口，获取表格 - useEffect(() => { - getData(); - }, [isAjax]); - - // 分页 - const paginationProps = { - className: "pagination-common", - // position: ["bottomCenter"], - showQuickJumper: true, - showSizeChanger: true, - // showTotal: () => `共 ${resultData.total_records || 0} 条`, - total: resultData?.total_records, - current: pageInfo.pn, - pageSize: pageInfo.page_size, - pageSizeOptions: Array.from( - new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) - ), - onChange: (current, size) => { - setPageInfo({ - ...pageInfo, - ...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, - }); - setIsAjax(!isAjax); - }, - }; + } return ( <> @@ -297,12 +1389,7 @@ function ComplainManage(props) { allowClear placeholder="全部" value={formData?.source || undefined} - options={[ - { value: "1", label: "12328" }, - { value: "2", label: "12345" }, - { value: "3", label: "咨询热线" }, - { value: "4", label: "其他" }, - ]} + options={sourceList} onChange={(e) => setFormData({ ...formData, source: e })} /> @@ -313,11 +1400,7 @@ function ComplainManage(props) { allowClear placeholder="全部" value={formData?.order_type || undefined} - options={[ - { value: "1", label: "投诉" }, - { value: "2", label: "咨询" }, - { value: "3", label: "建议" }, - ]} + options={orderTypeList} onChange={(e) => setFormData({ ...formData, order_type: e })} /> @@ -437,12 +1520,21 @@ function ComplainManage(props) { type="primary" className="green" onClick={() => { - setVisible(true); + setCreateData(defRowData); + setActKey1(["1"]); + setVisible1(true); }} > 创建 - + + -
-
- 停车场名称： - {getRecordData.road_name} -
-
- 手机号： - {getRecordData.phone} -
-
- 车牌号： - {getRecordData.plate} -
-
- 同步MS状态： - {getRecordData.phone} -
-
- 订购时间： - + {/* 详情 */} + setVisible2(false)} + footer={null} + > + + + 客诉信息 + + {createData?.status_name || "-"} + + + ) : ( + "客诉信息" + ) + } + key="1" + > + {isDeal ? ( + renderHtml(createData, setCreateData) + ) : ( +
+
+ 客诉来源 + {createData?.order_num || "-"} +
+
+ 工单编号 + {createData?.order_num || "-"} +
+
+ 工单类型 + {createData?.order_num || "-"} +
+
+ 被反映单位 + {createData?.order_num || "-"} +
+
+ 承办单位 + {createData?.order_num || "-"} +
+
+ 联系人姓名 + {createData?.order_num || "-"} +
+
+ 联系电话 + {createData?.order_num || "-"} +
+
+ 是否重复投诉 + {createData?.order_num || "-"} +
+
+ 平台派单时间 + {createData?.order_num || "-"} +
+
+ 城管委派单时间 + {createData?.order_num || "-"} +
+
+ 提醒时间 + {createData?.order_num || "-"} +
+
+ 截止时间 + {createData?.order_num || "-"} +
+
+ 投诉具体内容 + {createData?.order_num || "-"} +
+
+ )} + + +
+ {isDeal ? ( + + ) : null} + +
+
row?.id || index} + dataSource={parkData || []} + columns={isDeal ? getNewColumns() : columns1} + scroll={{ y: "300px" }} + pagination={false} + /> + + {isDeal ? ( + +
+
+ 市级平台单编号 +
+ + setDealData({ + ...dealData, + sjpt_num: e.target.value, + }) + } + /> +
+
+
+ + 问题一级分类 + +
+ + setDealData({ ...dealData, wtej_sort: e }) + } + /> +
+
+
+ 处理结果 +
+ + setDealData({ ...dealData, satisfaction: e }) + } + /> +
+
+ ) : ( +
+ 再次提醒时间 +
+ + setDealData({ ...dealData, tx_time: str }) + } + /> +
+
+ )} +
+ 处理方式 +
+ + setDealData({ + ...dealData, + deal_way: e.target.value, + }) + } + /> +
+
+
+ + ) : null} + {!isDeal || historyData?.length ? ( + +
row?.id || index} + dataSource={historyData || []} + columns={columns2} + pagination={false} + scroll={{ y: "300px" }} + /> + + ) : null} + +
+ {isDeal ? ( + <> + + + + ) : ( + + )} +
+ + {/* 计费计算器 */} + setVisible3(false)} + footer={null} + > +
+
+
+ + + setRecordData({ + ...recordData, + park_name: e.target.value, + }) + } + /> +
+
+ + + setRecordData({ + ...recordData, + plate: e.target.value, + }) + } + /> +
+
+ +
row?.id || index} + dataSource={tableData?.data || []} + columns={columns1} + rowSelection={rowSelection} + scroll={{ y: "300px" }} + pagination={false} + /> + -
- 订单金额： - {getRecordData.order_amount} +
+ +
-
- 商品信息 + + {/* 停车记录详情 */} + setVisible5(false)} + footer={null} + > +
+
+ 车牌号 + {recordDetail?.order_num || "-"} +
+
+ 停车场名称 + {recordDetail?.order_num || "-"} +
+
+ 泊位号 + {recordDetail?.order_num || "-"} +
+
+ 入场时间 + {recordDetail?.order_num || "-"} +
+
+ 出场时间 + {recordDetail?.order_num || "-"} +
+
+ 停车时长 + {recordDetail?.order_num || "-"} +
+
+ 计费类型 + {recordDetail?.order_num || "-"} +
+
+ 应收金额 + {recordDetail?.order_num || "-"} +
+
+ 入场设备类型 + {recordDetail?.order_num || "-"} +
+
+ 出场设备类型 + {recordDetail?.order_num || "-"} +
-
-
- 销售金额： - {getRecordData.price} +
+
入场照片
+
+
-
- 有效时间： - {getRecordData.effective_date} +
出场照片
+
+
-
- + + {/* 设置 */} + setVisible6(false)} + footer={null} + > + { + const obj = { ...defSortData, tab: e, pn: 1 }; + setSortData(obj); + getSortData(obj); + e == "2" ? getSortSelect1() : null; + }} + > + + {renderSetHtml()} + + + {renderSetHtml()} + + + + {/* 添加/编辑、查看一/二级分类 */} + setVisible7(false)} + footer={null} + > +
+ {sortData?.tab == "2" ? ( + <> +
+ + {isAdd ? ( + + setRowData({ + ...rowData, + sort2: e.target.value, + }) + } + /> + ) : ( + {rowData?.sort2 || "-"} + )} +
+ + ) : ( +
+ + {isAdd ? ( + + setRowData({ + ...rowData, + sort1: e.target.value, + }) + } + /> + ) : ( + {rowData?.sort1 || "-"} + )} +
+ )} +
+ + + setRowData({ + ...rowData, + remark: e.target.value, + }) + } + /> +
+
+ {isAdd ? ( + <> + + + + ) : ( + + )} +