miniapp/src/pages/issue/edit/index.jsx

import React from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { CellGroup, Cell } from '@antmjs/vantui';
import Page from '@/layouts/index';
import { useModel } from '@/store';
import { ROLE_INSPECTOR, ROLE_MANAGER, ROLE_CITIZEN } from '@/utils/user';
import { getTaIssueById } from '@/services/taissue';
import IssueForm from '../components/Issue';
import Save from './components/Save';
import Edit from './components/Edit';
import Assigned from './components/Assigned';
import Cancel from './components/Cancel';

export default (props) => {

  const router = Taro.useRouter();
  const { id, act } = router.params;

  const { user, duty } = useModel('user');

  const [loading, setLoading] = React.useState(false);
  const [issue, setIssue] = React.useState();

  // 各按钮状态
  const [
    readOnly,
    canEdit,
    canAssigned,
    canCancel,
  ] = React.useMemo(() => {
    // 如果是督察员
    if (duty == ROLE_INSPECTOR) {
      return [
        issue && issue.processNode != 'start' && issue.processStatus != 'reject',
        issue && (issue.processNode == 'start' || issue.processStatus == 'reject'),
        false,
        false,
      ]
    }

    // 如果是管理员
    if (duty == ROLE_MANAGER) {
      return [
        issue && issue.processNode != 'start',
        false,
        issue && issue.processNode == 'start',
        issue && issue.processNode == 'start',
      ]
    }

    // 如果是市民
    if (duty == ROLE_CITIZEN) {
      return [
        true,
        false,
        false,
        false,
      ]
    }

    return [];
  }, [issue, duty]);

  console.log(duty, issue, 
    readOnly,
    canEdit,
    canAssigned,
    canCancel,)

  // const onIssueChange = (val = {}) => {
  //   setIssue({
  //     ...(issue || {}),
  //     ...val,
  //   })
  // }
  
  React.useEffect(() => {
    if (id) {
      setLoading(true)
      getTaIssueById(id).then(res => {
        setLoading(false);
        setIssue(res);
      }).catch(() => {
        setLoading(false);
      });
    }
  }, [id]);

  return (
    <Page roles={[ROLE_INSPECTOR, ROLE_MANAGER, ROLE_CITIZEN]} loading={loading}>
      <IssueForm
        issue={issue}
        readOnly={readOnly}
        showOrg={canAssigned}
        showExpireDate={canAssigned}
        renderAction={(formData) => (
          <View style={{ padding: 'var(--main-space)', background: '#fff' }}>
            {!id && <Save formData={formData} />}
            {canEdit && <Edit issue={issue} formData={formData} />}
            {canAssigned && <Assigned issue={issue} formData={formData} />}
            {canCancel && <Cancel issue={issue} />}
          </View>
        )}
      />
    </Page>
  )
}