inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/pss/components/table.tsx

@@ -1,840 +1,840 @@
-import { defineComponent, reactive, ref, watch } from "vue";
-import { Button, Modal, message } from "ant-design-vue";
-import { CaretDownOutlined } from "@ant-design/icons-vue";
-import { randomKey } from "../utils";
-import useTableList from "@/pageComponent/hooks/useTableList";
-import NewOrder from "@/pageComponent/views/pss/components/NewOrder";
-import ApproveOpinion from "@/pageComponent/views/pss/components/ApproveOpinion";
-import PerformOperation from "@/pageComponent/views/pss/components/PerformOperation";
-import Info from "@/pageComponent/views/pss/components/Info";
-
-import dayjs, { Dayjs } from "dayjs";
-
-import pssApi from "@/api/pss";
-
-const Format = "YYYY-MM-DD HH:mm";
-
-export default defineComponent({
-  components: {
-    NewOrder,
-    ApproveOpinion,
-    PerformOperation,
-    Info,
-  },
-
-  props: {
-    tab: { type: String, default: "do" },
-  },
-
-  setup(props, context) {
-    const { userId } = sessionStorage.getItem("userinfo")
-      ? JSON.parse(sessionStorage.getItem("userinfo")!)
-      : "";
-
-    const state = reactive<any>({
-      type: 0, // 类型
-      status: 0, // 状态
-      typeOptions: [
-        // { text: '全部类型', value: 0 },
-        // { text: '低压停送电', value: 1 },
-        // { text: '低压送电', value: 2 },
-      ],
-      statusOptions: [
-        // { text: '全部状态', value: 'a' },
-        // { text: '停电审批', value: 'b' },
-        // { text: '停电执行', value: 'c' },
-      ],
-    });
-
-    // table
-    const {
-      currPage,
-      isLoading,
-      refresh,
-      tableList,
-      handlePageChange,
-      total,
-      hanldePageSizeChange,
-      pageSize,
-      pagination,
-    } = useTableList(
-      async () => {
-        if (props.tab === "do") {
-          const data = await getTodo();
-          return { data };
-        }
-        if (props.tab === "done") {
-          const data = await getDone();
-          return { data };
-        }
-        if (props.tab === "self") {
-          const data = await getStartByMe();
-          return { data };
-        }
-      },
-      "list",
-      "total"
-    );
-
-    // 待办
-    const getTodo = async () => {
-      // console.log(state.typeOptions, state.type);
-      const { data } = await pssApi.todoPage({
-        pageDTO: {
-          pageNo: pagination.current,
-          pageSize: pagination.pageSize,
-        },
-        busId: "spms",
-        processId: (state.typeOptions[state.type] as any)?.code,
-        taskDefKey: (state.statusOptions[state.status] as any)?.code,
-      });
-
-      if (state.type === 0 && state.status === 0) {
-        // 筛选条件 typeOptions
-        state.typeOptions = data.processIdMapCountVOs.map((vo: any) => ({
-          text: `${vo.name} ${vo.count}`,
-          code: vo.code,
-          count: vo.count,
-        }));
-
-        if (data.processIdMapCountVOs.length > 0) {
-          const typeCount =
-            data.processIdMapCountVOs.length === 1
-              ? data.processIdMapCountVOs[0].count
-              : data.processIdMapCountVOs.reduce((prev: any, curr: any) => {
-                  return prev + curr.count;
-                }, 0);
-
-          state.typeOptions.unshift({
-            text: `全部类型 ${typeCount}`,
-            code: null,
-            count: typeCount,
-          });
-        }
-
-        // 筛选条件 statusOptions
-        state.statusOptions = data.taskDefKeyMapCountVOs.map((vo: any) => ({
-          text: `${vo.name} ${vo.count}`,
-          code: vo.code,
-          count: vo.count,
-        }));
-
-        if (data.taskDefKeyMapCountVOs.length) {
-          const stateCount =
-            data.taskDefKeyMapCountVOs.length === 1
-              ? data.taskDefKeyMapCountVOs[0].count
-              : data.taskDefKeyMapCountVOs.reduce((prev: any, curr: any) => {
-                  return prev + curr.count;
-                }, 0);
-
-          state.statusOptions.unshift({
-            text: `全部状态 ${stateCount}`,
-            code: null,
-            count: stateCount,
-          });
-        }
-      }
-
-      return data.pageInfo;
-    };
-
-    // 已办
-    const getDone = async () => {
-      const { data } = await pssApi.donePage({
-        pageDTO: {
-          pageNo: pagination.current,
-          pageSize: pagination.pageSize,
-        },
-        busId: "spms",
-        processId: (state.typeOptions[state.type] as any)?.code,
-        taskDefKey: (state.statusOptions[state.status] as any)?.code,
-      });
-
-      return data.pageInfo;
-    };
-
-    // 我发起的
-    const getStartByMe = async () => {
-      const { data } = await pssApi.startByMePage({
-        pageDTO: {
-          pageNo: pagination.current,
-          pageSize: pagination.pageSize,
-        },
-        busId: "spms",
-        processId: (state.typeOptions[state.type] as any)?.code,
-        taskDefKey: (state.statusOptions[state.status] as any)?.code,
-      });
-
-      return data.pageInfo;
-    };
-
-    watch(
-      () => props.tab,
-      async (nVal, oVal) => {
-        refresh();
-      },
-      { deep: true, immediate: true }
-    );
-
-    watch([() => state.type], async (nVal, oVal) => {
-      if (nVal[0] === 0) {
-        state.status = 0;
-      }
-
-      pagination.current = 1;
-
-      refresh();
-    });
-
-    watch(
-      () => state.status,
-      async (nVal, oVal) => {
-        pagination.current = 1;
-
-        refresh();
-      }
-    );
-
-    const batch = ref(false);
-
-    const tableConfig: any = reactive({
-      columns: [
-        {
-          dataIndex: "supplyTypeName",
-          title: "申请类型",
-          width: 150,
-        },
-        {
-          dataIndex: "applyUserName",
-          title: "发起人",
-          width: 100,
-        },
-        {
-          title: "当前状态",
-          key: "currentState",
-          width: 140,
-        },
-        {
-          dataIndex: "equipName",
-          title: "名称",
-          // key: "numAndName",
-          width: 200,
-        },
-        {
-          title: "回路数量",
-          key: "loopsNum",
-          width: 100,
-        },
-        {
-          title: "控制回路",
-          key: "loops",
-          width: 300,
-          ellipsis: true,
-        },
-        {
-          dataIndex: "applyReason",
-          title: "申请原因",
-          width: 120,
-          ellipsis: true,
-        },
-        {
-          title: "计划停电时间",
-          key: "planStopPowerDt",
-          width: 150,
-        },
-        {
-          title: "计划送电时间",
-          key: "planSupplyPowerDt",
-          width: 150,
-        },
-        {
-          title: "执行操作",
-          key: "operation",
-          fixed: "right",
-          width: 220,
-        },
-      ],
-    });
-
-    // 新建任务
-    const showCreate = ref(false);
-    const addModal = () => {
-      showCreate.value = true;
-    };
-
-    const currentObj: any = ref({});
-
-    const operationState = reactive({
-      showFooter: true,
-      showInfo: false,
-      showPerform: false,
-      showOpinion: false,
-      comment: "",
-      isAgree: null as any,
-      label: "",
-      showDetailPopup: false,
-    });
-
-    // 停电/送电 拒绝
-    const toStopRefuse = (record) => {
-      currentObj.value = record;
-
-      operationState.isAgree = false;
-      operationState.showOpinion = true;
-      operationState.label = `${record.disAgreeButton}审批意见`;
-    };
-
-    // 停电/送电 同意
-    const toStopAgree = (record) => {
-      currentObj.value = record;
-
-      operationState.isAgree = true;
-      operationState.showOpinion = true;
-      operationState.label = `${record.agreeButton}审批意见`;
-    };
-
-    // 执行
-    const toExecute = (record) => {
-      currentObj.value = record;
-
-      operationState.showPerform = true;
-    };
-    // 停电/送电 试车
-    const toStopTestRun = (record) => {
-      currentObj.value = record;
-
-      operationState.showOpinion = true;
-      operationState.label = `${record.taskName}备注`;
-    };
-
-    // 检修
-    const toRecondition = (record) => {
-      currentObj.value = record;
-
-      operationState.showOpinion = true;
-      operationState.label = `${record.taskName}备注`;
-    };
-
-    /**
-     * 按钮执行方法
-     */
-    // 停电/送电 审批
-    const processApproval = async () => {
-      const resp: any = await pssApi.processApproval({
-        comment: operationState.comment,
-        processGateway: operationState.isAgree ? "agree" : "disagree",
-        taskDefKey: currentObj.value.taskDefKey,
-        taskId: currentObj.value.taskId,
-        userId,
-        taskDefName: currentObj.value.taskName, // 任务 节点名字
-        agreeButton: currentObj.value.agreeButton, // 同意按钮
-        disAgreeButton: currentObj.value.disAgreeButton, // 不同意按钮
-      });
-
-      if (resp.data === "ok") {
-        message.success(resp.message || "成功");
-        operationState.showOpinion = false;
-        operationState.comment = "";
-        operationState.showFooter = false;
-
-        refresh();
-      }
-    };
-
-    // 批量 停电/送电 审批
-    const processApproval_Batch = async () => {
-      const postData = selectedRow.selectedRows.map((item: any) => {
-        const obj = {
-          comment: operationState.comment,
-          processGateway: operationState.isAgree ? "agree" : "disagree",
-          taskId: item.taskId,
-          userId,
-          taskDefName: currentObj.value.taskName, // 任务 节点名字
-          agreeButton: currentObj.value.agreeButton, // 同意按钮
-          disAgreeButton: currentObj.value.disAgreeButton, //不同意按钮
-        };
-        return obj;
-      });
-
-      const resp: any = await pssApi.processApprovalBatch(postData);
-      if (resp.code === "ok") {
-        message.success(resp.message || "成功");
-        operationState.showOpinion = false;
-        operationState.comment = "";
-
-        cancelBatch();
-        refresh();
-      }
-    };
-
-    // 停电执行
-    const executeStop = async () => {
-      const loopIds = currentObj.value.loops.map((lo: any) => lo.id);
-      const resp: any = await pssApi.executeStop({
-        lockUser: userId,
-        loopIds,
-        loopStatus: "localBreakStopPower",
-        processInstanceId: currentObj.value.processInstanceId,
-        processName: currentObj.value.supplyTypeName, // 低压停送电
-        taskDefKey: currentObj.value.taskDefKey, // ExecuteStop
-        taskId: currentObj.value.taskId,
-      });
-
-      if (resp.data === true) {
-        message.success(resp.message || "成功");
-        operationState.showPerform = false;
-
-        operationState.showFooter = false;
-        refresh();
-      }
-    };
-
-    // 送电执行
-    const executeSupply = async () => {
-      const loopIds = currentObj.value.loops.map((lo: any) => lo.id);
-      const resp: any = await pssApi.executeSupply({
-        unLockUser: userId,
-        loopIds,
-        loopStatus: "localBreakStopPower",
-        processInstanceId: currentObj.value.processInstanceId,
-        processName: currentObj.value.supplyTypeName, // 低压停送电
-        taskDefKey: currentObj.value.taskDefKey, // ExecuteStop
-        taskId: currentObj.value.taskId,
-      });
-
-      if (resp.data === true) {
-        message.success(resp.message || "成功");
-        operationState.showPerform = false;
-
-        operationState.showFooter = false;
-        refresh();
-      }
-    };
-
-    // 停电/送电 试车
-    const processAttempt = async () => {
-      const resp: any = await pssApi.processAttempt({
-        comment: operationState.comment,
-        processGateway: operationState.isAgree ? "agree" : "disagree",
-        taskDefKey: currentObj.value.taskDefKey,
-        taskId: currentObj.value.taskId,
-        userId,
-        taskDefName: currentObj.value.taskName, // 任务 节点名字
-        agreeButton: currentObj.value.agreeButton, // 同意按钮
-        disAgreeButton: currentObj.value.disAgreeButton, // 不同意按钮
-      });
-
-      if (resp.data === "ok") {
-        message.success(resp.message || "成功");
-        operationState.showOpinion = false;
-        operationState.comment = "";
-        operationState.showFooter = false;
-
-        refresh();
-      }
-    };
-
-    // 停电检修
-    const overhaulStop = async () => {
-      const resp: any = await pssApi.processOverhaul({
-        comment: operationState.comment,
-        processGateway: operationState.isAgree ? "agree" : "disagree",
-        taskDefKey: currentObj.value.taskDefKey,
-        taskId: currentObj.value.taskId,
-        userId,
-        taskDefName: currentObj.value.taskName, // 任务 节点名字
-        agreeButton: currentObj.value.agreeButton, // 同意按钮
-        disAgreeButton: currentObj.value.disAgreeButton, // 不同意按钮
-      });
-
-      if (resp.data === "ok") {
-        message.success(resp.message || "成功");
-        operationState.showOpinion = false;
-        operationState.comment = "";
-        operationState.showFooter = false;
-
-        refresh();
-      }
-    };
-
-    // 渲染按钮函数
-    const btnRenderFun = (record: any, isInfo = false) => {
-      return (
-        <div class="op">
-          {!batch.value && (
-            <>
-              {/* 停电/送电 审批 Approval */}
-              {record.taskDefKey === "Approval" && (
-                <a-space>
-                  <a-button
-                    type={isInfo ? "primary" : "link"}
-                    ghost={isInfo}
-                    class={record.disAgreeButtonColor}
-                    onClick={() => {
-                      toStopRefuse(record);
-                    }}
-                  >
-                    {/* 拒绝/驳回 class=red/yellow*/}
-                    {record.disAgreeButton}
-                  </a-button>
-
-                  <a-button
-                    type={isInfo ? "primary" : "link"}
-                    ghost={isInfo}
-                    onClick={() => {
-                      toStopAgree(record);
-                    }}
-                  >
-                    {/* 同意 */}
-                    {record.agreeButton}
-                  </a-button>
-                </a-space>
-              )}
-              {/* 停电/送电 审批 Approval */}
-
-              {/* 停电执行 ExecuteStop 送电执行 ExecuteSupply */}
-              {(record.taskDefKey === "ExecuteStop" ||
-                record.taskDefKey === "ExecuteSupply") && (
-                <a-space>
-                  <a-button
-                    type={isInfo ? "primary" : "link"}
-                    ghost={isInfo}
-                    onClick={() => {
-                      toExecute(record);
-                    }}
-                  >
-                    {record.taskName}
-                  </a-button>
-                </a-space>
-              )}
-              {/* 停电执行 ExecuteStop 送电执行 ExecuteSupply */}
-
-              {/* 停电/送电 试车 Attempt */}
-              {record.taskDefKey === "Attempt" && (
-                <a-space>
-                  <a-button
-                    type={isInfo ? "primary" : "link"}
-                    ghost={isInfo}
-                    onClick={() => {
-                      toStopTestRun(record);
-                    }}
-                  >
-                    {/* 停电/送电试车 */}
-                    {record.taskName}
-                  </a-button>
-                </a-space>
-              )}
-              {/* 停电/送电 试车 Attempt */}
-
-              {/* 停电检修 Overhaul */}
-              {record.taskDefKey === "Overhaul" && (
-                <a-space>
-                  <a-button
-                    type={isInfo ? "primary" : "link"}
-                    ghost={isInfo}
-                    onClick={() => {
-                      toRecondition(record);
-                    }}
-                  >
-                    {/* 停电检修 */}
-                    {record.taskName}
-                  </a-button>
-                </a-space>
-              )}
-              {/* 停电检修 Overhaul */}
-            </>
-          )}
-        </div>
-      );
-    };
-
-    const selectedRow: any = reactive({
-      selectedRowKeys: [],
-      selectedRows: [],
-    });
-    const onSelect = (selectedRowKeys: any[], selectedRows: any) => {
-      // console.log(selectedRowKeys, selectedRows);
-      selectedRow.selectedRowKeys = selectedRowKeys;
-      selectedRow.selectedRows = selectedRows;
-    };
-
-    const cancelBatch = () => {
-      batch.value = false;
-      selectedRow.selectedRowKeys = [];
-      selectedRow.selectedRows = [];
-    };
-
-    return () => (
-      <div class="pssList_content">
-        {state.typeOptions.length > 0 && state.statusOptions.length > 0 && (
-          <div class="dropSelect">
-            <a-dropdown
-              placement="bottomRight"
-              v-slots={{
-                overlay: () => {
-                  return (
-                    <a-menu>
-                      {state.typeOptions.map((option: any, index: number) => (
-                        <a-menu-item
-                          key={index}
-                          onClick={() => {
-                            state.type = index;
-                          }}
-                        >
-                          <a href="javascript:;">{option.text}</a>
-                        </a-menu-item>
-                      ))}
-                    </a-menu>
-                  );
-                },
-              }}
-            >
-              <div class="">
-                <span>
-                  {(state.typeOptions[state.type] as any).text}
-                  <CaretDownOutlined />
-                </span>
-              </div>
-            </a-dropdown>
-
-            <a-dropdown
-              placement="bottomRight"
-              v-slots={{
-                overlay: () => {
-                  return (
-                    <a-menu>
-                      {state.statusOptions.map((option: any, index: number) => (
-                        <a-menu-item
-                          key={index}
-                          onClick={() => {
-                            state.status = index;
-                          }}
-                        >
-                          <a href="javascript:;">{option.text}</a>
-                        </a-menu-item>
-                      ))}
-                    </a-menu>
-                  );
-                },
-              }}
-            >
-              <div class="">
-                <span>
-                  {(state.statusOptions[state.status] as any).text}
-                  <CaretDownOutlined />
-                </span>
-              </div>
-            </a-dropdown>
-          </div>
-        )}
-
-        <div class="operation_btn">
-          <a-space>
-            <Button type="primary" onClick={addModal}>
-              新建任务
-            </Button>
-            {!batch.value && props.tab === "do" && (
-              <Button
-                type="primary"
-                ghost
-                onClick={() => {
-                  batch.value = true;
-                }}
-              >
-                批量审批
-              </Button>
-            )}
-          </a-space>
-        </div>
-
-        {batch.value && (
-          <div class="batchLine flex-center">
-            <a-space>
-              <span>已勾选：{selectedRow.selectedRowKeys.length}个</span>
-              <a-button
-                type="primary"
-                ghost
-                onClick={() => {
-                  if (selectedRow.selectedRowKeys.length) {
-                    toStopRefuse({
-                      taskDefKey: "batch",
-                      taskName: "批量审批",
-                      disAgreeButton: "拒绝",
-                    });
-                  } else {
-                    message.error("请选择");
-                  }
-                }}
-              >
-                拒绝
-              </a-button>
-
-              <a-button
-                type="primary"
-                ghost
-                onClick={() => {
-                  if (selectedRow.selectedRowKeys.length) {
-                    toStopAgree({
-                      taskDefKey: "batch",
-                      taskName: "批量审批",
-                      agreeButton: "同意",
-                    });
-                  } else {
-                    message.error("请选择");
-                  }
-                }}
-              >
-                同意
-              </a-button>
-
-              <a-button type="link" onClick={cancelBatch}>
-                取消批量审批
-              </a-button>
-            </a-space>
-          </div>
-        )}
-
-        <div class="table">
-          <a-table
-            scroll={{ x: 1300 }}
-            dataSource={tableList.value}
-            columns={tableConfig.columns}
-            pagination={pagination}
-            loading={isLoading.value}
-            rowKey="processInstanceId"
-            rowSelection={
-              batch.value
-                ? {
-                    onChange: onSelect,
-                    selectedRowKeys: selectedRow.selectedRowKeys,
-                    getCheckboxProps: (record: any) => ({
-                      disabled: record.taskDefKey !== "Approval", // 停电/送电 审批 Approval
-                    }),
-                  }
-                : null
-            }
-            v-slots={{
-              bodyCell: ({ column, record, index }: any) => {
-                // console.log(text, column, record, index);
-                if (column.key === "currentState") {
-                  return (
-                    <span class={["stateNode", record.taskFlag]}>
-                      {record.taskStatus}
-                    </span>
-                  );
-                }
-
-                // // 设备编号/名称
-                // if (column.key === "numAndName") {
-                //   return (
-                //     <span>
-                //       {record.equipCode}
-                //       {record.equipName}
-                //     </span>
-                //   );
-                // }
-
-                // 回路数量
-                if (column.key === "loopsNum") {
-                  return <span>{record.loops.length}个</span>;
-                }
-
-                // 控制回路
-                if (column.key === "loops") {
-                  const result = record.loops
-                    .map((loop: any) => {
-                      // return `${loop.id}-${loop.name}`;
-                      return loop.name;
-                    })
-                    .join("；");
-
-                  return <span>{result}</span>;
-                }
-
-                // 计划停电时间
-                if (column.key === "planStopPowerDt") {
-                  return (
-                    <span>
-                      {record.supplyTypeCode !== "supplyPower"
-                        ? dayjs(record.planStopPowerDt).format(Format)
-                        : "-"}
-                    </span>
-                  );
-                }
-
-                // 计划送电时间
-                if (column.key === "planSupplyPowerDt") {
-                  return (
-                    <span>
-                      {record.supplyTypeCode !== "stopPower"
-                        ? dayjs(record.planSupplyPowerDt).format(Format)
-                        : "-"}
-                    </span>
-                  );
-                }
-
-                // 操作
-                if (column.key === "operation") {
-                  return (
-                    <div class="operation">
-                      {btnRenderFun(record)}
-
-                      <a-button
-                        type="link"
-                        onClick={() => {
-                          currentObj.value = record;
-                          operationState.showFooter = true;
-                          operationState.showInfo = true;
-                        }}
-                      >
-                        详情
-                      </a-button>
-                    </div>
-                  );
-                }
-              },
-            }}
-          ></a-table>
-        </div>
-
-        {/* 新建任务 */}
-        <NewOrder
-          v-model={[showCreate.value, "showCreate"]}
-          onRefresh={refresh}
-        />
-
-        {/* 停电/送电 试车 Attempt、停电/送电 审批 Approval、停电检修 Overhaul */}
-        <ApproveOpinion
-          onToProcessApproval={processApproval}
-          onToProcessAttempt={processAttempt}
-          onToOverhaulStop={overhaulStop}
-          onToProcessApproval_Batch={processApproval_Batch}
-          detail={currentObj.value}
-          isAgree={operationState.isAgree}
-          label={operationState.label}
-          v-models={[
-            [operationState.showOpinion, "showOpinion"],
-            [operationState.comment, "comment"],
-          ]}
-        ></ApproveOpinion>
-
-        {/* 停电执行 ExecuteStop 送电执行 ExecuteSupply */}
-        <PerformOperation
-          detail={currentObj.value}
-          onToExecuteStop={executeStop}
-          onToExecuteSupply={executeSupply}
-          v-model={[operationState.showPerform, "showPerform"]}
-        ></PerformOperation>
-
-        {/* 详情 */}
-        <Info
-          v-model={[operationState.showInfo, "showInfo"]}
-          btn={btnRenderFun(currentObj.value, true)}
-          showFooter={operationState.showFooter}
-          detail={currentObj.value}
-          tab={props.tab}
-        ></Info>
-      </div>
-    );
-  },
-});
+import { defineComponent, reactive, ref, watch } from "vue";
+import { Button, Modal, message } from "ant-design-vue";
+import { CaretDownOutlined } from "@ant-design/icons-vue";
+import { randomKey } from "../utils";
+import useTableList from "@/pageComponent/hooks/useTableList";
+import NewOrder from "@/pageComponent/views/pss/components/NewOrder";
+import ApproveOpinion from "@/pageComponent/views/pss/components/ApproveOpinion";
+import PerformOperation from "@/pageComponent/views/pss/components/PerformOperation";
+import Info from "@/pageComponent/views/pss/components/Info";
+
+import dayjs, { Dayjs } from "dayjs";
+
+import pssApi from "@/api/pss";
+
+const Format = "YYYY-MM-DD HH:mm";
+
+export default defineComponent({
+  components: {
+    NewOrder,
+    ApproveOpinion,
+    PerformOperation,
+    Info,
+  },
+
+  props: {
+    tab: { type: String, default: "do" },
+  },
+
+  setup(props, context) {
+    const { userId } = sessionStorage.getItem("userinfo")
+      ? JSON.parse(sessionStorage.getItem("userinfo")!)
+      : "";
+
+    const state = reactive<any>({
+      type: 0, // 类型
+      status: 0, // 状态
+      typeOptions: [
+        // { text: '全部类型', value: 0 },
+        // { text: '低压停送电', value: 1 },
+        // { text: '低压送电', value: 2 },
+      ],
+      statusOptions: [
+        // { text: '全部状态', value: 'a' },
+        // { text: '停电审批', value: 'b' },
+        // { text: '停电执行', value: 'c' },
+      ],
+    });
+
+    // table
+    const {
+      currPage,
+      isLoading,
+      refresh,
+      tableList,
+      handlePageChange,
+      total,
+      hanldePageSizeChange,
+      pageSize,
+      pagination,
+    } = useTableList(
+      async () => {
+        if (props.tab === "do") {
+          const data = await getTodo();
+          return { data };
+        }
+        if (props.tab === "done") {
+          const data = await getDone();
+          return { data };
+        }
+        if (props.tab === "self") {
+          const data = await getStartByMe();
+          return { data };
+        }
+      },
+      "list",
+      "total"
+    );
+
+    // 待办
+    const getTodo = async () => {
+      // console.log(state.typeOptions, state.type);
+      const { data } = await pssApi.todoPage({
+        pageDTO: {
+          pageNo: pagination.current,
+          pageSize: pagination.pageSize,
+        },
+        busId: "spms",
+        processId: (state.typeOptions[state.type] as any)?.code,
+        taskDefKey: (state.statusOptions[state.status] as any)?.code,
+      });
+
+      if (state.type === 0 && state.status === 0) {
+        // 筛选条件 typeOptions
+        state.typeOptions = data.processIdMapCountVOs.map((vo: any) => ({
+          text: `${vo.name} ${vo.count}`,
+          code: vo.code,
+          count: vo.count,
+        }));
+
+        if (data.processIdMapCountVOs.length > 0) {
+          const typeCount =
+            data.processIdMapCountVOs.length === 1
+              ? data.processIdMapCountVOs[0].count
+              : data.processIdMapCountVOs.reduce((prev: any, curr: any) => {
+                  return prev + curr.count;
+                }, 0);
+
+          state.typeOptions.unshift({
+            text: `全部类型 ${typeCount}`,
+            code: null,
+            count: typeCount,
+          });
+        }
+
+        // 筛选条件 statusOptions
+        state.statusOptions = data.taskDefKeyMapCountVOs.map((vo: any) => ({
+          text: `${vo.name} ${vo.count}`,
+          code: vo.code,
+          count: vo.count,
+        }));
+
+        if (data.taskDefKeyMapCountVOs.length) {
+          const stateCount =
+            data.taskDefKeyMapCountVOs.length === 1
+              ? data.taskDefKeyMapCountVOs[0].count
+              : data.taskDefKeyMapCountVOs.reduce((prev: any, curr: any) => {
+                  return prev + curr.count;
+                }, 0);
+
+          state.statusOptions.unshift({
+            text: `全部状态 ${stateCount}`,
+            code: null,
+            count: stateCount,
+          });
+        }
+      }
+
+      return data.pageInfo;
+    };
+
+    // 已办
+    const getDone = async () => {
+      const { data } = await pssApi.donePage({
+        pageDTO: {
+          pageNo: pagination.current,
+          pageSize: pagination.pageSize,
+        },
+        busId: "spms",
+        processId: (state.typeOptions[state.type] as any)?.code,
+        taskDefKey: (state.statusOptions[state.status] as any)?.code,
+      });
+
+      return data.pageInfo;
+    };
+
+    // 我发起的
+    const getStartByMe = async () => {
+      const { data } = await pssApi.startByMePage({
+        pageDTO: {
+          pageNo: pagination.current,
+          pageSize: pagination.pageSize,
+        },
+        busId: "spms",
+        processId: (state.typeOptions[state.type] as any)?.code,
+        taskDefKey: (state.statusOptions[state.status] as any)?.code,
+      });
+
+      return data.pageInfo;
+    };
+
+    watch(
+      () => props.tab,
+      async (nVal, oVal) => {
+        refresh();
+      },
+      { deep: true, immediate: true }
+    );
+
+    watch([() => state.type], async (nVal, oVal) => {
+      if (nVal[0] === 0) {
+        state.status = 0;
+      }
+
+      pagination.current = 1;
+
+      refresh();
+    });
+
+    watch(
+      () => state.status,
+      async (nVal, oVal) => {
+        pagination.current = 1;
+
+        refresh();
+      }
+    );
+
+    const batch = ref(false);
+
+    const tableConfig: any = reactive({
+      columns: [
+        {
+          dataIndex: "supplyTypeName",
+          title: "申请类型",
+          width: 150,
+        },
+        {
+          dataIndex: "applyUserName",
+          title: "发起人",
+          width: 100,
+        },
+        {
+          title: "当前状态",
+          key: "currentState",
+          width: 140,
+        },
+        {
+          dataIndex: "equipName",
+          title: "名称",
+          // key: "numAndName",
+          width: 200,
+        },
+        {
+          title: "回路数量",
+          key: "loopsNum",
+          width: 100,
+        },
+        {
+          title: "控制回路",
+          key: "loops",
+          width: 300,
+          ellipsis: true,
+        },
+        {
+          dataIndex: "applyReason",
+          title: "申请原因",
+          width: 120,
+          ellipsis: true,
+        },
+        {
+          title: "计划停电时间",
+          key: "planStopPowerDt",
+          width: 150,
+        },
+        {
+          title: "计划送电时间",
+          key: "planSupplyPowerDt",
+          width: 150,
+        },
+        {
+          title: "执行操作",
+          key: "operation",
+          fixed: "right",
+          width: 220,
+        },
+      ],
+    });
+
+    // 新建任务
+    const showCreate = ref(false);
+    const addModal = () => {
+      showCreate.value = true;
+    };
+
+    const currentObj: any = ref({});
+
+    const operationState = reactive({
+      showFooter: true,
+      showInfo: false,
+      showPerform: false,
+      showOpinion: false,
+      comment: "",
+      isAgree: null as any,
+      label: "",
+      showDetailPopup: false,
+    });
+
+    // 停电/送电 拒绝
+    const toStopRefuse = (record) => {
+      currentObj.value = record;
+
+      operationState.isAgree = false;
+      operationState.showOpinion = true;
+      operationState.label = `${record.disAgreeButton}审批意见`;
+    };
+
+    // 停电/送电 同意
+    const toStopAgree = (record) => {
+      currentObj.value = record;
+
+      operationState.isAgree = true;
+      operationState.showOpinion = true;
+      operationState.label = `${record.agreeButton}审批意见`;
+    };
+
+    // 执行
+    const toExecute = (record) => {
+      currentObj.value = record;
+
+      operationState.showPerform = true;
+    };
+    // 停电/送电 试车
+    const toStopTestRun = (record) => {
+      currentObj.value = record;
+
+      operationState.showOpinion = true;
+      operationState.label = `${record.taskName}备注`;
+    };
+
+    // 检修
+    const toRecondition = (record) => {
+      currentObj.value = record;
+
+      operationState.showOpinion = true;
+      operationState.label = `${record.taskName}备注`;
+    };
+
+    /**
+     * 按钮执行方法
+     */
+    // 停电/送电 审批
+    const processApproval = async () => {
+      const resp: any = await pssApi.processApproval({
+        comment: operationState.comment,
+        processGateway: operationState.isAgree ? "agree" : "disagree",
+        taskDefKey: currentObj.value.taskDefKey,
+        taskId: currentObj.value.taskId,
+        userId,
+        taskDefName: currentObj.value.taskName, // 任务 节点名字
+        agreeButton: currentObj.value.agreeButton, // 同意按钮
+        disAgreeButton: currentObj.value.disAgreeButton, // 不同意按钮
+      });
+
+      if (resp.data === "ok") {
+        message.success(resp.message || "成功");
+        operationState.showOpinion = false;
+        operationState.comment = "";
+        operationState.showFooter = false;
+
+        refresh();
+      }
+    };
+
+    // 批量 停电/送电 审批
+    const processApproval_Batch = async () => {
+      const postData = selectedRow.selectedRows.map((item: any) => {
+        const obj = {
+          comment: operationState.comment,
+          processGateway: operationState.isAgree ? "agree" : "disagree",
+          taskId: item.taskId,
+          userId,
+          taskDefName: currentObj.value.taskName, // 任务 节点名字
+          agreeButton: currentObj.value.agreeButton, // 同意按钮
+          disAgreeButton: currentObj.value.disAgreeButton, //不同意按钮
+        };
+        return obj;
+      });
+
+      const resp: any = await pssApi.processApprovalBatch(postData);
+      if (resp.code === "ok") {
+        message.success(resp.message || "成功");
+        operationState.showOpinion = false;
+        operationState.comment = "";
+
+        cancelBatch();
+        refresh();
+      }
+    };
+
+    // 停电执行
+    const executeStop = async () => {
+      const loopIds = currentObj.value.loops.map((lo: any) => lo.id);
+      const resp: any = await pssApi.executeStop({
+        lockUser: userId,
+        loopIds,
+        loopStatus: "localBreakStopPower",
+        processInstanceId: currentObj.value.processInstanceId,
+        processName: currentObj.value.supplyTypeName, // 低压停送电
+        taskDefKey: currentObj.value.taskDefKey, // ExecuteStop
+        taskId: currentObj.value.taskId,
+      });
+
+      if (resp.data === true) {
+        message.success(resp.message || "成功");
+        operationState.showPerform = false;
+
+        operationState.showFooter = false;
+        refresh();
+      }
+    };
+
+    // 送电执行
+    const executeSupply = async () => {
+      const loopIds = currentObj.value.loops.map((lo: any) => lo.id);
+      const resp: any = await pssApi.executeSupply({
+        unLockUser: userId,
+        loopIds,
+        loopStatus: "localBreakStopPower",
+        processInstanceId: currentObj.value.processInstanceId,
+        processName: currentObj.value.supplyTypeName, // 低压停送电
+        taskDefKey: currentObj.value.taskDefKey, // ExecuteStop
+        taskId: currentObj.value.taskId,
+      });
+
+      if (resp.data === true) {
+        message.success(resp.message || "成功");
+        operationState.showPerform = false;
+
+        operationState.showFooter = false;
+        refresh();
+      }
+    };
+
+    // 停电/送电 试车
+    const processAttempt = async () => {
+      const resp: any = await pssApi.processAttempt({
+        comment: operationState.comment,
+        processGateway: operationState.isAgree ? "agree" : "disagree",
+        taskDefKey: currentObj.value.taskDefKey,
+        taskId: currentObj.value.taskId,
+        userId,
+        taskDefName: currentObj.value.taskName, // 任务 节点名字
+        agreeButton: currentObj.value.agreeButton, // 同意按钮
+        disAgreeButton: currentObj.value.disAgreeButton, // 不同意按钮
+      });
+
+      if (resp.data === "ok") {
+        message.success(resp.message || "成功");
+        operationState.showOpinion = false;
+        operationState.comment = "";
+        operationState.showFooter = false;
+
+        refresh();
+      }
+    };
+
+    // 停电检修
+    const overhaulStop = async () => {
+      const resp: any = await pssApi.processOverhaul({
+        comment: operationState.comment,
+        processGateway: operationState.isAgree ? "agree" : "disagree",
+        taskDefKey: currentObj.value.taskDefKey,
+        taskId: currentObj.value.taskId,
+        userId,
+        taskDefName: currentObj.value.taskName, // 任务 节点名字
+        agreeButton: currentObj.value.agreeButton, // 同意按钮
+        disAgreeButton: currentObj.value.disAgreeButton, // 不同意按钮
+      });
+
+      if (resp.data === "ok") {
+        message.success(resp.message || "成功");
+        operationState.showOpinion = false;
+        operationState.comment = "";
+        operationState.showFooter = false;
+
+        refresh();
+      }
+    };
+
+    // 渲染按钮函数
+    const btnRenderFun = (record: any, isInfo = false) => {
+      return (
+        <div class="op">
+          {!batch.value && (
+            <>
+              {/* 停电/送电 审批 Approval */}
+              {record.taskDefKey === "Approval" && (
+                <a-space>
+                  <a-button
+                    type={isInfo ? "primary" : "link"}
+                    ghost={isInfo}
+                    class={record.disAgreeButtonColor}
+                    onClick={() => {
+                      toStopRefuse(record);
+                    }}
+                  >
+                    {/* 拒绝/驳回 class=red/yellow*/}
+                    {record.disAgreeButton}
+                  </a-button>
+
+                  <a-button
+                    type={isInfo ? "primary" : "link"}
+                    ghost={isInfo}
+                    onClick={() => {
+                      toStopAgree(record);
+                    }}
+                  >
+                    {/* 同意 */}
+                    {record.agreeButton}
+                  </a-button>
+                </a-space>
+              )}
+              {/* 停电/送电 审批 Approval */}
+
+              {/* 停电执行 ExecuteStop 送电执行 ExecuteSupply */}
+              {(record.taskDefKey === "ExecuteStop" ||
+                record.taskDefKey === "ExecuteSupply") && (
+                <a-space>
+                  <a-button
+                    type={isInfo ? "primary" : "link"}
+                    ghost={isInfo}
+                    onClick={() => {
+                      toExecute(record);
+                    }}
+                  >
+                    {record.taskName}
+                  </a-button>
+                </a-space>
+              )}
+              {/* 停电执行 ExecuteStop 送电执行 ExecuteSupply */}
+
+              {/* 停电/送电 试车 Attempt */}
+              {record.taskDefKey === "Attempt" && (
+                <a-space>
+                  <a-button
+                    type={isInfo ? "primary" : "link"}
+                    ghost={isInfo}
+                    onClick={() => {
+                      toStopTestRun(record);
+                    }}
+                  >
+                    {/* 停电/送电试车 */}
+                    {record.taskName}
+                  </a-button>
+                </a-space>
+              )}
+              {/* 停电/送电 试车 Attempt */}
+
+              {/* 停电检修 Overhaul */}
+              {record.taskDefKey === "Overhaul" && (
+                <a-space>
+                  <a-button
+                    type={isInfo ? "primary" : "link"}
+                    ghost={isInfo}
+                    onClick={() => {
+                      toRecondition(record);
+                    }}
+                  >
+                    {/* 停电检修 */}
+                    {record.taskName}
+                  </a-button>
+                </a-space>
+              )}
+              {/* 停电检修 Overhaul */}
+            </>
+          )}
+        </div>
+      );
+    };
+
+    const selectedRow: any = reactive({
+      selectedRowKeys: [],
+      selectedRows: [],
+    });
+    const onSelect = (selectedRowKeys: any[], selectedRows: any) => {
+      // console.log(selectedRowKeys, selectedRows);
+      selectedRow.selectedRowKeys = selectedRowKeys;
+      selectedRow.selectedRows = selectedRows;
+    };
+
+    const cancelBatch = () => {
+      batch.value = false;
+      selectedRow.selectedRowKeys = [];
+      selectedRow.selectedRows = [];
+    };
+
+    return () => (
+      <div class="pssList_content flex">
+        {state.typeOptions.length > 0 && state.statusOptions.length > 0 && (
+          <div class="dropSelect">
+            <a-dropdown
+              placement="bottomRight"
+              v-slots={{
+                overlay: () => {
+                  return (
+                    <a-menu>
+                      {state.typeOptions.map((option: any, index: number) => (
+                        <a-menu-item
+                          key={index}
+                          onClick={() => {
+                            state.type = index;
+                          }}
+                        >
+                          <a href="javascript:;">{option.text}</a>
+                        </a-menu-item>
+                      ))}
+                    </a-menu>
+                  );
+                },
+              }}
+            >
+              <div class="">
+                <span>
+                  {(state.typeOptions[state.type] as any).text}
+                  <CaretDownOutlined />
+                </span>
+              </div>
+            </a-dropdown>
+
+            <a-dropdown
+              placement="bottomRight"
+              v-slots={{
+                overlay: () => {
+                  return (
+                    <a-menu>
+                      {state.statusOptions.map((option: any, index: number) => (
+                        <a-menu-item
+                          key={index}
+                          onClick={() => {
+                            state.status = index;
+                          }}
+                        >
+                          <a href="javascript:;">{option.text}</a>
+                        </a-menu-item>
+                      ))}
+                    </a-menu>
+                  );
+                },
+              }}
+            >
+              <div>
+                <span>
+                  {(state.statusOptions[state.status] as any).text}
+                  <CaretDownOutlined />
+                </span>
+              </div>
+            </a-dropdown>
+          </div>
+        )}
+
+        <div class="operation_btn">
+          <a-space>
+            <Button type="primary" onClick={addModal}>
+              新建任务
+            </Button>
+            {!batch.value && props.tab === "do" && (
+              <Button
+                type="primary"
+                ghost
+                onClick={() => {
+                  batch.value = true;
+                }}
+              >
+                批量审批
+              </Button>
+            )}
+          </a-space>
+        </div>
+
+        {batch.value && (
+          <div class="batchLine flex-center">
+            <a-space>
+              <span>已勾选：{selectedRow.selectedRowKeys.length}个</span>
+              <a-button
+                type="primary"
+                ghost
+                onClick={() => {
+                  if (selectedRow.selectedRowKeys.length) {
+                    toStopRefuse({
+                      taskDefKey: "batch",
+                      taskName: "批量审批",
+                      disAgreeButton: "拒绝",
+                    });
+                  } else {
+                    message.error("请选择");
+                  }
+                }}
+              >
+                拒绝
+              </a-button>
+
+              <a-button
+                type="primary"
+                ghost
+                onClick={() => {
+                  if (selectedRow.selectedRowKeys.length) {
+                    toStopAgree({
+                      taskDefKey: "batch",
+                      taskName: "批量审批",
+                      agreeButton: "同意",
+                    });
+                  } else {
+                    message.error("请选择");
+                  }
+                }}
+              >
+                同意
+              </a-button>
+
+              <a-button type="link" onClick={cancelBatch}>
+                取消批量审批
+              </a-button>
+            </a-space>
+          </div>
+        )}
+
+        <div class="table">
+          <a-table
+            scroll={{ x: 1300 }}
+            dataSource={tableList.value}
+            columns={tableConfig.columns}
+            pagination={pagination}
+            loading={isLoading.value}
+            rowKey="processInstanceId"
+            rowSelection={
+              batch.value
+                ? {
+                    onChange: onSelect,
+                    selectedRowKeys: selectedRow.selectedRowKeys,
+                    getCheckboxProps: (record: any) => ({
+                      disabled: record.taskDefKey !== "Approval", // 停电/送电 审批 Approval
+                    }),
+                  }
+                : null
+            }
+            v-slots={{
+              bodyCell: ({ column, record, index }: any) => {
+                // console.log(text, column, record, index);
+                if (column.key === "currentState") {
+                  return (
+                    <span class={["stateNode", record.taskFlag]}>
+                      {record.taskStatus}
+                    </span>
+                  );
+                }
+
+                // // 设备编号/名称
+                // if (column.key === "numAndName") {
+                //   return (
+                //     <span>
+                //       {record.equipCode}
+                //       {record.equipName}
+                //     </span>
+                //   );
+                // }
+
+                // 回路数量
+                if (column.key === "loopsNum") {
+                  return <span>{record.loops.length}个</span>;
+                }
+
+                // 控制回路
+                if (column.key === "loops") {
+                  const result = record.loops
+                    .map((loop: any) => {
+                      // return `${loop.id}-${loop.name}`;
+                      return loop.name;
+                    })
+                    .join("；");
+
+                  return <span>{result}</span>;
+                }
+
+                // 计划停电时间
+                if (column.key === "planStopPowerDt") {
+                  return (
+                    <span>
+                      {record.supplyTypeCode !== "supplyPower"
+                        ? dayjs(record.planStopPowerDt).format(Format)
+                        : "-"}
+                    </span>
+                  );
+                }
+
+                // 计划送电时间
+                if (column.key === "planSupplyPowerDt") {
+                  return (
+                    <span>
+                      {record.supplyTypeCode !== "stopPower"
+                        ? dayjs(record.planSupplyPowerDt).format(Format)
+                        : "-"}
+                    </span>
+                  );
+                }
+
+                // 操作
+                if (column.key === "operation") {
+                  return (
+                    <div class="operation">
+                      {btnRenderFun(record)}
+
+                      <a-button
+                        type="link"
+                        onClick={() => {
+                          currentObj.value = record;
+                          operationState.showFooter = true;
+                          operationState.showInfo = true;
+                        }}
+                      >
+                        详情
+                      </a-button>
+                    </div>
+                  );
+                }
+              },
+            }}
+          ></a-table>
+        </div>
+
+        {/* 新建任务 */}
+        <NewOrder
+          v-model={[showCreate.value, "showCreate"]}
+          onRefresh={refresh}
+        />
+
+        {/* 停电/送电 试车 Attempt、停电/送电 审批 Approval、停电检修 Overhaul */}
+        <ApproveOpinion
+          onToProcessApproval={processApproval}
+          onToProcessAttempt={processAttempt}
+          onToOverhaulStop={overhaulStop}
+          onToProcessApproval_Batch={processApproval_Batch}
+          detail={currentObj.value}
+          isAgree={operationState.isAgree}
+          label={operationState.label}
+          v-models={[
+            [operationState.showOpinion, "showOpinion"],
+            [operationState.comment, "comment"],
+          ]}
+        ></ApproveOpinion>
+
+        {/* 停电执行 ExecuteStop 送电执行 ExecuteSupply */}
+        <PerformOperation
+          detail={currentObj.value}
+          onToExecuteStop={executeStop}
+          onToExecuteSupply={executeSupply}
+          v-model={[operationState.showPerform, "showPerform"]}
+        ></PerformOperation>
+
+        {/* 详情 */}
+        <Info
+          v-model={[operationState.showInfo, "showInfo"]}
+          btn={btnRenderFun(currentObj.value, true)}
+          showFooter={operationState.showFooter}
+          detail={currentObj.value}
+          tab={props.tab}
+        ></Info>
+      </div>
+    );
+  },
+});