lemonBeans_ui/src/views/basicdata/fleet/companyMsg-add-or-update.vue

<template>
  <el-dialog
    v-dialogDrag
    :fullscreen="dialogFull"
    :title="!dataForm.fId ? '车队注册' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70%"
    :before-close="handleClose"
  >
    <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 class="avue-crud__dialog__menu enlarge" @click="full">
          <i
            style="
              cursor: pointer;
              display: block;
              width: 12px;
              height: 12px;
              border: 1px solid #909399;
              border-top: 3px solid #909399;
              margin-top: -3px;
            "
          ></i>
        </div>
      </div>
    </template>

    <el-form
      :model="dataForm_s"
      :rules="dataRule"
      ref="dataForm_s"
      @keyup.enter.native="dataFormSubmit()"
      label-width="200px"
    >
      <el-form-item label="公司名称" prop="fName">
        <el-input
          v-model="dataForm_s.fName"
          placeholder="公司名称"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司地址" prop="fAddr">
        <el-input
          v-model="dataForm_s.fAddr"
          placeholder="公司地址"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="公司开户行" prop="fBankname">
        <el-input
          v-model="dataForm_s.fBankname"
          placeholder="公司开户行"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="银行账号" prop="fBankno">
        <el-input
          v-model="dataForm_s.fBankno"
          placeholder="银行账号"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="登录账号" prop="loginAccount">
        <el-input
          v-model="dataForm_s.loginAccount"
          :disabled="dataForm.fId ? edit : false || doNot"
          placeholder="登录账号"
        ></el-input>
      </el-form-item>
      <el-form-item label="信用等级" prop="creditLv">
        <el-input
          v-model="dataForm_s.creditLv"
          placeholder="信用等级"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="账期天数(最迟结款天数)" prop="paymentDays">
        <el-input
          v-model="dataForm_s.paymentDays"
          placeholder="账期天数(最迟结款天数)"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="fManage">
        <el-input
          v-model="dataForm_s.fManage"
          placeholder="联系人"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="fTel">
        <el-input
          v-model="dataForm_s.fTel"
          placeholder="联系电话"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="传真" prop="fFax">
        <el-input
          v-model="dataForm_s.fFax"
          placeholder="传真"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="fEmail">
        <el-input
          v-model="dataForm_s.fEmail"
          placeholder="fEmail"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="总公司" prop="headOffice">
        <el-input
          v-model="dataForm_s.headOffice"
          placeholder="总公司"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="注册资本" prop="registerdCapital">
        <el-input
          v-model="dataForm_s.registerdCapital"
          placeholder="注册资本"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="法人" prop="legalPerson">
        <el-input
          v-model="dataForm_s.legalPerson"
          placeholder="法人"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属行业" prop="insdustry">
        <el-input
          v-model="dataForm_s.insdustry"
          placeholder="所属行业"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="社会统一信用代码" prop="creditNum">
        <el-input
          v-model="dataForm_s.creditNum"
          placeholder="社会统一信用代码"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="纳税人识别号" prop="taxpayerNum">
        <el-input
          v-model="dataForm_s.taxpayerNum"
          placeholder="纳税人识别号"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="工商注册号" prop="industryCommerceNum">
        <el-input
          v-model="dataForm_s.industryCommerceNum"
          placeholder="工商注册号"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="组织机构代码" prop="organizationNum">
        <el-input
          v-model="dataForm_s.organizationNum"
          placeholder="组织机构代码"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="登记机关" prop="registerOrganization">
        <el-input
          v-model="dataForm_s.registerOrganization"
          placeholder="登记机关"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="成立日期" prop="dateOfEstablishment">
        <!--            <el-input v-model="dataForm.dateOfEstablishment" placeholder="成立日期"></el-input>-->
        <el-date-picker
          style="width: 100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataForm_s.dateOfEstablishment"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="企业类型" prop="companyType">
        <el-input
          v-model="dataForm_s.companyType"
          placeholder="企业类型"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="营业期限" prop="businessDeadline">
        <el-date-picker
          style="width: 100%"
          value-format="yyyy-MM-dd"
          v-model="dataForm_s.businessDeadline"
          type="date"
          :disabled="doNot"
          placeholder="营业期限"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="营业区域" prop="businessArea">
        <el-input
          v-model="dataForm_s.businessArea"
          placeholder="营业区域"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="审核年检日期" prop="annualDate">
        <!--            <el-input v-model="dataForm.annualDate" placeholder="审核年检日期"></el-input>-->
        <el-date-picker
          style="width: 100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataForm_s.annualDate"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="注册地址" prop="registerdAddress">
        <el-input
          v-model="dataForm_s.registerdAddress"
          placeholder="注册地址"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
      <el-form-item label="经营范围" prop="manageScope">
        <el-input
          v-model="dataForm_s.manageScope"
          placeholder="经营范围"
          :disabled="doNot"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="info" @click="handleUpdata" v-if="hide">修改</el-button>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :disabled="doNot"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { preservation, lookOver } from "@/api/fleet/companyMsg";
import Vue from "vue";
Vue.directive("dialogDrag", {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector(".el-dialog__header");
    const dragDom = el.querySelector(".el-dialog");
    const enlarge = el.querySelector(".enlarge");
    dialogHeaderEl.style.cursor = "move";

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    if (enlarge) {
      enlarge.onclick = (e) => {
        dragDom.style.top = "0px";
        dragDom.style.left = "0px";
      };
    }
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;

      // 获取到的值带px 正则匹配替换
      let styL, styT;

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes("%")) {
        styL =
          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
        styT =
          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/\px/g, "");
        styT = +sty.top.replace(/\px/g, "");
      }

      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        const t = e.clientY - disY;

        // 移动当前元素

        if (t + styT >= 0) {
          dragDom.style.top = `${t + styT}px`;
        }
        dragDom.style.left = `${l + styL}px`;
        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});

export default {
  props: {
    dataForm: {
      type: Object,
      require: false,
    },
  },
  data() {
    return {
      hide: false,
      doNot: true,
      dialogFull: false,
      dataForm_s: {
        annualDate: null,
        fBankno: null,
        billStatus: null,
        businessArea: null,
        businessDeadline: null,
        carNum: null,
        fAddr: null,
        fName: null,
        companyType: null,
        creatTime: null,
        createBy: null,
        createTime: null,
        creditLv: null,
        creditNum: null,
        dateOfEstablishment: null,
        delFlag: null,
        fEmail: null,
        fFax: null,
        headOffice: null,
        fId: null,
        industryCommerceNum: null,
        insdustry: null,
        legalPerson: null,
        fManage: null,
        fTel: null,
        loginAccount: null,
        manageScope: null,
        modificationTime: null,
        fBankname: null,
        organizationNum: null,
        params: null,
        paymentDays: null,
        registerOrganization: null,
        registerdAddress: null,
        registerdCapital: null,
        remark: null,
        searchValue: null,
        taxpayerNum: null,
        updateBy: null,
        updateTime: null,
      },
      visible: false,
      edit: true,
      login: this.dataForm.fId,
      dataRule: {
        fName: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
        fAddr: [{ required: true, message: "请输入公司地址", trigger: "blur" }],
        loginAccount: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
        ],
        fBankname: [
          { required: true, message: "请输入开户行", trigger: "blur" },
        ],
        fBankno: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
        ],
        paymentDays: [
          { required: true, message: "请输入账期天数", trigger: "blur" },
        ],
        fTel: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    full() {
      this.dialogFull = !this.dialogFull;
    },
    handleUpdata() {
      this.hide = true;
      this.doNot = false;
    },
    cancel() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.visible = false;
          this.dataForm_s = {};
        })
        .catch((_) => {});
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
          this.visible = false;
          this.dataForm_s = {};
        })
        .catch((_) => {});
    },
    init() {
      this.hide = true;
      this.visible = true;
      if (this.dataForm.fId !== null) {
        lookOver(this.dataForm.fId).then((data) => {
          this.doNot = true;
          this.dataForm_s = data.data;
        });
      } else {
        this.dataForm_s = {
          annualDate: null,
          fBankno: null,
          billStatus: null,
          businessArea: null,
          businessDeadline: null,
          carNum: null,
          fAddr: null,
          fName: null,
          companyType: null,
          creatTime: null,
          createBy: null,
          createTime: null,
          creditLv: null,
          creditNum: null,
          dateOfEstablishment: null,
          delFlag: null,
          fEmail: null,
          fFax: null,
          headOffice: null,
          id: null,
          industryCommerceNum: null,
          insdustry: null,
          legalPerson: null,
          fManage: null,
          fTel: null,
          loginAccount: null,
          manageScope: null,
          modificationTime: null,
          fBankname: null,
          organizationNum: null,
          params: null,
          paymentDays: null,
          registerOrganization: null,
          registerdAddress: null,
          registerdCapital: null,
          remark: null,
          searchValue: null,
          taxpayerNum: null,
          updateBy: null,
          updateTime: null,
        };
        this.hide = false;
        this.doNot = false;
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm_s"].validate((valid) => {
        if (valid) {
          console.log(valid);
          preservation(this.dataForm_s).then((data) => {
            this.$message.success("操作成功");
            this.closeDia();
          });
        }
      });
    },
    closeDia() {
      this.visible = false;
      this.$emit("refreshDataList");
      Object.assign(this.$data, this.$options.data.call(this));
    },
  },
  handlePreview(file) {},
  handleExceed(files, fileList) {
    this.$message.warning(
      `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
        files.length + fileList.length
      } 个文件`
    );
  },
  beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${file.name}？`);
  },
};
</script>
<style scoped>
.el-form-item {
  width: 49%;
  margin-bottom: 20px;
  display: inline-block;
}
.el-select {
  display: block;
}
.upload-demo {
  margin-left: 50px;
}
</style>

<style lang="scss">
.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-dialog__title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 20px;
  float: left;
}
</style>