syntec3-0-ui-components-test 1.0.0

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

@@ -0,0 +1,739 @@
+<template>
+  <el-form ref="cfForm" :model="formData" label-width="auto" data-test-id="EL-FORM-77wT2R">
+    <el-row :gutter="2" data-test-id="EL-ROW-9p85J9">
+      <el-col v-for="(item, index) in formData" :key="item[itemId]" :span="12" data-test-id="EL-COL-MLQi95">
+        <el-form-item :prop="String(item[itemId])" :rules="getRules(item)" data-test-id="EL-FORM-ITEM-U79ddx">
+          <template #label>
+            <el-tooltip
+              v-if="item[itemName].length > 10"
+              effect="dark"
+              :content="item[itemName]"
+              placement="top"
+              data-test-id="EL-TOOLTIP-Z5VtdY"
+            >
+              <template #default>
+                <span v-if="item[itemRequired]" data-test-id="SPAN-XoJ0Jg">
+                  <span style="color: #f56c6c" data-test-id="SPAN-1QZ2GD">* </span>
+                  {{ `${item[itemName].slice(0, 10)}...` }}
+                </span>
+                <span v-else data-test-id="SPAN-tE51QL">{{ `${item[itemName].slice(0, 10)}...` }}</span>
+              </template>
+            </el-tooltip>
+            <span v-else data-test-id="SPAN-Jjoz0y">
+              <span v-if="item[itemRequired]" style="color: #f56c6c" data-test-id="SPAN-vPBYAF">* </span>
+              {{ item[itemName] }}
+            </span>
+          </template>
+          <!-- 文本 -->
+          <el-input
+            v-if="getType(item[itemTypeId]) === 'text'"
+            v-model="item.value"
+            :placeholder="item[itemPlaceholder]"
+            maxlength="50"
+            clearable
+            show-word-limit
+            data-test-id="EL-INPUT-KUCjOh"
+          />
+          <!-- 数字 -->
+          <el-input
+            v-if="getType(item[itemTypeId]) === 'number'"
+            v-model="item.value"
+            :placeholder="item[itemPlaceholder]"
+            maxlength="15"
+            type="number"
+            clearable
+            show-word-limit
+            data-test-id="EL-INPUT-JIdFTM"
+          />
+          <!-- 日期 -->
+          <el-date-picker
+            v-if="getType(item[itemTypeId]) === 'date'"
+            v-model="item.value"
+            :placeholder="item[itemPlaceholder]"
+            type="datetime"
+            clearable
+            show-word-limit
+            style="width: 100%"
+            data-test-id="EL-DATE-PICKER-kUWAoM"
+          />
+          <!-- 日期区间 -->
+          <el-date-picker
+            v-if="getType(item[itemTypeId]) === 'dateRange'"
+            v-model="item.value"
+            :placeholder="item[itemPlaceholder]"
+            type="datetimerange"
+            clearable
+            show-word-limit
+            style="width: 100%"
+            data-test-id="EL-DATE-PICKER-KCacHl"
+          />
+          <!-- 附件 -->
+          <div v-if="getType(item[itemTypeId]) === 'attachment'" data-test-id="DIV-mCZ1Au">
+            <el-upload
+              ref="uploadRef"
+              v-model="item.value"
+              class="upload-attachment"
+              clearable
+              drag
+              :on-change="
+                (file) => {
+                  uploadHandleChange(file, item, index);
+                }
+              "
+              :auto-upload="false"
+              :show-file-list="false"
+              data-test-id="EL-UPLOAD-DCMYwD"
+            >
+              <el-icon class="el-icon--upload" data-test-id="EL-ICON-xlUkii"><upload-filled data-test-id="UPLOAD-FILLED-6OLhtP"/></el-icon>
+              <div class="el-upload__text" data-test-id="DIV-z3CeRc">
+                {{ t('dragFileHereOr') }} <em data-test-id="EM-rxmE2t">{{ t('clickToUpload') }}</em>
+              </div>
+            </el-upload>
+            <div data-test-id="DIV-S68oYj">
+              <div v-for="ite in item.value" :key="ite.uid" class="file-list-show-text" data-test-id="DIV-iOW1Zp">
+                <span class="mdi mdi-file-document-outline mr-2" data-test-id="SPAN-FBYDht" />
+                <el-tooltip effect="dark" :content="ite.name" placement="bottom" data-test-id="EL-TOOLTIP-Woq2U9">
+                  <span class="ellipsis-single-line file-list-show-text-name" data-test-id="SPAN-4qgDqO">{{
+                    ite.name
+                  }}</span>
+                </el-tooltip>
+                <span
+                  v-if="isShowViewIconFun(ite)"
+                  class="mdi mdi-eye eye-icon"
+                  data-test-id="SPAN-Ug65md"
+                  @click="viewFileItem(ite, item)"
+                />
+                <span
+                  v-if="!isShowViewIconFun(ite)"
+                  class="mdi mdi-arrow-down down-icon"
+                  data-test-id="SPAN-rv5p9U"
+                  @click="dowFileItem(ite, item)"
+                />
+                <span class="mdi mdi-close close-icon" data-test-id="SPAN-M144mc" @click="clearFileItem(ite, index)" />
+              </div>
+            </div>
+          </div>
+          <!-- 超链接 -->
+          <el-input
+            v-if="getType(item[itemTypeId]) === 'hyperLink'"
+            v-model="item.value"
+            :placeholder="item[itemPlaceholder]"
+            maxlength="200"
+            clearable
+            show-word-limit
+            data-test-id="EL-INPUT-3CIGMF"
+          />
+          <!-- 单选框 -->
+          <el-select
+            v-if="getType(item[itemTypeId]) === 'radio'"
+            v-model="item.value"
+            :placeholder="item[itemPlaceholder]"
+            clearable
+            show-word-limit
+            data-test-id="EL-SELECT-fij3Bf"
+          >
+            <el-option
+              v-for="(ite, ind) in getArrOfJSONStr(item.fieldSelectOptions)"
+              :key="ind"
+              :label="ite"
+              :value="ite"
+              :data-test-id="`EL-OPTION-1BmHu8${ind}`"
+            />
+          </el-select>
+          <!-- 多选框 -->
+          <el-select
+            v-if="getType(item[itemTypeId]) === 'checkBox'"
+            v-model="item.value"
+            multiple
+            :placeholder="item[itemPlaceholder]"
+            clearable
+            collapse-tags
+            collapse-tags-tooltip
+            :max-collapse-tags="2"
+            show-word-limit
+            data-test-id="EL-SELECT-56o5LQ"
+          >
+            <el-option
+              v-for="(ite, ind) in getArrOfJSONStr(item.fieldSelectOptions)"
+              :key="ind"
+              :label="ite"
+              :value="ite"
+              :data-test-id="`EL-OPTION-zcSCz5${ind}`"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+    </el-row>
+    <el-image-viewer
+      v-if="showImage"
+      hide-on-click-modal
+      :url-list="[imageSrc]"
+      data-test-id="EL-IMAGE-VIEWER-gDQR71"
+      @close="
+        () => {
+          showImage = false;
+        }
+      "
+    />
+  </el-form>
+</template>
+
+<script>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import dayjs from 'dayjs';
+import { UploadFilled } from '@element-plus/icons-vue';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+import { ElLoading, ElMessage } from 'element-plus';
+import toolFun from '@/utils/toolFun.js';
+
+export default {
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    cols: {
+      type: Number,
+      default: 4,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    itemId: {
+      type: String,
+      default: 'customFieldId',
+    },
+    itemName: {
+      type: String,
+      default: 'customFieldName',
+    },
+    itemTypeId: {
+      type: String,
+      default: 'fieldTypeId',
+    },
+    itemPlaceholder: {
+      type: String,
+      default: 'placeHolder',
+    },
+    itemEnable: {
+      type: String,
+      default: 'isEnable',
+    },
+    itemRequired: {
+      type: String,
+      default: 'fieldProperty',
+    },
+  },
+  components: {
+    UploadFilled,
+  },
+  setup(props, { expose }) {
+    const { t } = useI18n();
+    const cfForm = ref(null);
+    const formData = ref([]);
+    const uploadFileMaxSize = 20 * 1024 * 1024; // 设置最大文件大小为20MB
+    const uploadRef = ref(null);
+    const customFieldIdConfig = [
+      {
+        id: 1,
+        type: 'text',
+      },
+      {
+        id: 2,
+        type: 'number',
+      },
+      {
+        id: 3,
+        type: 'date',
+      },
+      {
+        id: 4,
+        type: 'dateRange',
+      },
+      {
+        id: 5,
+        type: 'attachment',
+      },
+      {
+        id: 6,
+        type: 'hyperLink',
+      },
+      {
+        id: 7,
+        type: 'radio',
+      },
+      {
+        id: 8,
+        type: 'checkBox',
+      },
+    ];
+    /**
+     * loading加载框方法
+     * @param {boolean} type 类型：true->打开，false->关闭
+     */
+    function loadingFun(type = false) {
+      const loading = ElLoading.service({
+        lock: true,
+        text: '',
+        background: 'rgba(255, 255, 255, 0.7)',
+      });
+      if (!type) {
+        loading.close();
+      }
+    }
+    function getType(id) {
+      return customFieldIdConfig.find((item) => item.id === id)?.type;
+    }
+    function getRules(item) {
+      return [
+        {
+          validator: (rule, val, callback) => {
+            const v = item.value;
+            if (typeof v === 'string' && v !== v.trim()) {
+              callback(t('haveSpace'));
+            }
+            if (getType(item[props.itemTypeId]) !== 'text' && v !== null && v !== '' && v?.length > 50) {
+              callback(t('strLengthLimit50'));
+            }
+            if (item[props.itemRequired] && getType(item[props.itemTypeId]) !== 'attachment') {
+              if (!v && (v !== 0 || v?.length === 0)) {
+                callback(t('requiredField'));
+              }
+              if (Array.isArray(v) && Object.keys(v)?.length === 0) {
+                callback(t('requiredField'));
+              }
+            }
+            if (getType(item[props.itemTypeId]) === 'number') {
+              if (v !== null && v !== '' && v?.toString()?.length > 15) {
+                callback(t('strLengthLimit15'));
+              }
+              if (!/^-?\d+(\.\d+)?$/.test(v) && v !== '' && v !== null) {
+                callback(t('mustNumber'));
+              }
+            }
+            if (v !== null && v !== '' && getType(item[props.itemTypeId]) === 'hyperLink') {
+              if (v?.toString()?.length > 200) {
+                callback(t('strLengthLimit200'));
+              }
+              // 使用正则表达式来校验URL
+              if (!toolFun.isValidURL(v)) {
+                callback(t('pleaseEnterQualifiedHyperlink'));
+              }
+            }
+            callback();
+          },
+          trigger: ['blur', 'change'],
+        },
+      ];
+    }
+    function getItemValue(item) {
+      let returnValue = null;
+      if (!item.value && item.value !== 0) {
+        return returnValue;
+      }
+      switch (getType(item[props.itemTypeId])) {
+        case 'date':
+          returnValue = dayjs(JSON.parse(item.value)).format('YYYY-MM-DD HH:mm:ss');
+          break;
+        case 'dateRange':
+          returnValue = JSON.parse(item.value);
+          break;
+        case 'attachment':
+          if (props.isEdit) {
+            returnValue = item.fileData?.map((ite) => ({
+              ...ite,
+              name: ite.fileName,
+            }));
+          } else {
+            returnValue = item.value;
+          }
+          break;
+        case 'checkBox':
+          returnValue = JSON.parse(item.value);
+          break;
+        default:
+          returnValue = item.value || null;
+          break;
+      }
+      return returnValue;
+    }
+    function formatItemValue(item) {
+      let returnValue = null;
+      switch (getType(item[props.itemTypeId])) {
+        case 'date':
+          if (item.value) {
+            returnValue = Number(dayjs(item.value).format('x'));
+          } else {
+            returnValue = null;
+          }
+          break;
+        case 'dateRange':
+          if (item.value?.length) {
+            returnValue = JSON.stringify([
+              Number(dayjs(item.value[0]).format('x')),
+              Number(dayjs(item.value[0]).format('x')),
+            ]);
+          } else {
+            returnValue = [];
+          }
+          break;
+        case 'attachment':
+          if (item.value?.length) {
+            returnValue = JSON.stringify(item.value);
+          } else {
+            returnValue = null;
+          }
+          break;
+        case 'checkBox':
+          if (item.value?.length) {
+            returnValue = JSON.stringify(item.value);
+          } else {
+            returnValue = null;
+          }
+          break;
+        default:
+          returnValue = item.value;
+          break;
+      }
+      return returnValue;
+    }
+    /**
+     * 检验附件必填方法
+     */
+    function inspectionAttachmentsAreRequired() {
+      const attachmentArr = formData.value.filter((item) => item.fieldTypeId === 5);
+      if (attachmentArr.length) {
+        let flag = false;
+        for (let index = 0; index < attachmentArr.length; index += 1) {
+          const ite = attachmentArr[index];
+          if (ite.fieldProperty) {
+            if (!ite.value) {
+              flag = true;
+              break;
+            }
+            if (!ite.value?.length) {
+              flag = true;
+              break;
+            }
+          }
+        }
+        if (flag) {
+          return false;
+        }
+      }
+      return true;
+    }
+    async function getData() {
+      let cfFormValidate = false;
+      const flag = inspectionAttachmentsAreRequired();
+      await cfForm.value?.validate((valid) => {
+        if (valid) {
+          cfFormValidate = true;
+          if (!flag) {
+            cfFormValidate = false;
+            ElMessage.error(t('pleaseCheckUploaded'));
+          }
+        } else {
+          cfFormValidate = false;
+        }
+      });
+      if (cfFormValidate) {
+        return JSON.parse(
+          JSON.stringify(
+            formData.value.map((item) => ({
+              ...item,
+              value: formatItemValue(item),
+            })),
+          ),
+        );
+      }
+      return false;
+    }
+    expose({ getData });
+    watch(
+      () => props.items,
+      () => {
+        formData.value = JSON.parse(
+          JSON.stringify(
+            props.items.map((item) => ({
+              ...item,
+              value: getItemValue(item),
+            })),
+          ),
+        );
+      },
+      {
+        immediate: true,
+        deep: true,
+      },
+    );
+    /**
+     * JSON字符串序列话方法
+     * @param {string} JSONStr JSON字符串
+     */
+    function getArrOfJSONStr(JSONStr) {
+      if (JSONStr) {
+        return JSON.parse(JSONStr);
+      }
+      return [];
+    }
+
+    /**
+     * 附件上传接口
+     * @param {file} uploadFile 当前上传的附件
+     * @param {object} customItem 自定义字段对象
+     * @param {number} index 自定义字段索引
+     */
+    async function uploadHandleChange(uploadFile, customItem, index) {
+      loadingFun(true);
+      if (formData.value[index].value?.length === 5) {
+        ElMessage.error(t('numberUploadsCannotExceed5'));
+        loadingFun(false);
+        return;
+      }
+      // 在这里可以进行文件验证
+      const isLt20MB = uploadFile.size < uploadFileMaxSize;
+      if (!isLt20MB) {
+        ElMessage.error(t('uploadFileSize20MB'));
+        loadingFun(false);
+      } else {
+        const params = {
+          DocCode: 'doc_5',
+          DocCustomId: customItem.customFieldId,
+          file: {
+            file: uploadFile.raw,
+          },
+        };
+        await apiFunction
+          .docCustomUpload(params)
+          .then((res) => {
+            loadingFun(false);
+            if (res.data.code === 0) {
+              ElMessage.success(t('uploadSuccess'));
+              if (!formData.value[index].value) {
+                formData.value[index].value = [];
+              }
+              formData.value[index].value.push({
+                ...uploadFile,
+                fileId: res.data.content.fileID,
+              });
+            } else {
+              ElMessage.error(t(res.data.message));
+            }
+          })
+          .catch(() => {
+            loadingFun(false);
+            ElMessage.error(t('apiError'));
+          });
+      }
+      loadingFun(false);
+    }
+    /**
+     * 下载附件序列化方法
+     * @param {string} fileName 文件名
+     * @param {object} res 请求响应对象
+     */
+    function 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);
+    }
+    // 控制是否打开预览图片插件
+    const showImage = ref(false);
+    // 预览图片地址
+    const imageSrc = ref('');
+    /**
+     * 图片预览方法
+     * @param {object} item 附件对象
+     * @param {object} outItem 自定义字段对象
+     */
+    async function viewFileItem(item, outItem) {
+      const data = {
+        docCode: 'doc_5',
+        docCustomId: outItem.docCustomId,
+        fileId: item.fileId,
+      };
+      const fileExtension = item.name.toLowerCase().split('.').pop();
+      await apiFunction
+        .docViewFile(data)
+        .then((res) => {
+          loadingFun(false);
+          if (res.data.code === 0) {
+            imageSrc.value = `data:image/${fileExtension};base64,${res.data.content.fileContent}`;
+            showImage.value = true;
+          } else {
+            ElMessage.error(t('apiError'));
+          }
+        })
+        .catch(() => {
+          loadingFun(false);
+          ElMessage.error(t('apiError'));
+        });
+    }
+    /**
+     * 附件下载方法
+     * @param {object} item 附件对象
+     * @param {object} outItem 自定义字段对象
+     */
+    async function dowFileItem(item, outItem) {
+      loadingFun(true);
+      const fileName = item.name;
+      if (item) {
+        const data = {
+          docCode: 'doc_5',
+          docCustomId: outItem.docCustomId,
+          fileId: item.fileId,
+        };
+        await apiFunction
+          .docDownloadFile(data)
+          .then((res) => {
+            loadingFun(false);
+            if (res.status === 200) {
+              fileDownSerialize(fileName, res);
+              ElMessage.success(t('downloadSuccessful'));
+            } else {
+              ElMessage.error(t('apiError'));
+            }
+          })
+          .catch(() => {
+            loadingFun(false);
+            ElMessage.error(t('apiError'));
+          });
+      }
+      loadingFun(false);
+    }
+    /**
+     * 删除附件方法
+     * @param {object} item 附件对象
+     * @param {number} index 自定义字段索引
+     */
+    function clearFileItem(item, index) {
+      formData.value[index].value = formData.value[index].value.filter((ite) => ite.fileId !== item.fileId);
+    }
+    /**
+     * 附件是否是图片标识方法
+     * @param {object} item 附件对象
+     */
+    function isShowViewIconFun(item) {
+      const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'jfif'];
+      const fileExtension = item.name.toLowerCase().split('.').pop();
+      return imageExtensions.includes(fileExtension);
+    }
+    return {
+      t,
+      formData,
+      cfForm,
+      getType,
+      getRules,
+      getArrOfJSONStr,
+      uploadHandleChange,
+      uploadRef,
+      clearFileItem,
+      dowFileItem,
+      viewFileItem,
+      isShowViewIconFun,
+      showImage,
+      imageSrc,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep.upload-attachment {
+  .el-upload.el-upload--text.is-drag {
+    padding: 0;
+    width: 10rem;
+    height: 10rem;
+    .el-upload-dragger {
+      padding: 0;
+      width: 10rem;
+      height: 10rem;
+      .el-icon--upload {
+        width: 2rem;
+        margin: 0;
+        line-height: 2rem;
+      }
+      .el-upload__text {
+        line-height: 2rem;
+      }
+    }
+  }
+}
+.file-list-show-text {
+  position: relative;
+  color: rgb(96, 98, 102);
+  padding-left: 5px;
+  margin-bottom: 5px;
+  box-sizing: border-box;
+  .file-list-show-text-name {
+    display: inline-block;
+    vertical-align: top;
+    width: 75%;
+  }
+}
+.file-list-show-text:hover {
+  background-color: rgb(245, 247, 250);
+  border-radius: 4px;
+  .eye-icon,
+  .down-icon,
+  .close-icon {
+    opacity: 1;
+  }
+}
+.eye-icon,
+.close-icon,
+.down-icon {
+  position: absolute;
+  cursor: pointer;
+  right: 0;
+  margin: 0 0 0 5px;
+  opacity: 0;
+}
+.eye-icon {
+  margin-right: 5px;
+  right: 20px;
+}
+.close-icon {
+  margin-right: 5px;
+}
+.down-icon {
+  right: 20px;
+}
+.eye-icon:hover,
+.down-icon:hover,
+.close-icon:hover {
+  color: rgb(64, 158, 255);
+}
+.ellipsis-single-line {
+  white-space: nowrap; /* 禁止换行 */
+  overflow: hidden; /* 隐藏超出内容 */
+  text-overflow: ellipsis; /* 显示省略号 */
+}
+</style>