You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

185 lines
5.5 KiB

2 years ago
2 years ago
2 years ago
2 years ago
  1. <template>
  2. <div class="group tw-mb-[20px]">
  3. <div class="element tw-grid tw-grid-cols-1 md:tw-grid-cols-[166px_auto_auto] xl:tw-grid-cols-[166px_auto_auto] tw-gap-[10px]">
  4. <div class="tw-flex tw-items-center">
  5. <label class="tw-mb-[10px] tw-font-normal t14 md:t16">
  6. <span>{{ $t("Select an extension")}}</span>
  7. </label>
  8. </div>
  9. <elementSelectNew
  10. :select="{
  11. id: 'SelectYear',
  12. label: '',
  13. required: true,
  14. }"
  15. :isRow="true"
  16. :itemsCenter="true"
  17. :labelWidth="0"
  18. :selectWidth="200"
  19. :selectList="selectYearList"
  20. :default="formData.select_year"
  21. :validation="validation.select_year"
  22. @change="selectYear($event)"
  23. ></elementSelectNew>
  24. <elementSelectNew
  25. :select="{
  26. id: 'selectMonth',
  27. label: '',
  28. required: false,
  29. }"
  30. :isRow="true"
  31. :itemsCenter="true"
  32. :labelWidth="0"
  33. :selectWidth="200"
  34. :selectList="selectMonthList"
  35. :default="formData.select_month"
  36. :validation="validation.select_month"
  37. @change="selectMonth($event)"
  38. ></elementSelectNew>
  39. </div>
  40. <div class="element tw-mt-[20px] tw-grid tw-grid-cols-1 md:tw-grid-cols-[166px_auto] xl:tw-grid-cols-[166px_auto] tw-gap-[10px]">
  41. <div class="tw-flex tw-items-center">
  42. <label class="tw-mb-[10px] tw-font-normal t14 md:t16">
  43. <span>{{ $t("Exhibition Name")}}</span><span class="required t12 md:t14">*</span>
  44. </label>
  45. </div>
  46. <elementSelectNew
  47. :select="{
  48. id: 'ExhibitionName',
  49. label: 'Exhibition Name',
  50. required: true,
  51. }"
  52. :isRow="true"
  53. :itemsCenter="true"
  54. :labelWidth="0"
  55. :selectWidth="200"
  56. :selectList="selectExhibitionList"
  57. :default="formData.exhibition_name"
  58. :validation="validation.exhibition_name"
  59. @change="selectExhibition($event)"
  60. ></elementSelectNew>
  61. </div>
  62. </div>
  63. </template>
  64. <script>
  65. import elementSelectNew from "@/components/newComponent/form/ElementSelectNew";
  66. import is from "is_js";
  67. export default {
  68. components: {
  69. elementSelectNew,
  70. },
  71. props: {
  72. selectYearList: {
  73. type: Array,
  74. },
  75. selectMonthList: {
  76. type: Array,
  77. },
  78. },
  79. data() {
  80. return {
  81. selectExhibitionList: [],
  82. formData: {
  83. select_year: "0",
  84. select_month: "0",
  85. exhibition_name: "0",
  86. exhibition: {id:'0',name: ''},
  87. },
  88. validation: {
  89. select_year: true,
  90. select_month: true,
  91. exhibition_name: true,
  92. },
  93. errors: null,
  94. };
  95. },
  96. methods: {
  97. reset() {
  98. this.formData = {
  99. select_year: "0",
  100. select_month: "0",
  101. exhibition_name: "0",
  102. exhibition: {id:'0',name: ''},
  103. };
  104. },
  105. validators() {
  106. // if (is.empty(this.formData.select_year) || this.formData.select_year =="0") {
  107. // this.validation.select_year = false;
  108. // } else {
  109. // this.validation.select_year = true;
  110. // }
  111. // if (is.empty(this.formData.select_month) || this.formData.select_month =="0") {
  112. // this.validation.select_month = false;
  113. // } else {
  114. // this.validation.select_month = true;
  115. // }
  116. if (is.empty(this.formData.exhibition_name) || this.formData.exhibition_name =="0") {
  117. this.validation.exhibition_name = false;
  118. } else {
  119. this.validation.exhibition_name = true;
  120. }
  121. this.errors = Object.entries(this.validation).filter(
  122. (e) => e[1] == false
  123. );
  124. if (this.errors.length > 0) {
  125. return false;
  126. } else {
  127. return true;
  128. }
  129. },
  130. selectYear(value){
  131. this.formData.select_year = value;
  132. this.getExhibitions();
  133. },
  134. selectMonth(value){
  135. this.formData.select_month = value;
  136. this.getExhibitions();
  137. },
  138. selectExhibition(value){
  139. if(this.selectExhibitionList.length>0){
  140. for(let i=0;i<this.selectExhibitionList.length;i++){
  141. if(this.selectExhibitionList[i].id == value){
  142. this.formData.selectPackape = this.selectExhibitionList[i];
  143. break;
  144. }
  145. }
  146. }
  147. this.formData.exhibition_name = value;
  148. },
  149. getExhibitions(){
  150. this.selectExhibitionList = [];
  151. if((this.formData.select_year && this.formData.select_year!="0") && (this.formData.select_month && this.formData.select_month !="0")){
  152. this.$axios.get(`/trending/api/Onsite/Exhibitions?Lang=${this.$i18n.localeProperties["langQuery"]}&ServiceID=${this.$route.params.id}&Year=${this.formData.select_year}&Month=${this.formData.select_month}`)
  153. .then((response) => {
  154. if(response && response.data && response.data.DATA && response.data.DATA.rel){
  155. let data = response.data.DATA.rel
  156. if(data.length>0){
  157. this.selectExhibitionList = data.map((item) => {
  158. return {
  159. id: item.ArgumentID,
  160. name: item.ArgumentValue,
  161. };
  162. });
  163. }
  164. }
  165. })
  166. .catch((error) => console.log(error));
  167. }
  168. }
  169. },
  170. };
  171. </script>
  172. <style lang="scss" scoped>
  173. select {
  174. -moz-appearance: none;
  175. /* Firefox */
  176. -webkit-appearance: none;
  177. /* Safari and Chrome */
  178. appearance: none;
  179. background-image: url("~/assets/svg/down-arrow.svg");
  180. background-size: 9px 6px;
  181. background-position: right 20px center;
  182. background-repeat: no-repeat;
  183. }
  184. </style>