logpm_page/src/views/basicdata/driverArtery/basicdataDriverArteryAdd.vue

<template>
  <basic-container v-loading="loadingObj.pageLoading">
    <div class="avue-crud">
      <el-form label-width="140px" ref="formRef" :inline="true" :model="form">
        <el-form-item
          style="width: 30%"
          :label="item.label"
          v-for="item in option"
          :key="item.prop"
          :prop="item.prop"
          :rules="item.rules"
        >
          <!-- 输入框 -->
          <el-input
            clearable
            v-model="form[item.prop]"
            @input="() => item.input && item.input(form[item.prop], item)"
            v-if="item.type == 'input'"
            :placeholder="item.placeholder || '请输入' + item.label"
          />

          <!-- 数字输入框 -->
          <el-input-number
            v-model="form[item.prop]"
            @input="() => item.input && item.input(form[item.prop], item)"
            clearable
            v-else-if="item.type == 'number'"
            :precision="item.precision"
            :min="item.min || 0"
            :controls="false"
            :placeholder="item.placeholder || '请输入' + item.label"
            class="w100"
            :value-on-clear="item.min || 0"
          />

          <!-- 日期 -->
          <el-date-picker
            v-model="form[item.prop]"
            v-else-if="item.type == 'date'"
            clearable
            type="date"
            :placeholder="item.placeholder || '请选择' + item.label"
            class="w100"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
          />

          <!-- 下拉框 -->
          <el-select
            v-else-if="item.type == 'select'"
            v-model="form[item.prop]"
            class="w100"
            clearable
            :placeholder="item.placeholder || '请选择' + item.label"
            :multiple="item.multiple || false"
            :filterable="item.filterable || false"
          >
            <el-option
              v-for="value in item.options"
              :key="value.dictKey"
              :label="value.dictValue"
              :value="value.dictKey"
            />
          </el-select>
        </el-form-item>

        <div class="img-container">
          <el-form-item
            style="width: 30%"
            :label="item.label"
            v-for="item in imgOption"
            :key="item.prop"
            :prop="item.prop"
            :rules="item.rules"
          >
            <div v-loading="item.loading">
              <el-upload
                list-type="picture-card"
                :show-file-list="false"
                :on-preview="handlePreview"
                :action="'/api/blade-resource/oss/endpoint/put-file'"
                :on-success="file => handleUpLoadSuccess(file, item)"
                :before-upload="file => handleBeforeUpload(file, item)"
                :on-exceed="() => handleImgError(item)"
                :headers="headers"
              >
                <div v-if="form[item.prop]" @click.stop class="upLoadImg_box">
                  <el-image
                    :src="form[item.prop]"
                    class="avatar"
                    :preview-src-list="[form[item.prop]]"
                  />

                  <div class="clearIcon" @click="() => handleRemoveImg(item)">
                    <el-icon color="#f00"><DeleteFilled /></el-icon>
                  </div>
                </div>
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </div>
          </el-form-item>
        </div>

        <el-form-item
          style="width: 100%"
          :label="item.label"
          v-for="(item, index) in fileOption"
          :key="item.prop"
          :prop="item.prop"
          :rules="item.rules"
        >
          <div v-loading="item.loading" style="width: 100%">
            <el-upload
              ref="upload"
              style="width: 100%"
              :action="'/api/blade-resource/oss/endpoint/put-file'"
              :on-success="file => handleUpLoadSuccess(file, item)"
              :before-upload="
                file => {
                  const typeArr = file.name.split('.');
                  const type = typeArr[typeArr.length - 1];
                  item.loading = true;
                  return file;
                }
              "
              :on-exceed="
                files => {
                  try {
                    console.log('$refs :>> ', $refs);
                    $refs.upload[index].clearFiles();
                    const file = files[0];
                    console.log('file :>> ', file);
                    $refs.upload[index].handleStart(file);
                  } catch (error) {
                    console.log('error :>> ', error);
                  }
                }
              "
              :headers="headers"
              :drag="item.drag"
              :show-file-list="false"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">请上传图片 / word文档 / pdf</div>
            </el-upload>
          </div>
          <div v-if="form[item.prop]" style="display: flex; margin-top: 20px">
            <el-link :href="form[item.prop]">{{
              form[item.prop].split('/').slice(form[item.prop].split('/').length - 1)[0]
            }}</el-link>

            <div class="clearIcon" style="margin-left: 20px" @click="() => handleRemoveImg(item)">
              <el-icon color="#fff"><DeleteFilled /></el-icon>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div class="footer_container"></div>

    <div class="submit_container">
      <el-button icon="CircleClose" @click="back">关 闭</el-button>
      <el-button icon="Refresh" type="primary" @click="handleReset">重 置</el-button>
      <el-button icon="Promotion" type="primary" @click="submitForm">保 存</el-button>
    </div>
  </basic-container>
</template>

<script>
import {
  getList,
  getDetail,
  add,
  update,
  remove,
  getPage,
} from '@/api/basicdata/basicdataDriverArtery';
/** 获取字典 */
import { getDictionaryBiz } from '@/api/system/dict';
import { getVehicle, getListName, getDictionary } from '@/api/basicdata/basicdataVehicle';
import { mapGetters } from 'vuex';
import { getToken } from '@/utils/auth';
import { downloadXls, setNodeHeight, debounce } from '@/utils/util';
import { ElMessageBox } from 'element-plus';
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';
export default {
  name: '/basicdata/driverArtery/basicdataDriverArteryAdd',
  data() {
    return {
      // 表单数据
      form: {},
      option: [
        {
          label: '姓名',
          prop: 'name',
          type: 'input',
          default: '',
          rules: [{ required: true, message: '请输入姓名!', trigger: ['blur', 'change'] }],
        },
        {
          label: '手机号码',
          prop: 'phone',
          type: 'input',
          precision: 0,
          blur(payload) {
            console.log('payload :>> ', payload);
            payload.value = payload.value + 1;
            console.log('111 :>> ', 111);
          },
          default: '',
          rules: [
            {
              required: true,
              message: '请输入电话号码',
              trigger: 'blur',
            },
          ],
        },
        {
          label: '司机类型',
          prop: 'type',
          filterable: true,
          type: 'select',
          options: [],
          default: '',
          rules: [{ required: true, message: '请选择司机类型', trigger: ['blur', 'change'] }],
        },
        {
          label: '职务类型',
          prop: 'jobType',
          filterable: true,
          type: 'select',
          options: [],
          multiple: true,
          default: [],
          rules: [{ required: true, message: '请选择职务类型', trigger: ['blur'] }],
        },
        {
          label: '准驾车型',
          prop: 'drivingType',
          filterable: true,
          type: 'select',
          default: '',
          rules: [{ required: true, message: '请选择准驾车型', trigger: ['blur', 'change'] }],
          options: [],
        },

        {
          label: '绑定车辆',
          prop: 'bindVehicles',
          filterable: true,
          type: 'select',
          remote: true,
          multiple: true,
          default: [],
          options: [],
          multiple: true,
        },
        {
          label: '合同开始时间',
          prop: 'contractStartTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          default: '',
        },
        {
          label: '合同结束时间',
          prop: 'contractEndTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          default: '',
        },
        {
          label: '身份证号',
          prop: 'idCard',
          type: 'input',
          default: '',
        },
        {
          label: '性别',
          prop: 'gender',
          filterable: true,
          type: 'select',
          options: [],
          default: '',
        },
        {
          label: '仓库',
          prop: 'warehouseIds',
          filterable: true,
          type: 'select',
          remote: true,
          options: [],
          rules: [{ required: true, message: '请选择仓库!', trigger: 'blur' }],
          multiple: true,
          default: [],
        },
        {
          label: '居住地址',
          prop: 'residentialAddress',
          type: 'input',
          default: '',
        },
        {
          label: '银行类型',
          prop: 'bankType',
          filterable: true,
          type: 'select',
          options: [],
          default: '',
        },
        {
          label: '银行卡号',
          prop: 'bankCardNub',
          type: 'input',
          default: '',
        },
        {
          label: '驾驶证号',
          prop: 'driverLicenseNub',
          type: 'input',
          default: '',
        },
        {
          label: '驾驶证发证机关',
          prop: 'driverLicenseOrgan',
          type: 'input',
          default: '',
        },
        {
          label: '驾驶证起始日期',
          prop: 'driverLicenseStartTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          default: '',
        },
        {
          label: '驾驶证到期日期',
          prop: 'driverLicenseEndTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
          default: '',
        },
        {
          label: '从业资格证编号',
          prop: 'employeeQualificationNub',
          type: 'input',
          default: '',
        },
        {
          label: '道路经营许可证号',
          prop: 'roadOperationLicenseNub',
          type: 'input',
          default: '',
        },
        {
          label: '承运商',
          prop: 'carrierId',
          type: 'select',
          filterable: true,
          options: [],
          rules: [{ required: true, message: '请选择承运商!', trigger: 'blur' }],
          default: '',
        },
        {
          label: '结算渠道',
          prop: 'settlementChannel',
          type: 'select',
          filterable: true,
          options: [
            { dictKey: '1', dictValue: '微信' },
            { dictKey: '2', dictValue: '支付宝' },
            { dictKey: '3', dictValue: '银行卡' },
            { dictKey: '4', dictValue: '现金' },
          ],
          rules: [{ required: false, message: '请选择结算渠道!', trigger: 'blur' }],
          default: '',
        },
        {
          label: '结算账号',
          prop: 'settlementAccount',
          type: 'input',
          default: '',
        },
        {
          label: '运输协议',
          prop: 'transportationAgreement',
          type: 'input',
          default: '',
        },
        {
          label: '备注',
          prop: 'notes',
          type: 'input',
          default: '',
        },
      ],
      imgOption: [
        {
          label: '人证合照照片',
          prop: 'licensePeoplePhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          multiple: false,
          loading: false,
          action: '/blade-resource/oss/endpoint/put-file',
          default: '',
        },
        {
          label: '身份证正面照片',
          prop: 'idCardFrontPhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          multiple: false,
          loading: false,
          action: '/blade-resource/oss/endpoint/put-file',
          default: '',
        },
        {
          label: '身份证背面照片',
          prop: 'idCardBackPhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          multiple: false,
          loading: false,
          action: '/blade-resource/oss/endpoint/put-file',
          default: '',
        },
        {
          label: '驾驶证照片',
          prop: 'driverLicensePhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          multiple: false,
          loading: false,
          action: '/blade-resource/oss/endpoint/put-file',
          default: '',
        },
        {
          label: '驾驶证背面照片',
          prop: 'driverLicensePhotoBack',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          multiple: false,
          loading: false,
          action: '/blade-resource/oss/endpoint/put-file',
          default: '',
        },
      ],
      fileOption: [
        {
          label: '合同',
          prop: 'contract',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          drag: true,
          loading: false,
          multiple: false,
          action: '/blade-resource/oss/endpoint/put-file',
          default: '',
        },
      ],
      rules: {},
      /** 头部 */
      headers: {
        'Blade-Auth': 'bearer ' + getToken(),
      },
      /** loading */
      loadingObj: {
        /** 表格loading */
        loading: false,
        /** 页面loading */
        pageLoading: false,
      },
      upload: '',
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.basicdataDriverArtery_add, false),
      };
    },
  },
  async created() {
    console.log('created');
    try {
      this.loadingObj.pageLoading = true;

      await Promise.all([this.onLoad(), this.hanleOptions()]);
      this.rules = this.getRules();
    } catch (error) {
      console.log('error :>> ', error);
    } finally {
      this.loadingObj.pageLoading = false;
    }
  },
  methods: {
    /** 获取验证规则 */
    getRules() {
      const _rulesArr = {};

      for (let i = 0; i < this.option.length; i++) {
        const value = this.option[i];

        if (value.rules && value.rules.length > 0) {
          _rulesArr[value.prop] = value.rules;
        }

        return _rulesArr;
      }
    },
    /** 查询车辆绑定情况 */
    getVehiclede() {
      getVehicle().then(res => {
        console.log('车辆信息', res.data.data);
        res.data.data.map(v => {});
      });
    },
    /** 获取复选框的值 */
    async hanleOptions() {
      const res = await Promise.all([
        // 司机类型
        getDictionaryBiz('basic_driver_type'),
        // 职务类型
        getDictionaryBiz('basic_driverjob_type'),
        // 准驾车型
        getDictionaryBiz('basic_driving_type'),
        // 性别
        getDictionaryBiz('sex'),
        // 银行类型
        getDictionaryBiz('basic_bank_type'),
        // 绑定车辆
        getVehicle(),
        // 仓库
        getListName({ name: '' }),
        // 承运商
        getDictionary(),
      ]);

      const _nameArr = [
        '司机类型',
        '职务类型',
        '准驾车型',
        '性别',
        '银行类型',
        '绑定车辆',
        '仓库',
        '承运商',
      ];

      for (let i = 0; i < this.option.length; i++) {
        const value = this.option[i];

        const _index = _nameArr.indexOf(value.label);
        if (_index === -1) continue;
        const response = res[_index];
        console.log('response :>> ', response);
        const { code } = response.data;
        const data = response.data.data || [];

        if (code !== 200) continue;
        if (value.label === '绑定车辆') {
          const _data = [];

          for (let index = 0; index < data.length; index++) {
            _data.push({
              dictKey: data[index].id,
              dictValue: data[index].vehicleNub,
            });
          }

          value.options = _data;
        } else if (value.label === '仓库') {
          const _data = [];

          for (let index = 0; index < data.length; index++) {
            _data.push({
              dictKey: data[index].id,
              dictValue: data[index].name,
            });
          }
          value.options = _data;
        } else if (value.label === '承运商') {
          const _data = [];

          for (let index = 0; index < data.length; index++) {
            _data.push({
              dictKey: data[index].id,
              dictValue: data[index].carrierName,
            });
          }
          value.options = _data;
        } else value.options = data;
      }
      console.log('res :>> ', res);
    },
    /** 上传前 */
    async handleBeforeUpload(file, item) {
      try {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
          return false;
        }
        item.loading = true;
        const res = await compressImageBlob(file);
        return res;
      } catch (error) {
        console.log('error :>> ', error);
      }
    },
    /** 上传成功 */
    handleUpLoadSuccess(file, item) {
      console.log('file :>> ', file);
      console.log(' this.form :>> ', this.form);
      item.loading = false;
      if (file.code !== 200) return;
      this.form[item.prop] = file.data.link;
    },
    /** 移除图片 */
    handleRemoveImg(item) {
      this.form[item.prop] = '';
    },
    handleImgError(item) {
      this.$message.error(item.label + '仅需上传一张图片');
    },
    handlePreview(file) {
      console.log('file :>> ', file);
    },
    async onLoad() {
      const _id = this.$route.query.id;

      for (let i = 0; i < this.option.length; i++) {
        const val = this.option[i];

        this.form[val.prop] = val.default;
      }

      for (let i = 0; i < this.imgOption.length; i++) {
        const val = this.imgOption[i];

        this.form[val.prop] = val.default;
      }

      for (let i = 0; i < this.fileOption.length; i++) {
        const val = this.fileOption[i];

        this.form[val.prop] = val.default;
      }

      if (!_id) return;

      const res = await getDetail(_id);

      const { code, data } = res.data;
      if (code !== 200) return;
      const _data = data;
      this.form = {
        ..._data,
      };
      this.form.jobType = this.form.jobTypeString;
      this.form.bindVehicles = _data.bindVehicles && _data.bindVehicles.split(',');
      this.form.warehouseIds = _data.warehouses.map(val => val.warehouseId);
      console.log('_data :>> ', _data);
    },
    /** 新增 */
    async handleAdd() {
      try {
        this.loadingObj.pageLoading = true;

        const submitData = { ...this.form };
        submitData.bindVehicles = this.form.bindVehicles && this.form.bindVehicles.join(',');
        submitData.phone = this.form.phone.trim();
        submitData.jobType = submitData.jobType.join(',');

        const res = await add(submitData);
        const { code, msg } = res.data;
        if (code !== 200) return;
        this.$message.success(msg);

        ElMessageBox.confirm('是否继续添加?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          distinguishCancelAndClose: true,
          type: 'warning',
        })
          .then(() => {
            submitData.jobType = [];
            this.$refs.formRef.resetFields();
          })
          .catch(() => this.back());
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.loadingObj.pageLoading = false;
      }
    },
    /** 编辑 */
    async handleEdit() {
      try {
        this.loadingObj.pageLoading = true;

        const submitData = { ...this.form };
        submitData.bindVehicles = this.form.bindVehicles && this.form.bindVehicles.join(',');
        submitData.phone = this.form.phone.trim();
        submitData.jobType = submitData.jobType.join(',');
        const res = await update(submitData);
        const { code, msg } = res.data;
        if (code !== 200) return;
        this.$message.success(msg);

        this.back();
      } catch (error) {
        console.log('error :>> ', error);
      } finally {
        this.loadingObj.pageLoading = false;
      }
    },
    submitForm() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return;
        console.log('this.form :>> ', this.form);
        ElMessageBox.confirm('是否确定提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const { type } = this.$route.query;
          // 新增
          if (type === 'add') this.handleAdd();
          else if (type === 'edit') this.handleEdit();
        });
      });
    },
    /** 重置 */
    handleReset() {
      ElMessageBox.confirm('是否重置数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const { type } = this.$route.query;
        // 新增
        this.$refs.formRef.resetFields();
        if (type === 'edit') this.onLoad();
      });
    },
    back() {
      const { backPath } = this.$route.query;
      this.$store.commit('DEL_TAG_CURRENT');
      backPath ? this.$route.push({ path: backPath }) : this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="scss">
:deep(.header_search .el-date-editor.el-input__wrapper) {
  height: 100% !important;
}

// 标题
:deep(.el-divider__text.is-left) {
  font-size: 20px;
  font-weight: bold;
  color: var(--el-color-primary);
}

.w100 {
  width: 100% !important;
}

// 数字输入框
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}

// 日期选择框
:deep(.el-date-editor--date) {
  width: 100% !important;
  height: 100% !important;
}

.img-container {
  display: flex;
  flex-wrap: wrap;
}

.avatar {
  width: 147px;
  height: 147px;
  display: block;
}

.clearIcon {
  right: 10px;
  top: 10px;
  transition: all 0.3s;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  background-color: #f00;
}

.upLoadImg_box {
  position: relative;

  .clearIcon {
    opacity: 0;
    position: absolute;
    background-color: #fff;
  }

  &:hover {
    .clearIcon {
      cursor: pointer;
      opacity: 1;
    }
  }
}

.footer_container {
  height: 60px;
}

.submit_container {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
}
</style>