| | |
| | | <span class="mulsz" slot="label" |
| | | ><i class="el-icon-headset"></i> è¯é³è¯¦æ
1</span |
| | | > |
| | | <div class="borderdiv">è¯é³è¯¦æ
1</div> |
| | | <div class="borderdiv"> |
| | | <div> |
| | | <div class="leftside"> |
| | | <i class="el-icon-phone-outline"></i><span>说æåå°è¯´</span> |
| | | </div> |
| | | <div class="offside"> |
| | | <i class="el-icon-user"></i> |
| | | <div class="offside-value"> |
| | | <el-input v-model="input"></el-input> |
| | | <el-radio v-model="radio" label="1">å¤é项</el-radio> |
| | | <el-radio v-model="radio" label="2">å¤é项2</el-radio> |
| | | <el-radio v-model="radio" label="3">å¤é项3</el-radio> |
| | | <el-radio v-model="radio" label="4">å¤é项4</el-radio> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | <el-tab-pane> |
| | | <span class="mulsz" slot="label" |
| | |
| | | return { |
| | | radio: "1", |
| | | userid: "", |
| | | input: "", |
| | | radio: "2", |
| | | }; |
| | | }, |
| | | |
| | |
| | | } |
| | | .borderdiv { |
| | | min-height: 60vh; |
| | | font-size: 20px; |
| | | padding: 30px; |
| | | .leftside { |
| | | margin-bottom: 30px; |
| | | span { |
| | | width: 400px; |
| | | margin-left: 20px; |
| | | padding: 10px; |
| | | color: #fff; |
| | | background: rgb(110, 196, 247); |
| | | border-radius: 10px; |
| | | } |
| | | } |
| | | .offside { |
| | | display: flex; |
| | | flex-direction: row-reverse; |
| | | .offside-value { |
| | | padding: 10px; |
| | | background: rgb(217, 173, 253); |
| | | border-radius: 10px; |
| | | color: #fff; |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | } |
| | | ::v-deep.offside-value .el-radio__label { |
| | | color: #fff; |
| | | } |
| | | .mulsz { |
| | | font-size: 25px; |
| | |
| | | <div class="Questionnairemanagement"> |
| | | <!-- 左侧æ --> |
| | | <div class="sidecolumn"> |
| | | <div class="notebuttom"><i class="el-icon-chat-dot-square" />åçä¿¡</div> |
| | | <div class="notebuttom" @click="handleAdd"> |
| | | <i class="el-icon-chat-dot-square" />åçä¿¡ |
| | | </div> |
| | | <el-divider></el-divider> |
| | | <div class="notestate"> |
| | | <div class="state-text">çä¿¡ç¶æ</div> |
| | |
| | | :class="classestag == 2 ? 'state-lines' : 'state-line'" |
| | | @click="succeedfn" |
| | | > |
| | | <div class="value-left"><i class="el-icon-s-claim" />åéæå</div> |
| | | <div class="value-left"> |
| | | <i class="el-icon-circle-check" />åéæå |
| | | </div> |
| | | <div class="quantitycg">22</div> |
| | | </div> |
| | | <div |
| | | :class="classestag == 3 ? 'state-lines' : 'state-line'" |
| | | @click="losefn" |
| | | > |
| | | <div class="value-left"><i class="el-icon-warning" />åé失败</div> |
| | | <div class="value-left"> |
| | | <i class="el-icon-warning-outline" />åé失败 |
| | | </div> |
| | | <div class="quantitysb">22</div> |
| | | </div> |
| | | <div |
| | | :class="classestag == 4 ? 'state-lines' : 'state-line'" |
| | | @click="awaitfn" |
| | | > |
| | | <div class="value-left"><i class="el-icon-s-comment" />å¾
åé</div> |
| | | <div class="value-left"><i class="el-icon-s-help" />å¾
åé</div> |
| | | <div class="quantityd">22</div> |
| | | </div> |
| | | </div> |
| | |
| | | console.log(this.userList); |
| | | }); |
| | | }, |
| | | // const { pageNum, pageSize, ...params } = this.queryParams; |
| | | submitsidecolumn() {}, |
| | | deletefenlei() {}, |
| | | // ä¾¿æ·æ ç¾ |
| | |
| | | align-items: center; |
| | | padding: 10px 10px; |
| | | background: #88abfc; |
| | | color: #fff; |
| | | cursor: pointer; |
| | | justify-content: space-between; |
| | | } |
| | |
| | | // æ ç¾ç¶æä¿®æ¹ |
| | | handleStatusChange(row) { |
| | | console.log(row.isupload); |
| | | let text = row.isupload === "0" ? "å¯ç¨" : "åç¨"; |
| | | let text = row.isupload == 0 ? "åç¨" : "å¯ç¨"; |
| | | this.$modal |
| | | .confirm('确认è¦"' + text + '""' + row.tagname + '"æ ç¾åï¼') |
| | | .then(function () { |
| | |
| | | this.$modal.msgSuccess(text + "æå"); |
| | | }) |
| | | .catch(function () { |
| | | row.isupload = row.isupload === "0" ? "1" : "0"; |
| | | row.isupload = row.isupload == 0 ? 1 : 0; |
| | | }); |
| | | }, |
| | | /** æç´¢æé®æä½ */ |
¶Ô±ÈÐÂÎļþ |
| | |
| | | <template> |
| | | <div class="Questionnairemanagement"> |
| | | <!-- 左侧æ --> |
| | | <div class="sidecolumn"> |
| | | <el-input placeholder="è¾å
¥å
³é®åè¿è¡è¿æ»¤" v-model="filterText"> |
| | | </el-input> |
| | | |
| | | <el-tree |
| | | class="filter-tree" |
| | | :data="data" |
| | | :props="defaultProps" |
| | | default-expand-all |
| | | :filter-node-method="filterNode" |
| | | ref="tree" |
| | | > |
| | | <span class="custom-tree-node" slot-scope="{ node, data }"> |
| | | <span>{{ node.label }}</span> |
| | | <span> |
| | | <el-button type="text" size="mini" @click="() => append(data)"> |
| | | æ°å¢å级 |
| | | </el-button> |
| | | <el-button |
| | | type="text" |
| | | size="mini" |
| | | @click="() => remove(node, data)" |
| | | > |
| | | å é¤ |
| | | </el-button> |
| | | </span> |
| | | </span> |
| | | </el-tree> |
| | | </div> |
| | | <!-- ä¸é¨æ°æ® --> |
| | | <div class="leftvlue"> |
| | | <div class="compile" v-for="item in list"> |
| | | <div class="compile-title"> |
| | | {{ item.name }}: <span>{{ item.uapiurl }}</span> |
| | | </div> |
| | | <div class="compile-value"> |
| | | <div class="compile-min" v-for="itea in item.value"> |
| | | <div> |
| | | <el-input v-model="itea.value" placeholder="å
¥å注解"></el-input> |
| | | </div> |
| | | <div> |
| | | <el-input v-model="itea.name" placeholder="å
¥åå"></el-input> |
| | | </div> |
| | | <div @click="drawer = true">å±å¼ä¸çº§</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-drawer |
| | | title="ææ¯äºçº§" |
| | | direction="btt" |
| | | :visible.sync="drawer" |
| | | :with-header="false" |
| | | > |
| | | <div class="compile-value"> |
| | | <div class="compile-min" v-for="itea in 6"> |
| | | <div> |
| | | <el-input v-model="input" placeholder="å
¥å注解"></el-input> |
| | | </div> |
| | | <div> |
| | | <el-input v-model="inputs" placeholder="å
¥åå"></el-input> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-drawer> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | let id = 1000; |
| | | export default { |
| | | name: "Editinterface", |
| | | |
| | | watch: { |
| | | filterText(val) { |
| | | this.$refs.tree.filter(val); |
| | | }, |
| | | }, |
| | | |
| | | data() { |
| | | const data = [ |
| | | { |
| | | id: 1, |
| | | label: "æ£è
æå¡ä¸å¿", |
| | | children: [ |
| | | { |
| | | id: 4, |
| | | label: "æ£è
å表", |
| | | }, |
| | | { |
| | | id: 21, |
| | | label: "æ£è
æå¡", |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 2, |
| | | label: "ä¸çº§ 2", |
| | | children: [ |
| | | { |
| | | id: 5, |
| | | label: "äºçº§ 2-1", |
| | | }, |
| | | { |
| | | id: 6, |
| | | label: "äºçº§ 2-2", |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 3, |
| | | label: "ä¸çº§ 3", |
| | | children: [ |
| | | { |
| | | id: 7, |
| | | label: "äºçº§ 3-1", |
| | | }, |
| | | { |
| | | id: 8, |
| | | label: "äºçº§ 3-2", |
| | | }, |
| | | ], |
| | | }, |
| | | ]; |
| | | return { |
| | | drawer: false, |
| | | input: "", |
| | | inputs: "", |
| | | // æ¥è¯¢åæ° |
| | | queryParams: {}, |
| | | currentRow: null, //éä¸è¡æ°æ® |
| | | filterText: "", |
| | | |
| | | data: JSON.parse(JSON.stringify(data)), |
| | | data: JSON.parse(JSON.stringify(data)), |
| | | |
| | | defaultProps: { |
| | | children: "children", |
| | | label: "label", |
| | | }, |
| | | list: [ |
| | | { |
| | | id: "23", |
| | | name: "è·åæ£è
å表", |
| | | uapiurl: "http://api", |
| | | value: [ |
| | | { name: "children", value: "注解" }, |
| | | { name: "childrenone", value: "注解ä¸" }, |
| | | { name: "childrentwo", value: "注解äº" }, |
| | | { name: "childrenthree", value: "注解ä¸" }, |
| | | ], |
| | | }, |
| | | { |
| | | id: "13", |
| | | name: "è·åæ£è
详æ
", |
| | | uapiurl: "http://api/xqq", |
| | | value: [ |
| | | { name: "children", value: "注解" }, |
| | | { name: "childrenone", value: "注解ä¸" }, |
| | | { name: "childrentwo", value: "注解äº" }, |
| | | { name: "childrenthree", value: "注解ä¸" }, |
| | | { name: "childrenthree", value: "注解å" }, |
| | | ], |
| | | }, |
| | | ], |
| | | }; |
| | | }, |
| | | watch: {}, |
| | | created() {}, |
| | | |
| | | methods: { |
| | | filterNode(value, data) { |
| | | if (!value) return true; |
| | | return data.label.indexOf(value) !== -1; |
| | | }, |
| | | append(data) { |
| | | const newChild = { id: id++, label: "å级", children: [] }; |
| | | if (!data.children) { |
| | | this.$set(data, "children", []); |
| | | } |
| | | data.children.push(newChild); |
| | | }, |
| | | |
| | | remove(node, data) { |
| | | const parent = node.parent; |
| | | const children = parent.data.children || parent.data; |
| | | const index = children.findIndex((d) => d.id === data.id); |
| | | children.splice(index, 1); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .Questionnairemanagement { |
| | | display: flex; |
| | | } |
| | | .sidecolumn { |
| | | width: 300px; |
| | | min-height: 100vh; |
| | | text-align: center; |
| | | // display: flex; |
| | | margin-top: 20px; |
| | | margin: 20px; |
| | | padding: 10px; |
| | | background: #edf1f7; |
| | | 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); |
| | | } |
| | | ::v-deep .sidecolumn .el-tree { |
| | | margin-top: 30px; |
| | | background: none; |
| | | } |
| | | |
| | | .leftvlue { |
| | | // display: flex; |
| | | // flex: 1; |
| | | width: 80%; |
| | | margin-top: 20px; |
| | | // margin: 20px; |
| | | padding: 30px; |
| | | background: #ffff; |
| | | 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); |
| | | .compile { |
| | | border: 1px solid #dcdfe6; |
| | | padding: 15px; |
| | | margin-top: 10px; |
| | | } |
| | | } |
| | | .compile-value { |
| | | display: flex; |
| | | margin-top: 10px; |
| | | |
| | | .compile-min { |
| | | border: 1px solid #dcdfe6; |
| | | width: 150px; |
| | | div { |
| | | padding: 5px; |
| | | text-align: center; |
| | | } |
| | | } |
| | | } |
| | | .compile-min div:nth-child(3) { |
| | | padding: 0; |
| | | margin: 5px; |
| | | background: bisque; |
| | | border-radius: 3px; |
| | | } |
| | | </style> |
| | |
| | | </el-row> |
| | | </div> |
| | | <el-divider></el-divider> |
| | | |
| | | |
| | | <div> |
| | | <h5>äºå·è¡¨</h5> |
| | | <el-row :gutter="10" class="mb8"> |
| | |
| | | [process.env.VUE_APP_BASE_API]: { |
| | | target1: `http://192.168.1.4:8080`, |
| | | target: `http://192.168.1.4:8080`, |
| | | // target: `http://www.hxsoft.com:8080`, |
| | | changeOrigin: true, |
| | | pathRewrite: { |
| | | ['^' + process.env.VUE_APP_BASE_API]: '' |