@utogether/udp-core 2.0.0-beta.1 → 2.0.0-beta.3

package/src/views/uhome/components/home-todo.vue

@@ -0,0 +1,170 @@
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2025-11-05 18:11:29
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2026-01-06 18:17:25
+ * @FilePath: \udp-crm\packages\udp-crm\src\views\uflow\todo\flow-todo.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div>
+    <vxe-tabs v-model="activeName" type="border-card" @tab-change="onTabChange">
+      <vxe-tab-pane name="todo" :title="$t('message.t_todoFlow')">
+        <div class="flex items-center w-full pl-2 pr-3 pt-1">
+          <vxe-input v-model="keywords" class="flex-1 w-full" placeholder="请输入任务编码或名称或标题查询" />
+          <div class="pl-1">
+            <ut-button content="search" icon="ri-search-line" @tap="onSearch" />
+            <ut-button content="reset" status="info" icon="ri-cycle-line" @tap="onReset" />
+          </div>
+        </div>
+        <ut-grid
+          ref="xgrid"
+          :columns="columns"
+          :editable="false"
+          :height="height"
+          :data="data.todo"
+          :events="events"
+          :proxy-config="{ enabled: false }"
+        />
+      </vxe-tab-pane>
+      <vxe-tab-pane name="finish" lazy :title="$t('message.t_finishFlow')">
+        <div class="flex items-center w-full pl-2 pr-3 pt-1">
+          <vxe-input v-model="keywords" class="flex-1 w-full" placeholder="请输入任务编码或名称或标题查询" />
+          <div class="pl-1">
+            <ut-button content="search" icon="ri-search-line" @tap="onSearch" />
+            <ut-button content="reset" status="info" icon="ri-cycle-line" @tap="onReset" />
+          </div>
+        </div>
+        <ut-grid
+          ref="ygrid"
+          :columns="columns"
+          :editable="false"
+          :height="height"
+          :data="data.finish"
+          :events="events"
+          :proxy-config="{ enabled: false }"
+        />
+      </vxe-tab-pane>
+    </vxe-tabs>
+    <vxe-modal v-model="showModal" :loading="loading" :title="flowTitle" height="360">
+      <vxe-image :src="imageUrl" :height="520" width="75%" />
+    </vxe-modal>
+  </div>
+</template>
+
+<script setup lang="tsx">
+import { useRouter } from 'vue-router';
+import { ref, onMounted, nextTick } from 'vue';
+import { useSystemStore } from '@utogether/udp-core';
+import { isEmpty } from 'xe-utils';
+import to from 'await-to-js';
+import { getServiceApi } from '../../../api';
+const router = useRouter();
+
+const xgrid = ref(null);
+const ygrid = ref(null);
+const activeName = ref('todo');
+const showModal = ref(false);
+const loading = ref(false);
+const imageUrl = ref('');
+const keywords = ref(null);
+const flowTitle = ref(null);
+const data = ref({ todo: [], finish: [], todoPage: {}, finishPage: {} });
+
+const height = window.innerHeight - 170;
+
+const url = '/uwfl/activiti';
+
+const pagination = { pageNum: 1, pageSize: 20 };
+
+const columns = [
+  { field: 'taskId' },
+  { field: 'taskName' },
+  { field: 'taskTitle' },
+  { field: 'createDate' },
+  {
+    field: 'operate',
+    width: 90,
+    fixed: 'right',
+    slots: {
+      default: ({ row }) => {
+        return [
+          <>
+            <ut-button
+              visible={activeName.value === 'todo'}
+              content="todoTask"
+              icon="ri-send-plane-line"
+              onTap={() => handleTodo(row, 'edit')}
+            />
+            <ut-button
+              visible={activeName.value === 'finish'}
+              content="look"
+              status="info"
+              onTap={() => handleTodo(row)}
+            />
+          </>
+        ];
+      }
+    }
+  }
+];
+
+const events = {
+  pageChange({ pageSize, currentPage }) {
+    data.value[`${activeName.value}Page`] = { pageNum: currentPage, pageSize };
+    getDataList(activeName.value, keywords.value);
+  }
+};
+
+const onSearch = () => {
+  data.value[`${activeName.value}Page`] = pagination;
+  getDataList(activeName.value, keywords.value);
+};
+
+const onReset = () => {
+  keywords.value = null;
+  onSearch();
+};
+
+const getDataList = async (type, searchField) => {
+  console.log(type);
+  const uri = type === 'todo' ? '/listTasksToBeHandle' : '/listHandledTask';
+  const params = {
+    ...data.value[`${activeName.value}Page`],
+    searchField,
+    userName: useSystemStore().getUserInfo.userName
+  };
+  const [err, res]: any = await to(getServiceApi().post(url + uri, params));
+  if (err) return;
+  data.value[type] = res.list;
+
+  const grid = type === 'todo' ? xgrid : ygrid;
+  grid.value.getInstance().loadData(res.list);
+};
+
+const onTabChange = async ({ value }) => {
+  const grid = value === 'todo' ? xgrid : ygrid;
+  const operate = columns.find(f => f.field === 'operate');
+  operate.width = value === 'todo' ? 160 : 80;
+  await nextTick();
+  grid.value.getInstance().reloadColumn(columns);
+  const page = data.value[`${activeName.value}Page`];
+  data.value[`${activeName.value}Page`] = isEmpty(page) ? page : pagination;
+  getDataList(activeName.value, keywords.value);
+};
+
+const handleTodo = (row, dataStatus = 'detail') => {
+  console.log(row);
+  const data = Object.assign(
+    { dataStatus, workflowCode: row.sourceKey, businessKey: row.sourceId, processInstanceId: row.processInstId },
+    row
+  );
+  sessionStorage.setItem('kPROCESSKEY', JSON.stringify(data));
+  router.push({ name: 'FlowApproval' });
+};
+
+onMounted(() => {
+  data.value[`${activeName.value}Page`] = pagination;
+  getDataList('todo', null);
+});
+</script>