yiliangyiyun-pcfront/src/views/lessee/lesseeAdd.vue

<!-- 主页模块 主页一览-->
<template>
  <div v-loading="pageLoading">
    <div class="head">
      <span class="headicon">基本信息</span>
    </div>
    <div class="top-buttons">
      <el-button size="small"
                 type="primary"
                 @click="save">保存</el-button>
      <el-button size="small"
                 @click="back">取消</el-button>
    </div>
    <div class="form">
      <el-form ref="ruleForm"
               label-width="120px"
               label-position="right"
               :model="ruleForm"
               :rules="rules">
        <el-form-item label="公司中文名称"
                      prop="tenantName"
                      class="aaa">
          <el-input v-model="ruleForm.tenantName"
                    @change="edited = true"
                    size="small"
                    class="page-form-input"
                    maxlength="90" />
        </el-form-item>
        <el-form-item label="公司英文名称"
                      prop="tenantEnName"
                      class="aaa">
          <el-input v-model="ruleForm.tenantEnName"
                    @change="edited = true"
                    size="small"
                    class="page-form-input"
                    maxlength="90" />
        </el-form-item>
        <el-form-item label="公司简称"
                      prop="compSimpleNameEn">
          <el-input v-model="ruleForm.compSimpleNameEn"
                    @change="edited = true"
                    size="small"
                    class="page-form-input"
                    maxlength="5"
                    placeholder="5位以下字母或数字" />
          <el-tooltip class="item"
                      effect="light"
                      content="用于标记采购单号规则标识"
                      placement="bottom-start">
            <svg-icon icon-class="talk"
                      class="talk" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="公司域名"
                      prop="compDomainName"
                      class="aaa">
          <el-input maxlength="40"
                    class="page-form-input"
                    @change="edited = true"
                    size="small"
                    v-model="ruleForm.compDomainName" />
        </el-form-item>
        <el-form-item label="联系人"
                      prop="linkmanName"
                      class="aaa">
          <el-input maxlength="40"
                    class="page-form-input"
                    @change="edited = true"
                    size="small"
                    v-model="ruleForm.linkmanName" />
        </el-form-item>
        <el-form-item maxlength="11"
                      label="联系电话"
                      prop="linkmanPhone">
          <el-input v-model="ruleForm.linkmanPhone"
                    @change="edited = true"
                    size="small"
                    class="page-form-input" />
        </el-form-item>
        <el-form-item maxlength="90"
                      label="联系人邮箱"
                      prop="linkmanEmail">
          <el-input v-model="ruleForm.linkmanEmail"
                    @change="edited = true"
                    size="small"
                    class="page-form-input" />
        </el-form-item>
        <el-form-item label="专属客服"
                      prop="customerServiceStaffId"
                      class="aaa">
          <el-select v-model="ruleForm.customerServiceStaffId"
                     @change="edited = true"
                     placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.operatorId"
                       :label="item.operatorName"
                       :value="item.operatorId" />
          </el-select>
        </el-form-item>
        <el-form-item label="服务类型"
                      prop="serviceType"
                      class="aaa">
          <el-select v-model="ruleForm.serviceType"
                     @change="edited = true"
                     placeholder="请选择">
            <el-option label="船端"
                       value="SHIP_CLIENT" />
            <el-option label="岸端"
                       value="COAST_CLIENT" />
            <el-option label="船端+岸端"
                       value="SHIP_COAST_CLIENT" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="入驻船舶数"
                      prop="enteringShipNumber">
          <el-input v-model="ruleForm.enteringShipNumber"
                    @change="edited = true"
                    size="small"
                    class="page-form-input" />
        </el-form-item> -->
        <!-- 船舶总数量 -->
        <el-form-item label="入驻船舶数"
                      prop="shipNumber">
          <el-input v-model="ruleForm.shipNumber"
                    @change="edited = true"
                    size="small"
                    class="page-form-input" />
        </el-form-item>
        <el-form-item label="税务登记号"
                      prop="compImo">
          <el-input v-model="ruleForm.compImo"
                    @change="edited = true"
                    size="small"
                    class="page-form-input" />
        </el-form-item>
        <el-form-item label="合同时间"
                      prop="contractStartDate">
          <el-date-picker v-model="ruleForm.contractStartDate"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择日期"
                          @change="edited = true" />
        </el-form-item>
        <el-form-item label="到期时间"
                      prop="contractEndDate">
          <el-date-picker v-model="ruleForm.contractEndDate"
                          format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd"
                          type="date"
                          placeholder="选择日期"
                          @change="edited = true" />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { create, operators,tenantChangeshipNumber } from "../../api/lessee";
import { validPhone, validEmail, isNumber } from "../../utils/validate";
export default {
  name: "Lessee",
  data () {
    const shipNumber = (rule, value, callback) => {
      if (value == null || value === "") {
        callback(new Error("带星号的不能为空"));
      } else if (!isNumber(value)) {
        callback(new Error("只能是正整数"));
      } else {
        callback();
      }
    };
    const checkEmail = (rule, value, callback) => {
      if (value == null || value === "") {
        callback();
      } else if (!validEmail(value)) {
        callback(new Error("邮箱格式不正确"));
      } else {
        callback();
      }
    };
    const validcodePhonee = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("带星号的不能为空"));
      } else if (!validPhone(value)) {
        callback(new Error("手机号格式填写错误"));
      } else {
        callback();
      }
    };
    const validcodeName = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z]{1,5}$/;
      if (value === "") {
        callback(new Error("带星号的不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("简称必须是由5位数字和字母组合"));
      } else {
        callback();
      }
    };
    return {
      pageLoading: false,
      checkMsg: " ",
      showlist: "",
      tenantId: "",
      ruleForm: {},
      edited: false,
      rules: {
        tenantName: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        tenantEnName: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        compSimpleNameEn: [
          {
            required: true,
            validator: validcodeName,
            trigger: "blur"
          }
        ],
        linkmanName: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        compImo: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        compDomainName: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        linkmanPhone: [
          {
            required: true,
            validator: validcodePhonee,
            trigger: "blur"
          }
        ],
        customerServiceStaffId: [
          {
            required: true,
            trigger: "change"
          }
        ],
        serviceType: [
          {
            required: true,
            trigger: "change"
          }
        ],
        enteringShipNumber: [
          {
            required: true,
            trigger: "blur"
          }
        ],
        shipNumber: [
          {
            required: true,
            validator: shipNumber,
            trigger: "blur"
          }
        ],
        contractStartDate: [
          {
            required: true,
            validator: this.checkContractStartDate,
            trigger: "change"
          }
        ],
        contractEndDate: [
          {
            required: true,
            validator: this.checkContractEndDate,
            trigger: "change"
          }
        ],
        linkmanEmail: [
          {
            validator: checkEmail,
            trigger: "blur"
          }
        ]
      },
      options: [],
      value: "",
      show: "",
      removed: ""
    };
  },
  created () {
    this.checkList();
    this.show = "return";
  },
  methods: {
    // 邮箱验证
    checkEmail (data) {
      if (data == null || data === "") {
        return false;
      } else if (!validEmail(data)) {
        this.$message({
          message: "邮箱格式不正确",
          type: "error",
          showClose: true
        });
      }
    },
    // 查询账户
    checkList () {
      operators({
        currentPage: "",
        pageSize: ""
      }).then(response => {
        this.options = response.data.records;
      });
    },
    // 合同时间验证
    checkContractStartDate (rule, value, callback) {
      this.$refs.ruleForm.clearValidate("contractEndDate");
      const end = this.ruleForm.contractEndDate;
      if (!value) {
        callback(new Error("合同开始日期不能为空"));
      } else if (end > value) {
        callback();
      } else {
        callback(new Error("合同开始日期须早于结束日期"));
      }
    },
    checkContractEndDate (rule, value, callback) {
      this.$refs.ruleForm.clearValidate("contractStartDate");
      const start = this.ruleForm.contractStartDate;
      if (!value) {
        callback(new Error("合同结束日期不能为空"));
      } else if (value > start) {
        callback();
      } else {
        callback(new Error("合同结束日期须晚于开始日期"));
      }
    },
    save () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.pageLoading = true
          create(this.ruleForm)
            .then(response => {
              localStorage.setItem("tenantId", response.data);
              this.tenantId = response.data;
              this.pageLoading = false

              if (response.code === "MANAGEMENT_010") {
                this.$message({
                  message: "公司域名重复",
                  type: "error",
                  showClose: true
                });
              } else if (response.code === "OPERATION_001") {
                this.$message({
                  message: "用户名已存在",
                  type: "error",
                  showClose: true
                });
              } else if (response.code === "OPERATION_002") {
                this.$message({
                  message: "用户名已存在",
                  type: "error",
                  showClose: true
                });
              } else if (response.code === "OPERATION_003") {
                this.$message({
                  message: "公司中文名称/公司英文名称/手机号已被占用",
                  type: "error",
                  showClose: true
                });
              } else if (response.code === "COMPANY_001") {
                this.$message({
                  message: "企业简称已经被占用",
                  type: "error",
                  showClose: true
                });
              } else {
                tenantChangeshipNumber({compId:this.ruleForm.compId,compImo:this.ruleForm.compImo})
            .then(response => {
              this.$message({
                  message: "保存成功",
                  type: "success",
                  showClose: true
                });
            })
                this.$router.push({
                  name: "lesseeEdit"
                });
              }
            })
            .catch(res => {
              this.showlist = false;
              this.pageLoading = false
              this.$message({
                message: "保存失败",
                type: "error",
                showClose: true
              });
            });
        } else {
          this.showlist = false;
          this.$message({
            message: "带星号的为必填项或格式填写错误",
            type: "error",
            showClose: true
          });
          return false;
        }
      });
    },
    back () {
      if (this.edited) {
        this.$confirm("租户信息尚未保存，确定要离开吗？", "提示", {
          type: "warning"
        })
          .then(() => {
            this.$router.push({
              name: "lessee"
            });
          })
          .catch(() => { });
      } else {
        this.$router.push({
          name: "lessee"
        });
      }
    },
    addServe () {
      this.save("ruleForm");
    },
    check (msg) {
      this.checkMsg = msg;
    }
  }
};
</script>
<style scoped lang="scss">
.form,
.head2 {
  margin-top: 40px;
}
.talk {
  color: #666666;
  cursor: pointer;
  height: 19px;
  line-height: 19px;
  font-size: 25px;
}
.aaa {
  /deep/.el-form-item__error {
    display: none;
  }
}
</style>