提交 部分前端优化程序

guoyuji

2024-11-05 4a017f298fe5a8cc41948626af6be603e12d194f

提交 部分前端优化程序

 north-glass-erp/northglass-erp/src/router/index.js

@@ -321,6 +321,23 @@

          //pp模块
        {
          //玻璃优化
          path: 'glassOptimize',
          name: 'glassOptimize',
          component: () => import('../views/pp/glassOptimize/Optimize.vue'),
          children:[
            {
              path: 'optimizeProject',
              name: 'optimizeProject',
              component: () => import('../views/pp/glassOptimize/OptimizeProject.vue'),
            },
            {
              path: '',
              redirect:'/main/glassOptimize/optimizeProject'
            }
          ]
        },
        {
          //工单管理
          path: 'workOrder',
          name: 'workOrder',

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/Optimize.vue

New file
@@ -0,0 +1,74 @@
<script setup>
import {ArrowDown, ArrowLeftBold, ArrowRight, Search} from "@element-plus/icons-vue"
import {useRouter,useRoute,onBeforeRouteUpdate} from "vue-router"
import {useI18n} from "vue-i18n"
const { t } = useI18n()
const router = useRouter()
const route = useRoute()
let indexFlag=$ref(1)
function changeRouter(index){
  indexFlag=index

}

const handleCommand = (command) => {
  router.push({
    path: command
  })
}


</script>

<template>
  <div id="main-div">
    <div id="div-title">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item @click="changeRouter(1)" :class="indexFlag===1?'indexTag':''" :to="{ path: '/main/glassOptimize/optimizeProject' }">{{'工程信息'}}</el-breadcrumb-item>
        <el-breadcrumb-item v-show="false" @click="changeRouter(2)" :class="indexFlag===2?'indexTag':''" :to="{ path: '/main/order/createOrder' }">{{$t('order.page.createOrder')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div id="main-body">
      <router-view :key="route.fullPath" />
    </div>
  </div>
</template>

<style scoped>
#main-div{
  width: 99%;
  height: 100%;
}
#div-title{
  height: 2%;
  width: 100%;
}
#searchButton{
  margin-top: -5px;
  margin-left: 1rem;
}
#searchButton1{
//margin-left: 10rem;
}
/*main-body样式*/
#main-body{
  width: 100%;
  height: 95%;
  margin-top: 1%;
}
#select{
  margin-left:0.5rem;
}
:deep(.indexTag .el-breadcrumb__inner){
  color: #5CADFE !important;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

</style>

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/OptimizeProject.vue

New file
@@ -0,0 +1,57 @@
<script setup>
import GlassInventory from "@/views/pp/glassOptimize/page/GlassInventory.vue"
import ProjectDetail from "@/views/pp/glassOptimize/page/ProjectDetail.vue"
import ProjectCreate from "@/views/pp/glassOptimize/page/ProjectCreate.vue";
import {ref} from "vue";
let dialogVisible = ref(false)
const changeDialog = (value) => {
  switch (value) {
      case 1:
        dialogVisible.value = true
        break
      case 2:
        //dialogVisible.value = false
        break
  }
}
</script>

<template >
 <div style="width: 100%;height: 100%">
   <div id="main-body">
     <project-detail @changeDialog="changeDialog"/>
   </div>
   <div id="main-footer">
     <glass-inventory/>
   </div>


   <el-dialog
       v-model="dialogVisible"
       title="工程创建"
       destroy-on-close
       style="width: 90%;height:90%;margin-top: 3vh"
   >
     <project-create/>
   </el-dialog>

 </div>
</template>

<style scoped>
#main-body{
  width: 100%;
  height: 60%;
}
#main-footer{
  margin-top: 10px;
  width: 100%;
  height: calc(40% - 10px);
}
:deep( .el-dialog__body){
  height: calc(100% - 55px);
  width: 100%;
  //padding: 0;
}

</style>

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/GlassInventory.vue

New file
@@ -0,0 +1,124 @@
<script setup>
import {reactive, ref} from "vue";
import {useI18n} from "vue-i18n";
const { t } = useI18n()

const xGrid = ref()
const gridOptions = reactive({
  height:'100%',
  loading: false,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮
  id: 'SelectProduct1',
  scrollX:{enabled: true},
  scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  /*formConfig: {
    data: {
      width: '',
      height: '',
      quantity: ''
    },
    items: [
      { field: 'width', title: t('order.width')+':', itemRender: { name: 'VxeInput' } },
      { field: 'height', title: t('order.height')+':', itemRender: { name: 'VxeInput' } },
      { field: 'quantity', title: t('order.quantity')+':', itemRender: { name: 'VxeInput' } },
      {
        itemRender: {
          name: 'VxeButtonGroup',
          options: [
            { type: 'submit', content: t('craft.sure'), status: 'primary' },
            { type: 'reset', content: t('product.msg.reset') }
          ]
        }
      }
    ]
  },*/
  columns:[
    {title: '选择', type:'radio', width: 70},
    {field: 'id', title: '物料编码',},
    {field:'state',title: t('order.width'),},
    {type: 'seq',title: t('order.height')},
    {field: 'id', title: t('order.totalThickness'),},
    {field: 'id', title: t('warehouseBasicData.type'),},
    {field: 'id', title: '左修边',},
    {field: 'id', title: '下修边',},
    {field: 'id', title: '右修边',},
    {field: 'id', title: '上修边',},
    {field: 'id', title: '库存数量',},
    {field: 'id', title: '加工数量',},
    {field: 'id', title: '名称',},
    {field: 'id', title: '供应商',}
  ],//表头参数
  data:null,//表格数据
  toolbarConfig: {
    buttons: [],
    slots:{
      buttons: "toolbar_buttons"
    },
  },

})
</script>

<template>
  <div style="width: 100%;height: 100%">
    <vxe-grid
        @filter-change="filterChanged"
        height="100%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
    >


      <template #num2_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')"  @change="changeFilterEvent($event, option, $panel)">
              <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option>
              <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option>
            </vxe-select>
          </div>
        </div>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input
                type="type"
                v-model="option.data"
                @keyup.enter.native="$panel.confirmFilter()"
                @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>

    </vxe-grid>
  </div>
</template>

<style scoped>


</style>

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/ProjectCreate.vue

New file
@@ -0,0 +1,34 @@
<script setup>

</script>

<template>
  <div style="width: 100%; height: 100%;">
    <div id="processCard"></div>
    <div id="processCard-detail"></div>
    <div id="project-list"></div>
  </div>
</template>

<style scoped>
#processCard{
  width: 64%;
  height: 64%;
  background-color: #f0f0f0;
  float: left;
}
#processCard-detail{
  margin-left: 1%;
  float: left;
  width: 35%;
  height: 64%;
  background-color: black;
}
#project-list{
  float: left;
  margin-top: 1%;
  width: 100%;
  height: 35%;
  background-color: blue;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/glassOptimize/page/ProjectDetail.vue

New file
@@ -0,0 +1,144 @@
<script setup>
import {reactive, ref} from "vue";
import {useI18n} from "vue-i18n";
const { t } = useI18n()

const xGrid = ref()
const gridOptions = reactive({
  height:'100%',
  loading: false,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 30, useKey: true},//鼠标移动或选择高亮
  id: 'SelectProduct1',
  scrollX:{enabled: true},
  scrollY:{ enabled: true ,gt:0},//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  /*formConfig: {
    data: {
      width: '',
      height: '',
      quantity: ''
    },
    items: [
      { field: 'width', title: t('order.width')+':', itemRender: { name: 'VxeInput' } },
      { field: 'height', title: t('order.height')+':', itemRender: { name: 'VxeInput' } },
      { field: 'quantity', title: t('order.quantity')+':', itemRender: { name: 'VxeInput' } },
      {
        itemRender: {
          name: 'VxeButtonGroup',
          options: [
            { type: 'submit', content: t('craft.sure'), status: 'primary' },
            { type: 'reset', content: t('product.msg.reset') }
          ]
        }
      }
    ]
  },*/
  columns:[
    {title: '订序', width: 70},
    {field:'state',width: 150,title: t('order.width'),filters:[{ data: '' }], slots: { default: 'state',filter: 'num2_filter' }},
    {type: 'seq',width: 150,title: t('order.height')},
    {field: 'id',width: 150, title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: '长磨1',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: '长磨2',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: '短磨1',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: '短磨1',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('order.shape'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: '流程卡号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('order.buildingNumber'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('basicData.remarks'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('order.perimeter'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('order.grossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},

    {field: 'id',width: 150, title: t('craft.glassChild'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('craft.glassAddress'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'id',width: 150, title: t('craft.TrademarkAttribute'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
  ],//表头参数
  data:null,//表格数据
  toolbarConfig: {
    buttons: [],
    slots:{
      buttons: "toolbar_buttons"
    },
  },

})
let emit = defineEmits([
  'changeDialog'
])
let DialogValue = ref(null)
const changeOrderType = async ()=>{
  await emit('changeDialog',DialogValue.value)
  DialogValue.value = null
}
</script>

<template>
  <div style="width: 100%;height: 100%">
    <vxe-grid
        @filter-change="filterChanged"
        height="100%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
    >


      <template #num2_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <vxe-select v-model="option.data" :placeholder="$t('processCard.pleaseSelect')"  @change="changeFilterEvent($event, option, $panel)">
              <vxe-option value="0" :label="$t('basicData.unchecked')"></vxe-option>
              <vxe-option value="1" :label="$t('basicData.selected')"></vxe-option>
            </vxe-select>
          </div>
        </div>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input
                type="type"
                v-model="option.data"
                @keyup.enter.native="$panel.confirmFilter()"
                @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>

      <template #toolbar_buttons>
        <vxe-select @change="changeOrderType" v-model="DialogValue" >
          <vxe-option :value="1" :label="'创建工程'"></vxe-option>
          <vxe-option :value="2" :label="'工程管理'"></vxe-option>
        </vxe-select>
      </template>

    </vxe-grid>
  </div>
</template>

<style scoped>


</style>