material-pc-settle/src/views/SettleIn/planner.vue

<!-- eslint-disable no-unused-vars -->
<!--
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 *
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *            佛祖保佑     永不宕机     永无BUG
 -->
<template>
  <div class="warp12">
    <div class="statusBox">
        <cent-logo></cent-logo>
        <div class="personal infoBox">
           <div class="title">营销策划师</div>
           <div class="content">
              <div class="formBox">
                <el-form
                  :model="plannerForm"
                  :rules="plannerRules"
                  :label-position="'top'"
                  ref="ruleForm"
                  label-width="150px"
                  class="ruleForm">
                  <div class="formTit">
                    <span class="serialNumber">01</span>
                    <span class="formName">个人信息</span>
                  </div>
                  <el-form-item label="账户名/电话号码" prop="username">
                    <el-input maxlength="100" placeholder="请输入账户名/电话" v-model="plannerForm.username"></el-input>
                  </el-form-item>
                  <el-form-item label="姓名" prop="name">
                    <el-input maxlength="100" placeholder="请输入姓名" v-model="plannerForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="电话号码" prop="phone">
                    <el-input maxlength="100" placeholder="请输入电话号码" v-model="plannerForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input maxlength="100" placeholder="请输入邮箱地址" v-model="plannerForm.email"></el-input>
                  </el-form-item>
                  <el-form-item label="性别" prop="sex">
                     <el-radio-group v-model="plannerForm.sex">
                      <el-radio :label="'男'">男</el-radio>
                      <el-radio :label="'女'">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="店铺地址" prop="addres">
                    <el-cascader
                      ref="addressChange"
                      size="large"
                      :options="options"
                      v-model="plannerForm.region"
                      :props="{ checkStrictly: true, emitPath: false, label:'name', value: 'id', lazy: true, lazyLoad: lazyLoadAddres }"
                      @change="addressChange">
                    </el-cascader>
                  </el-form-item>
                  <el-form-item label="" prop="storeAddressDetail">
                    <el-input maxlength="200" resize="none" placeholder="请输入详细地址" type="textarea" :rows="3" v-model="plannerForm.addres"></el-input>
                  </el-form-item>
                  <!-- <el-form-item label="合同状态" prop="contractState">
                     <el-radio-group v-model="plannerForm.contractState">
                      <el-radio :label="1">有效</el-radio>
                      <el-radio :label="0">无效</el-radio>
                    </el-radio-group>
                  </el-form-item> -->
                <!-- <div class="dateBox idDateBox">
                  <el-form-item label="合同有效期" prop="effectiveDate" class="businessDate">
                    <el-date-picker
                      type="daterange"
                      @change="getTime"
                      v-model="formTimer"
                      start-placeholder="开始日期"
                      format="yyyy 年 MM 月 dd 日"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd"
                      :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                  </el-form-item>
                </div> -->
                    <el-form-item label="选择分公司" prop="parentId" class="idType">
                     <el-select v-model="plannerForm.parentId" placeholder="请在选择分公司前先选择好地址">
                        <el-option
                          v-for="item in conpanyList"
                          :key="item.platformUserId"
                          :label="item.name"
                          :value="item.platformUserId">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="入驻套餐" prop="packageId" class="idType">
                      <el-select v-model="plannerForm.packageId" placeholder="请选择">
                        <el-option
                          v-for="item in setMealData"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                </el-form>
                <el-button
                class="submitBtn"
                @click="submitForm('ruleForm')"
                >提交</el-button>
              </div>
           </div>
        </div>
    </div>
  </div>
</template>

<script>
import { listSearchMixin } from '@/config/mixin'
import CentLogo from '@/components/centLogo'
import api from '@/api'
// import { unemptyArray } from '@/util/ArrayFunction'
// import { regionData, CodeToText } from 'element-china-area-data' // 引入地区数据，现在使用的为线上接口的数据，已废弃
export default {
    name: 'planner',
    mixins: [listSearchMixin],
    components: {
      CentLogo
    },
    data () {
      return {
        options: null,
        conpanyList: [],
        addresCode: '',
        formTimer: '',
        selectedOptions: [],
        setMealData: [],
        plannerForm: {
          username: '', // 账号
          name: '', // 姓名
          phone: '', // 电话号码
          email: '', // 邮箱
          sex: '男', // 性别
          region: '', // 区域编码
          addres: '', // 详细地址
          effectiveDate: '', // 生效日期  即时生效-设置当前时间 有值-指定日期生效
          effectiveYear: '', // 生效时限（年）
          contractState: '', // 合同状态 1-有效 0-无效
          type: '2', // 类型： 1为分公司 2为策划师
          parentId: '', // 父级ID 如果为分公司则为null
          packageId: '' // 套餐类型
        },
        SetMeal: [],
        plannerRules: {
          username: [
            { required: true, message: '请输入账号/电话', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ],
          phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: function (rule, value, callback) {
              if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value) && value) {
                callback(new Error('请输入正确的电话号码'))
              } else {
                callback()
              }
            },
            trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ],
          addres: [
            { required: true, message: '请选择地址', trigger: 'blur' }
          ],
          packageId: [
            { required: true, message: '请选择入驻套餐', trigger: 'blur' }
          ],
          parentId: [
            { required: true, message: '请选择分公司', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.sendReq({
        url: api.getTreeClass,
        method: 'GET',
        params: {}
      }, (res) => {
        // console.log(res) // 获取地址选择器数据并去除空的子项
        this.options = res.data
      })
      this.sendReq({
        url: api.getAdditional, // 套餐购买类型：1-商家，2-策划师 3-分公司
        method: 'GET',
        params: {
          type: 3
        }
      }, (res) => {
        // console.log(res) // 获取地址选择器数据并去除空的子项
        this.setMealData = res.data
        // console.log(this.options)
      })
    },
    methods: {
      submitForm (formName) {
        // console.log(this.plannerForm)
        this.$refs[formName].validate(valid => {
          if (valid) {
            let params = {
              url: api.subsidiaryCompanyCheck,
              method: 'POST',
              data: this.plannerForm
            }
            this.sendReq(params, (res) => {
              if (res.code === '200') {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.$router.push({path: '/status'})
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
          } else {
            this.$message({
              message: '信息填写不完整！',
              type: 'warning'
            })
            return false
          }
        })
      },
      addressChange (arr) {
        // let cacheArray = []
        let datas = this.$refs.addressChange.getCheckedNodes(true)[0].data // 获取选中的节点数据
        // console.log(datas)
        this.sendReq({
        url: api.selectAnd,
        method: 'POST',
        data: {
          area: datas.id, // 地区编号
          type: 2,
          level: datas.level, // "区级别不能为空"
          page: 1,
          pageSize: 10
        }
        }, (res) => {
          this.conpanyList = res.data.list
          console.log(res)
        })
      },
      // !原本的接口需要传递时间信息，后面不许要的，先注释，待使用一段时间确认后删除
      // getTime (TimeValue = []) { // 获取有效时间并且转化为字符串,并计算出之间的有效年份
      //     this.plannerForm.effectiveDate = TimeValue[0] + ' - ' + TimeValue[1]
      //     let arr = TimeValue.map(item => {
      //       return item.split('-')[0]
      //     })
      //     // console.log(arr[1], arr[0])
      //     this.plannerForm.effectiveYear = arr[1] - arr[0]
      //   // this.plannerForm.effectiveDate
      // },
      lazyLoadAddres (node, resolve) {
        // console.log(node)
         this.sendReq({
          url: api.getTreeOne,
          method: 'GET',
          params: {
            parentId: node.value
          }
          }, (res) => {
             resolve(res.data)
        })
      }
    }
}
</script>

<style lang="less" scoped>
.statusBox {
  position: relative;
  z-index: 1000;
  .infoBox {
    width: 100%;
    height: 700px;
    background: #ffffff;
    .title {
      background: #FAFAFA;
      width: 100%;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-bottom: 1px solid #E6E6E6;
    }
    .content {
      width: 100%;
      padding: 0 80px 50px 80px;
      height: 650px;
      overflow-y: auto;
      .formTit {
        height: 55px;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 50px 0;
        border-bottom: 1px solid #E6E6E6;
        .serialNumber {
          width: 24px;
          height: 24px;
          color: #C5AA7B;
          border: 1px solid #C5AA7B;
          border-radius: 4px;
          margin-right: 10px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
        }
        .formName {
          font-size: 20px;
          font-weight: 400;
          color: #333333;
          width: 200px;
        }
      }
      .formBox {
        width: 100%;
        /deep/ .ruleForm {
          .el-form-item{
            padding: 0 170px;
          }
        }
        /deep/ .el-cascader {
          width: 100%;
        }
        .idDateBox {
          margin-bottom: 30px;
          /deep/.el-form-item__content{
            display: flex;
          }
        }
        .describe {
          margin: 15px 0 30px 0;
          p {
            // padding-left: 150px;
            font-size: 12px;
            color: #999999;
          }
        }
        .idImgesBox {
          display: flex;
          justify-content: space-between;
          .idImgaeLeft {
            width: 50%;
          }
          .idImgaeRight {
            width: 50%;
            text-align: right;
          }
          /deep/ .el-upload-list--picture-card {
            width: 284px;
            height: 180px;
          }
          /deep/ .el-upload--picture-card {
            width: 284px;
            height: 180px;
            position: relative;
            .avatar {
              width: 100%;
              max-height: 178px;
            }
            .noImg {
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              right: 0;
              background: #F7F7F7;
              .bgBox {
                height: 149px;
                align-items: center;
                display: flex;
                justify-content: center;
              }
            }
            .bgInfo {
              color: #FFFFFF;
              font-size: 14px;
              height: 39px;
              line-height: 39px;
              background: #A0C1FF;
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
            }
            .changeImg {
              display: none;
              position: absolute;
              top: 40px;
              left: 112px;
              width: 60px;
              height: 60px;
              line-height: 60px;
              background: #000000;
              opacity: 0.6;
              border-radius: 50%;
              color: #FFFFFF;
            }
            .zoomImg {
              position: absolute;
              top: 40px;
              left: 50px;
              width: 60px;
              height: 60px;
              line-height: 60px;
              background: #000000;
              opacity: 0.6;
              border-radius: 50%;
              color: #FFFFFF;
            }
            &:hover {
              .changeImg {
                display: block;
              }
            }
          }
          /deep/ .el-upload-list--picture-card .el-upload-list__item {
            width: 284px;
            height: 180px;
          }
        }
        .businessDate {
          span {
            display: inline-block;
            text-align: center;
            width: 50px;
            color: #666666;
          }
          .el-date-editor--date {
            width: 268px;
          }
        }
        .idType {
          /deep/ .el-select {
            width: 100%;
          }
        }
      }
      .submitBtn {
        display: block;
        width: 750px;
        height: 50px;
        margin: 40px auto 0 auto;
        color: #FFEBC4;
        background: #333333;
        box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.2);
      }
    }
  }
  /deep/ .el-form-item__content {
    p {
      font-size: 12px;
      color: #999999;
      line-height: 20px;
      margin-top: 8px;
    }
    .el-input__inner,.el-textarea__inner{
      border-radius: 0;
      border: 1px solid transparent;
      color: #333;
      background: #F9F9F9;
      &:focus{
        border-color: #C5AA7B;
      }
    }
  }
}
.hide {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
.avatar-uploader {
  img {
    width: 100%;
  }
}
</style>