feats

src/components/Pickerful/index.jsx

 import React from 'react';
 import { View, ScrollView } from '@tarojs/components';
 import { Button, Popup, Search, Cell, Icon } from '@antmjs/vantui';
-import style from './style.module.less';
+import VABC from '@/components/VABC';
+
+const wrapperStyle = {
+  width: '90vw',
+  height: '100vh',
+  paddingBottom: 'env(safe-area-inset-bottom)',
+}
 
 export default (props) => {
   const { show, value, keyValue, labelValue = 'name', dictAPI, onChange, onCancel } = props;
   
   return (
     <Popup position="right" show={show} onClose={onCancel}>
-      <View className={style['pickerful-box']}>
-        <Search
-          onChange={(e) => setSearchText(e.detail)}
-          placeholder="请输入搜索关键词"
-          onSearch={onSearch}
-          clearable
-        />
-        <View style={{ flex: 1, overflow: 'hidden' }}>
+      <VABC
+        header={(
+          <Search
+            onChange={(e) => setSearchText(e.detail)}
+            placeholder="请输入搜索关键词"
+            onSearch={onSearch}
+            clearable
+          />
+        )}
+        footer={(
+          <View style={{ padding: '8px 2em' }}>
+            <Button block type="primary" disabled={!checked} onClick={onClick}>确定</Button>
+          </View>
+        )}
+        style={wrapperStyle}
+      >
           <ScrollView scrollY style={{ height: '100%' }}>
             {
               list.map(item => (
               ))
             }
           </ScrollView>
-        </View>
-        <View style={{ padding: '8px 2em' }}>
-          <Button block type="primary" disabled={!checked} onClick={onClick}>确定</Button>
-        </View>
-      </View>
+      </VABC>
     </Popup>
   )
 }

src/components/Pickerful/style.module.less

-
-.pickerful-box {
-  width: 90vw;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  & > view {
-    flex: none;
-  }
-}
-

src/components/PowerList/index.jsx

 import { PowerScrollView } from '@antmjs/vantui';
 
 export default (props) => {
-  const { request, params, renderItem } = props;
+  const { request, params, renderItem, onLoadingChange } = props;
 
   const pageSize = 20;
   const pageNumRef = React.useRef(1);
   const listRef = React.useRef([]);
+  const [loading, setLoading] = React.useState(false);
   const [list, setList] = React.useState([]);
   const [finished, setFinished] = React.useState(true);
   listRef.current = list;
 
+  const changeLoading = (val) => {
+    setLoading(val);
+    if (onLoadingChange) {
+      onLoadingChange(val);
+    }
+  }
+
   const queryData = React.useCallback((options = {}) => {
     return new Promise((resolve, reject) => {
+      changeLoading(true);
       request({
         pageSize,
         ...(params || {}),
         }
 
         setFinished(current >= pages);
+        changeLoading(false);
         resolve();
       }).catch((err) => {
+        changeLoading(false);
         reject(err);
       });
     });

src/components/VABC/index.jsx

+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import clsScope from './style.module.less';
+
+export default (props) => {
+  const { style, header, footer  } = props;
+  
+  return (
+    <View className={clsScope['v-abc-wrapper']} style={style}>
+      {
+        header && (
+          <View className={clsScope['v-abc-hd']}>
+            {header}
+          </View>
+        )
+      }
+      <View className={clsScope['v-abc-bd']}>
+        {props.children}
+      </View>
+      {
+        footer && (
+          <View className={clsScope['v-abc-ft']}>
+            {footer}
+          </View>
+        )
+      }
+    </View>
+  )
+}

src/components/VABC/style.module.less

+
+.v-abc-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .v-abc-hd {
+    flex: none;
+  }
+
+  .v-abc-bd {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .v-abc-ft {
+    flex: none;
+  }
+}

src/pages/check/loc/edit/components/FormTpl.jsx

-import React from 'react';
-import Taro from '@tarojs/taro';
-import { View, ScrollView } from '@tarojs/components';
-
-const fullHeight = {
-  height: '100%',
-}
-
-const fmBdStyle = {
-  height: 'calc(100% - 80px)',
-}
-
-const fmActStyle = {
-  padding: 'var(--main-space)',
-  height: '80px',
-}
-
-export default (props) => {
-
-  const { action } = props;
-  
-  return (
-    <View style={fullHeight}>
-      <View style={fmBdStyle}>
-        <ScrollView scrollY style={fullHeight}>
-          {props.children}
-        </ScrollView>
-      </View>
-      <View style={fmActStyle}>{action}</View>
-    </View>
-  )
-}

src/pages/check/loc/edit/components/FormTpl/index.jsx

+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View, ScrollView } from '@tarojs/components';
+import VABC from '@/components/VABC';
+
+export default (props) => {
+  const { action } = props;
+  
+  return (
+    <VABC
+      footer={(
+        <View style={{padding: 'var(--main-space)'}}>{action}</View>
+      )}
+    >
+      <ScrollView scrollY style={{ height: '100%' }}>
+        {props.children}
+      </ScrollView>
+    </VABC>
+  )
+}

src/pages/check/loc/edit/components/LocForm.jsx

 import { CellGroup, Cell, Field, Button } from '@antmjs/vantui';
 import Map from '@/components/map';
 import mapIcon from '@/assets/icons/marker.png';
-import FormTpl from './FormTpl';
+import FormTpl from './FormTpl/index';
 
 export default (props) => {
 
   const { detail, onDetailChange, onClick } = props;
+
+  const [loc, setLoc] = React.useState();
   
   const setFieldChange = (key, val) => {
     onDetailChange({
-      ...detail,
+      ...(detail || {}),
       [key]: val,
     })
   }
+
+  React.useEffect(() => {
+    if (detail && loc) {
+      onDetailChange({
+        ...detail,
+        location: loc,
+      })
+    }
+  }, [detail, loc]);
   
   return (
     <FormTpl
         <Button block type="primary" onClick={onClick}>下一步</Button>
       )}
     >
-      <Map onLocChange={e => setFieldChange('location', e)} />
+      <Map onLocChange={setLoc} />
       <CellGroup>
         <Cell
-          isLink
           title="点位"
           value={detail?.name}
         />

src/pages/check/loc/edit/components/QuSelect/index.jsx

+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View, Text } from '@tarojs/components';
+import { Popup, Cell, Icon } from '@antmjs/vantui';
+import RatioView from '@/components/RatioView';
+import style from './style.module.less';
+
+const Bar = (props) => {
+  const {cursor, total, onClick} =  props;
+
+  const handleClick = (e) => {
+    if (onClick) {
+      onClick(e);
+    }
+  }
+
+  return (
+    <Cell onClick={handleClick}>
+      <View className={style['qu-board-title']}>
+        <Icon name="weapp-nav" size={60} color="var(--main-bg-color)" />
+        <Text>{cursor + 1}</Text>
+        <Text> / </Text>
+        <Text>{total}</Text>
+      </View>
+    </Cell>
+  )
+}
+
+
+export default (props) => {
+  const { value = 0, list, onChange } = props;
+
+  const [show, setShow] = React.useState(false);
+
+  const handleClick = (e, inx) => {
+    e.stopPropagation();
+    setShow(false);
+
+    if (onChange) {
+      onChange(inx);
+    }
+  }
+  
+  return (
+    <View className={style['qu-board-bar']}>
+      <Bar cursor={value} total={list?.length} onClick={() => setShow(true)} />
+      <Popup position="bottom" show={show} onClose={() => setShow(false)}>
+        <View className={style['qu-board-wrapper']}>
+          <Bar cursor={value} total={list?.length} />
+          <View className={style['qu-board-bd']}>
+            {
+              list?.map((it, inx) => {
+                const cls = [
+                  style['qu-board-bd-item'],
+                  it?.finished ? style['qu-board-bd-active'] : false,
+                ].filter(Boolean).join('-')
+
+                return (
+                  <RatioView key={inx}>
+                    <View className={cls} onClick={e => handleClick(e, inx)}>{inx + 1}</View>
+                  </RatioView>
+                )
+              })
+            }
+          </View>
+        </View>
+      </Popup>
+    </View>
+  )
+}

src/pages/check/loc/edit/components/QuSelect/style.module.less

+.qu-board-bar {
+  background: #fff;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.qu-board-title {
+  font-size: 28px;
+  color: #999;
+  font-weight: bold;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  & > text {
+    &:first-of-type {
+      margin-left: 0.6em;
+    }
+  }
+}
+
+.qu-board-wrapper {
+  background: #fff;
+
+  .qu-board-bd {
+    padding: var(--main-space) calc(var(--main-space) * 2);
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    row-gap: 36px;
+    column-gap: 36px;
+
+    .qu-board-bd-item {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      overflow: hidden;
+      display: grid;
+      place-items: center;
+      font-size: 30px;
+      color: #666;
+      font-weight: bold;
+      border: 2px solid var(--main-bg-color);
+
+      &.qu-board-bd-active {
+        color: #fff;
+        border: 2px solid transparent;
+        background-color: var(--main-bg-color);
+      }
+    }
+  }
+}

src/pages/check/loc/edit/components/Question.jsx

+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View, RichText, Text } from '@tarojs/components';
+import { CellGroup, Cell, Field, Radio, RadioGroup, Button } from '@antmjs/vantui';
+import Uploader from '@/components/Uploader/index';
+import { getTaCheckAnswerItem } from '@/services/tacheckansweritem';
+import FormTpl from './FormTpl/index';
+
+const actStyle = {
+  display: 'flex',
+  width: '100%',
+}
+
+export default (props) => {
+
+  const { detail, readonly, cursor, total , onChange, onPrev, onNext } = props;
+
+  const [isPrev, isFinished] = React.useMemo(() => {
+    return [
+      cursor > 0,
+      cursor >= total - 1,
+    ]
+  }, [cursor, total])
+
+  const [answer, setAnswer] = React.useState();
+
+  const onSubmit = () => {
+    onChange(answer);
+    onNext();
+  }
+
+  const setFieldChange = (key, val) => {
+    if (readonly) return;
+
+    setAnswer({
+      ...(answer || {}),
+      [key]: val,
+    })
+  }
+
+  React.useEffect(() => {
+    if (detail?.quId) {
+      getTaCheckAnswerItem({ quId: detail.quId, isMine: true }).then(res => {
+        setAnswer(res && res.length ? res[0] : undefined)
+      })
+    } else {
+      setAnswer(undefined)
+    }
+  }, [detail]);
+  
+  return (
+    <FormTpl
+      action={(
+        <View style={actStyle}>
+          {
+            isPrev && <Button type="default" block style={{flex: 1}} onClick={onPrev}>上一题</Button>
+          }
+          <Button type="primary" block style={{flex: 1, marginLeft: isPrev ? '1em' : 0 }} onClick={onSubmit}>
+            {isFinished ? '提交' : '下一题'}
+          </Button>
+        </View>
+      )}
+    >
+      <RadioGroup value={answer?.answerCode}>
+        <CellGroup>
+          <Cell title="测评内容" />
+          <Cell
+            border={false}
+            renderTitle={(
+              <View>
+                <Text>{detail?.sortNo}</Text>
+                <Text>{detail?.title}</Text>
+              </View>
+            )}
+          />
+          {
+            (detail?.answerList || []).map((it) => {              
+              return (
+                <Cell
+                  key={it.answerId}
+                  title={it.answer}
+                  clickable
+                  border={false}
+                  onClick={() => setFieldChange('answerCode', it.answerCode)}
+                  renderRightIcon={<Radio checkedColor="var(--main-bg-color)" readonly={readonly} name={it.answerCode}></Radio>}
+                />
+              );
+            })
+          }
+        </CellGroup>
+      </RadioGroup>
+      <CellGroup style={{marginTop: '20px'}}>
+        <Cell title="测评标准" />
+        <Cell
+          renderTitle={
+            <RichText nodes={detail?.stand} />
+          }
+        />
+      </CellGroup>
+      <CellGroup style={{marginTop: '20px'}}>        
+        <Cell title="拍照或视频" border={false} />
+
+        <Cell
+          renderTitle={
+            <Uploader
+              disabled={readonly}
+              value={answer?.attachList}
+              onChange={e => setFieldChange('attachList',e)}
+            />
+          }
+        />
+      </CellGroup>
+    </FormTpl>
+  )
+}

src/pages/check/loc/edit/index.jsx

 import Page from '@/layouts/index';
 import { getTaCheckItemById, preCheck } from '@/services/tacheckitem';
 import { getTaCheckItemQu } from '@/services/tacheckitemqu';
+import VABC from '@/components/VABC';
 import LocForm from './components/LocForm';
+import Question from './components/Question';
+import QuSelect from './components/QuSelect';
 
 export default (props) => {
 
   const { id } = router.params;
 
   const [loading, setLoading] = React.useState(false);
-  const [checkInfo, setCheckInfo] = React.useState();
+  const [checkItemInfo, setCheckItemInfo] = React.useState();
   const [quList, setQuList] = React.useState([]);
+  const [index, setIndex] = React.useState(-1);
+
+  const onPreFormSubmit = () => {
+    setIndex(0);
+  }
+
+  const onIndexChange = (t, n) => {
+    // eslint-disable-next-line no-restricted-globals
+    if (isNaN(t)) {
+      setIndex(index + n);
+    } else {
+      setIndex(t);
+    }
+  }
 
   React.useEffect(() => {
     setLoading(true);
-    preCheck(id).then(() => {
+    preCheck(id, { noSuccesTip: true }).then(() => {
       getTaCheckItemById(id).then(res => {
-        setCheckInfo(res);
+        setCheckItemInfo(res);
       });
   
       getTaCheckItemQu({pageSize: 200, itemId: id}).then(res => {
   
   return (
     <Page loading={loading}>
-      <LocForm />
+      <VABC
+        footer={
+          index > -1 && (
+            <QuSelect
+              value={index}
+              list={quList}
+              onChnage={onIndexChange}
+            />
+          )
+        }
+      >
+      {
+        index == -1 && <LocForm detail={checkItemInfo} onDetailChange={setCheckItemInfo} onClick={onPreFormSubmit} />
+      }
+      {
+        quList.map((x, inx) => (
+          index == inx && (
+            <Question
+              key={x.quId}
+              detail={x}
+              cursor={inx}
+              total={quList?.length}
+              onPrev={() => onIndexChange(null, -1)}
+              onNext={() => onIndexChange(null, 1)}
+            />
+          )
+        ))
+      }
+      </VABC>
     </Page>
   )
 }

src/pages/check/loc/list/index.jsx

 import React from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
-import { Cell } from '@antmjs/vantui';
+import { Cell, Icon } from '@antmjs/vantui';
 import Page from '@/layouts/index';
 import PowerList from '@/components/PowerList';
 import { getTaCheckItem } from '@/services/tacheckitem';
   const router = Taro.useRouter();
   const { checkId } = router.params;
 
+  const [loading, setLoading] = React.useState(false);
+
   const params = React.useMemo(() => ({
     checkId,
     itemType: 'loc',
     pageSize: 100,
+    mustValid: true,
   }), [checkId]);
 
   const onClick = (item) => {
   }
   
   return (
-    <Page>
+    <Page loading={loading}>
       <PowerList
         request={getTaCheckItem}
         params={params}
         renderItem={item => (
-          <Cell key={item.itemId} title={item.name} onClick={() => onClick(item)} />
+          <Cell
+            key={item.itemId}
+            title={item.name}
+            renderRightIcon={(
+              <Icon name={item.readonly ? 'link-o' : 'arrow'} />
+            )}
+            onClick={() => onClick(item)}
+          />
         )}
+        onLoadingChange={setLoading}
       />
     </Page>
   )

src/services/tacheckansweritem.js

+import request from '@/utils/request';
+
+/*
+ * 分页查询
+ */
+export const getTaCheckAnswerItem = (params) => request('/api/taCheckAnswerItem', { params });
+
+/*
+ * 新增数据
+ */
+export const postTaCheckAnswerItem = (data) => request('/api/taCheckAnswerItem', { data, method: 'post' });
+
+/*
+ * 通过ID查询单条数据
+ */
+export const getTaCheckAnswerItemById = (id) => request(`/api/taCheckAnswerItem/${id}`);
+
+/**
+ * 更新数据
+ * @param {*} id
+ * @param {*} data
+ * @returns
+ */
+export const putTaCheckAnswerItem = (id, data) => request(`/api/taCheckAnswerItem/${id}`, { data, method: 'put' });
+
+/*
+ * 通过主键删除数据
+ */
+export const deleteTaCheckAnswerItem = (id) => request(`/api/taCheckAnswerItem/${id}`, { method: 'delete' });

src/services/tacheckitem.js

  */
 export const deleteTaCheckItem = (id) => request(`/api/taCheckItem/${id}`, { method: 'delete' });
 
-export const preCheck = (id) => request(`/api/taCheckItem/${id}/answer/pre-check`, { method: 'put' });
+export const preCheck = (id, opts = {}) => request(`/api/taCheckItem/${id}/answer/pre-check`, { method: 'put', ...opts });

src/utils/request.js

 
 export default function request(api, options = {}) {
   return new Promise((resolve, reject) => {
-    const { method = 'GET', params, data = {}, header = {}, silent = false, ...cfgs } = options;
+    const { method = 'GET', params, data = {}, header = {}, silent = false, noSuccesTip, ...cfgs } = options;
     const queryStr = params ? getQueryStrByParams(params) : undefined;
     // eslint-disable-next-line no-undef
     const url = queryStr ? `${HOST}${api}?${queryStr}` : `${HOST}${api}`;
         }
 
         if (!silent && 'GET' !== method.toUpperCase()) {
-          Taro.showToast({
-            title: '操作成功',
-            icon: 'none',
-          })
+          if (!noSuccesTip) {
+            Taro.showToast({
+              title: '操作成功',
+              icon: 'none',
+            })
+          }
         }
 
         resolve(data.data);