safety-eval-service-frontend/src/pages/Container/Supervision/BasicInfo/OrgAccount/index.js

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);