377 lines
13 KiB
JavaScript
377 lines
13 KiB
JavaScript
import {
|
||
Button, DatePicker, Descriptions, Form, Input, InputNumber, message, Modal, Row, Col, Select, Space, Tag, Table,
|
||
} from "antd";
|
||
import TableAction from "@cqsjjb/jjb-react-admin-component/TableAction";
|
||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||
import { useEffect, useState } from "react";
|
||
import PageLayout from "@cqsjjb/jjb-react-admin-component/PageLayout";
|
||
import SearchForm from "@cqsjjb/jjb-react-admin-component/SearchForm";
|
||
import ControlWrapper from "@cqsjjb/jjb-react-admin-component/ControlWrapper";
|
||
import { isOrgAccountEnabled } from "~/utils/enterpriseInfo/adapter";
|
||
import {
|
||
CHONGQING_DISTRICTS,
|
||
ENTERPRISE_SCALE_OPTIONS,
|
||
ORG_ACCOUNT_STATE_OPTIONS,
|
||
ENTERPRISE_STATUS_OPTIONS
|
||
} from "~/enumerate/enterpriseOptions";
|
||
import { NS_ORG_INFO } from "~/enumerate/namespace";
|
||
import { safeListRequest, safeRequest } from "~/utils";
|
||
|
||
function OrgAccountPage(props) {
|
||
const [searchForm] = Form.useForm();
|
||
const [editForm] = Form.useForm();
|
||
const [viewOpen, setViewOpen] = useState(false);
|
||
const [editOpen, setEditOpen] = useState(false);
|
||
const [currentId, setCurrentId] = useState(null);
|
||
const [detail, setDetail] = useState(null);
|
||
const [rawDetail, setRawDetail] = useState(null);
|
||
const [detailLoading, setDetailLoading] = useState(false);
|
||
const [editLoading, setEditLoading] = useState(false);
|
||
const [dataSource, setDataSource] = useState([]);
|
||
const [total, setTotal] = useState(0);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const getData = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const params = searchForm.getFieldsValue();
|
||
const res = await safeListRequest(props.orgAccountList)(params);
|
||
setDataSource(res?.data || []);
|
||
setTotal(res?.total || 0);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
useEffect(() => {
|
||
getData();
|
||
}, []);
|
||
|
||
const loadDetail = async (id) => {
|
||
setDetailLoading(true);
|
||
const res = await safeRequest(props.orgAccountGet, { id });
|
||
setDetail(res?.data || null);
|
||
setRawDetail(res?.raw || null);
|
||
setDetailLoading(false);
|
||
return res;
|
||
};
|
||
|
||
const openView = async (id) => {
|
||
setCurrentId(id);
|
||
setViewOpen(true);
|
||
await loadDetail(id);
|
||
};
|
||
|
||
const openEdit = async (id) => {
|
||
setCurrentId(id);
|
||
setEditOpen(true);
|
||
const res = await loadDetail(id);
|
||
if (res?.data) {
|
||
editForm.setFieldsValue(res.data);
|
||
}
|
||
};
|
||
|
||
const onToggleStatus = (record) => {
|
||
const enabled = isOrgAccountEnabled(record);
|
||
Modal.confirm({
|
||
title: "确认操作",
|
||
content: enabled ? `确认禁用「${record.orgName}」账号？` : `确认启用「${record.orgName}」账号？`,
|
||
okText: "确认",
|
||
cancelText: "取消",
|
||
onOk: async () => {
|
||
const nextState = enabled ? 1 : 0;
|
||
const res = await props.orgAccountUpdateState({ id: record.id, state: nextState });
|
||
if (res?.success !== false) {
|
||
message.success("操作成功");
|
||
await getData();
|
||
}
|
||
|
||
},
|
||
});
|
||
};
|
||
|
||
const onResetPassword = (record) => {
|
||
console.log(record);
|
||
Modal.confirm({
|
||
title: "重置密码",
|
||
content: (
|
||
<div>
|
||
<p>
|
||
确认将
|
||
<strong>{record.orgName}</strong>
|
||
的密码重置为初始密码？
|
||
</p>
|
||
<p style={{ color: "rgba(0,0,0,0.45)", fontSize: 12 }}>初始密码：Ap@123456</p>
|
||
</div>
|
||
),
|
||
okText: "确认重置",
|
||
cancelText: "取消",
|
||
onOk: async () => {
|
||
const res = await props.orgAccountResetPassword({ data: record.id });
|
||
if (res?.success !== false) {
|
||
message.success("密码已重置");
|
||
}
|
||
|
||
},
|
||
});
|
||
};
|
||
|
||
const onDelete = (record) => {
|
||
Modal.confirm({
|
||
title: "确认删除",
|
||
content: (
|
||
<div>
|
||
<p>
|
||
确认删除
|
||
<strong>{record.orgName}</strong>
|
||
的账号？
|
||
</p>
|
||
<p style={{ color: "rgba(0,0,0,0.45)", fontSize: 12 }}>此操作不可恢复，请谨慎操作。</p>
|
||
</div>
|
||
),
|
||
okText: "确认删除",
|
||
okButtonProps: { danger: true },
|
||
cancelText: "取消",
|
||
onOk: async () => {
|
||
const res = await props.orgAccountDelete({ data: record.id });
|
||
if (res?.success !== false) {
|
||
message.success("删除成功");
|
||
await getData();
|
||
}
|
||
|
||
},
|
||
});
|
||
};
|
||
|
||
const onEditSubmit = async () => {
|
||
const values = await editForm.validateFields();
|
||
setEditLoading(true);
|
||
const res = await props.orgAccountModify({
|
||
...values,
|
||
id: currentId,
|
||
raw: rawDetail,
|
||
});
|
||
setEditLoading(false);
|
||
if (res?.success !== false) {
|
||
message.success("保存成功");
|
||
setEditOpen(false);
|
||
setCurrentId(null);
|
||
setRawDetail(null);
|
||
editForm.resetFields();
|
||
await getData();
|
||
}
|
||
|
||
};
|
||
|
||
const columns = [
|
||
{ title: "机构名称", dataIndex: "orgName", ellipsis: true },
|
||
{ title: "属地", dataIndex: "district", width: 100 },
|
||
{
|
||
title: "状态",
|
||
width: 80,
|
||
render: (_, record) => (
|
||
<Tag color={isOrgAccountEnabled(record) ? "success" : "error"}>
|
||
{isOrgAccountEnabled(record) ? "启用" : "禁用"}
|
||
</Tag>
|
||
),
|
||
},
|
||
{ title: "开户时间", dataIndex: "createTime", width: 110 },
|
||
{
|
||
title: "操作",
|
||
width: 320,
|
||
fixed: "right",
|
||
render: (_, record) => (
|
||
<TableAction>
|
||
<Button type="link" size="small" onClick={() => openView(record.id)}>查看</Button>
|
||
<Button type="link" size="small" onClick={() => openEdit(record.id)}>编辑</Button>
|
||
<Button type="link" size="small" onClick={() => onResetPassword(record)}>重置密码</Button>
|
||
<Button type="link" size="small" danger onClick={() => onDelete(record)}>删除</Button>
|
||
<Button type="link" size="small" onClick={() => onToggleStatus(record)}>
|
||
{isOrgAccountEnabled(record) ? "禁用" : "启用"}
|
||
</Button>
|
||
</TableAction>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<PageLayout
|
||
title={
|
||
<div>
|
||
<span>评价机构账号管理</span>
|
||
<div className="pageLayout-extra">
|
||
监管端维护评价机构开户账号。
|
||
</div>
|
||
</div>
|
||
}
|
||
>
|
||
<SearchForm
|
||
style={{ marginBottom: 24 }}
|
||
form={searchForm}
|
||
loading={loading}
|
||
formLine={[
|
||
<Form.Item key="orgName" name="orgName">
|
||
<ControlWrapper.Input label="机构名称" placeholder="关键字搜索" allowClear />
|
||
</Form.Item>,
|
||
<Form.Item key="district" name="district">
|
||
<ControlWrapper.Select label="属地" placeholder="请选择属地" allowClear>
|
||
{CHONGQING_DISTRICTS.map((opt) => (
|
||
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
|
||
))}
|
||
</ControlWrapper.Select>
|
||
</Form.Item>,
|
||
<Form.Item key="state" name="state">
|
||
<ControlWrapper.Select label="状态" placeholder="请选择状态">
|
||
{ORG_ACCOUNT_STATE_OPTIONS.map((opt) => (
|
||
<Select.Option key={opt.value} value={opt.value}>{opt.label}</Select.Option>
|
||
))}
|
||
</ControlWrapper.Select>
|
||
</Form.Item>,
|
||
<Form.Item key="openTimeRange" name="openTimeRange">
|
||
<ControlWrapper.DatePicker.RangePicker label="开户时间" />
|
||
</Form.Item>,
|
||
]}
|
||
onReset={() => {
|
||
searchForm.resetFields();
|
||
getData();
|
||
}}
|
||
onFinish={() => getData()}
|
||
/>
|
||
<Table
|
||
rowKey="id"
|
||
columns={columns}
|
||
dataSource={dataSource}
|
||
scroll={{ y: props.scrollY }}
|
||
loading={loading}
|
||
pagination={{
|
||
total,
|
||
showSizeChanger: true,
|
||
showQuickJumper: true,
|
||
showTotal: (t) => `共 ${t} 条`,
|
||
current: 1,
|
||
pageSize: 10,
|
||
onChange: (page, pageSize) => {
|
||
getData();
|
||
},
|
||
}}
|
||
/>
|
||
|
||
<Modal
|
||
open={viewOpen}
|
||
destroyOnHidden
|
||
title="机构信息查看"
|
||
width={760}
|
||
loading={detailLoading}
|
||
cancelText="关闭"
|
||
okButtonProps={{ style: { display: "none" } }}
|
||
onCancel={() => { setViewOpen(false); setDetail(null); setRawDetail(null); }}
|
||
>
|
||
{detail && (
|
||
<Descriptions bordered column={2} size="small">
|
||
<Descriptions.Item label="机构名称">{detail.orgName}</Descriptions.Item>
|
||
<Descriptions.Item label="统一社会信用代码">{detail.creditCode}</Descriptions.Item>
|
||
<Descriptions.Item label="属地">{detail.regionCountyName}</Descriptions.Item>
|
||
<Descriptions.Item label="安全生产监管行业类别">{detail.safetyIndustryCategory}</Descriptions.Item>
|
||
<Descriptions.Item label="经营地址" span={2}>{detail.businessAddress}</Descriptions.Item>
|
||
<Descriptions.Item label="企业状态">{detail.enterpriseStatus}</Descriptions.Item>
|
||
<Descriptions.Item label="经度/纬度">{detail.longitude}, {detail.latitude}</Descriptions.Item>
|
||
<Descriptions.Item label="主要负责人">{detail.principal}</Descriptions.Item>
|
||
<Descriptions.Item label="主要负责人电话">{detail.principalPhone}</Descriptions.Item>
|
||
<Descriptions.Item label="法定代表人">{detail.legalRepresentative}</Descriptions.Item>
|
||
<Descriptions.Item label="法人电话">{detail.legalRepPhone}</Descriptions.Item>
|
||
<Descriptions.Item label="企业规模" span={2}>{detail.enterpriseScale}</Descriptions.Item>
|
||
</Descriptions>
|
||
)}
|
||
</Modal>
|
||
|
||
<Modal
|
||
open={editOpen}
|
||
destroyOnHidden
|
||
title="编辑机构信息"
|
||
width={760}
|
||
confirmLoading={editLoading}
|
||
okText="保存"
|
||
cancelText="取消"
|
||
onCancel={() => {
|
||
setEditOpen(false);
|
||
setCurrentId(null);
|
||
setRawDetail(null);
|
||
editForm.resetFields();
|
||
}}
|
||
onOk={onEditSubmit}
|
||
>
|
||
<Form form={editForm} layout="vertical">
|
||
<Row gutter={16}>
|
||
<Col span={12}>
|
||
<Form.Item name="orgName" label="机构名称" rules={[{ required: true, message: "请输入机构名称" }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="creditCode" label="统一社会信用代码" rules={[{ required: true, message: "请输入信用代码" }]}>
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="regionCountyName" label="属地">
|
||
<Select options={CHONGQING_DISTRICTS} placeholder="请选择属地" />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="safetyIndustryCategory" label="安全生产监管行业类别">
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={24}>
|
||
<Form.Item name="businessAddress" label="企事业单位经营地址">
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="enterpriseStatus" label="企业状态">
|
||
<Select options={ENTERPRISE_STATUS_OPTIONS} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item name="longitude" label="经度">
|
||
<InputNumber style={{ width: "100%" }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={6}>
|
||
<Form.Item name="latitude" label="纬度">
|
||
<InputNumber style={{ width: "100%" }} />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="principal" label="主要负责人">
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="principalPhone" label="主要负责人电话">
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="legalRepresentative" label="法定代表人">
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="legalRepPhone" label="法人电话">
|
||
<Input />
|
||
</Form.Item>
|
||
</Col>
|
||
<Col span={12}>
|
||
<Form.Item name="enterpriseScale" label="企业规模">
|
||
<Select options={ENTERPRISE_SCALE_OPTIONS.map((o) => ({ label: o.label, value: o.label }))} />
|
||
</Form.Item>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
</Modal>
|
||
</PageLayout>
|
||
);
|
||
}
|
||
|
||
export default Connect([NS_ORG_INFO], true)(OrgAccountPage); |