init

src/views/workflow/task/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <el-form :model="queryParams" inline class="query-form" ref="queryForm" @submit.prevent="getList">
+      <el-form-item label="部署名称" prop="deploymentName">
+        <el-input v-model="queryParams.deploymentName" placeholder="请输入部署名称" clearable></el-input>
+      </el-form-item>
+      <!--    <el-form-item label="状态" prop="enable">-->
+      <!--      <el-select v-model="queryParams.enable" placeholder="请选择状态" clearable filterable>-->
+      <!--        <el-option-->
+      <!--            v-for="dict in cacheStore.getDict('regular_enable')"-->
+      <!--            :key="dict.value"-->
+      <!--            :label="dict.label"-->
+      <!--            :value="dict.value"-->
+      <!--        />-->
+      <!--      </el-select>-->
+      <!--    </el-form-item>-->
+      <el-form-item>
+        <el-button type="primary" @click="getList" :icon="Search">搜索</el-button>
+        <el-button type="primary" @click="handleReset" :icon="Refresh" plain>重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="table">
+      <el-table
+          :data="list"
+          row-key="id"
+          :lazy="true"
+          ref="singleTable"
+          @cell-click="showDetails"
+          v-loading="loading"
+          v-tabh
+      >
+        <el-table-column type="selection" width="30"/>
+        <el-table-column label="序号" type="index" width="60" align="center"/>
+        <el-table-column prop="processName" label="审批类型" align="center"/>
+        <el-table-column prop="initiatorName" label="发起人" align="center"/>
+        <el-table-column prop="createdDate" label="提交时间" align="center"/>
+        <el-table-column prop="taskName" label="当前节点" align="center"/>
+        <el-table-column prop="arriveDate" label="到达时间" align="center"/>
+        <el-table-column prop="state" label="状态" align="center">
+          <template #default="scope">
+            <point-tag dict-type="process_state" :value="scope.row.state"/>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <paging :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 40,50]"
+            :total="total" @changeSize="handleSizeChange" @goPage="handleCurrentChange"/>
+    <task-details ref="taskDetails" :task="selectTask" @refresh="getList"/>
+  </div>
+</template>
+<script setup>
+import {getTaskList} from "@/api/workflow/process-task.js";
+import {Search, Refresh, Delete, Edit} from '@element-plus/icons-vue'
+import TaskDetails from '@/views/workflow/common/TaskDetails.vue'
+import {useProcessStore} from '@/stores/processStore.js'
+import Paging from "@/components/pagination/index.vue";
+import {useCacheStore} from '@/stores/cache.js'
+import PointTag from "@/components/PointTag.vue";
+
+const processStore = useProcessStore()
+const dictStore = useCacheStore()
+dictStore.setCacheKey(['process_state'])
+//查询参数
+const queryParams = reactive({
+  deploymentName: '',
+  state: 1
+})
+
+//页面信息
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+const list = ref([])
+const selectTask = ref()
+const total = ref()
+const loading = ref()
+const taskDetails = ref()
+const queryForm = ref()
+
+const showDetails = (row, column) => {
+  if (column.label !== '操作') {
+    console.log(row)
+    selectTask.value = row
+    nextTick(() => {
+      taskDetails.value.init()
+    })
+  }
+}
+
+//重置搜索
+const handleReset = () => {
+  queryForm.value.resetFields()
+  getList()
+}
+const getList = async () => {
+  let params = {
+    ...queryParams,
+    ...pageInfo
+  }
+  loading.value = true
+  getTaskList(params).then(res => {
+    list.value = res.data.rows
+    total.value = res.data.total
+    loading.value = false
+  })
+}
+
+//切换每页显示条数
+const handleSizeChange = async (val) => {
+  pageInfo.value.pageSize = val
+  await getList()
+}
+
+//点击页码进行分页功能
+const handleCurrentChange = async (val) => {
+  pageInfo.value.pageNum = val
+  await getList()
+}
+
+const getTimeConsuming = async (instance) => {
+  if (instance.state != 1) {
+    //dateFormat(开始时间,结束时间)
+    // return timeLength(instance.submitTime, instance.endTime);
+  }
+}
+
+getList()
+
+</script>
+
+<style scoped>
+
+</style>