icore-pass/src/views/appoint/components/inward/updateTransPrice.vue

<template>
  <!-- 修改运价 -->
  <div id="contractDetails">
    <page-title>编辑</page-title>
    <div class="form">
      <div class="form_box">
        <el-form :model="obj" :rules="batchFormRules" label-width="100px" label-position="left">
          <div class="preview-group">
            <el-form-item label="运价" prop="priceValue">
              <el-input v-model="obj.priceValue" placeholder="请输入内容" type="number"></el-input>
            </el-form-item>
            <el-form-item label="物资" prop="materialNames">
              <el-input v-model="obj.materialNames" readonly></el-input>
              <el-button type="primary" class="btnml" @click="materialDrawer"
              >浏览物资</el-button>
            </el-form-item>
            <el-form-item label="执行日期" prop="priceDate">
              <el-date-picker
                v-model="obj.priceDate"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="联动公式" prop="oilPriceFormula">
              <el-input v-model="obj.oilPriceFormula" placeholder="请选择油价联动公式" readonly disabled></el-input>
              <el-button type="primary" class="btn" @click="oilPriceFormulaClick"
              >浏览</el-button>
            </el-form-item>
            <el-form-item label="运力类型" prop="capacityTypeName">
              <el-input v-model="obj.capacityTypeName" readonly></el-input>
            </el-form-item>
            <el-form-item label="当前基准油价" prop="oilpriceBase">
              <el-input v-model="obj.oilpriceBase"></el-input>
            </el-form-item>
            <el-form-item label="油品名称" prop="oilTypeName">
              <el-input v-model="obj.oilTypeName" readonly></el-input>
            </el-form-item>
            <el-form-item label="油价变化率阈值" prop="oilpriceChangeThreshold">
              <el-input v-model="obj.oilpriceChangeThreshold" readonly></el-input>
            </el-form-item>
            <el-form-item label="计价单位" prop="type">
              <el-input v-model="obj.type" readonly></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
    <!-- 物资表格 -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="deleteRow(scope.$index)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 油价联动公式模态框 -->
    <el-drawer
      title="请选择油价联动公式"
      :visible.sync="oilPriceFormulaDrawer"
      :direction="direction"
      :before-close="handleClose"
      close-on-press-escape
      modal
      wrapperClosable
      size="40%"
    >
      <div class="selectText">
        <!-- <span></span> -->
        <el-input v-model="LineText" placeholder="请输入内容"></el-input>
        <el-button
          type="primary"
          @click="selectLineClick"
          :loading="selectLineLoading"
        ><i class="el-icon-search"></i>查询</el-button
        >
        <el-button type="primary" @click="addoilPriceFormula">确定</el-button>
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable
            v-bind.sync="oilPriceFormula"
            @radio-change="currentRadioChange"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="oilPriceFormulaDrawer"
            @func="func"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>
    <!-- 物资模态框 -->
    <el-drawer
      title="请选择物资"
      :visible.sync="drawerMaterial"
      :direction="direction"
      close-on-press-escape
      modal
      wrapperClosable
      size="40%"
    >
      <div class="selectText">
        <el-input v-model="materialText" placeholder="请输入内容"></el-input>
        <el-button
          type="primary"
          @click="selectMaterial"
          :loading="selectLineLoading"
        ><i class="el-icon-search"></i>查询</el-button
        >
        <el-button type="primary" @click="addMaterialList">确定</el-button>
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable
            v-bind.sync="materialOptions"
            @selection-change="selectionChange"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="oilPriceFormulaDrawer"
            @func="func"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>
    <div class="button_box">
      <el-button type="primary" @click="onClickConfirm">修改</el-button>
      <el-button @click="onClickCancel">返回</el-button>
    </div>
  </div>
</template>

<script>
import { sjTime, isNumber } from "@/utils/sharedJsFile";
export default {
  name: "updateTransPrice",
  data() {
    return {
      //公式内容
      formulaString: null,
      oilPriceFormulaId: null,
      rangeId: null,
      options: [],
      //油价联动公式模态窗口的数据
      oilPriceFormula: {
        requestUrl: "",
        selectionType: "radio"
      },
      newsArr: [],
      selectionList: [],
      //是否打开油价联动公式的模态窗口
      oilPriceFormulaDrawer: false,
      //油价联动公式查询条件
      LineText: null,
      //是否点击查询
      isKuang: false,
      //表格加载状态
      tableLoading: false,
      //物资模态框默认隐藏
      drawerMaterial: false,
      //模态窗口的打开的方向
      direction: "rtl",
      //物资查询框
      materialText: null,
      //油价联动公式模态框查询按钮状态
      selectLineLoading: false,
      obj: {},
      //表单数据
      form1: {
        priceDate: new Date(),
        oilTypeId: 10,
        capacityTypeId: 1
      },
      batchFormRules: {
        priceValue: [{ required: true, message: '运价不能为空', trigger: 'blur' }],
        priceDate: [{ required: true, message: '执行日期不能为空', trigger: 'blur' }],
        oilpriceBase: [{ required: true, message: '油价基准不能为空', trigger: 'blur' }]
  },
      tableTop: [
        {
          prop: "materialName",
          label: "物资名称"
        }
      ],
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#5f9ea0", //滚动条颜色
          opacity: 0.8, //滚动条透明度
          "overflow-x": "hidden"
        }
      },
      materialOptions: {
        requestUrl: "",
        selectionType: "select"
      }
    };
  },
  mounted() {
    this.axios.get("/api/v1/uc/getTransRange").then(res => {
      this.options = res.data.data;
    });
    this.obj=this.$route.query.row;
    this.axios.post("/api/v1/ams/getwz",{"priceId":this.obj.priceId}).then(res => {
      this.selectionList = res.data.data;
    });
    //根据price_id查询联动公式和列表传过去
    this.axios.post("/api/v1/ams/getcargonameId",{"priceId":this.obj.priceId}).then(res => {
      this.obj.oilPriceFormula = res.data.data.formulaString,
      this.obj.cargonameId = res.data.data.formulaId;
      this.oilPriceFormulaId=this.obj.cargonameId;
    });
    this.rangeId=this.obj.rangeId
  },
  methods: {
    //打开线路的模态窗口
    oilPriceFormulaClick() {
      this.oilPriceFormulaDrawer = true;
      this.oilPriceFormula.requestUrl = "/api/v1/uc/getOilFormula?apiId=444";
    },
    currentRadioChange(val) {
      this.formulaString = val.formulaString;
      this.oilPriceFormulaId = val.formulaId;
    },
    //选定联动公式确定
    addoilPriceFormula() {
      this.obj.oilPriceFormula=this.formulaString,
      this.obj.cargonameId = this.oilPriceFormulaId;
      this.obj.capacityTypeId = this.form1.capacityTypeId;
      this.obj.oilTypeId=this.form1.oilTypeId

      this.oilPriceFormulaDrawer = false;
    },
    selectLineClick() {
      this.tableLoading = true;
      this.selectLineLoading = true;
      this.isKuang = true;
      if (this.LineText) {
        this.oilPriceFormula.requestUrl =
          "api/v1/uc/getOilFormula?apiId=444&con=" + this.LineText;
      } else {
        this.oilPriceFormula.requestUrl =
          "api/v1/uc/getOilFormula?apiId=444&i=" + new Date();
      }
    },
    //模态窗口关闭时调用
    handleClose() {
      if (this.oilPriceFormulaDrawer) {
        this.oilPriceFormulaDrawer = false;
        this.LineText = null;
      }
    },
    //点击删除按钮删除当前点击的对象
    deleteRow(index) {
      this.selectionList.splice(index, 1);
    },
    func(res) {
      this.selectLineLoading = false;
      this.isKuang = false;
      this.tableLoading = false;
    },
    selectionChange(selection) {
      console.log(selection);
      for (let i = 0; i < selection.length; i++) {
        if (this.newsArr.indexOf(selection[i]) === -1) {
          this.newsArr.push(selection[i]);
        }
      }
    },
    addMaterialList() {
      this.drawerMaterial = false;
      this.newsArr.forEach(e => {
        console.log(e.materialName);
        var addmap = {
          materialName: e.materialTypeName,
          materialId: e.materialTypeId
        };
        this.selectionList.push(addmap);
      });
      console.log(this.selectionList);
      this.newsArr = [];
    },
    selectMaterial() {
      if (this.materialText == null) {
        this.materialOptions.requestUrl =
          "/api/v1/uc/queryMaterialByLike?apiId=244&i=" + new Date();
      } else {
        this.materialOptions.requestUrl =
          "/api/v1/rms/getInwardContractMaterial?apiId=482&con=" +
          this.materialText;
      }
    },
    materialDrawer() {
      this.drawerMaterial = true;
      this.materialOptions.requestUrl =
        "/api/v1/rms/getInwardContractMaterial?apiId=482&i=" + new Date();
    },
    // 返回
    onClickCancel() {
      this.$router.go(-1);
    },
    // 修改
    onClickConfirm() {
      if (this.obj.priceValue==''|| this.obj.priceValue == undefined){
        this.$message.info("修改前请填写运价！")
          return;
      }
      let mapValue = {
        cargonameId: this.oilPriceFormulaId,
        capacityTypeId: this.obj.capacityTypeId,
        priceValue: this.obj.priceValue,
        priceDate: sjTime(this.obj.priceDate),
        type: this.obj.type,
        oilpriceBase: this.obj.oilpriceBase,
        oilTypeId: this.obj.oilTypeId,
        oilpriceChangeThreshold: this.obj.oilpriceChangeThreshold,
        rangeId: this.rangeId,
        mapList: this.selectionList,
        priceId: this.obj.priceId
      };
        this.axios
          .post(
            "/api/v1/ams/updateTransPrice",
            mapValue
          )
          .then((res) => {
            if (res.data.data >=1) {
              this.$message.success("修改成功！")
              this.$router.go(-1);
            }
          });
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  .form_box {
    width: 500px;
    margin-left: 35%;
    margin-top: 30px;
    margin-right: 20px;

    .el-form {
      .preview-group {
        .el-form-item {
          .el-form-item__label {
            display: inline-block;
            width: 70px !important;
          }

          .el-form-item__content {
            .el-select {
              width: 250px;
            }

            .el-input {
              width: 250px;
            }
          }
        }
      }
    }
  };
  .txt1{
  display: inline-block;
  width: 150px;
  text-align: right;
};
}
.elForm {
  margin-left: 30%;
}
.button_box {
  margin-left: 45%;
}
</style>