oil-station/fuintAdmin/src/views/oilConfig/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="oilTypeMethods(1)">新增油号</el-button>
      <div class="top-box">
        <!--              循环-->
        <div class="oil-box" :style=" 'background:'+ colorList[index] " v-for="(item,index) in oilNumberList " :key="index" >
          <div v-if="item.state == '启用'" class="top-icon">
            <div>{{item.state}}</div>
          </div>
          <div v-if="item.state == '禁用'" class="top-icon2">
            <div>{{item.state}}</div>
          </div>
          <div class="box-icon"><i class="el-icon-edit" style="color:#409EFF" @click="dialogFormNumberEdit = true,oilTypeMethods(),openOilNumberEdit(item)"></i></div>
          <div class="box-title"> {{item.allOil}} </div>
          <div class="between-box">
            <div>油站价:</div>
            <div><span class="jiacu">{{ item.oilPrice }}</span>元/{{item.unit}}</div>
          </div>
          <div class="between-box">
            <div>国标价:</div>
            <div> <span class="jiacu">{{ item.gbPrice }}</span>元/{{item.unit}}</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
            type="index"
            label="序号"
            align="center"
            width="100">
          </el-table-column>
<!--          prop="presetGbPrice"-->

          <el-table-column
            prop="oilNameT"
            align="center"
            label="预设油号"
            >
          </el-table-column>
          <el-table-column label="当前数据" style="width: 100%" align="center"
          >
            <el-table-column
              prop="currentPetrolPrices"
              align="center"
              label="油站价"
              >
            </el-table-column>
            <el-table-column
              prop="currentGbPrice"
              align="center"
              label="国标价"
              >
            </el-table-column>
          </el-table-column>
          <el-table-column label="预设新数据" style="width: 100%"    align="center"
          >
            <el-table-column
              prop="presetOilPrices"
              align="center"
              label="油站价"
              >
            </el-table-column>
            <el-table-column
              prop="presetGbPrice"
              align="center"
              label="国标价"
              >
            </el-table-column>
          </el-table-column>
          <el-table-column
            prop="effectiveTime"
            align="center"
            label="预设时间"
            >
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="state"-->
<!--            label="处理状态"-->
<!--            >-->

            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
<!--                <dict-tag :options="dict.type.jobState" :value="scope.row.state"/>-->
                <el-tag v-if="scope.row.state == 'occur'" type="success">已生效</el-tag>
                <el-tag v-else-if="scope.row.state == 'wait'">等待中</el-tag>
                <el-tag v-else type="info">已失效</el-tag>
              </template>
            </el-table-column>
          <el-table-column
            prop="createTime"
            align="center"
            label="创建时间"
            >
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button v-if="scope.row.state == 'wait'"
                @click.native.prevent="deleteRow(scope.$index, scope.row)"
                type="text"
                size="small">
                停止
              </el-button>
              <span v-else> -- </span>
            </template>
          </el-table-column>

        </el-table>
      </div>

    </el-card>

    <el-dialog title="添加" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form ref="oilNumberF" :model="oilNumber" :rules="rules">
        <el-form-item label="油品类型" prop="oilType" label-width="130px">
          <el-radio-group v-model="oilNumber.oilType" @change="oilTypeClick(oilNumber),oilTypeClick2()">
            <el-radio
              v-for="dict in dict.type.oil_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-radio-group>
        </el-form-item>
        <!--            <el-radio v-for="option in oilTypeList" :key="option.dictValue" :label="option.dictValue">-->
        <!--              {{ option.dictLabel }}-->
        <!--            </el-radio>-->

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="油品名称" prop="oilName" label-width="130px">
              <el-select v-model="oilNumber.oilName" style="width: 217px" placeholder="请选择油品名称"  @change="getSecondName()">
                  <el-option
                    v-for="option in oilNameList"
                    :key="option.id"
                    :label="option.oilName"
                    :value="option.id"
                  ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计价单位" prop="unit" label-width="130px">
              <el-select v-model="oilNumber.unit" style="width: 217px"
                         placeholder="请选择计价单位">
                <el-option
                  v-for="option in receivingUnitList"
                  :key="option.value"
                  :label="option.label"
                  :value="option.label"
                  :disabled="option.dis"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="当前油品售出价" prop="oilPrice" label-width="130px">
              <el-input v-model="oilNumber.oilPrice" pattern="^\d+(\.\d+)?$" style="width: 217px">
                <template slot="append">元{{oilNumber.unit?"/"+oilNumber.unit:''}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前国标价格" prop="gbPrice" label-width="130px">
              <el-input v-model="oilNumber.gbPrice" pattern="^\d+(\.\d+)?$" style="width: 217px">
                <template slot="append">元{{oilNumber.unit?"/"+oilNumber.unit:''}}</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-form-item label="收款单位" prop="receivingUnits">-->
<!--          <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="状态" prop="state" label-width="130px">
          <el-radio-group v-model="oilNumber.state">
            <el-radio
              v-for="dict in dict.type.zhzt"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" label-width="130px">
          <el-input-number v-model="oilNumber.sort" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" label-width="130px">
          <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="insertOilNumberin()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialogFormNumberEdit" :close-on-click-modal="false">
      <el-form ref="form" :model="oilNumber" :rules="rules">
        <el-form-item label="油品类型" prop="oilType">
          <el-radio-group v-model="oilNumber.oilType" @change="oilTypeClick(oilNumber.oilType),oilTypeClick2()">
            <el-radio
              v-for="dict in dict.type.oil_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-radio-group>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="油品名称" prop="oilName">
              <el-select v-model="oilNumber.oilNameT" style="width: 217px" placeholder="请选择油品名称" @change="changeOilName">
                <el-option
                  v-for="option in oilNameList"
                  :key="option.id"
                  :label="option.oilName"
                  :value="option.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计价单位" prop="unit">
              <el-select v-model="oilNumber.unit" style="width: 217px" placeholder="请选择活动区域">
                <el-option
                  v-for="option in receivingUnitList"
                  :key="option.value"
                  :label="option.label"
                  :value="option.label"
                  :disabled="option.dis"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--        -->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="当前油品售出价" prop="oilPrice">
              <el-input v-model="oilNumber.oilPrice" pattern="^\d+(\.\d+)?$" style="width: 217px">
                <template slot="append">元{{oilNumber.unit?"/"+oilNumber.unit:''}}</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="当前国标价" prop="gbPrice">
              <el-input v-model="oilNumber.gbPrice" pattern="^\d+(\.\d+)?$" style="width: 217px">
                <template slot="append">元{{oilNumber.unit?"/"+oilNumber.unit:''}}</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-form-item label="收款单位" prop="receivingUnits">-->
<!--          <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-row :gutter="24">

          <el-col :span="12">

            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="oilNumber.state">
                <el-radio
                  v-for="dict in dict.type.zhzt"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
    <!--            <el-radio label="启用"></el-radio>-->
    <!--            <el-radio label="禁用"></el-radio>-->
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">

          <el-col :span="12">
        <el-form-item label="排序">
          <el-input-number v-model="oilNumber.sort" controls-position="right" @change="handleChange" :min="1" :max="10" style="width: 217px"></el-input-number>
        </el-form-item>
          </el-col>
        </el-row>
        <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=" updateOilNumberin()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加预设" :visible.sync="dialogFormPricesAdd" width="500px" :close-on-click-modal="false">
      <el-form ref="priForm" :model="oilPresetPrices" label-width="100px" :rules="oilPresetPricesRules">
        <el-form-item label="预设油号" prop="numberId"  label-width="120px">
          <el-select v-model="oilPresetPrices.numberId" placeholder="请选择油号" @change="oilTypeClickByPrice()">
            <el-option
              v-for="option in selectOilTypeByPrice"
              :key="option.numberId"
              :label="option.oilType +' '+option.oilName"
              :value="option.numberId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前油品售出价" label-width="120px">
          <el-input v-model="oilPresetPrices.currentPetrolPrices " style="width: 217px" readonly disabled>
            <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
          </el-input>
        </el-form-item>
        <el-form-item label="预设油站售出价" prop="presetOilPrices" label-width="120px">
              <el-input v-model="oilPresetPrices.presetOilPrices" pattern="^\d+(\.\d+)?$" style="width: 217px">
                <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
              </el-input>
            </el-form-item>
        <el-form-item label="当前国标价" label-width="120px">
              <el-input v-model="oilPresetPrices.currentGbPrice"  style="width: 217px" readonly disabled>
                <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
              </el-input>
            </el-form-item>
        <el-form-item label="预设国标价" prop="presetGbPrice" label-width="120px">
              <el-input v-model="oilPresetPrices.presetGbPrice" pattern="^\d+(\.\d+)?$" style="width: 217px">
                <template slot="append">元{{oilPresetPrices.unit?"/"+oilPresetPrices.unit:oilPresetPrices.unit}}</template>
              </el-input>
            </el-form-item>
        <el-form-item label="活动时间" prop="effectiveTime"  label-width="120px">
          <el-date-picker
            v-model="oilPresetPrices.effectiveTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 217px"
            :default-value="defaultDateTime"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
<!--        <div class="hui-seiz">如生效时间与当前时间间隔小于1分钟,当前油价将立即生效</div>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormPricesAdd = false">取 消</el-button>
        <el-button type="primary" @click="insertOilPresePrices()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getOilNumberList,
  dictSelect,
  insertOilNumber,
  updateOilNumber,
  getOilPresetList,
  getOilNameApi,
  getAllOilListApi,
  getOilNameListApi, insertOilPresePricesApi, stopJobApi

} from "@/api/oilPrice";
  export default {
    name: 'index',
    dicts: ['jobState','oil_type','zhzt'],
    data() {
      var valiNumberPass = (rule, value, callback) => {//包含小数的数字
        let reg = /^[+-]?(0|([1-9]\d*))(\.\d{1,2})?$/;
        if (value === '') {
          callback(new Error('请输入内容'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入数字，最多保留两位小数'));
        } else {
          callback();
        }
      };
      return {
        defaultDateTime: new Date(), // 默认时间
        pickerOptions: {
          disabledDate(time) {
            // 限制选择范围为当前时间之后
            return time.getTime() < Date.now();
          },
        },
        oilPresetPricesRules: {
          numberId:[
            { required: true, message: '请选择油品类型', trigger: 'change' }
          ],
          presetOilPrices: [
            { required: true, validator:valiNumberPass, trigger: "blur" }
          ],
          presetGbPrice: [
            { required: true, validator:valiNumberPass, trigger: "blur" }
          ],
          effectiveTime:[
            { required: true, message: '请选择日期', trigger: 'change' }
          ],
        },
        rules: {
          oilType:[
            { required: true, message: '请选择油品类型', trigger: 'change' }
          ],
          unit:[
            { required: true, message: '请选择单位', trigger: 'change' }
          ],
          oilName: [
            { required: true, message: '请选择油品名称', trigger: 'change' }
          ],
          oilPrice: [
            { required: true, validator:valiNumberPass, trigger: "blur" }
          ],
          gbPrice: [
            { required: true, validator:valiNumberPass, trigger: "blur" }
          ],
          state: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ]
        },
        oilNumberList: [],
        oilNumberList2: [],
        num: 1,
        dialogFormVisible: false, // 新增油价配置
        dialogFormNumberEdit: false, // 修改油价配置
        dialogFormPricesAdd: false, // 新增油价趋势
        oilTypeList: [], // 油品类型
        oilNameList: [], // 油品名称
        receivingUnitList: [], // 计价单位
        receivingUnitCN: [],
        receivingUnitEN: [],
        colorList:["#EAF9F6","#FFF1E8","#EDF3FF","#FFF8E6"],
        oilNumber:{
          oilType: '汽油',
          oilName: '',
          numberId: '',
          oilPrice: '',
          gbPrice: '',
          receivingUnits: '元',
          createTime: '',
          updateTime: '',
          state: '启用',
          sort: '',
          remark: '',
          ifDelete: '',
          allOil:'',
          oilTypeT: '',
          oilNameT: '',
          unit:'', // 计价单位
        },
        oilPresetPricesList:[],
        AllOilList:[],
        selectOilTypeByPrice: [],
        oilPresetPrices: {
          oilType:'',
          currentPetrolPrices:null ,
          presetOilPrices:null ,
          currentGbPrice:null ,
          presetGbPrice:null ,
          createTime:'',
          updateTime:'',
          // effectiveTime:new date(),
          effectiveTime:'',
          ifDelete:'',
          numberId:'',
        },
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '100px'
      }
    },
    async created() {
      try {
        await this.getList();
        await this.getAllOilList();
        await this.getOilPresetListin();
      } catch (error) {
        console.error(error);
      }
    },
    mounted() {
    },
    methods: {
      getStatusText(data) {
        if (data == 1) {
          return "停止"
        } else {
          return "启用"
        }
      },

      handleChange(value) {
        console.log("this.oilNumber", this.oilNumber);
        console.log(value);
      },
      // 获取数据
      getList() {
        return new Promise(async (resolve, reject) => {
          try {
            const response = await getOilNumberList();
            this.oilNumberList2 = response.data.records;
            await this.getAllOilList();
            resolve();
          } catch (error) {
            reject(error);
          }
        });
      },

      async getAllOilList() {
        try {
          const response = await getAllOilListApi();
          const oilList = response.data;
          this.AllOilList = oilList
          this.oilNumberList = this.oilNumberList2

          this.oilNumberList.forEach(oilNumber => {
            oilList.forEach(oil => {
              if (parseInt(oilNumber.oilName) === oil.id) {
                oilNumber.allOil = oil.oilType + " " + oil.oilName;
                oilNumber.oilTypeT = oil.oilType;
                oilNumber.oilNameT = oil.oilName;
              }
            });
          });
        } catch (error) {
          // Handle error here if needed
        }
      },
      res() {
        this.oilNumber = {
          oilType: '汽油',
          oilName: '',
          oilPrice: '',
          gbPrice: '',
          receivingUnits: '元',
          createTime: '',
          updateTime: '',
          state: '启用',
          sort: '',
          remark: '',
          ifDelete: '',
          allOil: '',
          oilTypeT: '',
          oilNameT: '',
          unit: '', // 计价单位
        }
      },


      // 编辑时使用
      async oilTypeMethods(data) {
        if (data === 1) {
          // this.oilNumber = {}
          this.dialogFormVisible = true
          this.res()
          this.getOilName('汽油')

          // this.$refs.oilNumberF.rules = null;
          // this.$refs.oilNumberF.resetFields();
          // this.$refs.oilNumberF.resetFields();
          // this.$refs.form.resetFields();
        }

        try {
          await Promise.all([
            this.getOilTypeList("oil_type"),
            this.getOilTypeList("pricingUnitCN"),
            // this.getOilTypeList("pricingUnitEN"),
          ]);

          this.receivingUnitList = [];
          // var cla1 = {
          //   label: "英文简称",
          //   value: -1,
          //   dis: true
          // }
          // this.receivingUnitList.push(cla1);
          // 遍历 this.receivingUnitCN 对象的属性并添加到 receivingUnitList
          for (const argumentsKey in this.receivingUnitCN) {
            const value = this.receivingUnitCN[argumentsKey];
            var cla = {
              label: value.dictLabel,
              value: value.dictValue,
              dis: false
            }
            this.receivingUnitList.push(cla);
          }
          // var cla2 = {
          //   label: "中文简称",
          //   value: -2,
          //   dis: true
          // }
          // cla2 = {
          //   label: "中文简称",
          //   value: -3,
          //   dis: true
          // }
          // this.receivingUnitList.push(cla2);
        //
        //   for (const argumentsKey in this.receivingUnitEN) {
        //     console.log("argumentsKey",argumentsKey)
        //     const value = this.receivingUnitEN[argumentsKey];
        //     var cla = {
        //       label: value.dictLabel,
        //       value: value.dictValue,
        //       dis: false
        //     }
        //     this.receivingUnitList.push(cla);
        //   }
        } catch (error) {
          console.error(error);
        }


      },
      // 选择油品类型之后触发
      oilTypeClick(data) {
        // 清除油品名称
        // this.oilNumber.oilName = ''
        // this.oilNumber.oilNameT = ''

        const selectedValue = this.oilNumber.oilType;
        this.$forceUpdate();
        // this.getOilTypeList(selectedValue)
        this.getOilName(selectedValue)
      },

      oilTypeClick2() {
        this.oilNumber.oilName = ''
        this.oilNumber.oilNameT = ''
      },


      // 打开修改窗口
      openOilNumberEdit(item) {
        this.oilNumber = {};

        let oil = item.allOil.split(' ');
        console.log("oilNameT", item)
        // item.oilNameT = oil[1];
        // item.oilName = oil[1];

        this.oilNumber = item;
        this.$set(this.oilNumber, 'oilNameT', oil[1])

        this.oilTypeClick(item);
      },

      // 添加
      insertOilNumberin() {
        this.$refs["oilNumberF"].validate(valid => {
          if (valid) {
            insertOilNumber(this.oilNumber).then(response => {
              var list = response.data
              if (list < 0) {
                this.getList();
                this.$modal.msgWarning("有重复油号");
              } else if (list > 0) {
                this.$modal.msgSuccess("新增油号成功");
                this.dialogFormVisible = false,
                  this.getList();
              }

            });
          }
        })


      },

      // 修改
      async updateOilNumberin() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            var this_ = this
            updateOilNumber(this_.oilNumber).then(response => {
              var list = response.data
              if (list < 0) {
                this.getList();
                this.$modal.msgWarning("油品重复");
              } else {
                this.getList();
                this.dialogFormNumberEdit = false
                this.$modal.msgSuccess("修改成功");
              }

            }).catch(res => {
              this.$modal.msgError("修改失败");
            });
          }
        })
      },

      // 查询数组字典类型
      async getOilTypeList(data) {

        var this_ = this
        await dictSelect(data).then(response => {
          var list = response.data
          if (data == "oil_type") {
            this_.oilTypeList = list;
          } else if (data == "pricingUnitCN") { //获取几家单位
            this_.receivingUnitCN = list;
            console.log("receivingUnitCN1",list)
          } else if (data == "pricingUnitEN") { //获取几家单位
            this_.receivingUnitEN = list;
            console.log("receivingUnitCN2",list)
          } else {
            this_.oilNameList = list;
          }
        });
      },

      // 根据数据字典查询油类名称
      getOilName(data) {
        var OilNumber = {
          oilType: data
        }
        var this_ = this
        getOilNameApi(OilNumber).then(response => {
          var list = response.data
          this_.oilNameList = list;
        });
      },

      /**
       * 油价预设
       */
      // 查询预设油号
      getOilPresetListin() {
        var this_ = this
        getOilPresetList().then(response => {
          this.oilPresetPricesList = response.data.records

          this.oilPresetPricesList.forEach(oilNumber => {
            this.AllOilList.forEach(oil => {
              if (parseInt(oilNumber.oilType) == oil.id) {
                oilNumber.oilNameT = oil.oilType + ' ' + oil.oilName;
              }
            });
          });

        });
      },
      // 油价预设查询列表
      getOilNameList() {
        var this_ = this
        getOilNameListApi().then(response => {
          var list = response.data
          this_.selectOilTypeByPrice = list
        });
      },
      // 新增油价预设
      addOilPresePrices() {
        this.oilPresetPrices = {}
        // this.selectOilTypeByPrice = this.oilNumberList;
        // 油价预设查询列表
        this.getOilNameList();
      },

      // 添加youjia1
      insertOilPresePrices() {
        this.$refs["priForm"].validate(valid => {
          if (valid) {
            this.dialogFormPricesAdd = false
            insertOilPresePricesApi(this.oilPresetPrices).then(response => {
              var list = response.data
              this.getOilNameList();
              this.getAllOilList();
              this.getOilPresetListin();
            });
          }
        });
      },

      // 更改状态
      deleteRow(data1, data2) {
        stopJobApi(data2).then(response => {
          this.$modal.msgSuccess("停止成功");
          this.getOilPresetListin();

        });

      },

      // 新增油价预设
      oilTypeClickByPrice() {
        var count = this.oilPresetPrices.numberId;
        this.selectOilTypeByPrice.forEach((oil) => {
          if (oil.numberId == parseInt(count)) {
            this.oilPresetPrices.currentPetrolPrices = oil.oilPrice;
            this.oilPresetPrices.currentGbPrice = oil.gbPrice;
            this.oilPresetPrices.numberId = oil.numberId;
            this.oilPresetPrices.oilType = oil.id;
            this.oilPresetPrices.unit = oil.unit;
          }
        });
      },
      changeOilName() {
        this.oilNumber.oilName = this.oilNumber.oilNameT
      },

      getSecondName() {
        this.$forceUpdate();
      },
    }
  }
</script>

<style scoped>
  .app-container{
    width: 100%;
    height: 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;
  }

  .top-icon2{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #3f3f3f;
    padding: 3px 7px;
    color: #d9d9d9;
    font-size: 13px;
    border-bottom-right-radius: 6px;
  }
  .table-box{
    width: 100%;
    margin: 20px auto;
  }
  .hui-seiz{
    margin-left:60px;
  }
</style>