Warehouse_management_ui/src/views/fleet/sendcar/edit.vue

<template>
  <el-dialog
    title="提示"
    :visible.sync="showDialog"
    width="80%"
    @close="handleClose"
  >
    <span>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="客户名称" prop="corpId">
              <el-input v-model="form.corpId" placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型" prop="billType">
              <el-select v-model="form.billType" placeholder="请选择业务类型">
                <el-option
                  v-for="(dict, index) in billTypeList"
                  :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="transType">
              <el-select v-model="form.transType" placeholder="请选择运输方式">
                <el-option
                  v-for="(dict, index) in transTypeList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          {{ form.transProp }}
          <el-col :span="6">
            <el-form-item label="运输性质" prop="transProp">
              <el-select v-model="form.transProp" placeholder="请选择运输方式">
                <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="mblno">
              <el-input v-model="form.mblno" placeholder="请输入提单号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="货品名称" prop="goodsId">
              <el-input v-model="form.goodsId" placeholder="请输入货品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划件数" prop="qtyPlan">
              <el-input v-model="form.qtyPlan" placeholder="请输入计划件数" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划重量" prop="weightPlan">
              <el-input
                v-model="form.weightPlan"
                placeholder="请输入计划重量"
              />
            </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="请输入船名" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="航次" prop="voy">
              <el-input v-model="form.voy" placeholder="请输入航次" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="起运港" prop="pol">
              <el-input v-model="form.pol" placeholder="请输入起运港" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="目的港" prop="pod">
              <el-input v-model="form.pod" placeholder="请输入目的港" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item
              v-if="form.transType != 3"
              label="提箱地点"
              prop="loadAddr"
            >
              <el-input v-model="form.loadAddr" placeholder="请输入提箱地点" />
            </el-form-item>
            <el-form-item v-else label="装货地点" prop="loadAddr">
              <el-input v-model="form.loadAddr" placeholder="请输入装货地点" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划时间" prop="loadDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form.loadDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择计划装车时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="loadAttn">
              <el-input
                v-model="form.loadAttn"
                placeholder="请输入装车联系人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="loadAttntel">
              <el-input
                v-model="form.loadAttntel"
                placeholder="请输入装车联系电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.transType != 3">
          <el-col :span="6">
            <el-form-item
              v-if="form.billType == 1"
              label="卸货地点"
              prop="mdLoadAddr"
            >
              <el-input
                v-model="form.mdLoadAddr"
                placeholder="请输入装卸货地点"
              />
            </el-form-item>
            <el-form-item
              v-if="form.billType == 2"
              label="装货地点"
              prop="mdLoadAddr"
            >
              <el-input
                v-model="form.mdLoadAddr"
                placeholder="请输入装货地点"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.billType == 1 || form.billType == 2">
            <el-form-item label="计划时间" prop="mdLoadDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form.mdLoadDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择计划装卸货时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.billType == 1 || form.billType == 2">
            <el-form-item label="联系人" prop="mdLoadAttn">
              <el-input
                v-model="form.mdLoadAttn"
                placeholder="请输入装卸货联系人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="form.billType == 1 || form.billType == 2">
            <el-form-item label="联系电话" prop="mdLoadAttnTel">
              <el-input
                v-model="form.mdLoadAttnTel"
                placeholder="请输入装卸货联系电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.transType == 3">
          <el-col :span="6">
            <el-form-item label="卸箱地点" prop="unLoadAddr">
              <el-input
                v-model="form.unLoadAddr"
                placeholder="请输入卸箱地点"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划时间" prop="unLoadDate">
              <el-date-picker
                clearable
                size="small"
                style="width: 200px"
                v-model="form.unLoadDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择计划卸车时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系人" prop="unLoadAttn">
              <el-input
                v-model="form.unLoadAttn"
                placeholder="请输入卸车联系人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="unLoadAttnTel">
              <el-input
                v-model="form.unLoadAttnTel"
                placeholder="请输入卸车联系电话"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="线路描述" prop="routeDesc">
              <el-input
                type="textarea"
                :rows="2"
                v-model="form.routeDesc"
                placeholder="请输入线路描述"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注" prop="remarks">
              <el-input
                type="textarea"
                :rows="2"
                v-model="form.remarks"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div
          style="display: flex; justify-content: space-between; margin: 10px 0"
        >
          <div>
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addRow(planList)"
              >添加</el-button
            >
          </div>
          <div v-if="form.transType == 3">
            <el-form-item label="损耗单位" prop="goodsLossType">
              <el-select
                v-model="form.goodsLossType"
                placeholder="请选择损耗单位"
              >
                <el-option
                  v-for="(dict, index) in goodsLossTypeList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </div>
          <div v-if="form.transType == 3">
            <el-form-item label="耗损标准" prop="goodsLossStd">
              <el-input
                v-model="form.goodsLossStd"
                placeholder="请输入耗损标准"
              />
            </el-form-item>
          </div>
          <div style="font-size: 24px">计划货量</div>
        </div>
        <el-table :data="planList">
          <el-table-column label="箱型" align="center" prop="cntrId">
            <template slot-scope="scope">
               <el-select v-model="scope.row.cntrId" placeholder="请选择箱型">
                <el-option
                  v-for="(dict, index) in cntrIdList"
                  :key="index.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
              <!-- <el-input v-model="scope.row.cntrId" placeholder="箱型" /> -->
            </template>
          </el-table-column>

          <el-table-column label="计价方式" align="center" prop="priceType">
            <template slot-scope="scope">
              <el-input v-model="scope.row.priceType" placeholder="计价方式" />
            </template>
          </el-table-column>

          <el-table-column label="应收运价" align="center" prop="priceDr">
            <template slot-scope="scope">
              <el-input v-model="scope.row.priceDr" placeholder="应收运价" />
            </template>
          </el-table-column>
          <el-table-column label="应付运价" align="center" prop="priceCr">
            <template slot-scope="scope">
              <el-input v-model="scope.row.priceCr" placeholder="应付运价" />
            </template>
          </el-table-column>
          <el-table-column label="计划货量" align="center" prop="cntrQty">
            <template slot-scope="scope">
              <el-input v-model="scope.row.cntrQty" placeholder="计划货量" />
            </template>
          </el-table-column>
          <el-table-column label="已调度货量" align="center" prop="cntrPlanQty">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.cntrPlanQty"
                placeholder="已调度货量"
              />
            </template>
          </el-table-column>
          <el-table-column label="已派车货量" align="center" prop="cntrBlcQty">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.cntrBlcQty"
                placeholder="已派车货量"
              />
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="remarks">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remarks" placeholder="备注" />
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="100"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click.native.prevent="deleteRow(scope.$index, planList)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div
        style="display: flex; justify-content: space-between; margin: 10px 0"
      >
        <div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addRelevt"
            >添加</el-button
          >
        </div>
        <div style="font-size: 24px">附件上传</div>
      </div>
      <el-table
        :data="relevantAttachments"
        ref="attachTable"
        tooltip-effect="dark"
        border
        stripe
        style="width: 100%"
        height="150"
      >
        <el-table-column
          prop="fName"
          header-align="center"
          align="center"
          label="附件名称"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.fName"
              placeholder="附件名称"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="opuserID "
          header-align="center"
          align="center"
          label="上传人"
        >
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.opuserID"
              placeholder="上传人"
              show-word-limit
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="opdata"
          header-align="center"
          align="center"
          label="上传时间"
        >
          <template slot-scope="scope">
            <el-date-picker
              v-model="scope.row.opdata"
              type="date"
              disabled
              placeholder="上传时间"
              format="yyyy-MM-dd HH:mm"
              value-format="timestamp"
            ></el-date-picker>
          </template>
        </el-table-column>
        <el-table-column
          prop="attachUrl"
          header-align="center"
          align="center"
          label="上传附件"
        >
          <template slot-scope="scope">
            <uploadFile @input="showFile" v-model="scope.row.attachUrl" />
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          label="操作"
          width="130PX"
        >
          <template slot-scope="scope">
             <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.native.prevent="deleteRow(scope.$index, schedulingList)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div
        style="display: flex; justify-content: space-between; margin: 10px 0"
        v-if="userType=='00'"
      >
        <div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addRow(detailList)"
            >添加</el-button
          >
        </div>
        <div style="font-size: 24px">预计费用明细</div>
      </div>
      <el-table :data="detailList" v-if="userType=='00'">
        <el-table-column label="结算单位" align="center" prop="cntrId">
          <template slot-scope="scope">
            <el-input v-model="scope.row.cntrId" placeholder="结算单位" />
          </template>
        </el-table-column>

        <el-table-column label="费用名称" align="center" prop="priceType">
          <template slot-scope="scope">
            <el-input v-model="scope.row.priceType" placeholder="费用名称" />
          </template>
        </el-table-column>

        <el-table-column label="收付" align="center" prop="dc">
          <template slot-scope="scope">
            <el-input v-model="scope.row.dc" placeholder="收付" />
          </template>
        </el-table-column>
        <el-table-column label="计费单位" align="center" prop="priceCr">
          <template slot-scope="scope">
            <el-input v-model="scope.row.priceCr" placeholder="计费单位" />
          </template>
        </el-table-column>
        <el-table-column label="计费数量" align="center" prop="qty">
          <template slot-scope="scope">
            <el-input v-model="scope.row.qty" placeholder="计费数量" />
          </template>
        </el-table-column>
        <el-table-column label="单价" align="center" prop="price">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price" placeholder="单价" />
          </template>
        </el-table-column>
        <el-table-column label="币种" align="center" prop="cntrBlcQty">
          <template slot-scope="scope">
            <el-input v-model="scope.row.cntrBlcQty" placeholder="币种" />
          </template>
        </el-table-column>
        <el-table-column label="税率" align="center" prop="cntrBlcQty">
          <template slot-scope="scope">
            <el-input v-model="scope.row.cntrBlcQty" placeholder="税率" />
          </template>
        </el-table-column>
        <el-table-column label="金额" align="center" prop="amt">
          <template slot-scope="scope">
            <el-input v-model="scope.row.amt" placeholder="金额" />
          </template>
        </el-table-column>
        <el-table-column label="税率" align="center" prop="cntrBlcQty">
          <template slot-scope="scope">
            <el-input v-model="scope.row.cntrBlcQty" placeholder="税率" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remarks">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" placeholder="备注" />
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.native.prevent="deleteRow(scope.$index, detailList)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div
      v-if="userType=='00'"
        style="display: flex; justify-content: space-between; margin: 10px 0"
      >
        <div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="addRow(schedulingList)"
            >添加</el-button
          >
        </div>
        <div style="font-size: 24px">调度安排</div>
      </div>
      <el-table :data="schedulingList" v-if="userType=='00'">
        <el-table-column label="箱型" align="center" prop="cntrId">
          <template slot-scope="scope">
            <el-input v-model="scope.row.cntrId" placeholder="箱型" />
          </template>
        </el-table-column>

        <el-table-column label="车队名称" align="center" prop="carcorPid">
          <template slot-scope="scope">
            <el-input v-model="scope.row.carcorPid" placeholder="车队名称" />
          </template>
        </el-table-column>

        <el-table-column label="调度安排货量" align="center" prop="cntrQty">
          <template slot-scope="scope">
            <el-input v-model="scope.row.cntrQty" placeholder="调度安排货量" />
          </template>
        </el-table-column>
        <el-table-column label="已派车货量" align="center" prop="carQty">
          <template slot-scope="scope">
            <el-input v-model="scope.row.carQty" placeholder="已派车货量" />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remarks">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks" placeholder="备注" />
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="100"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click.native.prevent="deleteRow(scope.$index, schedulingList)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button type="info" @click="showDialog = false">保 存</el-button>
      <el-button type="warning" @click="showDialog = false">撤 回</el-button>
      <el-button @click="showDialog = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addFtmsorderbills,
} from "@/api/fleet/ftmsorderbills";
import UploadFile from "@/components/Uploadfile";
import Cookies from "js-cookie";
export default {
  name: "plans",
  props: {
    addOrUpdateVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    UploadFile,
  },
  data() {
    return {
      // 控制弹出框显示隐藏
      showDialog: false,
      // 表单参数
      form: {},
      // 表单校验
      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" },
        ],
      },
      planList: [],
      detailList: [],
      schedulingList: [],
      billTypeList: [],
      transTypeList: [],
      transPropList: [],
      goodsLossTypeList: [],
      relevantAttachments: [],
      cntrIdList:[],
      userType:null,
      username:null
    };
  },
  created() {
    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) => {
      this.cntrIdList = response.data;
    });

    this.userType=Cookies.get("userType")
    this.username = Cookies.get("username")
    console.log(this.username)
  },
  methods: {
     // 新增附件上传
    addRelevt() {
      this.relevantAttachments.push({
        attachUrl: null,
        fName: null,
        opuserID: this.username,
        opdata: Date.parse(new Date()),
      });
    },
    // 添加行
    addRow(tableData, event) {
      var obj = {};
      tableData.push(obj);
    },
    //删除行
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    // 上传成功返回数据
    showFile(row) {
      // this.$set(this.relevantAttachments[0], 'fName', row.fileName)
      this.$set(this.relevantAttachments[0], "fUrl", row.url);
    },
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            // this.form['billStatus']= "1";
            // let formData = new window.FormData();
            // formData.append("tmsorder", JSON.stringify(this.form));
            // formData.append("attachs", JSON.stringify(this.relevantAttachments));
            // formData.append("scntrs", JSON.stringify(this.planList));
            // formData.append("fees", JSON.stringify(this.detailList));
            // formData.append("plans", JSON.stringify(this.schedulingList));
            // updateFtmsorderbills(this.form).then((response) => {
            //   this.msgSuccess("修改成功");
            //   this.showDialog = false;
            // });
          } else {
            this.form['billStatus']= "6";
            let formData = new window.FormData();
            formData.append("tmsorder", JSON.stringify(this.form));
            formData.append("attachs", JSON.stringify(this.relevantAttachments));
            formData.append("scntrs", JSON.stringify(this.planList));
            formData.append("fees", JSON.stringify(this.detailList));
            formData.append("plans", JSON.stringify(this.schedulingList));
            addFtmsorderbills(formData).then((response) => {
              this.msgSuccess("新增成功");
              this.showDialog = false;
            });
          }
        }
      });
    },
  },
  watch: {
    // 监听 addOrUpdateVisible 改变
    addOrUpdateVisible(oldVal, newVal) {
      this.showDialog = this.addOrUpdateVisible;
    },
  },
};
</script>