web-achieve/src/views/userCenter/common/updateParts/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-select v-model="basicForm.achieve_type" multiple clearable filterable placeholder="请选择">
              <el-option v-for="item in achievetypeList" :key="item.name" :label="item.name" :value="item.name"> </el-option>
            </el-select>
          </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-select v-model="basicForm.achieve_form" clearable filterable allow-create placeholder="请选择">
              <el-option v-for="(i, index) in achieveformList" :key="index" :label="i.name" :value="i.name"></el-option>
            </el-select>
          </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_phone">
            <el-input v-model="basicForm.apply_phone" 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-select v-model="basicForm.apply_nature" clearable filterable allow-create placeholder="请选择">
              <el-option v-for="(i, index) in applynatureList" :key="index" :label="i.name" :value="i.name"></el-option>
            </el-select>
          </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-select v-model="basicForm.objective" clearable filterable allow-create placeholder="请选择">
              <el-option v-for="(i, index) in objectiveList" :key="index" :label="i.name" :value="i.name"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="成果所处阶段" prop="stage">
            <el-select v-model="basicForm.stage" clearable filterable allow-create placeholder="请选择">
              <el-option v-for="(i, index) in stageList" :key="index" :label="i.name" :value="i.name"></el-option>
            </el-select>
          </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>
const { achievetype, achieveform, applynature, objective, stage } = require('@common/src/store/achieve/achieveType');
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: 'change' }],
        achieve_num: [{ required: false, message: '请输入成果编号', trigger: 'blur' }],
        achieve_date: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        achieve_form: [{ required: true, message: '请输入成果形式', trigger: 'change' }],
        apply_personal: [{ required: true, message: '请输入申请人', trigger: 'blur' }],
        apply_phone: [{ required: true, message: '请输入申请人电话', trigger: 'blur' }],
        apply_company: [{ required: true, message: '请输入申请单位', trigger: 'blur' }],
        address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        apply_nature: [{ required: true, message: '请输入申请单位/申请人属性', trigger: 'change' }],
        contacts: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        fax: [{ required: false, message: '请输入传真', trigger: 'blur' }],
        objective: [{ required: true, message: '请输入评价目的', trigger: 'change' }],
        stage: [{ required: true, message: '请输入成果所处阶段', trigger: 'blur' }],
        output: [{ required: true, message: '请输入经济效益产值', trigger: 'blur' }],
        profit: [{ required: true, message: '请输入经济效益利润', trigger: 'blur' }],
        revenue: [{ required: true, message: '请输入经济效益税收', trigger: 'blur' }],
      },
      // 成果类别
      achievetypeList: achievetype,
      // 成果形式
      achieveformList: achieveform,
      // 申请人属性
      applynatureList: applynature,
      // 评价目的
      objectiveList: objective,
      // 成果所处阶段
      stageList: stage,
    };
  },
  created() {},
  methods: {
    // 取消申报
    resetBtn() {
      window.history.back();
    },
    // 下一步
    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;
  }
  .el-select {
    width: 100%;
  }
}
</style>