sohelp-eleplus 1.1.13

package/sohelp-workflow-drawer/components/timeline.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="line-wrap">
+    <div
+      class="line"
+      v-for="(item, index) in stepData"
+      :key="index"
+      :class="[item.type]"
+      :title="getTypeLabel(item.type)"
+    >
+      <div class="avatar-box">
+        <el-avatar
+          shape="circle"
+          fit="cover"
+          :src="getAvatar(item.assignee_id)"
+          style="background: transparent; width: 26px; height: 26px"
+          v-if="item.actor_avatar"
+        />
+        <el-avatar style="background: transparent" :icon="UserFilled" v-else />
+      </div>
+      <div class="line-main">
+        <div>
+          <ele-text tag="span" type="info" style="display: inline-block; width: 180px">{{ item.nodeName }} </ele-text>
+          <ele-text tag="span" type="info">{{ item.create_time }}</ele-text>
+        </div>
+
+        <ele-text style="margin-top: 5px">
+          <div style="display: flex; gap: 5px; flex-wrap: wrap">
+            <ele-text v-if="item.task_type == 1">办理人:</ele-text>
+            <ele-text v-if="item.task_type == 0">申请人:</ele-text>
+            <ele-text v-if="item.task_type == 2" type="info">抄送人:</ele-text>
+            <span v-for="row in item?.actorList" :key="row.actor_id">
+              <vxe-tag status="primary">{{ row.actor_name }}</vxe-tag>
+            </span>
+          </div>
+        </ele-text>
+        <div style="display: flex; gap: 5px; flex-wrap: wrap">
+          <ele-text v-if="item.task_type === 1">办理意见:</ele-text>
+          <ele-text v-if="item.task_type === 0">申请理由:</ele-text>
+          <ele-text v-if="item.task_type !== 2">{{ getVariable(item)?.reason }}</ele-text>
+          <ele-text v-if="item.type !== 'done'" type="info">指派人:</ele-text>
+
+          <span v-if="item.type !== 'done'" v-for="row in item?.assigneeList" :key="row.name">
+            <vxe-tag status="info">{{ row.name }}</vxe-tag>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { reactive, ref, watch } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { useMobile } from '@/utils/use-mobile.js';
+  import { getTasks } from '../js/index.js';
+  import { UserFilled } from '@element-plus/icons-vue';
+  import { API_BASE_URL } from '@/config/setting';
+
+  const { mobile } = useMobile();
+
+  const props = defineProps({
+    data: Object
+  });
+
+  const stepData = reactive([]);
+  const currentTaskIndex = ref(1);
+
+  const load = async () => {
+    const { refid, id } = props.data;
+    if (refid && id) {
+      const data = await getTasks({ refid, id });
+      data.forEach((item, index) => {
+        if (item.create_time) {
+          currentTaskIndex.value = index + 1;
+        }
+        stepData.push(item);
+      });
+    } else {
+      ElMessage.error('缺少id或refid参数');
+    }
+  };
+
+  /**
+   * 获取头像
+   */
+  const getAvatar = (id) => {
+    return API_BASE_URL + '/engine/web/user/avatar?id=' + id;
+  };
+
+  const getVariable = (item) => {
+    return JSON.parse(item.variable || '{}');
+  };
+
+  const type = {
+    todo: '处理中',
+    done: '已处理'
+  };
+
+  const getTypeLabel = (_type) => {
+    return type[_type] || '';
+  };
+
+  watch(
+    () => props.data,
+    (val) => {
+      if (val) {
+        load();
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+<style lang="scss" scoped>
+  .line-wrap {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    background: linear-gradient(to right, transparent 0px, transparent 15px, #eee 15px, #eee 20px, transparent 20px);
+
+    .line {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+      align-items: flex-start;
+      position: relative;
+
+      .avatar-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: #f1f1f1;
+        border: 1px solid #eee;
+        border-radius: 50%;
+        box-sizing: border-box;
+        width: 36px;
+        height: 36px;
+        padding: 3px;
+        position: relative;
+      }
+
+      .avatar-box::before {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        top: 0px;
+        right: -5px;
+        width: 10px;
+        height: 10px;
+        text-align: center;
+        line-height: 10px;
+        color: #fff;
+        font-size: 12px;
+        padding: 2px;
+        background: transparent;
+        border-radius: 50%;
+      }
+
+      .line-main {
+        flex: 1;
+        height: auto;
+      }
+    }
+
+    .line.done {
+      .avatar-box::before {
+        content: '✓';
+        background: #67c23a;
+        transform: rotate(15deg);
+      }
+    }
+
+    .line.todo {
+      .avatar-box::before {
+        content: '●';
+        background: #ff943e;
+      }
+    }
+
+    .line.undo {
+      .avatar-box::before {
+        content: 'x';
+        background: #ff6600;
+      }
+    }
+  }
+</style>

package/sohelp-workflow-drawer/components/workflow.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-loading="loading" class="workflow-wrap">
+    <draw-box class="workflow-scroll">
+      <sohelp-workflow class="workflow" ref="workflowRef" v-model="workflow.nodeConfig" v-if="workflow?.nodeConfig" />
+    </draw-box>
+  </div>
+</template>
+
+<script setup>
+  import { ref, watch, reactive } from 'vue';
+  import { ElMessage } from 'element-plus';
+  import { getWorkflow } from '../js/index.js';
+  import DrawBox from './draw-box.vue';
+
+  const props = defineProps({
+    data: Object
+  });
+
+  const loading = ref(false);
+  const workflow = ref(null);
+
+  const load = async () => {
+    loading.value = true;
+    const { id, refid } = props.data;
+    if (id && refid) {
+      const res = await getWorkflow({ refid, id }).catch((e) => {
+        ElMessage.error(e.message);
+      });
+      loading.value = false;
+      if (res) {
+        workflow.value = res;
+      }
+    } else {
+      ElMessage.error('缺少id或refid参数');
+    }
+  };
+
+  watch(
+    () => props.data,
+    (val) => {
+      if (val) {
+        load();
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+<style lang="scss" scoped>
+  .workflow-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    overflow: hidden;
+    padding-top: 20px;
+  }
+
+  .slider {
+    display: flex;
+    gap: 20px;
+    width: 400px;
+    align-items: center;
+    margin: 0 20px 20px auto;
+  }
+</style>

package/sohelp-workflow-drawer/index.vue

@@ -0,0 +1,311 @@
+<!-- 工作流 -->
+<template>
+  <ele-drawer
+    :append-to-body="true"
+    :z-index="2002"
+    :model-value="modelValue"
+    @update:modelValue="updateModelValue"
+    :destroyOnClose="true"
+    title="详情"
+    size="70%"
+    style="min-width: 600px"
+    :bodyStyle="{ padding: '0 20px' }"
+    class="workflow-drawer auto-height"
+    :body-style="{
+      height: '100%'
+    }"
+    @close="close"
+    @open="open"
+    :close-on-click-modal="false"
+  >
+    <ele-tabs :items="tabs" v-model="active" class="workflow-tabs">
+      <template #form>
+        <form-tab :data="data" v-if="active === 'form'"></form-tab>
+      </template>
+      <template #workflow>
+        <workflow-tab :data="data" v-if="active === 'workflow'"></workflow-tab>
+      </template>
+      <template #table>
+        <table-tab :data="data" v-if="active === 'table'"></table-tab>
+      </template>
+      <template #timeline>
+        <timeline-tab :data="data" v-if="active === 'timeline'"></timeline-tab>
+      </template>
+    </ele-tabs>
+
+    <!-- 同意、拒绝弹窗 -->
+    <approval-modal
+      v-model="approvalModalVisible"
+      :type="todoType"
+      :data="approvalData"
+      @confirm="done"
+    ></approval-modal>
+
+    <!-- 选择用户 -->
+    <ele-modal
+      :width="400"
+      form
+      v-model="userModal"
+      :title="moreOption[todoType]"
+      :close-on-click-modal="false"
+      @open="openUserModal"
+      :draggable="false"
+    >
+      <el-form label-position="top">
+        <el-form-item :label="`请选择要${moreOption[todoType]}的用户`">
+          <sohelp-user-select
+            :multiple="todoType != 'delegate'"
+            v-model="users"
+            style="width: 100%"
+          ></sohelp-user-select>
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <el-button @click="userModal = false">取消</el-button>
+        <el-button type="primary" @click="saveByUser(todoType, users)" v-loading="loading" :disabled="!users.length">{{
+            moreOption[todoType]
+          }}
+        </el-button>
+      </template>
+    </ele-modal>
+
+    <template #footer>
+      <el-button plain size="small" @click="updateModelValue(false)">关闭</el-button>
+      <span v-if="showOpera">
+        <el-button type="primary" size="small" @click="openModal('agree')" v-permission="'todo.wf.agree'"
+        >同意</el-button
+        >
+        <el-button type="danger" size="small" @click="openModal('reject')" v-permission="'todo.wf.reject'"
+        >拒绝</el-button
+        >
+        <ele-dropdown trigger="click" :items="getMore" @command="onOperate($event)" v-if="getMore.length > 0">
+          <el-button plain="" size="small" title="更多" :icon="MoreFilled"></el-button>
+        </ele-dropdown>
+      </span>
+    </template>
+  </ele-drawer>
+</template>
+
+<script setup>
+import { buttonAuth, getTodoDetail, moreOption, todoOperate } from "@/api/todo/index.js";
+import { EleMessage } from "@/components/ele-admin-plus/components";
+import { MoreFilled } from "@element-plus/icons-vue";
+import { ElMessageBox } from "element-plus/es";
+import { usePermission } from "@/utils/use-permission";
+import { computed, reactive, ref, watch } from "vue";
+import FormTab from "./components/form.vue";
+import TableTab from "./components/table.vue";
+import TimelineTab from "./components/timeline.vue";
+import WorkflowTab from "./components/workflow.vue";
+import ApprovalModal from "./components/approval-modal.vue";
+
+const permission = usePermission();
+
+const props = defineProps({
+  modelValue: Boolean,
+  data: Object,
+  showOpera: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(["opera","update:data","update:showOpera","update:modelValue", "reload", "close"]);
+
+const tabs = reactive([
+  { label: "表单", name: "form" },
+  { label: "流程图", name: "workflow" },
+  { label: "表格", name: "table" },
+  { label: "时间轴", name: "timeline" }
+]);
+const active = ref("form");
+const detail = ref();
+
+const todoType = ref(null);
+const userModal = ref(false);
+const drawerVisible = ref(false);
+const loading = ref(false);
+const users = ref([]);
+
+const approvalModalVisible = ref(false);
+const approvalData = reactive({
+  id: "",
+  refid: ""
+});
+
+
+/**
+ * 显示详情
+ * @param params
+ */
+const show = (params = {}) => {
+  emit("update:data",params);
+  emit("update:modelValue", true);
+};
+
+/** 更新modelValue */
+const updateModelValue = (value) => {
+  emit("update:modelValue", value);
+};
+
+/**
+ * 打开抽屉
+ */
+const open = async () => {
+  const { id, refid } = props.data;
+  if (id && refid) {
+    await getDetail({ refid, id });
+  } else {
+    EleMessage.error("缺少id或refid参数");
+  }
+};
+
+/**
+ * 关闭抽屉
+ */
+const close = () => {
+  active.value = "form";
+  emit("close");
+};
+
+/**
+ * 获取详情
+ * @param params
+ */
+const getDetail = async (params) => {
+  loading.value = true;
+  const res = await getTodoDetail(params);
+  loading.value = false;
+  if (res) {
+    detail.value = res;
+  } else {
+    EleMessage.error("获取详情失败");
+  }
+};
+
+/**
+ * 更多操作按钮
+ */
+const getMore = computed(() => {
+  const exclude = ["agree", "reject", "batchAgree", "batchReject", "submit"];
+  return Object.entries(moreOption)
+    .filter(([key]) => !exclude.includes(key) && permission.hasPermission(buttonAuth[key]))
+    ?.map(([key, value]) => ({ title: value, command: key }));
+});
+
+/**
+ * 同意、拒绝弹窗
+ * @param type
+ */
+const openModal = (type) => {
+  todoType.value = type;
+  const id = props.data.id;
+  Object.assign(approvalData, {
+    id: id,
+    refid: props.data.refid
+  });
+  approvalModalVisible.value = true;
+};
+
+/**
+ * 选择用户弹窗
+ */
+const openUserModal = () => {
+  users.value = todoType.value === "delegate" ? "" : [];
+};
+
+/**
+ * 更多操作
+ * @param type 类型
+ * @param row
+ */
+const onOperate = (type) => {
+  todoType.value = type;
+
+  // 委派、加签、减签
+  if (["delegate", "addSign", "removeSign"].includes(type)) {
+    userModal.value = true;
+    return false;
+  }
+
+  let data = {
+    taskId: props.data.taskId
+  };
+  // 跳转
+  if (type === "jump") {
+    data.nodeKey = props.data.nodeKey;
+  }
+
+  ElMessageBox.confirm(`确定要${moreOption[type]}吗?`, "系统提示", {
+    type: "danger",
+    draggable: false
+  })
+    .then(async () => {
+      save(type, data);
+    })
+    .catch((e) => {
+    });
+};
+
+// 更新table
+const done = () => {
+  updateModelValue(false);
+  emit("reload");
+};
+
+/**
+ * 委派，加签，减签保存
+ * @param type
+ */
+const saveByUser = (type) => {
+  save(type, {
+    id: props.data.id,
+    [type === "delegate" ? "userId" : "users"]: users.value
+  });
+};
+
+/**
+ * 保存
+ * @param type
+ * @param data
+ */
+const save = (type, data) => {
+  loading.value = true;
+  todoOperate(type, data)
+    .then((msg) => {
+      loading.value = false;
+      EleMessage.success(msg);
+      done();
+      if (type == "agree" || type == "reject") {
+        todoDrawerRef.value?.closeModal();
+      }
+      if (["delegate", "addSign", "removeSign"].includes(type)) {
+        userModal.value = false;
+      }
+    })
+    .catch((e) => {
+      loading.value = false;
+      EleMessage.error(e.message);
+    });
+};
+
+defineExpose({
+  show,
+  close
+});
+watch(
+  () => props.modelValue,
+  (val) => {
+    drawerVisible.value = val;
+    emit("update:showOpera",false);
+    //获取可审批的任务
+    SohelpHttp.get("/engine/web/workflow/getMyTasks", { refid: props.data.refid, id: props.data.id }).then(res => {
+      if (res.meta.success) {
+      // emit("update:showOpera",res.data.length > 0)
+      }
+    });
+  }
+);
+</script>
+<style lang="scss" scoped></style>

package/sohelp-workflow-drawer/js/index.js

@@ -0,0 +1,119 @@
+export const moreOption = {
+  agree: '同意',
+  reject: '拒绝',
+  submit: '提交申批',
+  batchAgree: '批量同意',
+  batchReject: '批量拒绝',
+  reclaim: '撤回',
+  delegate: '委派',
+  complete: '终止',
+  addSign: '加签',
+  removeSign: '减签',
+  jump: '跳转',
+  jumpPrevious: '返回上一步',
+  jumpFirst: '退回发起人'
+};
+
+export const buttonAuth = {
+  agree: 'todo.wf.agree',
+  reject: 'todo.wf.reject',
+  submit: 'todo.wf.submit',
+  reclaim: 'todo.wf.reclaim',
+  delegate: 'todo.wf.delegate',
+  complete: 'todo.wf.complete',
+  addSign: 'todo.wf.add-sign',
+  removeSign: 'todo.wf.remove-sign',
+  jump: 'todo.wf.jump',
+  jumpPrevious: 'todo.wf.jump-previous',
+  jumpFirst: 'todo.wf.jump-first'
+}
+
+/**
+ * 待办分页列表
+ * @param params customer_no
+ */
+export async function getTodoPage(params) {
+  const res = await SohelpHttp.get(`/engine/web/workflow/pageByTodo`, params);
+  if (res.meta.success) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.meta.message));
+}
+
+/**
+ * 已办分页列表
+ * @param params customer_no
+ */
+export async function getHisTaskPage(params) {
+  const res = await SohelpHttp.get(`/engine/web/workflow/pageByHisTask`, params);
+  if (res.meta.success) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.meta.message));
+}
+
+/**
+ * 待办 操作
+ * @param {*} type 类型 moreOption
+ * @param {*} params
+ * @returns
+ */
+
+export async function todoOperate(type, params) {
+  const res = await SohelpHttp.post(`/engine/web/workflow/${type}`, params);
+  if (res.meta.success) {
+    return res.meta.message;
+  }
+  return Promise.reject(new Error(res.meta.message));
+}
+
+/**
+ * 获取待办详情
+ * @param {refid} params
+ * @param {id} params
+ * @returns
+ */
+export async function getTodoDetail(params) {
+  const res = await SohelpHttp.get(`/engine/web/crud/detail`, params);
+  if (res.meta.success) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.meta.message));
+}
+
+/**
+ * 获取工作流
+ * @param {id,refid}
+ * @returns
+ */
+export async function getWorkflow(params) {
+  const res = await SohelpHttp.get(`/engine/web/workflow/getProcess`, params);
+  if (res.meta.success) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.meta.message));
+}
+
+/**
+ * 获取历史任务
+ * @param {id,refid}
+ * @returns
+ */
+export async function getTasks(params) {
+  const res = await SohelpHttp.get(`/engine/web/workflow/getTasks`, params);
+  if (res.meta.success) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.meta.message));
+}
+
+/**
+ * 已阅
+ */
+export async function readByCc(taskId) {
+  const res = await SohelpHttp.post(`/engine/web/workflow/readByCc`, { taskId });
+  if (res.meta.success) {
+    return res.meta.message;
+  }
+  return Promise.reject(new Error(res.meta.message));
+}