aiforge/web_src/vuepages/pages/tech/create/index.vue

<template>
  <div>
    <TopHeader :menu="-1"></TopHeader>
    <div class="ui container">
      <div class="title">您申请的项目将在2030科技项目页面展示</div>
      <div class="form-c" v-show="!selectTechPrj">
        <div class="form-wrap">
          <div class="form-header">申请展示项目</div>
          <div class="form-content">
            <div class="form-row">
              <div class="row-label required">申请项目存放于</div>
              <div class="row-content">
                <el-radio v-model="form.type" label="openi" @input="changeType()">启智社区</el-radio>
                <el-radio v-model="form.type" label="no-openi" @input="changeType()">非启智社区</el-radio>
              </div>
            </div>
            <div class="form-row">
              <div class="row-label required">现项目地址</div>
              <div class="row-content">
                <el-input size="medium" v-model="form.url" @input="changeUrl"
                  placeholder='请输入现有项目的 HTTP(s) 或 Git " clone" URL，如：https://openi.pcl.ac.cn/OpenI/aiforge'></el-input>
              </div>
            </div>
            <div v-show="form.type == 'no-openi'">
              <div class="form-row" :class="form.alias_err ? 'form-row-err' : ''">
                <div class="row-label required baseline">启智项目名称</div>
                <div class="row-content">
                  <div>
                    <el-input size="medium" v-model="form.repo_alias" @input="changeAlias"></el-input>
                  </div>
                  <div class="tips">
                    请输入中文、字母、数字和-_ .，最多100个字符。
                  </div>
                </div>
              </div>
              <div class="form-row" :class="form.name_err ? 'form-row-err' : ''">
                <div class="row-label required baseline">启智项目路径</div>
                <div class="row-content">
                  <div class="reop-url-c">
                    <el-select size="medium" v-model="form.uid"></el-select>
                    <span style="margin: 0 8px;font-size:22px;"> / </span>
                    <el-input size="medium" v-model="form.repo_name" @input="changeRepoName"></el-input>
                  </div>
                  <div class="tips">
                    启智项目地址：<span class="openi-repo-url">{{ form.repo_url }}</span>
                  </div>
                </div>
              </div>
              <div class="form-row">
                <div class="row-label">关键词</div>
                <div class="row-content">
                  <el-select style="width:100%" size="medium" v-model="form.topics" multiple filterable remote
                    allow-create default-first-option placeholder="请选择标签" :remote-method="searchTopics"
                    :loading="form.topicLoading">
                    <el-option v-for="item in topicsList" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="form-row">
                <div class="row-label baseline">项目简介</div>
                <div class="row-content">
                  <el-input size="medium" type="textarea" :rows="3" placeholder="请输入项目简介(长度不超过255)" :maxLength="255"
                    v-model="form.description"></el-input>
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="row-label required">科技项目</div>
              <div class="row-content">
                <el-input placeholder="请选择科技项目" size="medium" v-model="form.tech_show" :readonly="true">
                  <el-button size="medium" slot="append" @click="goSelectTechPrj">选择科技项目</el-button>
                </el-input>
              </div>
            </div>
            <div class="form-row">
              <div class="row-label required">成果贡献单位</div>
              <div class="row-content">
                <el-select style="width:100%" size="medium" v-model="form.institution" multiple>
                  <el-option v-for="item in institutionList" :key="item.key" :label="item.value"
                    :value="item.value"></el-option>
                </el-select>
              </div>
            </div>
            <div class="form-btn-group">
              <el-button size="medium" type="primary" class="btn confirm-btn" @click="submit">提交申请</el-button>
              <el-button size="medium" class="btn" @click="cancel">{{ $t('cancel') }}</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="form-select-tech-prj" v-show="selectTechPrj">
        <div class="form-wrap">
          <div class="form-header">选择科技项目</div>
          <div class="form-content">
            <div class="form-row">
              <div class="row-label required">请输入科技项目</div>
              <div class="row-content">
                <el-input placeholder="请输入内容" size="medium" v-model="form.tech_search_keyword"
                  @keyup.enter.native="searchTechList" class="input-with-select">
                  <el-select v-model="form.tech_search_sel" style="width:142px" size="medium" slot="prepend"
                    placeholder="请选择">
                    <el-option label="项目立项编号" value="0"></el-option>
                    <el-option label="参与单位" value="1"></el-option>
                    <el-option label="项目名称" value="2"></el-option>
                  </el-select>
                  <el-button size="medium" slot="append" icon="el-icon-search" @click="searchTechList"></el-button>
                </el-input>
              </div>
            </div>
            <div class="form-table">
              <div style="margin: 0 20px 30px 20px">
                <el-table ref="tableRef" border :data="tableData" style="width:100%" v-loading="loading" stripe>
                  <el-table-column prop="no" label="项目立项编号" align="center" header-align="center"
                    width="120"></el-table-column>
                  <el-table-column prop="name" label="科技项目名称" align="center" header-align="center"
                    width="150"></el-table-column>
                  <el-table-column prop="unit" label="项目承担单位" align="center" header-align="center"
                    width="150"></el-table-column>
                  <el-table-column prop="allunit" label="所有参与单位" align="center" header-align="center"></el-table-column>
                  <el-table-column width="100" label="操作" align="center" header-align="center">
                    <template slot-scope="scope">
                      <el-button type="primary">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopHeader from '../components/TopHeader.vue';
import { getTechs, setOpenIApply, setNoOpenIApply, getCreateRepoUser, getCheckRepoName, getTopics } from '~/apis/modules/tech';

export default {
  data() {
    return {
      form: {
        type: 'openi',
        url: '',
        repo_alias: '',
        alias_err: false,
        uid: '',
        repo_name: '',
        name_err: false,
        repo_url: '',
        topics: [],
        topicLoading: false,
        description: '',

        tech_search_sel: '0',
        tech_search_keyword: '',
        tech_show: '',

        institution: [],
      },
      selectTechPrj: false,
      loading: false,
      tableData: [{
        selected: '0',
        no: 'xxxxxxxxxx1',
        name: 'Name NameName',
        unit: '项目承担单位项目承担单位1',
        allunit: '所有参与单位1、所有参与单位、所有参与单位、所有参与单位、所有参与单位',
      }, {
        selected: '0',
        no: 'xxxxxxxxxx2',
        name: 'Name NameName2',
        unit: '项目承担单位项目承担单位2',
        allunit: '所有参与单位2、所有参与单位、所有参与单位',
      }],
      topicsList: [],
      institutionList: [],
    };
  },
  components: {
    TopHeader,
  },
  methods: {
    resetData() {
      this.form.url = '';
      this.form.repo_alias = '';
      this.form.alias_err = false;
      this.form.uid = '';
      this.form.repo_name = '';
      this.form.repo_url = '';
      this.form.name_err = false;
      this.form.topics = [];
      this.form.topicLoading = false;
      this.form.description = '';
      this.form.tech_search_sel = '0';
      this.form.tech_search_keyword = '';
      this.form.tech_show = '';
      this.form.institution = [];
      this.tableData = [];
      this.topicsList = [];
    },
    changeType() {
      this.resetData();
    },
    checkRepoAlias() {
      const reg = /^[\u4E00-\u9FA5A-Za-z0-9_.-]{1,100}$/;
      const res = reg.test(this.form.repo_alias);
      this.form.alias_err = !res;
      return res;
    },
    checkRepoName() {
      const reg = /^[A-Za-z0-9_.-]{1,100}$/;
      const res = reg.test(this.form.repo_name);
      this.form.name_err = !res;
      return res;
    },
    changeUrl() {
      if (this.form.type == 'openi') return;
      const owner = 'Itx003';
      const urlAdd = location.href.split("/")[0] + "//" + location.href.split("/")[2];
      const repoValue = this.form.url.match(/^(.*\/)?((.+?)(\.git)?)$/)[3];
      this.form.repo_alias = repoValue;
      getCheckRepoName({ owner: 'Itx003', q: repoValue }).then(res => {
        const repo_name = res.data.name;
        this.form.repo_name = repo_name;
        this.form.repo_url = `${urlAdd}/${owner}/${repo_name}.git`;
      }).catch(err => {
        console.log(err);
        this.form.repo_name = '';
        this.form.repo_url = '';
      });
    },
    changeAlias() {
      const owner = 'Itx003';
      const aliasValue = this.form.repo_alias;
      const urlAdd = location.href.split("/")[0] + "//" + location.href.split("/")[2];
      if (aliasValue && this.checkRepoAlias()) {
        getCheckRepoName({ owner: 'Itx003', q: aliasValue }).then(res => {
          const repo_name = res.data.name;
          this.form.repo_name = repo_name;
          this.form.repo_url = `${urlAdd}/${owner}/${repo_name}.git`;
        }).catch(err => {
          console.log(err);
          this.form.repo_name = '';
          this.form.repo_url = '';
        });
      } else {
        this.form.repo_name = '';
        this.form.repo_url = '';
      }
    },
    changeRepoName() {
      const owner = 'Itx003';
      const repo_name = this.form.repo_name;
      const urlAdd = location.href.split("/")[0] + "//" + location.href.split("/")[2];
      if (this.checkRepoName()) {
        this.form.repo_url = `${urlAdd}/${owner}/${repo_name}.git`;
      } else {
        this.form.repo_url = '';
      }
    },
    searchTopics(query) {
      if (query !== '') {
        this.form.topicLoading = true;
        getTopics({ q: query }).then(res => {
          this.form.topicLoading = false;
          const topics = res.data.topics || [];
          this.topicsList = topics.map(item => {
            return {
              value: item.topic_name,
              label: item.topic_name,
            }
          });
        }).catch(err => {
          this.topicsList = [];
        });
      } else {
        this.topicsList = [];
      }
    },
    goSelectTechPrj() {
      this.selectTechPrj = true;
    },
    searchTechList() {
      getTechs({
        no: this.form.tech_search_sel == '0' ? this.form.tech_search_keyword : '',
        institution: this.form.tech_search_sel == '1' ? this.form.tech_search_keyword : '',
        name: this.form.tech_search_sel == '2' ? this.form.tech_search_keyword : '',
      }).then(res => {
        console.log(res);
      }).catch(err => {
        console.log(err);
      })
    },
    changeTableSelect(row) {
      for (let i = 0, iLen = this.tableData.length; i < iLen; i++) {
        this.tableData[i].selected = '0';
      }
      row.selected = '1';
      this.$refs.tableRef.setCurrentRow(row);
    },
    submit() {
      console.log(this.form);
    },
    cancel() {
      window.history.back();
    }
  },
  beforeMount() {
    getCreateRepoUser().then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  },
  mounted() {

  },
  beforeDestroy() { },
};
</script>

<style scoped lang="less">
.title {
  text-align: center;
  margin: 30px 0;
  font-size: 14px;
  color: rgb(16, 16, 16);
}

.form-c,
.form-select-tech-prj {
  display: flex;
  justify-content: center;

  .form-wrap {
    width: 1000px;
    background: rgb(255, 255, 255);
    border-color: rgb(212, 212, 213);
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    box-sizing: border-box;

    .form-header {
      height: 45px;
      background: rgb(240, 240, 240);
      border-bottom: 1px solid rgb(212, 212, 213);
      color: rgb(16, 16, 16);
      padding-left: 16px;
      font-size: 16px;
      font-weight: 700;
      display: flex;
      align-items: center;
    }

    .form-content {
      margin-top: 40px;

      .form-row {
        display: flex;
        align-items: center;
        width: 80%;
        margin: 20px auto;
        padding-right: 50px;

        .row-label {
          flex: 2;
          text-align: right;
          margin-right: 24px;
          position: relative;

          &.required {
            &::after {
              position: absolute;
              top: -2px;
              right: -10px;
              content: '*';
              color: #db2828;
            }
          }

          &.baseline {
            align-self: baseline;
            margin-top: 11px;
          }
        }

        .row-content {
          flex: 9;

          .tips {
            margin-top: 4px;
            font-size: 14px;
            color: rgb(136, 136, 136);


          }
        }

        .reop-url-c {
          display: flex;
          align-items: center;
        }

        .openi-repo-url {
          color: rgba(16, 16, 16, 1);
        }

        &.form-row-err {
          .row-label {
            color: #9f3a38;
          }

          /deep/ .el-input__inner:not([readonly="readonly"]) {
            color: #9f3a38;
            background: #fff6f6;
            border-color: #e0b4b4;
          }
        }
      }

      .form-table {
        margin-top: 30px;
        margin-bottom: 30px;

        /deep/ .el-table__header {
          th {
            background: rgb(249, 249, 249);
            font-size: 12px;
            color: rgb(136, 136, 136);
            font-weight: normal;
          }
        }

        /deep/ .el-table__body {
          td {
            font-size: 12px;
          }
        }

        /deep/ .el-radio__label {
          display: none;
        }
      }

      .form-btn-group {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 30px 0 40px;
      }
    }
  }
}

.btn {
  color: rgb(2, 0, 4);
  background-color: rgb(194, 199, 204);
  border-color: rgb(194, 199, 204);

  &.confirm-btn {
    color: #fff;
    background-color: rgb(56, 158, 13);
    border-color: rgb(56, 158, 13);
    margin-right: 20px;
  }
}
</style>