web-test/src/views/userCenter/projectInfo/parts/projectForm.vue

<template>
  <div id="projectForm">
    <el-row>
      <el-col :span="24" class="main">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-col :span="24" class="form">
            <el-col :span="24">
              <el-form-item prop="name">
                <el-col :span="21" slot="label">
                  项目名称
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.name" placeholder="请输入项目名称"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="pro_user">
                <el-col :span="21" slot="label">
                  项目负责人
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.pro_user" placeholder="请输入项目负责人"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="pro_phone">
                <el-col :span="21" slot="label">
                  联系电话
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.pro_phone" placeholder="请输入联系电话"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="langSelect">
              <el-form-item prop="field">
                <el-col :span="21" slot="label">
                  领域分类
                </el-col>
                <el-col :span="24">
                  <el-select v-model="form.field" filterable>
                    <el-option v-for="(item, index) in fieldList" :key="index" :value="item.name" :label="item.name"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="scale">
                <el-col :span="21" slot="label">
                  市场预估
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.scale" placeholder="关键技术所支撑的产品市场规模（亿元/年）"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="langSelect">
              <el-form-item prop="techol_stage">
                <el-col :span="21" slot="label">
                  技术阶段
                </el-col>
                <el-col :span="24">
                  <el-select v-model="form.techol_stage" filterable>
                    <el-option v-for="(item, index) in techolstageList" :key="index" :value="item.name" :label="item.name"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="langSelect">
              <el-form-item prop="techol_level">
                <el-col :span="21" slot="label">
                  技术水平
                </el-col>
                <el-col :span="24">
                  <el-select v-model="form.techol_level" filterable>
                    <el-option v-for="(item, index) in techollevelList" :key="index" :value="item.name" :label="item.name"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="proposal_company">
                <el-col :span="21" slot="label">
                  建议单位名称
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.proposal_company" placeholder="请输入建议单位名称"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="proposal_user">
                <el-col :span="21" slot="label">
                  联系人
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.proposal_user" placeholder="请输入联系人"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="proposal_phone">
                <el-col :span="21" slot="label">
                  联系电话
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.proposal_phone" placeholder="请输入联系电话"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="coopera_company">
                <el-col :span="21" slot="label">
                  合作单位名称
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.coopera_company" placeholder="请输入合作单位名称"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="coopera_user">
                <el-col :span="21" slot="label">
                  联系人
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.coopera_user" placeholder="请输入联系人"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="coopera_phone">
                <el-col :span="21" slot="label">
                  联系电话
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.coopera_phone" placeholder="请输入联系电话"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="langInfo">
              <el-form-item prop="project_back">
                <el-col :span="21" slot="label">
                  项目背景
                </el-col>
                <el-col :span="24">
                  <el-input
                    v-model="form.project_back"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="（含国内外同类研究现状）"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="langInfo">
              <el-form-item prop="sign">
                <el-col :span="21" slot="label">
                  立项意义
                </el-col>
                <el-col :span="24">
                  <el-input
                    v-model="form.sign"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="（含解决“卡脖子”技术问题及在行业中所处的地位和作用）"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="langInfo">
              <el-form-item prop="work_basics">
                <el-col :span="21" slot="label">
                  前期基础
                </el-col>
                <el-col :span="24">
                  <el-input
                    v-model="form.work_basics"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="（含知识产权状况）"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="langInfo">
              <el-form-item prop="content">
                <el-col :span="21" slot="label">
                  研究内容
                </el-col>
                <el-col :span="24">
                  <el-input
                    v-model="form.content"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="（含项目创新点）"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="langInfo">
              <el-form-item prop="route">
                <el-col :span="21" slot="label">
                  技术路线
                </el-col>
                <el-col :span="24">
                  <el-input
                    v-model="form.route"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="（含拟解决关键技术）"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="langInfo">
              <el-form-item prop="quota">
                <el-col :span="21" slot="label">
                  核心指标
                </el-col>
                <el-col :span="24">
                  <el-input
                    v-model="form.quota"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="（要求可量化、可考核、可检测）"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="langInfo">
              <el-form-item prop="influence">
                <el-col :span="21" slot="label">
                  经济效益
                </el-col>
                <el-col :span="24">
                  <el-input
                    v-model="form.influence"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="（含市场分析和产业化预期）"
                  ></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="btn">
              <el-button type="danger" size="mini" @click="resetBtn">取消</el-button>
              <el-button type="primary" size="mini" @click="onSubmit">保存</el-button>
            </el-col>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: markettype } = createNamespacedHelpers('markettype');
export default {
  name: 'projectForm',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function() {
    return {
      rules: {},
      // 所属领域
      fieldList: [],
      techolstageList: [{ name: '理论研究' }, { name: '小试' }, { name: '中试' }, { name: '规模化试制' }, { name: '其他' }],
      // 项目技术水平
      techollevelList: [{ name: '国际领先' }, { name: '国际先进' }, { name: '国内领先' }, { name: '国内先进' }],
    };
  },
  async created() {
    await this.searchOther();
  },
  methods: {
    ...markettype(['query']),
    async searchOther() {
      // 所属领域;
      let res = await this.query({ category: '01' });
      if (this.$checkRes(res)) {
        this.$set(this, `fieldList`, res.data);
      }
    },
    // 取消添加
    resetBtn() {
      this.$emit('resetBtn');
    },
    // 保存
    onSubmit() {
      this.$emit('onSubmit', { data: this.form });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .form {
    /deep/.el-form-item {
      margin-bottom: 0px;
    }
    /deep/.el-form-item__label {
      border: 1px solid #dcdfe6;
    }
    /deep/.el-input__inner {
      border-radius: 0;
      height: 42px;
      line-height: 42px;
    }
    /deep/.el-radio-group {
      border: 1px solid #ccc;
      padding: 12px 20px;
      width: 268px;
    }
    /deep/.langInfo .el-form-item__label {
      padding: 35px 0;
    }
    /deep/.langSelect .el-select {
      width: 100%;
    }
  }
}
.btn {
  text-align: center;
  margin: 15px 0;
}
</style>