Advertisement
toropagka

Untitled

Feb 27th, 2024
633
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.94 KB | Software | 0 0
  1. <template>
  2.   <section
  3.     :id="`elk-camunda-${name}`"
  4.     class="widget"
  5.   >
  6.     <CountableWidgetTitle
  7.       class="widget__header"
  8.       :title="props.widgetData.block_name"
  9.       :num="getCorrectTitleTotalTasks"
  10.     />
  11.     <div class="widget__controls mb-5">
  12.       <div class="widget__filter">
  13.         <SearchBlock
  14.           v-model="searchValue"
  15.           class="widget__search"
  16.           :placeholder="placeholderSearch"
  17.         />
  18.         <ElDatePicker
  19.           v-model="dates"
  20.           size="small"
  21.           type="daterange"
  22.           range-separator="-"
  23.           :start-placeholder="$t(getCommonCaptionByName('date_from'))"
  24.           :end-placeholder="$t(getCommonCaptionByName('date_to'))"
  25.           :format="$t(getCommonCaptionByName('date_format'))"
  26.           value-format="yyyy-MM-dd"
  27.         />
  28.         <div>
  29.           <ElButton
  30.             class="btn !max-w-[100px]"
  31.             @click="activeFilter(filterNameForBackend.activeAndCompleted)"
  32.           >
  33.             Все
  34.           </ElButton>
  35.           <ElButton
  36.             class="btn !max-w-[100px]"
  37.             @click="activeFilter(filterNameForBackend.active)"
  38.           >
  39.             В работе
  40.           </ElButton>
  41.         </div>
  42.       </div>
  43.     </div>
  44.     <ElkLoader
  45.       v-if="isLoading"
  46.       class="min-h-[600px]"
  47.     />
  48.     <ElkErrorMessage v-else-if="isError" />
  49.     <template v-else>
  50.       <p v-if="!taskList.length">
  51.         {{ emptyList }}
  52.       </p>
  53.       <div
  54.         v-else
  55.         class="widget__content"
  56.       >
  57.         <div class="widget__body">
  58.           <ElTable
  59.             :data="taskList"
  60.             style="width: 100%"
  61.             header-row-class-name="text-base text-gray-400"
  62.             :row-class-name="tableRowClassName"
  63.             :default-sort="{prop: 'time', order: 'descending'}"
  64.             @row-click="openDetails"
  65.           >
  66.             <ElTableColumn
  67.               prop="applicationNumber"
  68.               :label="labelNumber"
  69.               fixed
  70.               min-width="100"
  71.             />
  72.  
  73.             <ElTableColumn
  74.               prop="time"
  75.               label="Создана"
  76.               sortable
  77.               :sort-method="sort"
  78.               min-width="150"
  79.             />
  80.             <ElTableColumn
  81.               prop="description"
  82.               label="Содержание"
  83.               min-width="300"
  84.             />
  85.             <ElTableColumn
  86.               label="Автор"
  87.               min-width="240"
  88.             >
  89.               <template slot-scope="scope">
  90.                 <el-popover
  91.                   placement="bottom-start"
  92.                   width="200"
  93.                   trigger="hover"
  94.                   :open-delay="250"
  95.                   @after-enter="getAuthorCardData(scope.row.processAuthor)"
  96.                 >
  97.                   <ElkLoading
  98.                     v-if="popoverIsLoading"
  99.                     :style="{width: '30px', height: '30px', padding: '10px 0'}"
  100.                   />
  101.                   <div
  102.                     v-else
  103.                     class="flex gap-1"
  104.                   >
  105.                     <Avatar
  106.                       :email="scope?.row?.processAuthor"
  107.                       size="24"
  108.                       style="margin-bottom: 0;"
  109.                     />
  110.                     <span class="author__text">{{
  111.                       authorCard &&
  112.                       authorCard.first_name + ' ' + authorCard.last_name
  113.                     }}</span>
  114.                   </div>
  115.                   <div
  116.                     slot="reference"
  117.                     class="name-wrapper"
  118.                   >
  119.                     <span>{{ scope.row.processAuthor }}</span>
  120.                   </div>
  121.                 </el-popover>
  122.               </template>
  123.             </ElTableColumn>
  124.  
  125.             <ElTableColumn
  126.               fixed="right"
  127.               width="150"
  128.               :prop="fieldStatus"
  129.               :label="labelStatus"
  130.             />
  131.           </ElTable>
  132.  
  133.           <el-pagination
  134.             class="pagination widget__pagination"
  135.             layout="pager"
  136.             :current-page="currentPage"
  137.             :total="totalSize"
  138.             :page-size="pageSize"
  139.             @current-change="pageChange($event)"
  140.           />
  141.         </div>
  142.       </div>
  143.     </template>
  144.   </section>
  145. </template>
  146.  
  147. <script setup>
  148. import ElkLoader from '@/components/common/elkLoading';
  149. import ElkErrorMessage from '@/components/common/elkErrorMessage';
  150. import SearchBlock from '@/components/SearchBlock';
  151. import CountableWidgetTitle from '@/components/common/CountableTitle';
  152. import CamundaAPI from '@/api/CamundaAPI/CamundaAPI';
  153. import {getCommonCaptionByName} from '@/i18n/utils';
  154. import {CAMUNDA_PROTO_PROCESS} from '@/router/routes';
  155. import {ref, computed, watchEffect} from 'vue';
  156. import store from '@/store';
  157. import {useRouter} from 'vue-router/composables';
  158. import {useI18n} from 'vue-i18n-composable';
  159. import Avatar from '@/components/common/elkAvatar.vue';
  160. import {GET_STAFF_INFO_BY_EMAIL} from '@/api';
  161. import Axios from '@/utils/Elk-Axios';
  162.  
  163. const {d} = useI18n();
  164.  
  165. const filterNameForBackend = {
  166.   activeAndCompleted: 'ACTIVE_AND_COMPLETED',
  167.   active: 'ACTIVE'
  168. };
  169.  
  170. const props = defineProps({
  171.   widgetData: {
  172.     type: Object,
  173.     required: true
  174.   }
  175. });
  176.  
  177. const router = useRouter();
  178. const name = 'task';
  179. const placeholderSearch = 'Поиск по заявкам';
  180. const emptyList = 'нет заявок';
  181. const fieldStatus = 'statusRu';
  182. const labelNumber = 'Номер';
  183. const labelDate = 'Создана';
  184. const labelStatus = 'Статус';
  185.  
  186. const activeField = ref(null);
  187.  
  188. const userEmail = computed(() => store.state.user.email);
  189. const isLoading = ref(false);
  190. const isError = ref(false);
  191. const taskList = ref([]);
  192. const getCorrectTitleTotalTasks = computed(() => taskList.value.length);
  193. const searchValue = ref('');
  194. const dates = ref(null);
  195. const activeType = ref('ACTIVE_AND_COMPLETED');
  196. const currentPage = ref(1);
  197. const totalSize = ref(0);
  198. const pageSize = ref(8);
  199.  
  200. const dataForRequest = computed(() => ({
  201.   email: userEmail.value,
  202.   activeType: activeType.value,
  203.   taskType: name.toUpperCase(),
  204.   pagination: {
  205.     page: currentPage.value,
  206.     pageSize: pageSize.value
  207.   }
  208. }));
  209.  
  210. async function getData() {
  211.   isLoading.value = true;
  212.   try {
  213.     const {data} = await CamundaAPI.getDataByUser(dataForRequest.value);
  214.  
  215.     const tasks = data.taskList.map(task => ({
  216.       ...task,
  217.       active: task.isActive ? 'В работе' : 'Выполнена',
  218.       time: d(new Date(task.taskStartTime), 'officeTask'),
  219.       description: `Заявка №${task.applicationNumber ?? '...'} - ${
  220.         task.processName
  221.       }`
  222.     }));
  223.  
  224.     taskList.value = tasks;
  225.     totalSize.value = data.taskListSize;
  226.   } catch (error) {
  227.     isError.value = true;
  228.   } finally {
  229.     isLoading.value = false;
  230.   }
  231. }
  232.  
  233. watchEffect(() => getData());
  234.  
  235. function openDetails(item) {
  236.   router.push(
  237.     `${CAMUNDA_PROTO_PROCESS}/${item.processInstanceId}/${item.taskDefinitionKey}/${item.id}`
  238.   );
  239. }
  240.  
  241. function activeFilter(typeName) {
  242.   activeType.value = typeName;
  243. }
  244.  
  245. function sort(a, b) {
  246.   return Date.parse(a.taskStartTime) - Date.parse(b.taskStartTime);
  247. }
  248.  
  249. function tableRowClassName({row}) {
  250.   const className = 'cursor-pointer text-base text-dark';
  251.   return row.isActive ? className : `${className} text-opacity-20`;
  252. }
  253.  
  254. function pageChange(event) {
  255.   console.log(event, ' event');
  256.   currentPage.value = event;
  257.   getData();
  258. }
  259.  
  260. const authorCard = ref(null);
  261. const popoverIsLoading = ref(false);
  262.  
  263. const getAuthorCardData = async email => {
  264.   try {
  265.     popoverIsLoading.value = true;
  266.  
  267.     const {data} = await Axios.get(GET_STAFF_INFO_BY_EMAIL, {
  268.       params: {
  269.         email
  270.       }
  271.     });
  272.     authorCard.value = data;
  273.   } catch (error) {
  274.     console.error(error);
  275.   } finally {
  276.     popoverIsLoading.value = false;
  277.   }
  278. };
  279. </script>
  280.  
  281. <script>
  282. export default {name: 'ElkCamundaTasks'};
  283. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement