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

<template>
  <el-dialog
    v-dialogDrag
    :fullscreen="dialogFull"
    :title="!dataForm.id ? '车队注册' : '修改'"
    :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="companyName">
        <el-input v-model="dataForm_s.companyName" placeholder="公司名称" :disabled="doNot"></el-input>
      </el-form-item>
      <el-form-item label="公司地址" prop="companyAddress">
        <el-input v-model="dataForm_s.companyAddress" placeholder="公司地址" :disabled="doNot"></el-input>
      </el-form-item>
      <el-form-item label="公司开户行" prop="openingBank">
        <el-input v-model="dataForm_s.openingBank" placeholder="公司开户行" :disabled="doNot"></el-input>
      </el-form-item>
      <el-form-item label="银行账号" prop="bankAccount">
        <el-input v-model="dataForm_s.bankAccount" placeholder="银行账号" :disabled="doNot"></el-input>
      </el-form-item>
      <el-form-item label="登录账号" prop="loginAccount">
        <el-input v-model="dataForm_s.loginAccount" :disabled="dataForm.id ? edit:false || doNot" placeholder="登录账号"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="pwd" v-if="dataForm_s.id ? false:true">
        <el-input v-model="dataForm_s.pwd" placeholder="登录密码" type="password" :disabled="doNot"></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="linkMan">
        <el-input v-model="dataForm_s.linkMan" placeholder="联系人" :disabled="doNot"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="linkPhone">
        <el-input v-model="dataForm_s.linkPhone" placeholder="联系电话" :disabled="doNot"></el-input>
      </el-form-item>
      <el-form-item label="传真" prop="fax">
        <el-input v-model="dataForm_s.fax" placeholder="传真" :disabled="doNot"></el-input>
      </el-form-item>
      <el-form-item label="email" prop="email">
        <el-input v-model="dataForm_s.email" placeholder="email" :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-input v-model="dataForm_s.businessDeadline" placeholder="营业期限" :disabled="doNot"></el-input>
      </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-item label="登录密码确认" prop="pwd2" v-if="dataForm_s.id ? false:true">
        <el-input v-model="dataForm_s.pwd2" placeholder="登录密码确认" type="password" :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,
        bankAccount: null,
        billStatus: null,
        businessArea: null,
        businessDeadline: null,
        carNum: null,
        companyAddress:null,
        companyName: null,
        companyType: null,
        creatTime: null,
        createBy: null,
        createTime: null,
        creditLv: null,
        creditNum: null,
        dateOfEstablishment: null,
        delFlag: null,
        email: null,
        fax: null,
        headOffice: null,
        id: null,
        industryCommerceNum: null,
        insdustry: null,
        legalPerson: null,
        linkMan: null,
        linkPhone:null,
        loginAccount: null,
        manageScope: null,
        modificationTime: null,
        openingBank: 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.id,
      dataRule: {
        companyName: [
          {required: true, message: '请输入公司名称', trigger: 'blur'}
        ],
        companyAddress: [
          {required: true, message: '请输入公司地址', trigger: 'blur'}
        ],
        loginAccount: [
          {required: true, message: '请输入登录账号', trigger: 'blur'}
        ],
        pwd: [
          {required: true, message: '请输入登录密码', trigger: 'blur'}
        ],
        openingBank: [
          {required: true, message: '请输入开户行', trigger: 'blur'}
        ],
        bankAccount: [
          {required: true, message: '请输入银行账号', trigger: 'blur'}
        ],
        paymentDays: [
          {required: true, message: '请输入账期天数', trigger: 'blur'}
        ],
        pwd2: [
          {required: true, message: '请输入登录密码', trigger: 'blur'}
        ],
        linkPhone: [
          {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.id !== null){
          lookOver(this.dataForm.id).then(data=>{
            this.doNot = true
            this.dataForm_s = data.data
          })
        }else{
          this.dataForm_s = {
            annualDate:null,
            bankAccount: null,
            billStatus: null,
            businessArea: null,
            businessDeadline: null,
            carNum: null,
            companyAddress:null,
            companyName: null,
            companyType: null,
            creatTime: null,
            createBy: null,
            createTime: null,
            creditLv: null,
            creditNum: null,
            dateOfEstablishment: null,
            delFlag: null,
            email: null,
            fax: null,
            headOffice: null,
            id: null,
            industryCommerceNum: null,
            insdustry: null,
            legalPerson: null,
            linkMan: null,
            linkPhone:null,
            loginAccount: null,
            manageScope: null,
            modificationTime: null,
            openingBank: 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 () {
      if (this.dataForm_s.pwd != this.dataForm_s.pwd2) {
        this.$message.error('前后输入密码不一致!')
        return
      }
      this.$refs['dataForm_s'].validate((valid) => {
        if (valid) {
          console.log(valid)
          preservation(this.dataForm_s).then(data=>{
            this.$message.success('操作成功')
            this.closeDia()
          })
        }
      })
    }
  },
  handlePreview (file) {
  },
  handleExceed (files, fileList) {
    this.$message.warning(
      `当前限制选择 3 个文件，本次选择了 ${
        files.length
      } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    )
  },
  closeDia () {
    this.visible = false
    this.$emit('refreshDataList')
    Object.assign(this.$data, this.$options.data.call(this))
  },
  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,.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 20px;
  float: left;
}
</style>