98 lines
2.0 KiB
Vue
98 lines
2.0 KiB
Vue
<template>
|
|
<v-row class="search-box" align="center" no-gutters>
|
|
<v-col v-if="item.label" cols="4">
|
|
<label for="" class="search-box-label">
|
|
<v-icon
|
|
x-small
|
|
:color="item.required ? '#fb8200' : 'primary'"
|
|
class="mr-1"
|
|
>mdi-record-circle</v-icon
|
|
>
|
|
{{ item.label }}
|
|
<span v-if="item.essential">*</span>
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="item.label ? 8 : ''">
|
|
<v-row>
|
|
<template v-for="(groupItem, idx) in item.groups">
|
|
<v-col
|
|
:cols="groupItem.cols"
|
|
:class="groupItem.class"
|
|
:key="'SelectBoxes' + idx"
|
|
>
|
|
<template v-if="groupItem.text">
|
|
<span>{{ groupItem.text }}</span>
|
|
</template>
|
|
<template v-else>
|
|
<component
|
|
:is="'SelectBox'"
|
|
:parentPrgmId="parentPrgmId"
|
|
:item="groupItem"
|
|
@gridEditingFinish="gridEditingFinish"
|
|
/>
|
|
</template>
|
|
</v-col>
|
|
</template>
|
|
</v-row>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapMutations } from 'vuex';
|
|
import SelectBox from './SelectBox';
|
|
export default {
|
|
props: {
|
|
parentPrgmId: {
|
|
type: String,
|
|
require: true,
|
|
},
|
|
item: {
|
|
require: true,
|
|
},
|
|
bindingData: {
|
|
type: String,
|
|
require: false,
|
|
},
|
|
// gridEditingFinish: {
|
|
// // type: function
|
|
// // require: true
|
|
// }
|
|
},
|
|
components: {
|
|
SelectBox,
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
rowGridSelectData(state) {
|
|
if (!this.bindingData) {
|
|
return state.pageData[this.parentPrgmId]['rowGridSelectData'];
|
|
} else {
|
|
return state.pageData[this.parentPrgmId][this.bindingData][
|
|
'rowGridSelectData'
|
|
];
|
|
}
|
|
},
|
|
}),
|
|
},
|
|
created() {},
|
|
methods: {
|
|
...mapMutations({ setPageData: 'setPageData' }),
|
|
gridEditingFinish(data) {
|
|
const newData = {
|
|
[data.columnName]: data.value,
|
|
};
|
|
this.setPageData({
|
|
rowGridSelectData: Object.assign(this.rowGridSelectData, newData),
|
|
});
|
|
this.$emit('gridEditingFinish', data);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|