Merge branch 'addMenu-v1.4' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into addMenu-v1.4

2022-07-26 16:12:06 +08:00 · 2022-07-26 16:12:06 +08:00 · 13128ae664
parent b6c05cb183 13e7aaa317
commit 13128ae664
5 changed files with 463 additions and 104 deletions
--- a/src/components/keysFind/index.jsx
+++ b/src/components/keysFind/index.jsx
@ -2,19 +2,18 @@
 * @Author: Wind
 * @Date: 2022-07-25 10:53:41
 * @LastEditors: Wind
- * @LastEditTime: 2022-07-25 14:44:27
+ * @LastEditTime: 2022-07-25 17:42:32
 * @Description:
 * @FilePath: \frontend\src\components\keysFind\index.jsx
 */
 import './index.less'
-import {
-  Form,
-  FormDateRangePickerField,
-  FormStrategy,
-  FormSelectField,
-  FormInputField,
-  Button
-} from 'zent'
+import { useEffect, useState } from 'react'
+import { Button, Notify, Select, DateRangePicker } from 'zent'
+import Ipt from '@/components/input/main'
+import Form from '@/components/form/main'
+import FormItem from '@/components/form-item/main'
+import _ from 'lodash'
+import { getReSellerOption, handelResponse } from '../../assets/api'

 const stateList = [
  { key: 1, text: '全部' },
@ -23,61 +22,106 @@ const stateList = [
  { key: 4, text: '已完结' },
  { key: 5, text: '已作废' }
 ]
+function init() {
+  return {
+    date: [],
+    reseller: '',
+    plan: '',
+    state: '',
+    key: ''
+  }
+}
+
 export default ({ onQuery }) => {
-  const form = Form.useForm(FormStrategy.View)
+  const [reseller_option, setReseller_option] = useState([])
+  const [models, setModels] = useState(init())
+
+  useEffect(() => {
+    getReSellerOption().then((res) => {
+      handelResponse(
+        res,
+        (req, msg) => {
+          let arr = _.map(req, (o) => {
+            let obj = {}
+            obj.key = o.id
+            obj.text = o.name
+            obj.direct_reseller_id = o.direct_reseller_id
+            return obj
+          })
+          setReseller_option(arr)
+        },
+        (err) => {
+          Notify.error(err)
+        }
+      )
+    })
+  }, [])

  return (
-    <>
-      <Form className='keysFind' ayout='horizontal' form={form}>
-        <FormDateRangePickerField
-          name='date'
-          dateFormat='YYYY-MM-DD'
-          label='请选择日期：'
-          defaultValue={[]}
-          className='zent-datepicker-plan'
-        />
-        <FormSelectField
-          name='distributor'
-          label='分销商：'
-          props={{
-            options: [
+    <div className='keysFind'>
+      <Form>
+        <FormItem labelname='请选择日期：' required='' labelwidth='95px'>
+          <DateRangePicker
+            dateFormat='YYYY-MM-DD'
+            value={models.date}
+            className='zent-datepicker-plan'
+            width={204}
+            onChange={(va) => setModels({ ...models, date: va })}
+          />
+        </FormItem>
+        <FormItem labelname='分销商：' required='' labelwidth='70px'>
+          <Select
+            options={reseller_option}
+            value={models.reseller}
+            placeholder='请选择'
+            width={204}
+            clearable
+            onChange={(va) => setModels({ ...models, reseller: va })}
+          />
+        </FormItem>
+
+        <FormItem labelname='计划名称：' required='' labelwidth='90px'>
+          <Select
+            options={[
              { key: 1, text: '普通用户' },
              { key: 2, text: '高级用户' }
-            ]
-          }}
-        />
-        <FormSelectField
-          name='plan'
-          label='计划名称：'
-          props={{
-            options: [
-              { key: 1, text: '普通用户' },
-              { key: 2, text: '高级用户' }
-            ]
-          }}
-        />
-        <FormSelectField
-          name='state'
-          label='状态：'
-          props={{
-            options: stateList
-          }}
-        />
-        <FormInputField
-          name='key'
-          label='KEY：'
-          showClear
-          props={{
-            spellCheck: false
-          }}
-        />
+            ]}
+            value={models.plan}
+            placeholder='请选择'
+            clearable
+            width={204}
+            onChange={(va) => setModels({ ...models, plan: va })}
+          />
+        </FormItem>
+        <FormItem labelname='状态：' required='' labelwidth='50px'>
+          <Select
+            name='state'
+            value={models.state}
+            options={stateList}
+            placeholder='请选择'
+            width={204}
+            clearable
+            onChange={(va) => setModels({ ...models, state: va })}
+          />
+        </FormItem>
+        <FormItem labelname='KEY：' required='' labelwidth='50px'>
+          <Ipt
+            value={models.key}
+            countShow={false}
+            labelWidth='0px'
+            placeholder='请输入'
+            width={204}
+            onChange={(va) => setModels({ ...models, key: va })}
+          />
+        </FormItem>
+
        <div>
-          <Button type='primary' onClick={() => onQuery(form.getValue())}>
+          <Button type='primary' onClick={() => onQuery(models)}>
            查询
          </Button>
-          <Button onClick={() => form.reset()}>重置</Button>
+          <Button onClick={() => setModels(init())}>重置</Button>
        </div>
      </Form>
-    </>
+    </div>
  )
 }
--- a/src/components/keysFind/index.less
+++ b/src/components/keysFind/index.less
@ -1,20 +1,39 @@
 .keysFind {
    width: 100%;
-    // display: grid;
-    // grid-template-columns: repeat(auto-fill, 500px);
    display: flex;
-    flex-wrap: wrap;
+    align-items: center;

-    .zent-form-control {
-        margin-right: 20px;
-        flex-direction: row !important;
+    .form-compontent {
+        padding-top: 0px !important;
+
+        .iptfillself:not(:last-child) {
+            margin-bottom: 0 !important;
+        }
+
+        .keep-ipt {
+            height: 32px !important;
+        }
    }

+    .form {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        .form-Item {
+            width: auto;
+            margin-right: 15px;
+            margin-bottom: 15px;
+        }
+    }
+
+
+
    .zent-datepicker .zent-datepicker-trigger {
        background-color: transparent !important;
-        width: 150px !important;
        border-radius: 0 !important;

+
        &:hover {
            border-color: #296BEF !important;
            background-color: #F7F9FC !important;
--- a/src/components/knockGold/index.jsx
+++ b/src/components/knockGold/index.jsx
@ -21,7 +21,6 @@ import {
  Card,
  Dialog,
  Notify,
-  Input,
  Tag,
  TimeRangePicker
 } from 'zent'
@ -41,6 +40,16 @@ const receiveTypeList = [
  { key: 'week', text: '每周' },
  { key: 'day', text: '每天' }
 ]
+
+const week = [
+  { key: 'Mon', text: '星期一' },
+  { key: 'Tue', text: '星期二' },
+  { key: 'Wed', text: '星期三' },
+  { key: 'Thu', text: '星期四' },
+  { key: 'Fri', text: '星期五' },
+  { key: 'Sat', text: '星期六' },
+  { key: 'Sun', text: '星期天' }
+]
 //预警百分比
 const earlyPerList = ['70', '50', '30', '20']
 const initArray = (targetNum) => {
@ -56,6 +65,7 @@ export default class addKnockGold extends Component {
        entry_time: [], // 生效时间
        batch_goods_name: '', // 批次商品名称
        channel_activity_id: '', // 批次号
+        templateNumber: '', //模板编号
        weight: '0', //权重
        price: '', // 单价
        recharge_amount: '', // 充值金额
@ -76,7 +86,11 @@ export default class addKnockGold extends Component {
        timer: [], //领取时间段
        timer_type: '1', //领取时间段类型
        effect_date_type: '', //生效日期类型
-        effect_date: '' //生效日期
+        effect_date: '', //生效日期
+        ruleDate: [[]], //规则日期
+        irregularDate: [[]], //不规则日期
+        irregularTime: [[]], //不规则时间
+        ruleWeek: [] //规则周
      },
      TimeDiffer: '',
      visible: false, //加框弹窗
@ -117,6 +131,42 @@ export default class addKnockGold extends Component {
    this.getTimeDiff()
  }

+  /* 可用时间段 添加和删除组件控制*/
+  addOrMoveFunction(index, key, valueKey, isLimit, err) {
+    return (
+      <>
+        {index === valueKey.length - 1 ? (
+          <p
+            disabled={this.props?.data?.id ? true : false}
+            className='add'
+            onClick={() => {
+              if (isLimit || valueKey.length < 3) {
+                const model = valueKey
+                model.push([])
+                this.setState({ [key]: model })
+              } else {
+                if (err) Notify.warn(err)
+              }
+            }}>
+            添加
+          </p>
+        ) : null}
+        {index !== 0 ? (
+          <p
+            disabled={this.props?.data?.id ? true : false}
+            className='move'
+            onClick={() => {
+              const model = valueKey
+              model.splice(index, 1)
+              this.setState({ [key]: model })
+            }}>
+            删除
+          </p>
+        ) : null}
+      </>
+    )
+  }
+
  /* 编辑回显 */
  echoFun(UserSelectList) {
    if (this.props.data) {
@ -298,6 +348,7 @@ export default class addKnockGold extends Component {

  /* 提交 */
  async submit() {
+    console.log(this.state.model)
    if (
      this.refs.form.validator() &&
      this.refs.form1.validator() &&
@ -364,52 +415,63 @@ export default class addKnockGold extends Component {
  }
  /* 数据转换统一处理函数 */
  transformDataCode() {
-    return {
-      channel: this.state.model.channel,
-      batch_goods_name: this.state.model.batch_goods_name,
-      channel_activity_id: this.state.model.channel_activity_id, //确认字段
-      price: this.state.model.price, //确认字段
-      recharge_amount: this.state.model.recharge_amount, //确认字段
-      denomination: this.state.model.denomination,
-      reduce_amount: this.state.model.reduce_amount,
-      all_budget: this.state.model.all_budget,
-      day_budget: this.state.model.day_budget,
-      card_type: this.state.model.card_type,
-      natural_limit: this.state.model.natural_limit,
-      brush_limit: this.state.model.brush_limit,
-      instruction: this.state.model.instruction,
-      early_per: this.state.model.early_per.filter((item) => item),
-      early_notifier: this.state.model.early_notifier.map(({ text, key }) => ({
+    const transformData = {}
+    transformData.channel = this.state.model.channel
+    /* 是支付宝立减金 才进行模板赋值操作 */
+    if (transformData.channel == 1) {
+      transformData.templateNumber = this.state.model.templateNumber
+    }
+    transformData.batch_goods_name = this.state.model.batch_goods_name
+    transformData.channel_activity_id = this.state.model.channel_activity_id //确认字段
+    transformData.price = this.state.model.price //确认字段
+    transformData.recharge_amount = this.state.model.recharge_amount //确认字段
+    transformData.denomination = this.state.model.denomination
+    transformData.reduce_amount = this.state.model.reduce_amount
+    transformData.all_budget = this.state.model.all_budget
+    transformData.day_budget = this.state.model.day_budget
+    transformData.card_type = this.state.model.card_type
+    transformData.natural_limit = this.state.model.natural_limit
+    transformData.brush_limit = this.state.model.brush_limit
+    transformData.instruction = this.state.model.instruction
+    transformData.early_per = this.state.model.early_per.filter((item) => item)
+    transformData.early_notifier = this.state.model.early_notifier.map(
+      ({ text, key }) => ({
        real_name: text,
        mobile: key
-      })),
-      weight: this.state.model.weight,
-      receive_conf: {
-        type: this.state.model.receive_type,
-        num: this.state.model.receive_number
+      })
+    )
+    transformData.weight = this.state.model.weight
+    transformData.receive_conf = {
+      type: this.state.model.receive_type,
+      num: this.state.model.receive_number
+    }
+    transformData.time_limit = {
+      effect_time: {
+        start_time: this.state.model.entry_time[0],
+        end_time: this.state.model.entry_time[1]
      },
-      time_limit: {
-        effect_time: {
-          start_time: this.state.model.entry_time[0],
-          end_time: this.state.model.entry_time[1]
-        },

-        receive_time: {
-          start_time: this.state.model.timer[0],
-          end_time: this.state.model.timer[1]
-        },
+      receive_time: {
+        start_time: this.state.model.timer[0],
+        end_time: this.state.model.timer[1]
+      },

-        use_time: {
-          type: this.state.model.usable_time,
-          fiexd_time: {
-            start_time: this.state.model.fixed_time[0],
-            end_time: this.state.model.fixed_time[1]
-          },
-          effect_day: this.state.model.effect_date,
-          effect_date_type: this.state.model.effect_date_type?.key
-        }
+      use_time: {
+        type: this.state.model.usable_time,
+        fiexd_time: {
+          start_time: this.state.model.fixed_time[0],
+          end_time: this.state.model.fixed_time[1]
+        },
+        effect_day: this.state.model.effect_date,
+        effect_date_type: this.state.model.effect_date_type?.key
      }
    }
+
+    return transformData
+  }
+
+  testDateFunction(arr) {
+    return arr.map((item) => this.setTime(item)).filter((item) => item)
  }

  /* 校验表单function */
@ -459,6 +521,29 @@ export default class addKnockGold extends Component {
      return false
    }

+    /* 验证有效期内，规则日期可用 */
+
+    if (this.state.model.usable_time === 'ruleDate') {
+      if (
+        this.testDateFunction(this.state.model.ruleDate).length > 0 ||
+        this.state.model.ruleWeek.length < 1
+      ) {
+        Notify.error('请完整的选择规则日期和时间')
+        return false
+      }
+    }
+
+    /* 有效期内，不规则日期可用 */
+    if (this.state.model.usable_time === 'irregularDate') {
+      if (
+        this.testDateFunction(this.state.model.irregularDate).length > 0 ||
+        this.testDateFunction(this.state.model.irregularTime).length > 0
+      ) {
+        Notify.error('请完整的选择不规则日期和时间')
+        return false
+      }
+    }
+
    const limitBit = /^-?\d+\.?\d{0,2}$/
    if (
      !limitBit.test(this.state.model.denomination) ||
@ -623,6 +708,31 @@ export default class addKnockGold extends Component {
                alignment={'left'}
              />
            </FormItem>
+            {this.state.model.channel == 1 ? (
+              <FormItem
+                labelname='卷模板编号'
+                prop='templateNumber'
+                id='batch_number'>
+                <Ipt
+                  onChange={(value) => {
+                    this.onHandleChange(value, 'templateNumber')
+                  }}
+                  onClearItem={() => {
+                    this.onHandleChange('', 'templateNumber')
+                  }}
+                  disabled={this.props?.data?.id ? true : false}
+                  value={this.state.model.templateNumber}
+                  placeholder={'请输入'}
+                  labelWidth={'0px'}
+                  maxLength={50}
+                  height={'36px'}
+                  width={'520px'}
+                  alignment={'left'}
+                />
+              </FormItem>
+            ) : (
+              <></>
+            )}

            <FormItem
              labelname='批次商品名称'
@ -961,6 +1071,10 @@ export default class addKnockGold extends Component {
                  onChange={({ target }) => {
                    this.onHandleChange(target.value, 'usable_time')
                    this.onHandleChange([], 'fixed_time')
+                    this.onHandleChange([[]], 'irregularDate')
+                    this.onHandleChange([[]], 'irregularTime')
+                    this.onHandleChange([[]], 'ruleWeek')
+                    this.onHandleChange([[]], 'ruleDate')
                  }}>
                  <Radio value='received'>领取后</Radio>
                </RadioGroup>
@ -1008,6 +1122,10 @@ export default class addKnockGold extends Component {
                    this.onHandleChange(target.value, 'usable_time')
                    this.onHandleChange('', 'effect_date_type')
                    this.onHandleChange('', 'effect_date')
+                    this.onHandleChange([[]], 'irregularDate')
+                    this.onHandleChange([[]], 'irregularTime')
+                    this.onHandleChange([[]], 'ruleWeek')
+                    this.onHandleChange([[]], 'ruleDate')
                  }}>
                  <Radio value='fiexd'>固定时间</Radio>
                </RadioGroup>
@ -1031,6 +1149,136 @@ export default class addKnockGold extends Component {
                  disabledTime={this.onDisabledTime1}
                />
              </div>
+              <div className='boxTime column'>
+                <RadioGroup
+                  className='column_label'
+                  disabled={this.props?.data?.id ? true : false}
+                  value={this.state.model.usable_time}
+                  onChange={({ target }) => {
+                    this.onHandleChange(target.value, 'usable_time')
+                    this.onHandleChange('', 'effect_date_type')
+                    this.onHandleChange('', 'effect_date')
+                    this.onHandleChange([[]], 'fixed_time')
+                    this.onHandleChange([[]], 'irregularDate')
+                    this.onHandleChange([[]], 'irregularTime')
+                  }}>
+                  <Radio value='ruleDate'>有效期内，规则日期可用</Radio>
+                </RadioGroup>
+                <Checkbox.Group
+                  value={this.state.model.ruleWeek}
+                  onChange={(va) => this.onHandleChange(va, 'ruleWeek')}
+                  style={{ marginLeft: '25px' }}>
+                  {week.map((week) => (
+                    <Checkbox value={week.text} key={week.key}>
+                      {week.text}
+                    </Checkbox>
+                  ))}
+                </Checkbox.Group>
+                {this.state.model.ruleDate.map((item, index) => (
+                  <div className='options_time' key={index}>
+                    <TimeRangePicker
+                      disabled={this.props?.data?.id ? true : false}
+                      className='zent-datepicker-plan column_datepicker'
+                      showTime={{
+                        format: 'HH:mm:ss',
+                        defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
+                      }}
+                      value={this.state.model.ruleDate[index]}
+                      onChange={(value) => {
+                        const model = this.state.model.ruleDate
+                        model[index] = value
+                        this.onHandleChange(model, 'ruleDate')
+                      }}
+                      width={158}
+                      disabledDate={this.onDisabledRange}
+                    />
+                    {this.addOrMoveFunction(
+                      index,
+                      'ruleDate',
+                      this.state.model.ruleDate,
+                      false,
+                      '最多设置3个时段'
+                    )}
+                  </div>
+                ))}
+                <p className='notice'>
+                  请按照24小时制输入可用时段，最多设置3个时段
+                </p>
+              </div>
+              <div className='boxTime column'>
+                <RadioGroup
+                  disabled={this.props?.data?.id ? true : false}
+                  value={this.state.model.usable_time}
+                  onChange={({ target }) => {
+                    this.onHandleChange(target.value, 'usable_time')
+                    this.onHandleChange('', 'effect_date_type')
+                    this.onHandleChange('', 'effect_date')
+                    this.onHandleChange([[]], 'fixed_time')
+                    this.onHandleChange([[]], 'ruleWeek')
+                    this.onHandleChange([[]], 'ruleDate')
+                  }}>
+                  <Radio value='irregularDate'>有效期内，不规则日期可用</Radio>
+                </RadioGroup>
+                <p className='notice' style={{ width: '600px' }}>
+                  可在有效期内任意选择时间天数，以及可用时段。
+                  因当前微信支持问题，如选择不规则时间，微信卡包内当前仅会展示有效期，建议
+                  将具体可用日期以及时间段填写在使用说明内。
+                </p>
+                {this.state.model.irregularDate.map((time, index) => (
+                  <div className='options_time' key={index}>
+                    <DateRangePicker
+                      className='zent-datepicker-plan column_datepicker'
+                      format='YYYY-MM-DD'
+                      disabled={[
+                        this.props?.data?.id ? true : false,
+                        this.props?.data?.id ? true : false
+                      ]}
+                      width={234}
+                      value={this.state.model.irregularDate[index]}
+                      onChange={(value) => {
+                        const model = this.state.model.irregularDate
+                        model[index] = value
+                        this.onHandleChange(model, 'irregularDate')
+                      }}
+                      disabledDate={this.onDisabledRange2}
+                      disabledTime={this.onDisabledTime1}
+                    />
+                    {this.addOrMoveFunction(
+                      index,
+                      'irregularDate',
+                      this.state.model.irregularDate,
+                      true
+                    )}
+                  </div>
+                ))}
+
+                {this.state.model.irregularTime.map((time, index) => (
+                  <div className='options_time' key={index}>
+                    <TimeRangePicker
+                      disabled={this.props?.data?.id ? true : false}
+                      className='zent-datepicker-plan column_datepicker'
+                      showTime={{
+                        format: 'HH:mm:ss',
+                        defaultTime: [moment().format('HH:mm:ss'), '23:59:59']
+                      }}
+                      value={this.state.model.irregularTime[index]}
+                      onChange={(value) => {
+                        const model = this.state.model.irregularTime
+                        model[index] = value
+                        this.onHandleChange(model, 'irregularTime')
+                      }}
+                      width={158}
+                      disabledDate={this.onDisabledRange}
+                    />
+                    {this.addOrMoveFunction(
+                      index,
+                      'irregularTime',
+                      this.state.model.irregularTime,
+                      true
+                    )}
+                  </div>
+                ))}
+              </div>
            </FormItem>
          </Form>
        </Card>
--- a/src/components/knockGold/index.less
+++ b/src/components/knockGold/index.less
@ -204,7 +204,46 @@
 				}
 			}

-			.boxTime:last-child {
+			.column_datepicker {
+				margin-left: 25px;
+				margin-top: 15px;
+			}
+
+			.column {
+				flex-direction: column;
+				align-items: flex-start;
+
+				.column_label {
+					margin-bottom: 20px;
+				}
+
+
+			}
+
+			.options_time {
+				display: flex;
+				align-items: flex-end;
+
+				.add {
+					margin-left: 25px;
+					color: #145bd4;
+					cursor: pointer;
+				}
+
+				.move {
+					margin-left: 25px;
+					color: #ccc;
+					cursor: pointer;
+				}
+			}
+
+			.notice {
+				margin-top: 10px;
+				margin-left: 25px;
+				color: #e4e4e4;
+			}
+
+			.boxTime:not(:first-child) {
 				margin-top: 20px;
 			}

--- a/src/components/knockGold/rules.js
+++ b/src/components/knockGold/rules.js
@ -10,6 +10,15 @@ export default {
        reg: '^[A-Za-z0-9]+$'
      }
    ],
+    /* 模板编号 */
+    templateNumber: [
+      { type: 'required', message: '请输入模板编号' },
+      {
+        type: 'regExp',
+        message: '请输入由数字或英文组成的模板编号',
+        reg: '^[A-Za-z0-9]+$'
+      }
+    ],
    /* 合同单价 */
    price: [
      { type: 'required', message: '请输入合同单价' },