2020-10-04 20:38:27 +08:00
|
|
|
|
Vue.component("http-request-conds-view", {
|
|
|
|
|
|
props: ["v-conds"],
|
|
|
|
|
|
data: function () {
|
|
|
|
|
|
let conds = this.vConds
|
|
|
|
|
|
if (conds == null) {
|
|
|
|
|
|
conds = {
|
|
|
|
|
|
isOn: true,
|
|
|
|
|
|
connector: "or",
|
|
|
|
|
|
groups: []
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
return {
|
2021-05-12 15:07:30 +08:00
|
|
|
|
initConds: conds,
|
2020-10-04 20:38:27 +08:00
|
|
|
|
components: window.REQUEST_COND_COMPONENTS
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2021-05-12 15:07:30 +08:00
|
|
|
|
computed: {
|
|
|
|
|
|
// 之所以使用computed，是因为需要动态更新
|
|
|
|
|
|
conds: function () {
|
|
|
|
|
|
return this.initConds
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
2020-10-04 20:38:27 +08:00
|
|
|
|
methods: {
|
|
|
|
|
|
typeName: function (cond) {
|
|
|
|
|
|
let c = this.components.$find(function (k, v) {
|
|
|
|
|
|
return v.type == cond.type
|
|
|
|
|
|
})
|
|
|
|
|
|
if (c != null) {
|
|
|
|
|
|
return c.name;
|
|
|
|
|
|
}
|
|
|
|
|
|
return cond.param + " " + cond.operator
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
template: `<div>
|
|
|
|
|
|
<div v-if="conds.groups.length > 0">
|
|
|
|
|
|
<div v-for="(group, groupIndex) in conds.groups">
|
|
|
|
|
|
<var v-for="(cond, index) in group.conds" style="font-style: normal;display: inline-block; margin-bottom:0.5em">
|
|
|
|
|
|
<span class="ui label tiny">
|
|
|
|
|
|
<var v-if="cond.type.length == 0" style="font-style: normal">{{cond.param}} <var>{{cond.operator}}</var></var>
|
|
|
|
|
|
<var v-if="cond.type.length > 0" style="font-style: normal">{{typeName(cond)}}: </var>
|
|
|
|
|
|
{{cond.value}}
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
<var v-if="index < group.conds.length - 1"> {{group.connector}} </var>
|
|
|
|
|
|
</var>
|
|
|
|
|
|
<div class="ui divider" v-if="groupIndex != conds.groups.length - 1" style="margin-top:0.3em;margin-bottom:0.5em"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>`
|
|
|
|
|
|
})
|
