融合 兑换码编辑、新增、复制为一个页面 以及相关配置和代码优化

src/pages/exchangecode/exchangecodeAdd/index.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import Ipt from '../../../components/input/main'
+import Ipt from '@/components/input/main'
-import Form from '../../../components/form/main'
+import Form from '@/components/form/main'
-import FormItem from '../../../components/form-item/main'
+import FormItem from '@/components/form-item/main'
-import { deWeightThree } from '../../../utils'
+import { deWeightThree } from '@/utils'
 import {
   Card,
   Radio,
@@ -17,7 +17,7 @@ import {
   Input,
   BlockLoading
 } from 'zent'
-import Bus from '../../../assets/eventBus.js'
+import Bus from '@/assets/eventBus.js'
 import {
   getIsRequireApproval,
   getApprovalsStatus,
@@ -29,20 +29,20 @@ import {
   uploadImg,
   getCodesDetail,
   putCodesBatch
-} from '../../../assets/api.js'
+} from '@/assets/api.js'
 import _ from 'lodash'
-import Productform from '../product/add'
+import ProductForm from '../product/add' /* 商品 */
 import KnockGold from '@/components/knockGold' /* 立减金 */
-
 import './index.less'
 import moment from 'moment'
-import Grid from '../../../components/gird/main.js'
+import Grid from '@/components/gird/main.js'
 import { isSameDay } from 'date-fns'
+import { Column2, rulesInfo, codeInfo } from './utils'
 const initArray = (targetNum) => {
   return Array.from({ length: targetNum }, (_, index) => index)
 }
 
-export default class exchangedit extends React.Component {
+export default class exchangeAdd extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -94,16 +94,29 @@ export default class exchangedit extends React.Component {
       newGoodsBtnLoading: false,
       tableLoading: false,
       newGoldLoading: false,
-      addIsType: ''
+      addIsType: '',
+      isState: 0
     }
   }
 
   componentDidMount(e) {
+    const isState = sessionStorage.getItem('isState') /*复制1 编辑2  */
+    this.setState({ isState })
+    if (~~isState === 1) {
+      /* 复制 */
+    } else if (~~isState === 2) {
+      /* 编辑 */
+      this.editFunction()
+    } else {
+      /* 新增 */
+    }
+  }
+
+  /* 编辑处理数据 */
+  editFunction() {
     let code_batch_id = sessionStorage.getItem('code_id')
     let approval_id = sessionStorage.getItem('approval_id')
     let approval_status = sessionStorage.getItem('approval_status')
-    console.log('approval_id ==>', Number(approval_id))
-
     if (Number(approval_id) > 0) {
       //此处为审核中
       getApprovalsInfo(approval_id)
@@ -121,7 +134,6 @@ export default class exchangedit extends React.Component {
               //获取分销商
               getReseller(req.reseller_id).then((res) => {
                 handelResponse(res, (req1, msg) => {
-                  console.log('req ==>1', req1)
                   req1.receive_email = req1.contact_email[0]
                   this.setState({ reseller: req1 })
                   this.setState({ phone_list: req1.contact_phone })
@@ -270,7 +282,6 @@ export default class exchangedit extends React.Component {
               //获取分销商
               getReseller(reqCopy.plan.reseller_id).then((res) => {
                 handelResponse(res, (req1, msg) => {
-                  console.log('req ==>1', req1)
                   req1.receive_email = req1.contact_email[0]
                   this.setState({ reseller: req1 })
                   this.setState({ phone_list: req1.contact_phone })
@@ -602,9 +613,6 @@ export default class exchangedit extends React.Component {
       )
     })
   }
-  onPayTypeChange(e) {
-    this.setState({ paytype: e.target.value })
-  }
 
   submit() {
     // if (this.state.direct_reseller_id <= 0) {
@@ -625,7 +633,6 @@ export default class exchangedit extends React.Component {
       }
 
       let approval_id = sessionStorage.getItem('approval_id')
-      console.log('approval_id ==>', approval_id)
 
       if (Number(approval_id) <= 0) {
         //非审核中状态
@@ -683,30 +690,6 @@ export default class exchangedit extends React.Component {
   onConfirm() {
     this.setState({ audit_visible: false })
     this.submitCodeData()
-    // if(approval_id <= 0)
-    // {
-    // 		this.submitCodeData();
-    // }else{
-    // if(this.state.approvalsStatus==true)
-    // {
-    // 	this.setState({recall_visible:true})
-    // }
-
-    // }
-  }
-
-  onTypeChange(e) {
-    let model2 = this.state.model
-    model2.type = e.target.value
-    this.setState({ model: model2 })
-  }
-
-  onUploadError = (type, data) => {
-    if (type === 'overMaxAmount') {
-      Notify.error(`最多可上传 ${data.maxAmount} 张图片`)
-    } else if (type === 'overMaxSize') {
-      Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`)
-    }
   }
 
   addProduct(type) {
@@ -727,7 +710,6 @@ export default class exchangedit extends React.Component {
     }
     try {
       getProductInfoSelect(param).then((res) => {
-        console.log('home/exchangecode-edit ==> 1', res)
         if (res.code === 200) {
           sessionStorage.setItem('productsList', JSON.stringify(res.data.data))
           this.setState({ productData: null })
@@ -862,129 +844,7 @@ export default class exchangedit extends React.Component {
     }
   }
 
-  //
+  onDisabledTime = (date) => {
-  onUploadError = (type, data) => {
-    if (type === 'overMaxAmount') {
-      Notify.error(`最多可上传 ${data.maxAmount} 张图片`)
-    } else if (type === 'overMaxSize') {
-      Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`)
-    }
-  }
-
-  onUploadChange1(file, row) {
-    if (file.length > 0 && file[0].status == 'success') {
-      let rowIndex = this.state.tempdata.findIndex((o) => {
-        return o.product_id == row.product_id
-      })
-      this.state.tempdata[rowIndex].show_url = file[0].src
-      this.setState({ tempdata: this.state.tempdata })
-    }
-  }
-  onUploadChange2(file, row) {
-    if (file.length > 0 && file[0].status == 'success') {
-      let rowIndex = this.state.tempdata.findIndex((o) => {
-        return o.product_id == row.product_id
-      })
-
-      this.state.tempdata[rowIndex].describe_url = file[0].src
-      this.setState({ tempdata: this.state.tempdata })
-    }
-  }
-
-  /* 修改商品名称 */
-  onNameChange(e, row) {
-    let rowIndex = this.state.tempdata.findIndex((o) => {
-      return o.product_id == row.product_id
-    })
-    this.state.tempdata[rowIndex].product_name = e.target.value
-    this.setState({ tempdata: this.state.tempdata })
-  }
-
-  /* 修改库存总数 */
-  onQuantityChange(e, row) {
-    this.setState({ tempdata: this.state.tempdata })
-    let value = e.target.value
-    let rowIndex = this.state.tempdata.findIndex((o) => {
-      return o.product_id == row.product_id
-    })
-    if (value - this.state.tempdata[rowIndex].usage < 0) {
-      Notify.error(`库存总数量不能小于已使用库存量`)
-
-      return
-    }
-
-    this.state.tempdata[rowIndex].quantity = value
-    this.state.tempdata[rowIndex].stock =
-      value - this.state.tempdata[rowIndex].usage
-    this.setState({ tempdata: this.state.tempdata })
-  }
-
-  /* 修改合同价 */
-  onPriceChange(e, row) {
-    let str = e.target.value
-    let value = str
-      .replace(/[^\d^\.]+/g, '')
-      .replace('.', '$#$')
-      .replace(/\./g, '')
-      .replace('$#$', '.')
-
-    let rowIndex = this.state.tempdata.findIndex((o) => {
-      return o.product_id == row.product_id
-    })
-
-    this.state.tempdata[rowIndex].contract_price = value
-    this.setState({ tempdata: this.state.tempdata })
-  }
-
-  onUpload = (file, report) => {
-    return new Promise((resolve, reject) => {
-      let path = ''
-      let formdata = new FormData()
-      formdata.append('file', file)
-      formdata.append('path', 'common_image')
-      uploadImg(formdata).then((res) => {
-        handelResponse(
-          res,
-          (req, msg) => {
-            path = req.path
-          },
-          (err) => {
-            reject()
-          }
-        )
-      })
-
-      let count = 0
-      const update = () => {
-        if (path) {
-          resolve(path)
-        } else {
-          if (count < 100) {
-            count += 2
-            report(count)
-            setTimeout(update, 500)
-            console.log('上传中')
-          } else {
-            reject()
-          }
-        }
-      }
-      setTimeout(update, 500)
-    })
-  }
-
-  onDisabledCombinedDate = (val) => {
-    let str = moment(val).format('YYYY-MM-DD HH:mm:ss')
-    let isBetween = moment(str).isBetween(
-      this.state.codeInfo.date_time[0],
-      this.state.plan_time,
-      null,
-      '(]'
-    )
-    return !isBetween
-  }
-
-  onDisabledTime = (date, type) => {
     const min = new Date()
     const hour = min.getHours()
     const minute = min.getMinutes()
@@ -1005,9 +865,6 @@ export default class exchangedit extends React.Component {
   }
 
   onDisabledRange = (date, type) => {
-    let step1 = JSON.parse(sessionStorage.getItem('step1'))
-    // let str = moment(date).format("YYYY-MM-DD HH:mm:ss")
-    //  let isBetween = moment(str).isBetween(step1.begin_time,step1.end_time,null,'(]');
     let isdisabled = false
     let str = moment(date).format('YYYY-MM-DD HH:mm:ss')
 
@@ -1060,8 +917,6 @@ export default class exchangedit extends React.Component {
 
   /* 商品范围列表编辑 */
   productEditShow(rowData) {
-    console.log('direct_reseller_id ==>', this.state.direct_reseller_id)
-    console.log('rowData 12==>', rowData)
     if (this.state.direct_reseller_id > 0) {
       this.setState({
         tableLoading: true
@@ -1098,119 +953,8 @@ export default class exchangedit extends React.Component {
       return
     }
   }
+
   render() {
-    //基本信息
-    const codeInfo = {
-      code_name: [{ type: 'required', message: '请输入兑换码名称' }]
-    }
-
-    //基本规则
-    const rulesInfo = {
-      date_time: [{ type: 'required', message: '请选择生效时间段' }]
-    }
-
-    const Column2 = [
-      {
-        title: '商品ID',
-        name: 'product_id',
-        prop: 'product_id',
-        width: 'auto',
-        type: 'normal'
-      },
-
-      {
-        title: '商品名称',
-        width: 'auto',
-        prop: 'product_name',
-        name: 'product_name',
-        type: 'normal'
-      },
-      {
-        title: '立减金平台批次号',
-        width: '250px',
-        prop: 'channel_activity_id',
-        name: 'channel_activity_id',
-        type: 'normal'
-      },
-      {
-        title: '类型',
-        width: 'auto',
-        prop: 'type',
-        name: 'type',
-        type: 'slot'
-      },
-      {
-        title: '上游平台',
-        width: 'auto',
-        prop: 'upstream',
-        name: 'upstream',
-        type: 'normal'
-      },
-      {
-        title: '有效时间段',
-        width: '450px',
-        prop: 'effectDate',
-        name: 'effectDate',
-        type: 'normal'
-      },
-
-      {
-        title: '当前成本价格',
-        prop: 'cost_price',
-        name: 'cost_price',
-        width: 'auto',
-        type: 'slot'
-      },
-      {
-        title: '合同单价',
-        name: 'contract_price',
-        prop: 'contract_price',
-        type: 'normal',
-        width: 'auto'
-      },
-      {
-        title: '商品官方价',
-        type: 'normal',
-        prop: 'official_price',
-        width: 'auto'
-      },
-      {
-        title: '库存总数量',
-        prop: 'quantity',
-        name: 'quantity',
-        type: 'normal',
-        width: 'auto'
-      },
-      {
-        title: '剩余数量',
-        prop: 'stock',
-        name: 'stock',
-        type: 'normal',
-        width: 'auto'
-      },
-      {
-        title: '已使用数量',
-        prop: 'usage',
-        name: 'usage',
-        type: 'normal',
-        width: 'auto'
-      },
-      {
-        title: '操作',
-        prop: 'edit',
-        name: 'edit',
-        type: 'slot',
-        width: 'auto'
-      }
-      // {
-      //   title: '商品图',
-      //   prop: 'describe_url',
-      //   name: 'describe_url',
-      //   type: "slot",
-      //   width:'auto',
-      // },
-    ]
-
     return (
       <div id='editcode'>
         <div>
@@ -1223,6 +967,40 @@ export default class exchangedit extends React.Component {
                 rules={codeInfo}
                 ref='code_info'
                 className='addform'>
+                <FormItem labelname='营销计划' prop='planName' id='planName'>
+                  <Select
+                    onChange={(e) => {
+                      let model = this.state.codeInfo
+                      model.planName = e
+                      this.setState({ codeInfo: model })
+                    }}
+                    clearable
+                    value={this.state.codeInfo.planName}
+                    options={this.state.rankoptions}
+                    placeholder={'请选择'}
+                    labelWidth={'0px'}
+                    height={'36px'}
+                    width={'520px'}
+                    alignment={'left'}
+                  />
+                </FormItem>
+                <FormItem labelname='key批次' prop='keyBatch' id='keyBatch'>
+                  <Select
+                    onChange={(e) => {
+                      let model = this.state.codeInfo
+                      model.keyBatch = e
+                      this.setState({ codeInfo: model })
+                    }}
+                    clearable
+                    value={this.state.codeInfo.keyBatch}
+                    options={this.state.rankoptions}
+                    placeholder={'请选择'}
+                    labelWidth={'0px'}
+                    height={'36px'}
+                    width={'520px'}
+                    alignment={'left'}
+                  />
+                </FormItem>
                 {this.state.isload ? (
                   <FormItem
                     labelname='兑换码名称'
@@ -1251,10 +1029,10 @@ export default class exchangedit extends React.Component {
                 ) : null}
 
                 <FormItem labelname='发放总量' prop='issued' id='issued'>
-                  <div>{this.state.codeInfo.issued}</div>
+                  <div className='line'>{this.state.codeInfo.issued}</div>
                 </FormItem>
                 <FormItem labelname='剩余库存量' prop='issued' id='issued'>
-                  <div>{this.state.codeInfo.stock}</div>
+                  <div className='line'>{this.state.codeInfo.stock}</div>
                 </FormItem>
                 <FormItem
                   labelname='使用说明'
@@ -1295,7 +1073,6 @@ export default class exchangedit extends React.Component {
                   prop='date_time'
                   id='date_time'>
                   <DateRangePicker
-                    disabled={[true, false]}
                     className='zent-datepicker-plan'
                     showTime={{
                       format: 'HH:mm:ss',
@@ -1403,34 +1180,6 @@ export default class exchangedit extends React.Component {
                             </a>
                           )
                         }
-
-                        // if(com == "show_url")
-                        // {
-                        // 	return	<ImageUpload
-                        // 	style={{width:"30px",height:"30px"}}
-                        // 	  className="td-image-upload-demo"
-                        // 	  maxSize={5 * 1024 * 1024}
-                        // 	  maxAmount={1}
-                        // 	 onChange={(e)=>{this.onUploadChange1(e,rowData)}}
-                        // 	  onUpload={this.onUpload}
-                        // 	   defaultFileList={[{'src':rowData.show_url}]}
-                        // 	  value={rowData.show_url}
-                        // 	/>
-                        // }
-
-                        // if(com == "describe_url")
-                        // {
-                        // 	return   <ImageUpload
-                        // 					style={{width:"30px",height:"30px"}}
-                        // 	className="td-image-upload-demo"
-                        // 		maxSize={5 * 1024 * 1024}
-                        // 		maxAmount={1}
-                        // 				onChange={(e)=>{this.onUploadChange2(e,rowData)}}
-                        // 				onUpload={this.onUpload}
-                        // 				  defaultFileList={ rowData.describe_url ?  [{'src':rowData.describe_url}] : null}
-                        // 			value={rowData.describe_url}
-                        // 			/>
-                        // }
                       }}
                     />
                   </BlockLoading>
@@ -1475,7 +1224,7 @@ export default class exchangedit extends React.Component {
                   data={this.state.productData}
                 />
               ) : (
-                <Productform ref='product' data={this.state.productData} />
+                <ProductForm ref='product' data={this.state.productData} />
               )}
             </Card>
           </div>
@@ -1495,9 +1244,7 @@ export default class exchangedit extends React.Component {
               <div className='audit-box-title'>提交审核</div>
               <div className='payType'>
                 <RadioGroup
-                  onChange={(e) => {
+                  onChange={(e) => this.setState({ paytype: e.target.value })}
-                    this.onPayTypeChange(e)
-                  }}
                   value={this.state.paytype}
                   className='audit-obj'>
                   <Radio value={3}>预付款扣除</Radio>

src/pages/exchangecode/exchangecodeAdd/index.less

@@ -1,11 +1,39 @@
+#editcode {
+	padding-bottom: 30px;
+
+	.zent-select-v2 {
+		border-top: 0 !important;
+		border-left: 0 !important;
+		border-right: 0 !important;
+		border-radius: 0 !important;
+
+		&:hover,
+		.zent-select-v2-search:hover {
+			background-color: #F7F9FC;
+		}
+	}
+
 	.edit-btnList {
 		width: 90%;
 		margin: 0 auto;
+
 		button {
 			width: 100px;
 		}
+
 		.goods-boxs {
 			display: flex;
 			justify-content: flex-start;
 		}
 	}
+
+	.line {
+		width: 508px;
+		text-align: left;
+		height: 36px;
+		line-height: 36px;
+		padding-left: 12px;
+		border-bottom: 1px solid #e0e0e0;
+	}
+
+}

src/pages/exchangecode/exchangecodeAdd/utils.js

@@ -0,0 +1,106 @@
+//基本信息
+export const codeInfo = {
+  code_name: [{ type: 'required', message: '请输入兑换码名称' }],
+  planName: [{ type: 'required', message: '请选择营销计划' }],
+  keyBatch: [{ type: 'required', message: '请选择key批次' }]
+}
+
+//基本规则
+export const rulesInfo = {
+  date_time: [{ type: 'required', message: '请选择生效时间段' }]
+}
+
+export const Column2 = [
+  {
+    title: '商品ID',
+    name: 'product_id',
+    prop: 'product_id',
+    width: 'auto',
+    type: 'normal'
+  },
+
+  {
+    title: '商品名称',
+    width: 'auto',
+    prop: 'product_name',
+    name: 'product_name',
+    type: 'normal'
+  },
+  {
+    title: '立减金平台批次号',
+    width: '250px',
+    prop: 'channel_activity_id',
+    name: 'channel_activity_id',
+    type: 'normal'
+  },
+  {
+    title: '类型',
+    width: 'auto',
+    prop: 'type',
+    name: 'type',
+    type: 'slot'
+  },
+  {
+    title: '上游平台',
+    width: 'auto',
+    prop: 'upstream',
+    name: 'upstream',
+    type: 'normal'
+  },
+  {
+    title: '有效时间段',
+    width: '450px',
+    prop: 'effectDate',
+    name: 'effectDate',
+    type: 'normal'
+  },
+
+  {
+    title: '当前成本价格',
+    prop: 'cost_price',
+    name: 'cost_price',
+    width: 'auto',
+    type: 'slot'
+  },
+  {
+    title: '合同单价',
+    name: 'contract_price',
+    prop: 'contract_price',
+    type: 'normal',
+    width: 'auto'
+  },
+  {
+    title: '商品官方价',
+    type: 'normal',
+    prop: 'official_price',
+    width: 'auto'
+  },
+  {
+    title: '库存总数量',
+    prop: 'quantity',
+    name: 'quantity',
+    type: 'normal',
+    width: 'auto'
+  },
+  {
+    title: '剩余数量',
+    prop: 'stock',
+    name: 'stock',
+    type: 'normal',
+    width: 'auto'
+  },
+  {
+    title: '已使用数量',
+    prop: 'usage',
+    name: 'usage',
+    type: 'normal',
+    width: 'auto'
+  },
+  {
+    title: '操作',
+    prop: 'edit',
+    name: 'edit',
+    type: 'slot',
+    width: 'auto'
+  }
+]

src/pages/exchangecode/list/list.js

@@ -147,8 +147,8 @@ export default class acclist extends React.Component {
       tabIndex: 0
     }
   }
-  /* 新建兑换码 */
+  /* 新建/复制/编辑/兑换码 */
-  addCodeFunction() {
+  addCodeFunction(type, param) {
     let activerou = [
       {
         pagetitle: '新建兑换码',
@@ -164,6 +164,26 @@ export default class acclist extends React.Component {
         ]
       }
     ]
+    /* 1：复制 2：编辑 */
+    if (type === 1) {
+      activerou[0].pagetitle = '复制'
+      activerou[0].items[1].name = '复制:' + param.title
+      sessionStorage.setItem(
+        'knockGold_effectDate',
+        JSON.stringify(param.keyBatch.plan)
+      )
+      sessionStorage.setItem('keybatch_id', param.key_batch_id)
+      sessionStorage.setItem('copy_code_id', param.id)
+      sessionStorage.setItem('key_reseller_id', param.keyBatch.plan.reseller_id)
+      sessionStorage.setItem('approval_id', param.keyBatch.approval_id)
+      sessionStorage.setItem('isState', type)
+    } else if (type === 2) {
+      activerou[0].pagetitle = '编辑'
+      activerou[0].items[1].name = param.title + '兑换码的商品范围列表'
+      sessionStorage.setItem('code_id', param.id)
+      sessionStorage.setItem('isState', type)
+    }
+
     sessionStorage.setItem('breaknav', JSON.stringify(activerou))
     sessionStorage.setItem('pathname2', '/home/exchangecode-exchangecodeAdd')
     this.props.history.push('/home/exchangecode-exchangecodeAdd')
@@ -192,24 +212,24 @@ export default class acclist extends React.Component {
   }
 
   /* 处理可复制数据逻辑  */
-  copyElementFunction({ key_batch_id, status, keyBatch, id, title }) {
+  copyElementFunction(params) {
     let element = ''
     /* 
       条件一 如果兑换码状态为1（进行中）、2（暂停中）、3（未开始）可直接复制
       条件二 如果兑换码状态为4（已完结）、5（已作废）则判断key批次是否是 生效中、暂停中、审核驳回状态且营销计划是待生效、进行中、暂停中
      */
     const isCopy =
-      [1, 2, 3].includes(status) ||
+      [1, 2, 3].includes(params.status) ||
-      ([4, 5].includes(status) &&
+      ([4, 5].includes(params.status) &&
-        [4, 5, 8].includes(keyBatch.status) &&
+        [4, 5, 8].includes(params.keyBatch.status) &&
-        [3, 5, 4].includes(keyBatch.plan.status))
+        [3, 5, 4].includes(params.keyBatch.plan.status))
 
     if (isCopy) {
       element = (
         <span
           className='grid-link'
           style={{}}
-          onClick={(e) => this.copyFunction(key_batch_id, id, keyBatch, title)}>
+          onClick={(e) => this.addCodeFunction(1, params)}>
           复制
         </span>
       )
@@ -503,7 +523,7 @@ export default class acclist extends React.Component {
             <Button
               type='primary'
               icon='plus'
-              onClick={this.addCodeFunction.bind(this)}>
+              onClick={() => this.addCodeFunction()}>
               新建兑换码
             </Button>
             <Ipt
@@ -592,7 +612,7 @@ export default class acclist extends React.Component {
                       rowData.status != -1 ? (
                         <span
                           className='grid-link'
-                          onClick={(e) => this.editinfo(e, rowData)}>
+                          onClick={(e) => this.addCodeFunction(2, rowData)}>
                           编辑
                         </span>
                       ) : (