前后端分目录
This commit is contained in:
andywang
229
h5-datax-manager/src/components/models/varialeSelect.vue
Normal file
229
h5-datax-manager/src/components/models/varialeSelect.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<div class="variateSelect" :style="{width:width,height:height}">
|
||||
<div style="width: 35%;" class="variateSelectLeft" :style="{height:height}">
|
||||
<el-dropdown trigger="click" @command="em">
|
||||
<span class="el-dropdown-link" style="color: #fff;">
|
||||
{{variableType==1?"常量":variableType==2?"变量":variableType==3?"自定义":"错误"}}<i
|
||||
class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-caret-right" :command="1" :disabled="disabled.indexOf(1)!=-1">常量
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-caret-right" :command="2" :disabled="disabled.indexOf(2)!=-1">变量
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-caret-right" :command="3" :disabled="disabled.indexOf(3)!=-1">自定义
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- 常量 -->
|
||||
<el-input style="margin-left: -10%;width: 75%;" :value="value" :size="size" placeholder="请输入内容"
|
||||
v-if="variableType===1" @input="$emit('input',$event)"></el-input>
|
||||
|
||||
|
||||
<!-- 变量 -->
|
||||
<el-select style="margin-left: -10%;width: 75%;" :size="size" :value="value" filterable
|
||||
@change="$emit('input',$event)" v-else-if="variableType===2&&!variableCascader">
|
||||
<el-option v-for="item in MyFieldUser" :key="item.id" :label="item.fieldCn" :value="item.fieldEn">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 变量级联 -->
|
||||
|
||||
<el-cascader style="margin-left: -10%;width: 75%;" :value="value" :size="size" v-else-if="variableType===2&&variableCascader" filterable :options="FieldUserObj"
|
||||
:key="(value.random?value.random:0)" @visible-change="randomAdd(value,$event)" @change="$emit('input',$event)"
|
||||
:props="{ expandTrigger: 'hover' }" ></el-cascader>
|
||||
|
||||
<!-- 自定义按钮 -->
|
||||
<el-button plain @click="CustomClick" v-else-if="variableType===3"
|
||||
:style="{height:height}" class="varialeType3Button" :size="size">
|
||||
{{value==""||JSON.parse(value).formula===""?'请输入自定义内容':JSON.parse(value).formula}}</el-button>
|
||||
<!-- 自定义的弹框 -->
|
||||
<el-dialog title="自定义" v-if="dialogVisible" :visible.sync="dialogVisible" width="70%"
|
||||
:close-on-click-modal="false" append-to-body>
|
||||
<teV2 v-model="tempValue"></teV2>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible=false;tempValue=''">取 消</el-button>
|
||||
<el-button type="primary" @click="sectionSure" :disabled="type3Sure">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import teV2 from '@/components/common/teV2.vue'
|
||||
export default {
|
||||
components: {
|
||||
teV2
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
tempValue: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
default: 'mini'
|
||||
},
|
||||
variableType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
value: {
|
||||
type: String|Array,
|
||||
default: ""
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '28px'
|
||||
},
|
||||
disabled: {
|
||||
type: Array,
|
||||
default(){
|
||||
return []
|
||||
}
|
||||
},
|
||||
valueType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
interceptCustom: { //是否拦截自定义点击
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
variableCascader:{
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
variableCascaderValue:{
|
||||
type: Array,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// console.log(this.variableType)
|
||||
if (!this.variableType) {
|
||||
this.$emit('update:variableType', 1)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
CustomClick() {
|
||||
if(this.interceptCustom){
|
||||
this.$emit('CustomCallback',this.value)
|
||||
return
|
||||
}
|
||||
this.tempValue = this.value === '' ? this.value : JSON.parse(this.value).formula;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
sectionSure(e) {
|
||||
let arr = String(this.tempValue).match(/@(.|\n)*?@/g) === null ? [] : this.tempValue.match(/@(.|\n)*?@/g);
|
||||
let is = false
|
||||
// console.log(arr,this.tempValue)
|
||||
arr = Array.from(new Set(arr))
|
||||
// console.log(arr)
|
||||
arr = arr.map(value => {
|
||||
console.log(value)
|
||||
value = value.split('')
|
||||
value.pop()
|
||||
value.shift()
|
||||
value = value.join('')
|
||||
if (this.mixinGetValueByCn(value)) {
|
||||
return this.mixinGetValueByCn(value)
|
||||
} else {
|
||||
is = true
|
||||
this.$message.error(`没有找到指标:${value}`);
|
||||
return this.mixinGetValueByCn(value)
|
||||
}
|
||||
|
||||
})
|
||||
// console.log(arr)
|
||||
// console.log(e)
|
||||
if (is) {
|
||||
return
|
||||
}
|
||||
let obj = {
|
||||
farr: arr,
|
||||
formula: this.tempValue.trim()
|
||||
}
|
||||
|
||||
|
||||
// console.log(this.tempValue)
|
||||
this.$emit('input', JSON.stringify(obj))
|
||||
this.dialogVisible = false
|
||||
},
|
||||
em(e) {
|
||||
this.$emit('update:variableType', e)
|
||||
this.$emit('input', "")
|
||||
},
|
||||
isodd(text, str) { // 判断某个字符串中 某个字符是否是奇数
|
||||
let num = 0
|
||||
for (let i of text) {
|
||||
if (i === str) {
|
||||
num++
|
||||
}
|
||||
}
|
||||
if (num % 2 === 1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
FieldUserObj(){
|
||||
|
||||
if(this.variableCascaderValue===undefined){
|
||||
|
||||
if(this.$store.state.FieldUserObj){
|
||||
return this.$store.state.FieldUserObj.data.fieldList
|
||||
}else{
|
||||
return []
|
||||
}
|
||||
}
|
||||
return this.variableCascaderValue
|
||||
|
||||
},
|
||||
MyFieldUser(e) {
|
||||
if (this.valueType) {
|
||||
return this.FieldUser.filter(x => x.valueType == this.valueType)
|
||||
} else {
|
||||
return this.FieldUser
|
||||
}
|
||||
},
|
||||
type3Sure() {
|
||||
return this.isodd(this.tempValue, '@')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.variateSelect {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.variateSelectLeft {
|
||||
background-color: #ddd;
|
||||
border-radius: 5px;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 6px;
|
||||
padding-right: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
.varialeType3Button{
|
||||
flex-shrink: 0;flex-grow: 1; margin-left: -10%;width: 75%;overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user