<template>
<div class="rule-form">
<a-row class="rule-form-item">
<a-col :span="2" class="rule-form__center rule-form__header"
>选择</a-col
>
<a-col :span="4" class="rule-form__center rule-form__header"
>规则代码</a-col
>
<a-col :span="4" class="rule-form__center rule-form__header"
>名称</a-col
>
<a-col :span="14" class="rule-form__center rule-form__header"
>条件</a-col
>
</a-row>
<!-- <div v-for="(condition, index) in conditions" :key="index"> -->
<!-- <div class="rule-form-item rule-form__center rule-form__header" v-if="config.name">{{ config.name }}</div> -->
<div>
<a-row
v-for="field in conditions"
:key="field.code"
class="rule-form-item"
type="flex"
align="middle"
>
<a-col :span="2" class="rule-form__center">
<a-checkbox
:checked="field.select"
@change="toggleCondition(field)"
:disabled="disabled"
></a-checkbox>
</a-col>
<a-col :span="2" class="rule-form__center">
{{ field.code }}
</a-col>
<a-col :span="4" class="rule-form__center">
{{ field.name }}
</a-col>
<a-col :span="16">
<template v-if="field.factorType == 'Dictionary'">
<!-- {{field.options}} -->
<!-- <a-checkbox-group
:options="field.options"
v-model="fields[field.code]"
:disabled="disabled || !field.select"
></a-checkbox-group> -->
<dictionary-select
:value="fields[field.code]"
:operatorId="field.operatorId"
:type="field.factorType"
:disabled="disabled || !field.select"
:optionsList="field.options"
@textChange="textChange(field, $event)"
@selectChange="selectChange(field, $event)"
></dictionary-select>
</template>
<template
v-else-if="
field.factorType == 'String' ||
field.factorType == 'Number'
"
>
<text-field
:value="fields[field.code]"
:operatorId="field.operatorId"
:type="field.factorType"
:disabled="disabled || !field.select"
@textChange="textChange(field, $event)"
></text-field>
</template>
<!-- <template v-else-if="field.factorType == 'Number'"> -->
<!-- <range-field
v-model="fields[field.code]"
:disabled="disabled || !field.select"
></range-field> -->
<!-- </template> -->
<template v-else-if="field.factorType == 'AreaCode'">
<area-select
ref="areaSelect"
v-model="fields[field.code]"
:disabled="disabled || !field.select"
></area-select>
</template>
<template v-else-if="field.factorType == 'CustomAreaCode'">
<custom-select
ref="customSelect"
v-model="fields[field.code]"
:disabled="disabled || !field.select"
></custom-select>
</template>
</a-col>
</a-row>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator';
import factorUtil from '@/utils/mapper/factors';
import AreaSelect from './components/AreaSelect.vue';
import CustomSelect from './components/CustomSelect.vue';
import TextField from './components/Text.vue';
import RangeField from './components/RangeField.vue';
import DictionarySelect from './components/DictionarySelect.vue';
@Component({
components: {
TextField,
RangeField,
AreaSelect,
CustomSelect,
DictionarySelect,
},
})
export default class extends Vue {
@Prop(Array) private readonly conditions!: any[];
@Prop({ default: false }) private readonly disabled!: boolean;
private fields: any = {};
// private created() {
// this.onConditionChange(this.conditions, []);
// }
private mounted() {
console.log('customSelect ruleForm mounted');
}
openShow() {
this.$nextTick(() => {
console.log('ruleForm openShow');
const operatorObj = this.$store.state.common.operatorObj;
this.conditions.forEach(condition => {
if (
!condition.operatorId &&
operatorObj[condition.factorType]
) {
const operators =
operatorObj[condition.factorType].operatorList;
if (operators.length === 1) {
condition.operatorId = operators[0].id;
} else {
condition.operatorId = '';
}
}
const factorInfo = factorUtil.getFactorInfo(
condition.operatorId
);
const component = (factorInfo as any).component;
let value: any = condition.value;
if (
['Dictionary', 'CustomAreaCode', 'AreaCode'].includes(
condition.factorType
)
) {
value =
(condition.value && condition.value.split(',')) || [];
}
if ('CustomAreaCode' === condition.factorType) {
this.showCustomSelectChild();
}
// if ('AreaCode' === condition.factorType) {
// this.showAreaSelectChild();
// }
this.$set(this.fields, condition.code, value);
});
});
}
private showCustomSelectChild() {
const custSelect = this.$refs.customSelect[0] as CustomSelect;
console.log('customSelect showChild', custSelect);
custSelect.showOpen();
}
private toggleCondition(field: any) {
field.select = !field.select;
}
private textChange(field: { code: string; operatorId: string }, data: any) {
this.fields[field.code] = data.value;
field.operatorId = data.operatorId;
}
private selectChange(field: any, data: any) {
console.log(field, 'field');
console.log(data, 'data');
this.fields[field.code] = data.value;
}
}
</script>
以上是全部代码
下面是核心
private showCustomSelectChild() {
const custSelect = this.$refs.customSelect[0] as CustomSelect;
console.log('customSelect showChild', custSelect);
custSelect.showOpen();
}
网友评论