hxgksystemapp/src/views/taskplatform/taskmanagement/drafts.vue

<!--
@ 作者: 秦东
@ 时间: 2023-11-24 08:10:23
@ 备注: 草稿箱
-->
<script lang="ts" setup>
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  View,
} from "@element-plus/icons-vue";
import { taskFlowList, delRunFlow } from "@/api/DesignForm/requestapi";
import { taskflowquery } from "@/api/DesignForm/type";

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

const selectInfoDr = reactive<taskflowquery>({
  page: 1,
  pagesize: 20,
  class: 1,
  state: 1,
});
const loadingDr = ref(false);
const searckFormRefdr = ref(ElForm);
const totalsdr = ref<number>(0); //总共多少条记录
const taskFlowAryDr = ref<any>([]); //记录数组
//获取我的请求
const getToDoListDr = () => {
  loadingDr.value = true;
  taskFlowList(selectInfoDr)
    .then((data: any) => {
      console.log("获取我的请求", data);
      totalsdr.value = data.data.total;
      taskFlowAryDr.value = data.data.list;
    })
    .finally(() => {
      loadingDr.value = false;
    });
};
//重置表单
const resetQueryDr = () => {
  searckFormRefdr.value.resetFields();
  initDataDr();
};
//初始化数据

const initDataDr = () => {
  selectInfoDr.page = 1;
  selectInfoDr.pagesize = 15;
  selectInfoDr.title = "";
  selectInfoDr.class = 1;
  selectInfoDr.state = 1;
};
onMounted(() => {
  getToDoListDr();
});

/**
 * 删除工作流
 */
const delFlowForm = (val: any) => {
  ElMessageBox.confirm(
    "您确定要删除此内容？一经删除！内容将不可恢复！",
    "Warning",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      let sendInfo = {
        id: val.idStr,
        status: 5,
      };
      delRunFlow(sendInfo).then((data) => {
        getToDoListDr();
        ElMessage({
          message: "删除成功！",
          type: "success",
        });
      });
    })
    .catch(() => {});
};
const myappbox = ref();
const darwOpenOrClose = ref(false);
const operState = ref<number>(1); //操作状态	1：新增；2：重新发起；3：申请修改；4：提交审批
const drawerMyWith = ref<number>(0); //页面宽度
const flowLogInfo = ref<any>();
const versionId = ref<string>(); //使用版本
const inFoid = ref<string>();
//编辑表单

const editFlow = (val: any) => {
  operState.value = 4;
  drawerMyWith.value = myappbox.value?.clientWidth;
  flowLogInfo.value = val;
  versionId.value = val.version;
  darwOpenOrClose.value = true;
  inFoid.value = val.idStr;
};
</script>
<template>
  <div ref="myappbox" class="app_box">
    <div class="app-container">
      <div class="search">
        <el-form ref="searckFormRefdr" :model="selectInfoDr" :inline="true">
          <el-form-item label="任务标题" prop="name">
            <el-input
              v-model="selectInfoDr.title"
              placeholder="请输入任务标题"
              clearable
              @keyup.enter="searchQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getToDoListDr()"
              ><i-ep-search />搜索</el-button
            >
            <el-button @click="resetQueryDr()"><i-ep-refresh />重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-card shadow="never">
        <el-table
          v-loadingDr="loadingDr"
          element-loading-dr-text="Loading..."
          highlight-current-row
          :data="taskFlowAryDr"
          border
          class="table_box"
        >
          <el-table-column fixed label="标题" prop="title" width="500" />
          <el-table-column label="创建人" prop="creater" width="200">
            <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" />
          <el-table-column
            label="状态"
            prop="status"
            align="center"
            width="220"
          >
            <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
            fixed="right"
            align="center"
            label="操作"
            width="150"
          >
            <template #default="scope">
              <el-button-group>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top-end"
                >
                  <el-button
                    type="warning"
                    size="small"
                    class="fa fa-edit"
                    @click="editFlow(scope.row)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top-end"
                >
                  <el-button
                    type="danger"
                    size="small"
                    class="fa fa-trash-o"
                    @click="delFlowForm(scope.row)"
                  />
                </el-tooltip>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-model:total="totalsdr"
          v-model:page="selectInfoDr.page"
          v-model:limit="selectInfoDr.pagesize"
          @pagination="getToDoListDr"
        />
      </el-card>


      <LookAndOperateLogInfo
        v-if="darwOpenOrClose"
        v-model:isshow="darwOpenOrClose"
        :flow-log-info="flowLogInfo"
        :drawer-with="drawerMyWith"
        :infoid="inFoid"
        :oper-state="operState"
        @getmytodolist="getMyToDoList"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.app_box {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
}

.box-card {
  width: 100%;
}

.table_box {
  width: 100%;
  height: calc(100vh - 308px);
}
</style>