caimei365-manager-ui/src/views/serviceSettlement/contract/edit.vue

<template>
  <div class="app-container">
    <el-form ref="formLabelAlign" label-width="120px" :model="formLabelAlign" :rules="rules">
      <el-form-item label="合同编号：" prop="contractId">
        <el-input v-model="formLabelAlign.contractId" :disabled="isCheck" />
      </el-form-item>
      <el-form-item label="合同起始日期：" prop="contractStartDate">
        <el-date-picker
          v-model="formLabelAlign.contractStartDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :disabled="isCheck"
        />
      </el-form-item>
      <el-form-item label="合同截止日期：" prop="contractEndDate">
        <el-date-picker
          v-model="formLabelAlign.contractEndDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :disabled="isCheck"
        />
      </el-form-item>
      <el-form-item label="上传合同：" prop="contractRelateds">
        <file-upload
          :list="contractList"
          :limit="20"
          :is-check="isCheck"
          :before-upload="beforeUpload"
          :tip="'支持上传pdf、docx、 pptx文件格式'"
          @success="uploadSuccess($event, 'contractRelateds')"
          @change="uploadChange($event, 'contractRelateds')"
          @remove="handleRemove($event, 'contractRelateds')"
        />
      </el-form-item>
      <el-form-item>
        <el-button v-if="!isCheck" type="primary" @click="submitForm('formLabelAlign')">保存</el-button>
        <el-button @click="$router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getContractDetail, addContract } from '@/api/serviceSettlement/contract'
import FileUpload from '../components/UploadFile.vue'
import serviceMixin from '../mixin/index'
import { mapGetters } from 'vuex'

export default {
  components: {
    FileUpload
  },
  mixins: [serviceMixin],
  data() {
    return {
      formLabelAlign: {},
      ruleForm: {},
      contractList: [],
      serviceLevel: [{ id: 1, value: '一级' }, { id: 2, value: '二级' }, { id: 3, value: '三级' }],
      rules: {
        contractId: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
        contractStartDate: [
          { required: true, message: '请选择合同起始时间', trigger: 'change' }
        ],
        contractEndDate: [
          { required: true, message: '请选择合同结束时间', trigger: 'change' }
        ],
        contractRelateds: [
          { required: true, message: '请上传合同文件', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userId', 'username', 'fullName', 'phone']),
    id() {
      return this.$route.query.id || false
    },
    providersId() {
      return Number(this.$route.query.providersId) || false
    },
    isCheck() {
      return !!Number(this.$route.query.isCheck)
    }
  },
  mounted() {
    if (this.id) {
      this.getInfo()
    }
  },
  methods: {
    async getInfo() {
      const { data } = await getContractDetail({ providersContractId: this.id })
      this.formLabelAlign = data
      this.contractList = data.contractRelateds.map(e => ({ name: e.fileName, response: { data: e.image }}))
    },
    submitForm(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          const form = Object.assign(this.formLabelAlign, { providersId: this.providersId, createBy: this.fullName })
          await addContract(form)
          this.$router.back()
        }
      })
    },
    beforeUpload(file) {
      console.log(file)
      if (file.size / 1024 / 1024 < 50) {
        return true
      } else {
        this.$message({
          type: 'error',
          message: '文件大小限制在50M以内'
        })
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input,
::v-deep .el-textarea__inner {
  width: 500px;
}
::v-deep .el-form {
  width: 650px;
  margin: 0 auto;
}
</style>