hemall.terabimsoft.com.cn/plugins/appointment/views/widget/base/appointment.js

define({
  template: `
  <div id="appointment">
    <el-form label-width="15%" >
      <div id="vue_head">
        <div class="vue-main-title">
          <div class="vue-main-title-left"></div>
          <div class="vue-main-title-content">预约{{lang_set.project}}</div>
        </div>
        <div class="vue-main-form">
        <div style="margin:0 auto;width:80%;">
          <div v-for="(item,index) in bookingItems" :key="index" class="item-card">
            <i class="el-icon-close" @click="delItem(index)"></i>
            <el-form-item :label="'选择'+lang_set.project" label-width="150px" required  style="width:60%">
              <el-select v-model="item.project_id" filterable placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in projects"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                  >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预约次数" label-width="150px" required style="width:60%">
              <el-input v-model="item.service_count"></el-input>
            </el-form-item>
            <el-form-item label="门店分润 (元)" label-width="150px" style="width:60%">
              <el-input v-model="item.price"></el-input>
            </el-form-item>
            <el-form-item :label="lang_set.worker+'分润 (元)'" label-width="150px" style="width:60%">
              <el-input v-model="item.worker_commission"></el-input>
            </el-form-item>
            <el-form-item label="招商员分润 (元)" label-width="150px" style="width:60%">
              <el-input v-model="item.merchant_staff_commission"></el-input>
            </el-form-item>
            <div v-if="area_set">
             <el-form-item label="区域代理分红" prop="area_set" label-width="150px" style="width:60%">
                        <el-radio v-model="item.area_set" :label="0" >关闭</el-radio>
                        <el-radio v-model="item.area_set" :label="1" >开启</el-radio>
                        <div class="form-item_tips">开启后预约项目完成给被预约门店所在区域的区域代理进行分红<br>选择固定金额:分红金额=区域代理分润金额/预约次数*区域代理分红比例<br>选择订单实付金额:分红金额=订单实付金额/预约次数*区域代理分红比例</div>
             </el-form-item>
             <div v-if="item.area_set == 1 && area_basic == 1">
             <el-form-item label="省 (元)" label-width="150px" style="width:60%">
              <el-input v-model="item.province"></el-input>
            </el-form-item>
            <el-form-item label="市 (元)" label-width="150px" style="width:60%">
              <el-input v-model="item.city"></el-input>
            </el-form-item>
            <el-form-item label="区/县 (元)" label-width="150px" style="width:60%">
              <el-input v-model="item.district"></el-input>
            </el-form-item>
            <el-form-item label="乡镇/街道 (元)" label-width="150px" style="width:60%">
              <el-input v-model="item.street"></el-input>
            </el-form-item>
            </div>
            </div>
          </div>
          </div>
          <el-form-item label=" " style="width:60%">
            <el-button type="primary" plain icon="el-icon-plus" @click="addItems">添加{{lang_set.project}}</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
  `,
  style: `
    .item-card{
      border: 1px solid #b4bccc;
      padding-top: 20px;
      margin-bottom: 20px;
    }
    #appointment .el-icon-close{
      margin-left: 20px;
      font-weight: bold;
      font-size: 20px;
      color:#EE3939;
    }
  `,
  props: {
    form: {
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      lang_set:{},
        area_set:'',
        area_basic:'',
      projects: [],
      bookingItems:[{
        id:"",
        project_id:"",
        service_count:"",
        price:"",
        worker_commission:"",
        merchant_staff_commission:"",
          area_set:0,
          province:"",
          city:"",
          district:"",
          street:"",
      }]
    };
  },
  created() {
      this.lang_set = this.form.lang_set;
      this.area_set = this.form.area_set;
      this.area_basic = this.form.area_basic;
      if(JSON.stringify(this.form.item) !== '[]') {
          this.bookingItems = this.form.item;
      }
      if(JSON.stringify(this.form.projects) !== '[]') {
          this.projects = this.form.projects;
      }
  },
  methods: {
    addItems(){
      this.bookingItems.push({
          id:"",
          project_id: "",
          service_count: "",
          price: "",
          worker_commission: "",
          area_set: 0,
          province: "",
          city: "",
          district: "",
          street: "",
          merchant_staff_commission: "",
      })
    },
    delItem(index){
      this.bookingItems.splice(index,1)
    },
    validate() {

      let error_status = false;
        this.bookingItems.forEach(item => {
           if (!item.project_id ) {
               this.$message({message: '请选择'+ this.lang_set.project, type: 'warning'});
               error_status = true;
               return false;
           }

           if (!item.service_count) {
               this.$message({message: '请输入预约次数', type: 'warning'});
               error_status = true;
               return false;
           }
        });

        if (error_status) {
          return false;
        }

        return this.bookingItems;
    },
  },
});