JG-ADMIN-TEMP/src/components/WorkFlows/workFlowCheck.vue

<script setup lang="ts">
import { getNextUser, queryFlowDataList, submitFlow } from "@/api/flow";

const dialogVisible = ref(false);
const dialogTitle = ref("Workflow Check");

const emits = defineEmits(["sureToSave"]);

// 流程定义的列表
const flowDataList = ref<any[]>([]);
const getFlowList = () => {
  queryFlowDataList({ flowType: flowForm.flow_type }).then((res) => {
    flowDataList.value = res.data;
  });
};
const name = ref("");
const nextUserList = ref<any[]>([]);
const whenSelectFlow = () => {
  //   选择完模板之后  下一节点人员 type 1 流程 2 任务
  getNextUser("1", flowForm.definitionId).then((res) => {
    name.value = res.data?.roleName ?? "";
    nextUserList.value = res.data?.users ?? [];
  });
};

const flowFormRef = ref();
const flowForm = reactive<any>({
  businessId: "",
  flow_type: "",
  definitionId: "",
  users: "",
});

const close = () => {
  dialogVisible.value = false;
};

const sureToSave = () => {
  submitFlow(flowForm).then(() => {
    ElMessage.success("提交成功");
    emits("sureToSave");
    dialogVisible.value = false;
  });
};

// businessId	业务ID   流程类型flow_type  测试类型  testService;   通用工艺提审  commonRouteFlowService;
const openDialog = (businessId: string, flow_type: string) => {
  flowForm.businessId = businessId;
  flowForm.flow_type = flow_type;
  dialogVisible.value = true;
  getFlowList();
};

defineExpose({
  openDialog,
  close,
});
</script>

<template>
  <el-drawer
    v-model="dialogVisible"
    direction="rtl"
    size="400"
    append-to-body
    destroy-on-close
  >
    <template #header>
      <h4 v-text="dialogTitle"></h4>
    </template>
    <template #default>
      <el-scrollbar>
        <div class="check-container">
          <el-form ref="flowFormRef" v-model="flowForm" label-width="100px">
            <el-form-item label="选择流程模板">
              <el-tree-select
                v-model="flowForm.definitionId"
                :data="flowDataList"
                filterable
                :props="{ label: 'flowName', value: 'id' }"
                @change="whenSelectFlow"
              />
            </el-form-item>
            <el-form-item :label="name" v-if="name">
              <el-tree-select
                v-model="flowForm.users"
                :data="nextUserList"
                filterable
                :props="{ label: 'userName', value: 'userName' }"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="sureToSave">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped lang="scss">
:deep(.el-drawer__header) {
  margin: 0;
}
.check-container {
  font-size: 14px;
}
</style>