<template> <div class="position-relative"> <form class="mq-section-form"> <!-- <div class="form-row"> <label class="col-3" for="">متن حکم: </label> <div class="col input-container"> <input type="text" placeholder="متن حکم را وارد کنید" v-model="value.content" /> <div v-if="errors.content && errors.content.length > 0"> <div class="error-input" v-for="(error, index) in errors.content" :key="index" > {{ error }} </div> </div> </div> </div> --> <div class="form-row text__14"> <label class="col-3" for="">وضعیت</label> <!-- <span class="col-3 text-overflow"> {{ data.entity.content }}</span> --> <div class="input-container col d-flex align-items-center"> <select v-model="value.treason_type" name="treason_type" id="treason_type" class="form-control" > <option v-for="items in ruleSchema?.tstate_options" selected :value="items" > {{ items.title }} </option> </select> <div v-if="errors['treason_type'] && errors['treason_type'].length > 0"> <div class="error-input" v-for="(error, index) in errors['treason_type']" :key="index" > {{ error }} </div> </div> </div> </div> <div class="form-row" v-if="value?.treason_type?.showInput"> <div class="col-3"> <label for="">{{ value.treason_type?.type_label }}: </label> </div> <div class="col input-container d-flex align-items-center"> <input type="text" placeholder="عنوان را وارد کنید" v-model="value.treason" class="form-control title-input" /> <div v-if="errors.treason && errors.treason.length > 0"> <div class="error-input" v-for="(error, index) in errors.treason" :key="index" > {{ error }} </div> </div> </div> </div> <div class="form-row"> <label class="col-3" for="">توضیحات</label> <div class="col input-container"> <textarea name="" id="" v-model="value.description" cols="30" rows="3" placeholder="توضیحات ای از پاسخ را گویا بیان فرمایید" ></textarea> <div v-if="errors['description'] && errors['description'].length > 0" > <div class="error-input" v-for="(error, index) in errors['description']" :key="index" > {{ error }} </div> </div> </div> </div> <div class="popUp-tab__buttons"> <div class="d-flex justify-content-between flex-grow-1"> <button type="button" class="btn delete-btn btn-outline-danger button_delete_SocialEffects" @click.prevent="deleteProperty(value?.id)" > حذف </button> <div class="d-flex"> <button type="button" class="popUp-tab__clear btn" @click.prevent="$emit('close-modal')" > لغو </button> <button type="button" class="popUp-tab__submit btn" @click.prevent="localSaveProperty()" > ثبت </button> </div> </div> </div> </form> </div> </template> <script> import { propertyMixin } from "~/entity/mixins/propertyMixin"; import { commonMixin } from "~/entity/mixins/commonMixin"; import { mapState } from "pinia"; import { useEntityStore } from "@search/stores/entityStore"; export default { mixins: [propertyMixin, commonMixin], props: { data: { type: Object, default: () => ({}) }, activeTabGetter: { default() { return {}; }, }, }, mounted() { const res = this.getPropertyValue( this.data.entity, this.data.keyName, this.data.index ); this.ruleSchema = this.activeTabGetter?.items.find( (item) => item.key == "valid_state" ); if (res) this.value = res; }, data() { return { value: { treason_type:null, treason: "", description: null, }, states: ["نامشخص", "مدل شده", "اتمام شده", "منقضی شده"], showInput: false, ruleSchema: {}, }; }, computed: { ...mapState(useEntityStore, [ "selectedItemEntityGetter", // "activeEntityViewSchemaGetter", ]), }, methods: { setTanghihState() { this.tstate = []; }, localSaveProperty() { let payload = structuredClone(this.value); payload.treason_type = payload.treason_type.value; this.saveProperty(payload); }, }, }; </script> <style scoped lang="scss"> @import "../../../assets/common/scss/mixin.scss"; .answer-modal textarea { height: auto; } .user-modal .my-profile { padding-bottom: 0px; } img { height: auto; max-width: 2.5rem; margin-right: 1rem; } .d-center { display: flex; align-items: center; } .selected img { width: auto; max-height: 23px; margin-right: 0.5rem; } .v-select .dropdown li { border-bottom: 1px solid rgba(112, 128, 144, 0.1); } .v-select .dropdown li:last-child { border-bottom: none; } .v-select .dropdown li a { padding: 10px 20px; width: 100%; font-size: 1.25em; color: #3c3c3c; } .v-select .dropdown-menu .active > a { color: #fff; } .text-overflow { @include textOverflow(36em); } .mq-section-form { height: 14em; overflow: auto; } </style>