chenlu
2024-08-27 5df5dba2a321098fd0fc7e18b71549f5c2312049
north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue
@@ -1,132 +1,109 @@
<script setup>
import {reactive, ref} from "vue"
import {useRouter} from "vue-router"
import {computed, onMounted, reactive, ref, watch} from "vue"
import {useRouter,useRoute} from "vue-router"
import request from "@/utils/request"
import {ElMessage, ElMessageBox} from "element-plus"
import {changeFilterEvent,filterChanged} from "@/hook"
import {addListener,toolbarButtonClickEvent} from "@/hook/mouseMove"
import {useI18n} from "vue-i18n"
import companyInfo from "@/stores/sd/companyInfo";
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
let dialogTableVisible = ref(false)
let craftVisible = ref(false)
const iconNickname = ref()
const company = companyInfo()
const xGrid = ref()
const trademarkLocation=ref([t('craft.upperLeft'),t('craft.upperRight'),t('craft.lowLeft'),t('craft.lowRight')])
const gridOptions = reactive({
  loading:true,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹楼号
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
  id: 'updateOrderCraft',
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
  scrollX:{ enabled: true,gt:7 },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  mouseConfig:{selected: true},
  filterConfig: {   //筛选配置项
    remote: true
   // remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    trigger: 'dblclick',
    mode: 'cell',
    showStatus: true
  },//表头参数
  columns:[
    {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left",},
    {field: '0',width:120,  title: '序号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '1',width:120,  title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '2',width:120,  title: '成品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '3',width:120,  title: '标记',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '4',width:120,  title: '子产品',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5',width:120,  title: '成品宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '6',width:120,  title: '成品高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '7',width:120,  title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '8',width:120,  title: '成品尺寸',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '9',width:120,  title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '10',width:120,  title: '单片宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '11',width:120,  title: '单片高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '12',width:120,  title: '单片尺寸',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '13',width:120,  title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '14',width:120,  title: '工艺流程',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '15',width:120,  title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '16',width:120,  title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
    {title: t('basicData.operate'), width: 220, slots: { default: 'button_slot' },fixed:"left",},
    {field: 'orderNumber',fixed:"left",width:120,  title: t('order.OrderNum'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.productId',fixed:"left",width:120,  title: t('order.productId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.productName',fixed:"left",width:120,  title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'technologyNumber',width:120, fixed:"left", title: t('craft.glassAddress'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'glassChild',width:120,  title: t('craft.glassChild'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.width',width:120,  title: t('craft.width'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.height',width:120,  title: t('craft.height'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.shape',width:120,  title: t('order.shape'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'totalArea',width:120,  title: t('craft.totalArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'childWidth',width:120,  title: t('craft.childWidth'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'childHeight',width:120,  title: t('craft.childHeight'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'arc',width:120,  title: t('craft.arc'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {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'),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}
  ],//表头按钮
  mergeCells: [
    { row: 0, col: 1, rowspan: 2, colspan: 1 },
    { row: 0, col: 2, rowspan: 2, colspan: 1 },
    { row: 0, col: 3, rowspan: 2, colspan: 1 },
    { row: 0, col: 6, rowspan: 2, colspan: 1 },
    { row: 0, col: 7, rowspan: 2, colspan: 1 },
    // { row: 0, col: 1, rowspan: 4, colspan: 1 },
    // { row: 0, col: 2, rowspan: 4, colspan: 1 },
    // { row: 0, col: 4, rowspan: 4, colspan: 1 },
    // { row: 0, col: 5, rowspan: 4, colspan: 1 },
    // { row: 0, col: 6, rowspan: 4, colspan: 1 },
    // { 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 },
            { code: 'computedSize', name: t('basicData.computedSize'), prefixIcon: 'vxe-icon-chart-line', visible: true, disabled: false },
            { code: 'paste', name: t('basicData.paste'), prefixIcon: 'vxe-icon-paste', visible: true, disabled: false },
          ]
      ]
    }
  },
  toolbarConfig: {
    buttons: [
      {'code': 'remarks', 'name': '加工要求'},
      {'code': 'Craft', 'name': '订单详情',status: 'primary'},
      {'code': 'Craft', 'name': '审核',status: 'primary'},
      {'code': 'remarks', 'name': t('order.processingNote')},
      {'code': 'Craft', 'name': t('craft.orderDetail'),status: 'primary'},
      {'code': 'review', 'name': t('basicData.review'),status: 'primary'},
    ],
    import: false,
    export: true,
    print: true,
    // import: false,
     export: true,
    // print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      '0' : '1',
      '1' : 'JHH-T33-G-07A-01',
      '2' : '10mm超白UD60平钢(外)+12A暖(结)+10mm超白平钢(内)',
      '3' : '(外)',
      '4' : '10mm超白UD60平钢(外)',
      '5' : '1427',
      '6' : '2696',
      '7' : '普形',
      '8' : '42.32',
      '9' : '精磨',
      '10' : '1427',
      '11' : '1427',
      '12' : '42.32',
      '13' : '11',
      '14' : '切割->磨边->钢化->均质->中空->包装',
      '15' : '',
      '16' : '',
      '17':2
    },
    {
      '0' : '1',
      '1' : 'JHH-T33-G-07A-01',
      '2' : '10mm超白UD60平钢(外)+12A暖(结)+10mm超白平钢(内)',
      '3' : '(内)',
      '4' : '10mm超白平钢(内)',
      '5' : '1427',
      '6' : '2696',
      '7' : '普形',
      '8' : '42.32',
      '9' : '精磨',
      '10' : '1427',
      '11' : '1427',
      '12' : '42.32',
      '13' : '11',
      '14' : '切割->磨边->钢化->均质->中空->包装',
      '15' : '',
      '16' : '',
      '17' : 0,
    }
  ],//table body实际数据
  footerMethod ({ columns, data }) {//页脚函数
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        // if (props.tableProp.footList.includes(column.field)) {
        //   return sumNum(data, column.field)
        // }
        return ''
      })
    ]
  }
})
@@ -136,14 +113,337 @@
    if ($grid) {
      switch (code) {
        case 'Craft': {
          router.push({path: '/main/order/createOrder', query: { orderID: 12123 }})
          router.push({path: '/main/order/createOrder', query: { orderId: titleUploadData.value.orderId }})
          break
        }
        case 'review': {
          reviewOrderCraft(2)
          break
        }
        case 'reviews': {//反审
          reviewOrderCraft(0)
          break
        }
        case 'remarks':  {
          dialogTableVisible.value=true
          break
        }
      }
    }
  },
  async 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 'computedSize' :{
          let result = toolbarButtonClickEvent()
          if(!result || result.cell!=='childWidth'){
            break
          }
          ElMessageBox.prompt('', '', {
            confirmButtonText: t('basicData.confirmButtonText'),
            cancelButtonText: t('basicData.cancelButtonText'),
            inputPattern:/^(-?\d{1,4}(\.\d{1,2})?|-?0(\.\d{1,2})?)$/,
            inputErrorMessage: '-9999.99~9999.99',
          })
          .then(({ value }) => {
            const value1 = value*1
            $grid.getTableData().visibleData.forEach((item,index) =>{
              if(index>=result.start && index<=result.end){
                item[result.cell] = item[result.cell]*1+value1
              }
            })
          })
          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
        }
        case 'paste' :{
          if(xGrid.value.getSelectedCell()===null){
            return
          }
          if(xGrid.value.getSelectedCell().column.editRender===undefined){
            return
          }
          const flag = xGrid.value.getSelectedCell()['_rowIndex']
          const column =xGrid.value.getSelectedCell().column.field
          ElMessageBox.prompt()
              .then(({ value }) => {
                let text = value
                text = text.split(' ')
                if(text===null){
                  return
                }
                const data = xGrid.value.getTableData().visibleData
                //let i = 0
                for (let i=0; i<text.length; i++)  {
                  if(i+flag>=data.length){
                    return
                  }
                  data[i+flag][column] = text[i]
                }
              })
          break
        }
      }
    }
  }
}
// 定义表头上传数据
const titleUploadData = ref({
  project:'',
  orderType:'',
  customerId:'',
  customerName:'',
  icon:'',
  orderClassify:'',
  packType:'',
  orderId:'',
  deliveryDate:'',
  batch:'',
  calculateType:'',
  salesmanId:'',
  salesman:'',
  alType:'',
  money:'',
  contractId:'',
  customerBatch:'',
  contacts:'',
  contactNumber:'',
  deliveryAddress:'',
  otherMoney:'',
  otherMoneyRemarks:'',
  processingNote:''
})
const trademarkAttr = ref({
  trademark:null,
  xImage:null,
  yImage:null,
  tag:null,
  tag2:null ,
  tag3:null,
  xMargin:30,
  yMargin:30,
  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
    trademarkList.value.forEach(item =>{
      item.basicName
    })
  }
})
let rowIndex = ref({})
const updateCraft = (row) => {
  craftVisible.value= true
  Object.keys(craftObj).forEach((key) =>{
    craftObj[key] = row['process'].split('->')
  })
  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 if(key==='xMargin' || key==='yMargin'){
      trademarkAttr.value[key] = 30
    }else{
      trademarkAttr.value[key] = ''
    }
  })*/
  trademarkAttr.value = {
    trademark:"3C",
    xImage:false,
      yImage:false,
      tag:true,
      tag2:true ,
      tag3:true,
      xMargin:30,
      yMargin:30,
      location:t('craft.lowLeft')
  }
  if(row.icon!=null){
    trademarkAttr.value = JSON.parse(row.icon)
  }
  trademarkList.value.forEach(item =>{
    if(item.basicName===trademarkAttr.value.trademark){
      iconNickname.value=item.nickname
    }
  })
  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: []
})
const resetCraft = () => {
  craftObj.newCraft = []
}
const saveCraft = () => {
  rowIndex.value.process = craftObj.newCraft.join('->')
  craftVisible.value= false
}
const newCraftComputed = computed(() =>{
  return craftObj.newCraft.join('->')
})
const oldCraftComputed = computed(() =>{
  return craftObj.oldCraft.join('->')
})
//初始化判断是否有id传入
onMounted(()=>{
  addListener(xGrid.value,gridOptions)
  const str = route.query.orderId
  if (typeof str === 'undefined' || str === null || str === '' || str === '\n' || str === '\r'){
    return
  }
  request.post(`/order/getOrderCraftById/${str}`).then((res) => {
    if(res.code==200){
      titleUploadData.value = res.data.order
      console.log(res.data.orderGlassDetails)
      //取消审核按钮禁用
      if(res.data.order.processReview === 2 ){
        //gridOptions.toolbarConfig.buttons[2].disabled = false
        gridOptions.toolbarConfig.buttons[2].code='reviews'
        gridOptions.toolbarConfig.buttons[2].name=t('basicData.cancelReview')
      }
      //按钮审核过后变为反审
      if(Math.abs(res.data.order.orderReview) === 2){
        gridOptions.toolbarConfig.buttons[2].disabled = true
      }
      xGrid.value.reloadData(res.data.orderGlassDetails)
      gridOptions.loading = false
    }else{
      ElMessage.error(res.msg)
    }
  })
})
//保存修改工艺
const reviewOrderCraft = (state) => {
  request.post(`/order/reviewProcessById/${titleUploadData.value.orderId}/${state}`,xGrid.value.getRecordset().updateRecords).then(res =>{
    if(res.code==200){
      gridOptions.toolbarConfig.buttons[2].disabled = true
      if(state==2){
        ElMessage.success(t('basicData.msg.ReviewSuccess'))
      }else if (state==0){
        ElMessage.success(t('basicData.msg.cancelReviewSuccess'))
      }
      router.push({path:'/main/order/updateOrderCraft',query:{orderId:titleUploadData.value.orderId,random:Math.random()}})
    }else{
      ElMessage.error(res.msg)
    }
  })
}
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] = []
    }
  }
}
const iconChange = () => {
  trademarkList.value.forEach(item =>{
    if(item.basicName===trademarkAttr.value.trademark){
      iconNickname.value=item.nickname
    }
  })
  if(trademarkAttr.value.trademark===company.icon){
    trademarkAttr.value.yMargin=66
  }
}
let enlargementFlag = ref(false)
const trademarkenlargement = () => {
  enlargementFlag.value = !enlargementFlag.value
}
</script>
@@ -153,32 +453,32 @@
    <div class="order-primary" style="background-color: white">
      <el-row>
        <el-col  :span="4"><el-text>销售单号:</el-text></el-col>
        <el-col  :span="4"><el-text>NG23120704</el-text></el-col>
        <el-col  :span="4"><el-text>客户名称:</el-text></el-col>
        <el-col  :span="4"><el-text>太仓高玻璃制品有限公司</el-text></el-col>
        <el-col  :span="4"><el-text>项目名称:</el-text></el-col>
        <el-col  :span="4"><el-text>太仓卓高</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('order.orderId')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{titleUploadData.orderId}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('customer.customerName')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{titleUploadData.customerName}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('order.project')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{titleUploadData.project}}</el-text></el-col>
      </el-row>
      <el-row>
        <el-col  :span="4"><el-text>订单批次:</el-text></el-col>
        <el-col  :span="4"><el-text>1批1</el-text></el-col>
        <el-col  :span="4"><el-text>订单类型:</el-text></el-col>
        <el-col  :span="4"><el-text>普通订单</el-text></el-col>
        <el-col  :span="4"><el-text>业务员</el-text></el-col>
        <el-col  :span="4"><el-text>张三</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('order.batch')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{titleUploadData.batch}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('order.orderType')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{ titleUploadData.orderType }}</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('order.salesman')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{titleUploadData.salesman}}</el-text></el-col>
      </el-row>
      <el-row>
        <el-col  :span="4"><el-text>包装方式:</el-text></el-col>
        <el-col  :span="4"><el-text>木箱</el-text></el-col>
        <el-col  :span="4"><el-text>交货日期:</el-text></el-col>
        <el-col  :span="4"><el-text>2023-11-11</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('order.packType')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{titleUploadData.packType}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{t('order.deliveryDate')}}</el-text></el-col>
        <el-col  :span="4"><el-text>{{titleUploadData.deliveryDate}}</el-text></el-col>
      </el-row>
    </div>
    <div class="order-detail">
      <vxe-grid
          max-height="97%"
          height="100%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
@@ -197,7 +497,8 @@
        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">修改工艺</el-button>
          <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">{{$t('craft.modifyTrademark')}}</el-button>
        </template>
        <template #num1_filter="{ column, $panel }">
@@ -210,6 +511,230 @@
      </vxe-grid>
    </div>
    <el-dialog
        v-model="dialogTableVisible"
        :title="$t('order.processingNote')"
        style="width: 60%;height:75% ">
      <el-input
          v-model="titleUploadData.processingNote"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 20 }"
      />
    </el-dialog>
    <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"
          v-for="item in process"
          :label="item.basicName"
          class="glass-process-checkbox"
          size="small" />
      <el-row style="width: 90%;border: 0;position: absolute;bottom: 1rem; left: 50%;transform: translateX(-50%);">
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
        >{{$t('craft.oldProcess')}}:
        </span>
        <el-input :value="oldCraftComputed" disabled class="w-50 m-2" />
        <span class="ml-3 w-35 text-gray-600 inline-flex items-center"
        >{{$t('craft.newProcess')}}:
        </span>
        <el-input :value="newCraftComputed" disabled class="w-50 m-2" />
        <el-col style="margin-top: 0.5rem">
          <el-button type="primary" @click="resetCraft">{{$t('craft.reset')}}</el-button>
          <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="$t('craft.TrademarkAttribute')"
        :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">{{$t('craft.TrademarkOptions')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.trademark" @change ="iconChange" filterable>
              <el-option :value="item.basicName" v-for="item in trademarkList" />
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.xImage')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.xImage">
              <el-option :value="true" :label="$t('basicData.true')"/>
              <el-option :value="false" :label="$t('basicData.false')"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.yImage')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.yImage">
              <el-option :value="true" :label="$t('basicData.true')"/>
              <el-option :value="false" :label="$t('basicData.false')"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.tag')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag">
              <el-option :value="true" :label="$t('basicData.true')"/>
              <el-option :value="false" :label="$t('basicData.false')"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.tag2')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag2">
              <el-option :value="true" :label="$t('basicData.true')"/>
              <el-option :value="false" :label="$t('basicData.false')"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.tag3')}}:</el-col>
          <el-col :span="6">
            <el-select v-model="trademarkAttr.tag3">
              <el-option :value="true" :label="$t('basicData.true')"/>
              <el-option :value="false" :label="$t('basicData.false')"/>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.xMargin')}}:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.xMargin"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.yMargin')}}:</el-col>
          <el-col :span="6">
            <el-input-number v-model="trademarkAttr.yMargin"/>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">{{$t('craft.location')}}:</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 v-if="!enlargementFlag" style="width: 400px;height: 250px;border: 2px solid #000;float: left;position: relative;">
        <div
            v-if="tagCheck(t('craft.upperLeft'))"
            style="float: left;width: 50px;height: 90px;margin-left: 1rem;margin-top: 15px">
          <el-row class="icon">
            <el-col class="icon" >
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>
          <el-row  >
            <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(t('craft.upperRight'))"
            style="float: right;width: 50px;height: 90px;margin-right: 1rem;margin-top: 15px">
          <el-row class="icon">
            <el-col class="icon" >
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>
          <el-row  >
            <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(t('craft.lowLeft'))"
            style="width: 50px;height: 90px;margin-left: 1rem;float: left;position: absolute;bottom: 15px" >
          <el-row  >
            <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>
          <el-row class="icon">
            <el-col class="icon" >
              <el-image @dblclick="trademarkenlargement" style="width: 100%;height: 100%" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>
        </div>
        <div
            v-if="tagCheck(t('craft.lowRight'))"
            style="width: 50px;height: 90px;position: absolute;bottom: 15px;right: 1rem">
          <el-row>
            <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>
          <el-row class="icon">
            <el-col class="icon">
              <el-image style="width: 100%;height: 100%"  @dblclick="trademarkenlargement" :class="{'xStyle':trademarkAttr.xImage,'yStyle':trademarkAttr.yImage}"  :src="iconNickname"/>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-if="enlargementFlag" style="width: 400px;height: 250px;float: left;position: relative;">
        <el-image  @dblclick="trademarkenlargement" style="z-index: 9999;max-width: 100%;max-height: 100%" :src="iconNickname"/>
      </div>
    </el-dialog>
  </div>
</template>
@@ -227,7 +752,32 @@
}
.order-detail{
  width: 100%;
  height: 80%;
  height: 85%;
}
#trademark .el-row,#trademark .el-col{
  border: 0
}
#processChange .el-col{
  border: 0;text-align: right
}
#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)
}
.icon{
  width: 50px;
  height: 50px;
}
</style>