廖井涛
2024-05-11 91f291a2c3b4e41fc0b44f2395ad5c956803ee8c
north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue
@@ -1,10 +1,12 @@
<script setup>
import {computed, onMounted, reactive, ref} from "vue"
import {computed, onMounted, reactive, ref, watch} from "vue"
import {useRouter,useRoute} from "vue-router"
import request from "@/utils/request"
import {ElMessage} from "element-plus"
import {changeFilterEvent,filterChanged} from "@/hook"
import {addListener,toolbarButtonClickEvent} from "@/hook/mouseMove"
import {useI18n} from "vue-i18n"
import {Flag, Location} from "@element-plus/icons-vue";
const { t } = useI18n()
const router = useRouter()
@@ -12,6 +14,7 @@
let dialogTableVisible = ref(false)
let craftVisible = ref(false)
const xGrid = ref()
const trademarkLocation=ref(['左上','右上','左下','右下'])
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
@@ -41,7 +44,7 @@
    showStatus: true
  },//表头参数
  columns:[
    {title: t('basicData.operate'), width: 110, slots: { default: 'button_slot' },fixed:"left",},
    {title: t('basicData.operate'), width: 220, slots: { default: 'button_slot' },fixed:"left",},
    {field: 'orderNumber',width:120,  title: t('order.OrderNum'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    //{field: 'orderDetail.buildingNumber',width:120,  title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderDetail.productName',width:120,  title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
@@ -56,7 +59,7 @@
    {field: 'area',width:120,  title: t('craft.area'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.quantity',width:120,  title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'process',width:120,  title: t('craft.process'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'icon',width:120,  title: t('order.icon'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'icon',width:120,  title: t('order.icon'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.processingNote',width:120,  title: t('order.processingNote'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.remarks',width:120,  title: t('basicData.remarks'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.edgingType',width:120,  title: t('order.edgingType'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}
@@ -70,6 +73,17 @@
    // { row: 0, col: 7, rowspan: 4, colspan: 1 },
    // { row: 0, col: 8, rowspan: 4, colspan: 1 },
  ],
  menuConfig:{
    body:{
      options:[
          [
            { code: 'copyChecked', name: t('basicData.selectSame'), prefixIcon: 'vxe-icon-copy', visible: true, disabled: false },
            { code: 'copyAll', name: t('basicData.sameAfterwards'), prefixIcon: 'vxe-icon-feedback', visible: true, disabled: false },
            { code: 'clearChecked', name: t('basicData.clearSelection'), prefixIcon: 'vxe-icon-indicator', visible: true, disabled: false },
          ]
      ]
    }
  },
  toolbarConfig: {
    buttons: [
      {'code': 'remarks', 'name': t('order.processingNote')},
@@ -121,6 +135,51 @@
        }
      }
    }
  },
  menuClick ({ menu, row, column }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (menu.code) {
        case 'copyChecked' :{
          let result = toolbarButtonClickEvent()
          if(result){
            const dataList = xGrid.value.getTableData().visibleData
            const val = dataList[result.start][result.cell]
            dataList.forEach((item,index) =>{
              if(index>=result.start && index<=result.end){
                item[result.cell] = val
              }
            })
          }
          break
        }
        case 'copyAll' :{
          let result = toolbarButtonClickEvent()
          if(result){
            const dataList = xGrid.value.getTableData().visibleData
            const val = dataList[result.start][result.cell]
            dataList.forEach((item,index) =>{
              if(index>=result.start ){
                item[result.cell] = val
              }
            })
          }
          break
        }
        case 'clearChecked' :{
          let result = toolbarButtonClickEvent()
          if(result){
            const dataList = xGrid.value.getTableData().visibleData
            dataList.forEach((item,index) =>{
              if(index>=result.start && index<=result.end){
                item[result.cell] = ''
              }
            })
          }
          break
        }
      }
    }
  }
}
// 定义表头上传数据
@@ -150,10 +209,31 @@
  processingNote:''
})
const trademarkAttr = ref({
  trademark:null,
  xImage:null,
  yImage:null,
  tag:null,
  tag2:null ,
  tag3:null,
  xMargin:null,
  yMargin:null,
  location:[]
})
let process =  ref([])
request.get(`/basicData/BasicDataByType/product/process`).then((res) =>{
  if (res.code==200){
    process.value=res.data
  }
})
const trademarkList =ref([])
request.get(`/basicData/BasicDataByType/order/icon`).then((res) =>{
  if (res.code==200){
    trademarkList.value = res.data
  }
})
@@ -165,6 +245,33 @@
  })
  rowIndex.value = row
}
//修改商标选项
let trademarkVisible = ref(false)
const updateTrademark = (row) => {
  trademarkVisible.value= true
  Object.keys(trademarkAttr.value).forEach((key) => {
    if(key==='location'){
      trademarkAttr.value[key] = []
    }else{
      trademarkAttr.value[key] = ''
    }
  })
  if(row.icon!=null){
    trademarkAttr.value = JSON.parse(row.icon)
  }
  rowIndex.value = row
}
const changeTrademark = ()=>{
  rowIndex.value.icon = JSON.stringify(trademarkAttr.value)
  trademarkVisible.value=false
  Object.keys(trademarkAttr.value).forEach((key) => (trademarkAttr.value[key] = ''))
}
const  craftObj  = reactive({
  newCraft: [],
  oldCraft: []
@@ -187,6 +294,7 @@
//初始化判断是否有id传入
onMounted(()=>{
  addListener(xGrid.value,gridOptions)
  const str = route.query.orderId
  if (typeof str === 'undefined' || str === null || str === '' || str === '\n' || str === '\r'){
    return
@@ -208,12 +316,7 @@
        gridOptions.toolbarConfig.buttons[2].disabled = true
      }
      xGrid.value.reloadData(res.data.orderGlassDetails)
      //xGrid.value.reloadData(res.data.orderDetails)
    }else{
      ElMessage.error(res.msg)
    }
@@ -238,9 +341,21 @@
  })
}
const tagCheck =  (state) => {
  return trademarkAttr.value.location === state
}
const resetTrademark = () => {
  for(const key in trademarkAttr.value){
    trademarkAttr.value[key] = ''
    if(key==='location'){
      trademarkAttr.value[key] = []
    }
  }
}
//
</script>
<template>
@@ -293,6 +408,7 @@
        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="updateCraft(row)" link type="primary" size="small">{{t('craft.updateCraft')}}</el-button>
          <el-button @click="updateTrademark(row)" link type="primary" size="small">修改商标</el-button>
        </template>
        <template #num1_filter="{ column, $panel }">
@@ -305,7 +421,11 @@
      </vxe-grid>
    </div>
    <el-dialog v-model="dialogTableVisible" :title="$t('order.processingNote')" style="width: 60%;height:75% ">
    <el-dialog
        v-model="dialogTableVisible"
        :title="$t('order.processingNote')"
        style="width: 60%;height:75% ">
      <el-input
          v-model="titleUploadData.processingNote"
          type="textarea"
@@ -313,7 +433,12 @@
      />
    </el-dialog>
    <el-dialog v-model="craftVisible" :title="$t('craft.technologicalProcess')" style="width: 60%;height:60% ;position: relative;" >
    <el-dialog id="processChange"
               v-model="craftVisible"
               :title="$t('craft.technologicalProcess')"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               style="width: 60%;height:60% ;position: relative;" >
      <h5>{{$t('craft.processAttribute')}}</h5>
      <el-checkbox
          v-model="craftObj.newCraft"
@@ -337,9 +462,174 @@
          <el-button type="primary" @click="saveCraft">{{$t('basicData.save')}}</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
        id="trademark"
        v-model="trademarkVisible"
        :title="'商标参数'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        style="width: 922px;height:443px ;
        position: relative;" >
      <div style="width: 50%;height: 100%;float: left">
        <el-row style="">
          <el-col :span="4">商标选项:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.trademark"
                        >
              <el-option :value="item.basicName" v-for="item in trademarkList" />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">X轴镜像:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.xImage">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">Y轴镜像:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.yImage">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">打标使能:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">二维码打印:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag2">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">标签3使能:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag3">
              <el-option :value="true" :label="'是'"/>
              <el-option :value="false" :label="'否'"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">X轴边距:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.xMargin"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">Y轴边距:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.yMargin"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">商标位置:</el-col>
          <el-col :span="25">
            <el-radio v-model="trademarkAttr.location" v-for="item in trademarkLocation" :label="item"  />
          </el-col>
        </el-row>
        <el-row>
          <el-col >
            <el-button @click="changeTrademark" style="float:right;" type="primary" >{{$t('craft.sure')}}</el-button>
            <el-button @click="resetTrademark" style="float:right;margin-right: 0.5rem" type="primary" >{{$t('craft.reset')}}</el-button>
          </el-col>
        </el-row>
      </div>
      <div style="width: 400px;height: 250px;border: 2px solid #000;float: left;position: relative;">
        <div
            v-if="tagCheck('左上')"
            style="float: left;width: 60px;height: 60px;margin-left: 1rem">
          <el-row>
            <el-col :span="20"><el-image :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}" src="/trademark.png"/></el-col>
          </el-row>
          <el-row style="margin-top: -25px" >
            <el-col :span="5" >X:</el-col>
            <el-col :span="2" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row >
            <el-col :span="5" >Y:</el-col>
            <el-col :span="2" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
        </div>
        <div
            v-if="tagCheck('右上')"
            style="float: right;width: 60px;height: 60px;margin-right: 1rem">
          <el-row>
            <el-col :span="20"><el-image  :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}" src="/trademark.png"/></el-col>
          </el-row>
          <el-row style="margin-top: -25px" >
            <el-col :span="5" >X:</el-col>
            <el-col :span="2" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row >
            <el-col :span="5" >Y:</el-col>
            <el-col :span="2" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
        </div>
        <div
            v-if="tagCheck('左下')"
            style="width: 60px;height: 60px;margin-left: 1rem;float: left;position: absolute;bottom: 15px">
          <el-row>
            <el-col :span="20"><el-image :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  src="/trademark.png"/></el-col>
          </el-row>
          <el-row style="margin-top: -25px" >
            <el-col :span="5" >X:</el-col>
            <el-col :span="2" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row >
            <el-col :span="5" >Y:</el-col>
            <el-col :span="2" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
        </div>
        <div
            v-if="tagCheck('右下')"
            style="width: 60px;height: 60px;position: absolute;bottom: 15px;right: 1rem">
          <el-row>
            <el-col :span="20">
              <el-image :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  src="/trademark.png"/>
            </el-col>
          </el-row>
          <el-row style="margin-top: -25px">
            <el-col :span="5" >X:</el-col>
            <el-col :span="2" >{{trademarkAttr.xMargin}}</el-col>
          </el-row>
          <el-row >
            <el-col :span="5" >Y:</el-col>
            <el-col :span="2" >{{trademarkAttr.yMargin}}</el-col>
          </el-row>
        </div>
      </div>
    </el-dialog>
  </div>
@@ -359,12 +649,28 @@
}
.order-detail{
  width: 100%;
  height: 90%;
  height: 85%;
}
.el-dialog .el-col{
#trademark .el-row,#trademark .el-col{
  border: 0
}
#processChange .el-col{
  border: 0;text-align: right
}
.el-dialog .el-text{
#processChange .el-text{
  font-weight: bolder
}
.vxe-grid {
  /* 禁用浏览器默认选中 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.xStyle{
  transform : rotateY(180deg)
}
.yStyle{
  transform : rotateX(180deg)
}
</style>