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

<!--
@ 作者: 秦东
@ 时间: 2024-05-31 13:59:06
@ 备注: 我创建的
-->
<script lang="ts" setup>
import {
  softDeletion,
  retractRunWorkFlow,
  recallSendMsg,
} from "@/api/taskapi/management";
import { gainAppAllTaskList } from "@/api/DesignForm/requestapi";

//引入组件
import FormPageCont from "@/components/DesignForm/tableListPage/formPageContApp.vue";
import TableFlow from "@/views/sysworkflow/lowcodepage/pageFlow/appTableFlow.vue";

const props = defineProps({
  pickAppMenu: {
    type: Object,
    default() {
      return {};
    },
  },
  drawerWith: {
    type: Number,
    default: 0,
  },
});

const selectInfo = reactive<taskflowquery>({
  page: 1,
  pagesize: 20,
  class: 1,
  id: props.pickAppMenu.appkey,
});
const operState = ref<number>(1); //操作状态	1：新增；2：重新发起；3：申请修改；4：提交审批;5:普通表单修改
const loading = ref(false);
const searckFormRef = ref(ElForm);
const totals = ref<number>(0); //总共多少条记录
const taskFlowAry = ref<any>([]); //记录数组
//重置表单
const resetQuery = () => {
  searckFormRef.value.resetFields();
  initData();
};
//初始化数据
const initData = () => {
  selectInfo.page = 1;
  selectInfo.pagesize = 15;
  selectInfo.title = "";
  selectInfo.class = 3;
  selectInfo.state = 0;
};
/**
@ 作者: 秦东
@ 时间: 2024-06-07 09:28:35
@ 功能: 加载数据
*/
const getToDoList = () => {
  gainAppAllTaskList(selectInfo).then((data) => {
    // console.log("加载数据--->",data)
    totals.value = data.data.total;
    taskFlowAry.value = data.data.list;
  });
};
onMounted(() => {
  getToDoList();
});

const container = ref(); //实例化内容容器
const drawerWith = ref(); //编辑表单时抽屉宽度
const openTaskDrawer = ref(false); //新增数据
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:24:06
@ 功能: 查看详细内容
*/
const tablePageClass = ref(1);
const lookPageInfoIsShow = ref(false);
const pageInfoCont = ref<any>();
const lookPageInfo = (val: any) => {
  tablePageClass.value = 4;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-05 11:29:50
@ 功能: 编辑表单内容
*/

const editInfo = (val: any) => {
  // console.log('修改数据!',val)
  operState.value = 5;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-10 15:32:55
@ 功能: 提交审批
*/
const submitApproval = (val: any) => {
  operState.value = 4;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 09:36:59
@ 功能: 撤回申请
*/
const withdrawApplication = (val: any) => {
  // console.log("撤回申请", val);
  let sendInfo = {
    id: val.runFlowIdStr,
  };
  retractRunWorkFlow(sendInfo).then((data) => {
    ElMessage({
      message: "撤回成功！",
      type: "success",
    });
    getToDoList();
  });
};
/**
@ 作者: 秦东
@ 时间: 2025-04-01 14:50:46
@ 功能: 撤回发送的企业微信消息
*/
const recallSendMsg = (val: any) => {
  let sendInfo = {
    id: val.masters_key.toString(),
  };
  recalSendMsg(sendInfo).then((data) => {
    ElMessage({
      message: "撤回成功！",
      type: "success",
    });
    getPageData();
  });
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 11:17:42
@ 功能: 重新提交申请
*/
const afreshSendFlow = (val: any) => {
  operState.value = 2;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-11 11:19:21
@ 功能: 申请修改数据
*/
const editFormSendFlow = (val: any) => {
  operState.value = 3;
  tablePageClass.value = 2;
  pageInfoCont.value = val;
  drawerWith.value = container.value?.clientWidth;
  lookPageInfoIsShow.value = true;
};
const cancelEvent = (val: any) => {
  //   console.log('cancel!',val)
};
/**
@ 作者: 秦东
@ 时间: 2024-04-03 13:13:56
@ 功能: 列表信息删除信息
*/
const confirmEvent = (val: any) => {
  let sendData = {
    id: [val.mastersKeyStr],
    isTrue: 2,
  };
  softDeletion(sendData).then((data) => {
    // console.log('cancel!',data)
    ElNotification({
      title: "系统提示！",
      message: data.mag ? data.mag : "删除成功",
      type: "success",
    });
    getToDoList();
  });
};
const searchQuery = () => {};
</script>
<template>
  <div ref="container" class="app_box">
    <div class="app-container">
      <div class="search">
        <div class="titleBox">我创建的</div>
        <el-form ref="searckFormRef" :model="selectInfo" :inline="true">
          <el-form-item label="任务标题" prop="name">
            <el-input
              v-model="selectInfo.title"
              placeholder="请输入任务标题"
              clearable
              @keyup.enter="searchQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getToDoList()"
              ><i-ep-search />搜索</el-button
            >
            <el-button @click="resetQuery()"><i-ep-refresh />重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-card shadow="never">
        <el-table
          v-loading="loading"
          element-loading-text="Loading..."
          highlight-current-row
          :data="taskFlowAry"
          border
          class="table_box"
        >
          <el-table-column fixed label="标题" prop="title" width="500" />
          <el-table-column label="创建人" prop="creater" width="200" align="center">
            <template #default="scope">
              {{ scope.row.createrInfo.name }}（<el-text type="info">{{
                scope.row.createrInfo.number
              }}</el-text
              >）
            </template>
          </el-table-column>
          <el-table-column
            label="发起日期"
            prop="createrTimeStr"
            align="center"
            min-width="200"
          />
          <el-table-column label="状态" prop="status" align="center" width="100">
            <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 && scope.row.types == 1"
                type="danger"
                class="mx-1"
                effect="plain"
                round
              >
                驳回
              </el-tag>
              <el-tag
                v-else-if="scope.row.status == 2 && scope.row.types != 1"
                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="130" align="center">
            <template #default="scope">
              <el-tag
                v-if="scope.row.types == 1"
                type="danger"
                class="mx-1"
                effect="plain"
                round
              >
                流程任务
              </el-tag>
              <el-tag v-else class="mx-1" effect="plain" round> 普通任务 </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="200">
            <template #default="scope">
              <el-button-group>
                <el-tooltip
                  v-if="scope.row.types == 1 && scope.row.status == 1"
                  class="box-item"
                  effect="dark"
                  content="提交审批"
                  placement="top-end"
                >
                  <el-button
                    type="success"
                    size="small"
                    class="fa fa-send-o"
                    @click="submitApproval(scope.row)"
                  />
                </el-tooltip>

                <el-tooltip
                  v-if="scope.row.types == 1 && scope.row.status == 2"
                  class="box-item"
                  effect="dark"
                  content="重新申请"
                  placement="top-end"
                >
                  <el-button
                    type="warning"
                    size="small"
                    class="fa fa-retweet"
                    @click="afreshSendFlow(scope.row)"
                  />
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="查看详情"
                  placement="top-end"
                >
                  <el-button
                    @click="lookPageInfo(scope.row)"
                    type="primary"
                    size="small"
                    class="fa fa-eye"
                  />
                </el-tooltip>
                <el-popconfirm
                  v-if="scope.row.types == 1 && scope.row.isRetract"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="QuestionFilled"
                  icon-color="#F56C6C"
                  title="您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！"
                  @confirm="withdrawApplication(scope.row)"
                  @cancel="cancelEvent(scope.row)"
                >
                  <template #reference>
                    <el-button size="small" class="fa fa-reply-all" />
                  </template>
                </el-popconfirm>
                <el-tooltip
                  v-if="scope.row.types == 2"
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top-end"
                >
                  <el-button
                    @click="editInfo(scope.row)"
                    type="info"
                    size="small"
                    class="fa fa-edit"
                  />
                </el-tooltip>
                <el-popconfirm
                  v-if="scope.row.status == 2 || scope.row.status == 1"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="QuestionFilled"
                  icon-color="#F56C6C"
                  title="您确定要删除此条记录?一经删除！数据将不可恢复！"
                  @confirm="confirmEvent(scope.row)"
                  @cancel="cancelEvent(scope.row)"
                >
                  <template #reference>
                    <el-button type="danger" size="small" class="fa fa-trash-o" />
                  </template>
                </el-popconfirm>
                <el-popconfirm
                  v-if="scope.row.retract_true"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  :icon="QuestionFilled"
                  icon-color="#F56C6C"
                  title="您确定要撤回此次发送的消息？"
                  @confirm="recallSendMsg(scope.row)"
                  @cancel="cancelEvent(scope.row)"
                >
                  <template #reference>
                    <el-button
                      size="small"
                      class="fa fa-mail-reply-all"
                      color="rgb(250, 181.5, 181.5)"
                    />
                  </template>
                </el-popconfirm>
                <el-tooltip
                  v-if="scope.row.types == 1 && scope.row.status == 4"
                  class="box-item"
                  effect="dark"
                  content="申请修改"
                  placement="top-end"
                >
                  <el-button
                    type="info"
                    size="small"
                    class="fa fa-edit"
                    @click="editFormSendFlow(scope.row)"
                  />
                </el-tooltip>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-model:total="totals"
          v-model:page="selectInfo.page"
          v-model:limit="selectInfo.pagesize"
          @pagination="getToDoList"
        />
      </el-card>

      <FormPageCont
        v-model:is-show="lookPageInfoIsShow"
        :drawer-with="props.drawerWith"
        :page-info="pageInfoCont"
        :table-page-class="tablePageClass"
        :oper-state="operState"
        @getPageData="getToDoList"
      />

      <TableFlow
        v-model:isopen="openTaskDrawer"
        :versionid="props.versionid"
        :versiontitle="props.versiontitle"
        :drawerwith="props.drawerWith"
        :pick-app-menu="pickAppMenu"
        @searchquery="getListData"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.app_box {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  .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 - 260px);
}
</style>