icore-pass/src/views/TMS/components/importedShip/instructionsCapacity.vue

<template>
  <!-- 船只信息页面 -->
  <div class="homeworkPath">
    <page-title>船只信息</page-title>
    <div class="shipName">
      <span class="text">江船船名</span>
      <el-autocomplete
        v-model="state"
        @input="onInput"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="handleSelect"
      ></el-autocomplete>
    </div>
    <div class="form">
      <dil-form :formId="119" v-model="form"></dil-form>
    </div>
    <div class="btn">
      <el-button type="primary" @click="makeSure">新增船只</el-button>
    </div>
    <dilTable v-bind.sync="option">
      <el-table-column fixed="right" label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            @click="click(scope.row.orderId, scope.row.instructionsId)"
            type="text"
            size="mini"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="deleteclick(scope.row.orderId)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </dilTable>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      restaurants: [],
      state: "",
      form: {},
      capacityIds: "",
      option: {
        // 表格请求数据的地址
        requestUrl:
          "/api/v1/tms/getCapacities?apiId=76&instructionsId=" +
          this.$route.params.instructionsId,
      },
    };
  },
  methods: {
    onInput() {
      this.axios
        .post("/api/v1/tms/getShipNameList?state=" + this.state)
        .then((res) => {
          var values = [];
          if (res.data.code == "0") {
            res.data.data.forEach((element) => {
              values.push({
                value: element.capacityName,
                capacityId: element.capacityId,
              });
            });
          }
          this.restaurants = values;
        });
    },
    querySearch(queryString, cb) {
      var results = queryString
        ? this.restaurants.filter(this.createFilter(queryString))
        : this.restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      this.capacityIds = item.capacityId;
      console.log("capacityIds", this.capacityIds);
    },

    // 新增
    makeSure() {
      let omsshipInstructionsCapacity = {
        instructionsId: this.$route.params.instructionsId,
        state: this.state,
        capacityName: this.state,
        capacityIds: this.capacityIds,
        instructionPlannedLoading: this.form.instructionPlannedLoading,
        instructionsShipPosition: this.form.instructionsShipPosition,
        instructionContactInf: this.form.instructionContactInf,
        instructionsCapacityStatus: this.form.instructionsCapacityStatus,
        instructionEsarrivalTime: sjTime(this.form.instructionEsarrivalTime),
      };
      //判断是否为电话号码
      function isTelePhone() {
        var value2 = omsshipInstructionsCapacity.instructionContactInf;
        //验证是否为数字
        var patrn = /^1[3-9]\d{9}$/;
        // var patrn2 = /^(\d{3,4}-)?\d{7,8}$/;
        if (patrn.exec(value2) == null || value2 == "") {
          return false;
        } else {
          return true;
        }
      }

      //判断放货数量是否为数字
      function isNumber() {
        var value = omsshipInstructionsCapacity.instructionPlannedLoading;
        //验证是否为数字
        var patrn = /^(-)?\d+(\.\d+)?$/;
        if (patrn.exec(value) == null || value == "") {
          return false;
        } else {
          return true;
        }
      }
      var val = this.value;
      var val2 = this.value2;
      if (
        omsshipInstructionsCapacity.state == null ||
        omsshipInstructionsCapacity.instructionPlannedLoading == null ||
        omsshipInstructionsCapacity.instructionsShipPosition == null ||
        omsshipInstructionsCapacity.instructionContactInf == null ||
        omsshipInstructionsCapacity.instructionsCapacityStatus == null ||
        omsshipInstructionsCapacity.instructionEsarrivalTime == null ||
        omsshipInstructionsCapacity.capacityName == null
      )
        this.$message.error("存在空值！");
      else if (!isNumber(val)) this.$message.warning("计划装载吨位必须为数字");
      else if (!isTelePhone(val2)) this.$message.warning("联系方式格式错误");
      else
        this.axios
          .post(
            "/api/v1/tms/addInstructionsCapacity",
            omsshipInstructionsCapacity
          )
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              // this.$refs.table.refreshData();
              this.option.requestUrl =
                "/api/v1/tms/getCapacities?apiId=76&instructionsId=" +
                this.$route.params.instructionsId +
                "&i=" +
                new Date();
              // this.$router.go(this.option);
            } else {
              this.$message.error("新增失败！");
            }
            this.$refs["table"].resetField();
          });
    },
    click(orderId, instructionsId) {
      this.$router.push(
        "/ship/updateInstructionsCapacity/" +
          orderId +
          "?instructionsId=" +
          instructionsId
      );
    },
    deleteclick(scope) {
      let orderId = scope;
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.axios
            .post("/api/v1/tms/deleteInstructionsCapacity/" + orderId)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.$router.go(0);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
  },
};
</script>
<style lang='scss'>
.homeworkPath {
  .shipName {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.25rem;
    .text {
      width: 6.25rem;
      text-align: right;
      padding-right: 0.9375rem;
      font-size: 0.9375rem;
      font-weight: 600;
      color: #606266;
    }
  }
  .form {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>