OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: e201f957e0
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'e201f957e0'
${ noResults }
aiforge/web_src/vuepages/pages/tech/create/index.vue

629 lines
21 kB
Raw Blame History 

  1. <template>

  2.   <div>

  3.     <TopHeader :menu="-1"></TopHeader>

  4.     <div class="ui container">

  5.       <div class="title">您申请的项目将在2030科技项目页面展示</div>

  6.       <div class="form-c" v-show="!selectTechPrj">

  7.         <div class="form-wrap">

  8.           <div class="form-header">申请展示项目</div>

  9.           <div class="form-content">

  10.             <div class="form-row">

  11.               <div class="row-label required">申请项目存放于</div>

  12.               <div class="row-content">

  13.                 <el-radio v-model="form.type" label="openi" @input="changeType()">启智社区</el-radio>

  14.                 <el-radio v-model="form.type" label="no-openi" @input="changeType()">非启智社区</el-radio>

  15.               </div>

  16.             </div>

  17.             <div class="form-row" :class="form.url_err ? 'form-row-err' : ''">

  18.               <div class="row-label required">现项目地址</div>

  19.               <div class="row-content">

  20.                 <el-input size="medium" v-model="form.url" @input="changeUrl" class="can-err"

  21.                   placeholder='请输入现有项目的 HTTP(s) 或 Git " clone" URL，如：https://openi.pcl.ac.cn/OpenI/aiforge'></el-input>

  22.               </div>

  23.             </div>

  24.             <div v-show="form.type == 'no-openi'">

  25.               <div class="form-row" :class="form.alias_err ? 'form-row-err' : ''">

  26.                 <div class="row-label required baseline">启智项目名称</div>

  27.                 <div class="row-content">

  28.                   <div>

  29.                     <el-input size="medium" v-model="form.repo_alias" @input="changeAlias" class="can-err"></el-input>

  30.                   </div>

  31.                   <div class="tips">

  32.                     请输入中文、字母、数字和-_ .，最多100个字符。

  33.                   </div>

  34.                 </div>

  35.               </div>

  36.               <div class="form-row" :class="form.name_err ? 'form-row-err' : ''">

  37.                 <div class="row-label required baseline">启智项目路径</div>

  38.                 <div class="row-content">

  39.                   <div class="reop-url-c">

  40.                     <el-select size="medium" class="owner-sel" v-model="form.uid" @change="changeOwner">

  41.                       <div slot="prefix" class="owner-item" style="height:100%;padding-left:10px">

  42.                         <img class="owner-img" :src="ownerSelect.RelAvatarLink">

  43.                       </div>

  44.                       <el-option v-for="item in ownerList" :key="item.value" :value="item.value" :label="item.label">

  45.                         <div class="owner-item">

  46.                           <img class="owner-img" :src="item.RelAvatarLink">

  47.                           <span class="owner-name">{{(item.FullName || item.Name)}}</span>

  48.                         </div>

  49.                       </el-option>

  50.                     </el-select>

  51.                     <span style="margin: 0 8px;font-size:22px;"> / </span>

  52.                     <el-input size="medium" v-model="form.repo_name" @input="changeRepoName" class="can-err"></el-input>

  53.                   </div>

  54.                   <div class="tips">

  55.                     启智项目地址：<span class="openi-repo-url">{{ form.repo_url }}</span>

  56.                   </div>

  57.                 </div>

  58.               </div>

  59.               <div class="form-row">

  60.                 <div class="row-label">关键词</div>

  61.                 <div class="row-content">

  62.                   <el-select style="width:100%" size="medium" v-model="form.topics" multiple filterable remote

  63.                     allow-create default-first-option placeholder="请选择标签" :remote-method="searchTopics"

  64.                     :loading="form.topicLoading">

  65.                     <el-option v-for="item in topicsList" :key="item.value" :label="item.label" :value="item.value">

  66.                     </el-option>

  67.                   </el-select>

  68.                 </div>

  69.               </div>

  70.               <div class="form-row">

  71.                 <div class="row-label baseline">项目简介</div>

  72.                 <div class="row-content">

  73.                   <el-input size="medium" type="textarea" :rows="3" placeholder="请输入项目简介(长度不超过255)" :maxLength="255"

  74.                     v-model="form.description"></el-input>

  75.                 </div>

  76.               </div>

  77.             </div>

  78.             <div class="form-row" :class="form.tech_err ? 'form-row-err' : ''">

  79.               <div class="row-label required">科技项目</div>

  80.               <div class="row-content">

  81.                 <el-input placeholder="请选择科技项目" size="medium" v-model="form.tech_show" :readonly="true" class="can-err">

  82.                   <el-button size="medium" slot="append" class="btn-select" @click="goSelectTechPrj">选择科技项目</el-button>

  83.                   <el-button size="medium" slot="append" class="btn-clear" @click="clearTechPrj">清除</el-button>

  84.                 </el-input>

  85.               </div>

  86.             </div>

  87.             <div class="form-row" :class="form.institution_err ? 'form-row-err' : ''">

  88.               <div class="row-label required">成果贡献单位</div>

  89.               <div class="row-content">

  90.                 <el-select style="width:100%" size="medium" v-model="form.institution" multiple class="can-err">

  91.                   <el-option v-for="item in institutionList" :key="item.key" :label="item.value"

  92.                     :value="item.value"></el-option>

  93.                 </el-select>

  94.               </div>

  95.             </div>

  96.             <div class="form-btn-group">

  97.               <el-button size="medium" type="primary" :loading="submitLoading" class="btn confirm-btn"

  98.                 @click="submit">提交申请</el-button>

  99.               <el-button size="medium" class="btn" @click="cancel">{{ $t('cancel') }}</el-button>

  100.             </div>

  101.           </div>

  102.         </div>

  103.       </div>

  104.       <div class="form-select-tech-prj" v-show="selectTechPrj">

  105.         <div class="form-wrap">

  106.           <div class="form-header">

  107.             <span>选择科技项目</span>

  108.             <span>

  109.               <el-button class="form-btn-go-back" @click="goBack">返回</el-button>

  110.             </span>

  111.           </div>

  112.           <div class="form-content">

  113.             <div class="form-row">

  114.               <div class="row-label">请输入科技项目</div>

  115.               <div class="row-content">

  116.                 <el-input placeholder="请输入内容" size="medium" v-model="form.tech_search_keyword"

  117.                   @keyup.enter.native="searchTechList" class="input-with-select">

  118.                   <el-select v-model="form.tech_search_sel" style="width:142px" size="medium" slot="prepend"

  119.                     placeholder="请选择">

  120.                     <el-option label="项目立项编号" value="0"></el-option>

  121.                     <el-option label="参与单位" value="1"></el-option>

  122.                     <el-option label="项目名称" value="2"></el-option>

  123.                   </el-select>

  124.                   <el-button size="medium" slot="append" icon="el-icon-search" @click="searchTechList"></el-button>

  125.                 </el-input>

  126.               </div>

  127.             </div>

  128.             <div class="form-table">

  129.               <div style="margin: 0 20px 30px 20px">

  130.                 <el-table ref="tableRef" border :data="tableData" style="width:100%" v-loading="loading" stripe>

  131.                   <el-table-column prop="no" label="项目立项编号" align="center" header-align="center"

  132.                     width="120"></el-table-column>

  133.                   <el-table-column prop="name" label="科技项目名称" align="center" header-align="center"

  134.                     width="200"></el-table-column>

  135.                   <el-table-column prop="institution" label="项目承担单位" align="center" header-align="center"

  136.                     width="200"></el-table-column>

  137.                   <el-table-column prop="all_institution" label="所有参与单位" align="center"

  138.                     header-align="center"></el-table-column>

  139.                   <el-table-column width="100" label="操作" align="center" header-align="center">

  140.                     <template slot-scope="scope">

  141.                       <el-button type="primary" @click="selectedTechPrj(scope.row)">选择</el-button>

  142.                     </template>

  143.                   </el-table-column>

  144.                 </el-table>

  145.               </div>

  146.             </div>

  147.           </div>

  148.         </div>

  149.       </div>

  150.     </div>

  151.   </div>

  152. </template>

  153. 

  154. <script>

  155. import TopHeader from '../components/TopHeader.vue';

  156. import { getTechs, setOpenIApply, setNoOpenIApply, getCreateRepoUser, getCheckRepoName, getTopics } from '~/apis/modules/tech';

  157. 

  158. export default {

  159.   data() {

  160.     return {

  161.       form: {

  162.         type: 'openi',

  163.         url: '',

  164.         url_err: false,

  165.         repo_alias: '',

  166.         alias_err: false,

  167.         uid: '',

  168.         repo_name: '',

  169.         name_err: false,

  170.         repo_url: '',

  171.         topics: [],

  172.         topicLoading: false,

  173.         description: '',

  174. 

  175.         tech_search_sel: '0',

  176.         tech_search_keyword: '',

  177.         tech_obj: null,

  178.         tech_show: '',

  179.         tech_err: false,

  180. 

  181.         institution: [],

  182.         institution_err: false,

  183.       },

  184.       selectTechPrj: false,

  185.       loading: false,

  186.       tableData: [],

  187.       topicsList: [],

  188.       institutionList: [],

  189. 

  190.       ownerList: [],

  191.       ownerSelect: {},

  192. 

  193.       submitLoading: false,

  194.     };

  195.   },

  196.   components: {

  197.     TopHeader,

  198.   },

  199.   methods: {

  200.     resetData() {

  201.       this.form.url = '';

  202.       this.form.url_err = false;

  203.       this.form.repo_alias = '';

  204.       this.form.alias_err = false;

  205.       this.form.uid = this.ownerList.length ? this.ownerList[0].value : '';

  206.       this.form.repo_name = '';

  207.       this.form.repo_url = '';

  208.       this.form.name_err = false;

  209.       this.form.topics = [];

  210.       this.form.topicLoading = false;

  211.       this.form.description = '';

  212.       this.form.tech_search_sel = '0';

  213.       this.form.tech_search_keyword = '';

  214.       this.form.tech_obj = null;

  215.       this.form.tech_show = '';

  216.       this.form.tech_err = false;

  217.       this.form.institution = [];

  218.       this.form.institution_err = false;

  219.       this.tableData = [];

  220.       this.topicsList = [];

  221.       this.institutionList = [];

  222.       this.submitLoading = false;

  223.     },

  224.     changeType() {

  225.       this.resetData();

  226.     },

  227.     checkUrl() {

  228.       this.form.url_err = !this.form.url;

  229.       return !this.form.url_err;

  230.     },

  231.     checkRepoAlias() {

  232.       const reg = /^[\u4E00-\u9FA5A-Za-z0-9_.-]{1,100}$/;

  233.       const res = reg.test(this.form.repo_alias);

  234.       this.form.alias_err = !res;

  235.       return res;

  236.     },

  237.     checkRepoName() {

  238.       const reg = /^[A-Za-z0-9_.-]{1,100}$/;

  239.       const res = reg.test(this.form.repo_name);

  240.       this.form.name_err = !res;

  241.       return res;

  242.     },

  243.     checkTech() {

  244.       this.form.tech_err = !this.form.tech_obj;

  245.       return !this.form.tech_err;

  246.     },

  247.     checkinstitution() {

  248.       this.form.institution_err = this.form.institution.length == 0;

  249.       return !this.form.institution_err;

  250.     },

  251.     changeUrl() {

  252.       if (this.form.type == 'openi') return;

  253.       const owner = this.ownerSelect.Name;

  254.       const urlAdd = location.href.split("/")[0] + "//" + location.href.split("/")[2];

  255.       const repoValue = this.form.url.match(/^(.*\/)?((.+?)(\.git)?)$/)[3];

  256.       this.form.repo_alias = repoValue;

  257.       this.checkRepoAlias();

  258.       getCheckRepoName({ owner: owner, q: repoValue }).then(res => {

  259.         const repo_name = res.data.name;

  260.         this.form.repo_name = repo_name;

  261.         this.form.repo_url = `${urlAdd}/${owner}/${repo_name}.git`;

  262.         this.checkRepoName();

  263.       }).catch(err => {

  264.         console.log(err);

  265.         this.form.repo_name = '';

  266.         this.form.repo_url = '';

  267.       });

  268.     },

  269.     changeAlias() {

  270.       const owner = this.ownerSelect.Name;

  271.       const aliasValue = this.form.repo_alias;

  272.       const urlAdd = location.href.split("/")[0] + "//" + location.href.split("/")[2];

  273.       if (aliasValue && this.checkRepoAlias()) {

  274.         getCheckRepoName({ owner: owner, q: aliasValue }).then(res => {

  275.           const repo_name = res.data.name;

  276.           this.form.repo_name = repo_name;

  277.           this.form.repo_url = `${urlAdd}/${owner}/${repo_name}.git`;

  278.         }).catch(err => {

  279.           console.log(err);

  280.           this.form.repo_name = '';

  281.           this.form.repo_url = '';

  282.         });

  283.       } else {

  284.         this.form.repo_name = '';

  285.         this.form.repo_url = '';

  286.       }

  287.     },

  288.     changeOwner(value) {

  289.       this.ownerSelect = this.ownerList.filter(item => item.value == value)[0];

  290.       this.form.repo_name && this.changeRepoName();

  291.     },

  292.     changeRepoName() {

  293.       const owner = this.ownerSelect.Name;

  294.       const repo_name = this.form.repo_name;

  295.       const urlAdd = location.href.split("/")[0] + "//" + location.href.split("/")[2];

  296.       if (this.checkRepoName()) {

  297.         this.form.repo_url = `${urlAdd}/${owner}/${repo_name}.git`;

  298.       } else {

  299.         this.form.repo_url = '';

  300.       }

  301.     },

  302.     searchTopics(query) {

  303.       if (query !== '') {

  304.         this.form.topicLoading = true;

  305.         getTopics({ q: query }).then(res => {

  306.           this.form.topicLoading = false;

  307.           const topics = res.data.topics || [];

  308.           this.topicsList = topics.map(item => {

  309.             return {

  310.               value: item.topic_name,

  311.               label: item.topic_name,

  312.             }

  313.           });

  314.         }).catch(err => {

  315.           this.topicsList = [];

  316.         });

  317.       } else {

  318.         this.topicsList = [];

  319.       }

  320.     },

  321.     goSelectTechPrj() {

  322.       this.form.tech_search_sel = '0';

  323.       this.form.tech_search_keyword = '';

  324.       this.tableData = [];

  325.       this.selectTechPrj = true;

  326.       this.searchTechList();

  327.     },

  328.     clearTechPrj() {

  329.       this.form.institution = [];

  330.       this.institutionList = [];

  331.       this.form.tech_show = '';

  332.       this.form.tech_obj = null;

  333.       this.form.tech_err = false;

  334.     },

  335.     goBack() {

  336.       this.selectTechPrj = false;

  337.     },

  338.     searchTechList() {

  339.       this.loading = true;

  340.       getTechs({

  341.         no: this.form.tech_search_sel == '0' ? this.form.tech_search_keyword : '',

  342.         institution: this.form.tech_search_sel == '1' ? this.form.tech_search_keyword : '',

  343.         name: this.form.tech_search_sel == '2' ? this.form.tech_search_keyword : '',

  344.       }).then(res => {

  345.         this.loading = false;

  346.         res = res.data;

  347.         this.tableData = res.data || [];

  348.       }).catch(err => {

  349.         console.log(err);

  350.         this.loading = false;

  351.         this.tableData = [];

  352.       });

  353.     },

  354.     selectedTechPrj(item) {

  355.       this.form.institution = [];

  356.       this.institutionList = item.all_institution.split(',').map((item, index) => {

  357.         return {

  358.           key: item,

  359.           value: item,

  360.         }

  361.       });

  362.       this.form.tech_show = `【${item.no}】 ${item.name}`;

  363.       this.form.tech_obj = item;

  364.       this.checkTech();

  365.       this.goBack();

  366.     },

  367.     submit() {

  368.       const subData = {};

  369.       let setApi = null;

  370.       if (this.form.type == 'openi') {

  371.         setApi = setOpenIApply;

  372.         const r1 = this.checkUrl();

  373.         const r2 = this.checkTech();

  374.         const r3 = this.checkinstitution();

  375.         if (r1 && r2 && r3) {

  376.           subData.url = this.form.url;

  377.           subData.no = this.form.tech_obj.no;

  378.           subData.institution = this.form.institution.join(',');

  379.         } else {

  380.           return;

  381.         }

  382.       } else {

  383.         setApi = setNoOpenIApply;

  384.         const r1 = this.checkUrl();

  385.         const r2 = this.checkTech();

  386.         const r3 = this.checkinstitution();

  387.         const r4 = this.checkRepoAlias();

  388.         const r5 = this.checkRepoName();

  389.         if (r1 && r2 && r3 && r4 && r5) {

  390.           subData.url = this.form.url;

  391.           subData.uid = this.form.uid;

  392.           subData.repo_alias = this.form.repo_alias;

  393.           subData.repo_name = this.form.repo_name;

  394.           subData.topics = [...this.form.topics];

  395.           subData.description = this.form.description;

  396.           subData.no = this.form.tech_obj.no;

  397.           subData.institution = this.form.institution.join(',');

  398.         } else {

  399.           return;

  400.         }

  401.       }

  402.       // console.log(subData);

  403.       // return;

  404.       this.submitLoading = true;

  405.       setApi(subData).then(res => {

  406.         if (res.data && res.data.code == 0) {

  407.           this.$message({

  408.             type: 'success',

  409.             message: '提交成功'

  410.           });

  411.           setTimeout(() => {

  412.             window.location.href = '/tech/tech_view';

  413.           }, 2000);

  414.         } else {

  415.           this.submitLoading = false;

  416.           this.$message({

  417.             type: 'info',

  418.             message: res.data.msg

  419.           });

  420.         }

  421.       }).catch(err => {

  422.         this.submitLoading = false;

  423.         this.$message({

  424.           type: 'error',

  425.           message: '提交失败'

  426.         });

  427.       });

  428.     },

  429.     cancel() {

  430.       window.history.back();

  431.     }

  432.   },

  433.   beforeMount() {

  434.     getCreateRepoUser().then(res => {

  435.       const data = res.data.Data || [];

  436.       this.ownerList = data.map(item => {

  437.         return {

  438.           value: item.ID,

  439.           label: item.FullName || item.Name,

  440.           ...item,

  441.         }

  442.       });

  443.       this.ownerSelect = this.ownerList.length ? this.ownerList[0] : {};

  444.       this.form.uid = this.ownerList.length ? this.ownerList[0].value : '';

  445.     }).catch(err => {

  446.       console.log(err);

  447.     });

  448.   },

  449.   mounted() { },

  450.   beforeDestroy() { },

  451. };

  452. </script>

  453. 

  454. <style scoped lang="less">

  455. .title {

  456.   text-align: center;

  457.   margin: 30px 0;

  458.   font-size: 14px;

  459.   color: rgb(16, 16, 16);

  460. }

  461. 

  462. .form-c,

  463. .form-select-tech-prj {

  464.   display: flex;

  465.   justify-content: center;

  466. 

  467.   .form-wrap {

  468.     width: 1000px;

  469.     background: rgb(255, 255, 255);

  470.     border-color: rgb(212, 212, 213);

  471.     border-width: 1px;

  472.     border-style: solid;

  473.     border-radius: 5px;

  474.     box-sizing: border-box;

  475. 

  476.     .form-header {

  477.       height: 45px;

  478.       background: rgb(240, 240, 240);

  479.       border-bottom: 1px solid rgb(212, 212, 213);

  480.       color: rgb(16, 16, 16);

  481.       padding-left: 16px;

  482.       padding-right: 16px;

  483.       font-size: 16px;

  484.       font-weight: 700;

  485.       display: flex;

  486.       align-items: center;

  487.       justify-content: space-between;

  488.     }

  489. 

  490.     .form-content {

  491.       margin-top: 40px;

  492. 

  493.       .form-row {

  494.         display: flex;

  495.         align-items: center;

  496.         width: 80%;

  497.         margin: 20px auto;

  498.         padding-right: 50px;

  499. 

  500.         .row-label {

  501.           flex: 2;

  502.           text-align: right;

  503.           margin-right: 24px;

  504.           position: relative;

  505. 

  506.           &.required {

  507.             &::after {

  508.               position: absolute;

  509.               top: -2px;

  510.               right: -10px;

  511.               content: '*';

  512.               color: #db2828;

  513.             }

  514.           }

  515. 

  516.           &.baseline {

  517.             align-self: baseline;

  518.             margin-top: 11px;

  519.           }

  520.         }

  521. 

  522.         .row-content {

  523.           flex: 9;

  524. 

  525.           .tips {

  526.             margin-top: 4px;

  527.             font-size: 14px;

  528.             color: rgb(136, 136, 136);

  529. 

  530. 

  531.           }

  532.         }

  533. 

  534.         .reop-url-c {

  535.           display: flex;

  536.           align-items: center;

  537.         }

  538. 

  539.         .openi-repo-url {

  540.           color: rgba(16, 16, 16, 1);

  541.         }

  542. 

  543.         &.form-row-err {

  544.           .row-label {

  545.             color: #9f3a38;

  546.           }

  547. 

  548.           /deep/ .can-err .el-input__inner {

  549.             color: #9f3a38;

  550.             background: #fff6f6;

  551.             border-color: #e0b4b4;

  552.           }

  553.         }

  554.       }

  555. 

  556.       .form-table {

  557.         margin-top: 30px;

  558.         margin-bottom: 30px;

  559. 

  560.         /deep/ .el-table__header {

  561.           th {

  562.             background: rgb(249, 249, 249);

  563.             font-size: 12px;

  564.             color: rgb(136, 136, 136);

  565.             font-weight: normal;

  566.           }

  567.         }

  568. 

  569.         /deep/ .el-table__body {

  570.           td {

  571.             font-size: 12px;

  572.           }

  573.         }

  574. 

  575.         /deep/ .el-radio__label {

  576.           display: none;

  577.         }

  578.       }

  579. 

  580.       .form-btn-group {

  581.         display: flex;

  582.         justify-content: center;

  583.         align-items: center;

  584.         margin: 30px 0 40px;

  585.       }

  586.     }

  587.   }

  588. }

  589. 

  590. .btn {

  591.   color: rgb(2, 0, 4);

  592.   background-color: rgb(194, 199, 204);

  593.   border-color: rgb(194, 199, 204);

  594. 

  595.   &.confirm-btn {

  596.     color: #fff;

  597.     background-color: rgb(56, 158, 13);

  598.     border-color: rgb(56, 158, 13);

  599.     margin-right: 20px;

  600.   }

  601. }

  602. 

  603. .btn-select {

  604.   background-color: rgb(50, 145, 248) !important;

  605.   color: white !important;

  606.   border-radius: 0 !important;

  607.   height: 35px;

  608. }

  609. 

  610. .owner-sel {

  611.   /deep/ .el-input__inner {

  612.     padding-left: 48px;

  613.   }

  614. }

  615. 

  616. .owner-item {

  617.   display: flex;

  618.   align-items: center;

  619. 

  620.   .owner-img {

  621.     width: 24px;

  622.     height: 24px;

  623.     margin-right: 10px;

  624.   }

  625. 

  626.   .owner-name {}

  627. }

  628. </style>