syntec3-0-ui-components-test 1.0.0

package/src/views/productionWorkOrder/productionFlowLabel/component/addCirculationLabel.vue

@@ -0,0 +1,394 @@
+<template>
+  <div class="circulationLabel" data-test-id="DIV-4R8Tdg">
+    <el-form
+      ref="formRef"
+      :model="addTagNumber"
+      label-width="auto"
+      label-position="right"
+      :rules="tagNumberRules"
+      data-test-id="EL-FORM-4A0VHk"
+    >
+      <span class="labelItem" data-test-id="SPAN-6lRKVk"> {{ t('manuallyAddCirculationLabels') }} </span>
+      <el-form-item prop="circulationTagNumber" data-test-id="EL-FORM-ITEM-XroJGE">
+        <template #label>
+          <el-tooltip
+            v-if="t('circulationTagNumber').length > 7"
+            effect="dark"
+            :content="t('circulationTagNumber')"
+            placement="top"
+            data-test-id="EL-TOOLTIP-7KucIu"
+          >
+            <template #default>
+              <span data-test-id="SPAN-fcvPiz">{{ `${t('circulationTagNumber').slice(0, 7)}...` }}</span>
+            </template>
+          </el-tooltip>
+          <span v-else data-test-id="SPAN-se3k8m"> {{ t('circulationTagNumber') }} </span>
+        </template>
+        <el-input
+          ref="circulationTagNumber"
+          v-model="addTagNumber.circulationTagNumber"
+          :disabled="labelType !== 'issue'"
+          class="formInput"
+          data-test-id="EL-INPUT-KcVFkQ"
+          @keyup.enter="keyDown(formRef)"
+        />
+      </el-form-item>
+      <el-form-item prop="numberOfTags" data-test-id="EL-FORM-ITEM-MxMhjN">
+        <template #label>
+          <el-tooltip
+            v-if="t('numberOfTags').length > 7"
+            effect="dark"
+            :content="t('numberOfTags')"
+            placement="top"
+            data-test-id="EL-TOOLTIP-T0lfIe"
+          >
+            <template #default>
+              <span data-test-id="SPAN-vbvBt4">{{ `${t('numberOfTags').slice(0, 7)}...` }}</span>
+            </template>
+          </el-tooltip>
+          <span v-else data-test-id="SPAN-NEIGqn"> {{ t('numberOfTags') }} </span>
+        </template>
+        <el-input
+          v-model="addTagNumber.numberOfTags"
+          :disabled="labelType !== 'issue'"
+          class="formInput"
+          data-test-id="EL-INPUT-bIumKF"
+        />
+        <el-button
+          size="default"
+          type="primary"
+          class="ml-5"
+          :loading="props.buttonLoading"
+          :disabled="labelInformation.newQuantity === 0 || labelType !== 'issue'"
+          data-test-id="EL-BUTTON-zvetBI"
+          @click="keyDown(formRef)"
+        >
+          <v-icon class="mdi mdi-plus" data-test-id="V-ICON-DLLK8e" />{{ t('add') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+  <div class="circulationLabel" data-test-id="DIV-rqlF9H">
+    <el-form
+      ref="formRefIssue"
+      :rules="issueTabNumberRules"
+      :model="issueTagNumber"
+      label-width="auto"
+      label-position="right"
+      data-test-id="EL-FORM-GqWUM9"
+    >
+      <span class="labelItem" data-test-id="SPAN-SJqDoL"> {{ t('batchIssuanceOfCirculationLabels') }} </span>
+      <el-form-item prop="numberRuleName" data-test-id="EL-FORM-ITEM-ZiV3pY">
+        <template #label>
+          <el-tooltip
+            v-if="t('numberRuleName').length > 7"
+            effect="dark"
+            :content="t('numberRuleName')"
+            placement="top"
+            data-test-id="EL-TOOLTIP-aSm7aX"
+          >
+            <template #default>
+              <span data-test-id="SPAN-V8L3Qh">{{ `${t('numberRuleName').slice(0, 7)}...` }}</span>
+            </template>
+          </el-tooltip>
+          <span v-else data-test-id="SPAN-huBVhp"> {{ t('numberRuleName') }} </span>
+        </template>
+        <el-select
+          v-model="issueTagNumber.numberRuleName"
+          :disabled="labelType !== 'issue'"
+          class="formInput"
+          data-test-id="EL-SELECT-UKzdTp"
+          @change="handleSelectChange"
+        >
+          <el-option
+            v-for="item in props.systemNumber"
+            :key="item.numberName"
+            :label="item.numberName"
+            :value="item"
+            data-test-id="EL-OPTION-ulbYwl"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="previewOfNumberingRules" data-test-id="EL-FORM-ITEM-qzVO40">
+        <template #label>
+          <el-tooltip
+            v-if="t('previewOfNumberingRules').length > 7"
+            effect="dark"
+            :content="t('previewOfNumberingRules')"
+            placement="top"
+            data-test-id="EL-TOOLTIP-hSzpS6"
+          >
+            <template #default>
+              <span data-test-id="SPAN-sug7y3">{{ `${t('previewOfNumberingRules').slice(0, 7)}...` }}</span>
+            </template>
+          </el-tooltip>
+          <span v-else data-test-id="SPAN-Brqkv2"> {{ t('previewOfNumberingRules') }} </span>
+        </template>
+        <el-input
+          v-model="issueTagNumber.previewOfNumberingRules"
+          readonly
+          class="formInput"
+          data-test-id="EL-INPUT-iA50VF"
+        />
+      </el-form-item>
+      <el-form-item prop="numberOfTags" data-test-id="EL-FORM-ITEM-uIHEPm">
+        <template #label>
+          <el-tooltip
+            v-if="t('numberOfTags').length > 7"
+            effect="dark"
+            :content="t('numberOfTags')"
+            placement="top"
+            data-test-id="EL-TOOLTIP-YhGGL5"
+          >
+            <template #default>
+              <span data-test-id="SPAN-bviC0x">{{ `${t('numberOfTags').slice(0, 7)}...` }}</span>
+            </template>
+          </el-tooltip>
+          <span v-else data-test-id="SPAN-8Dgj3D"> {{ t('numberOfTags') }} </span>
+        </template>
+        <el-input
+          v-model="issueTagNumber.numberOfTags"
+          :disabled="labelType !== 'issue'"
+          class="formInput"
+          data-test-id="EL-INPUT-isu6K4"
+        />
+      </el-form-item>
+      <el-form-item prop="batchIssuanceQuantity" data-test-id="EL-FORM-ITEM-K6zl5U">
+        <template #label>
+          <el-tooltip
+            v-if="t('batchIssuanceQuantity').length > 7"
+            effect="dark"
+            :content="t('batchIssuanceQuantity')"
+            placement="top"
+            data-test-id="EL-TOOLTIP-ByG4hS"
+          >
+            <template #default>
+              <span data-test-id="SPAN-i3QsOD">{{ `${t('batchIssuanceQuantity').slice(0, 7)}...` }}</span>
+            </template>
+          </el-tooltip>
+          <span v-else data-test-id="SPAN-IFc3ek"> {{ t('batchIssuanceQuantity') }} </span>
+        </template>
+        <el-input
+          v-model="issueTagNumber.batchIssuanceQuantity"
+          :disabled="labelType !== 'issue'"
+          class="formInput"
+          data-test-id="EL-INPUT-pXb3Wj"
+        />
+        <el-button
+          size="default"
+          type="primary"
+          class="ml-5"
+          :loading="props.buttonLoading"
+          :disabled="labelInformation.newQuantity === 0 || labelType !== 'issue'"
+          data-test-id="EL-BUTTON-2CkaaK"
+          @click="handleIssue(formRefIssue)"
+        >
+          <v-icon class="mdi mdi-shape-square-plus" data-test-id="V-ICON-3eJRX9" />{{ t('generate') }}
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus';
+import { onMounted, ref, inject, reactive, computed, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+/* 通信 */
+const props = defineProps({
+  addInformation: Object || Array,
+  systemNumber: Array,
+  buttonLoading: Boolean,
+});
+const emits = defineEmits(['updateAddInformation', 'issueAddInformation']);
+const labelType = inject('type');
+const labelInformation = inject('labelInformation');
+
+/* 手动新增相关相关 */
+const formRef = ref(null);
+const addTagNumber = ref({
+  circulationTagNumber: null,
+  numberOfTags: 1,
+});
+
+/* 验证规则相关 */
+// 验证规则：流转标签号
+const circulationTagNumberRules = (rule, value, callback) => {
+  if ((value ?? '') === '') {
+    return callback(new Error(t('requiredField')));
+  }
+  const regex = /^(?!\s)(?!.*\s$)[A-Za-z0-9]{1,50}$/;
+  if (!regex.test(value)) {
+    return callback(new Error(t('flowLabelSpecification')));
+  }
+  return callback();
+};
+// 验证规则：每张流转卡数量
+const numberOfTagsRules = (rule, value, callback) => {
+  if ((value ?? '') === '') {
+    return callback(new Error(t('requiredField')));
+  }
+  const regex = /^(?!0+$)(?!^\s|\s$)[1-9][0-9]*$/;
+  if (!regex.test(value)) {
+    return callback(new Error(t('onlySupportsPositiveIntegers')));
+  }
+  if (Number(value) - labelInformation.newQuantity > 0) {
+    return callback(new Error(t('remainingBindingQuantity') + labelInformation.newQuantity));
+  }
+  return callback();
+};
+const tagNumberRules = reactive({
+  circulationTagNumber: [{ validator: circulationTagNumberRules }],
+  numberOfTags: [{ validator: numberOfTagsRules }],
+});
+
+const circulationTagNumber = ref(null);
+/**
+ * 提交及回车事件
+ */
+const keyDown = (formEl) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      circulationTagNumber.value.focus();
+      //判断是否重复
+      const isRepeat = props.addInformation.filter(
+        (item) => item.circulationTagNumber === addTagNumber.value.circulationTagNumber,
+      );
+      if (isRepeat.length !== 0) {
+        ElMessage.error(t('theCirculationTagNumberIsAUniqueCodeAndCannotBeDuplicated'));
+        return;
+      }
+      emits('updateAddInformation', { ...addTagNumber.value, status: 1 });
+      labelInformation.newQuantity -= Number(addTagNumber.value.numberOfTags);
+      addTagNumber.value.circulationTagNumber = null;
+      formRef.value?.clearValidate();
+    }
+  });
+};
+
+/* 批量发行相关 */
+const formRefIssue = ref(null);
+const issueTagNumber = ref({
+  numberRuleName: null,
+  previewOfNumberingRules: null,
+  numberOfTags: 1,
+  batchIssuanceQuantity: null,
+});
+const maxIssuanceQuantity = computed(() => Math.ceil(labelInformation.newQuantity / issueTagNumber.value.numberOfTags));
+issueTagNumber.value.batchIssuanceQuantity = maxIssuanceQuantity.value;
+/* 监听发行部分每张流转卡数量，改变时更改相应批量发行数量 */
+watch(
+  () => issueTagNumber.value.numberOfTags,
+  () => {
+    issueTagNumber.value.batchIssuanceQuantity = maxIssuanceQuantity.value;
+  },
+);
+/* 监听可以新增数量，实时更新 */
+watch(
+  () => labelInformation.newQuantity,
+  () => {
+    issueTagNumber.value.batchIssuanceQuantity = maxIssuanceQuantity.value;
+  },
+);
+
+/* 批量发行验证规则 */
+//编号规则名称
+const numberRuleNameRules = (rule, value, callback) => {
+  if ((value ?? '') === '') {
+    return callback(new Error(t('thereIsNoCirculationLabelNumberingRule')));
+  }
+  return callback();
+};
+//每张流转卡数量
+const numberOfTagsRulesIssue = (rule, value, callback) => {
+  if ((value ?? '') === '') {
+    return callback(new Error(t('requiredField')));
+  }
+  const regex = /^(?!0+$)(?!^\s|\s$)[1-9][0-9]*$/;
+  if (!regex.test(value)) {
+    return callback(new Error(t('onlySupportsPositiveIntegers')));
+  }
+  if (Number(value) - labelInformation.newQuantity > 0) {
+    return callback(new Error(t('remainingBindingQuantity') + labelInformation.newQuantity));
+  }
+  return callback();
+};
+//批量发行数量
+const batchIssuanceQuantityRules = (rule, value, callback) => {
+  if ((value ?? '') === '') {
+    return callback(new Error(t('requiredField')));
+  }
+  const regex = /^(?!0+$)(?!^\s|\s$)[1-9][0-9]*$/;
+  if (!regex.test(value)) {
+    return callback(new Error(t('onlySupportsPositiveIntegers')));
+  }
+  if (Number(value) - maxIssuanceQuantity.value > 0) {
+    return callback(new Error(t('insufficientRemainingIssuableQuantity')));
+  }
+  return callback();
+};
+const issueTabNumberRules = reactive({
+  numberOfTags: [{ validator: numberOfTagsRulesIssue }],
+  batchIssuanceQuantity: [{ validator: batchIssuanceQuantityRules }],
+  numberRuleName: [{ validator: numberRuleNameRules }],
+});
+
+/**
+ * 下拉选择修改预览
+ * @param val 下拉选择项
+ */
+const handleSelectChange = (val) => {
+  issueTagNumber.value.previewOfNumberingRules = val.previewNumber;
+};
+/**
+ * 获取编号规则-页面初始状态下默认选中一条
+ */
+const handleSystemNumber = (val) => {
+  if (val.length > 0) {
+    issueTagNumber.value.numberRuleName = val[0];
+    issueTagNumber.value.previewOfNumberingRules = val[0].previewNumber;
+  }
+};
+/**
+ * 生成按钮
+ * @param formEl formRef
+ */
+const handleIssue = (formEl) => {
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      if (!issueTagNumber.value.numberRuleName) {
+        ElMessage.error(t('thereIsNoCirculationLabelNumberingRule'));
+        return;
+      }
+      emits('issueAddInformation', { ...issueTagNumber.value, status: 0 });
+    }
+  });
+};
+onMounted(() => {
+  nextTick(async () => {
+    if (labelType === 'issue') {
+      handleSystemNumber(props.systemNumber);
+      circulationTagNumber.value?.focus();
+    }
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.circulationLabel {
+  padding: 50px 10px 0px 10px;
+}
+.labelItem {
+  line-height: 3rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #205b8f;
+}
+.formInput {
+  max-width: 65%;
+}
+</style>

package/src/views/productionWorkOrder/productionFlowLabel/component/circulationLabelTable.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-table
+    v-loading="props.tableLoading"
+    :data="tableData"
+    border
+    style="height: calc(100vh - 11rem)"
+    header-row-class-name="tableHeader"
+    header-cell-class-name="tableHeaderCell"
+    data-test-id="EL-TABLE-iJBS6G"
+    @selection-change="handleSelectionChange"
+  >
+    <el-table-column align="center" type="selection" width="55" data-test-id="EL-TABLE-COLUMN-X3f0xk" />
+    <el-table-column
+      prop="index"
+      :label="t('itemIndex')"
+      width="100"
+      align="center"
+      data-test-id="EL-TABLE-COLUMN-GTWbL9"
+    >
+      <template #default="scope">{{ scope.$index + 1 }}</template>
+    </el-table-column>
+    <el-table-column
+      v-for="item in tableColumns"
+      :key="item.value"
+      :prop="item.value"
+      :label="item.text"
+      show-overflow-tooltip
+      align="center"
+      data-test-id="EL-TABLE-COLUMN-aZ0Wkn"
+    >
+      <template #default="{ row, column }">
+        <span data-test-id="SPAN-LYFZXL">
+          {{ row[column.property] ?? '-' }}
+        </span>
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-if="labelType === 'issue'"
+      align="center"
+      width="100"
+      :label="t('action')"
+      data-test-id="EL-TABLE-COLUMN-YdBefU"
+    >
+      <template #default="scope">
+        <el-tooltip
+          v-if="scope.row.status === 1"
+          effect="dark"
+          :content="t('delete')"
+          placement="top"
+          data-test-id="EL-TOOLTIP-8M9Okr"
+        >
+          <el-button link type="primary" data-test-id="EL-BUTTON-YQDipD" @click="deleteItem(scope.$index, scope.row)">
+            <v-icon class="mdi mdi-delete" data-test-id="V-ICON-zPe0Jb" />
+          </el-button>
+        </el-tooltip>
+        <el-tooltip v-else effect="dark" :content="t('unbinded')" placement="top" data-test-id="EL-TOOLTIP-tnCOjd">
+          <el-button link type="primary" data-test-id="EL-BUTTON-sKP7px" @click="unbindedItem(scope.$index, scope.row)">
+            <v-icon class="mdi mdi-link" data-test-id="V-ICON-gLd3HR" />
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup>
+import { ElMessageBox } from 'element-plus';
+import { computed, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  addInformation: Object || Array,
+  tableLoading: Boolean,
+});
+const emits = defineEmits(['deleteItem', 'unbindedItem', 'selectRowList']);
+const labelType = inject('type');
+/* 表格相关 */
+const tableColumns = computed(() => [
+  {
+    text: t('circulationTagNumber'),
+    value: 'circulationTagNumber',
+  },
+  {
+    text: t('countOfTags'),
+    value: 'numberOfTags',
+  },
+]);
+const tableData = computed(() => props.addInformation);
+
+/**
+ * 删除
+ * @param index 索引
+ * @param row 行数据
+ */
+const deleteItem = (index, row) => {
+  emits('deleteItem', index, row);
+};
+/**
+ * 解绑
+ * @param index 索引
+ * @param row 行数据
+ */
+const unbindedItem = (index, row) => {
+  ElMessageBox.confirm(t('areYouSureToUnbind'), t('warning'), {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning',
+  }).then(async () => {
+    emits('unbindedItem', index, row);
+  });
+};
+
+/**
+ * 表格行选择事件
+ * @param item 勾选项
+ */
+const handleSelectionChange = (item) => {
+  emits('selectRowList', item);
+};
+</script>
+
+<style scoped lang="scss"></style>

package/src/views/productionWorkOrder/productionFlowLabel/component/materialPartFilePreview.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-dialog
+    v-model="showDialog"
+    :title="t('filePreview')"
+    width="50%"
+    destroy-on-close
+    center
+    align-center
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :modal-append-to-body="true"
+    :append-to-body="true"
+    style="border-radius: 6px"
+    data-test-id="EL-DIALOG-OUDw27-productionWorkOrder-materialPartFilePreview"
+  >
+    <div data-test-id="DIV-GzCoGO-productionWorkOrder-materialPartFilePreview">
+      <el-table
+        v-loading="tableLoading"
+        :data="previewData"
+        height="60vh"
+        header-row-class-name="tableHeader"
+        header-cell-class-name="tableHeaderCell"
+        :border="true"
+        scrollbar-always-on
+        show-overflow-tooltip
+        data-test-id="EL-TABLE-xcakfh-productionWorkOrder-materialPartFilePreview"
+      >
+        <el-table-column
+          width="60"
+          :align="tableAlign"
+          label="#"
+          data-test-id="EL-TABLE-COLUMN-8KX1B4-productionWorkOrder-materialPartFilePreview"
+        >
+          <template #default="scope">{{ scope.$index + 1 }}</template>
+        </el-table-column>
+        <el-table-column
+          :align="tableAlign"
+          prop="fileName"
+          :label="t('fileName')"
+          data-test-id="EL-TABLE-COLUMN-EnR3wc-productionWorkOrder-materialPartFilePreview"
+        >
+        </el-table-column>
+        <el-table-column
+          width="100"
+          :align="tableAlign"
+          :label="t('action')"
+          data-test-id="EL-TABLE-COLUMN-5PxQoE-productionWorkOrder-materialPartFilePreview"
+        >
+          <template #default="scope">
+            <el-tooltip
+              :content="t('preview')"
+              placement="top"
+              :enterable="false"
+              :data-test-id="`EL-TOOLTIP-Ki6eYC-${scope.$index}-productionWorkOrder-materialPartFilePreview`"
+            >
+              <el-button
+                type="primary"
+                link
+                :disabled="scope.row.isDisabled"
+                :data-test-id="`EL-BUTTON-x8VH7g-${scope.$index}-productionWorkOrder-materialPartFilePreview`"
+                @click="handleClickPreview(scope.row)"
+              >
+                <v-icon
+                  class="mdi mdi-file-eye"
+                  :data-test-id="`V-ICON-pu9AWO-${scope.$index}-productionWorkOrder-materialPartFilePreview`"
+                />
+              </el-button>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <template #footer>
+      <el-button
+        type="primary"
+        data-test-id="EL-BUTTON-RFLfJQ-productionWorkOrder-materialPartFilePreview"
+        @click="showDialog = false"
+      >
+        {{ $t('close') }}
+      </el-button>
+    </template>
+    <el-image
+      ref="imgViewRef"
+      style="width: 100px; height: 100px; display: none"
+      :src="previewUrl"
+      :zoom-rate="1.2"
+      :preview-teleported="true"
+      :preview-src-list="[previewUrl]"
+      :initial-index="1"
+      fit="cover"
+      data-test-id="EL-IMAGE-XDsHgs-productionWorkOrder-materialPartFilePreview"
+    />
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+const tableLoading = ref(false);
+const previewUrl = ref('');
+const imgViewRef = ref(null);
+const previewData = ref([]);
+const tableAlign = ref('center');
+const showDialog = ref(false);
+
+// 打开弹窗
+const handleOpenDialog = (list) => {
+  previewUrl.value = '';
+  tableLoading.value = false;
+  previewData.value =
+    list && list.length
+      ? list.map((item) => {
+          const fileType = item.plmFileName
+            ? item.plmFileName.includes('.')
+              ? item.plmFileName.split('.').pop().toLowerCase()
+              : ''
+            : '';
+          const isDisabled = !['jpeg', 'gif', 'jpg', 'png', 'pdf'].includes(fileType);
+          return { ...item, fileType, isDisabled, fileName: item.plmFileName };
+        })
+      : [];
+  showDialog.value = true;
+};
+
+// 预览
+const handleClickPreview = async (rowObj) => {
+  const { fileName, plmFileVersionId } = rowObj;
+  tableLoading.value = true;
+  previewUrl.value = '';
+  let res;
+  if (rowObj.fileType === 'pdf') {
+    res = await apiFunction
+      .downloadPlm({ plmFileVersionId })
+      .finally(() => (tableLoading.value = false))
+      .catch(() => ElMessage.error(t('apiError')));
+  } else {
+    res = await apiFunction
+      .getPlmFilePreviewStream({
+        plmFileVersionId,
+      })
+      .finally(() => (tableLoading.value = false))
+      .catch(() => ElMessage.error(t('apiError')));
+  }
+  if (res.status === 200) {
+    tableLoading.value = false;
+    const blob = new Blob([res.data], { type: res.data.type });
+    if (['jpeg', 'gif', 'jpg', 'png'].includes(rowObj.fileType)) {
+      previewUrl.value = URL.createObjectURL(blob);
+      setTimeout(() => imgViewRef.value.$el.children[0].click(), 0);
+    }
+    if (rowObj.fileType === 'pdf') {
+      const pdfBlob = new Blob([res.data], { type: 'application/pdf' });
+      const tempUrl = URL.createObjectURL(pdfBlob);
+      window.open(tempUrl, fileName);
+    }
+  }
+};
+
+defineExpose({ handleOpenDialog });
+</script>
+<style scoped lang="scss">
+@use '/src/scss/base/table.scss';
+</style>