Warehouse_management_lc_ui/src/views/track/singleCost/AddOrUpdate.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="showDialog"
    width="80%"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <span>
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="fCorpId">
              <el-select
                v-model="form.fCorpId"
                placeholder="请输入客户名称"
                :clearable="true"
                filterable
                size="mini"
                style="width: 180px"
                :disabled="true"
              >
                <el-option
                  v-for="(dict, index) in fMblnoOptions"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型" prop="billType">
              <el-select
                v-model="form.billType"
                placeholder="请选择业务类型"
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in billTypeList"
                  :key="index.dictSort"
                  :label="dict.dictLabel"
                  :value="dict.dictSort"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输方式" prop="transType">
              <el-select
                v-model="form.transType"
                placeholder="请选择运输方式"
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in transTypeList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运输性质" prop="transProp">
              <el-select
                v-model="form.transProp"
                placeholder="请选择运输方式"
                :disabled="true"
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in transPropList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="提箱地点" prop="tLoadAddr">
              <el-input
                v-model="form.tLoadAddr"
                placeholder="请输入提箱地点"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提箱时间" prop="loadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.loadDate"
                type="date"
                :disabled="true"
                value-format="yyyy-MM-dd"
                placeholder="选择卸箱时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装货地点" prop="mdLoadAddr">
              <el-input
                v-model="form.tMdLoadAddr"
                placeholder="装货地点"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="装货时间" prop="mdLoadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.mdLoadDate"
                type="date"
                :disabled="true"
                value-format="yyyy-MM-dd"
                placeholder="选择装货时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卸箱地点" prop="unLoadAddr">
              <el-input
                v-model="form.unLoadAddr"
                placeholder="请输入装卸箱地点"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="卸箱时间" prop="unLoadDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.unLoadDate"
                type="date"
                :disabled="true"
                value-format="yyyy-MM-dd"
                placeholder="选择卸箱时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="接单时间" prop="acceptDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.acceptDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择接单时间"
                :disabled="true"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
           <el-col :span="6">
            <el-form-item label="回单时间" prop="waybillDate">
              <el-date-picker
                clearable
                size="mini"
                style="width: 180px"
                v-model="form.waybillDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择回单时间"
                :disabled="true"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="提单号" prop="mblno">
              <el-input
                v-model="form.mblno"
                placeholder="请输入提单号"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货品名称" prop="goodsId">
              <el-select
                v-model="form.goodsId"
                placeholder="请输入货品名称"
                :disabled="true"
                clearable
                filterable
                size="mini"
                style="width: 180px"
              >
                <el-option
                  v-for="(dict, index) in goodsOptions"
                  :key="index.fId"
                  :label="dict.fName"
                  :value="dict.fId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划件数" prop="qtyPlan">
              <el-input
                v-model="form.qtyPlan"
                placeholder="请输入计划件数"
                :disabled="true"
                v-input-limit="2"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="重量(吨)" prop="weightPlan">
              <el-input
                v-model="form.weightPlan"
                placeholder="请输入计划重量"
                :disabled="true"
                v-input-limit="2"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="船名" prop="ysl">
              <el-input
                v-model="form.ysl"
                placeholder="请输入船名"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="航次" prop="voy">
              <el-input
                v-model="form.voy"
                placeholder="请输入航次"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起运港" prop="polId">
              <el-input
                v-model="form.polId"
                placeholder="请输入起运港"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目的港" prop="podId">
              <el-input
                v-model="form.podId"
                placeholder="请输入目的港"
                :disabled="true"
                size="mini"
                style="width: 180px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template slot="title">
        <i class="header-icon el-icon-circle-plus" style="font-size: 16px"
          ><span style="font-size: 16px; font-weight: bolder; margin-left: 5px"
            >添加费用明细</span
          >
        </i>
      </template>
      <div>
        <div
          style="display: flex; justify-content: space-between; margin: 10px 0"
        >
          <div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addRelevt"
              :disabled="disabled"
              >添加费用</el-button
            >
          </div>
        </div>
      </div>
      <el-table :data="feesList" style="width: 100%">
        <el-table-column
          prop="fCorpid"
          label="结算单位"
          align="center"
          width="180"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fCorpid"
              placeholder="请输入客户名称"
              :clearable="true"
              filterable
              size="mini"
              style="width: 160px"
              disabled
            >
              <el-option
                v-for="(dict, index) in fMblnoOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="fFeeid" label="费用名称">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fFeeid"
              filterable
              :disabled="scope.row.actId != 1090||disabled"
              remote
              placeholder="费用名称"
            >
              <el-option
                v-for="(dict, index) in fCNameOptions"
                :key="index.fId"
                :label="dict.fName"
                :value="dict.fId"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="fDc" label="收付">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fDc"
              placeholder="请选择"
              :disabled="scope.row.actId != 1090||disabled"
            >
              <el-option label="收" value="D"></el-option>
              <el-option label="付" value="C"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="fFeeunitid" label="计费单位">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.fFeeunitid"
              placeholder="请选择计费单位"
              :disabled="scope.row.actId != 1090||disabled"
              clearable
            >
              <el-option
                v-for="dict in jFeetunitOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="fBillingQty" label="计费数量">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fBillingQty"
              :disabled="scope.row.actId != 1090||disabled"
              placeholder="请输入内容"
              @input="total(scope.row)"
              v-input-limit="2"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fUnitprice" label="单价">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fUnitprice"
              :disabled="scope.row.actId != 1090||disabled"
              placeholder="请输入内容"
              @input="total(scope.row)"
              v-input-limit="2"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fCurrency" label="币种">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fCurrency"
              :disabled="scope.row.actId != 1090||disabled"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fExrate" label="汇率">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fExrate"
              :disabled="scope.row.actId != 1090||disabled"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fAmount" label="金额">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fAmount"
              :disabled="scope.row.actId != 1090||disabled"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="fTaxrate" label="税率">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fTaxrate"
              :disabled="scope.row.actId != 1090||disabled"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remarks"
              :disabled="scope.row.actId != 1090||disabled"
              placeholder="请输入内容"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="费用来源">
          <template slot-scope="scope">
            <span v-if="scope.row.actId == 1030">接单</span>
            <span v-if="scope.row.actId == 1040">提箱</span>
            <span v-if="scope.row.actId == 1050">装卸柜</span>
            <span v-if="scope.row.actId == 1060">还卸柜</span>
            <span v-if="scope.row.actId == 1070">回单</span>
            <span v-if="scope.row.actId == 1090">追加费用</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
          width="100px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              :disabled="scope.row.actId != 1090||disabled"
              @click.native.prevent="deleteRow(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" :disabled="disabled" @click="submitForm"
        >提 交</el-button
      >
      <el-button type="success" @click="submitAllowChanges">修 改</el-button>
      <el-button type="info" :disabled="disabled" @click="submitSave"
        >保 存</el-button
      >
      <el-button type="warning" :disabled="disabled" @click="submitRetreat"
        >撤 回</el-button
      >
      <el-button @click="showDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { removeFtmsorderbillscars } from "@/api/fleet/ftmsorderbillscars";
import { query, submit } from "@/api/track/singleCost";
import { listGoods } from "@/api/basicdata/goods";
import { listCorps } from "@/api/basicdata/corps";
import { listFees } from "@/api/basicdata/fees";
import UploadFile from "@/components/Uploadfile";
import Cookies from "js-cookie";

export default {
  name: "plans",
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      required: "",
    },
    fname: Object,
  },
  components: {
    UploadFile,
  },
  data() {
    return {
      jFeetunitOptions: [],
      form: {},
      feesList: [],
      // 控制弹出框显示隐藏
      showDialog: false,
      // 表单校验
      rules: {
        corpId: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        billType: [
          { required: true, message: "请选择业务类型", trigger: "blur" },
        ],
        transType: [
          { required: true, message: "请选择运输方式", trigger: "blur" },
        ],
        loadAddr: [
          { required: true, message: "请输入提箱地点", trigger: "blur" },
        ],
        loadAttntel: [
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请正确输入手机号",
            trigger: "blur",
          },
        ],
        mdLoadAttnTel: [
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请正确输入手机号",
            trigger: "blur",
          },
        ],
        unLoadAttnTel: [
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请正确输入手机号",
            trigger: "blur",
          },
        ],
      },
      billTypeList: [],
      transTypeList: [],
      transPropList: [],
      goodsLossTypeList: [],
      relevantAttachments: [],
      cntrIdList: [],
      priceTypeList: [],
      userType: null,
      username: null,
      collapses: [],
      fMblnoOptions: [],
      cntrId2List: [],
      goodsOptions: [],
      fWbuOptions: [],
      disabled:false,
    };
  },
  created() {
    this.getDicts("data_unitfees").then((response) => {
      if (response.data) {
        this.jFeetunitOptions = response.data;
      }
    });
    listFees().then((response) => {
      this.fCNameOptions = response.rows;
    });
    this.getDicts("data_billType").then((response) => {
      this.billTypeList = response.data;
    });
    this.getDicts("data_transType").then((response) => {
      this.transTypeList = response.data;
    });
    this.getDicts("data_transProp").then((response) => {
      this.transPropList = response.data;
    });
    this.getDicts("data_goodsLossType").then((response) => {
      this.goodsLossTypeList = response.data;
    });
    this.getDicts("data_cntrId").then((response) => {
      if (response.data) {
        response.data.map((e) => (e.noOption = false));
        this.cntrIdList = response.data;
      }
    });
    this.getDicts("data_priceType").then((response) => {
      this.priceTypeList = response.data;
    });
    listCorps().then((response) => {
      this.fMblnoOptions = response.rows;
    });
    listGoods().then((response) => {
      this.goodsOptions = response.rows;
    });
    listFees().then((response) => {
      this.fWbuOptions = response.rows;
    });
    this.userType = Cookies.get("userType");
    this.username = Cookies.get("userName");
  },
  methods: {
    deleteRow(index) {
      this.feesList.splice(index, 1);
    },
    init() {
      this.showDialog = true;
      query(this.fname.id).then((data) => {
        this.form = data.data;
        this.feesList = data.data.ftmsorderbillsfees;
        for (let item in this.feesList) {
          this.feesList[item].fFeeunitid = this.feesList[item].fFeeunitid + "";
        }
        if(this.feesList.length>=0){
          this.disabled=true
        }
      });
    },
    //选中时赋值pid
    checkPid(row) {
      let arr = this.schedulingList;
      let arr2 = arr.filter((e) => e.cntrId == row.cntrId);
      row["pid"] = arr2[0].id;
    },
    noMorecntrId(e) {
      this.cntrIdList.forEach((item) => (item.noOption = false));
      let arrIds = e.map((item) => item.cntrId);
      this.cntrIdList
        .filter((item) => arrIds.indexOf(item.dictValue) > -1)
        .forEach((item) => (item.noOption = true));
    },
    showSure(val) {
      let pidList = val.filter((e) => e.pid != null);
      let arr1 = pidList;
      let arr1Ids = arr1.map((item) => item.cntrId);
      arr1Ids = [...new Set(arr1Ids)];
      let arr2 = this.cntrIdList;
      this.cntrId2List = arr2.filter(
        (item) => arr1Ids.indexOf(item.dictValue) > -1
      );
    },
    // 新增附件上传
    addRelevt() {
      this.feesList.push({
        actId: "1090",
        fCorpid: this.form.fCorpId,
        fFeeid: "",
        fDc: "",
        fFeeunitid: "1",
        fBillingQty: 0,
        fUnitprice: 0,
        fCurrency: "RMB",
        fTaxrate: null,
        fAmount: 0,
        fExrate: 1,
        remarks: "",
      });
    },
    deleteplansRow(index, rows, row) {
      let arr = this.schedulingList;
      let arr2 = arr.filter((e) => e.cntrId == row.cntrId && e.cntrId != null);
      if (arr2.length != 0) {
        this.msgSuccess("调度安排已插入此箱型数据，不能删除");
      } else {
        this.cntrIdList
          .filter((item) => item.dictValue == row.cntrId)
          .forEach((item) => (item.noOption = false));
        rows.splice(index, 1);
      }
    },
    // 上传成功返回数据
    showFile(row) {
      for (let list in this.relevantAttachments) {
        this.$set(this.relevantAttachments[list], "attachUrl", row.url);
        this.$set(this.relevantAttachments[list], "attachName", row.fileName);
      }
    },
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
      this.cntrIdList.forEach((item) => (item.noOption = false));
      this.collapses = [];
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let formDatae = new window.FormData();
          formDatae.append("status", 6);
          formDatae.append("cars", JSON.stringify(this.form));
          formDatae.append("ftmsorderbillsfees", JSON.stringify(this.feesList));
          submit(formDatae).then((data) => {
            this.feesList = data.data.ftmsorderbillsfeesList;
            for (let item in this.feesList) {
              this.feesList[item].fFeeunitid =
                this.feesList[item].fFeeunitid + "";
            }
            this.$message.success("提交成功");
            this.$parent.getList();
            this.showDialog = false;
          });
        }
      });
    },
    //修改
    submitFix() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
        }
      });
    },
    //保存
    submitSave() {
      let formDatae = new window.FormData();
      formDatae.append("status", 2);
      formDatae.append("cars", JSON.stringify(this.form));
      formDatae.append("ftmsorderbillsfees", JSON.stringify(this.feesList));
      submit(formDatae).then((data) => {
        this.feesList = data.data.ftmsorderbillsfeesList;
        for (let item in this.feesList) {
          this.feesList[item].fFeeunitid = this.feesList[item].fFeeunitid + "";
        }
        this.$message.success("保存成功");
      });
    },
    //撤回
    submitRetreat() {},
    //修改
    submitAllowChanges() {
      this.disabled = !this.disabled;
    },

    //单条订单调度提交
    addscarsRow(row) {},
    delscarsRow(index, rows, row) {
      if (row.billStatus != 6 && row.id != null) {
        removeFtmsorderbillscars(row).then((response) => {
          if (response.code == 200) {
            rows.splice(index, 1);
            this.msgSuccess("成功删除");
          }
        });
      } else {
        rows.splice(index, 1);
      }
    },
    revokescarsRow(index, rows, row) {},
    changescarsRow(row) {},
    total(row) {
      if (row.fBillingQty && row.fUnitprice) {
        console.log(row.fBillingQty);
        this.$set(
          row,
          "fAmount",
          (row.fBillingQty * row.fUnitprice).toFixed(2)
        );
      } else {
        this.$set(row, "fAmount", 0);
      }
    },
  },
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal) {
      this.showDialog = this.addOrUpdateVisible;
    },
  },
};
</script>