companyFile.vue 6.16 KB
<template>
  <div>
    <!-- //文件第一次提示 -->
    <div class="warn-prompt">该文件第一次出现,请维护如下相关信息</div>

    <div class="file-box">
      <div class="file-box-header">车企文件信息</div>
      <el-form
        ref="fileRef"
        :model="model"
        label-width="100px"
        label-position="top"
        class="file-form-class"
        :rules="fileRules"
      >
        <el-row :gutter="40">
          <el-col :span="12">
            <el-form-item label="企业名称" prop="enterpriseName">
              <el-input
                v-model="model.enterpriseName"
                placeholder="请输入"
                :disabled="true"
                @input="updateFocus"
              ></el-input>
            </el-form-item>
            <el-form-item label="文件版本" prop="version">
              <el-input
                v-model="model.version"
                placeholder="请输入"
                @input="updateFocus"
              ></el-input>
            </el-form-item>
            <el-form-item label="文件状态" prop="status">
              <el-select
                v-model="model.status"
                placeholder="请选择"
                style="width: 100%"
                @input="updateFocus"
              >
                <el-option
                  v-for="item in dict.type.file_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文件识别号" prop="identifyNumber">
              <el-input
                v-model="model.identifyNumber"
                placeholder="请输入"
                @input="updateFocus"
              ></el-input>
            </el-form-item>
            <el-form-item label="存储位置" prop="storage">
              <el-input
                v-model="model.storage"
                placeholder="请输入"
                @input="updateFocus"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文件名称" prop="fileName">
              <el-input
                v-model="model.fileName"
                placeholder="请输入"
                input="updateFocus"
                @input="handleUpdateFile"
              ></el-input>
            </el-form-item>
            <el-form-item label="发布日期" prop="publishDate">
              <el-date-picker
                v-model="model.publishDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                @input="updateFocus"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="文件照片" prop="photo">
              <ImageUpload v-model="model.photo" :limit="1"></ImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <footer-button type="default" @click="handleSaveFile">
        保存车企文件
      </footer-button>
    </div>
  </div>
</template>
<script>
export default {
  dicts: ['file_status'],
  props: {
    enterpriseName: {
      type: String,
      default: ''
    },
    fileName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileRules: {
        enterpriseName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        fileName: [
          { required: true, message: '请输入文件名称', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '请输入文件版本', trigger: 'blur' }
        ],
        publishDate: [
          { required: true, message: '请选择发布日期', trigger: 'change' }
        ],
        status: [
          { required: true, message: '请选择文件状态', trigger: 'change' }
        ],
        storage: [
          { required: true, message: '请输入存储位置', trigger: 'blur' }
        ],
        identifyNumber: [
          { required: true, message: '请输入文件识别号', trigger: 'blur' }
        ],
        photo: [
          { required: true, message: '请选择文件照片', trigger: 'change' }
        ]
      },
      model: this.$modelDataSource({
        url: '/review/enterprise/archive',
        dataKey: 'model',
        attributes: {
          id: 0,
          enterpriseName: '',
          fileName: '',
          version: '',
          publishDate: '',
          status: '',
          storage: '',
          identifyNumber: '',
          photo: '',
          taskId: ''
        }
      })
    }
  },
  watch: {
    fileName(newValue) {
      this.model.fileName = newValue
      this.model.enterpriseName = this.enterpriseName
      this.model.taskId = this.$route.query.taskId
    },
    'dialogManger.dialogEditId'(newValue) {
      this.model.fetch(
        newValue,
        {},
        () => {},
        () => {}
      )
    }
  },
  methods: {
    handleUpdateFile(newValue) {
      this.$emit('fileNameUpdate', newValue)
    },
    /**
     * 失去焦点回调
     */
    updateFocus() {
      this.$emit('handleUpdate', this.isAllPropertiesNull(this.model))
    },
    isAllPropertiesNull(obj) {
      for (var key in obj) {
        if (obj[key] !== '' && typeof obj[key] !== 'undefined') {
          return true
        }
      }
      return false
    },
    handleSaveFile() {
      // vue表单校验
      this.$refs.fileRef.validate(valid => {
        if (valid) {
          this.model.save(
            res => {
              this.model.reset()
              this.$store.dispatch('processing/getCompanyFiles', {
                taskId: this.$route.query.taskId
              })
              this.$emit('handleSave', res.data)
              this.$modal.msgSuccess('提交文件成功')
              this.$nextTick(() => {
                this.$refs.fileRef.clearValidate()
              })
            },
            errors => {}
          )
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.file-form-class {
  ::v-deep.el-form-item {
    margin-bottom: 20px;
  }
}
</style>