web-base-admin/src/views/marketing/benefitsGift/directUpdata.vue

<template>
  <div class="">

    <div class="tit">权益赠送</div>
    <div class="xian" />
    <div class="table">
      <!-- 批量操作 -->
      <table>
        <tr>
          <th
            colspan="1"
            class="tableLeft"
          >
            <el-button
              type="primary"
              size="mini"
              @click="addNewGoods"
            >{{ '添加' }}
            </el-button>
          </th>
        </tr>
      </table>
      <table class="table_b">
        <tr style="border-top:0">
          <td style="border:0" />
          <!-- <td colspan="2">{{ '结算等级' }}</td> -->
          <td
            colspan="6"
            style="padding-bottom:0"
          >
            <div class="tableFlex">
              <!-- <div class="tableFlex_i">结算等级</div> -->
              <div class="tableFlex_i">会员点位</div>
              <div class="tableFlex_i">达标等级</div>
              <div class="tableFlex_i">赠送权益</div>
            </div>
          </td>
        </tr>
        <tr
          v-for="item,index in agbrList"
          :key="index"
        >
          <td style="border:0" />
          <!-- <td colspan="2"
              style="padding-bottom:0">
            <div class="tableFlex">
              <div class="tableFlex_i">
                <el-select v-model="item.pkGrade"
                           size="medium"
                           :placeholder="'结算等级'">
                  <el-option v-for="item in gradeList"
                             :key="item.pkId"
                             :label="item.gradeName"
                             :value="item.pkId">
                  </el-option>
                </el-select>
              </div>
            </div>
          </td> -->
          <td
            colspan="6"
            style="padding-bottom:0"
          >
            <div class="tableFlex">

              <!-- <div class="tableFlex_i">
                <el-select v-model="item.pkGrade"
                           size="medium"
                           placeholder="结算等级">
                  <el-option v-for="item in gradeList"
                             :key="item.pkId"
                             :label="item.gradeName"
                             :value="item.pkId">
                  </el-option>
                </el-select>
              </div> -->
              <div class="tableFlex_i">
                <!-- <el-select v-model="item.pkRecommendGrade"
                           size="medium"
                           :placeholder="'推荐等级'">
                  <el-option v-for="item in gradeList"
                             :key="item.pkId"
                             :label="item.gradeName"
                             :value="item.pkId">
                  </el-option>
                </el-select> -->
                <el-input
                  v-model="item.memberPoint"
                  placeholder="会员点位"
                  size="medium"
                />
              </div>
              <div class="tableFlex_i">
                <el-select
                  v-model="item.grade"
                  size="medium"
                >
                  <el-option
                    v-for="item in gradeList"
                    :key="item.pkId"
                    :label="item.gradeName"
                    :value="item.pkId"
                  />
                </el-select>
              </div>
              <div class="tableFlex_i">
                <el-select
                  v-model="item.legalRight"
                  size="medium"
                  placeholder="赠送权益"
                >
                  <el-option
                    v-for="item in registerist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </td>

        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/giftGoods.js'
import topBar from '@/components/topBar'
import ImageUpload from '@/components/ImageUpload'
export default {
  components: {
    topBar,
    ImageUpload
  },
  data() {
    return {
      ggVisible: false,
      allData: [], // 全部数据
      registerist: [],
      gradeList: [],
      agbrList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getPage(allData) {
      if (allData != '') {
        allData.forEach(item => {
          if (!item.giftConfigList) {
            item.giftConfigList = []
          }
        })
        this.agbrList = allData
      }
    },
    getData() {
      api.gradeList().then((res) => {
        this.gradeList = res.rows
      })
      api.registerPowerState().then((res) => {
        this.registerist = res.data
      })
    },
    addNewGoods() {
      this.agbrList.push({
        pkGrade: '',
        grade: '',
        memberPoint: '',
        legalRight: ''
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
// .page {
//   padding: 20px;
//   background: #f9f9f9;
//   font-size: 14px;
.main_a {
  // height: calc(100vh - 124px);
  // display: flex;
  // flex-direction: column;
  // height: calc(100vh - 164px);
  // height: 100%;
}
.main {
  background: #ffffff;
  border-radius: 8px;
  height: calc(100vh - 164px);
  padding-bottom: 20px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
}
::v-deep .el-select {
  width: 100%;
}
// }
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.tit {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  padding: 0 20px;
  border-left: 5px solid #c8161d;
  margin: 20px 0 10px 0;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.demo-ruleForm {
  padding: 20px 0;
}
::v-deep .el-date-editor--datetimerange {
  width: auto !important;
}
.flexed {
  display: flex;
}
.flexed_l {
  margin-right: 20px;
}
.table {
  padding: 0 20px;
  margin-top: 1px;
}

table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;
  //   合并内外边距
  // (去除表格单元格默认的2个像素内外边距*/
}
.table_b {
  border-top: 0;
}
th {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  overflow: hidden;
  border-top: 0;
}
td {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  border-top: 0;
  overflow: hidden;
}
.tableFlex {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .tableFlex_i {
    flex: 1;
    ::v-deep .el-input__inner {
      width: 90%;
    }
    ::v-deep .el-input__suffix {
      right: 15px;
    }
  }
}
.tableAdd {
  width: 50px;
  img {
    width: 19px;
    height: 19px;
  }
}
.tableAddPro {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 19px;
    height: 19px;
    margin-left: 10px;
  }
}
.tableLeft {
  text-align: left;
}
.tabList {
  display: flex;
  align-items: center;
  padding: 20px 0px 0 20px;
  .tabList_i {
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
  }
  .tabAct {
    background: #108ee9;
    color: #fff;
  }
}
.clearBtm {
  border-bottom: 0;
}
.cpHeight {
  height: 50vh;
  overflow-y: auto;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-input__icon{
  line-height: 33px;
}
::v-deep .el-button{
  margin-top: 0;
}
</style>