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

<template>
  <el-dialog
    v-dialogDrag
    :fullscreen="dialogFull"
    :title="!dataForm.Id ? '车辆注册' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%"
  >
    <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="dataFormD"
      :rules="dataRule"
      ref="dataFormD"
      @keyup.enter.native="dataFormSubmit()"
      label-width="125px"
    >
      <el-form-item label="车队名称" prop="fleetCompanyId" style="width: 325px">
        <el-select
          v-model="dataFormD.fleetCompanyId"
          :disabled="doNot"
          placeholder="请选择"
          @change="changeCar(dataFormD.fleetCompanyId)"
        >
          <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="carNum" style="width: 325px">
        <el-input
          v-model="dataFormD.carNum"
          style="width: 200px"
          :disabled="doNot"
          placeholder="车牌号"
        ></el-input>
      </el-form-item>
      <el-form-item label="驾驶员" prop="driverId" style="width: 325px">
        <el-select
          v-model="dataFormD.driverId"
          :disabled="doNot"
          placeholder="驾驶员"
          @change="changeDriverId"
          style="width: 200px"
        >
          <el-option
            v-for="item in driverMans"
            :key="item.fId"
            :label="item.fName"
            :value="item.fId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="挂号" prop="hangNum" style="width: 325px">
        <el-input
          v-model="dataFormD.hangNum"
          style="width: 200px"
          :disabled="doNot"
          placeholder="挂号"
        ></el-input>
      </el-form-item>
      <el-form-item label="燃油类型" prop="fuelType" style="width: 325px">
        <el-input
          v-model="dataFormD.fuelType"
          style="width: 200px"
          :disabled="doNot"
          placeholder="燃油类型"
        ></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="carType" style="width: 325px">
        <el-input
          v-model="dataFormD.carType"
          style="width: 200px"
          :disabled="doNot"
          placeholder="车辆类型"
        ></el-input>
      </el-form-item>
      <el-form-item label="车辆名称" prop="carName" style="width: 325px">
        <el-input
          v-model="dataFormD.carName"
          style="width: 200px"
          :disabled="doNot"
          placeholder="车辆名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="车辆品牌" prop="carBrand" style="width: 325px">
        <el-input
          v-model="dataFormD.carBrand"
          style="width: 200px"
          :disabled="doNot"
          placeholder="车辆品牌"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="制造单位"
        prop="manufactureUnit"
        style="width: 325px"
      >
        <el-input
          v-model="dataFormD.manufactureUnit"
          style="width: 200px"
          :disabled="doNot"
          placeholder="制造单位"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="发证机关"
        prop="officeOfCertificate"
        style="width: 325px"
      >
        <el-input
          v-model="dataFormD.officeOfCertificate"
          style="width: 200px"
          :disabled="doNot"
          placeholder="发证机关"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="牵引车辆型号"
        prop="pullCarType"
        style="width: 325px"
      >
        <el-input
          v-model="dataFormD.pullCarType"
          style="width: 200px"
          :disabled="doNot"
          placeholder="牵引车辆型号"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="牵引车车架号"
        prop="pullCarShelfNum"
        style="width: 325px"
      >
        <el-input
          v-model="dataFormD.pullCarShelfNum"
          style="width: 200px"
          :disabled="doNot"
          placeholder="牵引车车架号"
        ></el-input>
      </el-form-item>
      <el-form-item label="挂车型号" prop="mountCarType" style="width: 325px">
        <el-input
          v-model="dataFormD.mountCarType"
          style="width: 200px"
          :disabled="doNot"
          placeholder="挂车型号"
        ></el-input>
      </el-form-item>
      <el-form-item label="挂车车架号" prop="mountCarNum" style="width: 325px">
        <el-input
          v-model="dataFormD.mountCarNum"
          style="width: 200px"
          :disabled="doNot"
          placeholder="挂车车架号"
        ></el-input>
      </el-form-item>
      <el-form-item label="发动机型号" prop="engine" style="width: 325px">
        <el-input
          v-model="dataFormD.engine"
          style="width: 200px"
          :disabled="doNot"
          placeholder="发动机型号"
        ></el-input>
      </el-form-item>
      <el-form-item label="核载人数" prop="carLoadPersion" style="width: 325px">
        <el-input
          v-model="dataFormD.carLoadPersion"
          style="width: 200px"
          :disabled="doNot"
          placeholder="核载人数"
        ></el-input>
      </el-form-item>
      <el-form-item label="购车日期" prop="buyCarDate" style="width: 325px">
        <!--            <el-input v-model="dataForm.buyCarDate" placeholder="购车日期"></el-input>-->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataFormD.buyCarDate"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="注册日期" prop="regiestDate" style="width: 325px">
        <!--            <el-input v-model="dataForm.regiestDate" placeholder="注册日期"></el-input>-->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataFormD.regiestDate"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="报废日期" prop="abandonDate" style="width: 325px">
        <!--            <el-input v-model="dataForm.abandonDate" placeholder="报废日期"></el-input>-->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataFormD.abandonDate"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="外阔尺寸mm" prop="outerSize" style="width: 325px">
        <el-input
          v-model="dataFormD.outerSize"
          style="width: 200px"
          :disabled="doNot"
          placeholder="外阔尺寸mm"
        ></el-input>
      </el-form-item>
      <el-form-item label="总重量kg" prop="sumWeight" style="width: 325px">
        <el-input
          v-model="dataFormD.sumWeight"
          style="width: 200px"
          :disabled="doNot"
          placeholder="总重量kg"
        ></el-input>
      </el-form-item>
      <el-form-item label="核定重量kg" prop="vouchWeight" style="width: 325px">
        <el-input
          v-model="dataFormD.vouchWeight"
          style="width: 200px"
          :disabled="doNot"
          placeholder="核定重量kg"
        ></el-input>
      </el-form-item>
      <el-form-item label="装备质量kg" prop="equipWeight" style="width: 325px">
        <el-input
          v-model="dataFormD.equipWeight"
          style="width: 200px"
          :disabled="doNot"
          placeholder="装备质量kg"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-collapse accordion>
      <el-form label-width="200px">
        <el-collapse-item title="图片上传">
          <div style="width: 50%; float: left">
            <el-form-item label="行驶证头图片" style="width: 100%">
              <el-upload
                style="width: 300px; float: left"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(0, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(1, 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="fTmsorderbillsattachs[0].attachUrl"
                  @click="preview(0)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="运营证头图片" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(2, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(3, 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="fTmsorderbillsattachs[2].attachUrl"
                  @click="preview(2)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="营运挂载图片" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(4, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(5, 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="fTmsorderbillsattachs[4].attachUrl"
                  @click="preview(4)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="二级维护图片" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(6, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(7, 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="fTmsorderbillsattachs[6].attachUrl"
                  @click="preview(6)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="承运人保险图片" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(8, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(9, 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="fTmsorderbillsattachs[8].attachUrl"
                  @click="preview(8)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
          </div>
          <div style="width: 50%; float: left">
            <el-form-item label="行驶证挂件图片" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(1, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(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="fTmsorderbillsattachs[1].attachUrl"
                  @click="preview(1)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="技术评定证书图片" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(3, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(4, 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="fTmsorderbillsattachs[3].attachUrl"
                  @click="preview(3)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="二级维护图片" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(5, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(6, 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="fTmsorderbillsattachs[5].attachUrl"
                  @click="preview(5)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
            <el-form-item label="商业保险图片1" style="width: 100%">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="
                  (res, file) => {
                    handleRemove(7, res, file);
                  }
                "
                :before-remove="beforeRemove"
                :on-success="
                  (res, file) => {
                    handleAvatarSuccess(8, 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="fTmsorderbillsattachs[7].attachUrl"
                  @click="preview(7)"
                  >预览</el-button
                >
              </el-upload>
            </el-form-item>
          </div>
        </el-collapse-item>
      </el-form>
    </el-collapse>
    <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 {
  preservation,
  company,
  lookOver,
  driverMsglist,
} from "@/api/fleet/carManage";
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 {
      hide: false,
      dialogFull: false,
      driverMans: [],
      fTmsorderbillsattachs: [
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
        { attachUrl: "", attachName: "", actId: "" },
      ],
      doNot: true,
      imageUrl: "",
      dataFormD: {},
      visible: false,
      msg: "",
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      dataRule: {
        fleetCompanyId: [
          { required: true, message: "请输入车队id", trigger: "blur" },
        ],
        carNum: [{ required: true, message: "请输入车牌号", trigger: "blur" }],
      },
      optionsProjectTypeItem: [],
    };
  },
  created() {
    this.handleSelect();
  },
  methods: {
    changeCar(id) {
      driverMsglist({ fPid: id, fStatus: 0 }).then((data) => {
        this.driverMans = data;
      });
      this.dataFormD.driverId=null
    },
    full() {
      this.dialogFull = !this.dialogFull;
    },
    // 选择司机时
    changeDriverId (val) {
      for (let driver in this.driverMans) {
        if (this.driverMans[driver].fId == val) {
          this.dataFormD.driverTel = this.driverMans[driver].fTel
          this.dataFormD.driverName = this.driverMans[driver].fName
        }
      }
    },
    handleUpdata() {
      this.doNot = false;
    },
    handleAvatarSuccess(actid, res, file) {
      switch (actid) {
        case 1:
          this.simplification(actid - 1, res);
          break;
        case 2:
          this.simplification(actid - 1, res);
          break;
        case 3:
          this.simplification(actid - 1, res);
          break;
        case 4:
          this.simplification(actid - 1, res);
          break;
        case 5:
          this.simplification(actid - 1, res);
          break;
        case 6:
          this.simplification(actid - 1, res);
          break;
        case 7:
          this.simplification(actid - 1, res);
          break;
        case 8:
          this.simplification(actid - 1, res);
          break;
        case 9:
          this.simplification(actid - 1, res);
          break;
        default:
          this.$message.error("未知错误，请稍后再试");
      }
    },
    simplification(index, res) {
      console.log(index);
      this.fTmsorderbillsattachs[index].actId = Number(index + 1);
      this.fTmsorderbillsattachs[index].attachUrl = res.url;
      this.fTmsorderbillsattachs[index].attachName = res.fileName;
    },
    handleRemove(actid, file, fileList) {
      this.fTmsorderbillsattachs[actid].attachUrl = "";
      this.fTmsorderbillsattachs[actid].attachName = "";
      this.fTmsorderbillsattachs[actid].actId = "";
    },
    handlePreview(file) {
      this.$message.success("如需预览请点击预览");
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    init() {
      this.hide = true;
      this.visible = true;
      this.changeCar();
      this.handleSelect();
      if (this.dataForm.Id) {
        lookOver(this.dataForm.Id).then((data) => {
          this.doNot = true;
          this.dataFormD = data.data.fleetCarManage;
          if (data.data.fTmsorderbillsattachs) {
            this.fTmsorderbillsattachs = data.data.fTmsorderbillsattachs;
          }

          // this.optionsProjectTypeItem = data.data.fleetCompanyMsg;
          // if (data.data.fleetCompanyMsg){
          //   this.handleSelect()
          // }
        });
      } else {
        this.dataFormD = {
          fleetCompanyId: "",
          carNum: "",
          driverId:"",
          driverName: "",
          driverTel:"",
          hangNum: "",
          fuelType: "",
          carType: "",
          carName: "",
          carBrand: "",
          manufactureUnit: "",
          officeOfCertificate: "",
          pullCarType: "",
          pullCarShelfNum: "",
          mountCarType: "",
          mountCarNum: "",
          engine: "",
          carLoadPersion: "",
          buyCarDate: "",
          regiestDate: "",
          abandonDate: "",
          outerSize: "",
          sumWeight: "",
          vouchWeight: "",
          equipWeight: "",
        };
        this.fTmsorderbillsattachs = [
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
          { attachUrl: "", attachName: "", actId: "" },
        ];
        this.hide = false;
        this.doNot = false;
      }
    },
    preview(actid) {
      console.log(this.fTmsorderbillsattachs);
      window.open(this.fTmsorderbillsattachs[actid].attachUrl);
    },
    handleSelect(query) {
      company(query).then((data) => {
        this.optionsProjectTypeItem = data.rows;
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataFormD"].validate((valid) => {
        if (valid) {
          let formDatae = new window.FormData();
          formDatae.append(
            "fTmsorderbillsattachs",
            JSON.stringify(this.fTmsorderbillsattachs)
          );
          formDatae.append("fleetCarManage", JSON.stringify(this.dataFormD));
          preservation(formDatae).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;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</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>