SAAS-FRONTEND/src/views/station/Station_Adjustment/adjust.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >添加油品</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="addedOilList" ref="dataTable">
      <af-table-column width="55" align="center" />
      <af-table-column
        label="油品价格id"
        v-if="false"
        align="center"
        prop="oilPriceId"
      />
      <af-table-column label="油品名称" align="center" prop="oilName" />
      <af-table-column label="油品价格" align="center" prop="oilPrice" />
      <af-table-column
        label="油站id"
        v-if="false"
        align="center"
        prop="stationId"
      />
      <!--
      <af-table-column label="油站名称" align="center" prop="stationNanme" />
      -->
      <af-table-column label="操作时间" align="center" prop="date" />
      <af-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <el-button
            type="text"
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdata(scope.row)"
            >调价</el-button
          >
        </template>
      </af-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加油品对话框 -->
    <el-dialog title="添加油品" :visible.sync="addOpen" width="350px">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="90px">
        <el-form-item label="油品名称" prop="oilName">
          <el-select
            v-model="addForm.oilName"
            placeholder="油品名称"
            clearable
            size="small"
            @change="onOilNameChang"
          >
            <el-option
              v-for="dict in filterOilList"
              :key="dict.dictLabel"
              :label="dict.dictLabel"
              :value="dict.dictLabel"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="油品价格" prop="oilPrice" v-show="showOilPrice" :required="showOilPrice">
          <el-input-number
            v-model="addForm.oilPrice"
            :precision="2"
            :min="0"
            :step="1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
        <el-button @click="cancelAdd">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 调价信息对话框 -->
    <el-dialog
      title="油品调价"
      :visible.sync="updataOpen"
      width="400px"
      append-to-body
    >
      <el-form ref="updataForm" :model="updataForm" :rules="updataRules"  label-width="80px">
        
        <el-form-item label="油品" prop="oilName" width="80px">
          {{updataForm.oilName}}
        </el-form-item>
        <el-form-item label="调整价格" prop="oilAdjustPrice">
          <el-input-number
            v-model="updataForm.oilAdjustPrice"
            :precision="2"
            :min="0"
            :step="1"
            style="width: 150px"
          />元
        </el-form-item>
        <el-form-item label="生效状态" prop="takeEffectStatus">
          <el-radio-group v-model="updataForm.takeEffectStatus">
            <el-radio-button label="1">立即生效</el-radio-button>
            <el-radio-button label="2">定时生效</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="生效时间"
          prop="takeEffectDate"
          v-show="updataForm.takeEffectStatus==2"
          :required="updataForm.takeEffectStatus==2"
        >
          <el-date-picker
            clearable
            size="small"
            style="width: 200px"
            v-model="updataForm.takeEffectDate"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择生效时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpdataForm">确 定</el-button>
        <el-button @click="cancelUpdata">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPrice,
  delPrice,
  addPrice,
  updatePrice,
  exportPrice,
} from "@/api/station/price";
import { addAdjust, updateAdjust } from "@/api/station/adjust";
import { getDept } from "@/api/system/dept";
import { stationinfo } from "@/api/station/gun";
import { queryOilType } from "@/utils/oil"
export default {
  name: "adjust",
  data() {
    const validateOilPrice = (rule, value, callback) => {
      // 判断是不是非油品
      const res = this.allOilList.find((ele)=>{
        return ele.dictLabel===this.addForm.oilName
      })
      if(!res){
        callback(new Error("请选择油品后进行价格操作"));
        return
      }
      if(res.dictValue != 3){
        if (value == 0){
          callback(new Error("请填入价格"));
          return
        }
      }
      callback();
    };
    const validateTakeEffectDate = (rule, value, callback) => {
      if(this.updataForm.takeEffectStatus == 2){
        if(!value){
          callback(new Error("请选择调价时间"));
          return
        }
      }
      callback();
    };

    return {
      // 总条数
      total: 0,
      // 油品价格表格数据
      addedOilList: [],
      // 是否显示弹出层
      addOpen: false,
      updataOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      stationOptions: [],
      // 表单参数
      addForm: {},
      updataForm: {},
      // 表单校验
      addRules:{
        oilName:[
          {
            required: true,
            trigger: "change",
            message: "请选择油品",
          }
        ],
        oilPrice:[
          {
            validator: validateOilPrice, 
            trigger: 'blur' 
          }
        ]
      },
      updataRules: {
        oilAdjustPrice:[
          {
            required: true,
            trigger: "blur",
            message: "调整价格必须慎重填写",
          }
        ],
        takeEffectStatus: [
          {
            required: true,
            trigger: "blur",
            message: "生效状态必须选择",
          },
        ],
        takeEffectDate:[
          {
            validator: validateTakeEffectDate, 
            trigger: 'change' 
          }
        ]
      },
      allOilList: [],
      showOilPrice:true
    };
  },
  created() {
    this.init();
  },
  computed: {
    filterOilList() {
      return this.allOilList.filter((ele) => {
        let flag = true;
        this.addedOilList.map((item) => {
          if (item.oilName === ele.dictLabel) {
            flag = false;
          }
        });
        return flag;
      });
    },
  },
  methods: {
    init(){
      this.getList();
      this.getDicts("oil_name").then((response) => {
        this.allOilList = response.data;
      });
    },
    /** 查询油品价格列表 */
    getList() {
      this.queryParams.stationId = this.deptId;
      listPrice(this.queryParams).then((response) => {
        this.addedOilList = response.rows;
        this.total = response.total;
      });
    },
    // 取消按钮
    cancelAdd() {
      this.addOpen = false;
    },
    /** 搜索按钮操作 */
    // handleQuery() {
    //   this.queryParams.pageNum = 1;
    //   this.getList();
    // },

    /** 新增按钮操作 */
    handleAdd() {
      this.addForm = {
        ...this.addForm,
        stationId:this.deptId,
        oilPrice:0,
        oilName:''
      }
      this.addOpen = true;
    },
    onOilNameChang(oilName) {
      queryOilType(oilName).then((res) => {
        if(res == 3){
          this.showOilPrice = false
        }else{
          this.showOilPrice = true
        }
      })
    },
    /** 提交按钮 */
    submitAddForm() {
      this.addForm.stationId = this.deptId;
      this.$refs["addForm"].validate((valid) => {
        if (valid) {
          addPrice(this.addForm).then((response) => {
            this.msgSuccess("调价成功");
            this.addOpen = false;
            this.getList();
          });
        }
      });
    },
    handleUpdata(row) {
      this.updataForm = {
        ...this.updataForm,
        oilName: row.oilName,
        stationId: row.stationId,
        oilPriceId: row.oilPriceId,
        oilAdjustPrice: row.oilPrice,
        takeEffectStatus: 1,
      };
      this.updataOpen = true;
    },
    // 取消按钮
    cancelUpdata() {
      this.updataOpen = false;
    },
    submitUpdataForm() {
      this.$refs["updataForm"].validate((valid) => {
        if (valid) {
          addAdjust(this.updataForm).then((response) => {
            this.msgSuccess("调价成功");
            this.updataOpen = false;
            this.getList();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm("是否确认删除油品价格", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delPrice(row.oilPriceId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有油品价格数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportPrice(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>