hemall.terabimsoft.com.cn/plugins/electricity-bill-pro/views/backend/widget/base/electricityBillPro.js

define({
  template: `
  <div>
    <el-form ref="auth">
      <div class="vue-main-title">
        <div class="vue-main-title-left"></div>
        <div class="vue-main-title-content">电费充值</div>
      </div>
      <div style="margin:0 auto;width:80%;">  
        <el-form-item label="电费充值">
          <el-radio v-model="form.electricity_bill_pro_goods.is_open" :label="1">开启</el-radio>
          <el-radio v-model="form.electricity_bill_pro_goods.is_open" :label="0">关闭</el-radio>
          <div class="form-item_tips">首次发布商品，先点击发布商品，再重新编辑商品，设置电费充值规格！</div>
        </el-form-item >     

        <el-form-item label="电费充值">
          <el-table :data="list" :span-method="objectSpanMethod" border>
            <el-table-column prop="charge_type" label="类型">
                <template slot-scope="scope">[[scope.row.charge_type == "0" ? '国网' : '南网']]</template>
            </el-table-column>
            <el-table-column prop="spec_value" label="面值"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="bingbird_goods_id" label="商品ID">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.bingbird_goods_id" @change="changeGoodsID(scope.$index,scope.row,$event)"></el-input>
                </template>
            </el-table-column>
          </el-table>
      </el-form-item >     
        
        <el-form-item label="自定义文案" label-width="113px">
          <template slot-scope="scope">
                <el-input v-model="form.electricity_bill_pro_goods.desc" type="textarea" style="padding-right:10px"></el-input>
          </template>
        </el-form-item>
        
        <el-form-item label="顶部banner图片" label-width="113px">
          <el-input v-model="form.electricity_bill_pro_goods.banner" style="width: 60%;">
            <template slot="append"><span @click="displaySelectMaterialPopup('thumb')">选择图片</span></template>
          </el-input>
        </el-form-item>
        <el-form-item label=" " label-width="113px">
          <div style="position: relative;" v-if="form.electricity_bill_pro_goods.banner">
            <img :src="form.electricity_bill_pro_goods.banner" style="width: 150px; height: 150px; border-radius: 5px; cursor: pointer;object-fit:cover;" />
            <i class="el-icon-close" style="position: absolute;margin-left: 10px;" @click="btnDelete"></i>
          </div>
          <div style="position: relative;" v-else>
<!--            <img src="" style="width: 150px; height: 150px; border-radius: 5px; cursor: pointer;object-fit:cover;" />-->
<!--            <i class="el-icon-close" style="position: absolute;margin-left: 10px;" @click="btnDelete"></i>-->
          </div>
          <div class="form-item_tips">建议尺寸: 640 * 640 ，或正方型图片</div>
        </el-form-item>
      </div>
    </el-form>
    <upload-multimedia-img
      :upload-show="showSelectMaterialPopup"
      :type="materialType"
      :name="formFieldName"
      selNum="one"
      @replace="showSelectMaterialPopup = !showSelectMaterialPopup"
      @sure="selectedMaterial"
    ></upload-multimedia-img>
  </div>
  `,
  style: `
  .moreCol .el-table thead{
    display:none
  }
  .moreCol .el-table--border, .el-table--group{
    border: none;
  }
  .el-table .cell{
    padding-right:0 !important;
  }
  .el-table th > .cell {
    text-align: center;
  }
  .el-table .cell {
    text-align: center;
  }   
  `,
  props: {
    form: {
      default() {
        return {};
      },
    },
    formKey: {
      type: String,
    },
  },
  delimiters: ['[[', ']]'],
  data() {
    return {
      showSelectMaterialPopup: false,
      materialType: "1",
      formFieldName: "",
      list: [],
      typeList:[],
    }
  },
  created() {
    if(this.form.options.length == 0){
      this.list = []
      return
    }
    this.list = this.form.options;
    this.objectSpanMethod = this.getRowspanMethod(this.list, ['charge_type']);
    for(let item of this.form.options){
      this.typeList.push(item.spec);
    }
  },
  methods: {
    validate() {
      return {
        desc:this.form.electricity_bill_pro_goods.desc,
        status:this.form.electricity_bill_pro_goods.is_open,
        banner:this.form.electricity_bill_pro_goods.banner,
        options:this.form.options
      }
    },
    displaySelectMaterialPopup(fieldName = "thumb", type = 1) {
      this.formFieldName = fieldName;
      this.showSelectMaterialPopup = !this.showSelectMaterialPopup;
      this.materialType = String(type);
    },
    selectedMaterial(name, image, imageUrl) {
      this.form.electricity_bill_pro_goods.banner = imageUrl[0].url
    },
    btnDelete(){
      this.form.electricity_bill_pro_goods.banner  = ""
    },

    getRowspanMethod(data, rowspanArray) {
      // 要合并列的数据
      const rowspanNumObject = {};
    
      //初始化 rowspanNumObject
      rowspanArray.map(item => {
        rowspanNumObject[item] = new Array(data.length).fill(1, 0, 1).fill(0, 1);
        rowspanNumObject[`${item}-index`] = 0;
      });
      //计算相关的合并信息
      for (let i = 1; i < data.length; i++) {
        rowspanArray.map(key => {
          const index = rowspanNumObject[`${key}-index`];
          if (data[i][key] === data[i - 1][key]) {
            rowspanNumObject[key][index]++;
          } else {
            rowspanNumObject[`${key}-index`] = i;
            rowspanNumObject[key][i] = 1;
          }
    
        });
      }
    
      //提供合并的方法并导出
      const spanMethod = function({ row, column, rowIndex, columnIndex }) {
        if (rowspanArray.includes(column['property'])) {
          const rowspan = rowspanNumObject[column['property']][rowIndex];
          if (rowspan > 0) {
            return { rowspan: rowspan, colspan: 1 }
          }
          return { rowspan: 0, colspan: 0 }
        }
        return { rowspan: 1, colspan: 1 }
      };
    
      return spanMethod;
    },
  },
});