feats

src/pages/check/Edit.jsx

@@ -6,11 +6,13 @@ import CheckForm from './components/CheckForm';
 import { useSearchParams } from 'react-router-dom';
 import { getTaCheckById } from '@/service/tacheck';
 import LocForm from './components/LocForm';
+import LocTable from './components/LocTable';
 
 export default (props) => {
   const [searchParams] = useSearchParams();
 
   const [checkInfo, setCheckInfo] = React.useState();
+  const [tab, setTab] = React.useState('1');
   const locRef = React.useRef();
 
   const id = searchParams.get('id');
@@ -23,8 +25,17 @@ export default (props) => {
 
   return (
     <Page>
-      <CheckForm checkInfo={checkInfo} onChange={setCheckInfo} />
-      <Row gutter={24} style={{marginTop: '24px'}}>
+      <CheckForm
+        checkInfo={checkInfo}
+        onChange={setCheckInfo}
+        onTabChange={setTab}
+      />
+      <div style={{marginTop: '24px'}}>
+      {
+        tab == '1' && <LocTable checkId={checkInfo?.checkId} />
+      }
+      </div>
+      {/* <Row gutter={24} style={{marginTop: '24px'}}>
         <Col span={12}>
           <Card title="实例调查" extra={<Button icon={<PlusOutlined />} onClick={() => locRef.current.newQu()}>问题</Button>}>
             <LocForm ref={locRef} checkId={id} />
@@ -34,7 +45,7 @@ export default (props) => {
           <Card title="问卷调查">
           </Card>
         </Col>
-      </Row>
+      </Row> */}
     </Page>
   )
 }

src/pages/check/components/CheckForm.jsx

@@ -1,16 +1,21 @@
 import React from 'react';
 import dayjs from 'dayjs';
-import { Row, Col, Button, Form, Input, DatePicker } from 'antd';
+import { EditOutlined } from '@ant-design/icons';
+import { Card, Tabs, Button, Form, Input, DatePicker } from 'antd';
 import { ModalForm } from '@ant-design/pro-components';
 import { postTaCheck, putTaCheck } from '@/service/tacheck';
 
 export default (props) => {
-  const { checkInfo, onChange } = props;
+  const { checkInfo, onChange, onTabChange } = props;
 
   const [open, setOpen] = React.useState(false);
   const [form] = Form.useForm();
 
-  const title = checkInfo ? checkInfo.title : '点击编辑创建';
+  const onEdit = () => {
+    setOpen(true);
+  }
+
+  const title = checkInfo ? checkInfo.title : <div onClick={onEdit}>点击编辑创建</div>;
   const dateStr = checkInfo ? `${checkInfo.startDate} ~ ${checkInfo.endDate}` : '';
 
   const onFinish = async (values) => {
@@ -42,16 +47,27 @@ export default (props) => {
   }, [checkInfo]);
 
   return (
-    <Row gutter={48}>
-      <Col span={18}>
-        <h2 style={{ textAlign: 'center' }} >{title}</h2>
-        <Row>
-          <Col span={8} offset={16}>{dateStr}</Col>
-        </Row>
-      </Col>
-      <Col span={4}>
-        <Button onClick={() => setOpen(true)}>编辑</Button>
-      </Col>
+    <Card bodyStyle={{padding: 0}}>
+      <div style={{display: 'flex', padding: '1em', alignItems: 'center'}}>
+        <div style={{flex: 'none'}}><Button type="link" onClick={onEdit} icon={<EditOutlined />} /></div>
+        <div style={{flex: 'none', margin: '0 1em'}}>{dateStr}</div>
+        <div style={{flex: '1', fontSize: '1.6em'}}>{title}</div>
+      </div>
+      <Tabs
+        defaultActiveKey='1'
+        onChange={onTabChange}
+        tabBarStyle={{margin: '0 2em'}}
+        items={[
+          {
+            label: '实地测评',
+            key: '1',
+          },
+          {
+            label: '问卷调查',
+            key: '2',
+          }
+        ]}
+      />
       <ModalForm title="测评维护" open={open} width={480} form={form} onFinish={onFinish} onOpenChange={setOpen}>
           <Form.Item name="title" label="测评名称" required>
             <Input placeholder="请输入测评名称" />
@@ -63,6 +79,6 @@ export default (props) => {
             <DatePicker placeholder="请选择" style={{ width: '100%' }} />
           </Form.Item>
       </ModalForm>
-    </Row>
+    </Card>
   )
 }

src/pages/check/components/LocForm.jsx

@@ -1,123 +1,51 @@
 import React from 'react';
 import { Button, Tabs, Form, Row, Col, InputNumber, message } from 'antd';
-import useBool from '@/utils/hooks/useBool';
-import { getTdLocType } from '@/service/tdloctype';
-import { getByCheckId, postTaCheckItem } from '@/service/tacheckitem';
-import QuManage from './QuManage';
+import { ModalForm, ProFormDigit, ProFormDependency } from '@ant-design/pro-components';
+import { postTaCheckItem } from '@/service/tacheckitem';
 
-const ItemForm = (props) => {
-  const {checkId, typeId, onChange} = props;
+const LocForm = (props) => {
+  const {checkItem, open, onOpenChange, onChange} = props;
 
   const [form] = Form.useForm();
-  const [loading, startLoading, stopLoading] = useBool();
 
-  const onFinish = (values) => {
-    const data = {...values, checkId, typeId, itemType: 'loc'}
-
-    startLoading();
-    postTaCheckItem(data).then(res => {
-      onChange(res);
-      form.setFieldsValue(res);
-      stopLoading();
-    }).catch(() => {
-      stopLoading();
-    });
+  const onFinish = async (values) => {
+    const data = { ...(checkItem || {}), ...values, itemType: 'loc'}
+    const res = await postTaCheckItem(data);
+    onChange(res);
+    return true;
   }
 
   const reset = () => {
     form.resetFields();
     form.setFieldsValue({ num: 1 });
-    onChange();
   }
 
   React.useEffect(() => {
-    if (checkId && typeId) {
-      startLoading();
-      getByCheckId(checkId, typeId).then(res => {
-        if (res) {
-          onChange(res);
-          form.setFieldsValue(res);
-        } else {
-          reset();
-        }
-        stopLoading();
-      }).catch(() => {
-        stopLoading();
-        reset();
-      });
+    if (checkItem) {
+      form.setFieldsValue(checkItem);
     } else {
       reset();
     }
-  }, [checkId, typeId]);
+  }, [checkItem]);
 
   return (
-    <Form layout="inline" form={form} onFinish={onFinish}>
-      <Form.Item label="数量" name="num">
-        <InputNumber min={1} />
-      </Form.Item>
-      <Form.Item label="总分" name="fullScore">
-        <InputNumber min={0.00} precision={2} />
-      </Form.Item>
-      <Form.Item>
-        <Button disabled={!checkId || !typeId} loading={loading} type="primary" htmlType="submit">
-          确定
-        </Button>
-      </Form.Item>
-    </Form>
+    <ModalForm
+      title={`${checkItem?.name} 维护`}
+      width={600}
+      open={open}
+      form={form}
+      onFinish={onFinish}
+      onOpenChange={onOpenChange}
+    >
+      <ProFormDigit label="计分" name="fullScore" min={0.00} fieldProps={{precision: 2}} />
+      <ProFormDigit label="数量" name="num" min={1} fieldProps={{precision: 0}} />
+      <ProFormDependency name={['fullScore' , 'num']}>
+        {
+          ({fullScore, num}) => <ProFormDigit readonly label="分值" value={fullScore / num} fieldProps={{precision: 2}} />
+        }        
+      </ProFormDependency>
+    </ModalForm>
   )
 }
 
-export default React.forwardRef((props, ref) => {
-  const {checkId} = props;
-  const [locList, setLocList] = React.useState([]);
-  const quRef = React.useRef();
-  const [checkItem, setCheckItem] = React.useState();
-  const [typeId, setTypeId] = React.useState();
-
-  const tabItems = React.useMemo(() => {
-    return locList.map(x => ({
-      label: x.name,
-      key: x.typeId,
-    }));
-  }, [locList]);
-
-  React.useEffect(() => {
-    getTdLocType({ pageSize: 500 }).then(res => {
-      const list = res.records;
-      setLocList(list);
-      // 默认第一个
-      setTypeId(list[0]?.typeId);
-    });
-  }, []);
-
-  
-  React.useImperativeHandle(ref, () => ({
-    newQu: () => {
-      if (!checkItem) {
-        message.warning('请先设置数量, 总分等');
-        return;
-      }
-      quRef.current.add();
-    },
-  }), [checkItem]);
-
-  return (
-    <div style={{display: 'flex'}}>
-      <div style={{flex: 'none'}}>
-        <Tabs
-          tabPosition="left"
-          activeKey={typeId}
-          items={tabItems}
-          onChange={(activeKey) => {
-            setTypeId(activeKey)
-            setCheckItem()
-          }}
-        />
-      </div>
-      <div style={{flex: 1}}>
-        <ItemForm checkId={checkId} typeId={typeId} onChange={setCheckItem} />
-        <QuManage ref={quRef} itemId={checkItem?.itemId} />
-      </div>
-    </div>
-  )
-})
+export default LocForm;

src/pages/check/components/LocTable.jsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import useBool from '@/utils/hooks/useBool';
+import { Table, Space, Button, Row, Col, Card } from 'antd';
+import { getTaCheckItem } from '@/service/tacheckitem';
+import QuList from './QuList';
+import LocForm from './LocForm';
+
+export default (props) => {
+  const { checkId } = props;
+
+  const [list, setList] = React.useState([]);
+  const [curItem, setCurItem] = React.useState();
+  const [loading, startLoading, stopLoading] = useBool();
+  const [open, setOpen] = React.useState(false);
+
+  const onEdit = (row) => {
+    setCurItem(row);
+    setOpen(true);
+  }
+
+  const columns = [
+    {
+      title: '点位名称',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '分值',
+      key: 'avgScore',
+      render: (_, row) => row.fullScore ? Number(row.fullScore / (row.num || 1)).toFixed(2) : '-',
+    },
+    {
+      title: '数量',
+      dataIndex: 'num',
+      key: 'num',
+    },
+    {
+      title: '小计',
+      dataIndex: 'fullScore',
+      key: 'fullScore',
+    },
+    {
+      title: '测评得分',
+      dataIndex: 'score',
+      key: 'score',
+    },
+    {
+      title: '操作',
+      key: 'options',
+      width: 100,
+      render: (_, row) => {
+        return (
+          <Space>
+            <Button type="link" onClick={() => onEdit(row)}>编辑</Button>
+            <Button type="link" onClick={() => setCurItem(row)}>试题</Button>
+          </Space>
+        )
+      }
+    },
+  ]
+
+  const onChange = (item) => {
+    const newList = list.map(x => x.itemId === item.itemId ? item : x);
+    setList(newList);
+  }
+
+  React.useEffect(() => {
+    if (checkId) {
+      startLoading();
+      getTaCheckItem({pageSize: 500, checkId, itemType: "loc"}).then(res => {
+        setList(res.records || []);
+        stopLoading();
+      }).catch(() => {
+        stopLoading();
+      });
+    }
+  }, [checkId]);
+  
+  return (
+    <Row gutter={24}>
+      <Col span={12}>
+        <Card>
+          <Table
+            rowKey="typeId"
+            loading={loading}
+            columns={columns}
+            dataSource={list}
+            pagination={false}
+          />
+          <LocForm
+            open={open}
+            checkItem={curItem}
+            onOpenChange={setOpen}
+            onChange={onChange}
+          />
+        </Card>
+      </Col>
+      <Col span={12}>
+        <QuList itemId={curItem?.itemId} />
+      </Col>
+    </Row>
+  )
+}

src/pages/check/components/QuForm.jsx

@@ -21,8 +21,8 @@ export default (props) => {
       itemId,
     }
 
-    const res = await postTaCheckItemQu(data).then(x => x);
-
+    const res = await postTaCheckItemQu(data);
+    console.log(res)
     onChange(res);
     return true;
   }

src/pages/check/components/QuList.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { Button, Card, Table, Space, Popconfirm } from 'antd';
+import useBool from '@/utils/hooks/useBool';
+import { getTaCheckItemQu } from '@/service/tdlocquestion';
+import { deleteTaCheckItemQu } from '@/service/tacheckitemqu';
+import QuForm from './QuForm';
+
+export default (props) => {
+  const { itemId } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const [list, setList] = React.useState([]);
+  const [curItem, setCurItem] = React.useState();
+  const [loading, startLoading, stopLoading] = useBool();
+
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'sortNo',
+      key: 'sortNo',
+      width: 100,
+    },
+    {
+      title: '题干',
+      dataIndex: 'title',
+      key: 'title',
+    },
+    {
+      title: '分值',
+      dataIndex: 'anScore',
+      key: 'anScore',
+      width: 100,
+    },
+    {
+      title: '操作',
+      key: 'options',
+      width: 100,
+      render: (_, row) => {
+        return (
+          <Space>
+            <Button type="link" onClick={() => onEdit(row)}>编辑</Button>
+            <Popconfirm
+              title="确认进行删除操作?"
+              onConfirm={() => onDelete(row)}
+            >
+              <Button type='link' danger >删除</Button>
+            </Popconfirm>
+          </Space>
+        )
+      }
+    },
+  ]
+
+  const onAdd = () => {
+    setCurItem();
+    setOpen(true);
+  }
+  
+  const onEdit = (qu) => {
+    setCurItem(qu);
+    setOpen(true);
+  }
+
+  const onDelete = (qu) => {
+    if (qu?.quId) {
+      deleteTaCheckItemQu(qu.quId).then(() => {
+        setList(list.filter(x => x.quId !== qu.quId));
+      })
+    } else {
+      setList(list.filter(x => x.quId !== qu.quId));
+    }
+  }
+  
+  const onFinish = (res) => {
+    let found = false;
+    const newList = list.map(item => {
+      if (item.quId === res.quId) {
+        found = true;
+        return res;
+      } else {
+        return item
+      }
+    });
+
+    if (!found) {
+      newList.push(res);
+    }
+
+    setList(list);
+  }
+
+  React.useEffect(() => {
+    if (itemId) {
+      startLoading();
+      getTaCheckItemQu({pageSize: 500, itemId}).then((res) => {
+        stopLoading();
+        setList(res.records);
+      }).catch(() => {
+        stopLoading();
+      });
+    }
+  }, [itemId]);
+
+  return (
+    <Card title="试题列表" extra={<Button type="link" disabled={!itemId} onClick={onAdd}>新增</Button>}>
+      <Table
+        rowKey="quId"
+        loading={loading}
+        columns={columns}
+        dataSource={list}
+        pagination={false}
+      />
+      <QuForm
+        open={open}
+        itemId={itemId}
+        quInfo={curItem}
+        onOpenChange={setOpen}
+        onChange={onFinish}
+      />
+    </Card>
+  )
+}

src/pages/check/components/QuManage.jsx

@@ -1,131 +0,0 @@
-import React from 'react';
-import { Button, Form, Row, Col, Card, List, Popconfirm } from 'antd';
-import QuForm from './QuForm';
-import { postTaCheckItemQu, getTaCheckItemQu } from '@/service/tdlocquestion';
-import { deleteTaCheckItemQu } from '@/service/tacheckitemqu';
-import { message } from 'antd';
-
-const QuItem = (props) => {
-  const { qu, onEdit, onDelete } = props;
-
-  const quTitle = `${qu?.sortNo}. [${qu?.quType == 'fill' ? '填空' : '选择'}] ${qu?.title} (分值: ${qu?.computeType} ${qu?.anScore}/${qu?.maxScore})`
-
-  return (
-    <Card
-      title={quTitle} 
-      style={{marginTop: '24px'}}
-      extra={(
-        <>
-          <Button type='link' onClick={onEdit}>修改</Button>
-          <Popconfirm
-            title="确认进行删除操作?"
-            onConfirm={onDelete}
-          >
-            <Button type='link' danger >删除</Button>
-          </Popconfirm>
-        </>
-      )} 
-    >
-      <Card.Meta
-        title={
-          qu?.quType != 'fill' ?
-          (
-            <Row gutter={24}>
-              {
-                (qu?.answerList||[]).map((item) => {
-                  const anStr = `${item.answerCode}. (${item.score || 0}分) ${item.answer}`;
-
-                  return (
-                    <Col span={12} key={item.answerId} style={{ height: '32px', lineHeight: '32px', fontWeight: 400 }}>
-                    {anStr}
-                    </Col>
-                  );
-                })
-              }
-            </Row>
-          ) : null
-        }
-        description={(
-          <>
-            <h3>验收标准</h3>
-            <div dangerouslySetInnerHTML={{ __html: qu?.stand }} />
-          </>
-        )}
-      />
-    </Card>
-  );
-}
-
-export default React.forwardRef((props, ref) => {
-
-  const { itemId, onChange } = props;
-  
-  const [open, setOpen] = React.useState(false);
-  const [quInfo, setQuInfo] = React.useState(false);
-  const [list, setList] = React.useState([]);
-
-  const onFinish = (res) => {
-    let found = false;
-    const newList = list.map(item => {
-      if (item.quId === res.quId) {
-        found = true;
-        return res;
-      } else {
-        return item
-      }
-    });
-
-    if (!found) {
-      newList.push(res);
-    }
-
-    setList(list);
-  }
-
-  const onEditQu = (qu) => {
-    setQuInfo(qu);
-    setOpen(true);
-  }
-
-  const onDeleteQu = (qu) => {
-    if (qu?.quId) {
-      deleteTaCheckItemQu(qu.quId).then(() => {
-        setList(list.filter(x => x.quId !== qu.quId));
-      })
-    } else {
-      setList(list.filter(x => x.quId !== qu.quId));
-    }
-  }
-
-  React.useEffect(() => {
-    if (itemId) {
-      getTaCheckItemQu({pageSize: 500, itemId}).then((res) => {
-        setList(res.records);
-      });
-    }
-  }, [itemId]);
-
-  React.useImperativeHandle(ref, () => ({
-    add: () => {
-      setQuInfo();
-      setOpen(true);
-    },
-  }), []);
-
-  return (
-    <>
-      <QuForm itemId={itemId} quInfo={quInfo} open={open} onOpenChange={setOpen} onChange={onFinish} />
-      <List
-        itemLayout="horizontal"
-        dataSource={list}
-        renderItem={(item) => (
-          <QuItem
-            qu={item}
-            onEdit={() => onEditQu(item)}
-            onDelete={() => onDeleteQu(item)}
-          />
-        )}
-      />
-    </>
-  )
-});

src/pages/check/index.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { queryTable } from "@/utils/request";
 import { ProTable } from "@ant-design/pro-components";
 import { Button, message, Popconfirm } from "antd";
-import { getTaCheck } from '@/service/tacheck';
+import { getTaCheck, deleteTaCheck, putTaCheck } from '@/service/tacheck';
 
 const queryList = queryTable(getTaCheck);
 
@@ -13,18 +13,41 @@ export default (props) => {
   const navigate = useNavigate();
   const actionRef = React.useRef();
 
+  const onDelete = (item) => {
+    deleteTaCheck(item.checkId).then(() => {
+      actionRef.current.reload();
+    })
+  }
+
+  const onUpdateStatus = (item) => {
+    putTaCheck(item.checkId, {...item, status: Math.abs(item.status - 1)}).then(() => {
+      actionRef.current.reload();
+    })
+  }
+
   const columns = [
     {
       title: "测评名称",
       dataIndex: "title",
     },
+    {
+      title: "测评日期",
+      hideInTable: true,
+      dataIndex: "dateRange",
+      valueType: 'dateRange',
+      search: {
+        transform: value => ({ startDate: value[0], endDate: value[1] }),
+      },
+    },
     {
       title: "开始日期",
       dataIndex: "startDate",
+      hideInSearch: true,
     },
     {
       title: "结束日期",
       dataIndex: "endDate",
+      hideInSearch: true,
     },
     {
       title: "状态",
@@ -51,7 +74,7 @@ export default (props) => {
           style={{ padding: 0 }}
           type="link"
           onClick={() => {
-            updateStatus(record);
+            onUpdateStatus(record);
           }}
         >
           {record.status === 1 ? "禁用" : "启用"}
@@ -61,7 +84,6 @@ export default (props) => {
           style={{ padding: 0 }}
           type="link"
           onClick={() => {
-            console.log(record, "]]");
             navigate(`/check/edit?id=${record.checkId}`);
           }}
         >
@@ -70,7 +92,7 @@ export default (props) => {
         <Popconfirm
           key={3}
           title="您是否确认删除 ?"
-          onConfirm={() => handleDelete(record.checkId)}
+          onConfirm={() => onDelete(record)}
           okText="确定"
           cancelText="取消"
         >