解决冲突，创建页面

董国庆

2025-02-23 a6896418f5beca4a8fbac4af2219187f4a460cde

解决冲突，创建页面

 management/config/routes.ts

@@ -35,25 +35,47 @@
  },
  {
    path: '/setting',
    layout: false,
    // layout: false,
    name:'系统设置',
    routes: [
      {
        name: '职位管理',
        path: '/career',
        component: './setting/career',
        path: '/setting/career',
        component: './setting/career/index',
      },
    ],
  },
  {
    path: '/work-order',
    layout: false,
    // layout: false,
    name:'工单事项管理',
    routes: [
      {
        name: '工单事项配置',
        path: '/configuration',
        component: './work-order-settimg/configuration',
        path: '/work-order/configuration',
        component: './work-order-setting/index',
      },
      {
        name: '问题类型管理',
        path: '/work-order/problemType',
        component: './work-order/problem-type/index',
      },
      {
        name: 'banner管理',
        path: '/work-order/banner',
        component: './work-order/banner/index',
      },
    ],
  },
  {
    path: '/message-notification',
    // layout: false,
    name:'消息通知',
    routes: [
      {
        name: '消息通知',
        path: '/message-notification/list',
        component: './message-notification/index',
      },
    ],
  },

 management/src/app.tsx

@@ -48,7 +48,7 @@
      const { location: { pathname } } = history;
      // 如果没有登录，重定向到 login
      if (!initialState?.currentUser && location.pathname !== loginPath) {
        history.push(loginPath);
        // history.push(loginPath);
        return
      }
    },

 management/src/components/RightContent/AvatarDropdown.tsx

@@ -34,12 +34,12 @@
    const redirect = urlParams.get('redirect');
    // Note: There may be security issues, please note
    if (window.location.pathname !== '/login' && !redirect) {
      history.replace({
        pathname: '/login',
        search: stringify({
          redirect: pathname + search,
        }),
      });
      // history.replace({
      //   pathname: '/login',
      //   search: stringify({
      //     redirect: pathname + search,
      //   }),
      // });
    }
  };
  const actionClassName = useEmotionCss(({ token }) => {

 management/src/pages/message-notification/components/addAndEdit.jsx

New file
@@ -0,0 +1,175 @@
import { sendRequest } from '@/utils/antdUtils';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer, } from '@ant-design/pro-components';
import { Button, Select, Row, Col, Input, Card, Space, Form, Upload, Spin, message, InputNumber } from 'antd';
import { useState, useEffect } from 'react';
import { addAndEdit, getDetail } from '../service';
import { history, useLocation } from 'umi';
import { customRequest } from '@/utils/utils';
const AddOrEditOrDetail = () => {

  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([])//banner图片
  const [loading, setLoading] = useState(false);
  const { search } = useLocation();
  const searchParams = new URLSearchParams(search);

  const config = {
    name: 'file',
    action: BASE_URL + '/file/obs/upload',
    headers: {
      authorization: localStorage.getItem('token'),
    },
  };
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 20 },
  };
  const uploadButton = (text) => {
    return <div>
      <PlusOutlined />
      <div
        style={{
          marginTop: 8,
        }}
      >
      </div>
    </div>
  };
  useEffect(() => {
    if (searchParams.get('id')) {
      getDetail( searchParams.get('id') ).then(res => {
          if (res.data.picUrl) {
              let obj = [{
                  uid: 1,
                  name: 'banner',
                  url: res.data.picUrl
              }]
              setFileList(obj)
          }
          form.setFieldsValue(res.data)
      })
    }
  }, [])

  // 上传banner前
  const beforeUpload = (file) => {
    return new Promise(async (resolve, reject) => {
      if (file.name.includes(',')) {
        message.warning('上传文件不能包含英文逗号(,)')
        return Upload.LIST_IGNORE
      }
      setLoading(true)
      resolve(file)
    });
  };
  // 上传banner
  const handleChange = ({ file: file, fileList: newFileList }) => {
    if (file.status == 'error') {
      setLoading(false)
      setFileList([])
      message.error('上传失败')
      return
    }
    if (file.status == 'done') {
      setLoading(false)
      message.success('上传成功')
    }
    newFileList.map((item) => {
      if (!item.url && item.status == 'done') {
        item.url = item.response.data;
      }
    });
    setFileList(newFileList);
  };

  // 提交表单
  const submit = () => {
    form.validateFields().then(async (values) => {
      console.log('fileList',fileList)
      values.picUrl = fileList[0].url
      delete values.image
      if (searchParams.get('id')) {
          values.id = searchParams.get('id')
          let state = await sendRequest(addAndEdit, values)
          if (state) {
              history.back()
          }
          return
      }
      let state = await sendRequest(addAndEdit, values)
      if (state) {
          history.back()
      }
    })
  }
  return (
    <PageContainer title={searchParams.get('detail') ? '查看详情' : searchParams.get('id') ? '编辑banner' : '添加banner'}>
      <Spin spinning={loading}>
        <Form scrollToFirstError layout="horizontal" {...formItemLayout} form={form}>
          <Card style={{ background: '#fff', paddingTop: '15px' }}>
            <Row>
              <Col span={12}>
                <Form.Item
                  name="bannerName"
                  label='banner名称' rules={[
                    {
                      required: true,
                      message: '请输入banner名称',
                    },
                  ]}
                >
                  <Input disabled={searchParams.get('detail')} placeholder='请输入banner名称'></Input>
                </Form.Item>

                <Form.Item
                  name="image"
                  label="banner图片"
                  extra={
                    <div>
                      <div>推荐尺寸732px * 320px</div>
                    </div>
                  }
                  rules={[
                    {
                      required: fileList.length == 0 ? true : false,
                      message: '请上传banner图片',
                    },
                  ]}
                >
                  <Upload
                    {...config}
                    listType="picture-card"
                    maxCount={1}
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                    showUploadList={{
                      showPreviewIcon: false,
                    }}
                    customRequest={customRequest}
                    // accept="image/png, image/jpeg, image/jpg"
                    fileList={fileList}
                    disabled={searchParams.get('detail')}
                  >
                    {fileList?.length == 1 || searchParams.get('detail') ? null : uploadButton()}
                  </Upload>
                </Form.Item>
              </Col>
            </Row>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space size='large'>
                <Button onClick={() => history.back()}>关闭</Button>
                {
                  !searchParams.get('detail') && <Button type='primary' onClick={submit}>保存</Button>
                }
              </Space>
            </div>
          </Card>
        </Form>
      </Spin>
    </PageContainer >
  );
}

export default AddOrEditOrDetail


 management/src/pages/message-notification/index.jsx

New file
@@ -0,0 +1,101 @@
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { buildProTableDataSource, sendRequest, showDelConfirm } from '@/utils/antdUtils';
import { Button, message, Space } from 'antd';
import { useRef, useState } from 'react';
import { Access, history, useAccess } from 'umi';
import { getList, updateStatus, deleteBanner } from './service'
const Banner = () => {

  const actionRef = useRef();
  const access = useAccess();

  const columns = [
    {
      title: '诉求标题',
      dataIndex: 'bannerName'
    },
    {
      title: '承办者',
      dataIndex: 'bannerName1'
    },
    {
      title: '联系方式',
      dataIndex: 'bannerName'
    },
    {
      title: '所在单位',
      dataIndex: 'bannerName'
    },
    {
      title: '所属职位',
      dataIndex: 'bannerName'
    },
    {
      title: '诉求应处理时间',
      dataIndex: 'bannerName',
      hideInSearch: true,
    },
    {
      title: '提示类型',
      dataIndex: 'bannerName',
      hideInSearch: true,
    },
    
    {
      title: '状态',
      dataIndex: 'listingStatus',
      hideInSearch: true,
      valueEnum: {
        '上架中': { text: '已读' },
        '已下架' : { text: '未读' },
      }
    },
    {
      title: '操作',
      hideInSearch: true,
      render: (text, record) => {
        return (
          <Space>
            
            <Button
              type="link"
              onClick={() => {
                showDelConfirm(async () => {
                  let status = await sendRequest(deleteBanner,  record.id)
                  if (status) {
                    actionRef.current.reload();
                  }
                },'确认标记已读所选信息吗？');
              }}
            >
              标记已读
            </Button>
          </Space >
        );
      },
    },
  ]

  return <div>
    <PageContainer title='消息通知'>
      <ProTable
        rowKey='id'
        actionRef={actionRef}
        columns={columns}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
        }}
        search={{labelWidth: 140}}
        request={(params) => {
          params.bannerType = Number(params.bannerType)
          return buildProTableDataSource(getList, params)
        }}
        toolBarRender={false}
      />
    </PageContainer>
  </div>;
};

export default Banner;

 management/src/pages/message-notification/service.js

New file
@@ -0,0 +1,52 @@
import { request } from '@umijs/max';

// 列表
export const getList = async (data) => {
    return request(`/promotion/mgt/promotion-banner/page`, {
        method: 'POST',
        data
    });
}
// 详情
export const getDetail = async (id) => {
    return request(`/promotion/mgt/promotion-banner/detail/${id}`, {
        method: 'GET',
        // data
    });
}
// 详情列表
export const getDetailList = async (data) => {
    return request(`/goods/mgt/goods-sku/page`, {
        method: 'POST',
        data
    });
}

// 删除
export const deleteBanner = async (id) => {
    return request(`/promotion/mgt/promotion-banner/${id}`, {
        method: 'delete',
        // params
    });
}

// 添加 编辑
export const addAndEdit = async (data) => {
    return request('/promotion/mgt/promotion-banner/save', {
        method: 'POST',
        data,
    });
}



// 上下架
export const updateStatus = async (data) => {
    return request(`/promotion/mgt/promotion-banner/upd-status`, {
        method: 'POST',
        data
    });
}




 management/src/pages/work-order/banner/components/addAndEdit.jsx

New file
@@ -0,0 +1,175 @@
import { sendRequest } from '@/utils/antdUtils';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { PageContainer, } from '@ant-design/pro-components';
import { Button, Select, Row, Col, Input, Card, Space, Form, Upload, Spin, message, InputNumber } from 'antd';
import { useState, useEffect } from 'react';
import { addAndEdit, getDetail } from '../service';
import { history, useLocation } from 'umi';
import { customRequest } from '@/utils/utils';
const AddOrEditOrDetail = () => {

  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([])//banner图片
  const [loading, setLoading] = useState(false);
  const { search } = useLocation();
  const searchParams = new URLSearchParams(search);

  const config = {
    name: 'file',
    action: BASE_URL + '/file/obs/upload',
    headers: {
      authorization: localStorage.getItem('token'),
    },
  };
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 20 },
  };
  const uploadButton = (text) => {
    return <div>
      <PlusOutlined />
      <div
        style={{
          marginTop: 8,
        }}
      >
      </div>
    </div>
  };
  useEffect(() => {
    if (searchParams.get('id')) {
      getDetail( searchParams.get('id') ).then(res => {
          if (res.data.picUrl) {
              let obj = [{
                  uid: 1,
                  name: 'banner',
                  url: res.data.picUrl
              }]
              setFileList(obj)
          }
          form.setFieldsValue(res.data)
      })
    }
  }, [])

  // 上传banner前
  const beforeUpload = (file) => {
    return new Promise(async (resolve, reject) => {
      if (file.name.includes(',')) {
        message.warning('上传文件不能包含英文逗号(,)')
        return Upload.LIST_IGNORE
      }
      setLoading(true)
      resolve(file)
    });
  };
  // 上传banner
  const handleChange = ({ file: file, fileList: newFileList }) => {
    if (file.status == 'error') {
      setLoading(false)
      setFileList([])
      message.error('上传失败')
      return
    }
    if (file.status == 'done') {
      setLoading(false)
      message.success('上传成功')
    }
    newFileList.map((item) => {
      if (!item.url && item.status == 'done') {
        item.url = item.response.data;
      }
    });
    setFileList(newFileList);
  };

  // 提交表单
  const submit = () => {
    form.validateFields().then(async (values) => {
      console.log('fileList',fileList)
      values.picUrl = fileList[0].url
      delete values.image
      if (searchParams.get('id')) {
          values.id = searchParams.get('id')
          let state = await sendRequest(addAndEdit, values)
          if (state) {
              history.back()
          }
          return
      }
      let state = await sendRequest(addAndEdit, values)
      if (state) {
          history.back()
      }
    })
  }
  return (
    <PageContainer title={searchParams.get('detail') ? '查看详情' : searchParams.get('id') ? '编辑banner' : '添加banner'}>
      <Spin spinning={loading}>
        <Form scrollToFirstError layout="horizontal" {...formItemLayout} form={form}>
          <Card style={{ background: '#fff', paddingTop: '15px' }}>
            <Row>
              <Col span={12}>
                <Form.Item
                  name="bannerName"
                  label='banner名称' rules={[
                    {
                      required: true,
                      message: '请输入banner名称',
                    },
                  ]}
                >
                  <Input disabled={searchParams.get('detail')} placeholder='请输入banner名称'></Input>
                </Form.Item>

                <Form.Item
                  name="image"
                  label="banner图片"
                  extra={
                    <div>
                      <div>推荐尺寸732px * 320px</div>
                    </div>
                  }
                  rules={[
                    {
                      required: fileList.length == 0 ? true : false,
                      message: '请上传banner图片',
                    },
                  ]}
                >
                  <Upload
                    {...config}
                    listType="picture-card"
                    maxCount={1}
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                    showUploadList={{
                      showPreviewIcon: false,
                    }}
                    customRequest={customRequest}
                    // accept="image/png, image/jpeg, image/jpg"
                    fileList={fileList}
                    disabled={searchParams.get('detail')}
                  >
                    {fileList?.length == 1 || searchParams.get('detail') ? null : uploadButton()}
                  </Upload>
                </Form.Item>
              </Col>
            </Row>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Space size='large'>
                <Button onClick={() => history.back()}>关闭</Button>
                {
                  !searchParams.get('detail') && <Button type='primary' onClick={submit}>保存</Button>
                }
              </Space>
            </div>
          </Card>
        </Form>
      </Spin>
    </PageContainer >
  );
}

export default AddOrEditOrDetail


 management/src/pages/work-order/banner/index.jsx

New file
@@ -0,0 +1,142 @@
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { buildProTableDataSource, sendRequest, showDelConfirm } from '@/utils/antdUtils';
import { Button, message, Space } from 'antd';
import { useRef, useState } from 'react';
import { Access, history, useAccess } from 'umi';
import { getList, updateStatus, deleteBanner } from './service'
const Banner = () => {

  const actionRef = useRef();
  const access = useAccess();

  const columns = [
    {
      title: 'banner名称',
      dataIndex: 'bannerName'
    },
    // {
    //   title: '添加时间',
    //   dataIndex: 'createTime',
    //   hideInSearch: true,
    // },
    // {
    //   title: '排序',
    //   dataIndex: 'sortNum',
    //   hideInSearch: true,
    // },
    // {
    //   title: '状态',
    //   dataIndex: 'listingStatus',
    //   valueEnum: {
    //     '上架中': { text: '上架中' },
    //     '已下架' : { text: '已下架' },
    //   }
    // },
    {
      title: '操作',
      hideInSearch: true,
      render: (text, record) => {
        return (
          <Space>
            <Button
              type="link"
              onClick={() => {
                history.push(`/marketing/banner/add?id=${record.id}&edit=true`);
              }}
            >
              编辑
            </Button>
            <Button
              type="link"
              onClick={() => {
                showDelConfirm(async () => {
                  let status = await sendRequest(deleteBanner,  record.id)
                  if (status) {
                    actionRef.current.reload();
                  }
                },'确认删除所选信息吗？');
              }}
            >
              删除
            </Button>
            {/* <Button
              type="link"
              onClick={() => {
                history.push( `/marketing/banner/add?id=${record.id}&detail=true`);
              }}
            >
              查看详情
            </Button>
            {
              record.listingStatus == '已下架' &&
              <Button
                type="link"
                onClick={() => {
                  showDelConfirm(async () => {
                    let status = await sendRequest(updateStatus, { id: record.id, listingStatus: '上架中' })
                    if (status) {
                      actionRef.current.reload();
                    }
                  }, '确认上架所选信息吗？');
                }}
              >
                上架
              </Button>
            }
            {
              record.listingStatus == '上架中' &&
              <Button
                type="link"
                onClick={async () => {
                  showDelConfirm(async () => {
                    let status = await sendRequest(updateStatus, { id: record.id, listingStatus: '已下架' })
                    if (status) {
                      actionRef.current.reload();
                    }
                  }, '确认下架所选信息吗？');
                }}
              >
                下架
              </Button>
            } */}
          </Space >
        );
      },
    },
  ]

  return <div>
    <PageContainer title='banner管理'>
      <ProTable
        rowKey='id'
        actionRef={actionRef}
        columns={columns}
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          defaultPageSize: 10,
        }}
        request={(params) => {
          params.bannerType = Number(params.bannerType)
          return buildProTableDataSource(getList, params)
        }}
        toolBarRender={(action, selectRows) => [
            <Space>
              <Button
                type="primary"
                onClick={() => {
                  history.push({
                    pathname: `/marketing/banner/add`,
                  });
                }}
              >
                添加
              </Button>
            </Space>
        ]}
      />
    </PageContainer>
  </div>;
};

export default Banner;

 management/src/pages/work-order/banner/service.js

New file
@@ -0,0 +1,52 @@
import { request } from '@umijs/max';

// 列表
export const getList = async (data) => {
    return request(`/promotion/mgt/promotion-banner/page`, {
        method: 'POST',
        data
    });
}
// 详情
export const getDetail = async (id) => {
    return request(`/promotion/mgt/promotion-banner/detail/${id}`, {
        method: 'GET',
        // data
    });
}
// 详情列表
export const getDetailList = async (data) => {
    return request(`/goods/mgt/goods-sku/page`, {
        method: 'POST',
        data
    });
}

// 删除
export const deleteBanner = async (id) => {
    return request(`/promotion/mgt/promotion-banner/${id}`, {
        method: 'delete',
        // params
    });
}

// 添加 编辑
export const addAndEdit = async (data) => {
    return request('/promotion/mgt/promotion-banner/save', {
        method: 'POST',
        data,
    });
}



// 上下架
export const updateStatus = async (data) => {
    return request(`/promotion/mgt/promotion-banner/upd-status`, {
        method: 'POST',
        data
    });
}




 management/src/pages/work-order/problem-type/components/addAndEdit.jsx

New file
@@ -0,0 +1,63 @@
import { Form, Input, Modal, Select } from 'antd';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 12 },
};

const AddEditView = ({ visible, onSave, onUpdate, onCancel, }, ref) => {
  const [form] = Form.useForm();
  const [editData, setEditData] = useState({});

  /**
   * 确定按钮事件
   */
  const okHandle = () => {
    form.validateFields().then((values) => {
      if (editData.id) {
        values.id = editData.id;
        onUpdate(values);
      } else {
        onSave(values);
      }
    });
  };

  useImperativeHandle(ref, () => {
    return {
      refreshData: (data) => {
        form.resetFields();
        form.setFieldsValue(data);
        setEditData(data);
      },
      clean: () => {
        form.resetFields();
      },
    };
  });

  return (
    <Modal
      getContainer={false}
      width="25%"
      destroyOnClose
      title={editData.id ? '编辑问题类型' : '添加问题类型'}
      open={visible}
      onCancel={() => onCancel(false)}
      onOk={okHandle}
    >
      <Form layout="horizontal" {...formItemLayout} form={form}>
      <Form.Item
          name="categoryName"
          label="问题名称"
          rules={[{ required: true, message: '请输入' }]}
        >
          <Input placeholder="请输入" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default forwardRef(AddEditView);

 management/src/pages/work-order/problem-type/index.jsx

New file
@@ -0,0 +1,115 @@
import { buildProTableDataSource, sendRequest, showDelConfirm } from '@/utils/antdUtils';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, Space } from 'antd';
import { useRef, useState } from 'react';
import { useAccess,Access } from 'umi';
import AddAndEdit from './components/addAndEdit';
import { addAndEdit, del, getList } from './service';
const Account = () => {
  const actionRef = useRef();
  const addViewRef = useRef();
  const [modalVisible, handleModalVisible] = useState(false);

  const access = useAccess();

  const columns = [
    {
      title: '问题类型名称',
      dataIndex: 'categoryName',
    },
    {
      title: '操作',
      hideInSearch: true,
      render: (text, record) => {
        return (
          <Space>
            {/* <Access accessible={access.pm5 || false}> */}
              <Button
                type="link"
                onClick={() => {
                  addViewRef.current.refreshData(record);
                  handleModalVisible(true);
                }}
              >
                编辑
              </Button>
            {/* </Access> */}
            {/* <Access accessible={access.pm5 || false}> */}
            <Button
                type="link"
                onClick={() => {
                  showDelConfirm(async () => {
                    let status = await sendRequest(del, record.id);
                    if (status) {
                      actionRef.current.reload();
                    }
                  }, '确认删除该信息吗？');
                }}
              >
                删除
              </Button>
            {/* </Access> */}
          </Space>
        );
      },
    },
  ];
  return (
    <div>
      <PageContainer>
        <ProTable
          rowKey="id"
          actionRef={actionRef}
          columns={columns}
          pagination={{
            showSizeChanger: true,
            showQuickJumper: true,
            defaultPageSize: 10,
          }}
          search={{
            labelWidth: 'auto',
          }}
          request={(params) => {
            return buildProTableDataSource(getList, params);
          }}
          toolBarRender={(action, selectRows) => [
            <Space>
              {/* <Access accessible={access.pm4 || false}> */}
                <Button
                  type="primary"
                  onClick={() => {
                    addViewRef.current.refreshData({});
                    handleModalVisible(true);
                  }}
                >
                  添加
                </Button>
              {/* </Access> */}
            </Space>,
          ]}
        />
        <AddAndEdit
          ref={addViewRef}
          visible={modalVisible}
          onCancel={() => handleModalVisible(false)}
          onSave={async (fileds) => {
            const success = await sendRequest(addAndEdit, fileds);
            if (success) {
              handleModalVisible(false);
              actionRef.current.reload();
            }
          }}
          onUpdate={async (fileds) => {
            const success = await sendRequest(addAndEdit, fileds);
            if (success) {
              handleModalVisible(false);
              actionRef.current.reload();
            }
          }}
        />
      </PageContainer>
    </div>
  );
};

export default Account;

 management/src/pages/work-order/problem-type/service.js

New file
@@ -0,0 +1,31 @@
import { request } from '@umijs/max';

// 列表
export const getList = async (data) => {
    return request(`/goods/mgt/goods-category/page`, {
        method: 'POST',
        data
    });
}


// 添加dept
export const addAndEdit = async (data) => {
    return request('/goods/mgt/goods-category/save', {
        method: 'POST',
        data,
    });
}




// 批量删除dept
export const del = async (id) => {
    return request(`/goods/mgt/goods-category/${id}`, {
        method: 'DELETE',
        // data
    });
}



 management/src/requestErrorConfig.ts

@@ -52,7 +52,7 @@
      const { data } = response as unknown as ResponseStructure;
      if (data?.code === 103 || data?.code === 401) {
        localStorage.clear()
        history.replace('/login')
        // history.replace('/login')
        return Promise.resolve(response)
      }
      if (data?.code != 200) {