99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<script setup>
|
|
import { ref, reactive } from "vue";
|
|
import permission from "@/components/Setting/ViewPermission/element/selectElement.vue";
|
|
import menuRoles from "@/components/Setting/ViewPermission/element/table.vue";
|
|
import { useSettingStore } from "~/store/apps/Setting/setting";
|
|
const store = useSettingStore();
|
|
const props = defineProps({
|
|
typeForm:{
|
|
type:String
|
|
}
|
|
})
|
|
const emit = defineEmits(['stateValue']);
|
|
const permissionCategories = [
|
|
{
|
|
value: "0",
|
|
label: "General",
|
|
},
|
|
{
|
|
value: "1",
|
|
label: "ProductServce",
|
|
},
|
|
{
|
|
value: "2",
|
|
label: "Product",
|
|
},
|
|
];
|
|
|
|
const form = ref({});
|
|
const data = ref(null);
|
|
const ready = ref(false);
|
|
const onSubmit = () => {
|
|
console.log(data.value.form$.data);
|
|
emit('stateValue', {data:data.value.form$.data, state:false})
|
|
};
|
|
|
|
onBeforeMount(() => {
|
|
console.log("props:",props.typeForm)
|
|
if(props.typeForm === "edit")
|
|
Object.assign(form.value, store.typeUser);
|
|
// console.log(form)
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!-- <pre>{{ form }}</pre> -->
|
|
<Vueform
|
|
ref="data"
|
|
v-model="form"
|
|
validate-on="change|step"
|
|
method="post"
|
|
:endpoint="onSubmit"
|
|
>
|
|
<template #empty>
|
|
<FormSteps>
|
|
<FormStep
|
|
name="page0"
|
|
label="Type User"
|
|
:elements="['typeUser', 'roleType']"
|
|
/>
|
|
<FormStep
|
|
name="page1"
|
|
label="Permission Categories"
|
|
:elements="['text', 'tab', 'gridTable', 'roleMenu', 'permission']"
|
|
/>
|
|
</FormSteps>
|
|
<FormElements>
|
|
<ListElement name="roleMenu" :default="form.roleMenu" class="mx-4" add-text="+ permission">
|
|
<template #default="{ index }">
|
|
<ObjectElement :name="index" class="px-3 py-3 border border-gray-200 rounded-xl">
|
|
<permission name="permission" :items="permissionCategories" :label="`Permission Category`"/>
|
|
<div class="vf-element-layout vf-col-12">
|
|
<!-- <menuRoles name="gridTable" :items="form.roleMenu[index] != null ? form.roleMenu[index]: []"/> -->
|
|
<menuRoles name="gridTable" :items="props.typeForm === 'edit' ? form.roleMenu[index]: []"/>
|
|
</div>
|
|
</ObjectElement>
|
|
</template>
|
|
</ListElement>
|
|
<TextElement
|
|
:default="form.typeUser"
|
|
name="typeUser"
|
|
label="Role Name"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
/>
|
|
<TextElement
|
|
:default="form.typeUser"
|
|
name="roleType"
|
|
label="Role Type"
|
|
:columns="{
|
|
container: 6,
|
|
}"
|
|
/>
|
|
</FormElements>
|
|
|
|
<FormStepsControls />
|
|
</template>
|
|
</Vueform>
|
|
</template> |