| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div> |
| | | <div class="basic">åºæ¬ä¿¡æ¯</div> |
| | | <div class="top-text"> |
| | | <div class="substance"> |
| | | <p>è¯æ¯ä¸»æ¨ï¼<span>ææ å¤æ¥</span></p> |
| | | <p>é®é¢ææ¬ï¼<span>ææ å¤æ¥</span></p> |
| | | <p>ææ ç§ç±»ï¼<span>ææ å¤æ¥</span></p> |
| | | <p> |
| | | ææ é项ï¼<span>{{ optionvalue }}</span> |
| | | </p> |
| | | </div> |
| | | </div> |
| | | <div class="headline"> |
| | | <div class="basics">é®é¢é
ç½®</div> |
| | | <div class="headbottom"> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-circle-plus-outline" |
| | | @click="addzbiao" |
| | | >æ·»å ææ </el-button |
| | | > |
| | | <el-button type="primary" icon="el-icon-s-claim">ä¿å</el-button> |
| | | <el-button type="primary" icon="el-icon-document" |
| | | >æ´æ°ææ è§åè³æ¨¡ç</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | <div class="valuetop" v-for="(item, index) in deployList" :key="item.id"> |
| | | <div class="val-text"> |
| | | <div> |
| | | ææ å¤æ¥ <span>{{ item.name }}</span> |
| | | </div> |
| | | <div class="text-icon" @click="deletei(index)"> |
| | | <i class="el-icon-delete" /> |
| | | </div> |
| | | </div> |
| | | <div class="val-bon"> |
| | | <el-form ref="form" :model="form" label-width="80px"> |
| | | <el-form-item label="ææ ç±»å"> |
| | | <el-radio-group v-model="form.resource"> |
| | | <el-radio label="é项"></el-radio> |
| | | <el-radio label="ææ¬"></el-radio> |
| | | <el-radio label="æ°ç»"></el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="ææ åç§°"> |
| | | <el-input v-model="form.name"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="ææ å¼"> |
| | | <el-input v-model="item.name"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="ç¹æ®èµæº"> |
| | | <el-radio-group v-model="form.resource"> |
| | | <el-radio label="åºç¡"></el-radio> |
| | | <el-radio label="èªå®ä¹"></el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="åºç¡è§å"> |
| | | <el-input type="textarea" v-model="item.valuetop"></el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | optionvalue: "ä¸éè¦ã没æãä¸ç¥é", |
| | | form: { |
| | | name: "", |
| | | region: "", |
| | | date1: "", |
| | | date2: "", |
| | | delivery: false, |
| | | type: [], |
| | | resource: "", |
| | | desc: "", |
| | | }, |
| | | deployList: [ |
| | | { |
| | | id: 1, |
| | | name: "æ", |
| | | valuetop: |
| | | "(?!.*å¿|.*ä¸|.*没)^.*(æ¯|æ|对|å|ä½|æ£|æ¥|å¤è¯|好|åå |å¤è¯|å»(è¿|好|äº|å®|å»é¢)|æ¥(è¿|äº|å»é¢))|没é|对å|å¯è½|(å·²ç»|æ©)å»äº|å¼äºè¯|è
°å¸¦|å带|è¦ç|(?<!没)æç|表带,10;è¦,5", |
| | | }, |
| | | { |
| | | id: 2, |
| | | name: "ä¸ç¥é", |
| | | valuetop: |
| | | "(ä¸|没|è°|鬼|æä¹).*(ç
|å¯è½|ç¥é|äºè§£|æ¸
æ¥|æ|æç½|确认|ç¡®å®|æå¾|ç¥æ|认å¾|è¯å¾|å°è±¡|çæ|è®°|ä¼|å
³å¿|å
³æ³¨|注æ|åè¯|éç¥|å¬)", |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | |
| | | created() {}, |
| | | |
| | | methods: { |
| | | onSubmit() { |
| | | console.log("submit!"); |
| | | }, |
| | | deletei(index) { |
| | | console.log(index); |
| | | this.deployList.splice(index, 1); |
| | | }, |
| | | addzbiao() { |
| | | const ids = this.deployList.length + 1; |
| | | console.log(ids); |
| | | this.deployList.push({ |
| | | id: ids, |
| | | name: "", |
| | | valuetop: "", |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .top-text { |
| | | margin: 15px; |
| | | margin-top: 0; |
| | | padding: 0 30px 30px 30px; |
| | | background: #f2f5fc; |
| | | border: 1px solid #dcdfe6; |
| | | -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), |
| | | 0 0 6px 0 rgba(0, 0, 0, 0.04); |
| | | } |
| | | .basic { |
| | | height: 50px; |
| | | margin: 15px; |
| | | margin-bottom: 0; |
| | | padding: 0 20px 20px 20px; |
| | | line-height: 50px; |
| | | background: #cdcdce; |
| | | } |
| | | .headline { |
| | | display: flex; |
| | | height: 50px; |
| | | margin: 15px; |
| | | margin-bottom: 0; |
| | | padding: 0 20px 20px 20px; |
| | | line-height: 50px; |
| | | background: #cdcdce; |
| | | justify-content: space-between; |
| | | } |
| | | .valuetop { |
| | | .val-text { |
| | | display: flex; |
| | | height: 50px; |
| | | margin: 15px; |
| | | margin-bottom: 0; |
| | | // padding: 0 20px 20px 20px; |
| | | padding: 0 20px; |
| | | align-items: center; |
| | | background: #cdcdce; |
| | | justify-content: space-between; |
| | | .text-icon { |
| | | width: 35px; |
| | | height: 35px; |
| | | line-height: 35px; |
| | | text-align: center; |
| | | background: #fafafa; |
| | | cursor: pointer; |
| | | border-radius: 5px; |
| | | } |
| | | } |
| | | .val-bon { |
| | | margin: 15px; |
| | | margin-top: 0; |
| | | padding: 30px; |
| | | background: #f2f5fc; |
| | | border: 1px solid #dcdfe6; |
| | | -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), |
| | | 0 0 6px 0 rgba(0, 0, 0, 0.04); |
| | | } |
| | | } |
| | | </style> |