search_ui/components/entity/modals/EntityRulingModal.vue

<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 "@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>