web-achieve/src/views/userCenter/ONE/userScore/parts/basic.vue

<template>
  <div id="basic">
    <el-row>
      <el-col :span="24" class="basic">
        <el-form :model="basicForm" :rules="rules" ref="basicForm" label-width="120px">
          <el-form-item label="成果名称" prop="achieve_name">
            <el-input v-model="basicForm.achieve_name" placeholder="请输入成果名称"></el-input>
          </el-form-item>
          <el-form-item label="成果类别" prop="achieve_type">
            <el-input v-model="basicForm.achieve_type" placeholder="请输入成果类别"></el-input>
          </el-form-item>
          <el-form-item label="成果编号" prop="achieve_num">
            <el-input v-model="basicForm.achieve_num" placeholder="请输入成果编号"></el-input>
          </el-form-item>
          <el-form-item label="成果取得时间" prop="achieve_date">
            <el-date-picker
              v-model="basicForm.achieve_date"
              type="datetime"
              placeholder="请选择开始时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="成果形式" prop="achieve_form">
            <el-input v-model="basicForm.achieve_form" placeholder="请输入成果形式"></el-input>
          </el-form-item>
          <el-form-item label="申请人" prop="apply_personal">
            <el-input v-model="basicForm.apply_personal" placeholder="请输入申请人"></el-input>
          </el-form-item>
          <el-form-item label="申请单位" prop="apply_company">
            <el-input v-model="basicForm.apply_company" placeholder="请输入申请单位"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="basicForm.address" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="申请单位/申请人属性" prop="apply_nature">
            <el-input v-model="basicForm.apply_nature" placeholder="请输入申请单位/申请人属性"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="contacts">
            <el-input v-model="basicForm.contacts" placeholder="请输入联系人"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="basicForm.phone" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="basicForm.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="传真" prop="fax">
            <el-input v-model="basicForm.fax" placeholder="请输入传真"></el-input>
          </el-form-item>
          <el-form-item label="评价目的" prop="objective">
            <el-input
              v-model="basicForm.objective"
              type="textarea"
              maxlength="200"
              show-word-limit
              :autosize="{ minRows: 4, maxRows: 5 }"
              placeholder="请输入评价目的"
            ></el-input>
          </el-form-item>
          <el-form-item label="成果所处阶段" prop="stage">
            <el-input v-model="basicForm.stage" placeholder="请输入成果所处阶段"></el-input>
          </el-form-item>
          <el-form-item label="经济效益产值" prop="output">
            <el-input v-model="basicForm.output" placeholder="请输入经济效益产值"></el-input>
          </el-form-item>
          <el-form-item label="经济效益利润" prop="profit">
            <el-input v-model="basicForm.profit" placeholder="请输入经济效益利润"></el-input>
          </el-form-item>
          <el-form-item label="经济效益税收" prop="revenue">
            <el-input v-model="basicForm.revenue" placeholder="请输入经济效益税收"></el-input>
          </el-form-item>
          <el-col :span="24" class="btn">
            <el-button type="primary" size="mini" @click="resetBtn">取消申报</el-button>
            <el-button type="primary" size="mini" @click="basicBtn('basicForm')">下一步</el-button>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'basic',
  props: {
    basicForm: { type: Object },
  },
  components: {},
  data: function() {
    return {
      rules: {
        achieve_name: [{ required: true, message: '请输入成果名称', trigger: 'blur' }],
        achieve_type: [{ required: true, message: '请输入成果类别', trigger: 'blur' }],
        achieve_num: [{ required: true, message: '请输入成果编号', trigger: 'blur' }],
        achieve_date: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        achieve_form: [{ required: true, message: '请输入成果形式', trigger: 'blur' }],
        apply_personal: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
        apply_company: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        apply_nature: [{ required: true, message: '请输入申请单位/申请人属性', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        fax: [{ required: true, message: '请输入传真', trigger: 'blur' }],
        objective: [{ required: true, message: '请输入评价目的', trigger: 'blur' }],
        stage: [{ required: true, message: '请输入成果所处阶段', trigger: 'blur' }],
        output: [{ required: true, message: '请输入经济效益产值', trigger: 'blur' }],
        profit: [{ required: true, message: '请输入经济效益利润', trigger: 'blur' }],
        revenue: [{ required: true, message: '请输入经济效益税收', trigger: 'blur' }],
      },
    };
  },
  created() {},
  methods: {
    // 取消申报
    resetBtn() {
      this.$emit('resetBtn');
    },
    // 下一步
    basicBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('basicBtn', { data: this.basicForm });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.basic {
  padding: 15px;
  .btn {
    text-align: center;
  }
}
</style>