qa-prevention-xgf-vue/src/views/firstLevelDoor/freightVehiclesPort/fleetFilingApplication/components/apply.vue

<template>
  <div v-loading="listLoading">
    <div style="padding:20px">
      <el-form ref="form" :model="form" label-width="210px">
        <!--第一行-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="dialogType !== 'savePhoto'" label="已上传图片">
              <div >
                <img :src="config.fileUrl + form.REQUISITION_FILE" width="100" height="100">
              </div>
            </el-form-item>
            <el-form-item label="智能口门管理系统账号申请单" prop="REQUISITION_FILE" >
              <el-upload
                ref="photoUpload"
                :file-list="form.REQUISITION_FILE"
                :multiple="false"
                :limit="1"
                :class="{hide:hideUpload}"
                :auto-upload="false"
                :on-remove="REQUISITION_FILERemove"
                :on-change="REQUISITION_FILEChangeIMG"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第二行-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="dialogType !== 'savePhoto'" label="已上传图片">
              <div >
                <img :src="config.fileUrl + form.COMMITMENT_FILE" width="100" height="100">
              </div>
            </el-form-item>
            <el-form-item label="智能口门管理系统使用承诺书" prop="COMMITMENT_FILE" >
              <el-upload
                ref="photoUpload"
                :file-list="form.COMMITMENT_FILE"
                :multiple="false"
                :limit="1"
                :class="{hide:hideUpload}"
                :auto-upload="false"
                :on-remove="REQUISITION_FILERemove"
                :on-change="REQUISITION_FILEChangeIMG"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第三行-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="dialogType !== 'savePhoto'" label="已上传图片">
              <div >
                <img :src="config.fileUrl + form.LICENSE_FILE" width="100" height="100">
              </div>
            </el-form-item>
            <el-form-item label="营业执照" prop="LICENSE_FILE" >
              <el-upload
                ref="photoUpload"
                :file-list="form.LICENSE_FILE"
                :multiple="false"
                :limit="1"
                :class="{hide:hideUpload}"
                :auto-upload="false"
                :on-remove="REQUISITION_FILERemove"
                :on-change="REQUISITION_FILEChangeIMG"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第四行-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="dialogType !== 'savePhoto'" label="已上传图片">
              <div >
                <img :src="config.fileUrl + form.TRANSPORT_PERMIT_FILE" width="100" height="100">
              </div>
            </el-form-item>
            <el-form-item label="道路运输经营许可证" prop="TRANSPORT_PERMIT_FILE" >
              <el-upload
                ref="photoUpload"
                :file-list="form.TRANSPORT_PERMIT_FILE"
                :multiple="false"
                :limit="1"
                :class="{hide:hideUpload}"
                :auto-upload="false"
                :on-remove="REQUISITION_FILERemove"
                :on-change="REQUISITION_FILEChangeIMG"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第五行-->
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="dialogType !== 'savePhoto'" label="已上传图片">
              <div >
                <img :src="config.fileUrl + form.HAZARDOUS_CHEMICALS_FILE" width="100" height="100">
              </div>
            </el-form-item>
            <el-form-item label="危险化学品经营许可证" prop="HAZARDOUS_CHEMICALS_FILE" >
              <el-upload
                ref="photoUpload"
                :file-list="form.HAZARDOUS_CHEMICALS_FILE"
                :multiple="false"
                :limit="1"
                :class="{hide:hideUpload}"
                :auto-upload="false"
                :on-remove="REQUISITION_FILERemove"
                :on-change="REQUISITION_FILEChangeIMG"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="ui-height"/>
    <div class="ui-foot">
      <el-button type="success" @click="confirm">保 存</el-button>
      <el-button plain type="info" @click="goBack">返 回</el-button>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import SelectTree from '@/components/SelectTree'
export default{
  components: { Pagination, SelectTree},
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10
      },
      config: config,
      areaList: [], // 省市县列表
      placeList: [],
      listLoading: true,
      varList: [],
      total: 0,
      title: '',
      isShow: false,
      addDialogVisible: false,
      dialogType: 'savePhoto',
      addForm: {
        LICENCE_NO: '', // 车牌号
        MOTORCADE_ID: '', // 所属车队ID
        CORPINFO_ID: '',
        LICENCE_TYPE: '',
        VEHICLE_TYPE: '',
        CONTACT: '',
        PHONE: '',
        EMISSION_STANDARDS:'',
      },
      form: {
        CORPINFO_ID: JSON.parse(sessionStorage.getItem('user')).CORPINFO_ID,
        MOTORCADE_ID: this.$parent.MOTORCADE_ID,
        REQUISITION_FILE: '',
        COMMITMENT_FILE: '',
        LICENSE_FILE: '',
        TRANSPORT_PERMIT_FILE: '',
        HAZARDOUS_CHEMICALS_FILE: ''
      }
    }
  },
  async created() {
    this.getList()
  },
  methods: {
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    // 重置
    reset() {
      this.form = {
        USER_NAME: '',
        PHONE: '',
        ID_CARD: '',
        CORPINFO_NAME: '',
        DEPARTMENT_NAME: '',
        VISIT_START_TIME: '',
        VISIT_END_TIME: '',
        DOOR_NAME: ''
      }
      this.getList()
    },
    // 获取列表
    getList() {
      this.listLoading = true
      requestFN(
        '/mkmj/management/carInfoList?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page, this.form
      ).then((data) => {
        console.log(data)
        this.listLoading = false
        this.varList = data.carInfoList
        this.total = data.page.totalResult
        this.hasButton()
        this.pd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    reSetAddDialog() {
      this.addForm.LICENCE_NO = ''
      this.addForm.USER_ID = ''
      this.addForm.VEHICLE_DEPARTMENT_ID = ''
      this.addForm.LICENCE_TYPE = ''
      this.addForm.VEHICLE_TYPE = ''
      this.addForm.VEHICLE_BELONG_TYPE = ''
      this.addForm.EMPLOYEE_VEHICLE_USER_ID = ''
      this.userList = []
      this.addForm.DEPARTMENT_NAME = ''
      this.addForm.DEPARTMENT_ID = ''
    },
    REQUISITION_FILERemove(file, fileList) {
      this.form.REQUISITION_FILE = fileList
      this.hideUpload = fileList.length >= 1
    },
    REQUISITION_FILEChangeIMG(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
        this.form.REQUISITION_FILE = []
        return
      }
      this.form.REQUISITION_FILE = []
      this.form.REQUISITION_FILE.push(file)
      this.hideUpload = fileList.length >= 1
    },
    confirm(){
      alert('1111')
    },
    goBack(){
      alert('222')
    }
  }

}
</script>