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="125px">
          <el-col :span="24" class="one">
            <el-col :span="24" class="txt">
              <span> 项目基本信息</span>
            </el-col>
            <el-col :span="24" class="info">
              <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="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="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">
                    <p>关键技术所支撑的产品市场规模<el-input v-model.number="form.scale" class="scale"></el-input>(亿元/年)</p>
                  </el-col>
                </el-form-item>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="one">
            <el-col :span="24" class="txt">
              <span>项目建议单位</span>
            </el-col>
            <el-col :span="24" class="info">
              <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>
          </el-col>
          <el-col :span="24" class="one">
            <el-col :span="24" class="txt">
              <span>主要合作单位</span>
            </el-col>
            <el-col :span="24" class="info">
              <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>
          </el-col>
          <el-col :span="24" class="one">
            <el-col :span="24" class="txt">
              <span>项目内容简介</span>
            </el-col>
            <el-col :span="24" class="info">
              <el-col :span="24" class="langInfo">
                <el-col :span="24" class="title"> <span>立项背景</span>（含解决“卡脖子”技术问题及在行业中所处的地位和作用）:</el-col>
                <el-col :span="24" class="textarea">
                  <el-input
                    v-model="form.sign"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="请输入立项背景（含解决“卡脖子”技术问题及在行业中所处的地位和作用）"
                  ></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="langInfo">
                <el-col :span="24" class="title"> <span>前期基础</span>（含知识产权状况）:</el-col>
                <el-col :span="24" class="textarea">
                  <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-col>
              <el-col :span="24" class="langInfo">
                <el-col :span="24" class="title"> <span>研究内容</span>（含项目创新点）:</el-col>
                <el-col :span="24" class="textarea">
                  <el-input
                    v-model="form.content"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="请输入研究内容（含项目创新点）"
                  ></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="langInfo">
                <el-col :span="24" class="title"> <span>技术路线</span>（含拟解决关键技术）:</el-col>
                <el-col :span="24" class="textarea">
                  <el-input
                    v-model="form.route"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="请输入技术路线（含拟解决关键技术）"
                  ></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="langInfo">
                <el-col :span="24" class="title"> <span>核心指标</span>（要求可量化、可考核、可检测）:</el-col>
                <el-col :span="24" class="textarea">
                  <el-input
                    v-model="form.quota"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="请输入核心指标（要求可量化、可考核、可检测）"
                  ></el-input>
                </el-col>
              </el-col>
              <el-col :span="24" class="langInfo">
                <el-col :span="24" class="title"> <span>经济效益</span>（含市场分析和产业化预期）:</el-col>
                <el-col :span="24" class="textarea">
                  <el-input
                    v-model="form.influence"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :autosize="{ minRows: 5, maxRows: 5 }"
                    placeholder="请输入经济效益（含市场分析和产业化预期）"
                  ></el-input>
                </el-col>
              </el-col>
            </el-col>
          </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('0')">保存</el-button>
            <el-button type="success" size="mini" @click="onSubmit('1')">提交</el-button>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'projectForm',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function() {
    return {
      rules: {},
      // 领域分类
      fieldList: [{ name: '新材料' }, { name: '先进制造' }, { name: '光电子' }, { name: '新一代信息技术' }, { name: '先进技术' }],
      techolstageList: [{ name: '理论研究' }, { name: '小试' }, { name: '中试' }, { name: '规模化试制' }, { name: '其他' }],
      // 项目技术水平
      techollevelList: [{ name: '国际领先' }, { name: '国际先进' }, { name: '国内领先' }, { name: '国内先进' }],
    };
  },
  created() {},
  methods: {
    // 取消添加
    resetBtn() {
      this.$emit('resetBtn');
    },
    onSubmit(status) {
      this.$emit('onSubmit', { data: { ...this.form, status } });
    },
    // onSubmit(status) {
    //   if (status == '0') {
    //     this.$alert(
    //       '<strong><p>1：用户</p><p>当您进行项目征集时，系统会自动提取项目负责人和联系电话进行平台用户注册，您可用【联系电话】和【初始密码(111111)】进行登录。</p><p>2：保存按钮</p><p>保存按钮，是您填写的信息处于草稿状态，您可到个人中心查看并进行修改与提交。</p></strong>',
    //       '信息提示',
    //       {
    //         dangerouslyUseHTMLString: true,
    //         showConfirmButton: true,
    //         showCancelButton: true,
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //       }
    //     )
    //       .then(() => {
    //         this.$emit('onSubmit', { data: { ...this.form, status } });
    //       })
    //       .catch(() => {});
    //   } else {
    //     this.$alert(
    //       '<strong><p>1：用户</p><p>当您进行项目征集时，系统会自动提取项目负责人和联系电话进行平台用户注册，您可用【联系电话】和【初始密码(111111)】进行登录。</p><p>2：提交按钮</p><p>提交按钮，是您填写的信息处于已发布状态，已发布状态下的项目征集信息是不允许修改的，请您谨慎填写。您也可到个人中心查看提交记录。</p></strong>',
    //       '信息提示',
    //       {
    //         dangerouslyUseHTMLString: true,
    //         showConfirmButton: true,
    //         showCancelButton: true,
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //       }
    //     )
    //       .then(() => {
    //         this.$emit('onSubmit', { data: { ...this.form, status } });
    //       })
    //       .catch(() => {});
    //   }
    // },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  margin: 15px 0 0 0;
  .one {
    position: relative;
    border: 1px solid #41719c;
    margin: 0 0 35px 0;
    min-height: 150px;
    .txt {
      position: absolute;
      top: -22px;
      text-align: center;
      span {
        height: 40px;
        line-height: 40px;
        display: inline-block;
        padding: 0 35px;
        background: #fff;
        font-weight: bold;
        font-size: 18px;
      }
    }
    .info {
      padding: 20px 10px 10px 10px;
      /deep/.langSelect .el-select {
        width: 100%;
      }
      .scale {
        width: 16%;
        margin: 0 5px;
        /deep/.el-input__inner {
          padding: 0 5px;
        }
      }
      .langInfo {
        margin: 0 0 10px 0;
        .title {
          font-size: 14px;
          color: #606266;
          padding: 10px 0;
          span {
            font-size: 18px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .btn {
    text-align: center;
    padding: 10px 0;
  }
}
</style>