logpm_page/src/views/basicdata/driverArtery/basicdataDriverArteryView.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"
        >
          <!-- 输入框 -->
          <el-input
            readonly
            clearable
            v-model="form[item.prop]"
            @input="() => item.input && item.input(form[item.prop], item)"
            v-if="item.type == 'input'"
          />

          <!-- 数字输入框 -->
          <el-input-number
            readonly
            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"
            class="w100"
            :value-on-clear="item.min || 0"
          />

          <!-- 日期 -->
          <el-date-picker
            readonly
            v-model="form[item.prop]"
            v-else-if="item.type == 'date'"
            clearable
            type="date"
            :disabled-date="disabledDate"
            class="w100"
            :value-format="item.valueFormat || 'yyyy-MM-dd'"
          />

          <!-- 下拉框 -->
          <el-select
            disabled
            v-else-if="item.type == 'select'"
            v-model="form[item.prop]"
            class="w100"
            clearable
            :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"
          >
            <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>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="submit_container">
      <el-button icon="CircleClose" @click="back">关 闭</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';
export default {
  data() {
    return {
      // 表单数据
      form: {},
      option: [
        {
          label: '姓名',
          prop: 'name',
          type: 'input',
          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);
          },

          rules: [
            {
              required: true,
              message: '请输入电话号码',
              trigger: 'blur',
            },
          ],
        },
        {
          label: '司机类型',
          prop: 'type',
          filterable: true,
          type: 'select',
          dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driver_type',
          options: [],
        },
        {
          label: '职务类型',
          prop: 'jobType',
          filterable: true,
          type: 'select',
          dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driverjob_type',
          options: [],
        },
        {
          label: '准驾车型',
          prop: 'drivingType',
          filterable: true,
          type: 'select',
          dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_driving_type',
          options: [],
        },

        {
          label: '绑定车辆',
          prop: 'bindVehicles',
          filterable: true,
          type: 'select',
          remote: true,
          multiple: true,
          // dicData: [],
          dicUrl: '/api/logpm-basicdata/vehicle/dictionary?vehicleNub={{key}}',
          options: [],
          multiple: true,
        },
        {
          label: '合同开始时间',
          prop: 'contractStartTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
        {
          label: '合同结束时间',
          prop: 'contractEndTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
        {
          label: '身份证号',
          prop: 'idCard',
          type: 'number',
        },
        {
          label: '性别',
          prop: 'gender',
          filterable: true,
          type: 'select',

          dicUrl: '/api/blade-system/dict-biz/dictionary?code=sex',
          options: [],
        },
        {
          label: '仓库',
          prop: 'warehouseIds',
          filterable: true,
          type: 'select',
          remote: true,
          dicUrl: '/logpm-basicdata/warehouse/listName?name={{key}}',
          options: [],
          rules: [{ required: true, message: '请选择仓库!', trigger: 'blur' }],
          multiple: true,
        },
        {
          label: '居住地址',
          prop: 'residentialAddress',
          type: 'input',
        },
        {
          label: '银行类型',
          prop: 'bankType',
          filterable: true,
          type: 'select',
          dicUrl: '/api/blade-system/dict-biz/dictionary?code=basic_bank_type',
          options: [],
        },
        {
          label: '银行卡号',
          prop: 'bankCardNub',
          type: 'number',
        },
        {
          label: '驾驶证号',
          prop: 'driverLicenseNub',
          type: 'input',
        },
        {
          label: '驾驶证发证机关',
          prop: 'driverLicenseOrgan',
          type: 'input',
        },
        {
          label: '驾驶证起始日期',
          prop: 'driverLicenseStartTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
        {
          label: '驾驶证到期日期',
          prop: 'driverLicenseEndTime',
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD',
        },
        {
          label: '从业资格证编号',
          prop: 'employeeQualificationNub',
          type: 'input',
        },
        {
          label: '道路经营许可证号',
          prop: 'roadOperationLicenseNub',
          type: 'input',
        },
        {
          label: '承运商',
          prop: 'carrierId',
          filterable: true,
          type: 'select',
          filterable: true,
          dicUrl: '/api/logpm-basicdata/carrier/dictionary',
          options: [],
          rules: [{ required: true, message: '请选择承运商!', trigger: 'blur' }],
        },
        {
          label: '运输协议',
          prop: 'transportationAgreement',
          type: 'input',
        },
        {
          label: '备注',
          prop: 'notes',
          type: 'input',
        },
      ],
      imgOption: [
        {
          label: '人证合照照片',
          prop: 'licensePeoplePhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          hide: true,
          multiple: false,
          action: '/blade-resource/oss/endpoint/put-file',
          propsHttp: {
            res: 'data',
            url: 'link',
          },
        },
        {
          label: '身份证正面照片',
          prop: 'idCardFrontPhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          hide: true,
          multiple: false,
          action: '/blade-resource/oss/endpoint/put-file',
          propsHttp: {
            res: 'data',
            url: 'link',
          },
        },
        {
          label: '身份证背面照片',
          prop: 'idCardBackPhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          hide: true,
          multiple: false,
          action: '/blade-resource/oss/endpoint/put-file',
          propsHttp: {
            res: 'data',
            url: 'link',
          },
        },
        {
          label: '驾驶证照片',
          prop: 'driverLicensePhoto',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          hide: true,
          multiple: false,
          action: '/blade-resource/oss/endpoint/put-file',
          propsHttp: {
            res: 'data',
            url: 'link',
          },
        },
        {
          label: '驾驶证背面照片',
          prop: 'driverLicensePhotoBack',
          type: 'upload',
          dataType: 'string',
          listType: 'picture-img',
          hide: true,
          multiple: false,
          action: '/blade-resource/oss/endpoint/put-file',
          propsHttp: {
            res: 'data',
            url: 'link',
          },
        },
      ],
      rules: {},
      /** 头部 */
      headers: {
        'Blade-Auth': 'bearer ' + getToken(),
      },
      shortcuts: [
        {
          text: '最近一周',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: '最近一个月',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
        {
          text: '最近三个月',
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
      ],
      /** loading */
      loadingObj: {
        /** 表格loading */
        loading: false,
        /** 页面loading */
        pageLoading: false,
      },
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {
        addBtn: this.validData(this.permission.basicdataDriverArtery_add, false),
      };
    },
  },
  async 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 onLoad() {
      const _id = this.$route.query.id;
      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.bindVehicles = _data.bindVehicles && _data.bindVehicles.split(',');
      this.form.warehouseIds = _data.warehouses.map(val => val.warehouseId);
      console.log('_data :>> ', _data);
    },
    back() {
      const { backPath } = this.$route.query;
      this.$store.commit('DEL_TAG_CURRENT');
      backPath ? this.$route.push({ path: backPath }) : this.$router.go(-1);
    },
  },
  watch: {
    '$route.query.id': {
      handler(val) {
        if (this.$route.path !== '/basicdata/driverArtery/basicdataDriverArteryView') return;
        this.$refs.formRef.resetFields();
        this.onLoad();
      },
    },
  },
};
</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;
}

.upLoadImg_box {
  position: relative;
}

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