oil-station/fuintAdmin/src/views/oilPrice/index.vue

<template>
  <div class="app-container">
    <el-card  style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <span>油价配置</span>
      </div>
      <el-button type="primary" @click="dialogFormVisible = true,oilTypeMethods()">新增油号</el-button>
      <div class="top-box">
        <!--              循环-->
        <div class="oil-box" v-for="(item,index) in oilNumberList " :key="index" >
          <div class="top-icon">
            <div>启用</div>
          </div>
          <div class="box-icon"><i class="el-icon-edit" style="color:#409EFF" @click="dialogFormNumberEdit = true, openOilNumberEdit(item),oilTypeMethods"></i></div>
          <div class="box-title"> {{item.oilType}} </div>
          <div class="between-box">
            <div>油站价:</div>
            <div><span class="jiacu">{{ item.oilPrice }}</span> /L</div>
          </div>
          <div class="between-box">
            <div>国标价:</div>
            <div> <span class="jiacu">{{ item.gbPrice }}</span> /L</div>
          </div>
          <div class="between-box">
            <div>最后更新时间:</div>
            <div> {{item.updateTime}} </div>
          </div>
        </div>
      </div>


    </el-card>
    <el-card  style="margin-bottom: 20px">
      <div slot="header" class="clearfix">
        <span>预设油价记录</span>
      </div>
      <el-button type="success" @click = "dialogFormPricesAdd = true, addOilPresePrices()">新增预设油价</el-button>
      <div class="table-box">
        <el-table
          :data="oilPresetPricesList"
          style="width: auto">
          <el-table-column
            prop="presetId"
            label="任务id"
            width="100">
          </el-table-column>
          <el-table-column
            prop="presetGbPrice"
            label="预设油号"
            >
          </el-table-column>
          <el-table-column label="当前数据" style="width: 100%">
            <el-table-column
              prop="currentPetrolPrices"
              label="油站价"
              >
            </el-table-column>
            <el-table-column
              prop="presetOilPrices"
              label="国标价"
              >
            </el-table-column>
          </el-table-column>
          <el-table-column label="预设新数据" style="width: 100%">
            <el-table-column
              prop="currentPetrolPrices"
              label="油站价"
              >
            </el-table-column>
            <el-table-column
              prop="presetGbPrice"
              label="国标价"
              >
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="effectiveTime"
            label="预设时间"
            >
          </el-table-column>
          <el-table-column
            prop="state"
            label="处理状态"
            >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
                移除
              </el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

    </el-card>

    <el-dialog title="添加" :visible.sync="dialogFormVisible">
      <el-form :model="oilNumber">
        <el-form-item label="油品类型">
          <el-radio-group v-model="oilNumber.oilType" @change="oilTypeClick()">
            <el-radio v-for="option in oilTypeList" :key="option.dictValue" :label="option.dictValue">
              {{ option.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="油品名称">
              <el-select v-model="oilNumber.oilName" placeholder="请选择油品名称">
<!--                <el-option v-for="option in oilNameList" :key="option.dictValue" :label="option.dictValue">-->
<!--                  {{ option.dictLabel }}-->
<!--                </el-option>-->
                  <el-option
                    v-for="option in oilNameList"
                    :key="option.dictCode"
                    :label="option.dictLabel"
                    :value="option.dictValue"
                  ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计价单位">
              <el-select v-model="oilNumber.receivingUnits" placeholder="请选择活动区域">
<!--                <el-option label="单位一" value="shanghai"></el-option>-->
<!--                <el-option label="单位二" value="beijing"></el-option>-->
                <el-option
                  v-for="option in receivingUnitList"
                  :key="option.dictCode"
                  :label="option.dictLabel"
                  :value="option.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
<!--        -->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="油品单价">
              <el-input v-model="oilNumber.oilPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国际价格">
              <el-input v-model="oilNumber.gbPrice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="收款单位">
          <el-radio-group v-model="oilNumber.receivingUnits">
            <el-radio label="元"></el-radio>
            <el-radio label="计价单位"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="hui-seiz">点击油品输入的计算单位、可默认元或计价单位(L/m³/kg),页面也可自行切换</div>
        <el-form-item label="状态">
          <el-radio-group v-model="oilNumber.state">
            <el-radio label="启用"></el-radio>
            <el-radio label="禁用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="oilNumber.num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="oilNumber.remark"></el-input>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,insertOilNumberin()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogFormNumberEdit">
      <el-form :model="oilNumber">
        <el-form-item label="油品类型">
          <el-radio-group v-model="oilNumber.oilType" @change="oilTypeClick()">
            <el-radio v-for="option in oilTypeList" :key="option.dictValue" :label="option.dictValue">
              {{ option.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="油品名称">
              <el-select v-model="oilNumber.oilName" placeholder="请选择油品名称">
                <!--                <el-option v-for="option in oilNameList" :key="option.dictValue" :label="option.dictValue">-->
                <!--                  {{ option.dictLabel }}-->
                <!--                </el-option>-->
                <el-option
                  v-for="option in oilNameList"
                  :key="option.dictCode"
                  :label="option.dictLabel"
                  :value="option.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计价单位">
              <el-select v-model="oilNumber.receivingUnits" placeholder="请选择活动区域">
                <!--                <el-option label="单位一" value="shanghai"></el-option>-->
                <!--                <el-option label="单位二" value="beijing"></el-option>-->
                <el-option
                  v-for="option in receivingUnitList"
                  :key="option.dictCode"
                  :label="option.dictLabel"
                  :value="option.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        -->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="油品单价">
              <el-input v-model="oilNumber.oilPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国际价格">
              <el-input v-model="oilNumber.gbPrice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="收款单位">
          <el-radio-group v-model="oilNumber.receivingUnits">
            <el-radio label="元"></el-radio>
            <el-radio label="计价单位"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="hui-seiz">点击油品输入的计算单位、可默认元或计价单位(L/m³/kg),页面也可自行切换</div>
        <el-form-item label="状态">
          <el-radio-group v-model="oilNumber.state">
            <el-radio label="启用"></el-radio>
            <el-radio label="禁用"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="oilNumber.num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="oilNumber.remark"></el-input>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormNumberEdit = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormNumberEdit = false,insertOilNumberin()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加预设" :visible.sync="dialogFormPricesAdd">
      <el-form :model="oilPresetPrices" label-width="100px">
        <el-form-item label="预设油号">
          <el-select v-model="oilPresetPrices.oilType" placeholder="请选择油号" @change="oilTypeClickByPrice()">
            <el-option
              v-for="option in selectOilTypeByPrice"
              :key="option.numberId"
              :label="option.numberId"
              :value="option.oilName"

            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前油站价">
          <el-input v-model="oilPresetPrices.currentGbPrice" style="width: 217px" readonly></el-input>
        </el-form-item>
        <el-form-item label="预设油站价">
              <el-input v-model="oilPresetPrices.presetOilPrices" style="width: 217px"></el-input>
            </el-form-item>
        <el-form-item label="当前国标价">
              <el-input v-model="oilPresetPrices.currentPetrolPrices" style="width: 217px"></el-input>
            </el-form-item>
        <el-form-item label="预设国标价">
              <el-input v-model="oilPresetPrices.presetGbPrice" style="width: 217px"></el-input>
            </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
            v-model="oilNumber.effectiveTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <div class="hui-seiz">点击油品输入的计算单位、可默认元或计价单位(L/m³/kg),页面也可自行切换</div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormPricesAdd = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormPricesAdd = false,insertOilNumberin()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>

import {getOilNumberList, dictSelect, insertOilNumber, updateOilNumber, getOilPresetList} from "@/api/oilPrice";

  export default {
    name: 'index',
    data() {
      return {
        oilNumberList: [],

        num: 1,
        dialogFormVisible: false, // 新增油价配置
        dialogFormNumberEdit: false, // 修改油价配置

        dialogFormPricesAdd: false, // 新增油价趋势

        oilTypeList: [], // 油品类型
        oilNameList: [], // 油品名称
        receivingUnitList: [], // 计价单位



        oilNumber:{
          oilType: '',
          oilName: '',
          oilPrice: '',
          gbPrice: '',
          receivingUnits: '',
          createTime: '',
          updateTime: '',
          state: '',
          sort: '',
          remark: '',
          ifDelete: '',
        },

        oilPresetPricesList:[],

        selectOilTypeByPrice: [],
        oilPresetPrices: {
          oilType:'',
          currentPetrolPrices:'',
          presetOilPrices:'',
          currentGbPrice:'',
          presetGbPrice:'',
          createTime:'',
          updateTime:',',
          effectiveTime:'',
          ifDelete:'',
        },




        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '100px'
      }
    },
    created() {
      this.getList();
      this.getOilPresetListin();
    },
    mounted() {
    },
    methods:{
      handleChange(value) {
        console.log(value);
      },

      getList() {
        var this_ = this
        getOilNumberList().then( response => {
          this_.oilNumberList = response.data.records
          // for (const record of response.data.records) {
          //   console.log("response", record);
          //   this_.oilNumberList.push(record);
          // }
        });
      },

      oilTypeMethods() {
        // 获取油价类型
        this.getOilTypeList("oil_type")

        // 获取计价的范围
        this.getOilTypeList("pricingUnit")

      },
      oilTypeClick() {
        const selectedValue = this.oilNumber.oilType;
        this.getOilTypeList(selectedValue)
      },

      // 打开修改窗口
      openOilNumberEdit(item) {
        console.log("hellopllolloloo",item)
        this.oilNumber = item
      },

      // 添加
      insertOilNumberin(){
        insertOilNumber(this.oilNumber).then( response => {
          var list = response.data
          console.log("updateOilNumber",list)
        });
      },
      // 修改
      updateOilNumberin(){
        updateOilNumber(data).then( response => {
          var list = response.data

          console.log("updateOilNumber",list)
        });
      },

      getOilTypeList(data) {
        var this_ = this
        dictSelect(data).then( response => {
          var list = response.data
          if (data == "oil_type") {
            this_.oilTypeList = list;
          }else if (data == "pricingUnit"){ //获取几家单位
            this_.receivingUnitList = list;
          }else {
            this_.oilNameList = list;
          }
          console.log("this_.oilTypeList",this_.oilTypeList)
        });
      },


      // 油价预设

      // 油价预设查询列表
      getOilPresetListin() {
        var this_=this
        getOilPresetList().then( response => {
          var list = response.data.records
          this_.oilPresetPricesList = list
          console.log("this_.listlistlistlistlistlistlist",this_.oilPresetPricesList)
        });
      },


      // 新增油价预设
      addOilPresePrices() {
        this.selectOilTypeByPrice = this.oilNumberList;
        console.log("this.selectOilTypeByPrice",this.selectOilTypeByPrice);
        console.log("this.oilNumberList",this.oilNumberList);
      },

      // 新增油价预设
      oilTypeClickByPrice() {
        console.log("hello-worldqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq",oilNumberList)
        this.selectOilTypeByPrice = this.oilNumberList;
      }
    }
  }
</script>

<style scoped>
  .app-container{
    width: 100%;

    background: #f6f8f9;
  }
  .top-box{
    width: 100%;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .oil-box{
    width: 24%;
    box-sizing: border-box;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-right: 15px;
    margin-top: 10px;
    font-size: 14px;
    position: relative;
    overflow: hidden;

  }
  .between-box{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px auto;
  }
  .box-icon{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
  }
  .box-title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
  }
  .jiacu{
    font-weight: bold;
  }
  .top-icon{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #e1ecfc;
    padding: 3px 7px;
    color: #409eff;
    font-size: 13px;
    border-bottom-right-radius: 6px;
  }
  .table-box{
    width: 100%;
    margin: 20px auto;
  }
  .hui-seiz{
    margin-left:60px;
  }
</style>