syntec3-0-ui-components-test 1.0.0

package/src/utils/summation.js

@@ -0,0 +1,77 @@
+import i18n from './i18n';
+
+// 获取翻译
+const t = i18n.global.t;
+// 千分位
+const thousandth = new Intl.NumberFormat('en-US', { maximumFractionDigits: 10 });
+
+const summation = {
+  getSummaries(param, customFieldsList = [], fixedField = []){
+    const { columns, data } = param;
+    const sums = [t('sum')];
+    columns.forEach((column, index) => {
+      const dataField = customFieldsList.find(res=>{
+        // 后续通过后端的isSupportSummary 值来判断公式是否有合计
+        return Number(column.property) === res.docCustomId && (res.fieldTypeId === 2 || ( res.fieldTypeId === 9 && res.dmlDocCustomFormulaSettingsDTO.isSupportSummary ));
+
+      });
+      // 自定义字段
+      if ( dataField ) {
+        const summary = this.findWriteValueByDocCustomId(dataField.docCustomId, data);
+        sums[index] = summary.reduce((prev, curr, cindex) => {
+          const value = Number(curr);
+          if (!isNaN(value)) {
+            if( cindex === summary.length - 1 ){
+              return thousandth.format(prev + curr);
+            }else{
+              return prev + curr;
+            }
+          
+          } else {
+            if( cindex === summary.length - 1 ){
+              return thousandth.format(prev);
+            }else{
+              return prev ;
+            }
+          }
+        }, 0);
+      }
+       // 固定字段
+      if( fixedField.includes(column.property) ){
+        const values = data.map((item) => Number(item[column.property]));
+        sums[index] = values.reduce((prev, curr, cindex) => {
+          const value = Number(curr);
+          if (!isNaN(value)) {
+            if( cindex === values.length - 1 ){
+              return thousandth.format(prev + curr);
+            }else{
+              return prev + curr;
+            }
+          } else {
+           if( cindex === values.length - 1 ){
+              return thousandth.format(prev);
+            }else{
+              return prev ;
+            }
+          }
+        }, 0);
+      }
+
+    });
+    return sums;
+  },
+  findWriteValueByDocCustomId(docCustomId, data){
+    const summary = [];
+    for (const item of data) {
+        if (item.docCustomFieldAndValues && item.docCustomFieldAndValues.length > 0) {
+            const found = item.docCustomFieldAndValues.find(adam => adam.docCustomId === docCustomId);
+            if (found) {
+              summary.push(Number(found.writeValue.replace(/,/g, '')));
+            }
+        }
+    }
+    return summary; // 未找到返回 null
+  },
+};
+
+export default summation;

package/src/utils/tableWidth.js

@@ -0,0 +1,29 @@
+const getTextWidth = (text) => {
+  const span = document.createElement('span');
+  span.style.visibility = 'hidden';
+  span.style.position = 'absolute';
+  span.style.top = '-9999px';
+  span.style.whiteSpace = 'nowrap';
+  span.style.fontSize = '16px';
+  span.innerText = text;
+  document.body.appendChild(span);
+  const width = span.offsetWidth + 16;
+  document.body.removeChild(span);
+  return width;
+};
+export function getColumnWidth(label, prop, tableData, minWidth = 80) {
+  //label表头名称
+  //prop对应的内容
+  //tableData表格数据
+  //minWidth最小宽度
+  const padding = 10; // 列内边距
+  let arr = tableData.map((item) => item[prop]);
+  arr.push(label); //拼接内容和表头数据
+  const contentWidths = arr.map((item) => {
+    const value = item ? String(item) : '';
+    const textWidth = getTextWidth(value);
+    return textWidth + padding > 300 ? 300 : textWidth + padding;
+  });
+  const maxWidth = Math.max(...contentWidths);
+  return Math.max(minWidth, maxWidth);
+}

package/src/utils/toolFun.js

@@ -0,0 +1,93 @@
+export default {
+  /**
+   * 转化拿到Excel单元格输入的日期值
+   * @param {*} numb 值
+   * @param {*} format 年月日分隔符
+   */
+  formatDateOfExcelIn: function (numb, format = '/') {
+    if (typeof numb !== 'number') {
+      return numb;
+    }
+    //参数numb是间隔天数，format是自定义的日期分隔符
+    //打印出来的结果是44563，表示1900年1月1日到当前日期的天数
+    const getDay = numb - 1;
+    const t = Math.round((getDay - Math.floor(getDay)) * 24 * 60 * 60);
+    //当导入的excel日期中包含了时分秒，t则表示小数点后面的时间
+    const time = new Date(1900, 0, getDay, 0, 0, t);
+    //getDay是从1900开始计算的，因此new Date()的第一个参数是1900
+    const year = time.getFullYear();
+    const month = time.getMonth() + 1;
+    const date = time.getDate();
+    const hours = time.getHours();
+    const minutes = time.getMinutes();
+    const seconds = time.getSeconds();
+    return year + format + (month < 10 ? '0' + month : month) + format + (date < 10 ? '0' + date : date) + ' ' + (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
+  },
+  /**
+   * 测试log函数
+   * @param {*} val log内容
+   */
+  logFun: function (val) {
+    console.log('log inner is:', val);
+  },
+  /**
+   * 根据传入宽度字符串判断范围返回合适值
+   * @param {string} width 数字型宽度字符串
+   * @returns 返回最终宽度字符串
+   */
+  getTableColumnMinWidth: function (width = '120') {
+    let wid = width;
+    if (width.includes('px')) {
+      wid = width.replace('px', '');
+    }
+    if (Number(wid) <= 130) {
+      return '120';
+    }
+    if (Number(wid) > 130 && Number(wid) < 300) {
+      return wid;
+    }
+    return '300';
+  },
+
+  /**
+   * 动态展示表头宽度
+   * @param {*} param0 
+   * @returns 
+   */
+  tableHeadLength: function ({ column }) {
+    try {
+      let l = column.label?.length;
+      let f = 16;
+      let widthNum = f * (l + 2); //加上一个文字长度
+      if (widthNum <= 130) {
+        column.minWidth = 130;
+      } else if (widthNum > 130 && widthNum < 300) {
+        column.minWidth = widthNum;
+      } else {
+        column.minWidth = 300;
+      }
+      return ('div', { class: 'table-head', style: { width: '100%' } }, [column.label]);
+    } catch (error) {
+      console.log('error:', error);
+    }
+  },
+  /**
+   * 判断输入内容是否是url
+   * @param {*} url 输入值
+   * @returns 
+   */
+  isValidURL: function (url) {
+    try {
+      // 使用URL对象进行初步校验
+      new URL(url);
+      return true;
+    } catch (_) {
+      // 使用正则表达式进行进一步校验
+      const urlPattern = /^(https?:\/\/)?(www\.)?[a-zA-Z0-9-.]+\.[a-zA-Z]{2,6}(\/[a-zA-Z0-9-._~:/?#@!$&'()*+,;=]*)?$/;
+      if (urlPattern.test(url)) {
+        return true;
+      }
+      return false;  
+    }
+  },
+};

package/src/views/productionWorkOrder/components/columnConfig.vue

@@ -0,0 +1,242 @@
+<template>
+  <el-dropdown size="default" type="primary" :hide-on-click="false" trigger="click" style="margin-left: 15px">
+    <el-button type="primary" color="#125088">
+      {{ t('columnConfiguration') }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+    </el-button>
+    <template #dropdown>
+      <!-- filter 禁止拖拽 -->
+      <div style="display: flex">
+        <div>
+          <el-space v-if="parentLabel" direction="vertical">
+            <el-text tag="b">{{ parentLabel }}</el-text>
+          </el-space>
+          <!-- 父表头 -->
+          <el-dropdown-menu style="max-height: 400px">
+            <VueDraggable
+              ref="el"
+              v-model="parentDraggableItems"
+              :handle="handle"
+              filter=".disabled-color"
+              @end="parentSaveData"
+              @move="(evt) => onDragMove(evt, parentDraggableItems)"
+            >
+              <el-dropdown-item v-for="item in parentDraggableItems" :key="item.value" :command="item">
+                <v-icon
+                  :class="['mdi mdi-drag dragindicator', dynamicClasses(item)]"
+                  style="margin-right: 10px"
+                ></v-icon>
+                <el-checkbox
+                  v-if="isParentCheckbox"
+                  v-model="item.hideable"
+                  :label="item.customizeFields ? item.text : $t(item.text)"
+                  size="large"
+                  :disabled="item.disabled"
+                  @change="parentSaveData(item)"
+                />
+                <span v-else :class="dynamicClasses(item)" style="margin-right: 10px">{{
+                  item.customizeFields ? item.text : $t(item.text)
+                }}</span>
+                <v-icon
+                  v-if="!item.freeze"
+                  class="mdi mdi-lock-open-variant"
+                  style="margin-left: 10px"
+                  @click="isFrozen(item, parentDraggableItems, 'parentSaveData')"
+                ></v-icon>
+                <v-icon
+                  v-if="item.freeze"
+                  class="mdi mdi-lock"
+                  style="margin-left: 10px"
+                  @click="isFrozen(item, parentDraggableItems, 'parentSaveData')"
+                ></v-icon>
+              </el-dropdown-item>
+            </VueDraggable>
+          </el-dropdown-menu>
+        </div>
+        <div v-if="isChild">
+          <el-space v-if="childLabel" direction="vertical">
+            <el-text tag="b">{{ childLabel }}</el-text>
+          </el-space>
+          <!-- 子表头 -->
+          <el-dropdown-menu style="max-height: 400px">
+            <VueDraggable
+              ref="el"
+              v-model="childDraggableItems"
+              :handle="handle"
+              filter=".disabled-color"
+              @end="childSaveData"
+              @move="(evt) => onDragMove(evt, childDraggableItems)"
+            >
+              <el-dropdown-item v-for="item in childDraggableItems" :key="item.value" :command="item">
+                <v-icon
+                  :class="['mdi mdi-drag dragindicator', dynamicClasses(item)]"
+                  style="margin-right: 10px"
+                ></v-icon>
+                <el-checkbox
+                  v-if="isChildCheckbox"
+                  v-model="item.hideable"
+                  :label="item.customizeFields ? item.text : $t(item.text)"
+                  size="large"
+                  :disabled="item.disabled"
+                  @change="childSaveData(item)"
+                />
+                <span v-else :class="dynamicClasses(item)" style="margin-right: 10px">{{
+                  item.customizeFields ? item.text : $t(item.text)
+                }}</span>
+                <v-icon
+                  v-if="!item.freeze"
+                  class="mdi mdi-lock-open-variant"
+                  style="margin-left: 10px"
+                  @click="isFrozen(item, childDraggableItems, 'childSaveData')"
+                ></v-icon>
+                <v-icon
+                  v-if="item.freeze"
+                  class="mdi mdi-lock"
+                  style="margin-left: 10px"
+                  @click="isFrozen(item, childDraggableItems, 'childSaveData')"
+                ></v-icon>
+              </el-dropdown-item>
+            </VueDraggable>
+          </el-dropdown-menu>
+        </div>
+      </div>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { VueDraggable } from 'vue-draggable-plus';
+import { useI18n } from 'vue-i18n';
+import { ElMessage } from 'element-plus';
+const { t } = useI18n();
+const props = defineProps({
+  parentItems: Array, // 父表头数据
+  isParentCheckbox: Boolean, // 父表头是否显示复选框
+  parentLabel: String, // 父表头名称
+  childLabel: String, // 子表头名称
+  childItems: Array, // 子表头数据
+  isChildCheckbox: Boolean, // 子表头是否显示复选框
+  isChild: Boolean, // 是否子表头列配置
+});
+const emit = defineEmits(['parentSaveData', 'childSaveData']);
+const parentDraggableItems = ref([]);
+const childDraggableItems = ref([]);
+const handle = ref('.dragindicator');
+watch(
+  () => props,
+  () => {
+    parentDraggableItems.value = props.parentItems;
+    childDraggableItems.value = props.childItems;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+function parentSaveData(val) {
+  const count = parentDraggableItems.value.filter((item) => item.hideable === true).length;
+  if (count < 6 && !val.hideable) {
+    val.hideable = true;
+    ElMessage.error('页面中栏位最少不得低于6列');
+    return;
+  }
+  emit('parentSaveData', parentDraggableItems.value);
+}
+function childSaveData(val) {
+  const count = childDraggableItems.value.filter((item) => item.hideable === true).length;
+  if (count < 6 && !val.hideable) {
+    val.hideable = true;
+    ElMessage.error('页面中栏位最少不得低于6列');
+    return;
+  }
+  emit('childSaveData', childDraggableItems.value);
+}
+function isFrozen(item, data, event) {
+  const frozenCount = data.filter((item) => item.freeze === true).length;
+
+  if (item.freeze) {
+    // 取消冻结逻辑
+    item.freeze = false;
+    item.fixed = false;
+    // 将取消冻结的栏位移动到未冻结栏位的第一位
+    const currentIndex = data.indexOf(item);
+    if (currentIndex !== -1) {
+      const [removed] = data.splice(currentIndex, 1);
+      const firstNonFrozenIndex = data.findIndex((i) => !i.freeze);
+      if (firstNonFrozenIndex !== -1) {
+        data.splice(firstNonFrozenIndex, 0, removed);
+      } else {
+        data.push(removed); // 如果没有未冻结栏位，则放到最后
+      }
+    }
+  } else {
+    // 冻结逻辑
+    if (frozenCount >= 4) {
+      ElMessage.error('最多可冻结4列数据');
+      return;
+    }
+    item.freeze = true;
+    item.fixed = true;
+
+    // 将冻结的栏位移动到最后一个冻结栏位之后
+    const currentIndex = data.indexOf(item);
+    if (currentIndex !== -1) {
+      const [removed] = data.splice(currentIndex, 1);
+      const lastFrozenIndex = data.findLastIndex((i) => i.freeze);
+      if (lastFrozenIndex !== -1) {
+        data.splice(lastFrozenIndex + 1, 0, removed);
+      } else {
+        data.unshift(removed); // 如果没有冻结栏位，则放到最前面
+      }
+    }
+  }
+
+  // 触发保存事件
+  emit(event, data);
+}
+function dynamicClasses(item) {
+  return item.freeze ? 'disabled-color' : '';
+}
+// 禁止未冻结列拖动到冻结列的上方或中间
+function onDragMove(evt, val) {
+  // 获取拖拽项的索引
+  const draggedIndex = Array.from(evt.from.children).indexOf(evt.dragged);
+  const draggedItem = val[draggedIndex];
+
+  // 获取目标项的索引
+  let relatedIndex = Array.from(evt.to.children).indexOf(evt.related);
+  // willInsertAfter 为 true 时，目标索引要+1
+  if (evt.willInsertAfter && relatedIndex !== -1) {
+    relatedIndex += 1;
+  }
+  // 如果 related 为空，说明拖到最后
+  if (evt.related == null) {
+    relatedIndex = val.length;
+  }
+
+  const frozenCount = val.filter((item) => item.freeze).length;
+
+  // 未冻结列不能拖到冻结区（前frozenCount个）内部或前面
+  if (!draggedItem.freeze && relatedIndex < frozenCount) {
+    return false;
+  }
+  // 冻结列只能在冻结区内移动
+  if (draggedItem.freeze && relatedIndex >= frozenCount) {
+    return false;
+  }
+  return true;
+}
+</script>
+
+<style lang="scss" scoped>
+.disabled-color {
+  color: #ccc !important;
+  cursor: not-allowed !important;
+}
+:deep(.el-space--vertical) {
+  padding: 5px 0 0 16px;
+  position: relative;
+  top: 5px;
+  z-index: 9999;
+}
+</style>