添加应知应会图片/添加排序

.env.development

@@ -4,7 +4,7 @@ REACT_APP_BASE_API = 'http://192.168.51.80:8081/'
 #112.124.59.133:8081  linux服务器
 #121.43.139.179:8802  公网
 #172.18.116.20:8802 
-# http://192.168.51.80:8081/ 
+# http://192.168.51.80:8081/ 本地
 # 192.168.1.45:8088/imed/pfm/
 
 PUBLIC_URL = '/'

.env.production

@@ -1,5 +1,5 @@
 # base api
-REACT_APP_BASE_API = 'http://121.43.139.179:8802/'
+REACT_APP_BASE_API = 'http://112.124.59.133:8081/'
 
 #192.168.51.80
 #112.124.59.133:8081 服务器

src/App.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-04-23 15:39:41
- * @LastEditTime: 2021-04-25 11:16:57
+ * @LastEditTime: 2021-07-09 10:39:59
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /react-antd-admin-template/src/App.js
@@ -13,6 +13,7 @@ import zhCN from "antd/es/locale/zh_CN";
 import store from "./store";
 import Router from "./router";
 
+
 class App extends Component {
   render() { 
     return (

src/api/checkCondition.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-04-27 08:58:54
- * @LastEditTime: 2021-04-29 20:18:50
+ * @LastEditTime: 2021-05-21 15:36:51
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /react-antd-admin-template/src/api/checkCondition.js

src/api/common.js

@@ -0,0 +1,21 @@
+/*
+ * @Author: your name
+ * @Date: 2021-06-24 16:19:46
+ * @LastEditTime: 2021-06-24 17:06:12
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /react-antd-admin-template/src/api/common.js
+ */
+
+
+import request from '@/utils/request';
+
+
+//上传图片
+export function uploadFile(data) {
+    return request({
+      url: '/upload/file',
+      method: 'post',
+      data
+    })
+}

src/utils/request.js

@@ -29,28 +29,35 @@ service.interceptors.request.use(
 // 响应拦截器
 service.interceptors.response.use(
   (response) =>{
-    console.log({response});
     const {data} = response;
-    // console.log(data);
     if(data.status===200){
       return response;
-    }else{
-      console.log('出现错误');
+    }else if(data.status==499){
+      console.log('登录过期');
       const {msg} = data;
       Modal.confirm({
-        title: "出现错误?",
-        content:msg,
+        title: "抱歉，登录已过期请重新登录！",
         okText: "确定",
-        // cancelText: "取消",
         onOk() {
-          // let token = store.getState().user.token;
-          // store.dispatch(logout(token));
+          let token = store.getState().user.token;
+          store.dispatch(logout(token));
         },
         onCancel() {
           console.log("Cancel");
         },
       });
       // return Promise.reject('error');
+    }else {
+      console.log('出现错误');
+      const {msg} = data;
+      Modal.confirm({
+        title: "抱歉，出现错误！",
+        content:msg,
+        okText: "确定",
+        onOk() {
+      
+        }
+      });
     }
     
   },
@@ -89,76 +96,15 @@ service.interceptors.response.use(
   // },
   (error) => {
     console.log("err" + error); // for debug
-    const { status } = error.response;
-    if (status === 403) {
-      Modal.confirm({
-        title: "确定登出?",
-        content:
-          "由于长时间未操作，您已被登出，可以取消继续留在该页面，或者重新登录",
-        okText: "重新登录",
-        cancelText: "取消",
-        onOk() {
-          let token = store.getState().user.token;
-          store.dispatch(logout(token));
-        },
-        onCancel() {
-          console.log("Cancel");
-        },
-      });
-    }
-    if (status === 400) {
-         console.log('400',error.response);
-         const {data} = error.response;
-        if(data=='无效的令牌{"msg":"无效的令牌","status":499}'){
-            Modal.confirm({
-              title: "出现错误?",
-              content:
-              '登录令牌已过期，请重新登录',
-              okText: "确定",
-              // cancelText: "取消",
-              onOk() {
-                let token = store.getState().user.token;
-                store.dispatch(logout(token));
-              },
-              onCancel() {
-                console.log("Cancel");
-              },
-            });
-        }else {
-          Modal.confirm({
-            title: "出现错误?",
-            content:
-            error.response.data,
-            okText: "确定",
-            // cancelText: "取消",
-            onOk() {
-              // let token = store.getState().user.token;
-              // store.dispatch(logout(token));
-            },
-            onCancel() {
-              console.log("Cancel");
-            },
-          });
-        }
-        // return {error}
-    }
-    if (status === 499) {
-       Modal.confirm({
-        title: "出现错误?",
-        content:
-        '登录令牌已过期，请重新登录',
-        okText: "确定",
-        // cancelText: "取消",
-        onOk() {
-          let token = store.getState().user.token;
-          store.dispatch(logout(token));
-        },
-        onCancel() {
-          console.log("Cancel");
-        },
-      });
-      // return {error}
-  }
+    const { status,msg } = error.response;
+    Modal.confirm({
+      title: "抱歉，出现错误！",
+      content:msg,
+      okText: "确定",
+      onOk() {
+    
+      }
+    });
     return Promise.reject(error);
   }
 );

src/views/checkItemManage/checkItem/checkItem.jsx

@@ -3,9 +3,11 @@ import React,{ useState,useEffect,useRef } from 'react';
 import {getCheckItem,getCheckItemTypeList,listAll,delCheckItem,addCheckItem,editCheckItem,
   bindCheckItemAndCheckPoint,addCheckItemCheckResult,getCheckItemCheckResultSelecterList,} from "@/api/checkPointManage.js";
 import {addCheckItemAttr} from "@/api/checkItem.js";
-import { Button,Form,Input,Select,Tag,Tooltip,message} from 'antd';
+import {uploadFile} from "@/api/common.js";
+import { Button,Form,Input,Select,Tag,Tooltip,message,Upload, Icon} from 'antd';
 import EditableFormTable from './table';
 import ModalWrap from '@/components/Modal/modal.js';
+import { getToken } from "@/utils/auth";
 // import { TAGSVIEW_EMPTY_TAGLIST } from '../../../store/action-types';
 
 const { Option } = Select;
@@ -22,6 +24,7 @@ class TableForm extends React.Component {
          this.state = {
           depTypeList:[],
           checkPointList:[],
+          fileList:[],
           checkTypeList:[],
           checkResultList:[],//查核结果配置
           addCheckItemResultSelect:[],
@@ -38,13 +41,15 @@ class TableForm extends React.Component {
         return new Promise((resolve,reject)=>{
           this.props.form.validateFields((err,values) => {
             if (!err) {
+              const imgUrls = this.state.fileList.map(item=>item.url);
               let data = {
                 ...this.props.content,
                 ...values,
                 // checkModelList
-                itemAttrs:this.state.checkResultList
+                itemAttrs:this.state.checkResultList,
+                rightAnswerImage:imgUrls.join(',')
               }
-              console.log({'handleCommit':data});
+              // console.log({data,values,imgUrls});        
               resolve(data);
             }
         });
@@ -53,7 +58,6 @@ class TableForm extends React.Component {
     };
 
     handleSelectChange=(value)=>{
-      // console.log(value);
       const {checkItemId} = this.props.content;
       this.setState({
         BindStatus:'validating'
@@ -66,10 +70,7 @@ class TableForm extends React.Component {
     }
     //当删除查核结果配置
     onTagClose=(e)=>{
-        // console.log('onTagClose',e);
-        // console.log(this.state.checkResultList);
         const checkResultListByFilter = this.state.checkResultList.filter(item=>item.attr != e);
-        // console.log({checkResultListByFilter});
         this.setState({
           checkResultList:checkResultListByFilter
         })
@@ -77,6 +78,10 @@ class TableForm extends React.Component {
     //更新查核结果配置
     updateCheckResultList=()=>{
       const {checkResultList,checkResultName,checkResultCount} = this.state;
+      if(checkResultCount<0||checkResultCount>1){
+        message.warning('抱歉，配置项占比只能是0~1之间！');
+        return;
+      }
       if(checkResultName&&checkResultCount){
         this.setState({
           checkResultList:[...checkResultList,{attr:checkResultName,value:checkResultCount}],
@@ -109,8 +114,24 @@ class TableForm extends React.Component {
         })
       
       }
-    }
 
+      if(content.rightAnswerImage&&content.rightAnswerImage.split(',').length>0){
+            const imgList = content.rightAnswerImage.split(',');
+            const hasUploadFiles = imgList.map((item,index)=>{
+                  return {
+                    uid: `-${index}`,
+                    name: 'image.png',
+                    status: 'done',
+                    url: item
+                  }
+            })
+             this.setState({
+               fileList:hasUploadFiles
+             })
+
+      }
+    }
+    
     onAddCheckItemResultSelectChange=(e)=>{
         // console.log({e});
         this.setState({
@@ -131,7 +152,7 @@ class TableForm extends React.Component {
     }
 
     componentDidMount(){
-      console.log('Form_componentDidMount');
+      // console.log(process.env)
       listAll().then(res=>{
         // console.log({res});
         const temp = res.data.data;
@@ -156,11 +177,69 @@ class TableForm extends React.Component {
       });
 
       this.initData();
-    
-      
     }
+    
+    //图片变化回调
+    handleUploadChange = ({file,fileList}) => {
+
+        console.log({file,fileList});
+        if (file.status == 'removed') {
+             this.setState({
+              fileList
+             })
+        }
+  
+    };
 
-
+    // 图片上传
+    imgUpload = (options) => {
+      const { onSuccess, onError, file, onProgress } = options;
+
+      // start：进度条相关
+      // 伪装成 handleChange里面的图片上传状态
+      const key = new Date().getTime();
+      const imgItem = {
+        uid: `-${key}`, // 注意，这个uid一定不能少，否则上传失败
+        name: 'image.png',
+        status: 'uploading',
+        url: '',
+        percent: 99, // 注意不要写100。100表示上传完成
+      };
+
+      this.setState(prevState=>{
+        return {
+          fileList:prevState.fileList.concat([imgItem]),
+        }
+      }); // 更新 imgList
+      // end：进度条相关
+      const formData = new FormData();
+      formData.append('file',file);
+    
+      uploadFile(formData)
+        .then((res) => {
+          console.log('imgUpload:',res);
+          const imgItem = {
+            status: 'done',
+            url: res.data.data, // url 是展示在页面上的绝对链
+          };
+
+          const tempFileList = this.state.fileList;
+          const index = tempFileList.findIndex(item=>item.uid == -key);
+          tempFileList[index] = {
+            ...tempFileList[index],
+            ...imgItem
+          }
+          console.log({tempFileList});
+          this.setState({
+            fileList:tempFileList,
+          }); // 更新 imgList
+        })
+        .catch((e) => {
+          console.log('图片上传失败:' + JSON.stringify(e || ''));
+          message.error('图片上传失败，请重试');
+        });
+  
+  };
 
     shouldComponentUpdate(nextProps,nextState){
           // console.log({nextProps,nextState})  
@@ -180,8 +259,8 @@ class TableForm extends React.Component {
         
         const { getFieldDecorator } = this.props.form;
         const {content,edit} = this.props;
-        const {depTypeList,BindStatus,checkPointList,checkTypeList,ifClear,checkResultList,checkResultName,checkResultCount,addCheckItemResultSelect} = this.state;
-        const {checkItemName,rightAnswerText,relatedRules,checkModelList,score,itemAttr} = content;
+        const {depTypeList,BindStatus,checkPointList,checkTypeList,ifClear,checkResultList,checkResultName,checkResultCount,addCheckItemResultSelect,fileList} = this.state;
+        const {checkItemName,rightAnswerText,relatedRules,checkModelList,score,itemAttr,rightAnswerImage} = content;
         // const bindGroupDefault = groupManaList.length>0?groupManaList[0].name:'bindGroupDefault';
         // console.log({content,edit});
         const formItemLayout = {
@@ -194,16 +273,24 @@ class TableForm extends React.Component {
               sm: { span: 12 },
             },
         };
-        const config =(key,rules)=>{
+        const config =(key,rules,option)=>{
           // console.log({key});
           return {
             initialValue:edit?key:'',
             rules: [
               ...rules
             ],
+            ...option
           }
         }
 
+        const uploadButton = (
+          <div>
+            <Icon type="plus" />
+            <div className="ant-upload-text">上传图片</div>
+          </div>
+        );
+
         return (
             <Form {...formItemLayout}  >
                    <Form.Item label="查核项">
@@ -231,10 +318,19 @@ class TableForm extends React.Component {
                    {
                      edit&&<Form.Item label="查核项分数" style={{display:edit?'block':'none'}}>
                      {
-                         getFieldDecorator('score',config(score,[{required:false,message: '请输入查核分数!',}]))(<Input />)
+                         getFieldDecorator('score',config(score,[{required:false,message: '请输入查核分数!'}],{
+                          validator:(rule, value, callback)=>{
+                               if(value<=0){
+                                callback('分数必需大于0！')
+                               }
+                               callback();
+                          }
+                         }))(<Input placeholder="" />)
                      }
                      </Form.Item>
                    }
+
+
                    
                    <Form.Item label="查核项查核结果配置" style={{display:edit?'block':'none'}}>
                     {
@@ -259,8 +355,8 @@ class TableForm extends React.Component {
                                     }
                                   </Select>
                                   </Tooltip>
-                                  <Tooltip title="请定义查核结果对应的分值占比，如：50">
-                                      <Input style={{ width: '30%' }} onChange={(e)=>{this.setState({checkResultCount:e.target.value})}} value={checkResultCount} placeholder="如：50" />
+                                  <Tooltip title="请定义查核结果对应的分值占比，如：0.5表示占比50%">
+                                      <Input style={{ width: '35%' }} onChange={(e)=>{this.setState({checkResultCount:e.target.value})}} value={checkResultCount} placeholder="输入0～1之间，如：0.5" />
                                   </Tooltip>
                                   <Button type="primary" onClick={this.updateCheckResultList}>添加</Button>
                                </InputGroup>
@@ -273,7 +369,7 @@ class TableForm extends React.Component {
                                               const tagName = item.attr;
                                               return (
                                                 <Tag color="#4E78FF"  closable key={index} onClose={this.onTagClose.bind(this,tagName)}>
-                                                    {`${item.attr}｜${item.value}%`}
+                                                    {`${item.attr}｜${Number(item.value*100).toFixed(2)}%`}
                                                 </Tag>
                                               )
                                             })
@@ -291,6 +387,26 @@ class TableForm extends React.Component {
                         getFieldDecorator('rightAnswerText',config(rightAnswerText,[{required: false,message: '!',}]))(<Input.TextArea autoSize={{minRows:5}} />)
                     }
                    </Form.Item>
+                   <Form.Item label="应知应会图片">
+                          <Upload
+                              // action={()=>{
+                              //        const {REACT_APP_BASE_API} = process.env;
+                              //        return Promise.resolve(`${REACT_APP_BASE_API}/upload/file`);
+                              // }}
+                              // headers={{
+                              //   token:getToken()
+                              // }}
+                              customRequest={this.imgUpload}
+                              withCredentials={true}
+                              listType="picture-card"
+                              fileList={fileList}
+                              onRemove={()=>{console.log('onRemove')}}
+                              onChange={this.handleUploadChange}
+                          >
+                              {fileList.length >= 8 ? null : uploadButton}
+                         </Upload>
+                        
+                   </Form.Item>
                    <Form.Item label="相关条文">
                     {
                         getFieldDecorator('relatedRules',config(relatedRules,[{required: false,message: '!',}]))(<Input.TextArea autoSize={{minRows:5}} />)
@@ -493,7 +609,7 @@ const CheckItem = () => {
             "checkModeList":formData.checkModeList, // 查核方式 必填（暂时写死，需要考虑（下拉框选择））
             "name":formData.checkItemName,// 查核项目名称 必填
             "relatedRules":formData.relatedRules, // 相关条文
-            "rightAnswerImage":'', // 正确答案图片url 上传图片接口待定
+            "rightAnswerImage":formData.rightAnswerImage, // 正确答案图片url 上传图片接口待定
             "rightAnswerText": formData.rightAnswerText,// 正确答案文字  
             // "score":formData.score,//查核项分数
         }
@@ -505,31 +621,26 @@ const CheckItem = () => {
       }
       if(ifEdit){
         const currentEditItem = item;
-      
-        // const checkResultListByFilter = formData.itemAttrs.filter(item=>{
-        //       let needNoCommitList = JSON.parse(currentEditItem.itemAttrs);
-        //       let temp = needNoCommitList.filter(v=>v.attr == item.attr);
-        //       return temp.length==0;
-        // });
-
+        console.log({currentEditItem});
         const paramForCheckItemresult = {
           "checkItemId":item.checkItemId,   // 查核项id
           "id":item.attrId,
-          "score":parseInt(formData.score),  // 分数
+          "score":parseFloat(formData.score),  // 分数
           "itemAttrs":formData.itemAttrs,
         }
         const param =/^[a-zA-Z]+$/.test(formData.checkModeList)?{
+           //checkModeList为code的情况下
             "id":item.checkItemId,
             "checkModeList": formData.checkModeList, // 查核方式
             "name":formData.checkItemName, // 名称必填
             "relatedRules":formData.relatedRules, // 相关条文
-            "rightAnswerImage":item.rightAnswerImage,// 应知应会图片url
+            "rightAnswerImage":formData.rightAnswerImage,// 应知应会图片url
             "rightAnswerText":formData.rightAnswerText, // 应知应会文字
         }:{
             "id":item.checkItemId,
             "name":formData.checkItemName, // 名称必填
             "relatedRules":formData.relatedRules, // 相关条文
-            "rightAnswerImage":item.rightAnswerImage,// 应知应会图片url
+            "rightAnswerImage":formData.rightAnswerImage,// 应知应会图片url
             "rightAnswerText":formData.rightAnswerText, // 应知应会文字
         }
 

src/views/checkPointManage/pointManage/pointManage.jsx

@@ -49,8 +49,8 @@ class TableForm extends React.Component {
       const {id,checkPointName} = this.props.content;
       const cpGroupList = this.state.groupList;
       const selectedItem = cpGroupList.filter(item=>item.id==value);
-      console.log({value,selectedItem});
-      console.log(this.state.groupList);
+      // console.log({value,selectedItem});
+      // console.log(this.state.groupList);
       this.setState({
         BindGroupStatus:'validating'
       },()=>{
@@ -289,10 +289,6 @@ class TableForm extends React.Component {
 const WrappedTableForm = Form.create({ name: 'register' })(TableForm);
 
 
-
-
-
-
 const PointManage = () => {
 
   let [arr,setarr] = useState([]);
@@ -315,6 +311,12 @@ const PointManage = () => {
       key: 'id',
       render: text => <a>{text}</a>,
     },
+    {
+      title: '展示排序',
+      dataIndex: 'sort',
+      key: 'sort',
+      editable: true,
+    },
     {
       title: '单位分类名',
       dataIndex: 'name',
@@ -352,7 +354,6 @@ const PointManage = () => {
 
 
   const deleteCallback = (record)=>{
-    console.log('删除');
     delCheckPointList([record.id]).then(res=>{
         if(res.data.msg=="success"){
                 getData();
@@ -416,6 +417,18 @@ const PointManage = () => {
         })
       }
   }
+  //cell里直接更新数据
+  const updateFromTableCell = (row)=>{
+      const {sort,id,name} = row;
+      const param = {
+        sort,id,name
+      }
+      editCheckPointList(param).then(res=>{
+        if(res&&res.data.msg=="success"){
+          getData({page:pages.currPage});
+        }
+      })
+  }
   
   const paginationCallback = (obj)=>{
     const {currPage} = obj;
@@ -448,7 +461,10 @@ const PointManage = () => {
               <Search style={{ width: 200 }} allowClear placeholder="请输入查核要点"  onSearch={onSearch} enterButton />
           </div>
           {
-             ifRender&& <EditableFormTable columns={columns} paginationCallback={paginationCallback} pages={pages}  data={arr}  deleteCallback={deleteCallback} callbackFromChild={callbackFromChild} ifUpdateList={ifUpdateList}/>
+             ifRender&& <EditableFormTable columns={columns} paginationCallback={paginationCallback} 
+             pages={pages}  data={arr}  deleteCallback={deleteCallback} callbackFromChild={callbackFromChild} 
+             ifUpdateList={ifUpdateList} updateFromTableCell={updateFromTableCell}
+             />
           }
     </div>
   );

src/views/checkPointManage/pointManage/table.js

@@ -1,27 +1,101 @@
-/*
- * @Author: your name
- * @Date: 2021-04-27 18:08:04
- * @LastEditTime: 2021-04-29 14:19:07
- * @LastEditors: Please set LastEditors
- * @Description: In User Settings Edit
- * @FilePath: /react-antd-admin-template/src/views/checkPointManage/checkItem/table.js
- */
 
 
 /*
  * @Author: your name
  * @Date: 2021-04-27 11:19:40
- * @LastEditTime: 2021-04-27 15:20:38
+ * @LastEditTime: 2021-07-07 15:04:25
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /react-antd-admin-template/src/views/groupManage/groupIdentity/table.js
  */
 
 import React from 'react';
-import { Table,Popconfirm, Form,Divider} from 'antd';
+import { Table,Popconfirm, Form,Divider,InputNumber} from 'antd';
+
+const EditableContext = React.createContext();
 
+const EditableRow = ({ form, index, ...props }) => (
+  <EditableContext.Provider value={form}>
+    <tr {...props} />
+  </EditableContext.Provider>
+);
 
+const EditableFormRow = Form.create()(EditableRow);
 
+class EditableCell extends React.Component {
+  state = {
+    editing: false,
+  };
+
+  toggleEdit = () => {
+    const editing = !this.state.editing;
+    this.setState({ editing }, () => {
+      if (editing) {
+        this.input.focus();
+      }
+    });
+  };
+
+  save = e => {
+    const { record, handleSave } = this.props;
+    this.form.validateFields((error, values) => {
+      if (error && error[e.currentTarget.id]) {
+        return;
+      }
+      this.toggleEdit();
+      handleSave({ ...record, ...values });
+    });
+  };
+
+  renderCell = form => {
+    this.form = form;
+    const { children, dataIndex, record, title } = this.props;
+    const { editing } = this.state;
+    return editing ? (
+      <Form.Item style={{ margin: 0 }}>
+        {form.getFieldDecorator(dataIndex, {
+          rules: [
+            {
+              required: false,
+            },
+          ],
+          initialValue: record[dataIndex],
+        })(<InputNumber ref={node => (this.input = node)} min={0} onChange={()=>{}} onPressEnter={this.save} onBlur={this.save} />)}
+        {/* <Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} /> */}
+      </Form.Item>
+    ) : (
+      <div
+        className="editable-cell-value-wrap"
+        style={{ paddingRight: 24 }}
+        onClick={this.toggleEdit}
+      >
+        {children}
+      </div>
+    );
+  };
+
+  render() {
+    const {
+      editable,
+      dataIndex,
+      title,
+      record,
+      index,
+      handleSave,
+      children,
+      ...restProps
+    } = this.props;
+    return (
+      <td {...restProps}>
+        {editable ? (
+          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  }
+}
 
 class EditableTable extends React.Component {
   
@@ -98,6 +172,10 @@ class EditableTable extends React.Component {
     this.setState({ loading: true });
     this.props.paginationCallback({'currPage':current})
   }
+  //table cell里直接更新数据
+  handleSave=(row)=>{
+    this.props.updateFromTableCell(row);
+  }
 
 
   render() {
@@ -110,10 +188,21 @@ class EditableTable extends React.Component {
         ...col,
         onCell: record => ({
           record,
+          editable: col.editable,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          handleSave: this.handleSave,
         }),
       };
     });
 
+    const components = {
+      body: {
+        row: EditableFormRow,
+        cell: EditableCell,
+      },
+    };
+
     const {
         currPage,
         totalCount,
@@ -137,6 +226,7 @@ class EditableTable extends React.Component {
           dataSource={this.state.data}
           columns={columns}
           rowClassName="editable-row"
+          components={components}
         />
     );
   }

src/views/conditionManage/condition.jsx

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-04-27 08:49:09
- * @LastEditTime: 2021-05-17 10:28:17
+ * @LastEditTime: 2021-05-21 17:06:24
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /react-antd-admin-template/src/views/conditionManage/comdition.js
@@ -100,7 +100,13 @@ class TableForm extends React.Component {
         groupIdentityList:data.data.data
        })
     });
-    
+
+    getConditionParentList().then(data=>{
+      this.setState({
+        parentList:data.data.data,
+       })
+    });
+ 
   }
 
   render() {
@@ -108,10 +114,10 @@ class TableForm extends React.Component {
     const { getFieldDecorator } = this.props.form;
     const {outpatientList,BindStatus,groupIdentityList,parentList,loading} = this.state;
     const {edit,content} = this.props;
-    const {name,depType,conditionType,description,parentId} = content;
-    const getKeyName = (parentId)=>{
-      const keyItem = parentList.filter(item=>item.id == parentId);
-      console.log({keyItem,parentId});
+    const {name,depType,conditionType,description,id} = content;
+    const getKeyName = (id)=>{
+      const keyItem = parentList.filter(item=>item.id == id);
+      console.log({keyItem,parentList,id});
       return keyItem.length>0?keyItem[0].name:''
     }
     const config =(key,rules)=>{
@@ -147,7 +153,7 @@ class TableForm extends React.Component {
           )}
         </Form.Item>
         <Form.Item {...formItemLayout} label="选择父级条件">
-          {getFieldDecorator('parentId',config(getKeyName(parentId),[{required:false,message: '选择父级条件',}]))(
+          {getFieldDecorator('parentId',config(getKeyName(id),[{required:false,message: '选择父级条件',}]))(
             <Select
               placeholder="选择父级条件"
               style={{ width: '100%' }}

src/views/groupManage/groupMana/groupMana.jsx

@@ -258,25 +258,28 @@ const GroupMana = () => {
       title: 'id',
       dataIndex: 'id',
       key: 'id',
-      render: text => <a>{text}</a>,
+    },
+    {
+      title: '展示排序',
+      dataIndex: 'sort',
+      key:'sort',
+      width:'15%',
+      editable:true,
     },
     {
       title: '单位名',
       dataIndex: 'name',
       key: 'name',
-      editable: true,
     },
     {
         title: '管理员ID',
         dataIndex: 'deptManagerId',
         key: 'deptManagerId',
-        editable: true,
     },
     {
         title: '管理员',
         dataIndex: 'deptManagerName',
         key: 'deptManagerName',
-        editable: true,
     },
   ];
 
@@ -304,7 +307,7 @@ const GroupMana = () => {
   const getBindSelectData= async (obj)=>{
     let data = await getGroupIdentityList(obj);
     set_groupIdentity(data.data.data.list);
-    console.log('getBindSelectData',data)
+    // console.log('getBindSelectData',data)
   }
 
   const callbackFromChild = (data)=>{
@@ -340,6 +343,17 @@ const GroupMana = () => {
     modalNode.current.showModal();
   }
 
+
+  //更新单条表格数据
+  const updateFormRowData = (param)=>{
+    if(!param.id)return;
+    editGroupMana(param).then(res=>{
+      if(res&&res.data.msg=="success"){
+        getData({page:pages.currPage});
+       }
+    });
+  }
+
   const commitForm = async ()=>{  //表单提交
       console.log('提交表单');
       // console.log({formNode});
@@ -372,23 +386,25 @@ const GroupMana = () => {
             "name":formData.name
         }
         // console.log({param});
-        editGroupMana(param).then(res=>{
-          if(res&&res.data.msg=="success"){
-            getData({page:pages.currPage});
-           }
-        });
+        updateFormRowData(param);
       }
   }
   
+  
   const paginationCallback = (obj)=>{
     const {currPage} = obj;
     getData({page:currPage,pageSize:10,keyword:searchKey});
   }
-  
-  //绑定操作
-  const bindAction = ()=>{
-    selectRowObj?setselectRowObj(null):setselectRowObj({})
+
+  const updateFromTableCell = (row)=>{
+    const {sort,id,name,deptManagerId,deptManagerName} = row;
+    const param = {
+      sort,id,name,deptManagerId,deptManagerName
+    }
+    updateFormRowData(param);
   }
+  
+  
 
   const onSearch = (searchKey)=>{
     //  console.log({searchKey});
@@ -397,22 +413,6 @@ const GroupMana = () => {
        'keyword':searchKey?searchKey:''
      });
   }
-
-  // const onChange=(value)=>{
-  //   console.log(`selected ${value}`);
-  // }
-  
-  // const onBlur=()=>{
-  //   console.log('blur');
-  //   // setselectRowObj(null)
-  // }
-  
-  // const onFocus=()=>{
-  //   console.log('focus');
-  //   if(checkedBox.length == 0){
-  //     message.warning('请先勾选需要绑定！');
-  //   }
-  // }
   
   useEffect(()=>{
     getData();
@@ -430,30 +430,19 @@ const GroupMana = () => {
           <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16,marginRight:20 }}>
              新增单位
           </Button>
-          {/* <Button onClick={bindAction} type="primary" style={{ marginBottom: 16,marginRight:20 }}>
-             {selectRowObj?'取消绑定操作':'选择绑定单位分类'}
-          </Button> */}
-          {/* <Select
-            showSearch
-            style={{ width: 170,marginRight:10}}
-            placeholder="选择绑定单位分类"
-            optionFilterProp="children"
-            onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onSearch={onSearch}
-            // disabled={checkedBox.length>0?false:false}
-            filterOption={(input, option) =>
-              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
-            }
-          >
-            <Option value="lucy">Lucy</Option>
-            <Option value="tom">Tom</Option>
-          </Select> */}
+  
           <Search style={{ width: 200 }} allowClear placeholder="请输入单位名"  onSearch={onSearch} enterButton />
           </div>
           {
-             ifRender&& <EditableFormTable set_checkedBox={set_checkedBox} columns={columns} pages={pages} paginationCallback={paginationCallback}  data={arr} deleteCallback={deleteCallback} callbackFromChild={callbackFromChild} ifUpdateList={ifUpdateList}/>
+             ifRender&& <EditableFormTable set_checkedBox={set_checkedBox} columns={columns} pages={pages} 
+             paginationCallback={paginationCallback}  
+             data={arr} 
+             deleteCallback={deleteCallback} 
+             callbackFromChild={callbackFromChild} 
+             ifUpdateList={ifUpdateList}
+             updateFormRowData={updateFormRowData}
+             updateFromTableCell={updateFromTableCell}
+             />
           }
     </div>
   );

src/views/groupManage/groupMana/table.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-04-27 13:59:57
- * @LastEditTime: 2021-05-13 11:18:12
+ * @LastEditTime: 2021-07-07 16:00:28
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: /react-antd-admin-template/src/views/groupManage/groupMana/table.js
@@ -16,19 +16,93 @@
  */
 
 import React from 'react';
-import { Table, Form,Divider,Popconfirm} from 'antd';
+import { Table, Form,Divider,Popconfirm,InputNumber} from 'antd';
 
-// const data = [];
-// for (let i = 0; i < 100; i++) {
-//   data.push({
-//     key: i.toString(),
-//     name: `Edrward ${i}`,
-//     age: 32,
-//     address: `London Park no. ${i}`,
-//   });
-// }
+const EditableContext = React.createContext();
 
+const EditableRow = ({ form, index, ...props }) => (
+  <EditableContext.Provider value={form}>
+    <tr {...props} />
+  </EditableContext.Provider>
+);
 
+const EditableFormRow = Form.create()(EditableRow);
+
+
+class EditableCell extends React.Component {
+  state = {
+    editing: false,
+  };
+
+  toggleEdit = () => {
+    const editing = !this.state.editing;
+    
+    this.setState({ editing }, () => {
+      if (editing) {
+        this.input.focus();
+      }
+    });
+  };
+
+  save = e => {
+    const { record, handleSave } = this.props;
+    this.form.validateFields((error, values) => {
+      if (error && error[e.currentTarget.id]) {
+        return;
+      }
+      this.toggleEdit();
+      handleSave({ ...record, ...values });
+    });
+  };
+
+  renderCell = form => {
+    this.form = form;
+    const { children, dataIndex, record, title } = this.props;
+    const { editing } = this.state;
+    return editing ? (
+      <Form.Item style={{ margin: 0 }}>
+        {form.getFieldDecorator(dataIndex, {
+          rules: [
+            {
+              required: false,
+            },
+          ],
+          initialValue: record[dataIndex],
+        })(<InputNumber ref={node => (this.input = node)} min={0} onPressEnter={this.save} onBlur={this.save} />)}
+      </Form.Item>
+    ) : (
+      <div
+        className="editable-cell-value-wrap"
+        style={{ paddingRight: 24 }}
+        onClick={this.toggleEdit}
+      >
+        {children}
+      </div>
+    );
+  };
+
+  render() {
+    const {
+      editable,
+      dataIndex,
+      title,
+      record,
+      index,
+      handleSave,
+      children,
+      ...restProps
+    } = this.props;
+    return (
+      <td {...restProps}>
+        {editable ? (
+          <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
+        ) : (
+          children
+        )}
+      </td>
+    );
+  }
+}
 class EditableTable extends React.Component {
   
   static defaultProps = {
@@ -88,7 +162,6 @@ class EditableTable extends React.Component {
   componentDidUpdate(prevProps, prevState){
     // console.log({prevProps, prevState});
     if(prevProps.ifUpdateList){
-        console.log('update');
         this.setState({
             data:this.props.data
         });
@@ -127,6 +200,10 @@ class EditableTable extends React.Component {
       }),
     }
   };
+  //直接从表格中更新
+  handleSave = row => {
+      this.props.updateFromTableCell(row);
+  };
 
   render() {
     
@@ -138,6 +215,10 @@ class EditableTable extends React.Component {
         ...col,
         onCell: record => ({
           record,
+          editable: col.editable,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          handleSave: this.handleSave
         }),
       };
     });
@@ -147,10 +228,13 @@ class EditableTable extends React.Component {
         totalCount,
     } = this.props.pages;
 
-    // console.log({
-    //   currPage,
-    //     totalCount,
-    // });
+    const components = {
+      body: {
+        row: EditableFormRow,
+        cell: EditableCell,
+      },
+    };
+
   
     const paginationProps = {
         showSizeChanger: false,
@@ -165,7 +249,8 @@ class EditableTable extends React.Component {
     return (
         <Table
           bordered
-          rowSelection={this.rowSelection()}
+          // rowSelection={this.rowSelection()}
+          components={components}
           loading={this.state.loading}
           pagination={paginationProps}
           dataSource={this.state.data}

src/views/login/index.jsx

@@ -9,6 +9,7 @@ import { login, getUserInfo,setUserInfo} from "@/store/actions";
 // import axios from "axios";
 
 const getQueryVariable=(variable)=>{
+
        let query = window.location.hash.substring(1);
       //  console.log({query});
       //  console.log(query.split("?"));
@@ -26,7 +27,11 @@ const getQueryVariable=(variable)=>{
 }
 
 
-
+/**
+ * 
+ * @param {*} props 
+ * @returns 
+ */
 const Login = (props) => {
   const { form, token, login, getUserInfo } = props;
   const { getFieldDecorator } = form;
@@ -71,6 +76,7 @@ const Login = (props) => {
   };
 
   // 获取用户信息
+
   const handleUserInfo = (data) => {
     getUserInfo(data);
   };
@@ -168,6 +174,9 @@ const Login = (props) => {
 
 const WrapLogin = Form.create()(Login);
 
+
+
 export default connect((state) => state.user, { login, getUserInfo })(
   WrapLogin
 );
+