centaline-data-driven-v3 0.1.58 → 0.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "centaline-data-driven-v3",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "private": false,
   "description": "centaline-data-driven-v3",
   "main": "dist/centaline-data-driven-v3.umd.js",

package/src/components/app/FormList.vue

@@ -52,18 +52,28 @@
                                         <span>操作</span>
                                     </th>
                                     <template v-for="(column, i) in model.rows[0].field" :key="i">
-                                        <th v-if="column.show" class="ct-th" :rowspan="column.rowspan"
-                                            :colspan="column.colspan">
+                                        <th v-if="column.show" class="ct-th" :class="column.sortAction"
+                                            :rowspan="column.rowspan" :colspan="column.colspan">
                                             <span>{{ column.controlLabel }}</span>
+                                            <span class="caret-wrapper" v-if="column.autoSearch"
+                                                @click="toSort($event, column)"
+                                                @contextmenu.prevent="clearSort($event, column)">
+                                                <i class="sort-caret ascending"
+                                                    @click.left="toSort($event, column, 'asc')"
+                                                    @contextmenu.prevent="clearSort($event, column)"></i>
+                                                <i class="sort-caret descending"
+                                                    @click.left="toSort($event, column, 'desc')"
+                                                    @contextmenu.prevent="clearSort($event, column)"></i>
+                                            </span>
                                         </th>
                                     </template>
                                 </tr>
                             </thead>
                             <!--表体-->
                             <tbody>
-                                <template v-if="model.tableData.length > 0">
-                                    <tr v-for="(row, rowindex) in model.tableData" :key="rowindex"
-                                        :ref="'rows.' + rowindex" class="ct-tr">
+                                <template v-if="renderList.length > 0">
+                                    <tr v-for="(row, rowindex) in renderList" :key="rowindex" :ref="'rows.' + rowindex"
+                                        class="ct-tr">
                                         <template
                                             v-if="model.rows[0].edit || model.rows[0].delete || (model.buttons.length > 0 && model.buttonsShow.length > 0)">
                                             <td class="ct-td td-edit" align="center" valign="middle">
@@ -74,7 +84,7 @@
 
                                                 <van-image v-if="row.delete && !row.isSet"
                                                     style="cursor: pointer;margin-right: 5px;" width="20" height="20"
-                                                    @click="deleteRow(rowindex, row.$sourceIndex)"
+                                                    @click="deleteRow(row.$sourceIndex)"
                                                     :src="util.getAssetsImage('btn_del.png')" />
                                             </td>
                                             <template v-for="(b, vi) in model.buttons" :key="vi">
@@ -157,6 +167,8 @@ const Fields = ref()
 const colspansum = ref(0)
 const sumsList = ref([])
 const itemKey = ref(0)
+const renderList = ref([])
+const sortInfo = ref(null)
 const dragOptions = {
     animation: 200,
     group: model.value.fieldName1,
@@ -193,6 +205,26 @@ function Init() {
             colspansum.value++;
         }
     }
+    refreshRenderList()
+
+}
+function refreshRenderList() {
+    // 拷贝一份全新数组，防止sort原地修改原始数据
+    const copyArr = [...model.value.tableData]
+    if (sortInfo.value) {
+        const { prop, order } = sortInfo.value
+        copyArr.sort((a, b) => {
+            const aValue = getLableShow(a[prop])
+            const bValue = getLableShow(b[prop])
+            if (typeof a === 'number') {
+                return order === 'asc' ? aValue - bValue : bValue - aValue
+            } else {
+                const res = aValue.localeCompare(bValue, 'zh-CN')
+                return order === 'asc' ? res : -res
+            }
+        })
+    }
+    renderList.value = copyArr
 }
 function popupSearchListHandle(field) {
     if (field.isSearchPageWithList) {
@@ -212,18 +244,24 @@ function addRow() {
         return
     }
     FormList.addRow(model.value);
+    refreshRenderList()
 }
 //修改
 function editRow(index) {
     FormList.editRow(index, model.value);
+    refreshRenderList()
 }
 //删除
-function deleteRow(index, sourceIndex) {
+function deleteRow(sourceIndex) {
     FormList.deleteRow(sourceIndex, model.value, () => {
-        model.value.tableData.splice(index, 1);
+        const targetIndex = model.value.tableData.findIndex(v => v.$sourceIndex === sourceIndex)
+        if (targetIndex > -1) {
+            model.value.tableData.splice(targetIndex, 1)
+        }
         model.value.onChanged = model.value.formListChange;
         model.value.createText = '';
         model.value.disabled = false;
+        refreshRenderList()
         emit('change', model.value);
     });
 }
@@ -350,13 +388,18 @@ function getSummaries() {
 function rolRouterCellClickHandler(routerKey, rowindex, sourceIndex) {
     if (routerKey == 'edit') {
         FormList.editRow(sourceIndex, model.value);
+        refreshRenderList()
     }
     else if (routerKey == 'delete') {
         FormList.deleteRow(sourceIndex, model.value, () => {
-            model.value.tableData.splice(rowindex, 1);
+            const targetIndex = model.value.tableData.findIndex(v => v.$sourceIndex === sourceIndex)
+            if (targetIndex > -1) {
+                model.value.tableData.splice(targetIndex, 1)
+            }
             model.value.onChanged = model.value.formListChange;
             model.value.createText = '';
             model.value.disabled = false;
+            refreshRenderList()
             emit('change', model.value);
         });
     } else {
@@ -412,6 +455,107 @@ function delRow(row) {
 function deleteAll() {
     FormList.deleteAll(model.value);
 }
+function toSort(ev, col, action) {
+    model.value.rows[0].field.forEach((v1) => {
+        v1.sortAction = "";
+    });
+    if (sortInfo.value && sortInfo.value.prop == col.fieldName1 && sortInfo.value.order == action) {
+        sortInfo.value = null
+    }
+    else {
+        sortInfo.value = {
+            prop: col.fieldName1,
+            order: action
+        }
+        col.sortAction = action;
+    }
+    refreshRenderList()
+    ev.cancelBubble = true;
+    ev.stopPropagation();
+}
+function getLableShow(data) {
+    let labelShow = data.name1;
+    if (!labelShow) {
+        labelShow = data.code1;
+    }
+    if (labelShow && data.unitName1) {
+        labelShow = labelShow + data.unitName1;
+    }
+    switch (data.controlType) {
+        case Enum.ControlType.Label:
+            if (data.value) {
+                labelShow = data.value;
+            }
+            break;
+        case Enum.ControlType.MultiSelectNoSearch:
+        case Enum.ControlType.MultiSelectWithSearch:
+            labelShow = '';
+            if (data.code1) {
+                JSON.parse(data.code1).forEach((op) => {
+                    if (op.flagDeleted !== 1) {
+                        if (op.flagDeleted != undefined && op.flagDeleted == true) {
+                        }
+                        else {
+                            labelShow += op['name'] + '   ';
+                        }
+                    }
+                });
+            }
+            break;
+        case Enum.ControlType.PhoneNumberText:
+        case Enum.ControlType.EmailText:
+            if (data.code2) {
+                labelShow = data.name1 + data.code2;
+            }
+            break;
+        case Enum.ControlType.NumericRange:
+            if (data.code1 && data.code2) {
+            }
+            else if (data.code1) {
+                labelShow = data.code1 + (data.unitName1 ? data.unitName1 : '') + '以上';
+            }
+            else if (data.code2) {
+                labelShow = data.code2 + (data.unitName1 ? data.unitName1 : '') + '以下';
+            }
+            break;
+        case Enum.ControlType.DateTimeRange:
+        case Enum.ControlType.DateRange:
+            if (data.code1 && data.code2) {
+            }
+            else if (data.code1) {
+                labelShow = data.code1 + (data.unitName1 ? data.unitName1 : '') + '以后';
+            }
+            else if (data.code2) {
+                labelShow = data.code2 + (data.unitName1 ? data.unitName1 : '') + '以前';
+            }
+            break;
+        case Enum.ControlType.Time:
+        case Enum.ControlType.TimeRange:
+            if (data.flagrange) {
+                if (data.code1 && data.code2) {
+                    labelShow = data.code1 + '-' + data.code2;
+                }
+            }
+            else {
+                if (data.code1) {
+                    labelShow = data.code1
+                }
+            }
+            break;
+        case Enum.ControlType.CheckBoxList:
+            labelShow = data.getCheckedName();;
+            break;
+        case Enum.ControlType.Switch:
+            labelShow = data.value ? '开启' : '关闭';
+            break;
+        case Enum.ControlType.CheckBox:
+            labelShow = data.value ? '是' : '否';
+            break;
+        default:
+            break;
+    }
+    return labelShow;
+}
 defineExpose({
     model
 })
@@ -494,4 +638,45 @@ th.th-edit {
     z-index: 1;
     background-color: #ffffff;
 }
+
+.ct-th>.caret-wrapper {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    height: 34px;
+    width: 10px;
+    vertical-align: middle;
+    cursor: pointer;
+    overflow: initial;
+    position: relative;
+}
+
+.ct-th>.caret-wrapper>.sort-caret {
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    position: absolute;
+    left: 7px;
+}
+
+.ct-th>.caret-wrapper>.sort-caret.ascending {
+    border-bottom-color: var(--centalinePlaceholder);
+    top: 5px;
+}
+
+.ct-th>.caret-wrapper>.sort-caret.descending {
+    border-top-color: var(--centalinePlaceholder);
+    bottom: 7px;
+}
+
+
+.ct-th.asc>.caret-wrapper>.sort-caret.ascending {
+    border-bottom-color: #409eff;
+    top: 5px;
+}
+
+.ct-th.desc>.caret-wrapper>.sort-caret.descending {
+    border-top-color: #409eff;
+    bottom: 7px;
+}
 </style>

package/src/components/web/File.vue

@@ -166,7 +166,7 @@
   </template>
 </template>
 <script setup lang="ts">
-import { ref, nextTick, computed, onBeforeUnmount } from 'vue'
+import { ref, nextTick, computed, onBeforeUnmount,inject ,watch } from 'vue'
 import { ElMessage, UploadProps } from 'element-plus'
 import common from '../../utils/common'
 import { changeHandler } from '../../utils/mixins';
@@ -623,12 +623,31 @@ function addClass(el, className) {
   newClassName.push(className);
   el.className = newClassName.join(" ");
 }
+ const injectedViewerFileToggle = inject('onViewerFileToggle')
 
 
 //预览文件
 function viewerfile(file) {
-  File.viewerfile(file, model.value)
+
+  File.viewerfile(file, model.value, function (MediaAlbum, groupIndex, index) {
+    injectedViewerFileToggle(true, MediaAlbum, groupIndex, index);
+  })
 }
+ const ChangeFileList = inject('ChangeFileList')
+
+watch(
+  () => model.value?.fileList,  // 直接监听 fileList 数组
+  (newFileList) => {
+    nextTick(() => {
+      if (model.value?.mediaViewPageType === 3) {
+        const { album } = File.buildMediaAlbum(model.value);
+        const MediaAlbum = [album];
+        ChangeFileList(MediaAlbum, 0, 0);
+      }
+    });
+  },
+  { deep: true }  // 深度监听，以便捕获数组内元素属性变化（与原 JSON.stringify 效果一致）
+);
 
 function PasteUpload(event) {
   if (!model.value.locked && !model.value.disableUpload) {

package/src/components/web/Form.vue

@@ -1,7 +1,7 @@
 <template>
     <div ref="refForm" v-loading="loading"
         :style="{ width: pageWidth ? pageWidth + 'px' : '100%', margin: 'auto', 'min-height': minHeight }">
-        <div style="display: flex; width: 100%;">
+        <div style="display: flex; width: 100%;" ref="leftContainerRef">
             <div style="flex: 1; min-width: 0;">
                 <div v-if="model !== null && !loading" class="ct-form" :class="{ 'domDisabled': model.pageDisabled }"
                     :style="{ margin: openType != 'tree' ? '10px' : '0px' }">
@@ -194,9 +194,22 @@
                             @hideAI="AIToggle" :isVisible="showAI" :tablewidth="model.aiAttr.width">
 
                         </AIChat>
+
+
                     </div>
                 </div>
             </template>
+            <div :style="{ flex: ' 0 0 ' + 650 + 'px', position: 'sticky', top: '0', 'box-shadow': '-10px 0 5px -9px rgba(0, 0, 0, 0.3)' }"
+                v-if="showViewerFile">
+                <div
+                    :style="{ position: 'sticky', top: '0', height: (dialogHeight) + 'px', overflow: 'hidden', 'border-bottom-right-radius': '4px' }">
+                    <ViewerFile :MediaAlbum="media.MediaAlbum" :groupIndex="media.groupIndex" :index="media.index"
+                        :key="media.random" :flagLeft="media.flagLeft" @closeViewerFile="ViewerFileToggle(false)"
+                        @ViewerFilechangeIndex="ViewerFilechangeIndex">
+                    </ViewerFile>
+
+                </div>
+            </div>
 
         </div>
         <template v-if="model?.aiAttr?.showAI && !showAI">
@@ -205,13 +218,14 @@
                     :alt="model?.aiRouter.controlLabel" :title="model?.aiRouter.controlLabel">
             </div>
         </template>
+
         <div style="min-height:200px" v-if="loading"></div>
         <iframe :src="downloadUrl" style="height:0px;width:0px;border-width: 0px;display: none;"> </iframe>
 
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, nextTick, onUpdated, onDeactivated, onMounted, onBeforeUnmount,provide } from 'vue'
+import { ref, nextTick, onUpdated, onDeactivated, onMounted, onBeforeUnmount, provide } from 'vue'
 import { RouterClickHandler } from '../../utils/mixins';
 import common from '../../utils/common'
 import Form from '../../loader/src/Form'
@@ -220,7 +234,9 @@ import { useRouter } from 'vue-router';
 import util from '../../utils/pub-use'
 import Enum from '../../utils/Enum';
 import AIChat from '../web/AIChat.vue';
-const emit = defineEmits(['loaded', 'failLoad', 'submit', 'AIToggle'])
+import ViewerFile from '../web/ViewerFile.vue';
+
+const emit = defineEmits(['loaded', 'failLoad', 'submit', 'ToggleWdth'])
 const props = defineProps({
     api: String,
     vmodel: Object,
@@ -283,6 +299,14 @@ const props = defineProps({
     dialoWidth: Number,
     listHeight: Number,
 })
+const media = ref({
+    MediaAlbum: [],
+    groupIndex: 0,
+    index: 0,
+    flagLeft: false,
+    random: Math.random()
+})
+const showViewerFile = ref(false)
 const itemKey = ref(1)
 const router = useRouter()
 const loading = ref(true)
@@ -292,6 +316,7 @@ const isScroll = ref(false)
 const isWebScroll = ref(false)
 const Fields = ref()
 const refForm = ref()
+
 const downloadUrl = ref('')
 const minHeight = ref('auto')
 const showAI = ref(false);
@@ -366,11 +391,11 @@ function init() {
         }
         if (typeof props.api !== 'undefined') {
             //根据接口获取数据
-            Form.loadFormApi(props.api, load, props.apiParam, failLoad, false,props.appRootUrl);
+            Form.loadFormApi(props.api, load, props.apiParam, failLoad, false, props.appRootUrl);
         }
         else if (typeof props.source !== 'undefined') {
             //根据modelFrom获取数据
-            load(Form.loadFromModel(props.source,false,props.appRootUrl));
+            load(Form.loadFromModel(props.source, false, props.appRootUrl));
         }
         else if (props.vmodel) {
             load(props.vmodel);
@@ -764,20 +789,223 @@ function setCss() {
 
 function AIToggle() {
     showAI.value = !showAI.value;
+    if (showAI.value) {
+        if (showViewerFile.value) {
+            ViewerFileToggle(false, [], 0, 0);
+        }
+    }
+
     let width = model.value.aiAttr.width;
     dialogHeight.value = (props.dialogHeight || (window.innerHeight - 60));
-    emit('AIToggle', (showAI.value ? width : -width));
+    emit('ToggleWdth', (showAI.value ? width : -width));
+}
+const getVisibleDimensions  = () => {
+    if (!refForm.value) return { width: 0, height: 0 };
+    const rect = refForm.value.getBoundingClientRect();
+    const viewWidth = window.innerWidth || document.documentElement.clientWidth;
+    const viewHeight = window.innerHeight || document.documentElement.clientHeight;
+    
+    const visibleTop = Math.max(0, rect.top);
+    const visibleBottom = Math.min(viewHeight, rect.bottom);
+    const visibleLeft = Math.max(0, rect.left);
+    const visibleRight = Math.min(viewWidth, rect.right);
+    
+    return {
+        width: Math.max(0, visibleRight - visibleLeft),
+        height: Math.max(0, visibleBottom - visibleTop)-60
+    };
+};
+function ViewerFileToggle(isOpen, mediaAlbum, groupIndex, index) {
+    if (isOpen) {
+        media.value = { MediaAlbum: mediaAlbum, groupIndex, index, flagLeft: false, random: Math.random() };
+        if (showAI.value) {
+            AIToggle();
+        }
+    }
+    if (showViewerFile.value != isOpen) {
+        showViewerFile.value = isOpen;
+        let width = 650;
+        dialogHeight.value = getVisibleDimensions().height || parseInt(minHeight.value) || window.innerHeight - 60;
+        emit('ToggleWdth', (showViewerFile.value ? width : -width));
+    }
+}
+provide('onViewerFileToggle', ViewerFileToggle)
+function ViewerFilechangeIndex({ groupIndex, index }) {
+    if (media.value) {
+        media.value.groupIndex = groupIndex;
+        media.value.index = index;
+    }
+}
+
+function ChangeFileList(mediaAlbum, groupIndex, index) {
+    if (!showViewerFile.value) {
+        return;
+    } else {
+        if (mediaAlbum[0].medias.length <= 0) {
+            ViewerFileToggle(false);
+            return;
+        }
+    }
+    const oldMedia = media.value;
+    let newGroupIndex, newIndex, shouldShow;
+
+    // 情况1：没有旧记录，直接用传入索引，无效则找第一张
+    if (!oldMedia || !oldMedia.MediaAlbum) {
+        if (validatePosition(mediaAlbum, groupIndex, index)) {
+            newGroupIndex = groupIndex;
+            newIndex = index;
+            shouldShow = true;
+        } else {
+            const first = findFirstValidPosition(mediaAlbum);
+            if (first) {
+                newGroupIndex = first.groupIndex;
+                newIndex = first.index;
+                shouldShow = true;
+            } else {
+                // 整个相册无图，直接关闭查看器，但依然要更新 MediaAlbum
+                newGroupIndex = 0;
+                newIndex = 0;
+                shouldShow = false;
+            }
+        }
+    } else {
+        // 取出旧图片
+        const oldAlbumList = oldMedia.MediaAlbum;
+        const oldGroup = oldAlbumList && oldAlbumList[oldMedia.groupIndex];
+        const oldFile = oldGroup && oldGroup.medias && oldGroup.medias[oldMedia.index];
+
+        if (oldFile) {
+            // 尝试在新相册中定位旧图
+            const found = findFileInAlbum(mediaAlbum, oldFile);
+            if (found) {
+                // 找到了，移动到新位置
+                newGroupIndex = found.groupIndex;
+                newIndex = found.index;
+                shouldShow = true;
+            } else {
+                // 旧图被删，回退
+                const fallback = fallbackPosition(mediaAlbum, oldMedia.groupIndex, oldMedia.index);
+                newGroupIndex = fallback.groupIndex;
+                newIndex = fallback.index;
+                shouldShow = fallback.show;
+            }
+        } else {
+            // 旧记录无效，同样回退
+            const fallback = fallbackPosition(mediaAlbum, oldMedia.groupIndex, oldMedia.index);
+            newGroupIndex = fallback.groupIndex;
+            newIndex = fallback.index;
+            shouldShow = fallback.show;
+        }
+    }
+    ViewerFileToggle(showViewerFile.value, mediaAlbum, newGroupIndex, newIndex);
 }
+provide('ChangeFileList', ChangeFileList)
 
+function validatePosition(albumList, gIdx, idx) {
+    if (!albumList || gIdx < 0 || gIdx >= albumList.length) {
+        return false;
+    }
+    var group = albumList[gIdx];
+    var medias = group && group.medias;
+    return medias && idx >= 0 && idx < medias.length;
+}
+function findFirstValidPosition(albumList) {
+    if (!albumList) {
+        return null;
+    }
+    for (var g = 0; g < albumList.length; g++) {
+        var group = albumList[g];
+        var medias = group && group.medias;
+        if (medias && medias.length > 0) {
+            return { groupIndex: g, index: 0 };
+        }
+    }
+    return null;
+}
+function findFileInAlbum(albumList, targetFile) {
+    if (!albumList) {
+        return null;
+    }
+    // 先按引用查找
+    for (var g = 0; g < albumList.length; g++) {
+        var medias = albumList[g].medias;
+        if (!medias) continue;
+        for (var i = 0; i < medias.length; i++) {
+            if (medias[i] === targetFile) {
+                return { groupIndex: g, index: i };
+            }
+        }
+    }
+    // 如果引用匹配不到，尝试用 id（如果存在）
+    if (targetFile && targetFile.id != null) {
+        for (var g2 = 0; g2 < albumList.length; g2++) {
+            var medias2 = albumList[g2].medias;
+            if (!medias2) continue;
+            for (var i2 = 0; i2 < medias2.length; i2++) {
+                if (medias2[i2].id === targetFile.id) {
+                    return { groupIndex: g2, index: i2 };
+                }
+            }
+        }
+    }
+    return null;
+}
+function fallbackPosition(albumList, prefGroup, prefIndex) {
+    if (!albumList || albumList.length === 0) {
+        return { groupIndex: 0, index: 0, show: false };
+    }
+
+    // 确保参考相册索引在有效范围内
+    var gIdx = Math.min(prefGroup, albumList.length - 1);
+    var group = albumList[gIdx];
+    var medias = group && group.medias ? group.medias : [];
+
+    // 1. 同相册内回退
+    if (medias.length > 0) {
+        var newIdx;
+        if (prefIndex > 0 && prefIndex <= medias.length) {
+            // 优先上一张
+            newIdx = prefIndex - 1;
+        } else if (prefIndex === 0 && medias.length > 1) {
+            // 第一张被删了，取下一张（索引 1）
+            newIdx = 1;
+        } else {
+            // 只剩这一张，还是它
+            newIdx = 0;
+        }
+        return { groupIndex: gIdx, index: newIdx, show: true };
+    }
+
+    // 2. 向前找非空相册，取最后一张
+    for (var g = gIdx - 1; g >= 0; g--) {
+        var m = albumList[g].medias || [];
+        if (m.length > 0) {
+            return { groupIndex: g, index: m.length - 1, show: true };
+        }
+    }
+
+    // 3. 向后找非空相册，取第一张
+    for (var g2 = gIdx + 1; g2 < albumList.length; g2++) {
+        var m2 = albumList[g2].medias || [];
+        if (m2.length > 0) {
+            return { groupIndex: g2, index: 0, show: true };
+        }
+    }
+
+    // 整个相册没有任何图片了
+    return { groupIndex: 0, index: 0, show: false };
+}
 
 function buttonsWidth() {
     let rtn = '100%';
     if (showAI.value) {
-        rtn = props.dialoWidth - model.value.aiAttr.width - 4 + 'px';
+        rtn = (props.dialoWidth||getVisibleDimensions().width) - model.value.aiAttr.width - 4 + 'px';
+    }
+    else if (showViewerFile.value) {
+        rtn = (props.dialoWidth||getVisibleDimensions().width) - 650 - 4 + 'px';
     }
     else if (props.pageWidth) {
         rtn = props.pageWidth + 'px';
-
     }
 
     return rtn;