593 lines
15 KiB
Vue
593 lines
15 KiB
Vue
<template>
|
||
<div class="position-relative">
|
||
<form action="">
|
||
<div class="row" v-if="statosPag == 0">
|
||
<div class="col-12 borders mb-2">
|
||
<p class="col-md-4" for="title">فهرست معیار ها :</p>
|
||
<select
|
||
class="form-control"
|
||
style="border: 1px solid #495057"
|
||
v-model="item"
|
||
>
|
||
<option :value="undefined" selected disabled>
|
||
انتخاب از فهرست معیار ها
|
||
</option>
|
||
|
||
<option
|
||
:key="index"
|
||
:value="crition"
|
||
v-for="(crition, index) in critions"
|
||
>
|
||
{{ crition.title }}
|
||
</option>
|
||
</select>
|
||
|
||
<div class="d-flex mt-2">
|
||
<div>
|
||
<p>موضوع:</p>
|
||
</div>
|
||
<div
|
||
v-for="(item, index) in data.entity.subject"
|
||
style="cursor: pointer"
|
||
@click.prevent="getDataCriterionsSubject(item.id)"
|
||
>
|
||
<p id="item.id" class="me-1 text-primary">
|
||
{{ item.title
|
||
}}<span class="me-1 text-muted" style="cursor: auto">،</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="criterionsSubject.length" class="col-12 mt-4 borders1">
|
||
<P>فهرست معیار های مرتبط با موضوع :</P>
|
||
<div class="list-crition-select mt-3" v-if="show">
|
||
<div
|
||
v-for="(crition, index) in criterionsSubject"
|
||
class="crition-select d-flex flex-column bd-highlight mt-4 mb-4"
|
||
>
|
||
<div class="d-flex crition-select-item mb-3">
|
||
<div class="form-check">
|
||
<input
|
||
class="form-check-input"
|
||
type="checkbox"
|
||
:value="crition"
|
||
v-model="lists"
|
||
:id="index"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<p class="text__16" style="color: inherit">
|
||
{{ crition.title }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- <div>
|
||
<p class="text__14" style="color: #92a2b2">
|
||
<span>مطلوب :</span> {{ crition.favorite }}
|
||
</p>
|
||
</div> -->
|
||
<div>
|
||
<p class="text__14" style="color: #92a2b2">
|
||
<span>توضیحات :</span> {{ crition.text }}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="show == false" style="color: #6c757d">
|
||
<p>روی یک موضوع کلیک کنید</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-12 mt-2">
|
||
<p>معیار های انتخاب شده :</p>
|
||
<div class="list-crition" v-if="lists.length >= 1" ref="parent">
|
||
<div
|
||
v-for="(list, index) in lists"
|
||
class="critions d-flex flex-column bd-highlight"
|
||
>
|
||
<div class="d-flex justify-content-between">
|
||
<div class="d-flex">
|
||
<p :id="list.id" class="me-1 mb-1 crition" :ref="list.id">
|
||
<span>{{ index + 1 }}) </span>{{ list.title }}
|
||
</p>
|
||
<button
|
||
type="button"
|
||
class="close"
|
||
@click.prevent="activeFormIndex = index"
|
||
></button>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
class="close"
|
||
@click.prevent="removCrition(index, list)"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="activeFormIndex == index" class="d-flex">
|
||
<input
|
||
class="form-control form-control-sm"
|
||
type="text"
|
||
placeholder="توضیحات"
|
||
v-model="itemDescription"
|
||
@keyup.enter="submit(itemDescription, list)"
|
||
/>
|
||
<button
|
||
type="button"
|
||
class="close text-primary"
|
||
@click.prevent="closeModal()"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="list-crition"
|
||
v-if="lists.length == 0"
|
||
style="color: #6c757d"
|
||
>
|
||
<p>از لیست بالا موردی را انتخابکنید</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="popUp-tab__buttons">
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<span> </span>
|
||
<div data-v-e8ee7a26="" class="d-flex">
|
||
<button
|
||
type="button"
|
||
class="btn btn-outline-primary"
|
||
@click.prevent="saveProperty()"
|
||
>
|
||
افزودن
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" v-if="statosPag == 1">
|
||
<div class="col-12 mb-2">
|
||
<div class="menu-multiselect">
|
||
<select
|
||
class="form-control"
|
||
style="border: 1px solid #495057"
|
||
v-model="itemSelect.entity_id"
|
||
>
|
||
<option :value="undefined" selected disabled>
|
||
انتخاب از فهرست معیار ها
|
||
</option>
|
||
|
||
<option
|
||
:key="index"
|
||
:value="crition.id"
|
||
v-for="(crition, index) in critions"
|
||
>
|
||
{{ crition.title }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 mb-2">
|
||
<div class="form-row form-group p-0">
|
||
<label class="col-md-12" for="description">توضیحات</label>
|
||
<textarea
|
||
class="col-md-12 h-auto mb-2"
|
||
v-model="itemSelect.description"
|
||
name="description"
|
||
cols="30"
|
||
rows="5"
|
||
placeholder="توضیحات را وارد کنید"
|
||
style="overflow: auto"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="popUp-tab__buttons">
|
||
<div class="d-flex justify-content-between flex-grow-1">
|
||
<button
|
||
class="btn delete-btn btn-outline-danger"
|
||
@click.prevent="removCrition(0, itemSelect)"
|
||
>
|
||
حذف
|
||
</button>
|
||
<div data-v-e8ee7a26="" class="d-flex">
|
||
<button
|
||
type="button"
|
||
class="popUp-tab__clear btn"
|
||
@click.prevent="closeModal"
|
||
>
|
||
لغو
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="btn btn-outline-primary"
|
||
@click.prevent="saveEditCriterion()"
|
||
>
|
||
ذخیره
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import repoApi from "~/apis/repoApi";
|
||
import { mapState, mapActions } from "pinia";
|
||
import { propertyMixin } from "~/chat/mixins/propertyMixin";
|
||
|
||
export default {
|
||
mixins: [propertyMixin],
|
||
props: {
|
||
data: { type: Object, default: () => ({}) },
|
||
},
|
||
beforeMount() {
|
||
if (this.data.index == -1) {
|
||
this.statosPag = 0;
|
||
this.indexItemEdited = this.data.index;
|
||
} else {
|
||
this.statosPag = 1;
|
||
this.indexItemEdited = this.data.index;
|
||
}
|
||
},
|
||
mounted() {
|
||
this.httpServiceJahat = new HttpService(import.meta.env.VITE_REPO_BASE_URL);
|
||
this.getCritions();
|
||
if (this.data.entity?.crition) {
|
||
this.data.entity.crition.forEach((element) => {
|
||
this.lists.push({
|
||
id: element.entity_id,
|
||
title: element.entity_title,
|
||
|
||
description: element.description,
|
||
});
|
||
});
|
||
}
|
||
|
||
this.itemSelect = {
|
||
entity_id: this.lists[this.indexItemEdited].id,
|
||
entity_title: this.lists[this.indexItemEdited].title,
|
||
description: this.lists[this.indexItemEdited].description,
|
||
};
|
||
},
|
||
data() {
|
||
return {
|
||
indexItemEdited: undefined,
|
||
statosPag: 0,
|
||
criterionsSubject: "",
|
||
activeFormIndex: undefined,
|
||
itemDescription: "",
|
||
critions: [],
|
||
item: undefined,
|
||
itemSelect: "",
|
||
lists: [],
|
||
listCritions: [],
|
||
httpServiceJahat: undefined,
|
||
pagination: {
|
||
page: 1,
|
||
pages: 0,
|
||
total: 0,
|
||
offset: 0,
|
||
limit: 500,
|
||
},
|
||
show: false,
|
||
};
|
||
},
|
||
watch: {
|
||
item(newVal) {
|
||
this.lists.push({
|
||
id: newVal.id,
|
||
title: newVal.title,
|
||
});
|
||
},
|
||
},
|
||
|
||
computed: {
|
||
...mapState("list", ["selectedProjectGetter", "selectedItemGetter"]),
|
||
},
|
||
|
||
methods: {
|
||
...mapActions("list", ["SET_SELECTED_PROJECT"]),
|
||
getDataCriterionsSubject(id) {
|
||
const subject_id = id;
|
||
const url = repoApi.public.bysubject
|
||
.replace("{{from}}", "0")
|
||
.replace("{{countInPage}}", "10")
|
||
.replace("{{index_key}}", "crition")
|
||
.replace("{{subject_id}}", subject_id);
|
||
this.httpServiceJahat.getRequest(url).then((res) => {
|
||
const list = [];
|
||
res.hits.hits.forEach((item, key) => {
|
||
list.push({
|
||
id: item._source.id,
|
||
title: item._source.title,
|
||
|
||
text: item._source.text,
|
||
});
|
||
});
|
||
this.criterionsSubject = list;
|
||
this.show = true;
|
||
});
|
||
},
|
||
saveEditCriterion() {
|
||
let url =
|
||
"jahat" +
|
||
"/" +
|
||
repoApi.property.edit +
|
||
`/${this.data.entity.id}/${this.data.keyName}`;
|
||
url += "/id/" + this.itemSelect.entity_id;
|
||
|
||
const formData = {
|
||
[this.data.keyName]: this.itemSelect,
|
||
};
|
||
|
||
this.httpServiceJahat.postRequest(url, formData).then((res) => {
|
||
// console.log(res);
|
||
mySwalToast({
|
||
title: " ثبت شد.",
|
||
html: "",
|
||
});
|
||
this.$emit("close-modal");
|
||
});
|
||
},
|
||
saveProperty() {
|
||
var listCritions = this.data.entity.crition;
|
||
var list = this.lists;
|
||
let url = repoApi.crition.add.replace(
|
||
"{{issue_id}}",
|
||
this.data.entity.id
|
||
);
|
||
if (listCritions) {
|
||
const filteredList = list.filter(
|
||
(newItem) =>
|
||
!listCritions.find((oldItem) => oldItem.entity_id === newItem.id)
|
||
);
|
||
filteredList.forEach((element) => {
|
||
const value = {
|
||
entity_id: element.id,
|
||
entity_title: element.title,
|
||
description: element.description,
|
||
};
|
||
|
||
const formData = {
|
||
crition: value,
|
||
};
|
||
|
||
this.httpServiceJahat.postRequest(url, formData).then((res) => {
|
||
// console.log(res);
|
||
mySwalToast({
|
||
title: " ثبت شد.",
|
||
html: "",
|
||
});
|
||
});
|
||
});
|
||
} else {
|
||
list.forEach((element) => {
|
||
const value = {
|
||
entity_id: element.id,
|
||
entity_title: element.title,
|
||
description: element.description,
|
||
};
|
||
const formData = {
|
||
crition: value,
|
||
};
|
||
|
||
this.httpServiceJahat.postRequest(url, formData).then((res) => {
|
||
// console.log(res);
|
||
mySwalToast({
|
||
title: " ثبت شد.",
|
||
html: "",
|
||
});
|
||
});
|
||
});
|
||
}
|
||
this.$emit("close-modal");
|
||
},
|
||
getCritions() {
|
||
if (this.fetchingData) return;
|
||
this.fetchingData = true;
|
||
|
||
let url =
|
||
repoApi.entity.list.replace("{{type}}", this.data.keyName) +
|
||
`/${this.pagination.offset}/${this.pagination.limit}`;
|
||
url += "/date_create/desc";
|
||
|
||
this.httpServiceJahat.getRequest(url).then((res) => {
|
||
const list = [];
|
||
res.hits.hits.forEach((item, key) => {
|
||
// console.log(item)
|
||
|
||
list.push({
|
||
id: item._source.id,
|
||
title: item._source.title,
|
||
});
|
||
});
|
||
this.critions = list;
|
||
this.listCritions = this.critions.splice(0, 7);
|
||
|
||
this.fetchingData = false;
|
||
});
|
||
},
|
||
removCrition(i, item) {
|
||
var index = i;
|
||
var list = [];
|
||
list = this.lists;
|
||
let url = "";
|
||
if (item.id) {
|
||
url = repoApi.crition.delete
|
||
.replace("{{issue_id}}", this.data.entity.id)
|
||
.replace("{{crition_id}}", item.id);
|
||
} else {
|
||
url = repoApi.crition.delete
|
||
.replace("{{issue_id}}", this.data.entity.id)
|
||
.replace("{{crition_id}}", item.entity_id);
|
||
}
|
||
mySwalConfirm({
|
||
title: "هشدار",
|
||
html: "از حذف این بخش مطمئن هستید؟",
|
||
icon: "warning",
|
||
}).then((result) => {
|
||
if (result.isConfirmed) {
|
||
this.httpServiceJahat.postRequest(url).then((res) => {
|
||
mySwalToast({
|
||
title: "تبریک",
|
||
html: res.data.message,
|
||
icon: "success",
|
||
});
|
||
});
|
||
|
||
var lists = list.splice(index, 1);
|
||
}
|
||
|
||
if (this.statosPag == 1) {
|
||
this.$emit("close-modal");
|
||
}
|
||
});
|
||
},
|
||
submit(item, list) {
|
||
let mylist = list;
|
||
mylist.description = item;
|
||
},
|
||
closeModal() {
|
||
this.activeFormIndex = undefined;
|
||
this.itemDescription = undefined;
|
||
},
|
||
},
|
||
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.my-profile {
|
||
padding-bottom: 0 !important;
|
||
}
|
||
.my-profile__form {
|
||
padding-top: 0 !important;
|
||
}
|
||
.green {
|
||
background-color: green;
|
||
}
|
||
.btn-secondarys {
|
||
color: #6c757d;
|
||
background-color: #fff;
|
||
border-color: #6c757d;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.btn-secondarys:hover {
|
||
color: #00b6e3;
|
||
background-color: #fff;
|
||
border-color: #00b6e3;
|
||
}
|
||
|
||
.borders {
|
||
position: relative;
|
||
}
|
||
|
||
.borders::before {
|
||
content: "";
|
||
border-bottom: solid #f1f1f1 1px;
|
||
position: absolute;
|
||
bottom: -14px;
|
||
width: 96%;
|
||
}
|
||
|
||
.borders1 {
|
||
position: relative;
|
||
}
|
||
|
||
.borders1::after {
|
||
content: "";
|
||
border-bottom: solid #f1f1f1 1px;
|
||
position: absolute;
|
||
bottom: -8px;
|
||
width: 96%;
|
||
}
|
||
|
||
.list-crition {
|
||
width: 100%;
|
||
height: 140px;
|
||
margin-top: 10px;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
// .critions:hover {
|
||
// color: red;
|
||
|
||
// p,
|
||
// button {
|
||
// color: inherit;
|
||
// }
|
||
// }
|
||
|
||
.list-crition-select {
|
||
width: 100%;
|
||
height: 140px;
|
||
margin-top: 10px;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.crition-select-item:hover {
|
||
color: #00b6e3;
|
||
|
||
div {
|
||
p {
|
||
color: inherit;
|
||
}
|
||
}
|
||
}
|
||
|
||
.crition {
|
||
color: #00b6e3;
|
||
}
|
||
|
||
.form-check-input {
|
||
height: 14px !important;
|
||
}
|
||
.critions {
|
||
&:hover {
|
||
.search-item__actions {
|
||
width: 5.6em;
|
||
transition: all 0.5s;
|
||
background: #fff;
|
||
border-radius: 0 0.5em 0.5em 0;
|
||
|
||
.tavasi-more-vert {
|
||
transition: all 0.2s;
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.search-item__actions {
|
||
position: relative;
|
||
// left: 20px;
|
||
width: 1.6em;
|
||
// top: 1em;
|
||
overflow: hidden;
|
||
transition: all 0.5s;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&:hover {
|
||
filter: brightness(0.9);
|
||
}
|
||
|
||
.niafam {
|
||
color: #adbec4;
|
||
}
|
||
}
|
||
}
|
||
</style>
|