ckt-leble-vue/src/views/modules/label/format.vue

<script>
import {
  generateLabelFormatId,
  getLabelFormatList,
  removeLabelFormat,
  saveLabelFormat, updateLabelFormat
} from '../../../api/label/labelFormat'
import dayjs from 'dayjs'
import FormatCustomer from './customer/formatCustomer.vue'
import {getLabelFormatCustomerList} from '../../../api/label/labelFormatCustomer'
import {getTableDefaultListLanguage, getTableUserListLanguage} from '../../../api/table'

let labelFormat = {
  labelType: '',
  formatId: '',
  formatDesc: '',
  defaultFormat: '',
  remark: '',
  active: '',
}
export default {
  name: 'labelFormat',
  components: {FormatCustomer},
  props:{
    height: {
      type: Number,
      default: 350
    }
  },
  data(){
    return{
      labelFormat:{
        ...labelFormat,
      },
      saveLabelFormat: {
        ...labelFormat,
        defaultFormat: 'Y',
        active: 'Y',
      },
      rules:{
        formatDesc:[ { required: true, message: 'Please enter the format description', trigger: ['blur','change'] }],
      },
      labelFormatList:[],
      saveVisible: false,
      activeName: 'linkedCustomer',
      columnList:[
        {
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableLabelType',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "labelType",
          headerAlign: "center",
          align: "left",
          columnLabel: "Label Type",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        },{
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableFormatId',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "formatId",
          headerAlign: "center",
          align: "center",
          columnLabel: "Format ID",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },{
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableFormatDesc',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "formatDesc",
          headerAlign: "center",
          align: "left",
          columnLabel: "Format Desc",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },{
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableDefaultFormat',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "defaultFormat",
          headerAlign: "center",
          align: "left",
          columnLabel: "Default Format",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },{
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableRemark',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "remark",
          headerAlign: "center",
          align: "left",
          columnLabel: "Remark",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 180
        },
        {
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableCreateBy',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "createBy",
          headerAlign: "center",
          align: "left",
          columnLabel: "Created By",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        },{
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableCreateTime',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "createTime",
          headerAlign: "center",
          align: "center",
          columnLabel: "Created Time",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        },{
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableUpdateBy',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "updateBy",
          headerAlign: "center",
          align: "left",
          columnLabel: "Updated By",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 80
        },{
          userId: this.$store.state.user.name,
          functionId: 30002,
          serialNumber: '30002TableUpdateTime',
          tableId: "30002Table",
          tableName: "标签模板信息表",
          columnProp: "updateTime",
          headerAlign: "center",
          align: "center",
          columnLabel: "Updated Time",
          columnHidden: false,
          columnImage: false,
          columnSortable: false,
          sortLv: 10,
          status: true,
          fixed: '',
          columnWidth: 140
        },
      ],
      labelFormatTableLoading:false,
      currentRow:{},
      customerList:[],
    }
  },
  watch:{
    currentRow(newValue, oldValue){
      this.getLabelFormatCustomerList();
    },
    "labelFormat.formatId"(newVal,oldVal){
      this.labelFormat.formatId = newVal.toUpperCase()
    }
  },
  methods:{
    handleSave(){
      this.saveLabelFormat = {
        ...labelFormat,
        defaultFormat: 'Y',
        active: 'Y',
        labelType: 'Shipment Carton',
      }
      let params = {
        site: this.$store.state.user.site,
      }
      generateLabelFormatId(params).then(({data})=>{
        if (data && data.code === 0){
          this.saveLabelFormat.formatId = data.id;
          this.saveVisible = true;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    getLabelFormatList(){
      let params = {
        ...this.labelFormat,
        site: this.$store.state.user.site,
      }
      this.labelFormatTableLoading = true;
      getLabelFormatList(params).then(({data})=>{
        if (data && data.code === 0){
          this.labelFormatList = data.rows;
          if (this.labelFormatList.length > 0){
            this.currentRow = this.labelFormatList[0];
          }
        }else {
          this.$message.warning(data.msg);
        }
        this.labelFormatTableLoading = false;
      }).catch((error)=>{
        this.$message.error(error);
        this.labelFormatTableLoading = false;
      })
    },
    handeSaveLabelFormat(){
      this.$refs.labelFormat.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.saveLabelFormat,
            site: this.$store.state.user.site,
            createBy:this.$store.state.user.name,
            createTime:dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          saveLabelFormat(params).then(({data})=>{
            if (data && data.code === 0){
              this.getLabelFormatList();
              this.$message.success(data.msg);
              this.saveVisible = false;
            }else {
              this.$message.warning(data.msg);
            }
          }).catch((error)=>{
            this.$message.error(error);
          })
        }else{
          for (let i = 0; i < Object.keys(obj).length; i++) {
            this.$message.warning(obj[Object.keys(obj)[i]][0].message)
            return
          }
        }
      })
    },
    removeLabelFormat(row){
      removeLabelFormat(row).then(({data})=>{
        if (data && data.code === 0){
          this.getLabelFormatList();
          this.$message.success(data.msg);
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    handleUpdate(row){
      this.saveLabelFormat = {
        ...row,
      }
      this.saveVisible = true;
    },
    updateLabelFormat(){
      this.$refs.labelFormat.validate((valid,obj) => {
        if (valid){
          let params = {
            ...this.saveLabelFormat,
            updateBy:this.$store.state.user.name,
            updateTime:dayjs().format('YYYY-MM-DD HH:mm:ss'),
          }
          updateLabelFormat(params).then(({data})=>{
            if (data && data.code === 0){
              this.getLabelFormatList();
              this.$message.success(data.msg);
              this.saveVisible = false;
            }else {
              this.$message.warning(data.msg);
            }
          }).catch((error)=>{
            this.$message.error(error);
          })
        }else{
          for (let i = 0; i < Object.keys(obj).length; i++) {
            this.$message.warning(obj[Object.keys(obj)[i]][0].message)
            return
          }
        }
      })
    },
    handleRowClick(row , column, event){
      this.currentRow = {...row};
    },
    rowLabelFormatStyle({row}){
      if (row.formatId === this.currentRow.formatId){
        return {
          background: 'rgb(232,246,246)',
        }
      }
    },
    getLabelFormatCustomerList(){
      let params = {
        site:this.currentRow.site,
        formatId:this.currentRow.formatId,
      }
      getLabelFormatCustomerList(params).then(({data})=>{
        if (data && data.code === 0){
          this.customerList = data.rows;
        }else {
          this.$message.warning(data.msg);
        }
      }).catch((error)=>{
        this.$message.error(error);
      })
    },
    async getTableUserColumn (tableId, columnId) {
      let queryTableUser = {
        userId: this.$store.state.user.name,
        functionId: this.$route.meta.menuId,
        tableId: tableId,
        status: true,
        languageCode: this.$i18n.locale
      }
      await getTableUserListLanguage(queryTableUser).then(({data}) => {
        if (data.rows.length > 0) {
          this.caseTable(data.rows,columnId)
        } else {
          this.getColumnList(tableId, columnId)
        }
      })
    },

// 获取 tableDefault 列
    async getColumnList (tableId, columnId) {
      let queryTable = {
        functionId: this.$route.meta.menuId,
        tableId: tableId,
        languageCode: this.$i18n.locale
      }
      await getTableDefaultListLanguage(queryTable).then(({data}) => {
        if (!data.rows.length === 0) {
          this.caseTable(data.rows,columnId)
        } else {

        }
      })
    },
    caseTable(list,columnId){
      if (list.length > 0){
        switch (columnId) {
          case 1:
            this.columnList = list
            break;
        }
      }
    },
  },
  created () {
    this.getLabelFormatList();
    this.getTableUserColumn("30002Table",1)
  }
}
</script>

<template>
<div>
  <el-form :inline="true" label-position="top" :model="labelFormat">
    <el-form-item label="Label Type">
      <el-select v-model="labelFormat.labelType" placeholder="">
        <el-option label="All" value=""></el-option>
        <el-option label="Shipment Carton" value="Shipment Carton"></el-option>
        <el-option label="Roll Label" value="Roll Label"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="Format ID">
        <el-input v-model="labelFormat.formatId"></el-input>
    </el-form-item>
    <el-form-item label="Format Desc">
        <el-input v-model="labelFormat.formatDesc"></el-input>
    </el-form-item>
    <el-form-item label="Active">
      <el-select v-model="labelFormat.active" placeholder="">
        <el-option label="All" value=""></el-option>
        <el-option label="Active" value="Y"></el-option>
        <el-option label="Not Active" value="N"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label=" ">
      <el-button type="primary" @click="handleSave">New</el-button>
      <el-button type="primary" @click="getLabelFormatList">Query</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="labelFormatList" :row-style="rowLabelFormatStyle" @row-click="handleRowClick" :loading="labelFormatTableLoading" border style="width: 100%;margin-top: 5px" :height="height">
    <el-table-column
      header-align="center"
      align="center"
      width="100"
      fixed="left"
      label="Actions">
      <template slot-scope="scope">
        <el-link style="cursor:pointer;" @click="handleUpdate(scope.row)">Edit</el-link>
        <el-link style="cursor:pointer;" @click="removeLabelFormat(scope.row)">Delete</el-link>
      </template>
    </el-table-column>
    <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"
      :min-width="item.columnWidth"
      :label="item.columnLabel">
      <template slot-scope="scope">
        <span v-if="!item.columnHidden"> {{ 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>

  <el-tabs v-model="activeName">
    <el-tab-pane label="Linked Customer" name="linkedCustomer">
      <format-customer :label-format="currentRow" :data-list="customerList" @refresh="getLabelFormatCustomerList"></format-customer>
    </el-tab-pane>
  </el-tabs>

  <el-dialog v-drag :title="`Label Format`" :close-on-click-modal="false" :visible.sync="saveVisible" width="600px">
    <el-form :model="saveLabelFormat" label-position="top" :rules="rules" ref="labelFormat">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="Label Type">
            <el-select v-model="saveLabelFormat.labelType" placeholder="" :disabled="saveLabelFormat.site" style="width: 100%">
              <el-option label="Shipment Carton" value="Shipment Carton"></el-option>
              <el-option label="Roll Label" value="Roll Label"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="Format ID">
            <el-input readonly disabled v-model="saveLabelFormat.formatId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" ">
            <el-checkbox v-model="saveLabelFormat.defaultFormat" true-label="Y" false-label="N"> Default Format </el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="Format Desc" prop="formatDesc" :show-message="false">
            <el-input v-model="saveLabelFormat.formatDesc"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" ">
            <el-checkbox v-model="saveLabelFormat.active" true-label="Y" false-label="N"> Active </el-checkbox>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Remark" class="remark">
            <el-input type="textarea" v-model="saveLabelFormat.remark" :rows="3" resize="none"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="saveLabelFormat.site" @click="updateLabelFormat">Save</el-button>
      <el-button type="primary" v-else @click="handeSaveLabelFormat">Save</el-button>
      <el-button @click="saveVisible=false">Cancel</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>
.remark /deep/ .el-form-item__content{
  height: auto;
  line-height: 1.5;
}
</style>