feats

src/pages/question/list/index.jsx

@@ -4,17 +4,30 @@ import {
   ProForm,
   ProFormText,
   ProFormSelect,
-  ProFormList
+  ProFormList,
+  PageContainer
 } from '@ant-design/pro-components';
-import { postTaCheckItemQu, getTaCheckItemQu } from '@/service/tdlocquestion';
+import { postTdLocQuestion, getTdLocQuestion, deleteTdLocQuestion, getTdLocQuestionById } from '@/service/tdlocquestion';
 
 const QuItem = (props) => {
-  const { qu, onEdit } = props;
+  const { qu, onEdit, onDelete } = props;
 
-  const quTitle = `${qu?.sortNo}. [${qu?.quType == 'fill' ? '填空' : '选择'}] ${qu?.title}`
+  const quTitle = `${qu?.quType == 'fill' ? '填空' : '选择'} ${qu?.title}`
 
   return (
-    <Card title={quTitle} extra={<Button type='link' onClick={onEdit}>修改</Button>} style={{ marginTop: '24px' }}>
+    <Card title={quTitle}
+      extra={(
+        <>
+          <Button type='link' onClick={onEdit}>修改</Button>
+          <Popconfirm
+            title="确认进行删除操作?"
+            onConfirm={onDelete}
+          >
+            <Button type='link' danger >删除</Button>
+          </Popconfirm>
+        </>
+      )}
+      style={{ marginTop: '24px' }}>
       <Card.Meta
         title={
           qu?.quType != 'fill' ?
@@ -25,7 +38,7 @@ const QuItem = (props) => {
                     const anStr = `${item.answerCode} ${item.answer}`;
 
                     return (
-                      <Col span={12} key={item.answerId} style={{ height: '32px', lineHeight: '32px', fontWeight: 400 }}>
+                      <Col span={12} key={item.quId} style={{ height: '32px', lineHeight: '32px', fontWeight: 400 }}>
                         {anStr}
                       </Col>
                     );
@@ -52,15 +65,12 @@ export default React.forwardRef((props, ref) => {
   const [open, setOpen] = React.useState(false);
   const [quInfo, setQuInfo] = React.useState(false);
   const [list, setList] = React.useState([]);
-  // const [anList, setAnList] = React.useState([]);
+  // const [and, setAnd] = React.useState([]);
   const [form] = Form.useForm();
 
   const onFinish = async (values) => {
-    const data = { ...(quInfo || {}), ...values, itemId }
-    const res = await postTaCheckItemQu(data);
-
-    console.log('方方data', data);
-    console.log('方方res', res);
+    const data = { ...(quInfo || {}), ...values, itemId };
+    const res = await postTdLocQuestion(data).then(x => x);
     let found = false;
     const newList = list.map(item => {
       if (item.quId === res.quId) {
@@ -86,15 +96,33 @@ export default React.forwardRef((props, ref) => {
     setOpen(true);
   }
 
+  const onDeleteQu = (qu) => {
+    if (qu?.quId) {
+      deleteTdLocQuestion(qu.quId).then(() => {
+        setList(list.filter(x => x.quId !== qu.quId));
+      })
+    } else {
+      setList(list.filter(x => x.quId !== qu.quId));
+    }
+  }
+
   React.useEffect(() => {
     if (quInfo) {
       form.setFieldsValue(quInfo);
     }
   }, [quInfo]);
 
+  // React.useEffect(() => {
+  //   if (itemId) {
+  //     getTdLocQuestion({ pageSize: 500, itemId }).then((res) => {
+  //       setList(res.records);
+  //     });
+  //   }
+  // }, [itemId]);
+
   React.useEffect(() => {
     if (itemId) {
-      getTaCheckItemQu({ pageSize: 500, itemId }).then((res) => {
+      getTdLocQuestionById({ pageSize: 500, itemId }).then((res) => {
         setList(res.records);
       });
     }
@@ -106,62 +134,69 @@ export default React.forwardRef((props, ref) => {
 
   return (
     <div>
-      <ProForm title="问题维护" style={{ width: '800px' }} form={form} onFinish={onFinish}>
-        <ProFormText
-          name="title"
-          label="问题描述"
-          placeholder="请填写"
-          rules={[
-            {
-              required: true,
-              message: '请填写题干',
-            },
-          ]}
-        />
-        <ProFormSelect
-          name="quType"
-          label="问题类型"
-          fieldProps={{
-            style: { width: '100%' }
-          }}
-          valueEnum={{
-            radio: '单选',
-            fill: '填空'
-          }}
-          rules={[
-            {
-              required: true,
-              message: '请选择问题类型',
-            },
-          ]}
-        />
-        <ProFormList
-          label="选项列表"
-          copyIconProps={false}
-        >
-          <Row gutter={24} style={{ width: '730px' }}>
-            <Col span={6}>
-              <ProFormText
-                name="answerCode"
-                label="选项"
-                help="类似 A, B, C, D"
-              />
-            </Col>
-            <Col span={6}>
-              <ProFormText
-                name="answer"
-                label="答案"
-                placeholder="具体选项内容"
-              />
-            </Col>
-          </Row>
-        </ProFormList>
-      </ProForm>
+      <Card>
+        <ProForm style={{ width: '800px' }} form={form} onFinish={onFinish} itemId={itemId} quInfo={quInfo} open={open}>
+          <ProFormText
+            name="title"
+            label="问题描述"
+            placeholder="请填写"
+            rules={[
+              {
+                required: true,
+                message: '请填写题干',
+              },
+            ]}
+          />
+          <ProFormSelect
+            name="quType"
+            label="问题类型"
+            fieldProps={{
+              style: { width: '100%' }
+            }}
+            valueEnum={{
+              radio: '单选',
+              fill: '填空'
+            }}
+            rules={[
+              {
+                required: true,
+                message: '请选择问题类型',
+              },
+            ]}
+          />
+          <ProFormList
+            label="选项列表"
+            copyIconProps={false}
+            name="quAnswerList"
+          >
+            <Row gutter={24} style={{ width: '730px' }}>
+              <Col span={6}>
+                <ProFormText
+                  name="answerCode"
+                  label="答案选项"
+                  help="类似 A, B, C, D"
+                />
+              </Col>
+              <Col span={6}>
+                <ProFormText
+                  name="answer"
+                  label="答案"
+                  placeholder="具体选项内容"
+                />
+              </Col>
+            </Row>
+          </ProFormList>
+        </ProForm>
+
+      </Card>
       <List
         itemLayout="horizontal"
+        itemId={itemId}
+        quInfo={quInfo}
         dataSource={list}
-        renderItem={(item) => <QuItem qu={item} onEdit={() => onEditQu(item)} />}
+        renderItem={(item) => <QuItem qu={item} onEdit={() => onEditQu(item)} onDelete={() => onDeleteQu(item)} />}
       />
+
     </div>
   )
 });