sohelp-eleplus 1.1.22 → 1.1.25

package/sohelp-table-select/index.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="sohelp-table-select">
+    <div class="sohelp-table-select-trigger">
+      <slot name="trigger" :selected="selectedList">
+        <el-input readonly :placeholder="placeholder" :model-value="displayValue">
+          <template #append>
+            <el-icon @click="open"><Search /></el-icon
+          ></template>
+        </el-input>
+      </slot>
+    </div>
+
+    <sohelp-modal
+      v-model="visible"
+      :title="title"
+      width="1000px"
+      :close-on-click-modal="false"
+      append-to-body
+      destroy-on-close
+      top="5vh"
+      class="sohelp-table-select-dialog"
+    >
+      <div class="sohelp-table-select-body">
+        <div class="middle-panel">
+          <sohelp-grid-view
+            ref="gridRef"
+            :refid="refid"
+            @checkboxChange="checkboxChange"
+            @pageChange="pageChange"
+            @radioChange="radioChange"
+          ></sohelp-grid-view>
+        </div>
+
+        <div class="right-panel" v-if="multiple">
+          <div class="selected-header">
+            <span>已选择 {{ selectedList.length }} 个</span>
+            <el-button type="danger" link @click="clearSelection">清空</el-button>
+          </div>
+          <el-scrollbar>
+            <div v-for="item in selectedList" :key="item.value" class="selected-item">
+              <span>{{ item.label }}</span>
+              <el-icon class="close-icon" @click="removeSelected(item)"><Close /></el-icon>
+            </div>
+          </el-scrollbar>
+        </div>
+      </div>
+
+      <template #footer>
+        <el-button @click="close">关闭</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </template>
+    </sohelp-modal>
+  </div>
+</template>
+
+<script setup>
+  import { ref, computed, nextTick, watch } from 'vue';
+  import { Search } from '@element-plus/icons-vue';
+  import { uniqBy } from 'lodash';
+  import SohelpGridView from './../sohelp-grid-view/index.vue';
+  import SohelpModal from './../sohelp-modal/index.vue';
+
+  const props = defineProps({
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    title: {
+      type: String,
+      default: '请选择'
+    },
+    valueField: {
+      type: String,
+      default: 'id'
+    },
+    labelField: {
+      type: String,
+      default: 'label'
+    },
+    refid: {
+      type: String,
+      default: ''
+    }
+  });
+
+  const modelValue = defineModel('modelValue');
+  const data = defineModel('data');
+  const emit = defineEmits(['change']);
+  const modelValueArray = ref([]);
+
+  const gridRef = ref(null);
+  const visible = ref(false);
+  const selectedList = ref([]);
+  const originData = ref([]);
+
+  /**
+   * 格式化数据数组为 { label, value } 格式
+   * @param rows 原始数据数组
+   * @returns 格式化后的数组
+   */
+  const formatRows = (rows) => {
+    if (!Array.isArray(rows)) return [];
+    return rows.map((item) => ({
+      label: item[props.labelField],
+      value: item[props.valueField]
+    }));
+  };
+
+  /**
+   * 分页变更处理
+   * @param config 分页配置
+   */
+  const pageChange = (config) => {
+    nextTick(() => {
+      if (props.multiple) {
+        gridRef.value?.setCheckboxRowKey(
+          selectedList.value.map((item) => item.value),
+          true
+        );
+      } else {
+        if (selectedList.value?.length > 0) {
+          gridRef.value?.setRadioRowKey(selectedList.value[0].value);
+        }
+      }
+    });
+  };
+
+  /**
+   * 复选框变更处理
+   * @param _rows 当前选中的行数据
+   * @param checked 是否选中
+   * @param type 选择类型
+   */
+
+  const checkboxChange = (_rows, checked, type) => {
+    const rows = formatRows(_rows);
+    if (checked) {
+      selectedList.value = uniqBy([...selectedList.value, ...rows], 'value');
+    } else {
+      const data = formatRows(gridRef.value?.getData());
+      if (type === 'all') {
+        selectedList.value = selectedList.value.filter((item) => !data.some((row) => item.value === row.value));
+      } else {
+        const uncheckedValues = new Set(
+          data.filter((item) => !rows.some((row) => item.value === row.value)).map((row) => row.value)
+        );
+        selectedList.value = selectedList.value.filter((item) => !uncheckedValues.has(item.value));
+      }
+    }
+  };
+
+  /**
+   * 单选变更处理
+   * @param param0
+   */
+  const radioChange = ({ newValue }) => {
+    selectedList.value = [];
+    if (newValue) {
+      const formatted = formatRows([newValue]);
+      selectedList.value = formatted.length > 0 ? [formatted[0]] : [];
+    }
+  };
+
+  /**
+   * 显示值
+   */
+  const displayValue = computed(() => {
+    return modelValueArray.value?.map((item) => {
+      return [...originData.value, ...selectedList.value].find((selected) => selected.value === item)?.label;
+    });
+  });
+
+  /**
+   * 打开选择器
+   */
+  const open = () => {
+    visible.value = true;
+  };
+
+  /**
+   * 移除选中的项
+   */
+  const removeSelected = (item) => {
+    gridRef.value?.setCheckboxRowKey(item.value, false);
+    selectedList.value = selectedList.value.filter((row) => row.value !== item.value);
+  };
+
+  /**
+   * 清空选中
+   */
+  const clearSelection = () => {
+    gridRef.value?.setCheckboxRowKey(
+      selectedList.value?.map((item) => item.value),
+      false
+    );
+    selectedList.value = [];
+  };
+
+  /**
+   * 确认
+   */
+  const handleConfirm = () => {
+    originData.value = [];
+    const _data = selectedList.value.map((item) => {
+      return {
+        [props.valueField]: item.value,
+        [props.labelField]: item.label
+      };
+    });
+
+    if (props.multiple) {
+      modelValue.value = selectedList.value.map((item) => item.value);
+      data.value = _data;
+    } else {
+      modelValue.value = selectedList.value[0]?.value || '';
+      data.value = _data[0] || {};
+    }
+
+    emit('change', selectedList.value);
+    visible.value = false;
+  };
+
+  const close = () => {
+    selectedList.value = [...originData.value];
+    visible.value = false;
+  };
+
+  /**
+   * modelValue变更处理
+   */
+  watch(
+    () => modelValue.value,
+    (val) => {
+      selectedList.value = [];
+      if (val?.length && val != '0') {
+        modelValueArray.value = Array.isArray(val) ? val : [val];
+        if (data.value && data.value != '0') {
+          const dataArray = Array.isArray(data.value) ? data.value : [data.value];
+          selectedList.value = formatRows(
+            dataArray.filter((item) => modelValueArray.value.includes(item[props.valueField]))
+          );
+
+          originData.value = [...selectedList.value];
+        }
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+</script>
+
+<script>
+  export default {
+    name: 'SohelpTableSelect'
+  };
+</script>
+
+<style scoped lang="scss">
+  .sohelp-table-select {
+    :deep(.el-input-group__append) {
+      padding: 0px !important;
+
+      .el-icon {
+        height: 100%;
+        padding: 0 10px;
+      }
+    }
+  }
+  .sohelp-table-select-trigger {
+    cursor: pointer;
+    display: inline-block;
+    width: 100%;
+    border-radius: var(--el-border-radius-base);
+    background: #fff;
+  }
+
+  .sohelp-table-select-body {
+    display: flex;
+    height: 600px;
+    border: 1px solid #eee;
+
+    .left-panel {
+      width: 250px;
+      padding: 10px;
+      border-right: 1px solid #eee;
+      display: flex;
+      flex-direction: column;
+
+      :deep(.el-tree) {
+        min-width: 100%;
+        display: inline-block;
+      }
+    }
+
+    .middle-panel {
+      flex: 1;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+
+      .filter-form {
+        margin-bottom: 10px;
+      }
+
+      .user-grid {
+        flex: 1;
+        overflow: hidden;
+      }
+    }
+
+    .right-panel {
+      width: 200px;
+      border-left: 1px solid #eee;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      background-color: #f8f8f8;
+
+      .selected-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+        font-size: 14px;
+        font-weight: bold;
+      }
+
+      .selected-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px;
+        background: #fff;
+        margin-bottom: 5px;
+        border-radius: 4px;
+        font-size: 13px;
+
+        .close-icon {
+          cursor: pointer;
+          color: #999;
+          &:hover {
+            color: #f56c6c;
+          }
+        }
+      }
+    }
+  }
+
+  .mb-10 {
+    margin-bottom: 10px;
+  }
+</style>

package/sohelp-vform-eleplus/render.es.js

@@ -63893,7 +63893,6 @@ const _sfc_main$C = {
   },
   methods: {
     toolbarClick(event) {
-      console.log("toolbarClick", event);
       this.$emit("toolbarButtonClick", event);
     },
     onCheckboxChange(event) {

package/sohelp-vxe-table/index.vue

@@ -18,12 +18,7 @@
       :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 v-model:currentPage="page" v-model:pageSize="limit" :total="datasource.total" @page-change="reload">
     </vxe-pager>
   </vxe-table>
 </template>
@@ -32,7 +27,7 @@
   import { EleMessage } from '@/components/ele-admin-plus/components';
   import { DragOutlined } from '../sohelp-icon-select/icons';
   import Sortable from 'sortablejs';
-  import {moduleCache} from  '../cache/ModuleCache';
+  import { moduleCache } from '../cache/ModuleCache';
 
   export default {
     name: 'SohelpVxeTable',
@@ -82,18 +77,18 @@
           header: property.label,
           width: property.with || 100,
           edit: property.edit,
-          editor:property.editor
+          editor: property.editor
         };
       };
 
       /***初始化网格列表配置**/
       const initProTableConfiguration = () => {
-        props.drag && rowDrop()
+        props.drag && rowDrop();
       };
 
       /**获取列表配置*/
       moduleCache.getGrid(props.refid).then((data) => {
-        if(!data){
+        if (!data) {
           return;
         }
         Object.assign(sohelpConfig, { ...data });
@@ -103,7 +98,7 @@
         });
         /**添加操作列**/
         columns.push({
-          columnKey: 'action',
+          field: 'action',
           label: '操作',
           width: 200,
           align: 'center',
@@ -120,39 +115,32 @@
           Object.assign(datasource, { total: 0, results: [] });
           return;
         }
-        const res = await SohelpHttp.get(
-          props.url || sohelpConfig.requestValue,
-          {
-            page,
-            limit,
-            ...props.where
-          }
-        ).catch((e) => {
+        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{
+      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 }) => {}
-            }
-          );
+          sortable.value = Sortable.create(xGTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
+            handle: '.drag-btn',
+            onEnd: ({ newIndex, oldIndex }) => {}
+          });
         });
       };
 

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

@@ -26,7 +26,7 @@
   const formValue = ref(null);
   const entityFormRef = ref(null);
 
-  const refid = ref(props.data.refid.split('!')[0]);
+  const refid = ref(props.data?.refid?.split('!')[0]);
 
   const load = async () => {
     const { id, refid } = props.data || {};

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

@@ -1,5 +1,4 @@
 <template>
-  fff
   <sohelp-vxe-grid
     style="padding-top: 10px"
     url="/engine/web/workflow/getTasks"

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

@@ -25,8 +25,8 @@
 
         <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 == 1">办理人:</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>
@@ -34,8 +34,8 @@
           </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 === 1">办理意见:</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>
 

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

@@ -1,5 +1,10 @@
 <template>
   <div v-loading="loading" class="workflow-wrap">
+    <div class="tips">
+      <span class="tips-item done">已通过</span>
+      <span class="tips-item do">办理中</span>
+      <span class="tips-item undo">未处理</span>
+    </div>
     <draw-box class="workflow-scroll">
       <sohelp-workflow class="workflow" ref="workflowRef" v-model="workflow.nodeConfig" v-if="workflow?.nodeConfig" />
     </draw-box>
@@ -65,4 +70,27 @@
     align-items: center;
     margin: 0 20px 20px auto;
   }
+  .tips {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    margin: 0 20px 20px auto;
+    .tips-item {
+      padding: 2px 10px;
+      height: 20px;
+      border-radius: 6px;
+      line-height: 20px;
+    }
+    .tips-item.done {
+      border: 3px solid #409eff;
+    }
+    .tips-item.do {
+      border: 3px dashed #e6a23c;
+    }
+    .tips-item.undo {
+      border: 3px solid #ccc;
+    }
+  }
 </style>