hemall.terabimsoft.com.cn/plugins/package-deliver/views/widget/industry/selfMention.js

define({
  name: "selfMention",
  template: `
    <div id="selfMention">
      <el-form label-width="15%" >
        <div id="vue_head">
          <div class="base_set">
            <div class="vue-main-title">
                <div class="vue-main-title-left"></div>
                <div class="vue-main-title-content">{{form.set.plugin_name}}</div>
            </div>
            <div class="vue-main-form">
              <el-form-item label="独立规则">
                <el-checkbox v-model="form.item.has_independent" :true-label="1" :false-label="0">启用独立佣金比例</el-checkbox>
                <div class="tip">启用独立分红金额设置，此商品拥有独立的分红金额，不受默认设置限制</div>
              </el-form-item>
              <el-form-item label="独立分红金额">
                <div style="display:flex">
                  <el-input v-model="form.item.ratio" style="width:30%;" :min="0" oninput="if(value<0)value=0" type="number">
                    <template slot="append">% 固定</template>
                  </el-input>
                  <el-input v-model="form.item.amount" style="width:30%;" :min="0" oninput="if(value<0)value=0" type="number">
                    <template slot="append">元</template>
                  </el-input>
                </div>
                <div class="tip">如果比例为空或等于0，则使用固定规则，如果都为空或等于0则使用默认规则</div>
              </el-form-item>
              <el-form-item label="自提点分配">
                <el-radio v-model="form.item.assign" :label="0">全部</el-radio>
                <el-radio v-model="form.item.assign" :label="1">指定自提点</el-radio>
              </el-form-item>
              <el-form-item label="选择自提点" required v-if="form.item.assign == 1">
                <el-button type="success" @click="choose_goods_show = true">点击搜索</el-button>
                <div class="tip">库存为空时，则不限制走商品库存;有设置库存则走自提点库存，库存为0时前端不显示该提点</div>
              </el-form-item>
              <el-form-item label=" " v-if="form.item.assign == 1">
                <div v-for="(item,index) in form.item.deliverAssign" :key="index" class="deliverAssign">
                  <el-input v-model="item.has_one_deliver.deliver_name" style="width:30%;" disabled></el-input>
                  <div class="stock_sum"><span class="stock_sum_append">库存</span><el-input v-model="item.stock_sum" style="width:30%;"></el-input><i class="el-icon-delete" @click="delStock(index,item.package_deliver_id)"></i></div>
                </div>
              </el-form-item>
            </div>
          </div>
        </div>
      </el-form>

            <!-- 选择图片弹窗 -->
            <el-dialog :visible.sync="choose_goods_show" width="60%" left title="选择自提点">
          <div>
              <div class="search_line">
                  <el-input style="width:90%" placeholder="" v-model="keyword"></el-input>
                  <el-button @click="searchData">搜索</el-button>
              </div>
              <el-table :data="goodsData" style="width: 100%;height:500px;overflow:auto" v-loading="loading">
                  <el-table-column label=" " align="" >
                      <template slot-scope="scope">
                          <div style="display:flex;">
                              <span class="nickname_card">{{scope.row.deliver_name}} [ {{scope.row.id}} ]</span>
                          </div>
                      </template>
                  </el-table-column>
                  <el-table-column label="" align="center">
                      <template slot-scope="scope">
                          <span  style="color:#399fbd" @click="btnSelect(scope.row)" onmouseover="this.style.cursor='pointer'">
                              选择
                          </span>
                      </template>
                  </el-table-column>
              </el-table>
          </div>
          <span slot="footer" class="dialog-footer">
              <el-button @click="choose_goods_show = false">取 消</el-button>
          </span>
      </el-dialog>
    </div>
  `,
  data(){
    return {
      choose_goods_show:false,
      goodsData:[],
      loading:false,
      keyword:""
    }
  },
  mounted(){
    console.log(this.form,'d')

  },
  methods: {
    searchData(){
      this.loading = true
      this.$http.post(this.http_url +'plugin.package-deliver.admin.goods-widget.get-search-deliver',{
        keyword:this.keyword,
        is_ajax:1,
        goods_id:this.form.item.goods_id
      }).then(response => {
        if(response.data.result==1){
          this.$message({
              message: response.data.msg,
              type: 'success'
          });
          this.loading = false
          this.goodsData = response.data.data
        }
        else{
          this.$message.error(response.data);
        }
      }),function(res){
        console.log(res);
      };
    },
    btnSelect(data){
      this.form.item.deliverAssign.push({
        package_deliver_id:data.id,
        has_one_deliver:{
          deliver_name:data.deliver_name
        },
        stock_sum:""
      })
      this.form.item.deliverAssign = this.form.item.deliverAssign.filter((value,index,array)=>{
        //根据自己的条件进行过滤
          return array.findIndex(item=>item.package_deliver_id === value.package_deliver_id) === index
        })
      this.choose_goods_show = false
    },
    delStock(index,deliver_id){
      this.$http.post(this.http_url +'plugin.package-deliver.admin.goods-widget.del-deliver',{
        deliver_id,
        goods_id:this.form.item.goods_id ? this.form.item.goods_id : ""
      }).then(response => {
        if(response.data.result==1){
          this.$message({
              message: response.data.msg,
              type: 'success'
          });
          this.form.item.deliverAssign.splice(index,1)
        }
        else{
          this.$message.error(response.data);
        }
      }),function(res){
        console.log(res);
      };
    },
    validate(){
      let deliverAssign = JSON.parse(JSON.stringify(this.form.item.deliverAssign))
      deliverAssign.forEach(element => {
        delete element.has_one_deliver
      });
      if(this.form.item.assign == 0 ){
        deliverAssign = [] 
      }
      if(this.form.item.assign == 1 && deliverAssign.length == 0){
        this.$message.error("请选择自提点");
        return false
      }else{
        return {
          has_independent:this.form.item.has_independent,
          ratio:this.form.item.ratio,
          amount:this.form.item.amount,
          assign:this.form.item.assign,
          plugin_name:this.form.item.plugin_name,
          deliverAssign
        }
      }
    }
  },
  style: `
  .deliverAssign{
    margin-bottom: 20px;
    display: flex;
  }
  .deliverAssign .el-input{
    margin-right: 20px;
  }
  .stock_sum{
    width:100%;
    display:flex;
    align-items: center;
  }
  .stock_sum_append{
    background-color: #F5F7FA;
    color: #909399;
    vertical-align: middle;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 20px;
    white-space: nowrap;
  }
  #selfMention input::-webkit-outer-spin-button,
  #selfMention input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  #selfMention input[type="number"] {
    -moz-appearance: textfield;
  }
  `,
  props: {
    form: {
      // type: Object,
      default() {
        return {}
      }
    },
    http_url:{
      type:String,
      default() {
        return "";
      },
    }
  }
})