oil-station/fuintAdmin/src/views/EventMarketing/storeOilBlock/index.vue

<template>
    <div class="app-container">
<!--      存油卡-->
      <el-card  style="margin-bottom: 20px">
        <el-radio-group v-model="queryParams.type" @input="radiovalue">
          <el-radio-button v-for="dict in dict.type.oil_type"
                           :key="dict.value"
                           :label="dict.label"
                           :value="dict.value"
          ></el-radio-button>
        </el-radio-group>

        <div class="top-sousuo">
          <el-select v-model="queryParams.oilType"  clearable placeholder="请选择">
            <el-option
              v-for="dict in oilList"
              :key="dict.id"
              :label="dict.oilName"
              :value="dict.id">
            </el-option>
          </el-select>
          <el-select v-model="queryParams.activeStatus" placeholder="请选择" style="margin:0px 20px">
            <el-option
              v-for="item in option"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" style="margin-left: 20px" icon="el-icon-search" @click="getlist">搜索</el-button>
        </div>
      </el-card>
      <el-card  style="margin-bottom: 20px">
        <el-button type="primary" icon="el-icon-plus"  style="margin-bottom: 10px " @click="addoilBlock()">新增锁价活动</el-button>
        <el-alert
          title="当前配置为锁价活动、锁价活动为充值后所得升数进行锁定,卡类型下每个油品最多可创建6个锁价充值活动"
          type="info"
          :closable="false">
        </el-alert>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="id"
            label="活动编号"
            width="110">
          </el-table-column>
          <el-table-column
            prop="type"
            label="油卡类型"
            width="140">
            <template slot-scope="scope">
              <el-tag>{{scope.row.type}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="oilType"
            label="油品"
            width="110">
          </el-table-column>
          <el-table-column
            prop="rechargeBalance"
            label="充值金额"
            width="110">
            <template slot-scope="scope">
              <el-tag>{{scope.row.rechargeBalance}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="lockupPrice"
            label="锁价单价"
            width="110">
            <template slot-scope="scope">
              <el-tag>{{scope.row.lockupPrice}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="incomeLitres"
            label="升数"
            width="110">
            <template slot-scope="scope">
              <el-tag>{{scope.row.incomeLitres}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="points"
            label="赠送积分"
            width="110">
            <template slot-scope="scope">
              <el-tag>{{scope.row.points}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="activeTime"
            label="活动时间"
            width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.activeTime == 1">不限时间</span>
              <span v-if="scope.row.activeTime == 2">自定义时间</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="activityProgress"
            label="活动进度"
            width="110">
            <template slot-scope="scope">
              <el-tag type="info"v-if="scope.row.activityProgress == 2">已结束</el-tag>
              <el-tag type="success" v-if="scope.row.activityProgress == 1">进行中</el-tag>
              <el-tag type="danger" v-if="scope.row.activityProgress == 0">待开始</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="activeStatus"
            label="状态"
            width="100">
            <template slot-scope="scope">

              <el-switch
                v-model="scope.row.activeStatus"
                active-value="1"
                inactive-value="2"
                active-color="#409EFF"
                inactive-color="#909399"
                @change="posteid(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="240"
            label="更新时间">
          </el-table-column>
          <el-table-column
            label="编辑"
            width="180">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>

            </template>

          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="pageNo"
          :limit.sync="pageSize"
          @pagination="getlist"
        />
      </el-card>

      <el-dialog
        title="囤油卡操作"
        :visible.sync="centerDialogVisible"
        width="36%"
        center>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">

            <el-form-item label="油品类型" prop="oilType">
              <el-select v-model="ruleForm.oilType" placeholder="请选择" >
                <el-option
                  v-for="dict in oilList"
                  :key="dict.id"
                  :label="dict.oilName"
                  :value="dict.id">
                </el-option>
              </el-select>

<!--              <el-radio-group v-model="ruleForm.oilType" >-->
<!--                <el-radio-->
<!--                  v-for="dict in oilList"-->
<!--                  :key="dict.id"-->
<!--                  :label="dict.oilName"-->
<!--                  :value="dict.id"-->
<!--                />-->
<!--              </el-radio-group>-->

            </el-form-item>

          <el-form-item label="锁价单价" prop="lockupPrice">
            <el-input v-model="ruleForm.lockupPrice" min="1">
              <template slot="append">元/升</template>
            </el-input>
          </el-form-item>
          <el-form-item label="充值金额" prop="rechargeBalance">
            <el-input v-model="ruleForm.rechargeBalance" min="1">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="所得升数" prop="incomeLitres">
            <el-input v-model="ruleForm.incomeLitres.toFixed(2)">
              <template slot="append">升</template>
            </el-input>
          </el-form-item>
          <el-form-item label="赠送积分" prop="points">
            <el-input v-model="ruleForm.points">
              <template slot="append">分</template>
            </el-input>
          </el-form-item>
          <el-form-item label="活动时间" prop="resource">
            <el-radio-group v-model="ruleForm.activeTime">
              <el-radio label="1">不限时间</el-radio>
              <el-radio label="2">自定义时间</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="时间范围" v-if="ruleForm.activeTime == 2" :label-width="formLabelWidth" prop="startTime">
            <div style="width: 100%;display: flex;align-items: center ">
              <div style="width: 45%">
                <el-date-picker
                  v-model="ruleForm.startTime"
                  type="datetime"
                  placeholder="开始日期">
                </el-date-picker>
              </div>
                <div style="width: 5%">
                  -
                </div>

              <div style="width: 45%">
                <el-date-picker
                  v-model="ruleForm.endTime"
                  type="datetime"
                  placeholder="结束日期">
                </el-date-picker>
              </div>


            </div>


          </el-form-item>
          <el-form-item label="活动状态" prop="resource">
            <el-radio-group v-model="ruleForm.activeStatus">
              <el-radio label="1">启用</el-radio>
              <el-radio label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
           <el-button type="primary" @click="postadd(ruleForm)">确 定</el-button>
        </span>
      </el-dialog>


    </div>
</template>

<script>
  import { getList,oilName,addList,eitList,getById} from "@/api/EventMarketing/oilBlock";
  export default {
    dicts: ['oil_type'],
    name: 'index',
    data(){
      return{
        value:'',
        type:0,
        centerDialogVisible:false,
        value1:'',
        total:0,
        pageNo:1,
        pageSize:10,
        option: [
          {
            value: '',
            label: '全部'
          },
          {
            value: '1',
            label: '正常'
          }, {
            value: '2',
            label: '禁用'
          },],
        tableData: [],
        oilList:[],
        ruleForm:{
          oilType:2,
          lockupPrice: 0 ,
          rechargeBalance:0,
          incomeLitres:0,
          points:'',
          status:'0',
          activeTime:'1',
          activeStatus:'0'
        },
        queryParams:{
          type:'柴油',
          oilType:'',
          activeStatus:'',
          pageNo:1,
          pageSize:10,
        },
        rules:{
          oilType: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          lockupPrice: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          rechargeBalance: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          incomeLitres: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
          points: [
            { required: true, message: '不能为空', trigger: 'blur' },
          ],
        }
      }

    },
    mounted() {
      this.getlist()
      this.radiovalue()
    },
    watch:{
      'ruleForm.rechargeBalance':{
        handler: function() {
          if(this.ruleForm.rechargeBalance != 0 && this.ruleForm.lockupPrice != 0 ){
            this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice

          }else {
            this.ruleForm.incomeLitres = 0
          }

        },
      },
      'ruleForm.lockupPrice':{
        handler: function() {

          if(this.ruleForm.rechargeBalance != 0 && this.ruleForm.lockupPrice != 0 ){
            this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice

          }else {
            this.ruleForm.incomeLitres = 0
          }
        },
      }
    },
    computed: {
      // 计算属性很重要的特性: 带缓存, 性能极强
      // 在第一次使用该属性时进行计算, 计算后将结果缓存起来, 后面如果还有其他地方用到, 会直接从缓存中取值, 不会再次计算
      // 如果依赖的数据更新, 也会重新计算, 然后重复上述操作
      totalCount () {
        console.log('我是 computed 里的求和属性')
        this.ruleForm.incomeLitres = this.ruleForm.rechargeBalance / this.ruleForm.lockupPrice
        return this.ruleForm.incomeLitres
      }
    },

    methods:{
      //
      radiovalue(){

        this.oilList = []
        oilName(this.queryParams.type).then(res=>{
          this.oilList = res.data.records
          console.log('我的油站' ,res)
        })
      },
      getlist(){
        this.queryParams.pageNo=this.pageNo
        this.queryParams.pageSize=this.pageSize
          getList(this.queryParams).then(res=>{
            if(res.code == 200){
              this.tableData = res.data.records
              this.total = res.data.total;
            }
          })

      },
      addoilBlock(){
        this.ruleForm = {
            type:this.queryParams.type,
            lockupPrice: 0 ,
            rechargeBalance:0,
            incomeLitres:0,

            points:'',
            activeTime:'1',
            activeStatus:'1',
            tatus:'1'
        },
          this.radiovalue()
        this.centerDialogVisible = true
      },
      posteid(data){
        eitList(data).then(res=>{
          if (res.code == 200){
            this.$message.success('修改成功')
          }
        })
      },
      postadd(formName){
        if( this.ruleForm.oilType =='' ||  this.ruleForm.lockupPrice =='' || this.ruleForm.rechargeBalance =='' || this.ruleForm.incomeLitres =='' || this.ruleForm.points =='' ){
          this.$message.error("必填项不能为空")
          return
        }
        this.ruleForm.type = this.queryParams.type
        this.ruleForm.status = '1'
        if( this.ruleForm.id ){
          console.log("修改")
          eitList(this.ruleForm).then(res=>{
            if (res.code == 200){
              this.$message.success('修改成功')
              this.getlist()
            }
          })
        }else{
          addList(this.ruleForm).then(res=>{
            if (res.code == 200){
              this.$message.success('新增成功')
              this.getlist()
            }
          })
        }

        this.centerDialogVisible = false
      },
      handleUpdate(data){
        getById(data.id).then(res=>{
          if (res.code == 200){
            this.ruleForm = res.data
            this.centerDialogVisible = true
          }
        })
      }

    }
  }
</script>

<style scoped>
  .top-sousuo{
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
</style>