syntec3-0-ui-components-test 1.0.0

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

@@ -0,0 +1,28 @@
+<template>
+  <el-form inline data-test-id="EL-FORM-pc6sNQ">
+    <el-form-item
+      v-for="i in Object.entries(labelInformation)"
+      :key="i"
+      :label="`${t(i[0])}:`"
+      data-test-id="EL-FORM-ITEM-UG0QBp"
+    >
+      <span style="font-size: 1rem; font-weight: 600" data-test-id="SPAN-70loCf">
+        {{ i[1] }}
+      </span>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const labelInformation = inject('labelInformation');
+</script>
+
+<style lang="scss" scoped>
+.el-form-item {
+  margin-bottom: 5px;
+}
+</style>

package/src/views/productionWorkOrder/productionFlowLabel/index.vue

@@ -0,0 +1,604 @@
+<template>
+  <fullPageGlobal
+    v-model="dialogShow"
+    v-loading="loading"
+    :global-props="pageTitle"
+    data-test-id="FULLPAGEGLOBAL-A7yL2s"
+    @submit="submit"
+    @close="close"
+  >
+    <template #head_button>
+      <div v-for="b in buttonConfiguration" :key="b" style="display: inline" class="mr-3" data-test-id="DIV-6C3Jzz">
+        <el-dropdown v-if="b?.children" class="mr-1" data-test-id="EL-DROPDOWN-oVXKZ6">
+          <el-button
+            class="button_item_porcess"
+            type="primary"
+            link
+            :disabled="b.disabled"
+            data-test-id="EL-BUTTON-9rINep"
+            @click="b.func"
+          >
+            <i :class="b.icon" style="margin-right: 0.5rem" data-test-id="I-ivaMGQ" />
+            {{ b.text }}
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu data-test-id="EL-DROPDOWN-MENU-iFIQs2">
+              <el-dropdown-item v-for="d in b.children" :key="d" data-test-id="EL-DROPDOWN-ITEM-YSFJTJ">
+                <el-upload
+                  v-if="d.text === t('excelImport')"
+                  action="#"
+                  :auto-upload="false"
+                  :on-change="d.func"
+                  :show-file-list="false"
+                  accept=".xls,.xlsx"
+                  data-test-id="EL-UPLOAD-bc6rEM"
+                >
+                  <el-button
+                    class="button_item_porcess"
+                    type="primary"
+                    link
+                    :disabled="d.disabled"
+                    data-test-id="EL-BUTTON-rypkgr"
+                  >
+                    <i :class="d.icon" style="margin-right: 0.5rem" data-test-id="I-OBeBJJ" />
+                    {{ d.text }}
+                  </el-button>
+                </el-upload>
+                <el-button
+                  v-else
+                  class="button_item_porcess"
+                  type="primary"
+                  link
+                  :disabled="d.disabled"
+                  data-test-id="EL-BUTTON-u8TeWQ"
+                  @click="d.func"
+                >
+                  <i :class="d.icon" style="margin-right: 0.5rem" data-test-id="I-PAp2ms" />
+                  {{ d.text }}
+                </el-button>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+        <el-button
+          v-else
+          class="button_item_porcess"
+          type="primary"
+          link
+          :disabled="b.disabled"
+          data-test-id="EL-BUTTON-G5qsSe"
+          @click="b.func"
+        >
+          <i :class="b.icon" style="margin-right: 0.5rem" data-test-id="I-RRpVrn" />
+          {{ b.text }}
+        </el-button>
+      </div>
+    </template>
+    <div style="height: 100vh" data-test-id="DIV-DjuZAi">
+      <el-row class="panel_row" :gutter="20" data-test-id="EL-ROW-7Eq4yZ">
+        <el-col :span="12" data-test-id="EL-COL-XucTfL">
+          <workOrderInformation data-test-id="WORKORDERINFORMATION-00Y4Jr" />
+          <div v-loading="!systemNumberStatus" class="panel_left" data-test-id="DIV-hUIPZQ">
+            <addCirculationLabel
+              v-if="systemNumberStatus"
+              :add-information="addInformation"
+              :system-number="systemNumber"
+              :button-loading="buttonLoading"
+              data-test-id="ADDCIRCULATIONLABEL-G7NwFp"
+              @update-add-information="updateAddInformation"
+              @issue-add-information="issueAddInformation"
+            />
+          </div>
+        </el-col>
+        <el-col :span="12" data-test-id="EL-COL-Bp9Zzs">
+          <div class="table_name" data-test-id="DIV-4occB3">
+            <el-row data-test-id="EL-ROW-X2y9qm">
+              <el-col :span="14" data-test-id="EL-COL-dm1vmj">
+                <i class="mdi mdi-watermark mr-1" style="color: #2a69a2" data-test-id="I-5F8kxm" />
+                <span data-test-id="SPAN-rALqNw">{{ t('bindFlowLabelList') }}</span>
+              </el-col>
+              <el-col :span="6" data-test-id="EL-COL-fArVtC">
+                <el-select
+                  v-model="searchModel"
+                  class="mb-2 mt-2"
+                  filterable
+                  multiple
+                  collapse-tags
+                  collapse-tags-tooltip
+                  clearable
+                  :placeholder="t('selectTheCirculationTagNumber')"
+                  data-test-id="EL-SELECT-tWANHh"
+                >
+                  <el-option
+                    v-for="item in searchOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    data-test-id="EL-OPTION-Q41ToU"
+                  />
+                </el-select>
+              </el-col>
+              <el-col :span="1" data-test-id="EL-COL-a8qPCK"> </el-col>
+              <el-col :span="3" data-test-id="EL-COL-YaxqSA">
+                <el-button
+                  :loading="tableLoading"
+                  class="mb-2 mt-2"
+                  type="primary"
+                  style="float: right"
+                  data-test-id="EL-BUTTON-qKNXcD"
+                  @click="handleSearch"
+                >
+                  <v-icon class="mdi mdi-magnify" data-test-id="V-ICON-Le3Qa9" />{{ t('query') }}
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="panel_right" data-test-id="DIV-5EhGuY">
+            <circulationLabelTable
+              :add-information="addInformation"
+              :table-loading="tableLoading"
+              data-test-id="CIRCULATIONLABELTABLE-Cwfb3r"
+              @delete-item="deleteItem"
+              @unbinded-item="unbindedItem"
+              @select-row-list="selectTableData"
+              @show-table-loading="tableLoading = !tableLoading"
+            />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </fullPageGlobal>
+</template>
+
+<script setup>
+import { computed, onMounted, provide, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import fullPageGlobal from '@/components/Layout/modules/fullPageGlobal.vue';
+import addCirculationLabel from './component/addCirculationLabel.vue';
+import workOrderInformation from './component/workOrderInformation.vue';
+import circulationLabelTable from './component/circulationLabelTable.vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import untils from '@/plugins/excel';
+import apiFunction from '@/scriptFiles/checkApiErrorMechanism.js';
+
+const { t } = useI18n();
+/* 页面loading */
+const loading = ref(false);
+/* 通信 */
+const props = defineProps({
+  value: Boolean,
+  labelInformation: Object,
+});
+const emits = defineEmits(['closeProductionFlowLabel']);
+const dialogShow = computed({
+  get: () => props.value,
+  set: () => emits('closeProductionFlowLabel'),
+});
+/* 表格信息 status=0-绑定 status=1-新增 */
+const addInformation = ref([]);
+addInformation.value = [
+  { circulationTagNumber: 'lzbqt1', numberOfTags: 1, status: 0 },
+  { circulationTagNumber: 'lzbqt2', numberOfTags: 1, status: 0 },
+  { circulationTagNumber: 'lzbqt3', numberOfTags: 1, status: 0 },
+  { circulationTagNumber: 'lzbqt4', numberOfTags: 2, status: 0 },
+];
+
+/* 页面标题，通过进入时的type判断 */
+const pageTitle = computed(() => (props.labelInformation.type === 'issue' ? t('labelingIssuance') : t('tagPreview')));
+/* table部分子组件及新增部分子组件loading */
+const [tableLoading, buttonLoading] = [ref(false), ref(false)];
+
+/* 查询相关 */
+const searchModel = ref([]);
+const searchOptions = [
+  {
+    value: 'abc',
+    key: 'a',
+  },
+  {
+    value: 'bca',
+    key: 'b',
+  },
+  {
+    value: 'c',
+    key: 'c',
+  },
+  {
+    value: 'd',
+    key: 'd',
+  },
+  {
+    value: 'e',
+    key: 'e',
+  },
+];
+/**
+ * 模糊查询筛选列表
+ */
+const handleSearch = async () => {
+  tableLoading.value = true;
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  tableLoading.value = false;
+};
+
+const systemNumber = ref([]);
+const systemNumberStatus = ref(false); //用于确认是否加载完。加载完后渲染组件
+/**
+ * 获取编号规则
+ */
+const fetchSystemNumber = async () => {
+  try {
+    const param = {
+      startIndex: 0,
+      count: 200,
+      numberName: null,
+      targetForm: '3',
+    };
+    const { data } = await apiFunction.getSystemNumber(param);
+    if (data) {
+      systemNumber.value = data.content.data;
+    }
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  } finally {
+    systemNumberStatus.value = true;
+  }
+};
+
+/**
+ * 新增流转标签时将参数传递至父组件再转而更新表格数据
+ * @param {Object|Array} val 新增流转标签传递参数
+ */
+const updateAddInformation = (val) => {
+  addInformation.value = Array.isArray(val) ? [...val, ...addInformation.value] : [val, ...addInformation.value];
+};
+/**
+ * 生成流转标签时将参数传递至父组件再转而更新表格数据
+ * @param {Object} val 生成流转标签传递参数
+ */
+const issueAddInformation = async (val) => {
+  tableLoading.value = true;
+  buttonLoading.value = true;
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    const data = val;
+    console.log('[data]:', data);
+    ElMessage.success(t('successfullyGenerated'));
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  } finally {
+    tableLoading.value = false;
+    buttonLoading.value = false;
+  }
+};
+/**
+ * 表格行删除事件
+ * @param row 删除行数据
+ */
+const deleteItem = (index, row) => {
+  ElMessage.success(t('deleteSuccess'));
+  addInformation.value = addInformation.value.filter((item) => item.circulationTagNumber !== row.circulationTagNumber);
+  // eslint-disable-next-line no-use-before-define
+  productionWorkOrderInformation.value.newQuantity += Number(row.numberOfTags);
+};
+/**
+ * 表格行解绑事件
+ * @param row 解绑行数据
+ */
+const unbindedItem = async (index, row) => {
+  tableLoading.value = true;
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  tableLoading.value = false;
+  ElMessage.success(t('unbindSuccessfully'));
+  addInformation.value.splice(index, 1);
+  // eslint-disable-next-line no-use-before-define
+  productionWorkOrderInformation.value.boundQuantity -= Number(row.numberOfTags);
+};
+/**
+ * @param val 批量勾选数据
+ */
+const extractTableData = ref([]);
+const selectTableData = (val) => {
+  extractTableData.value = val;
+};
+
+/**
+ * 关闭dialog
+ */
+const close = () => {
+  if (props.labelInformation.type !== 'issue') {
+    dialogShow.value = false;
+    return;
+  }
+  ElMessageBox.confirm(t('closeAddTagNumber'), t('warning'), {
+    confirmButtonText: t('confirm'),
+    cancelButtonText: t('cancel'),
+    type: 'warning',
+  }).then(() => {
+    dialogShow.value = false;
+  });
+};
+
+/* 生产工单信息 */
+const productionWorkOrderInformation = ref({
+  productionOrderNumber: props.labelInformation.info.productionOrderNumber || '--',
+  partNumber: props.labelInformation.info.partNumber || '--',
+  productName: props.labelInformation.info.productName || '--',
+  materialSpec: props.labelInformation.info.materialSpec || '--',
+  productionOrderRequiredThroughput: props.labelInformation.info.productionOrderRequiredThroughput ?? '--',
+  boundQuantity: addInformation.value.map((item) => item['numberOfTags']).reduce((acc, curr) => acc + curr, 0),
+});
+productionWorkOrderInformation.value = {
+  ...productionWorkOrderInformation.value,
+  newQuantity:
+    productionWorkOrderInformation.value.productionOrderRequiredThroughput -
+    productionWorkOrderInformation.value.boundQuantity,
+};
+/* 监听解绑时的操作，按照解绑的标签数量修改剩余可以新增的标签数量 */
+watch(
+  () => productionWorkOrderInformation.value.boundQuantity,
+  (newValue, oldValue) => {
+    productionWorkOrderInformation.value.newQuantity += oldValue - newValue;
+  },
+);
+provide('labelInformation', productionWorkOrderInformation.value);
+provide('type', props.labelInformation.type);
+/**
+ * 标签发行--模板汇出
+ */
+const exportLabelIssuanceTemplate = () => {
+  const title = [[`*${t('circulationTagNumber')}`, t('countOfTags')]];
+  const templateArr = [];
+  templateArr[0] = {
+    title: [],
+    name: t('fillingInstructions'),
+    sheetName: t('fillingInstructions'),
+    body: [[t('exportLabelIssuanceTemplate')]],
+    wsmerges: [
+      { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
+      { s: { r: 1, c: 0 }, e: { r: 1, c: 6 } },
+      { s: { r: 2, c: 0 }, e: { r: 2, c: 6 } },
+      { s: { r: 3, c: 0 }, e: { r: 3, c: 6 } },
+      { s: { r: 4, c: 0 }, e: { r: 4, c: 6 } },
+      { s: { r: 5, c: 0 }, e: { r: 5, c: 6 } },
+      { s: { r: 6, c: 0 }, e: { r: 6, c: 6 } },
+      { s: { r: 7, c: 0 }, e: { r: 7, c: 6 } },
+    ],
+    wscols: [{ wch: 30 }, { wch: 30 }, { wch: 30 }, { wch: 30 }, { wch: 30 }, { wch: 30 }],
+  };
+  templateArr[1] = {
+    title,
+    body: [],
+    name: t('excelTemplate'),
+    sheetName: t('excelTemplate'),
+    wscols: [{ wch: 30 }, { wch: 30 }],
+  };
+  untils.exportBatchFromArray(templateArr, t('excelTemplate'));
+};
+
+/**
+ * 将excel导入的数组对象转成相应格式
+ * @param data 传入数组对象
+ */
+const transformData = (data) => {
+  return data.map((item) => {
+    // 解构原始对象的值
+    const { [`*${t('circulationTagNumber')}`]: circulationTagNumber, [t('countOfTags')]: numberOfTags } = item;
+
+    // 返回转换后的对象
+    return {
+      circulationTagNumber,
+      numberOfTags: numberOfTags || 1, //标签数量若不填写则默认为1
+      status: 1, // 新增的 status 字段
+    };
+  });
+};
+/**
+ * excel导入
+ * @param file 导入文件
+ */
+const importLabelIssuanceTemplate = async (file) => {
+  loading.value = true;
+  try {
+    //判断是否符合格式
+    const fileData = file.raw;
+    if (fileData.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
+      ElMessage.error(t('fileTypeErrorAndUploadXlsx'));
+      return;
+    }
+    //判断文件大小是否不超过5MB
+    if (fileData.size > 5 * 1024 * 1024) {
+      ElMessage.error(t('theFileSizeCannotExceed5Mb'));
+      return;
+    }
+    //判断资料是否为空
+    const importData = await untils.importInstructionsFromLocal(fileData);
+    if (importData.length === 0) {
+      ElMessage.error(t('excelImportNoData'));
+      return;
+    }
+    //判断流转标签是否符合规范
+    const importCirculationTagNumber = transformData(importData.body).map((item) =>
+      item.circulationTagNumber.toString(),
+    );
+    const regex = /^(?!\s)(?!.*\s$)[A-Za-z0-9]{1,50}$/;
+    const isSpecifications = importCirculationTagNumber.every((item) => regex.test(item));
+    if (!isSpecifications) {
+      ElMessage.error(t('flowLabelSpecification'));
+      return;
+    }
+    //判断资料中是否存在重复流转标签号
+    if (new Set(importCirculationTagNumber).size !== importCirculationTagNumber.length) {
+      ElMessage.error(t('duplicateCirculationTagNumber'));
+      return;
+    }
+    //判断流转标签号与表格内已有数据是否重复
+    const isRepeat = importCirculationTagNumber.some(
+      (item) => addInformation.value.filter((arr) => arr.circulationTagNumber === item).length > 0,
+    );
+    if (isRepeat) {
+      ElMessage.error(t('duplicateCirculationTagNumberWithNewlyAddedData'));
+      return;
+    }
+    //判断资料是否符合标签数量
+    const importTagNumber = transformData(importData.body).map((item) => item.numberOfTags);
+    const regexTagNumber = /^(?!0+$)(?!^\s|\s$)[1-9][0-9]*$/;
+    const isPositiveInteger = importTagNumber.every((item) => regexTagNumber.test(item));
+    if (!isPositiveInteger) {
+      ElMessage.error(t('onlySupportsPositiveIntegers'));
+      return;
+    }
+    if (importTagNumber.reduce((acc, curr) => acc + curr, 0) > productionWorkOrderInformation.value.newQuantity) {
+      ElMessage.error(t('insufficientNumberOfBindingsAvailable'));
+      return;
+    }
+
+    transformData(importData.body).map((item) => {
+      //全部判断完成，填入数据
+      productionWorkOrderInformation.value.newQuantity -= item.numberOfTags;
+    });
+    updateAddInformation(transformData(importData.body));
+    ElMessage.success(t('successfullyImported'));
+  } catch (error) {
+    ElMessage.error(t('importFail'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+/* 按钮配置 */
+const disabledBtn = ref(props.labelInformation.type === 'issue' ? false : true);
+/**
+ * 判断批量解绑及批量删除时，勾选情况
+ * @param data 勾选数据
+ * @param status 是否绑定 0-绑定 1-未绑定
+ * @param errorMessage 错误提示信息
+ */
+const checkSelection = (data, status, errorMessage) => {
+  if (data.length === 0) {
+    ElMessage.error(t(errorMessage));
+    return false;
+  }
+  const filteredItems = data.filter((item) => item.status === status);
+  if (filteredItems.length === 0) {
+    ElMessage.error(t(errorMessage));
+    return false;
+  }
+  return filteredItems;
+};
+const buttonConfiguration = computed(() => [
+  {
+    text: t('importExcelData'),
+    icon: 'mdi mdi-export',
+    disabled: disabledBtn.value,
+    children: [
+      {
+        text: t('exportTemplate'),
+        icon: 'mdi mdi-table-arrow-right',
+        disabled: disabledBtn.value,
+        func: exportLabelIssuanceTemplate,
+      },
+      {
+        text: t('excelImport'),
+        icon: 'mdi mdi-file-upload-outline',
+        disabled: disabledBtn.value,
+        func: importLabelIssuanceTemplate,
+      },
+    ],
+  },
+  {
+    text: t('batchUnbinding'),
+    icon: 'mdi mdi-link-off',
+    disabled: disabledBtn.value,
+    func: () => {
+      const selectedItems = checkSelection(extractTableData.value, 0, t('pleaseSelectTheBoundLabelFirst'));
+      if (!selectedItems) return;
+
+      ElMessageBox.confirm(t('areYouSureToUnbind'), t('warning'), {
+        confirmButtonText: t('confirm'),
+        cancelButtonText: t('cancel'),
+        type: 'warning',
+      }).then(async () => {
+        selectedItems.forEach((item) => {
+          addInformation.value = addInformation.value.filter(
+            (arr) => arr.circulationTagNumber !== item.circulationTagNumber,
+          );
+          productionWorkOrderInformation.value.boundQuantity -= Number(item.numberOfTags);
+        });
+        tableLoading.value = true;
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+        tableLoading.value = false;
+        extractTableData.value = [];
+        ElMessage.success(t('batchUnbindingSuccessful'));
+      });
+    },
+  },
+  {
+    text: t('fileMassDelete'),
+    icon: 'mdi mdi-delete-off',
+    disabled: disabledBtn.value,
+    func: () => {
+      const selectedItems = checkSelection(extractTableData.value, 1, t('pleaseSelectUnboundTagsFirst'));
+      if (!selectedItems) return;
+
+      selectedItems.forEach((item) => {
+        addInformation.value = addInformation.value.filter(
+          (arr) => arr.circulationTagNumber !== item.circulationTagNumber,
+        );
+        productionWorkOrderInformation.value.newQuantity += Number(item.numberOfTags);
+      });
+      extractTableData.value = [];
+      ElMessage.success(t('batchDeletionSuccessful'));
+    },
+  },
+]);
+
+/**
+ * 保存
+ */
+const submit = async () => {
+  loading.value = true;
+  try {
+    if (props.labelInformation.type !== 'issue') {
+      ElMessage.error(t('cannotSaveInPreviewState'));
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+    ElMessage.success(t('saveSuccess'));
+  } catch (error) {
+    ElMessage.error(t('apiError'));
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(async () => {
+  loading.value = true;
+  await fetchSystemNumber();
+  await handleSearch();
+  loading.value = false;
+});
+</script>
+
+<style lang="scss" scoped>
+.panel_row {
+  width: 100%;
+  height: 100%;
+}
+.panel_left {
+  height: calc(100vh - 12.75rem);
+  background-color: #edf3f8;
+  display: flex;
+  flex-direction: column;
+}
+.panel_right {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.table_name {
+  line-height: 2rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+</style>

package/src/views/production_work_order/components/priorityTooltip.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-tooltip placement="top" effect="light">
+      <i class="mdi mdi-information" data-test-id="I-LHAacq" />
+      <template #content>
+        <div v-for="(item, index) in priorityStatus" :key="index" data-test-id="DIV-RFpwHc">
+          <v-icon :class="item.icon" :style="`color: ${item.color};`" data-test-id="V-ICON-ZdtNsf" />
+          <span style="color: black; padding: 5px" data-test-id="SPAN-oEOumL"> {{ item.text }}</span>
+        </div>
+      </template>
+    </el-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+const priorityStatus = ref([
+  {
+    value: 4, // 最优先
+    text: t('topPriority'),
+    icon: 'mdi mdi-star-circle',
+    color: 'red',
+  },
+  {
+    value: 3, // 优先
+    text: t('priority'),
+    color: 'orange',
+    icon: 'mdi mdi-chevron-double-up',
+  },
+  {
+    value: 2, // 正常
+    text: t('normal'),
+    icon: 'mdi mdi-equal',
+    color: 'green',
+  },
+  {
+    value: 1, // 次要
+    text: t('secondary'),
+    icon: 'mdi mdi-chevron-double-down',
+    color: '#4481b8',
+  },
+  {
+    value: 0, // 最次要
+    text: t('leastImportant'),
+    icon: 'mdi mdi-chevron-triple-down',
+    color: 'grey',
+  },
+]);
+</script>
+
+<style></style>