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="dialogFormVisible = true,oilTypeMethods(1)">新增油号</el-button>
      <div class="top-box">
        <!--              循环-->
        <div class="oil-box" 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
            prop="presetId"
            label="任务id"
            width="100">
          </el-table-column>
<!--          prop="presetGbPrice"-->

          <el-table-column
            prop="oilNameT"
            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 label="状态">
<!--              <template slot-scope="scope">-->
<!--                {{ getStatusText(scope.row.state) }}-->
<!--              </template>-->
              <template slot-scope="scope">
                <dict-tag :options="dict.type.jobState" :value="scope.row.state"/>
              </template>
            </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, scope.row)"
                type="text"
                size="small">
                停止
              </el-button>
            </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">
          <el-radio-group v-model="oilNumber.oilType" @change="oilTypeClick(oilNumber)">
            <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">
              <el-select v-model="oilNumber.oilName" style="width: 217px" placeholder="请选择油品名称">
                  <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" style="width: 217px">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国标价格" prop="gbPrice">
              <el-input v-model="oilNumber.gbPrice" style="width: 217px">
                <template slot="append">元</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">
          <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="排序">
          <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="备注">
          <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)">
            <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" style="width: 217px">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国标价格" prop="gbPrice">
              <el-input v-model="oilNumber.gbPrice" style="width: 217px">
                <template slot="append">元</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">
          <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-form-item label="排序">
          <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="备注">
          <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="450px" :close-on-click-modal="false">
      <el-form ref="priForm" :model="oilPresetPrices" label-width="100px" :rules="oilPresetPricesRules">
        <el-form-item label="预设油号" prop="numberId">
          <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="当前油站价">
          <el-input v-model="oilPresetPrices.currentGbPrice" style="width: 217px" readonly disabled>
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="预设油站价" prop="presetOilPrices">
              <el-input v-model="oilPresetPrices.presetOilPrices" style="width: 217px">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
        <el-form-item label="当前国标价">
              <el-input v-model="oilPresetPrices.currentPetrolPrices" style="width: 217px" readonly disabled>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
        <el-form-item label="预设国标价" prop="presetGbPrice">
              <el-input v-model="oilPresetPrices.presetGbPrice" style="width: 217px">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
        <el-form-item label="活动时间" prop="effectiveTime">
          <el-date-picker
            v-model="oilPresetPrices.effectiveTime"
            type="datetime"
            placeholder="选择日期时间"
            style="width: 217px"
            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+)?$/g;
        if (value === '') {
          callback(new Error('请输入内容'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入数字'));
        } else {
          callback();
        }
      };

      return {



        oilPresetPricesRules: {
          numberId:[
            { required: true, message: '请选择油品类型', trigger: 'change' }
          ],
          presetOilPrices: [
            { required: true, validator:valiNumberPass, trigger: "blur" }
            // {required: true, message: '请输入', trigger: 'blur'},
            // { type: 'number', message: '价格必须为数字值'}
          ],
          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" }
          ],
          receivingUnits: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          state: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        },


        oilNumberList: [],
        oilNumberList2: [],

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

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

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

        receivingUnitCN: [],
        receivingUnitEN: [],


        oilNumber:{
          oilType: '',
          oilName: '',
          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:null,
          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(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
        }
      },

        // 编辑时使用
      async oilTypeMethods(data) {
        if (data == 1) {
          this.oilNumber = {}
        }

        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) {
            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) {
        console.log("selectedValue",data)
        const selectedValue = this.oilNumber.oilType;
        // this.getOilTypeList(selectedValue)
        this.getOilName(selectedValue)
      },

      // 打开修改窗口
      openOilNumberEdit(item) {

        console.log("item",item)
        this.oilNumber = {}
        this.oilNumber = item
        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;
          }else if (data == "pricingUnitEN"){ //获取几家单位
            this_.receivingUnitEN = list;
          }else {
            this_.oilNameList = list;
          }
          console.log("this_.oilTypeList",this_.oilTypeList)
        });
      },

      // 根据数据字典查询油类名称
      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(){
        // console.log(typeof oilPresetPrices.presetOilPrices);
        console.log("typeof oilPresetPrices.presetOilPrices",this.oilPresetPrices);
        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;
        console.log("this.selectOilTypeByPrice",this.selectOilTypeByPrice)
        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;
          }
        });
      },
      changeOilName() {
        this.oilNumber.oilName = this.oilNumber.oilNameT
      }
    }
  }
</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>