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

<template>
  <div class="customer-css">
    <!--  查询时间和产品  -->
    <el-form :inline="true" label-position="top" label-width="100px" style="margin-top: 5px;">
      <el-form-item :label=labels.labelNo>
        <el-input v-model="pageData.labelNo" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item :label=labels.labelType>
        <el-input v-model="pageData.labelType" style="width: 120px"></el-input>
      </el-form-item>
<!--      <el-form-item :label=labels.labelName>
        <el-input v-model="pageData.labelName" style="width: 120px" ></el-input>
      </el-form-item>-->
      <el-form-item style="margin-top: 16px;">
        <el-button type="primary" @click="refreshPageTables()" class="customer-bun-mid"
                   style="margin-left: 10px;  margin-bottom: 5px;">{{ buttons.searchButton }}
        </el-button>
      </el-form-item>
      <el-form-item style="margin-top: 16px;">
        <el-button type="primary" @click="addLabelSettingModal()" :disabled="authAdd" class="customer-bun-mid"
                   style="margin-left: 10px;  margin-bottom: 5px;">{{ buttons.addButton }}
        </el-button>
      </el-form-item>
      <el-form-item style="margin-top: 16px;">
        <el-button type="success" @click="openPaperManagement()" class="customer-bun-mid2"
                   style="margin-left: 10px; width: 140px; margin-bottom: 5px;">{{ buttons.paperManagementButton }}
        </el-button>
      </el-form-item>
      <el-form-item style="margin-top: 16px;">
        <el-button type="success" @click="openDataSourceManagement()"
                   style="margin-left: 10px;  margin-bottom: 5px; width: 160px; padding: 5px 5px;">{{ buttons.dataSourceManagementButton }}
        </el-button>
      </el-form-item>
      <el-form-item style="margin-top: 16px;">
        <el-button type="success" @click="openLabelTypeManagement()"
                   style="margin-left: 10px;  margin-bottom: 5px; width: 150px; padding: 5px 5px;">{{ buttons.labelTypeManagementButton }}
        </el-button>
      </el-form-item>
    </el-form>
    <!--  标签列表数据  -->

      <el-table @row-click="setCurrentRow"
                :height="height"
                highlight-current-row
                :data="labelArrays"
                border
                v-loading="dataListLoading"
                style="width: 100%;">
        <el-table-column
          v-for="(item,index) in columnList" :key="index"
          :sortable="item.columnSortable"
          :prop="item.columnProp"
          :header-align="item.headerAlign"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :align="item.align"
          :fixed="item.fixed==''?false:item.fixed"
          :width="item.columnWidth"
          :label="item.columnLabel">
          <template slot-scope="scope">
            <span v-if="!item.columnHidden"> {{ displayColumnValue(item.columnProp, scope.row[item.columnProp]) }}</span>
            <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]"
                                               style="width: 100px; height: 80px"/></span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="left"
          header-align="center"
          align="center"
          width="210"
          :label=labels.operationLabel>
          <template slot-scope="scope">
            <a class="customer-a"  v-if="!authEdit" @click="copyLabelConfirm(scope.row)">{{ $t('labelSetting.list.oneClickCopy') }}</a>
            <a class="customer-a"  v-if="!authEdit" @click="editLabelSettingModal(scope.row)">{{ labels.editLabel }}</a>
            <a class="customer-a"  v-if="!authDelete" @click="deleteLabelSettingConfirm(scope.row)">{{ labels.deleteLabel }}</a>
<!--            <a class="customer-a"  v-if="!authEdit" @click="labelParameterModal(scope.row)">{{ labels.printParameterLabel }}</a>
            <a class="customer-a" v-if="!authEdit"  @click="labelContentModal(scope.row)">{{ labels.printContentLabel }}</a>-->
            <a class="customer-a" v-if="!authEdit"  @click="labelDrawModal(scope.row)">{{ labels.printDrawLabel }}</a>
          </template>
        </el-table-column>
      </el-table>



    <!-- 新增或者修改的modal   -->
    <comAddUpdateLabel  ref="comAddUpdateLabel" @refreshPageTables="refreshPageTables" v-drag></comAddUpdateLabel>
    <!-- 新增或者修改的modal   -->
    <comShowLabelParameter  ref="comShowLabelParameter" @refreshPageTables="refreshPageTables" v-drag></comShowLabelParameter>
    <!-- 新增或者修改的modal   -->
    <comShowLabelContent  ref="comShowLabelContent" @refreshPageTables="refreshPageTables" v-drag></comShowLabelContent>

    <!-- 纸张管理对话框 -->
    <PaperManagementDialog
      :visible.sync="paperManagementVisible"
      @paper-updated="handlePaperUpdated"
    />

    <!-- 数据源管理对话框 -->
    <DataSourceManagementDialog
      :visible.sync="dataSourceManagementVisible"
      @data-source-updated="handleDataSourceUpdated"
    />

    <!-- 标签类型管理对话框 -->
    <LabelTypeManagementDialog
      :visible.sync="labelTypeManagementVisible"
      @label-type-updated="handleLabelTypeUpdated"
    />

  </div>
</template>

<script>

import {
  getLabelSettingList,
  deleteLabelSetting,
  copyLabelSetting,
} from '@/api/labelSetting/label_setting.js';

/*引入組件*/
import comAddUpdateLabel from "./com_add_update_label";/*新增或者修改的組件*/
import comShowLabelParameter from "./com_show_label_parameter";/*打印参数维护的組件*/
import comShowLabelContent from "./com_show_label_content";/*打印内容定义数维护的組件*/
import PaperManagementDialog from "./components/PaperManagementDialog.vue";/*纸张管理对话框*/
import DataSourceManagementDialog from "./components/DataSourceManagementDialog.vue";/*数据源管理对话框*/
import LabelTypeManagementDialog from "./components/LabelTypeManagementDialog.vue";/*标签类型管理对话框*/
import { labelSettingColumnText } from "./labelTypeDisplay";
/* 动态表头 */
import {
  saveTableDefaultList,
  getTableDefaultListLanguage,
  getTableUserListLanguage,
  removerDefault,
  removerUser
} from '@/api/table.js'

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

var functionId = '100008001';

export default {
  data() {
    return {
      height: 800,
      authEdit: false,
      authAdd: false,
      authDelete: false,
      menuId: this.$route.meta.menuId,
      menuShow: false,
      showDefault: false,
      pageData: {
        site: this.$store.state.user.site,
        username: this.$store.state.user.name,
        labelNo: '',
        labelName: '',
        labelType: '',
        searchFlag: 'Y'
      },
      currentRow: {},
      labelArrays: [],
      dataListLoading: false,
      columnList: [
        {
          userId: this.$store.state.user.name,
          functionId: '100008001',
          serialNumber: '100008001LabelLabelNo',
          tableId: '100008001Label',
          tableName: this.$t('labelSetting.list.customLabelList'),
          columnProp: 'labelNo',
          headerAlign: 'center',
          align: 'center',
          columnLabel: this.$t('labelSetting.fields.labelNo'),
          columnWidth: 100,
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        },
        {
          userId: this.$store.state.user.name,
          functionId: '100008001',
          serialNumber: '100008001LabelLabelType',
          tableId: '100008001Label',
          tableName: this.$t('labelSetting.list.customLabelList'),
          columnProp: 'labelType',
          headerAlign: 'center',
          align: 'center',
          columnLabel: this.$t('labelSetting.fields.labelType'),
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        },
        {
          userId: this.$store.state.user.name,
          functionId: '100008001',
          serialNumber: '100008001LabelLabelType',
          tableId: '100008001Label',
          tableName: this.$t('labelSetting.list.customLabelList'),
          columnProp: 'rfidFlag',
          headerAlign: 'center',
          align: 'center',
          columnLabel: this.$t('labelSetting.fields.rfidLabel'),
          columnHidden: false,
          columnImage: false,
          columnSortable: true,
          sortLv: 0,
          status: true,
          fixed: ''
        },
        {
          userId: this.$store.state.user.name,
          functionId: '100008001',
          serialNumber: '100008001LabelRemark',
          tableId: '100008001Label',
          tableName: this.$t('labelSetting.list.customLabelList'),
          columnProp: 'remark',
          headerAlign: 'center',
          align: 'left',
          columnLabel: this.$t('labelSetting.fields.remark'),
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 0,
          status: true,
          fixed: ''
        },
      ],
      queryTable: {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: '100008001Label',
        languageCode: this.$i18n.locale
      },
      // 用户table 查询参数
      queryTableUser: {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: '100008001Label',
        status: true,
        languageCode: this.$i18n.locale
      },
      // 用户table 配置集合
      userColumnList: [],
      buttons: {
        searchButton: this.$t('labelSetting.common.search'),
        addButton: this.$t('labelSetting.common.add'),
        paperManagementButton: this.$t('labelSetting.paper.managementTitle'),
        dataSourceManagementButton: this.$t('labelSetting.dataSource.managementTitle'),
        labelTypeManagementButton: this.$t('labelSetting.labelType.managementTitle'),
      },
      queryButton: {
        functionId: functionId,
        table_id: '*',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      },
      labels: {
        labelNo: this.$t('labelSetting.fields.labelNoColon'),
        labelType: this.$t('labelSetting.fields.labelTypeColon'),
        labelName: this.$t('labelSetting.fields.reportFileNameColon'),
        operationLabel: this.$t('labelSetting.common.operation'),
        editLabel: this.$t('labelSetting.common.edit'),
        deleteLabel: this.$t('labelSetting.common.delete'),
        printParameterLabel: this.$t('labelSetting.list.printParameters'),
        printContentLabel: this.$t('labelSetting.list.printContentDefinition'),
        printDrawLabel: this.$t('labelSetting.list.printDraw'),
        sureDeleteThisRecord: this.$t('labelSetting.list.sureDeleteRecord'),
        sureCopyThisRecord: this.$t('labelSetting.list.sureCopyLabel', { labelNo: '' }),
        tipsLabel: this.$t('labelSetting.common.tip'),
        confirmLabel: this.$t('labelSetting.common.confirm'),
        cancelLabel: this.$t('labelSetting.common.cancel'),
      },
      queryLabel: {
        functionId: functionId,
        table_id: '*',
        languageCode: this.$i18n.locale,
        objectType: 'label'
      },
      // 纸张管理对话框状态
      paperManagementVisible: false,
      // 数据源管理对话框状态
      dataSourceManagementVisible: false,
      // 标签类型管理对话框状态
      labelTypeManagementVisible: false,
    }
  },

  /*组件*/
  components: {
    comAddUpdateLabel,/*标签新增或者修改的组件*/
    comShowLabelParameter,/*打印参数维护的组件*/
    comShowLabelContent,/*标签打印内容定义*/
    PaperManagementDialog,/*纸张管理对话框*/
    DataSourceManagementDialog,/*数据源管理对话框*/
    LabelTypeManagementDialog,/*标签类型管理对话框*/
  },

  mounted() {
    this.$nextTick(() => {
      this.height = window.innerHeight - 165;
    })
  },
  methods: {
    /* 列表展示走语言包，不改行数据里的中文原值 */
    displayColumnValue(columnProp, storedValue) {
      return labelSettingColumnText(this.$i18n, columnProp, storedValue)
    },

    /* 刷新页面table */
    refreshPageTables() {
      this.currentRow = {};
      //重置是否查询
      this.pageData.searchFlag = 'Y';
      this.refreshLabelSettingList();
    },

    // 获取当前列表的信息
    refreshLabelSettingList() {
      // 查询当前页面的参数
      getLabelSettingList(this.pageData).then(({data}) => {
        // 设置查询数据
        this.labelArrays = data.rows;
      })
    },

    /*新增标签定义的modal*/
    addLabelSettingModal(){
      let currentData = {
        site: this.$store.state.user.site,
        username: this.$store.state.user.name,
        labelNo: '*',
        labelName: '',
        labelType: '外箱标签',
        labelClass: '打印软件',
        printDirection : '纵向设计',
        remark: '',
        addFlag: 'Y'
      };
      //打开组件 去做新增业务
      this.$nextTick(() => {
        this.$refs.comAddUpdateLabel.init(currentData);
      })
    },

    /*修改标签定义的modal*/
    editLabelSettingModal(row){
      let currentData = row;
      currentData.addFlag = 'N';
      //打开组件 去做修改业务
      this.$nextTick(() => {
        this.$refs.comAddUpdateLabel.init(currentData);
      })
    },

    /*删除标签*/
    deleteLabelSettingConfirm(row){
      this.$confirm(this.labels.sureDeleteThisRecord, this.labels.tipsLabel, {
        confirmButtonText: this.labels.confirmLabel,
        cancelButtonText: this.labels.cancelLabel,
        type: 'warning'
      }).then(() => {
        deleteLabelSetting(row).then(({data}) => {
          if (data && data.code == 200) {
            this.refreshPageTables();
            this.$message.success(data.msg);
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },

    /*打印参数modal设置*/
    labelParameterModal(row){
      let currentData = row;
      //打开组件 去做修改业务
      this.$nextTick(() => {
        this.$refs.comShowLabelParameter.init(currentData);
      })
    },

    /*标签打印定义功能*/
    labelContentModal(row){
      let currentData = row;
      //打开组件 去做修改业务
      this.$nextTick(() => {
        this.$refs.comShowLabelContent.init(currentData);
      })
    },

    labelDrawModal(row){
      let currentData = row;

      // 调试信息：显示当前标签的打印方向
      console.log('标签绘制跳转:', {
        labelNo: currentData.labelNo,
        printDirection: currentData.printDirection,
        paperOrientation: currentData.paperOrientation
      });

      // 判断是否为横向打印
      const isLandscape = currentData.printDirection === '横向打印' ||
                         currentData.printDirection === '横向设计' ||
                         currentData.paperOrientation === 'landscape';

      if (isLandscape) {
        localStorage.setItem('paperId',currentData.paperId);
        console.log('跳转到横向标签绘制页面');
        this.$router.push({
          name: 'labelSetting-label_draw2',
          params: {labelSetting: currentData}
        });
      } else {
        console.log('跳转到纵向标签绘制页面');
        this.$router.push({
          name: 'labelSetting-label_draw',
          params: {labelSetting: currentData}
        });
      }
    },

    /* 设置选中行的参数 */
    setCurrentRow(row, column, event) {
      this.currentRow = JSON.parse(JSON.stringify(row))
    },

    // 获取 用户保存的 格式列
    getTableUserColumn() {
      getTableUserListLanguage(this.queryTableUser).then(({data}) => {
        if (data && data.code == 0 && data.rows.length > 0) {
          // this.columnList = []
          this.columnList = data.rows
        } else {
          //this.getColumnList()
        }
      })
    },

    // 获取 tableDefault 列
    getColumnList() {
      getTableDefaultListLanguage(this.queryTable).then(({data}) => {
        if (data && data.code == 0 && data.rows.length > 0) {
          // this.showDefault = false
          this.columnList = data.rows
        } else {
          // this.showDefault = true
        }
      })
    },

    //获取按钮的权限数据
    getButtonAuthData(){
      let updateFlag = this.isAuth(this.menuId+":revise");
      let fullControFlag = this.isAuth(this.menuId+":fullContro");
      let deleteFlag = this.isAuth(this.menuId+":remove");
      //处理页面的权限数据
      this.authEdit = !updateFlag && !fullControFlag;
      this.authAdd = !fullControFlag;
      this.authDelete = !deleteFlag;
    },

    /*打开纸张管理对话框*/
    openPaperManagement() {
      this.paperManagementVisible = true;
    },

    /*处理纸张更新事件*/
    handlePaperUpdated(event) {
      console.log('纸张数据已更新:', event);
      // 这里可以添加纸张更新后的处理逻辑
      // 比如刷新相关的选择器组件等
    },

    /*打开数据源管理对话框*/
    openDataSourceManagement() {
      this.dataSourceManagementVisible = true;
    },

    /*处理数据源更新事件*/
    handleDataSourceUpdated(event) {
      console.log('数据源数据已更新:', event);
      // 这里可以添加数据源更新后的处理逻辑
    },

    /*打开标签类型管理对话框*/
    openLabelTypeManagement() {
      this.labelTypeManagementVisible = true;
    },

    /*处理标签类型更新事件*/
    handleLabelTypeUpdated(event) {
      console.log('标签类型数据已更新:', event);
      // 这里可以添加标签类型更新后的处理逻辑
      // 比如刷新标签类型下拉列表等
    },

    /*一键复制标签确认*/
    copyLabelConfirm(row) {
      this.$confirm(this.$t('labelSetting.list.sureCopyLabel', { labelNo: row.labelNo }), this.labels.tipsLabel, {
        confirmButtonText: this.labels.confirmLabel,
        cancelButtonText: this.labels.cancelLabel,
        type: 'info'
      }).then(() => {
        this.copyLabel(row);
      });
    },

    /*复制标签功能*/
    async copyLabel(originalLabel) {
      try {
        // 调用后台接口，一次性完成标签复制（包括基本信息和绘制内容）
        const copyData = {
          site: this.$store.state.user.site,
          username: this.$store.state.user.name,
          originalLabelNo: originalLabel.labelNo,
          // 传递原标签的所有信息给后台
          originalLabel: originalLabel
        };

        const result = await copyLabelSetting(copyData);

        if (result.data.code === 200) {
          this.refreshPageTables();
          this.$message.success(this.$t('labelSetting.list.copySuccess', { labelNo: result.data.data.newLabelNo }));
        } else {
          this.$message.error(this.$t('labelSetting.list.copyFailed') + ': ' + result.data.msg);
        }

      } catch (error) {
        console.error('复制标签失败:', error);
        this.$message.error(this.$t('labelSetting.list.copyRetry'));
      }
    },


    /*//获取多语言的信息
    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.refreshLabelSettingList();
    // 获取动态表头的信息
    this.getTableUserColumn()
    //获取按钮的权限
    this.getButtonAuthData();
    //刷新页面的多语言信息
    //this.getMultiLanguageList();

  }

}
</script>

<style>
.el-textarea__inner {
  padding: 5px 5px;
}

</style>

<!--当前页面的标签样式-->
<style scoped lang="scss">

/*针对el-card*/
.customer-card .el-form-item__content {
  margin-top: -15px;
}

.customer-card .el-form-item {
  height: 22px;
}

.customer-border .el-form-item__content {
  margin-top: -30px;
}

/*全局年与日类型  宽度*/
div.el-time-width {
  width: 110px !important;
}

/* 全局时间右边框*/
.customer-css input.el-input__inner {
  height: 22px !important;
  padding-right: 0px !important;
}

/* 控制el-card标签的数据*/
div.customer-el-card {
  margin-left: 110px;
  margin-top: -15px;
  height: 20px;
  width: 60px;
}

/* 颜色控制 */
div.customer-el-card-pink {
  background: #FF00FF;
}

div.customer-el-card-orange {
  background: #FFD700;
}

div.customer-el-card-blue {
  background: #0000CD;
}

/*清掉样式*/
.el-radio + .el-radio {
  margin-left: 0px;
}

/*当前按钮的通用样式*/
.customer-css .customer-bun-mid {
  width: 60px;
  text-align: center;
}

.customer-css .customer-bun-mid2 {
  width: 70px;
  text-align: center;
}

/*当前按钮的通用样式*/
.customer-css .el-button--medium {
  padding: 5px 5px;
}

/*添加主菜单和明细菜单的样式*/
.customer-css .customer-dropdown .el-button--primary {
  padding: 2px;
  font-size: 12px;
}

.el-dropdown-menu--medium .el-dropdown-menu__item {
  line-height: 18px;
  padding: 0 17px;
  font-size: 12px;
}

hr {
  margin-top: 0px;
}


/*控制上下间距*/
</style>