费用登记界面开发以及接口联调

src/api/ecw/box.js

@@ -52,3 +52,12 @@ export function exportboxExcel(query) {
     responseType: 'blob'
   })
 }
+
+// 创建费用登记
+export function createCost(data) {
+  return request({
+    url: '/ecw/box-cost/create',
+    method: 'post',
+    data: data
+  })
+}

src/utils/dict.js

@@ -163,6 +163,7 @@ export const DICT_TYPE = {
   BOX_SHIPPING_DCCUSTOMS_STATUS: 'shipping_dcCustoms_status', // 报关放行状态
   BOX_SHIPPING_CHECK_STATUS: 'shipping_check_status', // 查验状态
   BOX_SHIPPING_UNLOADING_ERROR: 'shipping_unloading_error', // 卸柜异常类型
+  BOX_SHIPPING_PRICE_UNIT: 'shipping_price_unit', // 金额单位
 }
 
 /**

src/views/ecw/box/costForm.vue

+<template>
+  <div class="app-costForm">
+    <el-form ref="costForm" :model="costObj" label-width="80px">
+
+      <el-form-item label="操作步骤">
+        <el-select v-model="costObj.opStepType" placeholder="请选择操作步骤">
+          <el-option v-for="item in opStepTypes" :label="item.label" :value="item.key" :key="item.key"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="费用类型">
+        <el-select v-model="costObj.costType" placeholder="请选择费用类型">
+          <el-option v-for="type in this.getDictDatas(DICT_TYPE.FEE_TYPE)" :key="type.value" :label="type.label" :value="type.value"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="供应商">
+        <el-select v-model="costObj.supplierId" placeholder="请选择供应商">
+          <el-option v-for="supplier in allSupplier" :key="supplier.id" :label="supplier.companyZh" :value="supplier.id"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-row class="two-element">
+        <el-form-item label="金额">
+          <el-input-number v-model="costObj.price" controls-position="right" :min="1"></el-input-number>
+        </el-form-item>
+        <el-form-item label="" label-width="0px">
+          <el-select v-model="costObj.priceUnit" placeholder="请选择单位">
+            <el-option v-for="type in this.getDictDatas(DICT_TYPE.BOX_SHIPPING_PRICE_UNIT)" :key="type.value" :label="type.label" :value="type.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-row>
+
+      <el-form-item label="备注">
+        <el-input v-model="costObj.remarks" type="textarea" rows="2" placeholder="请输入备注"></el-input>
+      </el-form-item>
+
+    </el-form>
+    <div slot="footer" class="operate-button">
+      <el-button type="primary" @click="submit">确定</el-button>
+      <el-button @click="$emit('closeDialog')">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { stepDatas } from "./shippingSea/utils";
+import { getSupplierPage } from "@/api/ecw/supplier";
+import { createCost } from "@/api/ecw/box";
+import { serviceMsg } from "@/api/ecw/boxSea";
+
+export default {
+  name: "costForm",
+  inheritAttrs: false,
+  data() {
+    return {
+      // 费用登记对象
+      costObj: {},
+      // 步骤
+      opStepTypes: stepDatas(),
+      // 供应商
+      allSupplier: [],
+    };
+  },
+  created() {
+    // 供应商
+    getSupplierPage({ pageNo: "1", pageSize: "10000" }).then((res) => {
+      const { data } = res;
+      this.allSupplier = data.list;
+    });
+  },
+  methods: {
+    submit() {
+      this.$refs["costForm"].validate((valid) => {
+        if (valid) {
+          createCost({
+            shipmentId: this.$attrs.currRow.id,
+            ...this.costObj,
+          }).then((res) => {
+            serviceMsg(res, this).then(() => {
+              this.$emit("closeDialog");
+            });
+          });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+// 海运操作统一弹窗样式
+.app-costForm {
+  // 页面内元素弹窗form控件宽度设置
+  .el-form-item__content {
+    > div:not(.el-input-number) {
+      width: 100%;
+    }
+  }
+  .operate-button {
+    text-align: center;
+  }
+  .two-element {
+    display: flex;
+    > :last-child {
+      width: 100%;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

src/views/ecw/box/indexSea.vue

@@ -108,12 +108,6 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <!-- <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)"
-                     v-hasPermi="['shipment:box:query']">查看</el-button>
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-                     v-hasPermi="['shipment:box:update']">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-                     v-hasPermi="['shipment:box:delete']">删除</el-button> -->
           <el-dropdown trigger="click" @command="(command)=>handleCommand(scope.row, command)">
             <el-button type="primary">
               操作<i class="el-icon-arrow-down el-icon--right"></i>
@@ -134,8 +128,9 @@
                 @pagination="getList"/>
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
+      <template v-if="dialogType === 'edit' || dialogType === 'add'">
+        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
 
         <el-form-item label="运输方式" prop="transportType">
           <el-radio-group v-model="form.transportType">
@@ -166,6 +161,10 @@
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
+      </template>
+      <template v-if="dialogType === 'cost'">
+        <costForm v-if="open" @closeDialog="closeDialog" :currRow="currRow"/>
+      </template>
     </el-dialog>
   </div>
 </template>
@@ -175,10 +174,13 @@
   import {getCabinetPage} from "@/api/ecw/cabinet";
   import { getWarehouseList } from "@/api/ecw/warehouse"
   import { getDictDatas, DICT_TYPE } from '@/utils/dict';
+  import costForm from './costForm.vue'
 
   export default {
     name: "box",
-    components: {},
+    components: {
+      costForm
+    },
     data() {
       return {
         dateTypes:[
@@ -203,6 +205,10 @@
         list: [],
         // 弹出层标题
         title: "",
+        // 弹出类型
+        dialogType: "",
+        // 当前行
+        currRow: {},
         // 是否显示弹出层
         open: false,
         dateRangeCreateTime: [],
@@ -316,6 +322,7 @@
         this.reset();
         this.open = true;
         this.title = "添加出货";
+        this.dialogType = "add";
       },
       /** 修改按钮操作 */
       handleUpdate(row) {
@@ -325,6 +332,7 @@
           this.form = response.data;
           this.open = true;
           this.title = "修改出货";
+          this.dialogType = "edit";
         });
       },
       /** 提交按钮 */
@@ -379,6 +387,16 @@
         }).catch(() => {
         });
       },
+      closeDialog() {
+        this.open = false;
+      },
+      /* 费用登记 */
+      createCost(row) {
+        this.title = '费用登记'
+        this.dialogType = 'cost';
+        this.open = true;
+        this.currRow = row;
+      },
       /** 查看按钮操作 */
       handleCommand(row, command) {
         switch (command) {
@@ -393,6 +411,10 @@
           case 'delete':
             this.handleDelete(row);
             break;
+
+          case 'cost':
+            this.createCost(row);
+            break;
         }
       },
     }

src/views/ecw/box/shippingSea/nodePage/subMaterial.vue

@@ -35,7 +35,7 @@
       <el-form-item label="包装数量与单位" class="two-element">
         <el-input v-model="subMaterialObj.packageNum" placeholder="请输入包装数量"></el-input>
         <el-select v-model="subMaterialObj.packageUnit" placeholder="请选择单位">
-          <el-option v-for="unit in units" :key="unit.id" :value="unit.fuhao">{{unit.titleZh}}</el-option>
+          <el-option v-for="unit in units" :key="unit.id" :value="unit.fuhao" :label="unit.titleZh"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="毛重(KGS)">

src/views/ecw/box/shippingSea/shippingSea.vue

@@ -43,7 +43,7 @@ import { getWarehouseList } from "@/api/ecw/warehouse";
 import { getSupplierPage } from "@/api/ecw/supplier";
 import { getDockPage } from "@/api/ecw/dock";
 import { listUser } from "@/api/system/user";
-import { statusName, seaBaseData } from "./utils";
+import { getStatusName, seaBaseData } from "./utils";
 
 /**
  * 海运操作主页面
@@ -144,7 +144,7 @@ export default {
         }
         if (isBreak) break;
       }
-      this.statusLabel = statusName.get(currNodeStatus);
+      this.statusLabel = getStatusName().get(currNodeStatus);
     },
   },
 };

src/views/ecw/box/shippingSea/utils.js

 import dayjs from "dayjs";
 
-const statusName = new Map();
+function getStatusName() {
+  const statusName = new Map();
 
-statusName.set(11, "未订舱");
-statusName.set(12, "已订舱");
+  statusName.set(11, "未订舱");
+  statusName.set(12, "已订舱");
 
-statusName.set(21, "未预装");
-statusName.set(22, "预装审核中");
-statusName.set(23, "预装审核失败");
-statusName.set(24, "预装审核成功");
+  statusName.set(21, "未预装");
+  statusName.set(22, "预装审核中");
+  statusName.set(23, "预装审核失败");
+  statusName.set(24, "预装审核成功");
 
-statusName.set(31, "未派车");
-statusName.set(32, "已派车");
+  statusName.set(31, "未派车");
+  statusName.set(32, "已派车");
 
-statusName.set(41, "未装柜");
-statusName.set(42, "装柜中");
-statusName.set(43, "已装柜、待封柜");
-statusName.set(44, "封柜审核中");
-statusName.set(45, "封柜审核失败");
-statusName.set(46, "封柜审核成功");
+  statusName.set(41, "未装柜");
+  statusName.set(42, "装柜中");
+  statusName.set(43, "已装柜、待封柜");
+  statusName.set(44, "封柜审核中");
+  statusName.set(45, "封柜审核失败");
+  statusName.set(46, "封柜审核成功");
 
-statusName.set(51, "未报关");
-statusName.set(52, "报关中");
-statusName.set(53, "已报关");
+  statusName.set(51, "未报关");
+  statusName.set(52, "报关中");
+  statusName.set(53, "已报关");
 
-statusName.set(61, "未配船");
-statusName.set(62, "已配船");
+  statusName.set(61, "未配船");
+  statusName.set(62, "已配船");
 
-statusName.set(71, "未提单补料");
-statusName.set(72, "已提单补料");
+  statusName.set(71, "未提单补料");
+  statusName.set(72, "已提单补料");
 
-statusName.set(81, "未驳船");
-statusName.set(82, "已驳船");
+  statusName.set(81, "未驳船");
+  statusName.set(82, "已驳船");
 
-statusName.set(91, "未起运");
-statusName.set(92, "已起运");
+  statusName.set(91, "未起运");
+  statusName.set(92, "已起运");
 
-statusName.set(101, "未上传");
-statusName.set(102, "已上传");
+  statusName.set(101, "未上传");
+  statusName.set(102, "已上传");
 
-statusName.set(111, "未清关文件");
-statusName.set(112, "已清关文件");
+  statusName.set(111, "未清关文件");
+  statusName.set(112, "已清关文件");
 
-statusName.set(121, "未到港");
-statusName.set(122, "已到港");
+  statusName.set(121, "未到港");
+  statusName.set(122, "已到港");
 
-statusName.set(131, "未清关");
-statusName.set(132, "已清关");
+  statusName.set(131, "未清关");
+  statusName.set(132, "已清关");
 
-statusName.set(141, "未卸柜");
-statusName.set(142, "卸柜中");
-statusName.set(143, "卸柜审核中");
-statusName.set(144, "卸柜审核失败");
-statusName.set(145, "卸柜审核成功");
-statusName.set(146, "已卸柜");
+  statusName.set(141, "未卸柜");
+  statusName.set(142, "卸柜中");
+  statusName.set(143, "卸柜审核中");
+  statusName.set(144, "卸柜审核失败");
+  statusName.set(145, "卸柜审核成功");
+  statusName.set(146, "已卸柜");
 
-statusName.set(151, "未结算");
-statusName.set(152, "结算中");
-statusName.set(153, "已结算");
+  statusName.set(151, "未结算");
+  statusName.set(152, "结算中");
+  statusName.set(153, "已结算");
 
-const seaBaseData = () => {
+  return statusName;
+}
+
+function seaBaseData() {
   return [
     [
       {
@@ -379,7 +383,18 @@ const seaBaseData = () => {
       },
     ],
   ];
-};
+}
+
+function stepDatas() {
+  return seaBaseData()
+    .flat()
+    .map((item) => {
+      return {
+        key: item.type,
+        label: item.title,
+      };
+    });
+}
 
 const constantDict = {
   // 配船状态
@@ -467,8 +482,9 @@ export const fileTypes = [
 ];
 
 export {
-  statusName,
+  getStatusName,
   seaBaseData,
+  stepDatas,
   constantDict,
   formatStringNumber,
   formatDateStr,