hemall.terabimsoft.com.cn/plugins/reserve-simple/views/admin/widget/base/reserveSimple.js

define({
    template: `
  <div id="store_projects">
    <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">分时预约规格</div>
        </div>
      </div>
      <div>
        更换服务后，排序/预约对象/规格会清空，需要重新选择，请先确认好选择的服务，避免重复操作。<br>
        商品启用规格，以下的规格项必选。
      </div>
      <div class="vue-main-form">
        <div style="margin:0 auto;width:100%;">
          
            <el-form label-width="150">
                <el-form-item :label="'选择'+lang_set.service" prop="goods_service_id">
                    <el-select v-model="goods_service_id" filterable placeholder="请选择" @change="cahangeService">
                        <el-option
                          v-for="item in services"
                          :key="item.id"
                          :label="item.title"
                          :value="item.id"
                          >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>  
            <el-table :data="bookingItems" style="width: 100%">
                <el-table-column label="排序" align="center" prop="display_order" width="100">
                    <template slot-scope="scope">
                        <div>
                            <el-input v-model="scope.row.display_order"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="预约对象" align="center" prop="obj_id">
                    <template slot-scope="scope">
                        <div>
                            <el-select v-model="scope.row.obj_id" filterable placeholder="请选择">
                                <el-option
                                  v-for="item in obj_list"
                                  :key="item.id"
                                  :label="item.name"
                                  :value="item.id"
                                  >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                 <el-table-column label="规格" align="center" prop="goods_option_id">
                    <template slot-scope="scope">
                        <div>
                            <el-select v-model="scope.row.goods_option_id" filterable clearable placeholder="请选择">
                                <el-option
                                  v-for="item in goods_options"
                                  :key="item.id"
                                  :label="item.title"
                                  :value="item.id"
                                  >
                                </el-option>
                            </el-select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-button icon="el-icon-delete" @click="delItem(scope.$index)"></el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
          <div style="margin-top: 20px">
            <el-button icon="el-icon-plus" @click="addItems">添加</el-button>
          </div>
        </div>
      </div>
    </el-form>
  </div>
  `,
    style: `
    .item-card{
      border: 1px solid #b4bccc;
      padding-top: 20px;
      margin-bottom: 20px;
    }
    #store_projects .el-icon-close{
      margin-left: 20px;
      font-weight: bold;
      font-size: 20px;
      color:#EE3939;
    }
  `,
    props: {
        form: {
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            lang_set:{},
            services: [],
            bookingItems:[{
                id:"",
                display_order:"",
                obj_id:"",
                service_id:"",
                goods_option_id:"",
                // merchant_staff_commission:""
            }],
            get_objs_url:'',
            goods_options:[],
            goods_service_id:'',
            obj_list:[],
        };
    },
    created() {
        this.lang_set = this.form.lang_set;

        if(this.form.item && this.form.item.length>0) {
            this.bookingItems = this.form.item;
            if(this.bookingItems.length>0 && this.bookingItems[0]['service_id']){
                this.goods_service_id = this.bookingItems[0]['service_id'];
                this.getObjs();
            }
        }
        if(this.form.services && this.form.services.length>0) {
            this.services = this.form.services;
        }
        if(this.form.goods_options && this.form.goods_options.length>0){
            this.goods_options = this.form.goods_options;
        }
    },
    methods: {
        initItems(){
            this.bookingItems = [{
                id:"",
                display_order:"",
                obj_id:"",
                goods_option_id:"",
                service_id:""
                // merchant_staff_commission:""
            }]
        },
        addItems(){
            this.bookingItems.push({
                id:"",
                display_order:"",
                obj_id:"",
                goods_option_id:"",
                service_id:""
                // merchant_staff_commission:""
            })
        },
        delItem(index){
            this.bookingItems.splice(index,1)
        },
        validate() {

            let error_status = false;
            /*if(this.bookingItems.length<1){
                this.$message({message: '请选择', type: 'warning'});
                error_status = true;
                return false;
            }*/
            for (let i=0;i<this.bookingItems.length;i++){
                this.bookingItems[i]['service_id'] = this.goods_service_id;
            }
            this.bookingItems.forEach(item => {
                if (!item.service_id ) {
                    this.$message({message: '请选择'+ this.lang_set.service, type: 'warning'});
                    error_status = true;
                    return false;
                }

                if (!item.obj_id) {
                    this.$message({message: '请选择'+ this.lang_set.reserve_obj, type: 'warning'});
                    error_status = true;
                    return false;
                }
                if(this.form.goods_has_option){
                    if (!item.goods_option_id) {
                        this.$message({message: '启用商品规格的商品必须选择规格', type: 'warning'});
                        error_status = true;
                        return false;
                    }
                }
            });

            if (error_status) {
                return false;
            }
            return this.bookingItems;
        },
        cahangeService(){
            this.getObjs();
            this.initItems();
        },
        getObjs() {
            this.$http.post(this.form.get_objs_url,{service_id:this.goods_service_id}).then(function (response) {
                    if (response.data.result) {
                        this.obj_list = response.data.data;
                    }
                    else{
                        this.$message({type: 'error',message: response.data.msg});
                    }
                },function (response) {
                    this.$message({type: 'error',message: response.data.msg});
                }
            );
        },
    },
});