tjxg

src/views/appoint/components/inward/updateTransPrice.vue

@@ -2,10 +2,6 @@
   <!-- 修改运价 -->
   <div id="contractDetails">
     <page-title>编辑</page-title>
-    <div class="main">
-      <span class="text">修改运价</span>
-      <span class="a"></span>
-    </div>
     <div class="form">
       <div class="form_box">
         <el-form :model="obj" :rules="batchFormRules" label-width="100px" label-position="left">
@@ -13,17 +9,28 @@
             <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-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-input v-model="obj.priceDate" readonly></el-input>
+              <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" readonly></el-input>
+              <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>
@@ -38,8 +45,108 @@
         </el-form>
       </div>
     </div>
-
-    <div class="button-box">
+    <!-- 物资表格 -->
+    <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>
@@ -47,20 +154,170 @@
 </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' }]
+        priceValue: [{ required: true, message: '运价不能为空', trigger: 'blur' }],
+        priceDate: [{ required: true, message: '执行日期不能为空', trigger: 'blur' }],
+        oilPriceFormula: [{ 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;
+    // console.log("obj "+JSON.stringify(this.obj))
+    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.priceDate=this.form1.priceDate,
+      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);
@@ -71,15 +328,23 @@ export default {
         this.$message.info("修改前请填写运价！")
           return;
       }
-
-      let paramsList = {
-        priceId: this.obj.priceId,
+      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",
-            paramsList
+            mapValue
           )
           .then((res) => {
             if (res.data.data >=1) {
@@ -96,7 +361,7 @@ export default {
 .form {
   display: flex;
   .form_box {
-    width: 400px;
+    width: 500px;
     margin-left: 35%;
     margin-top: 30px;
     margin-right: 20px;
@@ -128,4 +393,65 @@ export default {
   text-align: right;
 };
 }
+.elForm {
+  margin-left: 30%;
+}
+.addTransportPrice {
+  .form {
+    display: flex;
+    .form_box {
+      width: 320px;
+      margin-left: 30%;
+      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;
+              }
+            }
+          }
+        }
+      }
+    }
+    .liulan {
+      width: 120px;
+      margin-top: 30px;
+      .el-button {
+        width: 100px !important;
+        margin: auto;
+      }
+      .btn {
+        margin-top: 54px;
+      }
+    }
+  }
+  .button_box {
+    margin-left: 45%;
+  }
+  .selectText {
+    .el-input {
+      width: 250px;
+    }
+  }
+  .LineTable {
+    width: 100%;
+    height: 480px;
+    overflow: hidden;
+    margin-top: 10px;
+  }
+  .btnml {
+    width: 250px;
+    margin-left: 50px;
+  }
+}
 </style>