lemonBeans_ui/src/views/warehouse/Shipping/AddOrUpdate.vue

<template>
  <div>
    <div
      style="display: flex; justify-content: space-between; margin-bottom: 15px"
    >
      <div style="display: flex; align-items: center">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
            ><span style="font-weight: 700">运费规则</span></el-breadcrumb-item
          >
          <el-breadcrumb-item
            ><span style="font-weight: 700">运价维护</span></el-breadcrumb-item
          >
        </el-breadcrumb>
        <el-button
          style="margin-left: 10px"
          size="mini"
          icon="el-icon-arrow-left"
          @click="goBack"
          >返回列表</el-button
        >
      </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="船公司" prop="fCorpid">
            <el-select
              size="small"
              v-model="form.fCorpid"
              clearable
              filterable
              placeholder="请输入关键词"
              style="width: 80%"
              :disabled="formStatus"
            >
              <el-option
                v-for="(item, index) in fMblnoOptions"
                :key="index.fId"
                :label="item.fName"
                :value="item.fId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="起运港" prop="polId">
            <el-select
                size="small"
                v-model="form.polId"
                clearable
                filterable
                placeholder="请输入关键词"
                style="width: 80%"
                :disabled="formStatus"
            >
              <el-option
                  v-for="(item, index) in polList"
                  :key="index.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的港" prop="podId">
            <el-select
                size="small"
                v-model="form.podId"
                clearable
                filterable
                placeholder="请输入关键词"
                style="width: 80%"
                :disabled="formStatus"
            >
              <el-option
                  v-for="(item, index) in podList"
                  :key="index.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="有效期" prop="fValiddate">
            <el-date-picker
              v-model="form.fValiddate"
              type="date"
              placeholder="选择有效期"
              size="small"
              style="width: 80%"
              value-format="timestamp"
              :disabled="formStatus"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="录入人" prop="createBy">
            <el-input
                size="small"
                v-model="form.createBy"
                style="width: 80%"
                disabled
                laceholder="录入人"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="业务类型" prop="fBilltype">
            <el-select
                size="small"
                v-model="form.fBilltype"
                placeholder="请选择结算方式"
                clearable
                style="width: 80%"
                :disabled="formStatus"
            >
              <el-option
                  v-for="(item, index) in billTypeList"
                  :key="index.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="状态" prop="fBillstatus">
            <el-select
                size="small"
                clearable
                filterable
                placeholder="请选择"
                style="width: 80%"
                v-model="form.fBillstatus"
                :disabled="formStatus"
            >
              <el-option
                  v-for="(item, index) in statusList"
                  :key="index.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="航线" prop="fLineid">
            <el-select
                size="small"
                clearable
                filterable
                placeholder="请选择"
                style="width: 80%"
                v-model="form.fLineid"
                :disabled="formStatus"
            >
              <el-option
                  v-for="(item, index) in fLineList"
                  :key="index.fId"
                  :label="item.fName"
                  :value="item.fId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订舱代理" prop="fBookagentid">
            <el-select
                size="small"
                clearable
                filterable
                placeholder="请选择"
                style="width: 80%"
                v-model="form.fBookagentid"
                :disabled="formStatus"
            >
              <el-option
                  v-for="(item, index) in fBookagentList"
                  :key="index.fId"
                  :label="item.fName"
                  :value="item.fId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remarks">
            <el-input
                style="width: 94.5%"
                v-model="form.remarks"
                type="textarea"
                placeholder="请输入内容"
                :disabled="formStatus"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="海运费" name="1">
        <div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
            "
          >
            <div>
              <el-button
                type="primary"
                size="mini"
                @click="addDetailRow"
                :disabled="formStatus"
                >新增</el-button
              >
              <el-button
                type="success"
                size="mini"
                @click="saveForm"
                :disabled="formStatus"
                >保存</el-button
              >
              <el-button type="warning" size="mini" :disabled="formStatus"
                >打印</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="submitForm"
                :disabled="formStatus"
                >请核</el-button
              >
              <el-button
                size="mini"
                type="info"
                @click="fixForm"
                :disabled="!formStatus"
                >修改</el-button
              >
            </div>
            <div>
              <el-button
                icon="el-icon-setting"
                size="mini"
                circle
                @click="showSetting = !showSetting"
              ></el-button>
            </div>
          </div>
          <el-table
            :data="detailList"
            tooltip-effect="dark"
            stripe
            @selection-change="Selectinventory"
          >
            <el-table-column type="selection" width="55" align="center" fixed />
            <el-table-column label="序号" type="index" width="50" fixed />
            <el-table-column
              v-for="(item, index) in getRowList"
              :key="index"
              :label="item.name"
              :width="item.width"
              :prop="item.label"
              align="center"
              :fixed="item.fixed"
              sortable
            >
              <template slot-scope="scope">
                <span v-if="item.label == 'fFeeid'">
                  <el-select
                    v-model="scope.row.fFeeid"
                    filterable
                    placeholder="请选择"
                    :disabled="formStatus"
                  >
                    <el-option
                      v-for="(item, index) in listFeesList"
                      :key="index.fId"
                      :label="item.fName"
                      :value="item.fId"
                    ></el-option>
                  </el-select>
                </span>
                <span v-else-if="item.label == 'fSpecification1'">
                  <el-input
                    v-model="scope.row.fSpecification1"
                    placeholder="请输入"
                    v-input-limit="2"
                    :disabled="formStatus"
                  />
                </span>
                <span v-else-if="item.label == 'fSpecification2'">
                  <el-input
                    v-model="scope.row.fSpecification2"
                    placeholder="请输入"
                    v-input-limit="2"
                    :disabled="formStatus"
                  />
                </span>
                <span v-else-if="item.label == 'fSpecification3'">
                  <el-input
                    v-model="scope.row.fSpecification3"
                    placeholder="请输入"
                    v-input-limit="2"
                    :disabled="formStatus"
                  />
                </span>
                <span v-else-if="item.label == 'fSpecification4'">
                  <el-input
                    v-model="scope.row.fSpecification4"
                    placeholder="请输入"
                    v-input-limit="2"
                    :disabled="formStatus"
                  />
                </span>
                <span v-else-if="item.label == 'fSpecification5'">
                  <el-input
                    v-model="scope.row.fSpecification5"
                    placeholder="请输入"
                    v-input-limit="2"
                    :disabled="formStatus"
                  />
                </span>
                <span v-else-if="item.label == 'fSpecification6'">
                  <el-input
                    v-model="scope.row.fSpecification6"
                    placeholder="请输入"
                    v-input-limit="2"
                    :disabled="formStatus"
                  />
                </span>
                <span v-else-if="item.label == 'fExrate'">
                  <el-input
                    v-model="scope.row.fExrate"
                    placeholder="请输入"
                    v-input-limit="2"
                    :disabled="formStatus"
                  />
                </span>
                <span v-else-if="item.label == 'createTime'">
                  {{ scope.row.createTime | fBsdateFormat }}
                </span>
                <span v-else-if="item.label == 'updateTime'">
                  {{ scope.row.updateTime | fBsdateFormat }}
                </span>
                <span v-else-if="item.label == 'remark'">
                  <el-input
                    v-model="scope.row.remark"
                    placeholder="备注"
                    show-word-limit
                    :disabled="formStatus"
                  />
                </span>
                <span v-else>{{ scope.row[item.label] }}</span>
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="操作"
              width="130px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click.native.prevent="
                    DeldetailRow(scope.row, scope.$index, detailList, 0)
                  "
                  size="small"
                  :disabled="formStatus"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          title="自定义列显示"
          :visible.sync="showSetting"
          width="700px"
          v-dialogDrag
          :close-on-click-modal="false"
        >
          <template slot="title">
            <div class="avue-crud__dialog__header">
              <span class="el-dialog__title">
                <span
                  style="
                    display: inline-block;
                    width: 3px;
                    height: 20px;
                    margin-right: 5px;
                    float: left;
                    margin-top: 2px;
                  "
                ></span>
              </span>
            </div>
          </template>
          <div>配置排序列数据（拖动调整顺序）</div>
          <div style="margin-left: 17px">
            <el-checkbox
              v-model="allCheck"
              label="全选"
              @change="allChecked"
            ></el-checkbox>
          </div>
          <div style="padding: 4px; display: flex; justify-content: center">
            <draggable
              v-model="setRowList"
              group="site"
              animation="300"
              @start="onStart"
              @end="onEnd"
              handle=".indraggable"
            >
              <transition-group>
                <div
                  v-for="item in setRowList"
                  :key="item.surface"
                  class="listStyle"
                >
                  <div style="width: 500px" class="indraggable">
                    <div class="progress" :style="{ width: item.width + 'px' }">
                      <el-checkbox
                        :label="item.name"
                        v-model="item.checked"
                        :true-label="0"
                        :false-label="1"
                        >{{ item.name }}
                      </el-checkbox>
                    </div>
                  </div>
                  <el-input-number
                    v-model.number="item.width"
                    controls-position="right"
                    :min="1"
                    :max="500"
                    size="small"
                  ></el-input-number>
                </div>
              </transition-group>
            </draggable>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showSetting = false">取 消</el-button>
            <el-button @click="delRow" type="danger">重 置</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </span>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="杂项费" name="2">
        <div>
          <div style="display: flex; margin-bottom: 10px">
            <div>
              <el-button
                type="primary"
                size="mini"
                @click="addDetailRow2"
                :disabled="formStatus"
                >新增</el-button
              >
              <el-button
                type="success"
                size="mini"
                @click="saveForm"
                :disabled="formStatus"
                >保存</el-button
              >
              <el-button type="warning" size="mini" :disabled="formStatus"
                >打印</el-button
              >
              <el-button
                type="danger"
                size="mini"
                @click="submitForm"
                :disabled="formStatus"
                >请核</el-button
              >
              <el-button
                size="mini"
                type="info"
                @click="fixForm"
                :disabled="!formStatus"
                >修改</el-button
              >
            </div>
          </div>
          <el-table
            :data="detailList2"
            tooltip-effect="dark"
            stripe
            @selection-change="Selectinventory"
          >
            <el-table-column type="selection" width="55" align="center" fixed />
            <el-table-column label="序号" type="index" width="50" fixed />
            <el-table-column label="费用" prop="fFeeid" align="center" sortable>
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.fFeeid"
                  filterable
                  placeholder="请选择"
                  :disabled="formStatus"
                >
                  <el-option
                    v-for="(item, index) in listFeesList"
                    :key="index.fId"
                    :label="item.fName"
                    :value="item.fId"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              label="单价"
              prop="fUnitprice"
              align="center"
              sortable
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.fUnitprice"
                  placeholder="请输入"
                  v-input-limit="2"
                  :disabled="formStatus"
                />
              </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" align="center" sortable>
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  placeholder="请输入"
                  :disabled="formStatus"
                />
              </template>
            </el-table-column>
            <el-table-column
              label="录入人"
              prop="createBy"
              align="center"
              sortable
            />
            <el-table-column
              label="录入时间"
              prop="createTime"
              align="center"
              sortable
            >
              <template slot-scope="scope">
                {{ scope.row.createTime | fBsdateFormat }}
              </template>
            </el-table-column>
            <el-table-column
              label="最新修改人"
              prop="updateBy"
              align="center"
              sortable
            />
            <el-table-column
              label="最新修改时间"
              prop="updateTime"
              align="center"
              sortable
            >
              <template slot-scope="scope">
                {{ scope.row.updateTime | fBsdateFormat }}
              </template>
            </el-table-column>
            <el-table-column
              header-align="center"
              align="center"
              label="操作"
              width="130px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click.native.prevent="
                    DeldetailRow(scope.row, scope.$index, detailList2, 1)
                  "
                  size="small"
                  :disabled="formStatus"
                  >移除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
    <br />
    <div
      style="display: flex; justify-content: flex-end; margin-top: 10px"
    ></div>
  </div>
</template>

<script>
import {
  checkCode,
  saveSeaprice,
  addSeaprice,
  getForm,
  listCorpsList,
  shippingCompany
} from "@/api/warehouseBusiness/shipping";
import { listCorps } from "@/api/basicdata/corps";
import { listFees } from "@/api/basicdata/fees";
import { queryUserVal } from "@/api/system/user";
import ApprovalComments from "@/views/startApproval";
import AddOrUpdate from "@/views/viewApproval";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Cookies from "js-cookie";
import { addSet, select, resetModule } from "@/api/system/set";
import draggable from "vuedraggable";
export default {
  name: "inStock",
  props: {
    chiId: {
      type: Number,
      required: null,
    },
    copyStatus: {
      type: Number,
      required: null,
    },
  },
  components: {
    Treeselect,
    AddOrUpdate,
    ApprovalComments,
    draggable,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      fMblnoOptions: [],
      form: {},
      rules: {
        fBilltype: [{ required: true, message: " ", trigger: "blur" }],
        fCorpid: [{ required: true, message: " ", trigger: "blur" }],
        fBillstatus: [{ required: true, message: " ", trigger: "blur" }],
        polId: [{ required: true, message: " ", trigger: "blur" }],
        podId: [{ required: true, message: " ", trigger: "blur" }],
        fValiddate: [{ required: true, message: " ", trigger: "blur" }],
      },
      drag: false,
      tableDate: [
        {
          surface: "1",
          label: "fFeeid",
          name: "费用",
          checked: 0,
          width: 120,
        },
        {
          surface: "2",
          label: "fSpecification1",
          name: "20GP",
          checked: 0,
          width: 120,
        },
        {
          surface: "3",
          label: "fSpecification2",
          name: "40GP",
          checked: 0,
          width: 100,
        },
        {
          surface: "4",
          label: "fSpecification3",
          name: "40HC",
          checked: 0,
          width: 100,
        },
        {
          surface: "5",
          label: "fSpecification4",
          name: "45HC",
          checked: 0,
          width: 100,
        },
        {
          surface: "6",
          label: "fSpecification5",
          name: "20RH",
          checked: 0,
          width: 100,
        },
        {
          surface: "7",
          label: "fSpecification6",
          name: "40RH",
          checked: 0,
          width: 100,
        },
        {
          surface: "8",
          label: "fExrate",
          name: "汇率",
          checked: 0,
          width: 120,
        },
        {
          surface: "10",
          label: "remark",
          name: "备注",
          checked: 0,
          width: 120,
        },
        {
          surface: "11",
          label: "createBy",
          name: "录入人",
          checked: 0,
          width: 120,
        },
        {
          surface: "12",
          label: "createTime",
          name: "录入时间",
          checked: 0,
          width: 120,
        },
        {
          surface: "13",
          label: "updateBy",
          name: "最新修改人",
          checked: 0,
          width: 150,
        },
        {
          surface: "14",
          label: "updateTime",
          name: "最新修改时间",
          checked: 0,
          width: 150,
        },
      ],
      setRowList: [],
      getRowList: [],
      allCheck: false,
      showSetting: false,
      activeName: "1",
      detailList: [],
      detailList2: [],
      billTypeList: [],
      statusList: [],
      polList: [],
      podList: [],
      listFeesList: [],
      formStatus: false,
      deleteItem0: [],
      deleteItem1: [],
      fLineList: [],
      fBookagentList: [],
    };
  },
  created() {
    this.setRowList = this.tableDate;
    this.getRowList = this.tableDate;
    listCorps({ type: 1 }).then((response) => {
      this.fMblnoOptions = response.rows;
    });
    listFees().then((response) => {
      this.listFeesList = response.rows;
    });
    this.getDicts("data_billType").then((response) => {
      this.billTypeList = response.data;
      console.log(this.billTypeList)
    });
    listCorpsList().then( response =>{
      this.fLineList = response.rows
    })
    shippingCompany().then( response =>{
      this.fBookagentList = response.rows
    })
    this.getDicts("data_status").then((response) => {
      console.log(response.data)
      this.statusList = response.data;
    });
    this.getDicts("port_start").then((response) => {
      this.polList = response.data;
    });
    this.getDicts("port_end").then((response) => {
      this.podList = response.data;
    });
    this.queryUser();
    this.getRow();
  },
  filters: {
    fBsdateFormat(row) {
      if (row) {
        const dateMat = new Date(row);
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const timeFormat = year + "-" + month + "-" + day;
        return timeFormat;
      }
    },
  },
  methods: {
    init() {
      this.resetForm("form");
      if(!this.copyStatus){
        this.formStatus = true;
      }
      this.getForm();
    },
    //列设置全选
    allChecked() {
      if (this.allCheck == true) {
        this.setRowList.map((e) => {
          return (e.checked = 0);
        });
      } else {
        this.setRowList.map((e) => {
          return (e.checked = 1);
        });
      }
    },
    //查询列数据
    getRow() {
      let that = this;
      this.data = {
        tableName: "运费规则",
        userId: Cookies.get("userName"),
      };
      select(this.data).then((res) => {
        if (res.data.length != 0) {
          this.getRowList = res.data.filter((e) => e.checked == 0);
          this.setRowList = res.data;
          this.setRowList = this.setRowList.reduce((res, item) => {
            res.push({
              surface: item.surface,
              label: item.label,
              name: item.name,
              checked: item.checked,
              width: item.width,
              fixed: item.fixed,
            });
            return res;
          }, []);
        }
      });
    },
    //重置列表
    delRow() {
      this.data = {
        tableName: "运费规则",
        userId: Cookies.get("userName"),
      };
      resetModule(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.setRowList = this.$options.data().tableDate;
          this.getRowList = this.$options.data().tableDate;
        }
      });
    },
    //保存列设置
    save() {
      this.showSetting = false;
      this.data = {
        tableName: "运费规则",
        userId: Cookies.get("userName"),
        sysTableSetList: this.setRowList,
      };
      addSet(this.data).then((res) => {
        if (res.code == 200) {
          this.showSetting = false;
          this.getRowList = this.setRowList.filter((e) => e.checked == 0);
        }
      });
    },
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    Selectinventory() {},
    addDetailRow() {
      this.detailList.push({
        fFeeid: null,
        fSpecification1: null,
        fSpecification2: null,
        fSpecification3: null,
        fSpecification4: null,
        fSpecification5: null,
        fSpecification6: null,
        fExrate: null,
        createBy: this.userVal.userName,
        createTime: Date.parse(new Date()),
        updateBy: this.userVal.userName,
        updateTime: Date.parse(new Date()),
      });
    },
    addDetailRow2() {
      this.detailList2.push({
        fFeeid: null,
        fUnitprice: null,
        remarks: null,
        createBy: this.userVal.userName,
        createTime: Date.parse(new Date()),
        updateBy: this.userVal.userName,
        updateTime: Date.parse(new Date()),
      });
    },
    DeldetailRow(row, index, rows, status) {
      if (status == 0 && row.fId) {
        this.deleteItem0.push(row.fId);
        this.form.deleteItem0 = this.deleteItem0;
        console.log(this.form.deleteItem0);
      }
      if (status == 1 && row.fId) {
        this.deleteItem1.push(row.fId);
        this.form.deleteItem1 = this.deleteItem1;
        console.log(this.form.deleteItem1);
      }
      rows.splice(index, 1);
    },
    TFformdata(data) {
      data.fBilltype = data.fBilltype ? data.fBilltype.toString() : null;
      data.fBillstatus = JSON.stringify(data.fBillstatus).length > 0?JSON.stringify(data.fBillstatus):null
      data.polId = data.polId ? data.polId.toString() : null;
      data.podId = data.podId ? data.podId.toString() : null;
      data.fLineid = data.fLineid ? Number(data.fLineid):null
      data.fBookagentid = data.fBookagentid ? Number(data.fBookagentid):null
      data.fValiddate = data.fValiddate ? Date.parse(data.fValiddate) : null;
      this.form = data;
    },
    getForm() {
      getForm(this.chiId).then((response) => {
        this.TFformdata(response.data.seaprice);
        this.detailList = response.data.seapriceItem;
        this.detailList2 = response.data.seapriceFees;
        if (this.copyStatus) {
          this.form.fId = null;
          this.form.fDateChanged = null;
          this.detailList.map((e) => {
            e.fId = null;
            e.fPid = null;
          });
          this.detailList2.map((e) => {
            e.fId = null;
            e.fPid = null;
          });
          // this.$set(this.form, "fId", null);
          // this.detailList;
          // this.$set(this.detailList, index);
        }
      });
    },
    fixForm() {
      let checkData = {
        fId: this.form.fId,
        fType: "freight",
        codeVal: this.form.fDateChanged,
      };
      checkCode(checkData).then((response) => {
        if (!response) {
          this.$confirm("数据发生变化，请更新一下数据?", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.getForm();
          });
        } else {
          this.formStatus = false;
        }
      });
    },
    saveForm() {
      let checkData = {
        fId: this.form.fId,
        fType: "freight",
        codeVal: this.form.fDateChanged,
      };
      checkCode(checkData).then((response) => {
        if (!response) {
          this.$confirm("数据发生变化，请更新一下数据?", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.getForm();
          });
        } else {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              let formData = new window.FormData();
              formData.append("seaprice", JSON.stringify(this.form));
              // 库存明细1
              formData.append("seapriceItem", JSON.stringify(this.detailList));
              // 库存明细2
              formData.append(
                "seapriceFlees",
                JSON.stringify(this.detailList2)
              );
              saveSeaprice(formData).then((response) => {
                if (response.code == 200) {
                  this.TFformdata(response.data.seaprice);
                  this.detailList=response.data.itemList?response.data.itemList:[]
                  this.detailList2=response.data.itemList2?response.data.itemList2:[]
                  this.msgSuccess("保存成功");
                }
              });
            }
          });
        }
      });
    },
    submitForm() {
      let checkData = {
        fId: this.form.fId,
        fType: "freight",
        codeVal: this.form.fDateChanged,
      };
      checkCode(checkData).then((response) => {
        if (!response) {
          this.$confirm("数据发生变化，请更新一下数据?", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.getForm();
          });
        } else {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              if (!this.detailList.length) {
                return this.$message.error("海运费不能为空");
              }
              for (let item in this.detailList) {
                if (!this.detailList[item].fFeeid) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行费用不能为空"
                  );
                }
                if (!this.detailList[item].fSpecification1) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行20GP不能为空"
                  );
                }
                if (!this.detailList[item].fSpecification2) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行40GP不能为空"
                  );
                }
                if (!this.detailList[item].fSpecification3) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行40HC不能为空"
                  );
                }
                if (!this.detailList[item].fSpecification4) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行45HC不能为空"
                  );
                }
                if (!this.detailList[item].fSpecification5) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行20RH不能为空"
                  );
                }
                if (!this.detailList[item].fSpecification6) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行40RH不能为空"
                  );
                }
                if (!this.detailList[item].fExrate) {
                  return this.$message.error(
                    "海运费第" + (Number(item) + 1) + "行汇率不能为空"
                  );
                }
              }
              if (!this.detailList2.length) {
                this.$message.error("杂项费不能为空");
              }
              for (let item in this.detailList2) {
                if (!this.detailList2[item].fFeeid) {
                  return this.$message.error(
                    "杂项费第" + (Number(item) + 1) + "行费用不能为空"
                  );
                }
                if (!this.detailList2[item].fUnitprice) {
                  return this.$message.error(
                    "杂项费第" + (Number(item) + 1) + "行单价不能为空"
                  );
                }
              }
              let formData = new window.FormData();
              formData.append("seaprice", JSON.stringify(this.form));
              formData.append("seapriceItem", JSON.stringify(this.detailList));
              formData.append(
                "seapriceFlees",
                JSON.stringify(this.detailList2)
              );
              addSeaprice(formData).then((response) => {
                if (response.code == 200) {
                  this.msgSuccess("请核成功");
                  this.cancel();
                }
              });
            }
          });
        }
      });
    },
    //获取登陆人
    queryUser() {
      queryUserVal().then((response) => {
        if (response.user !== null) {
          this.userVal = response.user;
          this.$set(this.form, "fDeptid", this.userVal.deptId);
          this.$set(this.form, "createBy", this.userVal.userName);
          this.$set(this.form, "fStorekeeper", this.userVal.nickName);
          this.$set(this.form, "fIfdamage", "1");
          this.$set(this.form, "fIfweigh", "1");
          this.$set(this.form, "fTrademodeid", "1");
          this.$set(this.form, "createTime", Date.parse(new Date()));
          this.$set(this.form, "fBstime", Date.parse(new Date()));
        }
        if (response.dept !== null) {
          this.deptOptions = [];
          this.deptOptions.push(response.dept);
        }
      });
    },
    cancel() {
      if (this.$route.query.id) {
        this.$router.push({ query: {} });
      }
      this.resetForm("form");
      this.$emit("changeShow", "true");
    },
    goBack() {
      this.$confirm("是否确定返回列表?", "提示", {
        confirmButtonText: "确认返回",
        cancelButtonText: "立即保存",
        type: "warning",
      })
        .then(() => {
          this.cancel();
        })
        .catch(() => {
          this.saveForm();
        });
    },
  },
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal) {
      this.showDialog = this.addOrUpdateVisible;
    },
  },
};
</script>
<style lang="scss" scoped>
.tag-hover:hover {
  background-color: #d9ebfb;
}
.tag-hover {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 15px;
  padding: 0px 1px;
  line-height: 12px;
}
.print-div {
  color: #000;
}
.print_table {
  table {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    font-size: 12px;
    margin-bottom: 5px;
  }
  table td {
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    vertical-align: middle;
    padding: 2px;
    text-align: center;
  }
}
.print_form {
  font-size: 12px;
}
</style>