wms-vue/src/views/modules/labelSetting/com_add_update_label.vue

<template>
  <div class="customer-css">
    <el-dialog :title="titleCon" :close-on-click-modal="false" :visible.sync="visible" width="380px" style="height: 380px;" class="customer-dialog">

        <el-form :inline="true" label-position="top" label-width="80px">
            <!-- 标签自定义信息 -->
                <el-row>
                  <el-col :span="12">
                    <el-form-item class="customer-item" :label=labels.labelNo>
                      <el-input v-model="pageData.labelNo" :readonly="labelNoReadOnly"  ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item class="customer-item" :label=labels.labelType>
                      <el-select  v-model="pageData.labelType" :loading="dataListLoading">
                        <el-option
                          v-for="option in labelTypeOptions"
                          :key="option.value"
                          :label="displayLabelType(option.value)"
                          :value="option.value">
                        </el-option>
                      </el-select >
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item class="customer-item" :label="$t('labelSetting.fields.rfidLabel')">
                      <el-select v-model="pageData.rfidFlag"  >
                        <el-option :label="$t('labelSetting.common.yes')" value="Y"></el-option>
                        <el-option :label="$t('labelSetting.common.no')" value="N"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
<!--                  <el-col :span="12">
                    <el-form-item class="customer-item" :label=labels.printDirection>
                      <el-select v-model="pageData.printDirection"  >
                        <el-option :label="$t('labelSetting.options.portrait')" value="纵向设计"></el-option>
                        <el-option :label="$t('labelSetting.options.landscape')" value="横向设计"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
&lt;!&ndash;                  <el-col :span="12">
                    <el-form-item class="customer-item" :label=labels.labelName>
                      <el-input v-model="pageData.labelName"  ></el-input>
                    </el-form-item>
                  </el-col>&ndash;&gt;
                  <el-col :span="12">
                    <el-form-item class="customer-item" :label=labels.labelClass>
                      <el-select v-model="pageData.labelClass"  >
                        <el-option :label="$t('labelSetting.options.printSoftware')" value="打印软件"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>-->
                  <el-col :span="12">
                    <el-form-item class="customer-item" :label=labels.remark>
                      <el-input v-model="pageData.remark"  ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="saveLabelSetting()">{{ buttons.saveButton }}</el-button>
            <el-button type="primary" @click="closeDialog">{{buttons.closeButton}}</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  insertLabelSetting,
  updateLabelSetting,
  getLabelTypeList,
} from '@/api/labelSetting/com_add_update_label.js';
import { labelTypeDisplayText } from './labelTypeDisplay';

import {
  searchSysLanguagePackList,
  searchSysLanguageParam,
  searchFunctionButtonList,
  saveButtonList,
  searchSysLanguage,
  searchLanguageListByLanguageCode,
  saveSysLanguageOne,
  searchPageLanguageData,
  removerLanguage,
  saveSysLanguageList
} from "@/api/sysLanguage.js";

var functionId = 'C10000043';

export default {
  data() {
    return {
      titleCon: this.$t('labelSetting.form.customTitle'),
      showDefault: false,
      visible: false,
      pageData: {
        site: this.$store.state.user.site,
        username: this.$store.state.user.name,
        labelNo: '',
        labelType: '',
        labelName: '',
        labelClass: '',
        remark: '',
        addFlag: false,
        printDirection : '纵向设计',
        rfidFlag:''
      },
      labelNoReadOnly: false,
      dataListLoading: false,
      labelTypeOptions: [], // 标签类型选项列表
      buttons: {
        saveButton: this.$t('labelSetting.common.save'),
        closeButton: this.$t('labelSetting.common.close'),
      },
      queryButton: {
        functionId: functionId,
        table_id: '*',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      },
      labels: {
        titleCon: this.$t('labelSetting.form.customTitle'),
        labelNo: this.$t('labelSetting.fields.labelNoColon'),
        labelType: this.$t('labelSetting.fields.labelTypeColon'),
        labelName: this.$t('labelSetting.fields.reportFileNameColon'),
        labelClass: this.$t('labelSetting.fields.labelClassColon'),
        printDirection: this.$t('labelSetting.fields.printDirectionColon'),
        remark: this.$t('labelSetting.fields.remarkColon'),
        confirmLabel: this.$t('labelSetting.common.confirm'),
        cancelLabel: this.$t('labelSetting.common.cancel'),
        labelNoCantBeNull: this.$t('labelSetting.form.labelNoRequired'),
        labelTypeCantBeNull: this.$t('labelSetting.form.labelTypeRequired'),
        labelNameCantBeNull:  this.$t('labelSetting.form.reportFileRequired'),
  },
      queryLabel: {
        functionId: functionId,
        table_id: '*',
        languageCode: this.$i18n.locale,
        objectType: 'label'
      },
    }
  },
  methods: {
    //初始化组件的参数
    init(currentRow) {
      //初始化参数
      this.pageData = JSON.parse(JSON.stringify(currentRow));
      //打开页面
      this.visible = true;
      //判断是否是新增
      if(this.pageData.addFlag == 'Y'){
        this.labelNoReadOnly = true;
      }else{
        this.labelNoReadOnly = true;
      }
      //加载标签类型列表
      this.loadLabelTypeList();
      //判断是否启用多语言
      //this.getMultiLanguageList();
      //重置标题
      this.titleCon = this.labels.titleCon;
    },

    // 展示走语言包，value 仍是库里的中文类型名
    displayLabelType(storedName) {
      return labelTypeDisplayText(this.$i18n, storedName)
    },

    // 加载标签类型列表
    loadLabelTypeList() {
      this.dataListLoading = true;
      getLabelTypeList({
        site: this.$store.state.user.site || 'default'
      }).then(({data}) => {
        if (data.code === 200) {
          this.labelTypeOptions = data.data || [];
          console.log('标签类型加载成功:', this.labelTypeOptions.length);
        } else {
          this.$message({
            message: data.msg || this.$t('labelSetting.form.getLabelTypesFailed'),
            type: 'error',
            customClass: 'top-message'
          });
          this.labelTypeOptions = [];
        }
      }).catch(error => {
        console.error('获取标签类型失败:', error);
        this.$message({
          message: this.$t('labelSetting.form.getLabelTypesRetry'),
          type: 'error',
          customClass: 'top-message'
        });
        // 如果API调用失败，使用默认选项作为降级方案
        this.labelTypeOptions = [
          { label: this.$t('labelSetting.options.outerBoxLabel'), value: '外箱标签' },
          { label: this.$t('labelSetting.options.rollLabel'), value: '卷标签' }
        ];
      }).finally(() => {
        this.dataListLoading = false;
      });
    },

    /*保存标签自定义的信息*/
    saveLabelSetting(){
      //判断标签内容是否为空
      let labelNo = this.pageData.labelNo.trim();
      let labelType = this.pageData.labelType.trim();
      let rfidFlag = this.pageData.rfidFlag.trim();
      if(labelNo == null || labelNo === ''){
        this.$message.error(this.$t('labelSetting.form.labelNoRequired'));
        return false;
      }
      if(labelType == null || labelType === ''){
        this.$message.error(this.$t('labelSetting.form.labelTypeRequired'));
        return false;
      }
      if(rfidFlag == null || rfidFlag === ''){
        this.$message.error(this.$t('labelSetting.form.rfidRequired'));
        return false;
      }
      //判断是否是新增标签自定义
      if(this.pageData.addFlag === 'Y'){
        this.insertLabelSettingData();
      }else{
        this.updateLabelSettingData();
      }
    },

    /*数量失去焦点的事件*/
    insertLabelSettingData(){
      insertLabelSetting(this.pageData).then(({data}) => {
        if(data.code == 200){
          this.$message.success(data.msg);
          setTimeout(this.closeDialog(), 2000);
        }else{
          this.$message.error(data.msg);
        }
      })
    },

    /*验证时长的参数*/
    updateLabelSettingData(){
      updateLabelSetting(this.pageData).then(({data}) => {
        if(data.code == 200){
          this.$message.success(data.msg);
          setTimeout(this.closeDialog(), 2000);
        }else{
          this.$message.error(data.msg);
        }
      })
    },

    /*关闭modal*/
    closeDialog(){
      //刷新报工的页面
      this.$emit('refreshPageTables');
      //关闭当前的页面
      this.visible = false;
    },

    getMultiLanguageList() {
      //首先查询当前按钮的多语言
      searchFunctionButtonList(this.queryButton).then(({data}) => {
        if (data && data.code == 0 ) {
          this.buttons = data.data
        } else {
          // saveButtonList(this.buttonList).then(({data}) => {
          // })
        }
      });
      //其次查询当前标签的多语言
      searchFunctionButtonList(this.queryLabel).then(({data}) => {
        if (data && data.code == 0 ) {
          this.labels = data.data
        } else {
          // saveButtonList(this.buttonList).then(({data}) => {
          // })
        }
      });
    },

  },
  created() {
    // 预加载标签类型列表
    this.loadLabelTypeList();
  }
}

</script>

<style scoped lang="scss">
.customer-css {
  .customer-dialog {
    .customer-item {
      margin-bottom: 15px;
    }
  }
}
</style>

<!-- 确保消息提示显示在最上层 -->
<style>
.el-message.top-message {
  z-index: 4000 !important;
}
</style>