sohelp-eleplus 1.1.13

package/sohelp-vxe-table/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <vxe-table
+    border
+    show-overflow
+    v-bind="$attrs"
+    :edit-config="{ trigger: 'click', mode: 'cell' }"
+    :data="datasource.results"
+    ref="sohelpVxeTableRef"
+  >
+    <vxe-column type="drag" title="" width="50" align="center" v-if="drag">
+      <ele-text :icon="DragOutlined" class="drag-btn"></ele-text>
+    </vxe-column>
+    <vxe-column type="seq" width="70"></vxe-column>
+    <vxe-column
+      v-for="item in columns"
+      :field="item.name"
+      :title="item.header"
+      :edit-render="getEditor(item)"
+      :key="item.name"
+    ></vxe-column>
+    <vxe-pager
+      v-model:currentPage="page"
+      v-model:pageSize="limit"
+      :total="datasource.total"
+      @page-change="reload"
+    >
+    </vxe-pager>
+  </vxe-table>
+</template>
+<script>
+  import { reactive, ref, nextTick } from 'vue';
+  import { EleMessage } from '@/components/ele-admin-plus/components';
+  import { DragOutlined } from '@/components/icons';
+  import Sortable from 'sortablejs';
+  import {moduleCache} from  '../cache/ModuleCache';
+
+  export default {
+    name: 'SohelpVxeTable',
+    extends: [],
+    props: {
+      /**网格列表配置ID*/
+      refid: {
+        type: String,
+        defaultValue: '',
+        required: true
+      },
+      /**数据源URL**/
+      url: {
+        type: String,
+        defaultValue: ''
+      },
+      /**数据源URL**/
+      where: {
+        type: Object,
+        defaultValue: {}
+      },
+      drag: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup(props, { emits }) {
+      /**列表实例*/
+      const sohelpVxeTableRef = ref(null);
+      /**存储表格配置*/
+      const sohelpConfig = reactive({});
+      const page = ref(1);
+      const limit = ref(20);
+      const loadOnCreated = ref(false);
+      const sortable = ref(null);
+
+      /**定义数据源**/
+      const datasource = reactive({
+        total: 0,
+        results: []
+      });
+      const columns = reactive([]);
+      /**根据配置列转成ProTable格式的列*/
+      const switchProperty = (property) => {
+        return {
+          name: property.name,
+          header: property.label,
+          width: property.with || 100,
+          edit: property.edit,
+          editor:property.editor
+        };
+      };
+
+      /***初始化网格列表配置**/
+      const initProTableConfiguration = () => {
+        props.drag && rowDrop()
+      };
+
+      /**获取列表配置*/
+      moduleCache.getGrid(props.refid).then((data) => {
+        if(!data){
+          return;
+        }
+        Object.assign(sohelpConfig, { ...data });
+        //初始化属性列表配置
+        data.properties.map((property) => {
+          columns.push(switchProperty(property));
+        });
+        /**添加操作列**/
+        columns.push({
+          columnKey: 'action',
+          label: '操作',
+          width: 200,
+          align: 'center',
+          slot: 'action'
+        });
+        //初始化表格配置
+        initProTableConfiguration();
+        loadOnCreated.value = true;
+        reload();
+      });
+
+      const reload = async () => {
+        if (!loadOnCreated.value) {
+          Object.assign(datasource, { total: 0, results: [] });
+          return;
+        }
+        const res = await SohelpHttp.get(
+          props.url || sohelpConfig.requestValue,
+          {
+            page,
+            limit,
+            ...props.where
+          }
+        ).catch((e) => {
+          EleMessage.error(e.message);
+        });
+        Object.assign(datasource, { ...res.data });
+      };
+
+      const getEditor = (item) =>{
+        if(item.edit){
+          return {'name':'input'}
+        }else{
+          return null;
+        }
+
+      }
+
+      // 行拖拽
+      const rowDrop = () => {
+        nextTick(() => {
+          const xGTable = sohelpVxeTableRef.value;
+          sortable.value = Sortable.create(
+            xGTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'),
+            {
+              handle: '.drag-btn',
+              onEnd: ({ newIndex, oldIndex }) => {}
+            }
+          );
+        });
+      };
+
+      return {
+        page,
+        limit,
+        reload,
+        getEditor,
+        loadOnCreated,
+        datasource,
+        sohelpVxeTableRef,
+        columns,
+        DragOutlined
+      };
+    }
+  };
+</script>
+
+<style scoped>
+  .drag-btn {
+    cursor: move;
+    font-size: 12px;
+  }
+
+  :deep(.vxe-body--row.sortable-ghost),
+  :deep(.vxe-body--row.sortable-chosen) {
+    background-color: #dfecfb;
+  }
+</style>

package/sohelp-workflow/index.vue

@@ -0,0 +1,495 @@
+<template>
+  <div class="sc-workflow-design">
+    <div class="box-scale">
+      <node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
+      <div class="end-node">
+        <div class="end-node-circle"></div>
+        <div class="end-node-text">流程结束</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import nodeWrap from './nodeWrap.vue';
+  export default {
+    name: 'SohelpWorkflow',
+    props: {
+      modelValue: { type: Object, default: () => {} }
+    },
+    components: {
+      nodeWrap
+    },
+    data() {
+      return {
+        nodeConfig: this.modelValue,
+        selectVisible: false
+      };
+    },
+    watch: {
+      modelValue(val) {
+        this.nodeConfig = val;
+      },
+      nodeConfig(val) {
+        this.$emit('update:modelValue', val);
+      }
+    }
+  };
+</script>
+
+<style lang="scss">
+  .sc-workflow-design {
+    width: 100%;
+    overflow-y: auto;
+  }
+  .sc-workflow-design .box-scale {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+    min-width: min-content;
+  }
+
+  .sc-workflow-design {
+    .node-wrap {
+      display: inline-flex;
+      width: 100%;
+      flex-flow: column wrap;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 0px 0px;
+      position: relative;
+      z-index: 1;
+    }
+    .node-wrap-box {
+      display: inline-flex;
+      flex-direction: column;
+      position: relative;
+      width: 220px;
+      min-height: 72px;
+      flex-shrink: 0;
+      background: rgb(255, 255, 255);
+      border-radius: 6px;
+      cursor: pointer;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+    }
+    .node-wrap-box::before {
+      content: '';
+      position: absolute;
+      top: -12px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0px;
+      border-style: solid;
+      border-width: 8px 6px 4px;
+      border-color: rgb(202, 202, 202) transparent transparent;
+    }
+    .node-state-label-pass .node-wrap-box {
+      border-color: #67c23a;
+    }
+    .node-wrap-box.done {
+      border: 3px solid #409eff;
+    }
+
+    .node-wrap-box.todo {
+      border: 3px dashed #ff943e;
+    }
+
+    .node-wrap-box.start-node {
+      border: 3px solid #409eff;
+    }
+    .node-wrap-box.start-node:before {
+      content: none;
+    }
+    .node-wrap-box .title {
+      height: 24px;
+      line-height: 24px;
+      color: #fff;
+      padding-left: 16px;
+      padding-right: 30px;
+      border-radius: 4px 4px 0 0;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+    .node-wrap-box .title .icon {
+      margin-right: 5px;
+    }
+    .node-wrap-box .title .close {
+      font-size: 15px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 10px;
+      display: none;
+    }
+    .node-wrap-box .content {
+      position: relative;
+      padding: 15px;
+    }
+    .node-wrap-box .content .placeholder {
+      color: #999;
+    }
+    .node-wrap-box:hover .close {
+      display: block;
+    }
+    .add-node-btn-box {
+      width: 240px;
+      display: inline-flex;
+      flex-shrink: 0;
+      position: relative;
+      z-index: 1;
+    }
+    .add-node-btn-box:before {
+      content: '';
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      z-index: -1;
+      margin: auto;
+      width: 2px;
+      height: 100%;
+      background-color: rgb(202, 202, 202);
+    }
+    .add-node-btn {
+      user-select: none;
+      width: 240px;
+      padding: 20px 0px 32px;
+      display: flex;
+      justify-content: center;
+      flex-shrink: 0;
+      flex-grow: 1;
+    }
+    .add-node-btn span {
+    }
+    .add-branch {
+      justify-content: center;
+      padding: 0px 10px;
+      position: absolute;
+      top: -16px;
+      left: 50%;
+      transform: translateX(-50%);
+      transform-origin: center center;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+    }
+    .branch-wrap {
+      display: inline-flex;
+      width: 100%;
+    }
+    .branch-box-wrap {
+      display: flex;
+      flex-flow: column wrap;
+      align-items: center;
+      min-height: 270px;
+      width: 100%;
+      flex-shrink: 0;
+    }
+    .col-box {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+    .branch-box {
+      display: flex;
+      overflow: visible;
+      min-height: 180px;
+      height: auto;
+      border-bottom: 2px solid #ccc;
+      border-top: 2px solid #ccc;
+      position: relative;
+      margin-top: 15px;
+    }
+    .branch-box .col-box::before {
+      content: '';
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      z-index: 0;
+      margin: auto;
+      width: 2px;
+      height: 100%;
+      background-color: rgb(202, 202, 202);
+    }
+    .condition-node {
+      display: inline-flex;
+      flex-direction: column;
+      min-height: 220px;
+    }
+    .condition-node-box {
+      padding-top: 30px;
+      padding-right: 50px;
+      padding-left: 50px;
+      justify-content: center;
+      align-items: center;
+      flex-grow: 1;
+      position: relative;
+      display: inline-flex;
+      flex-direction: column;
+    }
+    .condition-node-box::before {
+      content: '';
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      margin: auto;
+      width: 2px;
+      height: 100%;
+      background-color: rgb(202, 202, 202);
+    }
+    .auto-judge {
+      position: relative;
+      width: 220px;
+      min-height: 72px;
+      background: rgb(255, 255, 255);
+      border-radius: 4px;
+      padding: 15px 15px;
+      cursor: pointer;
+      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
+    }
+    .auto-judge::before {
+      content: '';
+      position: absolute;
+      top: -12px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0px;
+      border-style: solid;
+      border-width: 8px 6px 4px;
+      border-color: rgb(202, 202, 202) transparent transparent;
+      background: rgb(239, 239, 239);
+    }
+    .auto-judge .title {
+      line-height: 16px;
+    }
+    .auto-judge .title .node-title {
+      color: #15bc83;
+    }
+    .auto-judge .title .close {
+      font-size: 15px;
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      color: #999;
+      display: none;
+    }
+    .auto-judge .title .priority-title {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      color: #999;
+    }
+    .auto-judge .content {
+      position: relative;
+      padding-top: 15px;
+    }
+    .auto-judge .content .placeholder {
+      color: #999;
+    }
+    .auto-judge:hover {
+      .close {
+        display: block;
+      }
+      .priority-title {
+        display: none;
+      }
+    }
+    .top-left-cover-line,
+    .top-right-cover-line {
+      position: absolute;
+      height: 3px;
+      width: 50%;
+      background-color: #ffffff;
+      top: -2px;
+    }
+    .bottom-left-cover-line,
+    .bottom-right-cover-line {
+      position: absolute;
+      height: 3px;
+      width: 50%;
+      background-color: #ffffff;
+      bottom: -2px;
+    }
+    .top-left-cover-line {
+      left: -1px;
+    }
+    .top-right-cover-line {
+      right: -1px;
+    }
+    .bottom-left-cover-line {
+      left: -1px;
+    }
+    .bottom-right-cover-line {
+      right: -1px;
+    }
+    .end-node {
+      border-radius: 50%;
+      font-size: 14px;
+      color: rgba(25, 31, 37, 0.4);
+      text-align: left;
+    }
+    .end-node-circle {
+      width: 10px;
+      height: 10px;
+      margin: auto;
+      border-radius: 50%;
+      background: #ccc;
+    }
+    .end-node-text {
+      margin-top: 5px;
+      text-align: center;
+    }
+    .auto-judge:hover {
+      .sort-left {
+        display: flex;
+      }
+      .sort-right {
+        display: flex;
+      }
+    }
+    .auto-judge .sort-left {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 1;
+      left: 0;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+    .auto-judge .sort-right {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      z-index: 1;
+      right: 0;
+      display: none;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+    }
+    .auto-judge .sort-left:hover,
+    .auto-judge .sort-right:hover {
+      background: #eee;
+    }
+    .auto-judge:after {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 2;
+      border-radius: 4px;
+      transition: all 0.1s;
+    }
+    .auto-judge:hover:after {
+      border: 1px solid #3296fa;
+      box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+    }
+    .node-wrap-box:after {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 2;
+      border-radius: 4px;
+      transition: all 0.1s;
+    }
+    .node-wrap-box:hover:after {
+      border: 1px solid #3296fa;
+      box-shadow: 0 0 6px 0 rgba(50, 150, 250, 0.3);
+    }
+  }
+
+  .tags-list {
+    margin-top: 15px;
+    width: 100%;
+  }
+  .add-node-popover-body {
+  }
+  .add-node-popover-body li {
+    display: inline-block;
+    width: 80px;
+    text-align: center;
+    padding: 10px 0;
+  }
+  .add-node-popover-body li i {
+    border: 1px solid var(--el-border-color-light);
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 38px;
+    font-size: 18px;
+    cursor: pointer;
+  }
+  .add-node-popover-body li i:hover {
+    border: 1px solid #3296fa;
+    background: #3296fa;
+    color: #fff !important;
+  }
+  .add-node-popover-body li p {
+    font-size: 12px;
+    margin-top: 5px;
+  }
+  .node-wrap-drawer__title {
+    padding-right: 40px;
+  }
+  .node-wrap-drawer__title label {
+    cursor: pointer;
+  }
+  .node-wrap-drawer__title label:hover {
+    border-bottom: 1px dashed #409eff;
+  }
+  .node-wrap-drawer__title .node-wrap-drawer__title-edit {
+    color: #409eff;
+    margin-left: 10px;
+    vertical-align: middle;
+  }
+
+  .dark .sc-workflow-design {
+    .node-wrap-box,
+    .auto-judge {
+      background: #2b2b2b;
+    }
+    .col-box {
+      background: var(--el-bg-color);
+    }
+    .top-left-cover-line,
+    .top-right-cover-line,
+    .bottom-left-cover-line,
+    .bottom-right-cover-line {
+      background-color: #ffffff;
+    }
+    .node-wrap-box::before,
+    .auto-judge::before {
+      background-color: var(--el-bg-color);
+    }
+    .branch-box .add-branch {
+      background: var(--el-bg-color);
+    }
+    .end-node .end-node-text {
+      color: #ccc;
+    }
+    .auto-judge .sort-left:hover,
+    .auto-judge .sort-right:hover {
+      background: var(--el-bg-color);
+    }
+  }
+</style>

package/sohelp-workflow/nodeWrap.vue

@@ -0,0 +1,53 @@
+<template>
+  <promoter v-if="nodeConfig.type == 0" v-model="nodeConfig"></promoter>
+
+  <approver v-if="nodeConfig.type == 1" v-model="nodeConfig"></approver>
+
+  <send v-if="nodeConfig.type == 2" v-model="nodeConfig"></send>
+
+  <branch v-if="nodeConfig.type == 4" v-model="nodeConfig">
+    <template v-slot="slot">
+      <node-wrap v-if="slot.node" v-model="slot.node.childNode"></node-wrap>
+    </template>
+  </branch>
+
+  <node-wrap v-if="nodeConfig.childNode" v-model="nodeConfig.childNode"></node-wrap>
+</template>
+
+<script>
+  import approver from './nodes/approver.vue';
+  import promoter from './nodes/promoter.vue';
+  import branch from './nodes/branch.vue';
+  import send from './nodes/send.vue';
+
+  export default {
+    props: {
+      modelValue: { type: Object, default: () => {} }
+    },
+    components: {
+      approver,
+      promoter,
+      branch,
+      send
+    },
+    data() {
+      return {
+        nodeConfig: {}
+      };
+    },
+    watch: {
+      modelValue(val) {
+        this.nodeConfig = val;
+      },
+      nodeConfig(val) {
+        this.$emit('update:modelValue', val);
+      }
+    },
+    mounted() {
+      this.nodeConfig = this.modelValue;
+    },
+    methods: {}
+  };
+</script>
+
+<style></style>