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

<template>
  <el-dialog
    v-dialogDrag
    :fullscreen="dialogFull"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70%"
  >
    <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>
          {{ !dataForm.id ? "新增" : this.hide ? "查看" : "修改" }}
        </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="dataFormD"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="200px"
    >
      <el-form-item label="驾驶员所属公司" prop="fPid">
        <el-select
          v-model="dataFormD.fPid"
          :disabled="doNot"
          placeholder="请选择"
        >
          <el-option
            v-for="item in optionsProjectTypeItem"
            :key="item.fId"
            :label="item.fName"
            :value="item.fId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="驾驶员姓名" prop="fName">
        <el-input
          v-model="dataFormD.fName"
          :disabled="doNot"
          placeholder="驾驶员姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="fFax">
        <!--            <el-input v-model="dataForm.fFax" placeholder="性别（0男/1女）"></el-input>-->
        <el-radio-group
          style="margin-left: 20px"
          :disabled="doNot"
          v-model="dataFormD.fFax"
        >
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="fContractb">
        <!--            <el-input v-model="dataForm.fContractb" placeholder="出生日期"></el-input>-->
        <el-date-picker
          style="width: 100%"
          value-format="yyyy-MM-dd"
          v-model="dataFormD.fContractb"
          type="date"
          :disabled="doNot"
          placeholder="出生日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="准驾车型" prop="fEaddr">
        <el-input
          v-model="dataFormD.fEaddr"
          :disabled="doNot"
          placeholder="准驾车型"
        ></el-input>
      </el-form-item>
      <el-form-item label="初次领证日期" prop="fContracte">
        <!--            <el-input v-model="dataForm.fContracte" placeholder="初次领证日期"></el-input>-->
        <el-date-picker
          style="width: 100%"
          value-format="yyyy-MM-dd"
          v-model="dataFormD.fContracte"
          type="date"
          :disabled="doNot"
          placeholder="初次领证日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="身份证号" prop="fScale">
        <el-input
          v-model="dataFormD.fScale"
          :disabled="doNot"
          placeholder="身份证号"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="fTel">
        <el-input
          v-model="dataFormD.fTel"
          :disabled="doNot"
          placeholder="联系电话"
           maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="家庭住址" prop="fAddr">
        <el-input
          v-model="dataFormD.fAddr"
          :disabled="doNot"
          placeholder="家庭住址"
        ></el-input>
      </el-form-item>
      <br />
      <el-form-item label="个人照片" prop="registerdAddress">
        <el-upload
          style="width: 300px"
          :action="uploadImgUrl"
          :before-remove="beforeRemove"
          :on-remove="
            (res, file) => {
              handleRemove(2, res, file);
            }
          "
          :on-success="
            (res, file) => {
              handleSuccess(1, res, file);
            }
          "
          multiple
          :disabled="doNot"
          :limit="1"
          :headers="headers"
          :on-exceed="handleExceed"
        >
          <el-button size="small" type="primary" :disabled="doNot"
            >点击上传</el-button
          >
          <el-button
            size="small"
            type="primary"
            :disabled="doNot"
            v-if="dataFormD.registerdAddress"
            @click="preview(1)"
            >预览</el-button
          >
        </el-upload>
      </el-form-item>
      <el-form-item label="驾驶证照片" prop="manageScope">
        <el-upload
          style="width: 300px"
          :action="uploadImgUrl"
          :before-remove="beforeRemove"
          :on-remove="
            (res, file) => {
              handleRemove(2, res, file);
            }
          "
          :on-success="
            (res, file) => {
              handleSuccess(2, res, file);
            }
          "
          multiple
          :disabled="doNot"
          :limit="1"
          :headers="headers"
          :on-exceed="handleExceed"
        >
          <el-button size="small" :disabled="doNot" type="primary"
            >点击上传</el-button
          >
          <el-button
            size="small"
            :disabled="doNot"
            type="primary"
            v-if="dataFormD.manageScope"
            @click="preview(2)"
            >预览</el-button
          >
        </el-upload>
      </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="visible = false">取消</el-button>
      <el-button type="primary" :disabled="doNot" @click="dataFormSubmit()"
        >确定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import { company, lookOver, preservation } from "@/api/fleet/driverMsg";
import { getToken } from "@/utils/auth";
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 {
      dialogFull: false,
      hide: false,
      doNot: true,
      visible: false,
      dataFormD: {},
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      dataRule: {
        fPid: [
          {
            required: true,
            message: "请选择驾驶员所属公司id",
            trigger: "blur",
          },
        ],
        fName: [
          { required: true, message: "请输入驾驶员姓名", trigger: "blur" },
        ],
        fScale: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        fTel: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[0123456789]\d{9}))$/,
            message: "请正确输入手机号",
            trigger: "blur",
          },
        ],
      },
      optionsProjectTypeItem: [],
      fileList: [],
      uploadHeaders: {
        // localStorage.setItem('token', data.token)
        token: localStorage.getItem("token"),
      },
      uploadURL:
        "http://test.echepei.com/api/admin/fleet/carManage/uplodaImgForDrivingLicense",
    };
  },
  methods: {
    full() {
      this.dialogFull = !this.dialogFull;
    },
    handleUpdata() {
      this.hide = false;
      this.doNot = false;
    },
    preview(actid) {
      if (actid === 1) {
        window.open(this.dataFormD.registerdAddress);
      } else {
        window.open(this.dataFormD.manageScope);
      }
    },
    handlePreview(file) {
      this.$message.success("如需预览请点击预览");
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.fName}？`);
    },
    init() {
      this.hide = true;
      this.visible = true;
      this.needCondition();
      console.log(this.dataForm);
      if (this.dataForm.id) {
        lookOver(this.dataForm.id).then((data) => {
          this.doNot = true;
          this.dataFormD = data.data;
          this.dataFormD.fFax = Number(data.data.fFax);
          this.fTmsorderbillsattachs = data.data.fTmsorderbillsattachs;
          this.optionsProjectTypeItem = data.data.fleetCompanyMsg;
          if (data.data.fleetCompanyMsg) {
            this.handleSelect();
          }
        });
      } else {
        this.dataFormD = {
          fPid: "",
          fName: "",
          fFax: "",
          fContractb: "",
          fEaddr: "",
          fContracte: "",
          fScale: "",
          fTel: "",
          fAddr: "",
          registerdAddress: "",
          manageScope: "",
        };
        this.hide = false;
        this.doNot = false;
      }
    },
    // 获取下拉选项
    needCondition() {
      company().then((data) => {
        console.log(data);
        if (data && data.code === 200) {
          this.optionsProjectTypeItem = data.rows;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 图片上传回调
    handleSuccess(response, res, file) {
      console.log(response);
      if (response === 2) {
        console.log("22222");
        this.dataFormD.manageScope = res.url;
        console.log(this.dataFormD.manageScope);
      } else {
        console.log("11111");
        this.dataFormD.registerdAddress = res.url;
      }
    },
    // 文件列表移除文件时的钩子
    handleRemove(actid, file, fileList) {
      if (actid === 1) {
        this.dataForm.registerdAddress = "";
      } else {
        this.dataForm.manageScope = "";
      }
    },
    // 表单提交
    dataFormSubmit() {
      console.log(this.dataFormD);
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          preservation(this.dataFormD).then((data) => {
            if (data && data.code === 200) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.el-form-item {
  width: 49%;
  margin-bottom: 20px;
  display: inline-block;
}
.el-select {
  display: block;
}
.upload-demo {
  margin-left: 50px;
}
.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>