判断必选

one_stop_public/libs/TableSelect.js

@@ -14,18 +14,13 @@ export default class TableSelect extends React.Component {
   constructor(props) {
     super(props)
     const value = props.value || {};
-    
+
     this.state = {
-      selects: value.selects||{},
-      visiable:  value.visiable ,
-      isAll:value.isAll!=null?value.isAll:false,
-      querys: value.querys||[],
+      selects: value.selects || {},
+      visiable: value.visiable,
+      isAll: value.isAll != null ? value.isAll : false,
+      querys: value.querys || [],
       sql: value.sql,
-
-    
-
-      
-
     }
   }
 
@@ -33,6 +28,7 @@ export default class TableSelect extends React.Component {
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
     if (onChange) {
+      console.log("changedValue", changedValue)
       onChange(Object.assign({}, this.state, changedValue));
     }
   }
@@ -40,50 +36,50 @@ export default class TableSelect extends React.Component {
     // Should be a controlled component.
     if ('value' in nextProps) {
       const value = nextProps.value;
-     
-     if(value!=null&& value instanceof Object){
+
+      if (value != null && value instanceof Object) {
         this.setState(value);
       }
       //
     }
   }
   remove = (rowKey) => {
+    console.log(rowKey)
     const { selects } = this.state
     delete selects[rowKey]
+    console.log(selects)
     if (!('value' in this.props)) {
       this.setState({ selects });
     }
-    this.triggerChange({ selects});
-
- 
+    this.triggerChange({ selects });
   }
-  
+
   select = (obj) => {
-    var { selects} = this.state
-    const { json: {  isMultiple ,optionType} } = this.props
+    var { selects } = this.state
+    const { json: { isMultiple, optionType } } = this.props
     let valueName = this.props.json.valueName
-    
-    if(optionType == "reference" &&this.props.dataColumn.referenceObjId){
-      valueName=this.props.dataColumn.referenceCodeName
-      
+
+    if (optionType == "reference" && this.props.dataColumn.referenceObjId) {
+      valueName = this.props.dataColumn.referenceCodeName
+
     }
-   
+
     const kk = obj[valueName]
     if (kk == null) {
       message.error("指定的取值字段不存在或者值为空")
       return
     }
     if (!isMultiple) {
-      selects = { [kk]: {...obj,selectKey:kk} }
+      selects = { [kk]: { ...obj, selectKey: kk } }
     } else {
       selects[kk] = obj;
-      selects[kk].selectKey=kk
+      selects[kk].selectKey = kk
     }
 
     if (!('value' in this.props)) {
       this.setState({ selects });
     }
-    this.triggerChange({ selects});
+    this.triggerChange({ selects });
 
 
 
@@ -96,37 +92,35 @@ export default class TableSelect extends React.Component {
     values.splice(i, 1)
     labels.splice(i, 1)
     if (!('value' in this.props)) {
-      this.setState({ values, labels});
+      this.setState({ values, labels });
     }
     this.triggerChange({ values, labels });
 
-   
+
 
   }
   open = () => {
-   
+
     if (!('value' in this.props)) {
-      this.setState({ visiable: true});
+      this.setState({ visiable: true });
     }
     this.triggerChange({ visiable: true });
 
   }
   closeModal = () => {
     if (!('value' in this.props)) {
-      this.setState({ visiable: false});
+      this.setState({ visiable: false });
     }
     this.triggerChange({ visiable: false });
 
   }
 
   render() {
-
-    const { json: { isMultiple, sql, optionType, showTable }, dataColumn: { referenceObjId }, sqlModel, columns,dataSource } = this.props
-    let { valueName, labelName} =this.props.json
-   
-    if(optionType == "reference" &&referenceObjId){
-      valueName=this.props.dataColumn.referenceCodeName
-      labelName=this.props.dataColumn.referenceNameName
+    const { json: { isMultiple, sql, optionType, showTable }, dataColumn: { referenceObjId }, sqlModel, columns, dataSource } = this.props
+    let { valueName, labelName } = this.props.json
+    if (optionType == "reference" && referenceObjId) {
+      valueName = this.props.dataColumn.referenceCodeName
+      labelName = this.props.dataColumn.referenceNameName
     }
 
 
@@ -134,45 +128,44 @@ export default class TableSelect extends React.Component {
     if (valueName == null || valueName == "") {
       return <>请指定取值的列名</>
     }
-    const { selects, visiable, labels} = this.state
+    const { selects, visiable, labels } = this.state
 
 
 
-    const keys=[]
-    for(let i in selects){
+    const keys = []
+    for (let i in selects) {
       keys.push(selects[i][valueName])
     }
 
 
-    const columns2=[...columns,{
-      title:"操作",
-      render:(val,record)=><a onClick={this.remove.bind(this,record.selectKey)}>移除</a>
+    const columns2 = [...columns, {
+      title: "操作",
+      render: (val, record) => <a onClick={this.remove.bind(this, record.selectKey)}>移除</a>
     }]
-    const columns3=[...columns,{
-      title:"操作",
-    
-      render:(val,record)=>
-      keys.includes(record[valueName])?<span>已选择</span>:<a onClick={this.select.bind(this,record)}>选择</a>
+    const columns3 = [...columns, {
+      title: "操作",
+      render: (val, record) =>
+        keys.includes(record[valueName]) ? <span>已选择</span> : <a onClick={this.select.bind(this, record)}>选择</a>
     }]
-   const custom={
-    isAll:this.state.isAll,
-    querys: this.state.querys,
-    sql: this.state.sql,
-   }
-    console.log(columns3)
+    const custom = {
+      isAll: this.state.isAll,
+      querys: this.state.querys,
+      sql: this.state.sql,
+    }
+    // console.log(columns3)
     let allWidth = 0
-    if(columns3) {
-      columns3.map((item,index) => {
-        if(index === columns3.length-1){
+    if (columns3) {
+      columns3.map((item, index) => {
+        if (index === columns3.length - 1) {
           item.fixed = 'right'
           item.width = 50
           allWidth += 50
           return item
         }
-        if(index === columns3.length-2){
+        if (index === columns3.length - 2) {
           allWidth += 150
         } else {
-          if(item.width){
+          if (item.width) {
             allWidth += item.width
           } else {
             item.width = 180
@@ -182,23 +175,20 @@ export default class TableSelect extends React.Component {
         return item
       })
     }
+    console.log(selects, Object.keys(selects).length)
     return (
       <div>
-
-        {Object.keys(selects).length > 0 ? showTable ? <Table rowKey={valueName} size="small" dataSource={Object.values(selects)} columns={columns2} pagination={false} /> :
-
-          Object.keys(selects).map((k) => <Tag key={k} closable onClose={this.remove.bind(this, k)}>{selects[k][labelName]}</Tag>)
+        {Object.keys(selects).length > 0 ?
+          showTable ? <Table rowKey={valueName} size="small" dataSource={Object.values(selects)} columns={columns2} pagination={false} /> :
+            Object.keys(selects).map((k) => <Tag key={k} closable onClose={this.remove.bind(this, k)}>{selects[k][labelName]}</Tag>)
           : ""
-
         }
 
 
         <Button type="primary" onClick={this.open}>选择</Button>
         <Modal
-          width="1200px"
+          width="60%"
           maskClosable={false}
-
-
           title={`请选择`}
           visible={visiable}
           onOk={this.closeModal}
@@ -206,9 +196,10 @@ export default class TableSelect extends React.Component {
         >
 
           {optionType == "reference" ? referenceObjId ?
-            <FormList rights={this.props.rights || []} notShowBack={true} value={custom}  objId={referenceObjId} isFormCom={true} isSelect={true}   selects={keys} valueName={valueName} callback={this.select} sql={sql} /> : "未关联数据对象"
+            <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={referenceObjId} isFormCom={true} isSelect={true} selects={keys} valueName={valueName} callback={this.select} sql={sql} />
+            : "未关联数据对象"
             : sqlModel.dataObjId ?
-              <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={sqlModel.dataObjId} isFormCom={true} isSelect={true}   selects={keys} valueName={valueName} callback={this.select} sql={sql} />
+              <FormList rights={this.props.rights || []} notShowBack={true} value={custom} objId={sqlModel.dataObjId} isFormCom={true} isSelect={true} selects={keys} valueName={valueName} callback={this.select} sql={sql} />
               : <Table rowKey={valueName} size="small" dataSource={dataSource.list} columns={columns3} scroll={{ x: allWidth }} />}
         </Modal>
       </div>