syntec3-0-ui-components-test 1.0.0

package/src/components/popover.vue

@@ -0,0 +1,402 @@
+<template>
+  <el-popover v-model="isVisible" placement="right" width="350" :hide-after="200">
+    <template #reference>
+      <slot name="reference"></slot>
+    </template>
+    <div v-loading="isShowlading">
+      <!-- 标题 -->
+      <div class="custom-title">{{ t('materialDetails') }}</div>
+      <el-divider />
+      <div style="overflow: auto; max-height: 500px">
+        <!-- 表单 -->
+        <el-form :model="form" label-width="25%" label-position="right">
+          <!-- 物料名称 -->
+          <el-form-item :label="t('productName')">
+            <el-input class="input-max-width" :value="form[currentStrategy.nameField]" readonly />
+          </el-form-item>
+
+          <!-- 规格 -->
+          <!-- 可能存在页面无型号规格 -->
+          <el-form-item :label="t('spec')">
+            <el-input class="input-max-width" :value="form[currentStrategy.specField] || '--'" readonly />
+          </el-form-item>
+
+          <!-- 物料自定义栏位 -->
+          <!-- 无自定义栏位则不显示 -->
+          <el-form-item
+            v-for="CustomizeFields in props.popCustomizeFields"
+            :key="CustomizeFields[currentStrategy.customizeField.key]"
+          >
+            <!-- label -->
+            <template #label>
+              <el-tooltip
+                v-if="CustomizeFields[currentStrategy.customizeField.label].length > 6"
+                effect="dark"
+                :content="CustomizeFields[currentStrategy.customizeField.label]"
+                placement="top"
+              >
+                <template #default>
+                  <span>{{ `${CustomizeFields[currentStrategy.customizeField.label].slice(0, 6)}...` }}</span>
+                </template>
+              </el-tooltip>
+              <span v-else> {{ CustomizeFields[currentStrategy.customizeField.label] }} </span>
+            </template>
+            <!-- 附件 -->
+            <span
+              v-if="
+                CustomizeFields[currentStrategy.customizeField.type] === 5 &&
+                handleCustomFieldAndValues(
+                  CustomizeFields[currentStrategy.customizeField.key],
+                  form[currentStrategy.customizeField.value],
+                ).length !== 0
+              "
+              class="input-max-width"
+            >
+              <el-check-tag
+                v-for="multipleItem in handleCustomFieldAndValues(
+                  CustomizeFields[currentStrategy.customizeField.key],
+                  form[currentStrategy.customizeField.value],
+                )"
+                :key="multipleItem.fileId"
+                checked
+                type="primary"
+                style="margin-right: 0.5rem"
+                round
+                @click="dowFileItem(multipleItem)"
+              >
+                {{ multipleItem.fileName }}
+              </el-check-tag>
+            </span>
+            <!-- 超链接 -->
+            <span
+              v-else-if="
+                CustomizeFields[currentStrategy.customizeField.type] === 6 &&
+                handleCustomFieldAndValues(
+                  CustomizeFields[currentStrategy.customizeField.key],
+                  form[currentStrategy.customizeField.value],
+                ) !== ''
+              "
+            >
+              <el-tooltip
+                :content="
+                  handleCustomFieldAndValues(
+                    CustomizeFields[currentStrategy.customizeField.key],
+                    form[currentStrategy.customizeField.value],
+                  )
+                "
+                placement="top"
+                :enterable="false"
+              >
+                <el-button link @click="hyperLinkClick(CustomizeFields, form[currentStrategy.customizeField.value])">
+                  <v-icon class="mdi mdi-link"></v-icon>
+                </el-button>
+              </el-tooltip>
+            </span>
+            <!-- 单选 -->
+            <span
+              v-else-if="
+                CustomizeFields[currentStrategy.customizeField.type] === 7 &&
+                handleCustomFieldAndValues(
+                  CustomizeFields[currentStrategy.customizeField.key],
+                  form[currentStrategy.customizeField.value],
+                ) !== ''
+              "
+              class="input-max-width"
+            >
+              <el-tag type="primary" style="margin-right: 0.5rem" round>
+                {{
+                  handleCustomFieldAndValues(
+                    CustomizeFields[currentStrategy.customizeField.key],
+                    form[currentStrategy.customizeField.value],
+                  )
+                }}
+              </el-tag>
+            </span>
+            <!-- 多选 -->
+            <span
+              v-else-if="
+                CustomizeFields[currentStrategy.customizeField.type] === 8 &&
+                handleCustomFieldAndValues(
+                  CustomizeFields[currentStrategy.customizeField.key],
+                  form[currentStrategy.customizeField.value],
+                ) !== ''
+              "
+              class="input-max-width"
+            >
+              <el-tag
+                v-for="(multipleItem, multipleItemIndex) in handleCustomFieldAndValues(
+                  CustomizeFields[currentStrategy.customizeField.key],
+                  form[currentStrategy.customizeField.value],
+                )"
+                :key="multipleItemIndex"
+                type="primary"
+                style="margin-right: 0.5rem"
+                round
+              >
+                {{ multipleItem }}
+              </el-tag>
+            </span>
+            <!-- 其余自定义栏位 -->
+            <el-input
+              v-else
+              class="input-max-width"
+              :value="
+                handleCustomFieldAndValues(
+                  CustomizeFields[currentStrategy.customizeField.key],
+                  form[currentStrategy.customizeField.value],
+                ) || '--'
+              "
+              readonly
+            />
+          </el-form-item>
+
+          <!-- 图片预览 -->
+          <!-- 长宽最大200px，比例自适应 -->
+          <el-form-item :label="t('preview')">
+            <div v-if="url" style="max-height: 200px; max-width: 200px">
+              <el-image :src="url" fit="contain" />
+            </div>
+            <el-input v-else class="input-max-width" :value="imageText" readonly />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick, computed } from 'vue';
+import backendApiFunction from '@/scriptFiles/checkApiErrorMechanism';
+import { useI18n } from 'vue-i18n';
+import { dayjs, ElMessage } from 'element-plus';
+
+const { t } = useI18n();
+/* 字段映射额外说明
+  props.popStrategies
+  {
+    numberField: 'productNumber', //物料编号
+    nameField: 'materialName', //物料名称
+    specField: 'materialSpec',  //物料规格
+    customizeField: { //自定义字段
+      key: 'customAttributeId', //表单内字段数据与自定义字段串联key
+      customizeFieldKey: 'customAttributeId',
+      label: 'label', //form-ltem上的label
+      value: 'customValues',  //表单内的数据
+      writeValue: 'attributeValue', //值
+      type: 'displayType', //不同类型的枚举，不同路由下枚举字段未统一
+      expandField: 'customAttribute', //自定义字段存放的层级不同，无法筛选，需要展开至同一层级，无需展开则不传
+  },
+}
+*/
+const props = defineProps({
+  value: {
+    type: Boolean,
+    required: true,
+  },
+  popInformation: {
+    type: Object,
+    required: true,
+  }, //数据（缺少自定义字段数据）
+  popType: String, //路由
+  popCustomizeFields: {
+    type: Object,
+    default: () => {
+      [];
+    },
+  }, //自定义字段
+  popTitle: {
+    type: String,
+    default: '物料详情',
+  }, //标题
+  popStrategies: {
+    type: Object,
+    required: true,
+  }, //字段映射
+});
+const isVisible = ref(props.value);
+const isShowlading = ref(false);
+const form = ref({});
+
+// 当前策略
+const currentStrategy = computed(() => props.popStrategies);
+
+/* 图片相关 */
+const url = ref(null);
+const imageText = t('materialNoImage');
+const fetchPopoverImage = async () => {
+  try {
+    const { data } = await backendApiFunction.getMaterialImage({
+      materialPartNumber: form.value[currentStrategy.value.numberField],
+    });
+    if (data?.type.includes('image')) {
+      const blob = new Blob([data], { type: data.type });
+      const reader = new FileReader();
+      reader.readAsDataURL(blob);
+      reader.onload = () => {
+        url.value = reader.result;
+      };
+    }
+  } catch (error) {
+    console.error('[error]错误:', error);
+    ElMessage.error(t('apiError'));
+  }
+};
+
+/**
+ * 自定义字段是超链接时的点击事件
+ * @param {object} item 自定义字段对象
+ * @param {array} docCustomFieldAndValues 自定义字段所有数据
+ */
+const hyperLinkClick = (item, docCustomFieldAndValues) => {
+  const hyperLinkUrlStr = docCustomFieldAndValues.filter(
+    (ite) => ite.docCustomId === item[currentStrategy.value.customizeField.customizeFieldKey],
+  )[0][currentStrategy.value.customizeField.writeValue];
+  window.open(hyperLinkUrlStr, '_blank');
+};
+/**
+ * 下载附件序列化方法
+ * @param {string} fileName 文件名
+ * @param {object} res 请求响应对象
+ */
+const fileDownSerialize = (fileName, res) => {
+  // 创建一个 Blob URL 指向这个 Blob 对象
+  const url = window.URL.createObjectURL(new Blob([res.data], { type: res.headers['content-type'] }));
+  // 创建一个临时的 <a> 元素
+  const link = document.createElement('a');
+  link.href = url;
+  // 设置下载的文件名（可选，但推荐）
+  // 如果服务器没有在响应头中提供 Content-Disposition，你需要手动设置文件名
+  link.setAttribute('download', fileName);
+  // 将 <a> 元素添加到文档中（不需要真正添加到可视区域）
+  document.body.appendChild(link);
+  // 触发点击事件以下载文件
+  link.click();
+  // 释放 Blob URL（可选，但推荐）
+  // 注意：这应该在确保文件下载已经开始之后进行，否则在某些浏览器中可能会导致下载失败
+  setTimeout(() => {
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(link);
+  }, 0);
+};
+/**
+ * 自定义字段是附件时的点击事件
+ * @param {object} item 附件对象
+ */
+const dowFileItem = async (item) => {
+  const fileName = item.fileName;
+  if (item) {
+    const data = {
+      docCode: 'doc_5',
+      docCustomId: item.docCustomId,
+      fileId: item.fileId,
+    };
+    isShowlading.value = true;
+    try {
+      const res = await backendApiFunction.docDownloadFile(data);
+      if (res.status === 200) {
+        fileDownSerialize(fileName, res);
+        ElMessage.success(t('downloadSuccessful'));
+      } else {
+        ElMessage.error(t('apiError'));
+      }
+    } catch (error) {
+      console.error('[error]错误:', error);
+      ElMessage.error(t('apiError'));
+    } finally {
+      isShowlading.value = false;
+    }
+  }
+};
+/**
+ * 根据type进行数据处理
+ * @param fieldId 自定义字段数据key
+ * @param list 表单数据value
+ */
+const handleCustomFieldAndValues = (fieldId, list) => {
+  const field = props.popCustomizeFields.find(
+    (item) => item[currentStrategy.value.customizeField.customizeFieldKey] === fieldId,
+  );
+  const i = list?.find((item) => item.docCustomId === fieldId);
+  if (list && field && i) {
+    // 日期
+    if (field[currentStrategy.value.customizeField.type] === 3) {
+      return dayjs(Number(i[currentStrategy.value.customizeField.writeValue])).format('YYYY-MM-DD HH:mm:ss');
+    }
+    // 日期区间
+    if (field[currentStrategy.value.customizeField.type] === 4) {
+      try {
+        const val = JSON.parse(i[currentStrategy.value.customizeField.writeValue]);
+        if (val) {
+          return `${dayjs(Number(val[0])).format('YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(Number(val[1])).format('YYYY-MM-DD HH:mm:ss')}`;
+        }
+        return '';
+      } catch (error) {
+        return '';
+      }
+    }
+    // 附件
+    if (field[currentStrategy.value.customizeField.type] === 5) {
+      if (i.fileData && i.fileData.length !== 0) {
+        return i.fileData.map((item) => ({
+          ...item,
+          docCustomId: i.docCustomId,
+        }));
+      } else {
+        return '';
+      }
+    }
+    // 单选
+    if (field[currentStrategy.value.customizeField.type] === 7) {
+      return i[currentStrategy.value.customizeField.writeValue]
+        ? JSON.parse(i[currentStrategy.value.customizeField.writeValue])
+        : '';
+    }
+    // 复选框
+    if (field[currentStrategy.value.customizeField.type] === 8) {
+      return i[currentStrategy.value.customizeField.writeValue]
+        ? JSON.parse(i[currentStrategy.value.customizeField.writeValue])
+        : '';
+    }
+    return i[currentStrategy.value.customizeField.writeValue] || '';
+  }
+  return '';
+};
+const fetchPopoverInfo = async () => {
+  try {
+    form.value = props.popInformation;
+    if (currentStrategy.value.customizeField?.expandField) {
+      form.value.customValues = form.value.customValues.map((customValue) => {
+        const { customAttribute, ...rest } = customValue;
+        return {
+          ...rest,
+          ...customAttribute,
+        };
+      });
+    }
+  } catch (error) {
+    console.error('[error]错误:', error);
+    ElMessage.error(t('apiError'));
+  }
+};
+
+onMounted(() => {
+  nextTick(async () => {
+    isShowlading.value = true;
+    await fetchPopoverInfo();
+    await fetchPopoverImage();
+    isShowlading.value = false;
+  });
+});
+</script>
+<style scoped>
+.el-divider {
+  margin: 4px 0px 12px;
+}
+.custom-title {
+  font-size: 16px;
+  text-align: center;
+}
+.input-max-width {
+  max-width: 96%;
+}
+</style>

package/src/configFiles/apiFile/baseApiList.json

@@ -0,0 +1,11 @@
+{
+  "docCustomUpload": "/Internal/FrontEnd/DmlDocCustom/Upload",
+  "querySetting": "/Internal/FrontEnd/DmlDocCustom/QuerySetting",
+  "docDownloadFile": "/Internal/FrontEnd/DmlDocCustom/DownloadFile",
+  "docViewFile": "/Internal/FrontEnd/DmlDocCustom/ViewFile",
+  "updateColumnSettingNext": "/Internal/FrontEnd/EmpDisplayConfig/Field",
+  "queryColumnSettingNext": "/Internal/FrontEnd/EmpDisplayConfig/Field/Query",
+  "insertOrUpdateFilterCondition":"/Internal/FrontEnd/DmlFilterCondition/DmlFilterCondition/InsertOrUpdate",
+  "queryFilterCondition":"/Internal/FrontEnd/DmlFilterCondition/DmlFilterCondition/Query",
+  "getFieldSetting":"/Internal/FrontEnd/DmlFilterCondition/DmlFilterCondition/GetFieldSetting"
+}

package/src/configFiles/apiFile/coreApiList.json

@@ -0,0 +1,24 @@
+{
+  "logins": "/Internal/FrontEnd/Auth/Login",
+  "logout": "/Internal/FrontEnd/Auth/Logout",
+  "refreshToken": "/Internal/FrontEnd/Auth/Refresh",
+  "materialList": "/Internal/Common/Query/MaterialList",
+  "empID": "/Internal/FrontEnd/Auth/User/EmpID",
+  "employeeList": "/Internal/FrontEnd/Management/Employee/List",
+  "QueryMyPermission": "/Internal/FrontEnd/Management/Permission/QueryMyPermission",
+  "queryPageSetting": "/Internal/FrontEnd/Management/Employee/QueryPageSetting",
+  "updatePageSetting": "/Internal/FrontEnd/Management/Employee/UpdatePageSetting",
+  "getViewOnlyReadList": "/Internal/View/CommonList",
+  "getViewOptEmployeeList": "/Internal/View/GetUserList",
+  "getViewLogList": "/Internal/View/OperateLogList",
+  "getViewList": "/Internal/View/List",
+  "addView": "/Internal/View/InsertView",
+  "IsExistViewName": "/Internal/View/IsExistViewName",
+  "modifyView": "/Internal/View/EditView",
+  "deleteView": "/Internal/View/DeleteView",
+  "getViewTabDetail": "/Internal/View/GetView",
+  "getViewFieldList": "/Internal/View/GetFieldList",
+  "upadateViewOrder": "/Internal/View/UpdateViewOrder",
+  "getViewPermissionEmployeeList": "/Internal/FrontEnd/Management/Employee/EmployeeList",
+  "getViewpersionList": "/Internal/FrontEnd/Management/Employee/AllEmployeeList"
+}

package/src/configFiles/apiFile/mesApiList.json

@@ -0,0 +1,4 @@
+{
+  "planFormulationQuery": "/Internal/Common/ProductionPlan/MainPage/Search",
+  "GetReviewRecord": "/Internal/Common/ProductionReview/GetReviewRecord"
+}

package/src/configFiles/apiFile/mmsApiList.json

@@ -0,0 +1,3 @@
+{
+  "materialCategoryLastLevel": "/Internal/FrontEnd/Command/materialType/GetMaterialCategoryLowestLevel"
+}