ShutongInterconnectedChemicalCloudPlatform/src/views/sysworkflow/lowcodepage/runApp/regularPage/myToDoPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-05-31 10:50:09
@ 备注: 待我处理
-->
<script lang="ts" setup>
import { gainAppTaskList } from "@/api/DesignForm/requestapi";
import { taskflowquery } from "@/api/DesignForm/type";

import LookAndOperateLogInfo from "@/views/taskplatform/taskmanagement/lookFlowInfoApp.vue";

const props = defineProps({
  pickAppMenu: {
    type: Object,
    default() {
      return {};
    },
  },
  drawerWith: {
    type: Number,
    default: 0,
  },
});
const loadingTd = ref(false);
const searckFormRefTd = ref(ElForm); //表单
const taskFlowAryTd = ref<any>([]); //记录数组
//搜索条件参数
const selectInfoTd = reactive<taskflowquery>({
  page: 1,
  pagesize: 20,
  class: 2,
  id: props.pickAppMenu.appkey,
});
const totalstd = ref<number>(0); //总共多少条记录

//初始化数据
const initData = () => {
  selectInfoTd.page = 1;
  selectInfoTd.pagesize = 15;
  selectInfoTd.title = "";
  selectInfoTd.class = 2;
  selectInfoTd.state = 0;
};
//重置表单
const resetQueryTd = () => {
  searckFormRefTd.value.resetFields();
  initData();
};
/**
@ 作者: 秦东
@ 时间: 2024-06-07 09:28:35
@ 功能: 加载数据
*/
const getToDoList = () => {
  gainAppTaskList(selectInfoTd).then((data) => {
    // console.log("加载数据--->",data)
    totalstd.value = data.data.total;
    taskFlowAryTd.value = data.data.list;
  });
};
onMounted(() => {
  getToDoList();
});
/**
@ 作者: 秦东
@ 时间: 2024-06-17 08:13:56
@ 功能: 搜索
*/
const getToDoListTd = () => {
  getToDoList();
};

const flowLogInfo = ref<any>();
const darwOpenOrClose = ref(false);
/**
@ 作者: 秦东
@ 时间: 2024-06-17 14:46:51
@ 功能: 查看表单详情
*/
const lookFlowInfo = (val: any, types: number) => {
  console.log("查看表单详情", val);
  flowLogInfo.value = val;
  darwOpenOrClose.value = true;
};
const searchQuery = () => {};
</script>
<template>
  <div ref="myappbox" class="app_box">
    <LookAndOperateLogInfo
      v-if="darwOpenOrClose"
      v-model:isshow="darwOpenOrClose"
      :flow-log-info="flowLogInfo"
      :drawer-with="props.drawerWith"
      @getmytodolist="getToDoListTd"
    />
    <div class="app-container">
      <div class="search">
        <div class="titleBox">代办事宜</div>
        <el-form ref="searckFormRefTd" :model="selectInfoTd" :inline="true">
          <el-form-item label="任务标题" prop="name">
            <el-input
              v-model="selectInfoTd.title"
              placeholder="请输入任务标题"
              clearable
              @keyup.enter="searchQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getToDoListTd()"
              ><i-ep-search />搜索</el-button
            >
            <el-button @click="resetQueryTd()"><i-ep-refresh />重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-card shadow="never">
        <el-table
          v-loading="loadingTd"
          element-loading-text="Loading..."
          highlight-current-row
          :data="taskFlowAryTd"
          border
          class="table_box"
        >
          <el-table-column fixed label="标题" prop="title" width="200" />
          <el-table-column label="创建人" prop="creater" width="150" align="center">
            <template #default="scope">
              {{ scope.row.creatorInfo.name }}（<el-text type="info">{{
                scope.row.creatorInfo.number
              }}</el-text
              >）
            </template>
          </el-table-column>
          <el-table-column
            label="发起日期"
            prop="startDate"
            align="center"
            min-width="200"
          />
          <el-table-column label="状态" prop="status" align="center" width="120">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" class="mx-1" effect="plain" round>
                草稿
              </el-tag>
              <el-tag
                v-else-if="scope.row.status == 2"
                type="danger"
                class="mx-1"
                effect="plain"
                round
              >
                驳回
              </el-tag>
              <el-tag
                v-else-if="scope.row.status == 3"
                type="success"
                class="mx-1"
                effect="plain"
                round
              >
                审批中
              </el-tag>
              <el-tag
                v-else-if="scope.row.status == 4"
                type="info"
                class="mx-1"
                effect="plain"
                round
              >
                归档
              </el-tag>
              <el-tag v-else type="info" class="mx-1" effect="plain" round> 删除 </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当前节点及操作人" prop="currentStep" width="200">
            <template #default="scope">
              <el-text v-if="scope.row.currentNodeName" type="success"
                >{{ scope.row.currentNodeName }}：</el-text
              ><el-text
                v-for="(item, index) in scope.row.currentNodeUser"
                :key="index"
                type="warning"
                >{{ item.name }}({{ item.number }})</el-text
              >
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="100">
            <template #default="scope">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="查看详情"
                placement="top-end"
              >
                <el-button
                  type="primary"
                  size="small"
                  class="fa fa-eye"
                  @click="lookFlowInfo(scope.row, 2)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-model:total="totalstd"
          v-model:page="selectInfoTd.page"
          v-model:limit="selectInfoTd.pagesize"
          @pagination="getToDoListTd"
        />
      </el-card>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.app_box {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  .app-container {
    margin: 10px;
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .titleBox {
    font-size: 20px;
    margin-top: -20px;
  }
}
.box-card {
  width: 100%;
}
.table_box {
  width: 100%;
  height: calc(100vh - 230px);
}
</style>