pp、sd模块界面调整，添加vxetable组件和对应界面跳转

clll

2023-12-22 1f6c97aa5f23d09a04152038c7d53ce95721cf50

pp、sd模块界面调整，添加vxetable组件和对应界面跳转

 north-glass-erp/.idea/workspace.xml

@@ -45,48 +45,48 @@
    <option name="hideEmptyMiddlePackages" value="true" />
    <option name="showLibraryContents" value="true" />
  </component>
  <component name="PropertiesComponent">{
  &quot;keyToString&quot;: {
    &quot;RequestMappingsPanelOrder0&quot;: &quot;0&quot;,
    &quot;RequestMappingsPanelOrder1&quot;: &quot;1&quot;,
    &quot;RequestMappingsPanelWidth0&quot;: &quot;75&quot;,
    &quot;RequestMappingsPanelWidth1&quot;: &quot;75&quot;,
    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
    &quot;SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
    &quot;git-widget-placeholder&quot;: &quot;master&quot;,
    &quot;last_opened_file_path&quot;: &quot;D:/EPR-Refactoring/north-glass-erp&quot;,
    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
    &quot;project.structure.last.edited&quot;: &quot;模块&quot;,
    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
    &quot;project.structure.side.proportion&quot;: &quot;0.0&quot;,
    &quot;settings.editor.selected.configurable&quot;: &quot;preferences.pluginManager&quot;,
    &quot;spring.configuration.checksum&quot;: &quot;def6d90e829e50c63f98c387daecd138&quot;,
    &quot;ts.external.directory.path&quot;: &quot;D:\\软件\\IntelliJ IDEA 2023.2\\plugins\\javascript-impl\\jsLanguageServicesImpl\\external&quot;,
    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
  <component name="PropertiesComponent"><![CDATA[{
  "keyToString": {
    "RequestMappingsPanelOrder0": "0",
    "RequestMappingsPanelOrder1": "1",
    "RequestMappingsPanelWidth0": "75",
    "RequestMappingsPanelWidth1": "75",
    "RunOnceActivity.OpenProjectViewOnStart": "true",
    "RunOnceActivity.ShowReadmeOnStart": "true",
    "SHARE_PROJECT_CONFIGURATION_FILES": "true",
    "WebServerToolWindowFactoryState": "false",
    "git-widget-placeholder": "master",
    "last_opened_file_path": "D:/GitRepository/ERP_override/north-glass-erp/northglass-erp/src/components/pp/processCard",
    "node.js.detected.package.eslint": "true",
    "node.js.detected.package.tslint": "true",
    "node.js.selected.package.eslint": "(autodetect)",
    "node.js.selected.package.tslint": "(autodetect)",
    "nodejs_package_manager_path": "npm",
    "project.structure.last.edited": "模块",
    "project.structure.proportion": "0.0",
    "project.structure.side.proportion": "0.0",
    "settings.editor.selected.configurable": "preferences.pluginManager",
    "spring.configuration.checksum": "def6d90e829e50c63f98c387daecd138",
    "ts.external.directory.path": "D:\\软件\\IntelliJ IDEA 2023.2\\plugins\\javascript-impl\\jsLanguageServicesImpl\\external",
    "vue.rearranger.settings.migration": "true"
  },
  &quot;keyToStringList&quot;: {
    &quot;vue.recent.templates&quot;: [
      &quot;Vue Composition API Component&quot;
  "keyToStringList": {
    "vue.recent.templates": [
      "Vue Composition API Component"
    ]
  }
}</component>
}]]></component>
  <component name="RecentsManager">
    <key name="CreateClassDialog.RecentsKey">
      <recent name="com.example.erp.tools" />
      <recent name="com.example.erp.config" />
    </key>
    <key name="CopyFile.RECENT_KEYS">
      <recent name="D:\GitRepository\ERP_override\north-glass-erp\northglass-erp\src\components\pp\processCard" />
      <recent name="D:\GitRepository\ERP_override\north-glass-erp\northglass-erp\src\components\pp\workorder" />
      <recent name="D:\GitRepository\ERP_override\north-glass-erp\northglass-erp\src\views\pp\workOrder" />
      <recent name="D:\Documents\north-glass-erp\src\main\resources\mapper\userInfo" />
      <recent name="D:\projct\document\north-glass-erp\src\main\java\com\example\erp\service\userInfo" />
      <recent name="D:\projct\document\north-glass-erp\src\main\java\com\example\erp\mapper" />
      <recent name="D:\projct\document\north-glass-erp\src\main\java\com\example\erp\entity" />
      <recent name="D:\Documents\north-glass-erp\northglass-erp\public" />
    </key>
    <key name="MoveFile.RECENT_KEYS">
      <recent name="D:\EPR-Refactoring\north-glass-erp\northglass-erp\src\views" />
@@ -104,7 +104,7 @@
      <command value="length" />
    </option>
  </component>
  <component name="RunManager" selected="Spring Boot.ErpApplication">
  <component name="RunManager" selected="JUnit.erp中的所有">
    <configuration default="true" type="ArquillianJUnit" factoryName="" nameIsGenerated="true">
      <option name="arquillianRunConfiguration">
        <value>
@@ -211,7 +211,7 @@
      <workItem from="1702426354510" duration="34981000" />
      <workItem from="1702631535326" duration="205000" />
      <workItem from="1702858329054" duration="9016000" />
      <workItem from="1703031064839" duration="6501000" />
      <workItem from="1703031064839" duration="55055000" />
    </task>
    <task id="LOCAL-00001" summary="第一次推送">
      <option name="closed" value="true" />

 north-glass-erp/northglass-erp/src/assets/base.css

@@ -84,3 +84,36 @@
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 5px;
  border: 0 solid #F1F1F1;
  /*box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #ffffff;
  box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: white;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}
.vxe-grid{
  background-color: white;
}




 north-glass-erp/northglass-erp/src/components/basic/BasicTable.vue

@@ -85,7 +85,7 @@
  list.forEach(item => {
    count += Number(item[field])
  })
  return count
  return count.toFixed(2)
}

const changeFilterEvent = (event, option, $panel,) => {

 north-glass-erp/northglass-erp/src/views/pp/BOM/BenchmarkBOM.vue

@@ -1,6 +1,159 @@
<script setup>
import {reactive, ref} from 'vue'

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: 'materialCode',  title: '物料编码',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'materialName', title: '物料名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'number',title: '数量', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'materialRequisitionProcess', title: '领料工序',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'mainUnit',title: '主单位', sortable: true,showOverflow:"ellipsis"},
    {field: 'conversionRate', title: '换算率', sortable: true},
    {field: 'deputyUnit', title: '副单位', sortable: true},
    {field: 'producer', title: '产地', sortable: true,showOverflow:"ellipsis"},
  ],//表头按钮

  toolbarConfig: {
    buttons: [

      // {
      //   name:'产品种类',
      //   dropdowns: [
      //     { code: 'other1', name: '种类一', type: 'text', },
      //     { code: 'other2', name: '种类二', type: 'text',  },
      //     { code: 'other2', name: '种类三', type: 'text',  },
      //   ]
      // },
      {code: 'print_lck', name: '添加一行' },
      {code: 'print_lck', name: '减少一行' },
      {code: 'print_lck', name: '保存',status:'primary' ,icon:'vxe-icon-save'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },
    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },

    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },
    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['number']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
const options = [
@@ -17,53 +170,11 @@
    label: 'Option3',
  },
]
const form = reactive({
  name: '1',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const tableData = [
  {
    1: '70020000000000000000000004',
    2: '预洗剂7600TRO-DS',
    3: '4',
    4: '制镜',
    5:'L',
    6:'0.001000',
    7:'ml',
    8:'四川',
  },
  {
    1: '70020000000000000000000004',
    2: '预洗剂7600TRO-DS',
    3: '4',
    4: '制镜',
    5:'L',
    6:'0.001000',
    7:'ml',
    8:'四川',
  },
  {
    1: '70020000000000000000000004',
    2: '预洗剂7600TRO-DS',
    3: '4',
    4: '制镜',
    5:'L',
    6:'0.001000',
    7:'ml',
    8:'四川',
  },
]

</script>

<template>
<div>
  <div>
  <div class="main-div-customer">
    <el-select v-model="value" class="m-2" placeholder="产品种类">
      <el-option
          v-for="item in options"
@@ -72,29 +183,48 @@
          :value="item.value"
      />
    </el-select>
    &nbsp;
    <label>基数:</label>
    <el-input placeholder="基数" style="width: 100px" v-model="form.name">1</el-input>
    &nbsp;
    <el-button type="primary">添加一行</el-button>
    <el-button type="primary">减少一行</el-button>
    <el-button type="primary">保存</el-button>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


    </vxe-grid>
  </div>
  <div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column prop="1" label="物料编码" :show-overflow-tooltip='true' width="250" />
      <el-table-column prop="2" label="物料名称" :show-overflow-tooltip='true' width="250" />
      <el-table-column prop="3" label="数量" width="105" />
      <el-table-column prop="4" label="领料工序"  width="155" />
      <el-table-column prop="5" label="主单位"  width="142" />
      <el-table-column prop="6" label="换算率" width="175" />
      <el-table-column prop="7" label="副单位" width="155" />
      <el-table-column prop="8" label="产地" width="115" />
    </el-table>
  </div>
</div>
</template>

<style scoped>

.main-div-customer{
  width: 99%;
  height: 100%;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/BOM/OrderBOM.vue

@@ -1,9 +1,25 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
const router = useRouter()
// do not use same name with ref
<script setup>

import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/BOM/OrderBOMDetails', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}
const form = reactive({
  name: '',
  region: '',
@@ -14,33 +30,145 @@
  resource: '',
  desc: '',
})
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
let listName = $ref([
  '订单BOM','审核','采购'
])
const tableData = [
  {
    salesOrderNo: 'NG23121201',
    2: '江门馗达特玻科技有限公司',
    3: '大板镜',
    4: '1批一',
    5:'1212',
    6:'442.21',
    7:'内部',
    8:'XX',
    9:'2020-01-01',
    10:'2020-01-02',
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
]
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 70, slots: { default: 'button_slot' },fixed:"left"},
    { field: 'salesOrderNo',width: 130, title: '销售单号',sortable: true, filters:[{ data: '' }],slots: { filter: 'num1_filter' } },
    { field: 'customerName',width: 130, title: '客户名称',sortable: true,  filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    { field: 'entryName',width: 130, title: '项目名称',sortable: true, filters:[{ data: '' }],slots: { filter: 'num1_filter' } },
    { field: 'batch',width: 75, title: '批次',sortable: true, },
    {field: 'number',width: 83,  title: '订单数', sortable: true, },
    {field: 'area',width: 100, title: '订单面积', sortable: true,showOverflow:"ellipsis" ,},
    {field: 'types',width: 110, title: '订单类型', sortable: true,},
    {field: 'salesman',width: 85, title: '业务员', sortable: true},
    {field: 'orderBOMGenerationTime',width: 160,title: '工单BOM生成时间', sortable: true,showOverflow:"ellipsis"},
    {field: 'orderBOMAuditTime',width: 160,title: '工单BOM审核时间', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      salesOrderNo: 'NG23121201',
      customerName: '江门馗达特玻科技有限公司',
      entryName: '大板镜',
      batch: '1批一',
      number:'1212',
      area:'442.21',
      types:'内部',
      salesman:'XX',
      orderBOMGenerationTime:'2020-01-01',
      orderBOMAuditTime:'2020-01-02',
    },
    {
      salesOrderNo: 'NG23121201',
      customerName: '江门馗达特玻科技有限公司',
      entryName: '大板镜',
      batch: '1批一',
      number:'1212',
      area:'442.21',
      types:'内部',
      salesman:'XX',
      orderBOMGenerationTime:'2020-01-01',
      orderBOMAuditTime:'2020-01-02',
    },
    {
      salesOrderNo: 'NG23121201',
      customerName: '江门馗达特玻科技有限公司',
      entryName: '大板镜',
      batch: '1批一',
      number:'1212',
      area:'442.21',
      types:'内部',
      salesman:'XX',
      orderBOMGenerationTime:'2020-01-01',
      orderBOMAuditTime:'2020-01-02',
    },
    {
      salesOrderNo: 'NG23121201',
      customerName: '江门馗达特玻科技有限公司',
      entryName: '大板镜',
      batch: '1批一',
      number:'1212',
      area:'442.21',
      types:'内部',
      salesman:'XX',
      orderBOMGenerationTime:'2020-01-01',
      orderBOMAuditTime:'2020-01-02',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','finishedArea','wornNumber','wornArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
        <el-date-picker
@@ -55,34 +183,50 @@
      </el-row>

    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column v-for="item in listName" prop="" :label="item" width="85"   >
        <el-checkbox checked/>
      </el-table-column>
      <el-table-column prop="salesOrderNo" label="销售单号" width="125">
        <template v-slot="scope">
          <router-link :to="{path:'OrderBOMDetails'}" >{{scope.row.salesOrderNo}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="2" label="客户名称" :show-overflow-tooltip='true' width="165" />
      <el-table-column prop="3" label="项目名称" :show-overflow-tooltip='true'  width="105" />
      <el-table-column prop="4" label="批次" :show-overflow-tooltip='true' width="75" />
      <el-table-column prop="5" label="订单数" :show-overflow-tooltip='true' width="70" />
      <el-table-column prop="6" label="订单面积" width="85" />
      <el-table-column prop="7" label="订单类型" width="85" />
      <el-table-column prop="8" label="业务员" width="75" />
      <el-table-column prop="9" label="工单BOM生成时间" width="150" />
      <el-table-column prop="10" label="工单BOM审核时间" :show-overflow-tooltip='true' width="158" />
    </el-table>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
      </template>

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


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

<style scoped>
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 40%;
  height: 100%;
  text-align: center;
}


</style>

 north-glass-erp/northglass-erp/src/views/pp/BOM/OrderBOMDetails.vue

@@ -1,5 +1,177 @@
<script setup>
import {reactive, ref} from 'vue'

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/BOM/StandardBOMDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}
const form = reactive({
  xsdh:'NG23010101',
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 60, slots: { default: 'button_slot' },fixed:"left"},
    { type: 'checkbox',fixed:"left", title: '基准BOM', width: 110 },
    { type: 'checkbox',fixed:"left", title: '标准BOM', width:110 },
    { type: 'checkbox',fixed:"left", title: '审核', width: 80 },
    {field: 'customerNumber', width: 120, title: '客户编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'customerName',width: 120, title: '客户名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productNumber', width: 130,title: '产品编号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName',width: 120, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'glassLength', width: 100,title: '玻璃长', sortable: true,showOverflow:"ellipsis"},
    {field: 'glassWidth', width: 100,title: '玻璃宽', sortable: true},
    {field: 'thickness',width: 100, title: '厚度', sortable: true},
    {field: 'shape',width: 120, title: '形状', sortable: true,showOverflow:"ellipsis"},
    {field: 'notes', width: 120,title: '备注', sortable: true},
    {field: 'productCreator',width: 120, title: '产品创建人', sortable: true},
    {field: 'BOMCreator',width: 120, title: 'BOM创建人', sortable: true},
    {field: 'auditor',width: 120, title: '审核员', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {code: 'print_lck', name: '转采购单' ,status:'primary'},
      {code: 'print_lck', name: '审核', status:'primary'},
      {code: 'print_lck', name: '删除', status:'primary'},
      {code: 'print_lck', name: '修改超领数量', status:'primary'},
      {code: 'print_lck', name: '生成订单BOM',status:'primary' ,icon:'vxe-icon-save'},
        ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','finishedArea','wornNumber','wornArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})


const value = ref('')
@@ -17,57 +189,15 @@
    label: 'Option3',
  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const tableData = [
  {
    1: 'NG23121201',
    2: '12300001110',
    3: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    4: '111',
    5:'钢化',
    6:'5001011100000110',
    7:'无尘纸',
    8:'113',
    9:'1144',
    10:'张',
    11:'11',
    12:'22',
    13:'33',
    14:'44',
    15:'东莞',
    16:'2023-12-01',
    17:'',

  },
]
</script>

<template>
  <div>
  <div class="main-div-customer">
    <div>
      <div>
        <el-input placeholder="销售单号" style="width: 120px" v-model="form.name"></el-input>
        <el-button type="primary">生成订单BOM</el-button>
        <el-button type="primary">转采购单</el-button>
        <el-button type="primary">审核</el-button>
        <el-button type="primary">反审</el-button>
        <el-button type="primary">删除</el-button>
        <el-button type="primary">修改超领数量</el-button>
        <el-input placeholder="销售单号" style="width: 115px" v-model="form.xsdh"></el-input>


      </div>


      <el-select v-model="value" class="m-2" placeholder="产品种类">
      <el-select v-model="value" class="m-2" placeholder="001123311" style="width: 120px">
        <el-option
            v-for="item in options"
            :key="item.value"
@@ -75,7 +205,7 @@
            :value="item.value"
        />
      </el-select>
      <el-select v-model="value" class="m-2" placeholder="领料工序">
      <el-select v-model="value" class="m-2" placeholder="钢化" style="width: 80px">
        <el-option
            v-for="item in options"
            :key="item.value"
@@ -83,37 +213,56 @@
            :value="item.value"
        />
      </el-select>
      &nbsp;
      <br>
      <el-input placeholder="物料编码" style="width: 200px"></el-input>
      <el-input placeholder="物料名称" style="width: 200px"></el-input>
      <el-input placeholder="需求数量" style="width: 200px"></el-input>
      <el-button type="primary">添加</el-button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="销售单号" :show-overflow-tooltip='true' width="120" />
        <el-table-column prop="2" label="产品编号" :show-overflow-tooltip='true' width="130" />
        <el-table-column prop="3" label="产品名称" :show-overflow-tooltip='true' width="155" />
        <el-table-column prop="4" label="工单数量"  width="85" />
        <el-table-column prop="5" label="领料工序"  width="85" />
        <el-table-column prop="6" label="物料编码" :show-overflow-tooltip='true' width="125" />
        <el-table-column prop="7" label="物料名称" :show-overflow-tooltip='true' width="135" />
        <el-table-column prop="8" label="宽" width="60" />
        <el-table-column prop="9" label="高" width="60" />
        <el-table-column prop="10" label="单位" width="70" />
        <el-table-column prop="11" label="物料数量" width="85" />
        <el-table-column prop="12" label="库存数量" width="85" />
        <el-table-column prop="13" label="库存数-需求数" width="120" />
        <el-table-column prop="14" label="采购数量" width="85" />
        <el-table-column prop="15" label="产地" width="70" />
        <el-table-column prop="16" label="计划到货时间" width="120" />
        <el-table-column prop="17" label="备注" :show-overflow-tooltip='true' width="120" />
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

      </el-table>
    </div>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
      </template>

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


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

<style scoped>

.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 40%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/BOM/SelectBOM.vue

@@ -1,9 +1,25 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
const router = useRouter()
// do not use same name with ref
<script setup>

import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/BOM/StandardBOMDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}
const form = reactive({
  name: '',
  region: '',
@@ -14,36 +30,150 @@
  resource: '',
  desc: '',
})
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
let listName = $ref([
  '基准BOM','标准BOM','审核'
])
const tableData = [
  {
    serialNumber: '1',
    2: 'D123123',
    3: 'XXXX公司',
    4: '06040000022',
    5:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    6:'1440',
    7:'3660',
    8:'30',
    9:'普形',
    10:'111',
    11:'张三',
    12:'李四',
    13:'王五',
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
]
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 80, slots: { default: 'button_slot' },fixed:"left"},
    { type: 'checkbox',fixed:"left", title: '基准BOM', width: 110 },
    { type: 'checkbox',fixed:"left", title: '标准BOM', width: 110 },
    { type: 'checkbox',fixed:"left", title: '审核', width: 80 },
    {field: 'customerNumber', width: 120, title: '客户编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'customerName',width: 120, title: '客户名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productNumber', width: 130,title: '产品编号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName',width: 120, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'glassLength', width: 100,title: '玻璃长', sortable: true,showOverflow:"ellipsis"},
    {field: 'glassWidth', width: 100,title: '玻璃宽', sortable: true},
    {field: 'thickness',width: 100, title: '厚度', sortable: true},
    {field: 'shape',width: 120, title: '形状', sortable: true,showOverflow:"ellipsis"},
    {field: 'notes', width: 120,title: '备注', sortable: true},
    {field: 'productCreator',width: 120, title: '产品创建人', sortable: true},
    {field: 'BOMCreator',width: 120, title: 'BOM创建人', sortable: true},
    {field: 'auditor',width: 120, title: '审核员', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','finishedArea','wornNumber','wornArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
        <el-date-picker
@@ -58,37 +188,50 @@
      </el-row>

    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column v-for="item in listName" prop="" :label="item" width="85"   >
        <el-checkbox checked/>
      </el-table-column>
      <el-table-column prop="serialNumber" label="自序" width="55" >
        <template v-slot="scope">
          <router-link :to="{path:'StandardBOMDetail'}" >{{scope.row.serialNumber}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="2" label="客户编号" width="105" />
      <el-table-column prop="3" label="客户名称" width="105" />
      <el-table-column prop="4" label="产品编号" :show-overflow-tooltip='true' width="125" />
      <el-table-column prop="5" label="产品名称" :show-overflow-tooltip='true' width="150" />
      <el-table-column prop="6" label="玻璃长" width="75" />
      <el-table-column prop="7" label="玻璃宽" width="75" />
      <el-table-column prop="8" label="厚度" width="65" />
      <el-table-column prop="9" label="形状" width="65" />
      <el-table-column prop="10" label="备注" :show-overflow-tooltip='true' width="155" />
      <el-table-column prop="11" label="产品创建人" width="95" />
      <el-table-column prop="12" label="BOM创建人" width="105" />
      <el-table-column prop="13" label="审核员" width="85" />
    </el-table>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
      </template>

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


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

<style scoped>
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 40%;
  height: 100%;
  text-align: center;
}


</style>

 north-glass-erp/northglass-erp/src/views/pp/BOM/StandardBOM.vue

@@ -1,9 +1,25 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
const router = useRouter()
// do not use same name with ref
<script setup>

import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/BOM/StandardBOMDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的审核状态')
      break
    }
  }
}
const form = reactive({
  name: '',
  region: '',
@@ -14,36 +30,150 @@
  resource: '',
  desc: '',
})
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
let listName = $ref([
  '基准BOM','标准BOM','审核'
])
const tableData = [
  {
    serialNumber: '1',
    2: 'D123123',
    3: 'XXXX公司',
    4: '06040000022',
    5:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    6:'1440',
    7:'3660',
    8:'30',
    9:'普形',
    10:'111',
    11:'张三',
    12:'李四',
    13:'王五',
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
]
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 80, slots: { default: 'button_slot' },fixed:"left"},
    { type: 'checkbox',fixed:"left", title: '基准BOM', width: 110 },
    { type: 'checkbox',fixed:"left", title: '标准BOM', width: 110 },
    { type: 'checkbox',fixed:"left", title: '审核', width: 80 },
    {field: 'customerNumber', width: 120, title: '客户编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'customerName',width: 120, title: '客户名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productNumber', width: 130,title: '产品编号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName',width: 120, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'glassLength', width: 100,title: '玻璃长', sortable: true,showOverflow:"ellipsis"},
    {field: 'glassWidth', width: 100,title: '玻璃宽', sortable: true},
    {field: 'thickness',width: 100, title: '厚度', sortable: true},
    {field: 'shape',width: 120, title: '形状', sortable: true,showOverflow:"ellipsis"},
    {field: 'notes', width: 120,title: '备注', sortable: true},
    {field: 'productCreator',width: 120, title: '产品创建人', sortable: true},
    {field: 'BOMCreator',width: 120, title: 'BOM创建人', sortable: true},
    {field: 'auditor',width: 120, title: '审核员', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
    {
      customerNumber: 'D123123',
      customerName: 'XXXX公司',
      productNumber: '06040000022',
      productName:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      glassLength:'1440',
      glassWidth:'3660',
      thickness:'30',
      shape:'普形',
      notes:'111',
      productCreator:'张三',
      BOMCreator:'李四',
      auditor:'王五',


    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','finishedArea','wornNumber','wornArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
        <el-date-picker
@@ -58,37 +188,50 @@
      </el-row>

    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column v-for="item in listName" prop="" :label="item" width="85"   >
        <el-checkbox checked/>
      </el-table-column>
      <el-table-column prop="serialNumber" label="自序" width="55" >
        <template v-slot="scope">
          <router-link :to="{path:'StandardBOMDetail'}" >{{scope.row.serialNumber}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="2" label="客户编号" width="105" />
      <el-table-column prop="3" label="客户名称" width="105" />
      <el-table-column prop="4" label="产品编号" :show-overflow-tooltip='true' width="125" />
      <el-table-column prop="5" label="产品名称" :show-overflow-tooltip='true' width="150" />
      <el-table-column prop="6" label="玻璃长" width="75" />
      <el-table-column prop="7" label="玻璃宽" width="75" />
      <el-table-column prop="8" label="厚度" width="65" />
      <el-table-column prop="9" label="形状" width="65" />
      <el-table-column prop="10" label="备注" :show-overflow-tooltip='true' width="155" />
      <el-table-column prop="11" label="产品创建人" width="95" />
      <el-table-column prop="12" label="BOM创建人" width="105" />
      <el-table-column prop="13" label="审核员" width="85" />
    </el-table><!-- <h1>{{msg}}</h1> -->
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
      </template>

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


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

<style scoped>
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 40%;
  height: 100%;
  text-align: center;
}


</style>

 north-glass-erp/northglass-erp/src/views/pp/BOM/StandardBOMDetail.vue

@@ -1,25 +1,167 @@
<script setup>
import {reactive, ref} from 'vue'
import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    value: 'Option2',
    label: 'Option2',
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    value: 'Option3',
    label: 'Option3',
  customConfig: {
    storage: true
  },
]
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: 'materialCode',  title: '物料编码',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'materialName', title: '物料名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'number',title: '数量', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'materialRequisitionProcess', title: '领料工序',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'mainUnit',title: '主单位', sortable: true,showOverflow:"ellipsis"},
    {field: 'conversionRate', title: '换算率', sortable: true},
    {field: 'deputyUnit', title: '副单位', sortable: true},
    {field: 'producer', title: '产地', sortable: true,showOverflow:"ellipsis"},
  ],//表头按钮

  toolbarConfig: {
    buttons: [

      // {
      //   name:'产品种类',
      //   dropdowns: [
      //     { code: 'other1', name: '种类一', type: 'text', },
      //     { code: 'other2', name: '种类二', type: 'text',  },
      //     { code: 'other2', name: '种类三', type: 'text',  },
      //   ]
      // },
      {code: 'print_lck', name: '添加一行' },
      {code: 'print_lck', name: '减少一行' },
      {code: 'print_lck', name: '审核',status:'primary' },
      {code: 'print_lck', name: '保存',status:'primary' ,icon:'vxe-icon-save'},

    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },
    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },

    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },
    {
      materialCode: '70020000000000000000000004',
      materialName: '预洗剂7600TRO-DS',
      number: '4',
      materialRequisitionProcess: '制镜',
      mainUnit:'L',
      conversionRate:'0.001000',
      deputyUnit:'ml',
      producer:'四川',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['number']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})
const form = reactive({
  name: '1',
  region: '',
  name: '',
  id:'',
  length:'',
  width:'',

  region: '1',
  date1: '',
  date2: '',
  delivery: false,
@@ -27,58 +169,23 @@
  resource: '',
  desc: '',
})
const tableData = [
  {
    1: '70020000000000000000000004',
    2: '预洗剂7600TRO-DS',
    3: '4',
    4: '制镜',
    5:'L',
    6:'0.001000',
    7:'ml',
    8:'四川',
  },
  {
    1: '70020000000000000000000004',
    2: '预洗剂7600TRO-DS',
    3: '4',
    4: '制镜',
    5:'L',
    6:'0.001000',
    7:'ml',
    8:'四川',
  },
  {
    1: '70020000000000000000000004',
    2: '预洗剂7600TRO-DS',
    3: '4',
    4: '制镜',
    5:'L',
    6:'0.001000',
    7:'ml',
    8:'四川',
  },
]

</script>

<template>
  <div>
    <div style="text-align: center">
      <el-select v-model="value" class="m-2" placeholder="产品种类">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
      <el-input placeholder="产品编号" style="width: 140px" v-model="form.id"></el-input>
      &nbsp;
      <el-input placeholder="产品名称" style="width: 180px" v-model="form.name"></el-input>
      &nbsp;
      <el-input placeholder="长" style="width: 60px" v-model="form.length"></el-input>
      &nbsp;
      <el-input placeholder="宽" style="width: 60px" v-model="form.width"></el-input>
      &nbsp;
      <label>基数:</label>
      <el-input placeholder="基数" style="width: 100px" v-model="form.name">1</el-input>
      &nbsp;
      <el-button type="primary">添加一行</el-button>
      <el-button type="primary">减少一行</el-button>
      <el-button type="primary">保存</el-button>
      <el-input placeholder="基数" style="width: 40px" v-model="form.region">1</el-input>

      <div id="tab_div">
        <table class="tab_bfl" style="border: 1px solid black;">
          <tr>
@@ -88,7 +195,7 @@
            <td>钢化</td>
          </tr>
          <tr>
            <td>报皮率%</td>
            <td>报废率%</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
@@ -97,16 +204,42 @@
      </div>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="物料编码" :show-overflow-tooltip='true' width="250" />
        <el-table-column prop="2" label="物料名称" :show-overflow-tooltip='true' width="250" />
        <el-table-column prop="3" label="数量" width="105" />
        <el-table-column prop="4" label="领料工序"  width="155" />
        <el-table-column prop="5" label="主单位"  width="142" />
        <el-table-column prop="6" label="换算率" width="175" />
        <el-table-column prop="7" label="副单位" width="155" />
        <el-table-column prop="8" label="产地" width="115" />
      </el-table>
      <vxe-grid
          max-height="100%"
          @filter-change="filterChanged"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"

      >
        <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
        <!--      下拉显示所有信息插槽-->
        <template #content="{ row}">
          <ul class="expand-wrapper">
            <li  v-for="(item,key,index) in row">
              <span style="font-weight: bold">{{key+':  '}}</span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>

        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
          <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
          <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
        </template>

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


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

 north-glass-erp/northglass-erp/src/views/pp/Replenish/AddReplenish.vue

@@ -1,234 +1,289 @@
<script setup>
import {reactive, ref} from 'vue'
import {ElTable} from "element-plus"

import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const form = reactive({
  lckh:'',
  xsdh:'',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    { type: 'checkbox',fixed:"left", title: '选择', width: 80 },

    {field: 'salesOrderNo', width: 120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'processCardNo',width: 120, title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName', width: 130,title: '项目名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName',width: 120, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'reportingWorkNo', width: 100,title: '报工编号', sortable: true,showOverflow:"ellipsis"},
    {field: 'serialNumber', width: 70,title: '序号', sortable: true},
    {field: 'singlePieceName',width: 100, title: '单片名称', sortable: true},
    {field: 'floorNumber',width: 120, title: '楼层编号', sortable: true,showOverflow:"ellipsis"},
    {field: 'marking', width: 80,title: '标记', sortable: true},
    {field: 'pieces',width: 90, title: '片标记', sortable: true},
    {field: 'processCardNumber',width: 120, title: '流程卡数量', sortable: true},
    {field: 'width',width: 80, title: '宽', sortable: true},
    {field: 'height',width: 80, title: '高', sortable: true},
    {field: 'area',width: 80, title: '面积', sortable: true},
    {field: 'shape',width: 80, title: '形状', sortable: true},
    {field: 'numberBroken',width: 120, title: '次破数量', sortable: true},
    {field: 'reasonType',width: 120, title: '次破类型', sortable: true},
    {field: 'reasonDamage',width: 120, title: '次破原因', sortable: true},
    {field: 'responsibilityDevice',width: 120, title: '责任设备', sortable: true},
    {field: 'reportingProcess',width: 120, title: '报工工序', sortable: true},
    {field: 'responsibilityProcess',width: 120, title: '责任工序', sortable: true},
    {field: 'responsibilityTeams',width: 120, title: '责任班组', sortable: true},
    {field: 'responsibilityPersonnel',width: 120, title: '责任人员', sortable: true},
    {field: 'qualityInspector',width: 100, title: '质检员', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {code: 'print_lck', name: '保存',status:'primary' ,icon:'vxe-icon-save'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      reasonType: '机器',
      reasonDamage:'气泡超标',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
    },
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      reasonType: '机器',
      reasonDamage:'气泡超标',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
    },
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      reasonType: '机器',
      reasonDamage:'气泡超标',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
    },
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      reasonType: '机器',
      reasonDamage:'气泡超标',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['processCardNumber','numberBroken']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})


const tableData = [
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    reasonType: '机器',
    reasonDamage:'气泡超标',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
  },
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    reasonType: '机器',
    reasonDamage:'气泡超标',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
  },
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    reasonType: '机器',
    reasonDamage:'气泡超标',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
  },
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    reasonType: '机器',
    reasonDamage:'气泡超标',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
  },
]

</script>

<template>
  <div>
<!--    <div id="head" style="width: 900px;">-->
<!--      <el-input placeholder="流程卡号" v-model="form.xsdh" style="width: 200px"/>-->
<!--      &nbsp;-->
  <div class="main-div-customer">

<!--      <el-input placeholder="项目名称" v-model="form.lckh" style="width: 200px"/>-->
<!--      &nbsp;-->
<!--      <el-button type="primary">查询</el-button>-->
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

<!--    </div>-->
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

    <div>
      <el-button class="btn_bc" type="primary">保存</el-button>
      <el-table
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

          :data="tableData"
          style="width: 100%"

      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="reportingWorkTime" label="报工时间" width="155" >

        </el-table-column>
        <el-table-column sortable prop="salesOrderNo" label="销售单号" width="120" />
        <el-table-column sortable prop="processCardNo" label="流程卡号" width="130" />
        <el-table-column prop="entryName" label="项目名称" width="120" :show-overflow-tooltip='true'/>
        <el-table-column prop="productName" label="产品名称" width="120" :show-overflow-tooltip='true'/>
        <el-table-column sortable prop="reportingWorkNo" label="报工编号" width="120"/> >
        <el-table-column  prop="serialNumber" label="序号" width="60" />
        <el-table-column prop="singlePieceName" :show-overflow-tooltip='true' label="单片名称" width="120" />
        <el-table-column prop="floorNumber" label="楼层编号" width="120" />
        <el-table-column prop="marking" label="标记" width="60" />
        <el-table-column prop="pieces" label="片标记" width="70" />
        <el-table-column prop="processCardNumber" label="流程卡数量" width="95" />
        <el-table-column prop="width" label="宽" width="60" />
        <el-table-column prop="height" label="高" width="60" />
        <el-table-column prop="area" label="面积" width="65" />
        <el-table-column prop="shape" label="形状" :show-overflow-tooltip='true' width="60" />
        <el-table-column prop="numberBroken" label="次破数量" width="85" />
        <el-table-column prop="reasonType" label="次破类型" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="reasonDamage" label="次破原因" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityDevice" label="责任设备" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="reportingProcess" label="报工工序" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityProcess" label="责任工序" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityTeams" label="责任班组" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityPersonnel" label="责任人员" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="qualityInspector" label="质检员" width="80" />
      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>





      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    </vxe-grid>
  </div>
</template>

<style scoped>


.processCard{
  width: 140px;
}
.processesSt{
  height: 33px;
  width: 80px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 5px;
}
#titleTable tr,#titleTable td{
  border: 1px solid #000;
}
#titleTable{
  border-collapse: collapse;
  text-align: center;
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#titleTable td{
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(1){
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(2){
  width: 100px;
}
.chaxun{
  background-color:#D5EAFF;
  border: none;
}

.btn_bc{
  float: right;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/Replenish/PrintReplenishFlowCard.vue

@@ -1,158 +1,251 @@
<script setup>
import {ArrowLeftBold} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

import {reactive} from "vue";
const router = useRouter()
let flag = $ref(true)
function intoCreateProduct(){
  if(flag){
    router.push('/main/processCard/SelectPrintFlowCard')
  }else {
    router.push('/main/processCard/SelectPrintFlowCard')
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/processCard/PrintFlowCard', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
  flag=!flag
}
function openPrint() {
  this.$router.push('/page');

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    //  {title: '操作', width: 140, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'salesOrderNo',width: 120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'productionOrderNo',width: 120, title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'customerName',width: 120, title: '客户名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName',width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'sliceMarking',width: 90, title: '片标记', sortable: true,showOverflow:"ellipsis"},
    {field: 'marking',width: 80, title: '标记', sortable: true},
    {field: 'pieces',width: 80, title: '片数', sortable: true},
    {field: 'area',width: 80, title: '面积', sortable: true,showOverflow:"ellipsis"},
    {field: 'productName',width: 120, title: '产品名称', sortable: true},
    {field: 'floorNumber',width: 120, title: '楼层编号', sortable: true},
    {field: 'divider', width: 120,title: '分架员', sortable: true},
    {field: 'splittingTime',width: 120, title: '分架时间', sortable: true},
    {field: 'notes',width: 120, title: '备注', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {
        name:'室内面',
        dropdowns: [
          { code: 'other1', name: '室内面', type: 'text', },
          { code: 'other2', name: '室外面', type: 'text',  },
        ]
      },
      {
        name:'成品标签',
        dropdowns: [
          { code: 'other1', name: '成品标签', type: 'text', },
          { code: 'other2', name: '单片标签', type: 'text',},
        ]
      },
      {code: 'print_lck', name: '打印流程卡',status:'primary' },
      {code: 'print_bq', name: '打印标签',status:'primary' },
      {code: 'print_qx', name: '不可排版' ,status:'primary'},
      {code: 'print_pb', name: '计划排版',status:'primary' }
    ],

    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A01',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(外)',
      marking:'1',
      pieces:'16',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      singlePieceName: '10mm超白UD60平钢(外)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A01',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(内)',
      marking:'2',
      pieces:'16',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      singlePieceName: '10mm超白平钢(内)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A02',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(外)',
      marking:'1',
      pieces:'6',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      singlePieceName: '10mm超白UD60平钢(外)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A02',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(内)',
      marking:'2',
      pieces:'6',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      singlePieceName: '10mm超白平钢(内)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['pieces','area']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})
const tableData = [
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A01',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(外)',
    marking:'1',
    pieces:'16',
    area:'24.14',
    productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白UD60平钢(外)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A01',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(内)',
    marking:'2',
    pieces:'16',
    area:'24.14',
    productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白平钢(内)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A02',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(外)',
    marking:'1',
    pieces:'6',
    area:'24.14',
    productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白UD60平钢(外)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A02',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(内)',
    marking:'2',
    pieces:'6',
    area:'24.14',
    productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白平钢(内)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',
  },
]



</script>

<template>
  <div>
    <div class="header">
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

      <router-link to="/main/processCard/PrintProcess" target="_blank">打开新标签</router-link>
      <el-button type="primary">打印流程卡</el-button>
      <el-button type="primary">打印标签</el-button>
      &nbsp;&nbsp;
      <select class="stnw"  style="width: 100px" >
        <option label="室内面" value="option1"></option>
        <option label="室外面" value="option2"></option>
      </select>
      &nbsp;&nbsp;
      <select class="stnw"  style="width: 100px" >
        <option label="成品标签" value="option1"></option>
        <option label="单片标签" value="option2"></option>
      </select>
      &nbsp;&nbsp;
      <el-button type="primary">不可排版</el-button>
      <el-button type="primary">计划排版</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column type="selection" width="55" />
      <el-table-column sortable prop="salesOrderNo" label="销售单号" width="120" >
      </el-table-column>
      <el-table-column sortable prop="productionOrderNo" label="生产订单号" width="120" />
      <el-table-column sortable prop="processCard" label="流程卡号" width="120" />
      <el-table-column prop="customerName" label="客户名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="entryName" label="项目名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="sliceMarking" label="片标记" :show-overflow-tooltip='true' width="70" />
      <el-table-column prop="marking" label="标记" width="55" />
      <el-table-column prop="pieces" label="片数" width="65" />
      <el-table-column prop="area" label="面积" width="65" />
      <el-table-column prop="productName" label="产品名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="singlePieceName" label="单片名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="floorNumber" label="楼层编号" width="120" />
      <el-table-column prop="divider" label="分架员" width="75" />
      <el-table-column prop="splittingTime" label="分架时间" width="120" />
      <el-table-column prop="notes" label="备注" :show-overflow-tooltip='true' width="350" />
    </el-table><!-- <h1>{{msg}}</h1> -->
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">打印</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">排版</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.common-layout{
.main-div-customer{
  width: 99%;
  height: 100%;
}

.el-aside{
  height: 100%;
}

.el-main{
  height: 100%;
  text-align: center;
}
.stnw{
  height: 33px;
  width: 80px;
@@ -161,7 +254,4 @@
  border: none;
  border-radius: 5px;
}



</style>

 north-glass-erp/northglass-erp/src/views/pp/Replenish/SelectReplenish.vue

@@ -1,258 +1,324 @@
<script setup>
import {reactive, ref} from 'vue'

// do not use same name with ref
const form = reactive({
  lckh:'',
  xsdh:'',
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 80, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'salesOrderNo', width: 120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'processCardNo',width: 120, title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName', width: 130,title: '项目名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName',width: 120, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'reportingWorkNo', width: 100,title: '报工编号', sortable: true,showOverflow:"ellipsis"},
    {field: 'serialNumber', width: 70,title: '序号', sortable: true},
    {field: 'singlePieceName',width: 100, title: '单片名称', sortable: true},
    {field: 'floorNumber',width: 120, title: '楼层编号', sortable: true,showOverflow:"ellipsis"},
    {field: 'marking', width: 80,title: '标记', sortable: true},
    {field: 'pieces',width: 90, title: '片标记', sortable: true},
    {field: 'processCardNumber',width: 120, title: '流程卡数量', sortable: true},
    {field: 'width',width: 80, title: '宽', sortable: true},
    {field: 'height',width: 80, title: '高', sortable: true},
    {field: 'area',width: 80, title: '面积', sortable: true},
    {field: 'shape',width: 80, title: '形状', sortable: true},
    {field: 'numberBroken',width: 120, title: '次破数量', sortable: true},
    {field: 'reasonType',width: 120, title: '次破类型', sortable: true},
    {field: 'reasonDamage',width: 120, title: '次破原因', sortable: true},
    {field: 'responsibilityDevice',width: 120, title: '责任设备', sortable: true},
    {field: 'reportingProcess',width: 120, title: '报工工序', sortable: true},
    {field: 'responsibilityProcess',width: 120, title: '责任工序', sortable: true},
    {field: 'responsibilityTeams',width: 120, title: '责任班组', sortable: true},
    {field: 'responsibilityPersonnel',width: 120, title: '责任人员', sortable: true},
    {field: 'qualityInspector',width: 100, title: '质检员', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      reportingWorkTime:'2021-01-01',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      productName:"xxxxxxxxx",
      reportingWorkNo:"BG2301010001",
      floorNumber:"D4-010-01",
      area:'23.11',
      reportingProcess:'钢化',
      qualityInspector:"张三",
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'2',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['processCardNumber','numberBroken']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
const tableData = [
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    reportingWorkTime:'2021-01-01',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    productName:"xxxxxxxxx",
    reportingWorkNo:"BG2301010001",
    floorNumber:"D4-010-01",
    area:'23.11',
    reportingProcess:'钢化',
    qualityInspector:"张三",
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'2',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
]
</script>

<template>
  <div>
  <div class="main-div-customer">
    <div id="head" style="width: 900px;">
<!--      <el-input placeholder="流程卡号" v-model="form.xsdh" style="width: 200px"/>-->
<!--      &nbsp;-->

<!--      <el-input placeholder="项目名称" v-model="form.lckh" style="width: 200px"/>-->
<!--      &nbsp;-->
      <el-date-picker
          v-model="value"
          type="daterange"
          start-placeholder="报工开始时间"
          end-placeholder="结束时间"
          :default-time="defaultTime"
      />
      <el-button type="primary">查询</el-button>
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column fixed label="操作" width="60"  >
          <el-button link type="primary" size="small">删除</el-button>
        </el-table-column>
        <el-table-column prop="reportingWorkTime" label="报工时间" width="155" />
        <el-table-column sortable prop="salesOrderNo" label="销售单号" width="120" />
        <el-table-column sortable prop="processCardNo" label="流程卡号" width="130" />
        <el-table-column prop="entryName" label="项目名称" width="120" :show-overflow-tooltip='true'/>
        <el-table-column prop="productName" label="产品名称" width="120" :show-overflow-tooltip='true'/>
        <el-table-column sortable prop="reportingWorkNo" label="报工编号" width="120"/> >
        <el-table-column  prop="serialNumber" label="序号" width="60" />
        <el-table-column prop="singlePieceName" :show-overflow-tooltip='true' label="单片名称" width="120" />
        <el-table-column prop="floorNumber" label="楼层编号" width="120" />
        <el-table-column prop="marking" label="标记" width="60" />
        <el-table-column prop="pieces" label="片标记" width="70" />
        <el-table-column prop="processCardNumber" label="流程卡数量" width="95" />
        <el-table-column prop="width" label="宽" width="60" />
        <el-table-column prop="height" label="高" width="60" />
        <el-table-column prop="area" label="面积" width="65" />
        <el-table-column prop="shape" label="形状" :show-overflow-tooltip='true' width="60" />
        <el-table-column prop="numberBroken" label="次破数量" width="85" />
        <el-table-column prop="reasonType" label="次破类型" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="reasonDamage" label="次破原因" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityDevice" label="责任设备" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="reportingProcess" label="报工工序" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityProcess" label="责任工序" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityTeams" label="责任班组" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityPersonnel" label="责任人员" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="qualityInspector" label="质检员" width="80" />
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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





      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    </vxe-grid>
  </div>
</template>

<style scoped>


.processCard{
  width: 140px;
}
.processesSt{
  height: 33px;
  width: 80px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 5px;
}
#titleTable tr,#titleTable td{
  border: 1px solid #000;
}
#titleTable{
  border-collapse: collapse;
  text-align: center;
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#titleTable td{
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(1){
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(2){
  width: 100px;
}
.chaxun{
  background-color:#D5EAFF;
  border: none;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/machine/AddMachine.vue

@@ -1,24 +1,157 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
const router = useRouter()
// do not use same name with ref
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    value: 'Option2',
    label: 'Option2',
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    value: 'Option3',
    label: 'Option3',
  customConfig: {
    storage: true
  },
]
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    { type: 'seq',fixed:"left", title: '自序', width: 50 },

    {field: 'standardName', title: '标准名称',editRender: { name: 'input', attrs: { placeholder: '' } } },
    {field: 'deviceName', title: '设备名称',editRender: { name: 'input', attrs: { placeholder: '' } } },
    {field: 'buyingTime', title: '购买时间',editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'installationTime',title: '安装时间',editRender: { name: 'input', attrs: { placeholder: '' } } },
    {field: 'serviceInterval', title: '保养周期',editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'process', title: '所在工艺', editRender: { name: 'input', attrs: { placeholder: '' } }},
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {code: 'print_lck', name: '保存',status:'primary' ,icon:'vxe-icon-save'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      standardName: '',
      deviceName: '',
      buyingTime: '',
      installationTime: '',
      serviceInterval:'',
      process:'',

    },
    {
      standardName: '',
      deviceName: '',
      buyingTime: '',
      installationTime: '',
      serviceInterval:'',
      process:'',

    },
    {
      standardName: '',
      deviceName: '',
      buyingTime: '',
      installationTime: '',
      serviceInterval:'',
      process:'',

    },
    {
      standardName: '',
      deviceName: '',
      buyingTime: '',
      installationTime: '',
      serviceInterval:'',
      process:'',

    },
    {
      standardName: '',
      deviceName: '',
      buyingTime: '',
      installationTime: '',
      serviceInterval:'',
      process:'',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['maintenanceFrequency','MaintenancesFrequency']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
@@ -30,76 +163,52 @@
  desc: '',
})


const tableData = [
  {
    1: '',
    2: '',
    3: '',
    4: '',
    5:'',
    6:'',

  },
  {
    1: '',
    2: '',
    3: '',
    4: '',
    5:'',
    6:'',

  },
  {
    1: '',
    2: '',
    3: '',
    4: '',
    5:'',
    6:'',

  },
]
</script>

<template>
  <div>
    <div id="selectForm">
      <el-row :gutter="0">
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

        <el-button type="primary">保存</el-button>
      </el-row>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column prop="1" label="标准名称" >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="2" label="设备名称" >
      <el-input></el-input>
      </el-table-column>
      <el-table-column prop="3" label="购买时间" >
      <el-input></el-input>
      </el-table-column>
      <el-table-column prop="4" label="安装时间">
      <el-input></el-input>
      </el-table-column>
      <el-table-column prop="5" label="保养周期"  >
      <el-input></el-input>
      </el-table-column>
      <el-table-column prop="6" label="所在工艺" >
      <el-input></el-input>
      </el-table-column>
    </el-table><!-- <h1>{{msg}}</h1> -->
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="dialogFormVisible = true" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


    </vxe-grid>

  </div>
</template>

<style scoped>
#selectForm {
  float: right;
.main-div-customer{
  width: 99%;
  height: 100%;
  text-align: center;
}


</style>

 north-glass-erp/northglass-erp/src/views/pp/machine/AddMaintenanceAndRepair.vue

@@ -1,24 +1,186 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
const router = useRouter()
// do not use same name with ref
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    value: 'Option2',
    label: 'Option2',
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    value: 'Option3',
    label: 'Option3',
  customConfig: {
    storage: true
  },
]
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: 'deviceName', width: 100,title: '设备名称', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'types',width: 80, title: '类型',editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'faultDate', width: 100,title: '故障日期',editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'failureCause', width: 100,title: '故障原因', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'maintenanceDate',width: 100, title: '保养日期', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'maintenanceInstructions',width: 110, title: '保养说明', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'RepairMaintenanceStartTime', width: 160,title: '维修/保养开始时间', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'RepairMaintenanceEndTime',width: 160, title: '维修/保养结束时间', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'process',width: 100, title: '所在工艺', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'RepairMaintenancePersonnel',width: 150, title: '维修/保养人员', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'cost', title: '费用', editRender: { name: 'input', attrs: { placeholder: '' } }},
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {code: 'print_lck', name: '保存',status:'primary' ,icon:'vxe-icon-save'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      deviceName: '',
      types: '',
      faultDate: '',
      failureCause: '',
      maintenanceDate:'',
      maintenanceInstructions:'',
      RepairMaintenanceStartTime:'',
      RepairMaintenanceEndTime:'',
      process:'',
      RepairMaintenancePersonnel:'',
      cost:'',

    },
    {
      deviceName: '',
      types: '',
      faultDate: '',
      failureCause: '',
      maintenanceDate:'',
      maintenanceInstructions:'',
      RepairMaintenanceStartTime:'',
      RepairMaintenanceEndTime:'',
      process:'',
      RepairMaintenancePersonnel:'',
      cost:'',

    },
    {
      deviceName: '',
      types: '',
      faultDate: '',
      failureCause: '',
      maintenanceDate:'',
      maintenanceInstructions:'',
      RepairMaintenanceStartTime:'',
      RepairMaintenanceEndTime:'',
      process:'',
      RepairMaintenancePersonnel:'',
      cost:'',

    },
    {
      deviceName: '',
      types: '',
      faultDate: '',
      failureCause: '',
      maintenanceDate:'',
      maintenanceInstructions:'',
      RepairMaintenanceStartTime:'',
      RepairMaintenanceEndTime:'',
      process:'',
      RepairMaintenancePersonnel:'',
      cost:'',

    },
    {
      deviceName: '',
      types: '',
      faultDate: '',
      failureCause: '',
      maintenanceDate:'',
      maintenanceInstructions:'',
      RepairMaintenanceStartTime:'',
      RepairMaintenanceEndTime:'',
      process:'',
      RepairMaintenancePersonnel:'',
      cost:'',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['maintenanceFrequency','MaintenancesFrequency']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  name: '',
  region: '',
@@ -30,91 +192,52 @@
  desc: '',
})


const tableData = [
  {
    1: '',
    2: '',
    3: '',
    4: '',
    5:'',
    6:'',

  },
  {
    1: '',
    2: '',
    3: '',
    4: '',
    5:'',
    6:'',

  },
  {
    1: '',
    2: '',
    3: '',
    4: '',
    5:'',
    6:'',

  },
]
</script>

<template>
  <div>
    <div id="selectForm" style="float: right">
      <el-row :gutter="0">
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

        <el-button type="primary">保存</el-button>
      </el-row>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column prop="1" label="设备名称" >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="2" label="类型"  >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="3" label="故障日期" :show-overflow-tooltip='true'  >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="4" label="故障原因" :show-overflow-tooltip='true'  >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="5" label="保养日期"   >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="6" label="保养说明"  >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="7" label="维修/保养开始时间"  width="150px">
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="8" label="维修/保养完成时间"  width="150px"  >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="9" label="所在工艺" >
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="10" label="维修/保养人员" :show-overflow-tooltip='true'>
        <el-input></el-input>
      </el-table-column>
      <el-table-column prop="11" label="费用"  >
        <el-input></el-input>
      </el-table-column>
    </el-table><!-- <h1>{{msg}}</h1> -->
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="dialogFormVisible = true" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


    </vxe-grid>

  </div>
</template>

<style scoped>
#selectForm {

.main-div-customer{
  width: 99%;
  height: 100%;
  text-align: center;
}


</style>

 north-glass-erp/northglass-erp/src/views/pp/machine/MaintenanceAndRepair.vue

@@ -1,62 +1,143 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
const router = useRouter()
// do not use same name with ref
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
]
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

const tableData = [
  {
    1: '钢化炉(22E)',
    2: '维修',
    3: '2022-03-16',
    4: '坏了',
    5:'',
    6:'',
    7:'2022-03-16',
    8:'2022-03-16',
    9:'钢化',
    10:'SSS',
    11:'112',
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    1: '钢化炉(22E)',
    2: '保养',
    3: '',
    4: '',
    5:'2022-03-16',
    6:'保养',
    7:'2022-03-16',
    8:'2022-03-16',
    9:'钢化',
    10:'SSS',
    11:'112',

  filterConfig: {   //筛选配置项
    remote: true
  },
]
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 140, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'deviceName', width: 130,title: '设备名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'types',width: 120, title: '类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'faultDate', width: 100,title: '故障日期', sortable: true,showOverflow:"ellipsis"},
    {field: 'failureCause', width: 100,title: '故障原因', sortable: true},
    {field: 'maintenanceDate',width: 100, title: '保养日期', sortable: true},
    {field: 'maintenanceInstructions',width: 120, title: '保养说明', sortable: true,showOverflow:"ellipsis"},
    {field: 'RepairMaintenanceStartTime', width: 160,title: '维修/保养开始时间', sortable: true},
    {field: 'RepairMaintenanceEndTime',width: 160, title: '维修/保养结束时间', sortable: true},
    {field: 'process',width: 120, title: '所在工艺', sortable: true},
    {field: 'RepairMaintenancePersonnel',width: 150, title: '维修/保养人员', sortable: true},
    {field: 'cost',width: 120, title: '费用', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      deviceName: '钢化炉(22E)',
      types: '维修',
      faultDate: '2022-03-16',
      failureCause: '坏了',
      maintenanceDate:'',
      maintenanceInstructions:'',
      RepairMaintenanceStartTime:'2022-03-16',
      RepairMaintenanceEndTime:'2022-03-16',
      process:'钢化',
      RepairMaintenancePersonnel:'SSS',
      cost:'112',
    },
    {
      deviceName: '钢化炉(22E)',
      types: '保养',
      faultDate: '',
      failureCause: '',
      maintenanceDate:'2022-03-16',
      maintenanceInstructions:'保养',
      RepairMaintenanceStartTime:'2022-03-16',
      RepairMaintenanceEndTime:'2022-03-16',
      process:'钢化',
      RepairMaintenancePersonnel:'SSS',
      cost:'112',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['maintenanceFrequency','MaintenancesFrequency']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const dialogFormVisible = ref(false)
const formLabelWidth = '130px'
const formLabelWidth = '140px'

const form = reactive({
  name: '',
@@ -68,44 +149,46 @@
  resource: '',
  desc: '',
})

</script>

<template>
  <div>
<!--    <div id="selectForm">-->
<!--      <el-row :gutter="0">-->
<!--        <el-select v-model="value" class="m-2" placeholder="所在工艺">-->
<!--          <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--        &nbsp;&nbsp;-->
<!--        <el-button type="primary">查询</el-button>-->
<!--      </el-row>-->
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

<!--    </div>-->
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column fixed label="操作" width="100"  >
        <el-button link type="primary" size="small" @click="dialogFormVisible = true">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      </el-table-column>
      <el-table-column prop="1" label="设备名称" width="105" />
      <el-table-column prop="2" label="类型" width="65" />
      <el-table-column prop="3" label="故障日期" :show-overflow-tooltip='true' width="105" />
      <el-table-column prop="4" label="故障原因" :show-overflow-tooltip='true' width="135" />
      <el-table-column prop="5" label="保养日期" width="125" />
      <el-table-column prop="6" label="保养说明" width="125" />
      <el-table-column prop="7" label="维修/保养开始时间" width="155" />
      <el-table-column prop="8" label="维修/保养完成时间" width="150" />
      <el-table-column prop="9" label="所在工艺" width="85" />
      <el-table-column prop="10" label="维修/保养人员" :show-overflow-tooltip='true' width="125" />
      <el-table-column prop="11" label="费用" width="112" />
    </el-table><!-- <h1>{{msg}}</h1> -->
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="dialogFormVisible = true" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


    </vxe-grid>

    <el-dialog v-model="dialogFormVisible" title="保养与维修编辑">

@@ -212,11 +295,8 @@
</template>

<style scoped>
#selectForm {
  width: 40%;
.main-div-customer{
  width: 99%;
  height: 100%;
  text-align: center;
}


</style>

 north-glass-erp/northglass-erp/src/views/pp/machine/SelectMachine.vue

@@ -1,83 +1,170 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
const router = useRouter()
// do not use same name with ref
const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
]
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

const tableData = [
  {
    1: 'SB2209211',
    2: '钢化炉(22E)',
    3: '钢化炉(22E)',
    4: '2022-03-16',
    5:'2022-03-16',
    6:'313',
    7:'使用中',
    8:'0',
    9:'0',
    10:'',
    11:'',
    12:'',
    13:'',
    14:'钢化',
    15:'正常',
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    1: 'SB2209211',
    2: '钢化炉(22E)',
    3: '钢化炉(22E)',
    4: '2022-03-16',
    5:'2022-03-16',
    6:'313',
    7:'使用中',
    8:'0',
    9:'0',
    10:'',
    11:'',
    12:'',
    13:'',
    14:'钢化',
    15:'正常',

  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    1: 'SB2209211',
    2: '钢化炉(22E)',
    3: '钢化炉(22E)',
    4: '2022-03-16',
    5:'2022-03-16',
    6:'313',
    7:'使用中',
    8:'0',
    9:'0',
    10:'',
    11:'',
    12:'',
    13:'',
    14:'钢化',
    15:'正常',

  customConfig: {
    storage: true
  },
]
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 140, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'equipmentNumber', width: 120, title: '设备编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'standardName',width: 120, title: '标准名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'deviceName', width: 130,title: '设备名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'buyingTime',width: 120, title: '购买时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'installationTime', width: 100,title: '安装时间', sortable: true,showOverflow:"ellipsis"},
    {field: 'usageCycle', width: 100,title: '使用周期(年)', sortable: true},
    {field: 'onState',width: 100, title: '使用状态', sortable: true},
    {field: 'maintenanceFrequency',width: 120, title: '维修次数', sortable: true,showOverflow:"ellipsis"},
    {field: 'MaintenancesFrequency', width: 120,title: '保养次数', sortable: true},
    {field: 'finalRepairTime',width: 120, title: '最后维修时间', sortable: true},
    {field: 'finalMaintenanceTime',width: 120, title: '最后保养时间', sortable: true},
    {field: 'maintenanceCosts',width: 120, title: '维修费用', sortable: true},
    {field: 'maintenancesCosts',width: 120, title: '保养费用', sortable: true},
    {field: 'process',width: 120, title: '所在工艺', sortable: true},
    {field: 'cancel',width: 120, title: '作废状态', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      equipmentNumber: 'SB2209211',
      standardName: '钢化炉(22E)',
      deviceName: '钢化炉(22E)',
      buyingTime: '2022-03-16',
      installationTime:'2022-03-16',
      usageCycle:'313',
      onState:'使用中',
      maintenanceFrequency:'0',
      MaintenancesFrequency:'0',
      finalRepairTime:'',
      finalMaintenanceTime:'',
      maintenanceCosts:'',
      maintenancesCosts:'',
      process:'钢化',
      cancel:'正常',

    },
    {
      equipmentNumber: 'SB2209211',
      standardName: '钢化炉(22E)',
      deviceName: '钢化炉(22E)',
      buyingTime: '2022-03-16',
      installationTime:'2022-03-16',
      usageCycle:'313',
      onState:'使用中',
      maintenanceFrequency:'0',
      MaintenancesFrequency:'0',
      finalRepairTime:'',
      finalMaintenanceTime:'',
      maintenanceCosts:'',
      maintenancesCosts:'',
      process:'钢化',
      cancel:'正常',

    },
    {
      equipmentNumber: 'SB2209211',
      standardName: '钢化炉(22E)',
      deviceName: '钢化炉(22E)',
      buyingTime: '2022-03-16',
      installationTime:'2022-03-16',
      usageCycle:'313',
      onState:'使用中',
      maintenanceFrequency:'0',
      MaintenancesFrequency:'0',
      finalRepairTime:'',
      finalMaintenanceTime:'',
      maintenanceCosts:'',
      maintenancesCosts:'',
      process:'钢化',
      cancel:'正常',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['maintenanceFrequency','MaintenancesFrequency']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
@@ -94,47 +181,46 @@
  resource: '',
  desc: '',
})

</script>

<template>
  <div>
<!--    <div id="selectForm">-->
<!--      <el-row :gutter="0">-->
<!--        <el-select v-model="value" class="m-2" placeholder="所在工艺">-->
<!--          <el-option-->
<!--              v-for="item in options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--        &nbsp;&nbsp;-->
<!--        <el-button type="primary">查询</el-button>-->
<!--      </el-row>-->
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

<!--    </div>-->
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column fixed label="操作" width="100"  >
        <el-button link type="primary" size="small" @click="dialogFormVisible = true">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      </el-table-column>
      <el-table-column prop="1" label="设备编号" width="95" />
      <el-table-column prop="2" label="标准名称" width="105" />
      <el-table-column prop="3" label="设备名称" width="105" />
      <el-table-column prop="4" label="购买时间" :show-overflow-tooltip='true' width="115" />
      <el-table-column prop="5" label="安装时间" :show-overflow-tooltip='true' width="115" />
      <el-table-column prop="6" label="使用周期(年)" width="105" />
      <el-table-column prop="7" label="使用状态" width="85" />
      <el-table-column prop="8" label="维修次数" width="85" />
      <el-table-column prop="9" label="保养次数" width="85" />
      <el-table-column prop="10" label="最后维修时间" :show-overflow-tooltip='true' width="115" />
      <el-table-column prop="11" label="最后保养时间" width="115" />
      <el-table-column prop="12" label="维修费用" width="105" />
      <el-table-column prop="13" label="保养费用" width="85" />
      <el-table-column prop="14" label="所在工艺" width="85" />
      <el-table-column prop="15" label="作废状态" width="85" />
    </el-table><!-- <h1>{{msg}}</h1> -->
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="dialogFormVisible = true" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


    </vxe-grid>

    <el-dialog v-model="dialogFormVisible" title="设备编辑">
      <el-form :model="form">
@@ -184,11 +270,8 @@
</template>

<style scoped>
#selectForm {
  width: 40%;
.main-div-customer{
  width: 99%;
  height: 100%;
  text-align: center;
}


</style>

 north-glass-erp/northglass-erp/src/views/pp/processCard/PrintFlowCard.vue

@@ -1,156 +1,249 @@
<script setup>
import {ArrowLeftBold} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

import {reactive} from "vue";
const router = useRouter()
let flag = $ref(true)
function intoCreateProduct(){
  if(flag){
    router.push('/main/processCard/SelectPrintFlowCard')
  }else {
    router.push('/main/processCard/SelectPrintFlowCard')
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/processCard/PrintFlowCard', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
  flag=!flag
}
function openPrint() {
  this.$router.push('/page');

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const tableData = [
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A01',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(外)',
    marking:'1',
    pieces:'16',
    area:'24.14',
    productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白UD60平钢(外)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A01',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(内)',
    marking:'2',
    pieces:'16',
    area:'24.14',
    productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白平钢(内)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A02',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(外)',
    marking:'1',
    pieces:'6',
    area:'24.14',
    productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白UD60平钢(外)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',
  customConfig: {
    storage: true
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo:'NG231201A',
    processCard: 'NG231201A02',
    customerName:'西安高科幕墙门窗有限公司',
    entryName:'银隆广场',
    sliceMarking:'(内)',
    marking:'2',
    pieces:'6',
    area:'24.14',
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
  //  {title: '操作', width: 140, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'salesOrderNo',width: 120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'productionOrderNo',width: 120, title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'customerName',width: 120, title: '客户名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName',width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'sliceMarking',width: 90, title: '片标记', sortable: true,showOverflow:"ellipsis"},
    {field: 'marking',width: 80, title: '标记', sortable: true},
    {field: 'pieces',width: 80, title: '片数', sortable: true},
    {field: 'area',width: 80, title: '面积', sortable: true,showOverflow:"ellipsis"},
    {field: 'productName',width: 120, title: '产品名称', sortable: true},
    {field: 'floorNumber',width: 120, title: '楼层编号', sortable: true},
    {field: 'divider', width: 120,title: '分架员', sortable: true},
    {field: 'splittingTime',width: 120, title: '分架时间', sortable: true},
    {field: 'notes',width: 120, title: '备注', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    buttons: [
    {
        name:'室内面',
        dropdowns: [
          { code: 'other1', name: '室内面', type: 'text', },
          { code: 'other2', name: '室外面', type: 'text',  },
        ]
      },
      {
        name:'成品标签',
        dropdowns: [
          { code: 'other1', name: '成品标签', type: 'text', },
          { code: 'other2', name: '单片标签', type: 'text',},
        ]
      },
      {code: 'print_lck', name: '打印流程卡',status:'primary' },
      {code: 'print_bq', name: '打印标签',status:'primary' }
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A01',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(外)',
      marking:'1',
      pieces:'16',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
    singlePieceName: '10mm超白平钢(内)',
    floorNumber: '16-BSGB05',
    divider: '普形',
    splittingTime: '2023-01-11',
    notes: '',
  },
  function openNewWindow() {
    window.open('/main/processCard/PrintProcess');
      singlePieceName: '10mm超白UD60平钢(外)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A01',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(内)',
      marking:'2',
      pieces:'16',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      singlePieceName: '10mm超白平钢(内)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A02',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(外)',
      marking:'1',
      pieces:'6',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      singlePieceName: '10mm超白UD60平钢(外)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo:'NG231201A',
      processCard: 'NG231201A02',
      customerName:'西安高科幕墙门窗有限公司',
      entryName:'银隆广场',
      sliceMarking:'(内)',
      marking:'2',
      pieces:'6',
      area:'24.14',
      productName: '10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢(内)',
      singlePieceName: '10mm超白平钢(内)',
      floorNumber: '16-BSGB05',
      divider: '普形',
      splittingTime: '2023-01-11',
      notes: '',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['pieces','area']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }
]

})



</script>

<template>
  <div>
    <div class="header">
  <div class="main-div-customer">

      <a href="/main/processCard/PrintProcess" target="_blank">打开新标签</a>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

      <el-button type="primary">打印流程卡</el-button>
      <el-button type="primary">打印标签</el-button>
      &nbsp;&nbsp;
      <select class="stnw"  style="width: 100px" >
        <option label="室内面" value="option1"></option>
        <option label="室外面" value="option2"></option>
      </select>
      <select class="stnw"  style="width: 100px" >
        <option label="成品标签" value="option1"></option>
        <option label="单片标签" value="option2"></option>
      </select>
    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column sortable prop="salesOrderNo" label="销售单号" width="120" />
      <el-table-column sortable prop="productionOrderNo" label="生产订单号" width="120" />
      <el-table-column sortable prop="processCard" label="流程卡号" width="120" />
      <el-table-column prop="customerName" label="客户名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="entryName" label="项目名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="sliceMarking" label="片标记" :show-overflow-tooltip='true' width="70" />
      <el-table-column prop="marking" label="标记" width="55" />
      <el-table-column prop="pieces" label="片数" width="65" />
      <el-table-column prop="area" label="面积" width="65" />
      <el-table-column prop="productName" label="产品名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="singlePieceName" label="单片名称" width="120" :show-overflow-tooltip='true'/>
      <el-table-column prop="floorNumber" label="楼层编号" width="120" />
      <el-table-column prop="divider" label="分架员" width="75" />
      <el-table-column prop="splittingTime" label="分架时间" width="120" />
      <el-table-column prop="notes" label="备注" :show-overflow-tooltip='true' width="350" />
    </el-table><!-- <h1>{{msg}}</h1> -->
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">打印</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">排版</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.common-layout{
.main-div-customer{
  width: 99%;
  height: 100%;
}

.el-aside{
  height: 100%;
}

.el-main{
  height: 100%;
  text-align: center;
}
.stnw{
  height: 33px;
  width: 80px;
@@ -159,7 +252,4 @@
  border: none;
  border-radius: 5px;
}



</style>

 north-glass-erp/northglass-erp/src/views/pp/processCard/ReShelving.vue

@@ -1,88 +1,203 @@
<script lang="ts" setup>
import { reactive } from 'vue'
<script setup>

// do not use same name with ref
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/processCard/PrintFlowCard', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
}

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  xsdh: 'NG231207'
})
const tableData = [
  {
    salesOrderNo: 'NG231207',
    processCard:'NG231207A01',
    serialNumber:"1",
    number: '11',
    technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',

  },
  {
    salesOrderNo: 'NG231207',
    processCard:'NG231207A01',
    serialNumber:"2",
    number: '11',
    technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

  },
  {
    salesOrderNo: 'NG231207',
    processCard:'NG231207A01',
    serialNumber:"3",
    number: '11',
    technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    salesOrderNo: 'NG231207',
    processCard:'NG231207A02',
    serialNumber:"4",
    number: '11',
    technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'checkbox',fixed:"left", title: '选择', width: 80 },
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: 'salesOrderNo', title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'processCard', title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'serialNumber', title: '序号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'number', title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'technologicalProcess', title: '工艺流程', sortable: true,showOverflow:"ellipsis"},
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {code: 'print_lck', name: '重新分架',status:'primary' ,icon:'vxe-icon-save'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  {
    salesOrderNo: 'NG231207',
    processCard:'NG231207A02',
    serialNumber:"5",
    number: '11',
    technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',
  data:  [
    {
      salesOrderNo: 'NG231207',
      processCard:'NG231207A01',
      serialNumber:"1",
      number: '11',
      technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',

  },
]
    },
    {
      salesOrderNo: 'NG231207',
      processCard:'NG231207A01',
      serialNumber:"2",
      number: '11',
      technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',

    },
    {
      salesOrderNo: 'NG231207',
      processCard:'NG231207A01',
      serialNumber:"3",
      number: '11',
      technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',

    },
    {
      salesOrderNo: 'NG231207',
      processCard:'NG231207A02',
      serialNumber:"4",
      number: '11',
      technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',

    },
    {
      salesOrderNo: 'NG231207',
      processCard:'NG231207A02',
      serialNumber:"5",
      number: '11',
      technologicalProcess: '切割->磨边->钢化->中空->包装,切割->磨边->钢化->中空->包装',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['number']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
    <div id="selectForm">
      <el-row :gutter="0">
        <el-input placeholder="销售单号" v-model="form.name" style="width: 200px"/>
        &nbsp;&nbsp;
        <el-button type="primary">查询</el-button>
        <el-button type="primary">重新分架</el-button>
      </el-row>
  <div class="main-div-customer">
    <el-row :gutter="0">
      <el-input placeholder="销售单号" v-model="form.xsdh" style="width: 200px"/>
      &nbsp;&nbsp;
      <el-button type="primary">查询</el-button>
    </el-row>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">打印</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">排版</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="销售单号" width="100">
          <template #default="scope">{{ scope.row.salesOrderNo }}</template>
        </el-table-column>
        <el-table-column prop="processCard" label="流程卡号" :show-overflow-tooltip='true' width="130" />
        <el-table-column prop="serialNumber" label="序号" width="60" />
        <el-table-column prop="number" label="数量" width="80" />
        <el-table-column prop="technologicalProcess" :show-overflow-tooltip='true' label="工艺流程"  />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    </vxe-grid>
  </div>
</template>

<style scoped>

.main-div-customer{
  width: 99%;
  height: 100%;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/processCard/SelectAddProcess.vue

@@ -1,148 +1,249 @@
<script lang="ts" setup>
import { reactive } from 'vue'
<script setup>

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/processCard/SplittingDetails', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 80, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'salesOrderNo',  title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'customerName', title: '客户名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName', title: '项目名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'batch', title: '批次',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'originalFilmRequired', title: '原片要求', sortable: true,showOverflow:"ellipsis"},
    {field: 'trademark', title: '商标选项', sortable: true},
    {field: 'salesman', title: '业务员', sortable: true},
    {field: 'processRequirements', title: '加工要求', sortable: true,showOverflow:"ellipsis"},
    {field: 'shipTo', title: '送货地址', sortable: true},
    {field: 'deliveryDate', title: '交货日期', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      salesOrderNo: 'NG231201',
      customerName:"慕墙公司",
      entryName: '信合春天里',
      batch: '23批',
      originalFilmRequired: '2022/5/24XFPO202205202',
      trademark:'北玻商标',
      orderType: '普通订单',
      salesman: 'XXX',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
      shipTo:'工地',
      deliveryDate:'2024-01-12'
    },
    {
      salesOrderNo: 'NG231202',
      customerName:"大荒建材有限公司",
      entryName: '信合春天里',
      batch: '23批',
      originalFilmRequired: '2022/5/24XFPO202205202',
      trademark:'北玻商标',
      orderType: '普通订单',
      salesman: 'XXX',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
      shipTo:'工地',
      deliveryDate:'2024-01-12'
    },
    {
      salesOrderNo: 'NG231203',
      customerName:"建筑工程集团有限公司",
      entryName: '信合春天里',
      batch: '23批',
      originalFilmRequired: '2022/5/24XFPO202205202',
      trademark:'北玻商标',
      orderType: '普通订单',
      salesman: 'XXX',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
      shipTo:'工地',
      deliveryDate:'2024-01-12'
    },
    {
      salesOrderNo: 'NG231204',
      customerName:"慕墙公司",
      entryName: '信合春天里',
      batch: '23批',
      originalFilmRequired: '2022/5/24XFPO202205202',
      trademark:'北玻商标',
      orderType: '普通订单',
      salesman: 'XXX',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
      shipTo:'工地',
      deliveryDate:'2024-01-12'
    },
    {
      salesOrderNo: 'NG231205',
      customerName:"慕墙公司",
      entryName: '信合春天里',
      batch: '23批',
      originalFilmRequired: '2022/5/24XFPO202205202',
      trademark:'北玻商标',
      orderType: '普通订单',
      salesman: 'XXX',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
      shipTo:'工地',
      deliveryDate:'2024-01-12'
    },
    {
      salesOrderNo: 'NG231206',
      customerName:"慕墙公司",
      entryName: '信合春天里',
      batch: '23批',
      originalFilmRequired: '2022/5/24XFPO202205202',
      trademark:'北玻商标',
      orderType: '普通订单',
      salesman: 'XXX',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
      shipTo:'工地',
      deliveryDate:'2024-01-12'
    },
    {
      salesOrderNo: 'NG231207',
      customerName:"慕墙公司",
      entryName: '信合春天里',
      batch: '23批',
      originalFilmRequired: '2022/5/24XFPO202205202',
      trademark:'北玻商标',
      orderType: '普通订单',
      salesman: 'XXX',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
      shipTo:'工地',
      deliveryDate:'2024-01-12'

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['total','TotalArea','Cases']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        // if (footList.includes(column.field)) {
        //   return sumNum(data, column.field)
        // }
        return ''
      })
    ]
  }

})
const tableData = [
  {
    salesOrderNo: 'NG231201',
    customerName:"慕墙公司",
    entryName: '信合春天里',
    batch: '23批',
    originalFilmRequired: '2022/5/24XFPO202205202',
    trademark:'北玻商标',
    orderType: '普通订单',
    salesman: 'XXX',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    shipTo:'工地',
    deliveryDate:'2024-01-12'
  },
  {
    salesOrderNo: 'NG231202',
    customerName:"大荒建材有限公司",
    entryName: '信合春天里',
    batch: '23批',
    originalFilmRequired: '2022/5/24XFPO202205202',
    trademark:'北玻商标',
    orderType: '普通订单',
    salesman: 'XXX',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    shipTo:'工地',
    deliveryDate:'2024-01-12'
  },
  {
    salesOrderNo: 'NG231203',
    customerName:"建筑工程集团有限公司",
    entryName: '信合春天里',
    batch: '23批',
    originalFilmRequired: '2022/5/24XFPO202205202',
    trademark:'北玻商标',
    orderType: '普通订单',
    salesman: 'XXX',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    shipTo:'工地',
    deliveryDate:'2024-01-12'
  },
  {
    salesOrderNo: 'NG231204',
    customerName:"慕墙公司",
    entryName: '信合春天里',
    batch: '23批',
    originalFilmRequired: '2022/5/24XFPO202205202',
    trademark:'北玻商标',
    orderType: '普通订单',
    salesman: 'XXX',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    shipTo:'工地',
    deliveryDate:'2024-01-12'
  },
  {
    salesOrderNo: 'NG231205',
    customerName:"慕墙公司",
    entryName: '信合春天里',
    batch: '23批',
    originalFilmRequired: '2022/5/24XFPO202205202',
    trademark:'北玻商标',
    orderType: '普通订单',
    salesman: 'XXX',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    shipTo:'工地',
    deliveryDate:'2024-01-12'
  },
  {
    salesOrderNo: 'NG231206',
    customerName:"慕墙公司",
    entryName: '信合春天里',
    batch: '23批',
    originalFilmRequired: '2022/5/24XFPO202205202',
    trademark:'北玻商标',
    orderType: '普通订单',
    salesman: 'XXX',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    shipTo:'工地',
    deliveryDate:'2024-01-12'
  },
  {
    salesOrderNo: 'NG231207',
    customerName:"慕墙公司",
    entryName: '信合春天里',
    batch: '23批',
    originalFilmRequired: '2022/5/24XFPO202205202',
    trademark:'北玻商标',
    orderType: '普通订单',
    salesman: 'XXX',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    shipTo:'工地',
    deliveryDate:'2024-01-12'

  },
]


</script>

<template>
  <div>
<!--    <div id="selectForm">-->
<!--      <el-row :gutter="0">-->
<!--          <el-input placeholder="销售单号" v-model="form.name" style="width: 200px"/>-->
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
      </template>

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


<!--        &nbsp;&nbsp;-->
<!--        <el-button type="primary">查询</el-button>-->
<!--      </el-row>-->


<!--    </div>-->
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column sortable prop="salesOrderNo" label="销售单号" width="110" >
          <template v-slot="scope">
            <router-link :to="{path:'SplittingDetails'}" >{{scope.row.salesOrderNo}}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="customerName" label="客户名称" :show-overflow-tooltip='true' width="110" />
        <el-table-column prop="entryName" label="项目名称" width="135" />
        <el-table-column prop="batch" label="批次" width="80" />
        <el-table-column prop="originalFilmRequired" :show-overflow-tooltip='true' label="原片要求" width="200" />
        <el-table-column prop="trademark" label="商标选项" width="100" />
        <el-table-column prop="orderType" label="订单类型" width="100" />
        <el-table-column prop="salesman" label="业务员" width="75" />
        <el-table-column prop="processRequirements" :show-overflow-tooltip='true' label="加工要求" width="400" />
        <el-table-column prop="shipTo" label="送货地址" width="100" />
        <el-table-column prop="deliveryDate" label="交货日期" width="100" />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    </vxe-grid>
  </div>
</template>

<style scoped>

.main-div-customer{
  width: 99%;
  height: 100%;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/processCard/SelectProcessCard.vue

@@ -1,185 +1,255 @@
<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import {useRouter} from "vue-router";
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const router = useRouter()
function goToPage() {
  router.push('/main/processCard/PrintFlowCard')
<script setup>

import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/processCard/PrintFlowCard', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
}
const tableData = [
  {
    salesOrderNo: 'NG231201',
    productionOrderNo: 'NG231201A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo: 'NG231201B',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    salesOrderNo: 'NG231202',
    productionOrderNo: 'NG231202A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  customConfig: {
    storage: true
  },
  {
    salesOrderNo: 'NG231203',
    productionOrderNo: 'NG231203A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 140, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'salesOrderNo', title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'productionOrderNo', title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productID', title: '产品编号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName', title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'entryName', title: '项目名称', sortable: true,showOverflow:"ellipsis"},
    {field: 'total', title: '总数量', sortable: true},
    {field: 'TotalArea', title: '总面积', sortable: true},
    {field: 'Cases', title: '分箱', sortable: true,showOverflow:"ellipsis"},
    {field: 'divider', title: '分架员', sortable: true},
    {field: 'processRequirements', title: '加工要求', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  {
    salesOrderNo: 'NG231204',
    productionOrderNo: 'NG231204A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    salesOrderNo: 'NG231205',
    productionOrderNo: 'NG231205A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    salesOrderNo: 'NG231206',
    productionOrderNo: 'NG231206A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    salesOrderNo: 'NG231207',
    productionOrderNo: 'NG231207A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    entryName: '信合春天里',
    total: '169',
    TotalArea: '175.31',
    Cases: '3',
    divider: 'xxx',
    processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
]
  data:  [
    {
      salesOrderNo: 'NG231201',
      productionOrderNo: 'NG231201A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo: 'NG231201B',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231202',
      productionOrderNo: 'NG231202A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231203',
      productionOrderNo: 'NG231203A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231204',
      productionOrderNo: 'NG231204A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231205',
      productionOrderNo: 'NG231205A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231206',
      productionOrderNo: 'NG231206A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231207',
      productionOrderNo: 'NG231207A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      entryName: '信合春天里',
      total: '169',
      TotalArea: '175.31',
      Cases: '3',
      divider: 'xxx',
      processRequirements: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['total','TotalArea','Cases']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
    <div id="selectForm" >
      <el-row :gutter="0">
<!--          <el-input placeholder="销售单号" v-model="form.name" style="width: 200px"/>-->
<!--        &nbsp;&nbsp;-->
<!--          <el-input placeholder="项目名称" v-model="form.name" style="width: 200px"/>-->
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

<!--        &nbsp;&nbsp;-->
        <el-date-picker
            v-model="value"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
        />
        &nbsp;&nbsp;
        <el-button type="primary" style="width: 80px">查询</el-button>
      </el-row>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column fixed label="操作" width="140"  >
        <el-button link type="primary" size="small">删除</el-button>
        <el-button link type="primary" size="small">排版</el-button>
        <el-button link type="primary" size="small" @click="goToPage">打印</el-button>
      </el-table-column>
      <el-table-column sortable prop="salesOrderNo" label="销售单号" width="110" >
        <template v-slot="scope">
          <router-link :to="{path:'ProcessCardDetails'}" >{{scope.row.salesOrderNo}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="productionOrderNo" label="生产订单号" width="125" />
      <el-table-column prop="productID" label="产品编号" width="155" />
      <el-table-column prop="productName" label="产品名称" :show-overflow-tooltip='true' width="180" />
      <el-table-column prop="entryName" label="项目名称" width="155" />
      <el-table-column prop="total" label="总片数" width="75" />
      <el-table-column prop="TotalArea" label="总面积" width="100" />
      <el-table-column prop="Cases" label="箱数" width="100" />
      <el-table-column prop="divider" label="分架员" width="70" />
      <el-table-column prop="processRequirements" label="加工要求" :show-overflow-tooltip='true' width="350" />
    </el-table><!-- <h1>{{msg}}</h1> -->
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">打印</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">排版</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
*{
  margin: 0;
  padding:0;
}

a{
  color:#409eff;
}

#selectForm {
  width: 40%;
.main-div-customer{
  width: 99%;
  height: 100%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/processCard/SplittingDetails.vue

@@ -1,72 +1,182 @@
<script lang="ts" setup>
import { reactive } from 'vue'
import {ArrowLeftBold} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
<script setup>

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/processCard/AddProcessCard', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 80, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'salesOrderNo',  title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'productionOrderNo', title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productID', title: '产品编号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName', title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'total', title: '总数量', sortable: true,showOverflow:"ellipsis"},
    {field: 'TotalArea', title: '总面积', sortable: true},
    {field: 'perimeter', title: '周长', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      salesOrderNo: 'NG231201',
      productionOrderNo: 'NG231201A',
      productID: '9001010203000008',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      total: '169',
      TotalArea: '175.31',
      perimeter: '99.84',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo: 'NG231201B',
      productID: '9001010208000018',
      productName: '6mm可钢LOW-E-85平钢(外)+12A(结)+6mm白玻平钢(内)',
      total: '169',
      TotalArea: '175.31',
      perimeter: '99.84',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo: 'NG231201C',
      productID: '9001010203000021',
      productName: '6mm超白UD60平钢(外)+12A(结)+6mm超白平钢(内)',
      total: '169',
      TotalArea: '175.31',
      perimeter: '99.84',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['total','TotalArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})
const router = useRouter()

const tableData = [
  {
    salesOrderNo: 'NG231201',
    productionOrderNo: 'NG231201A',
    productID: '9001010203000008',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    total: '169',
    TotalArea: '175.31',
    perimeter: '99.84',
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo: 'NG231201B',
    productID: '9001010208000018',
    productName: '6mm可钢LOW-E-85平钢(外)+12A(结)+6mm白玻平钢(内)',
    total: '169',
    TotalArea: '175.31',
    perimeter: '99.84',
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo: 'NG231201C',
    productID: '9001010203000021',
    productName: '6mm超白UD60平钢(外)+12A(结)+6mm超白平钢(内)',
    total: '169',
    TotalArea: '175.31',
    perimeter: '99.84',
  },
]


</script>

<template>
  <div>
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column sortable prop="salesOrderNo" label="销售单号" width="110" >
        <template v-slot="scope">
          <router-link :to="{path:'AddProcessCard'}" >{{scope.row.salesOrderNo}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="productionOrderNo" label="生产订单号" width="125" />
      <el-table-column prop="productID" label="产品编号" width="155" />
      <el-table-column prop="productName" label="产品名称" :show-overflow-tooltip='true' width="180" />
      <el-table-column prop="total" label="总数量" width="75" />
      <el-table-column prop="TotalArea" label="总面积" width="100" />
      <el-table-column prop="perimeter" label="周长" width="75" />
    </el-table><!-- <h1>{{msg}}</h1> -->
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>

      </template>

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


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

<style scoped>


.main-div-customer{
  width: 99%;
  height: 100%;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/DamageReport.vue

@@ -1,23 +1,175 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '报工时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '工序', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 130,title: '责任班组', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '责任设备',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '次破原因', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '次破数量', sortable: true},
    {field: '7',width: 100, title: '次破面积', sortable: true},
    {field: '8',width: 120, title: '成品率', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 120,title: '项目名称', sortable: true},
    {field: '10', width: 120,title: '批次', sortable: true},
    {field: '11',width: 120, title: '销售单号', sortable: true},
    {field: '12',width: 120, title: '单品名称', sortable: true},
    {field: '13',width: 120, title: '产地', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'黑金刚',
      5:'机器',
      6:'1 ',
      7:'3.14',
      8:'89',
      9:'奔向幕墙',
      10:'一批',
      11:'NG20010101',
      12:'6mm超白平钢',
      13:'北方',

    },
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'黑金刚',
      5:'机器',
      6:'1 ',
      7:'3.14',
      8:'89',
      9:'奔向幕墙',
      10:'一批',
      11:'NG20010101',
      12:'6mm超白平钢',
      13:'北方',

    },
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'黑金刚',
      5:'机器',
      6:'1 ',
      7:'3.14',
      8:'89',
      9:'奔向幕墙',
      10:'一批',
      11:'NG20010101',
      12:'6mm超白平钢',
      13:'北方',

    },
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'黑金刚',
      5:'机器',
      6:'1 ',
      7:'3.14',
      8:'89',
      9:'奔向幕墙',
      10:'一批',
      11:'NG20010101',
      12:'6mm超白平钢',
      13:'北方',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['6','7']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,38 +187,35 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'2023-01-01',
    2:'钢化',
    3:'钢化一班',
    4:'黑金刚',
    5:'机器',
    6:'1 ',
    7:'3.14',
    8:'89',
    9:'奔向幕墙',
    10:'一批',
    11:'NG20010101',
    12:'6mm超白平钢',
    13:'北方',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--次破报表-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="班组名称" v-model="form.name" style="width: 200px"/>-->
<!--        &nbsp;&nbsp;-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
@@ -81,34 +230,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="报工时间" />
        <el-table-column prop="2" label="工序"/>
        <el-table-column prop="3" label="责任班组" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="责任设备" />
        <el-table-column prop="5" label="次破原因" />
        <el-table-column prop="6" label="次破数量" />
        <el-table-column prop="7" label="次破面积"/>
        <el-table-column prop="8" label="成品率"/>
        <el-table-column prop="9" label="项目名称" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="批次"  />
        <el-table-column prop="11" label="销售单号"  width="120px" />
        <el-table-column prop="12" label="单品名称" :show-overflow-tooltip='true' width="150px" />
        <el-table-column prop="13" label="产地"  />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/EquipmentOutput.vue

@@ -1,23 +1,150 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', title: '工序',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2', title: '加工设备', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', title: '销售单号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4', title: '生产订单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5',title: '产品名称', sortable: true,showOverflow:"ellipsis"},
    {field: '6', title: '完工数量', sortable: true},
    {field: '7', title: '完工面积', sortable: true},
    {field: '8', title: '报工时间', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'切割',
      2:'大海利宁',
      3:'NG23010102',
      4:'NG23010102A',
      5:'6mm超白LYE-80平钢(外)+12Ar(结)+6mm超白平钢(内)',
      6:'133',
      7:'123.14',
      8:'2023-01-02',

    },
    {
      1:'切割',
      2:'大海利宁',
      3:'NG23010102',
      4:'NG23010102A',
      5:'6mm超白LYE-80平钢(外)+12Ar(结)+6mm超白平钢(内)',
      6:'133',
      7:'123.14',
      8:'2023-01-02',

    },
    {
      1:'切割',
      2:'大海利宁',
      3:'NG23010102',
      4:'NG23010102A',
      5:'6mm超白LYE-80平钢(外)+12Ar(结)+6mm超白平钢(内)',
      6:'133',
      7:'123.14',
      8:'2023-01-02',

    },
    {
      1:'切割',
      2:'大海利宁',
      3:'NG23010102',
      4:'NG23010102A',
      5:'6mm超白LYE-80平钢(外)+12Ar(结)+6mm超白平钢(内)',
      6:'133',
      7:'123.14',
      8:'2023-01-02',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['6','7']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,33 +162,35 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'切割',
    2:'大海利宁',
    3:'NG23010102',
    4:'NG23010102A',
    5:'6mm超白LYE-80平钢(外)+12Ar(结)+6mm超白平钢(内)',
    6:'133',
    7:'123.14',
    8:'2023-01-02',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--设备产量-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="设备名称" v-model="form.name" style="width: 200px"/>-->
<!--        &nbsp;&nbsp;-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
@@ -76,29 +205,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="工序" />
        <el-table-column prop="2" label="加工设备"/>
        <el-table-column prop="3" label="销售单号" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="生产订单号" />
        <el-table-column prop="5" label="产品名称" :show-overflow-tooltip='true' />
        <el-table-column prop="6" label="完工数量" />
        <el-table-column prop="7" label="完工面积"/>
        <el-table-column prop="8" label="报工时间"/>
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/OrderBOMOutside.vue

@@ -1,23 +1,171 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '客户编码', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 130,title: '产品编号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '订单数量', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '领料工序', sortable: true},
    {field: '7',width: 100, title: '物料编码', sortable: true},
    {field: '8',width: 120, title: '物料名称', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 120,title: '单位', sortable: true},
    {field: '10', width: 120,title: '产地', sortable: true},
    {field: '11',width: 120, title: '物料数量', sortable: true},
    {field: '12',width: 120, title: '采购数量', sortable: true},
    {field: '13',width: 120, title: '是否审核', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'NG230101',
      2:'24',
      3:'06045001',
      4:'3mm白坡/PE粗磨/切角9*9mm/TG/按图[KD10059406-7-20002] 1011* 374(包装 : 320片/箱，用热隔FSC纸)',
      5:'1300',
      6:'一线装箱',
      7:'70030201000010400410000002',
      8:'FSC无尘纸',
      9:'张',
      10:'东莞市锦荣纸业',
      11:'1304.00',
      12:'1000.0000',
      13:'已审核',
    },
    {
      1:'NG230101',
      2:'24',
      3:'06045001',
      4:'3mm白坡/PE粗磨/切角9*9mm/TG/按图[KD10059406-7-20002] 1011* 374(包装 : 320片/箱，用热隔FSC纸)',
      5:'1300',
      6:'一线装箱',
      7:'70030201000010400410000002',
      8:'FSC无尘纸',
      9:'张',
      10:'东莞市锦荣纸业',
      11:'1304.00',
      12:'1000.0000',
      13:'已审核',
    },
    {
      1:'NG230101',
      2:'24',
      3:'06045001',
      4:'3mm白坡/PE粗磨/切角9*9mm/TG/按图[KD10059406-7-20002] 1011* 374(包装 : 320片/箱，用热隔FSC纸)',
      5:'1300',
      6:'一线装箱',
      7:'70030201000010400410000002',
      8:'FSC无尘纸',
      9:'张',
      10:'东莞市锦荣纸业',
      11:'1304.00',
      12:'1000.0000',
      13:'已审核',
    },
    {
      1:'NG230101',
      2:'24',
      3:'06045001',
      4:'3mm白坡/PE粗磨/切角9*9mm/TG/按图[KD10059406-7-20002] 1011* 374(包装 : 320片/箱，用热隔FSC纸)',
      5:'1300',
      6:'一线装箱',
      7:'70030201000010400410000002',
      8:'FSC无尘纸',
      9:'张',
      10:'东莞市锦荣纸业',
      11:'1304.00',
      12:'1000.0000',
      13:'已审核',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['5','11','12']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,37 +183,35 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'NG230101',
    2:'24',
    3:'06045001',
    4:'3mm白坡/PE粗磨/切角9*9mm/TG/按图[KD10059406-7-20002] 1011* 374(包装 : 320片/箱，用热隔FSC纸)',
    5:'1300',
    6:'一线装箱',
    7:'70030201000010400410000002',
    8:'FSC无尘纸',
    9:'张',
    10:'东莞市锦荣纸业',
    11:'1304.00',
    12:'1000.0000',
    13:'已审核',
  },
]

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--BOM报表-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="设备名称" v-model="form.name" style="width: 200px"/>-->
<!--        &nbsp;&nbsp;-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
@@ -80,34 +226,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="销售单号" />
        <el-table-column prop="2" label="客户编码" :show-overflow-tooltip='true'/>
        <el-table-column prop="3" label="产品编号" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="产品名称" :show-overflow-tooltip='true'/>
        <el-table-column prop="5" label="订单数量" :show-overflow-tooltip='true' />
        <el-table-column prop="6" label="领料工序" />
        <el-table-column prop="7" label="物料编码" :show-overflow-tooltip='true'/>
        <el-table-column prop="8" label="物料名称" :show-overflow-tooltip='true'/>
        <el-table-column prop="9" label="单位"/>
        <el-table-column prop="10" label="产地" :show-overflow-tooltip='true'/>
        <el-table-column prop="11" label="物料数量"/>
        <el-table-column prop="12" label="采购数量"/>
        <el-table-column prop="13" label="是否审核"/>
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/OrderPlanDecomposition.vue

@@ -1,23 +1,176 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '客户批次', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 130,title: '批次', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '面积', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '订单交接时间', sortable: true},
    {field: '7',width: 100, title: '销售单号', sortable: true},
    {field: '8',width: 120, title: '开始切割时间', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 120,title: '流转工序', sortable: true},
    {field: '10', width: 120,title: '完工数量', sortable: true},
    {field: '11',width: 120, title: '已入库数量', sortable: true},
    {field: '12',width: 120, title: '未入库数量', sortable: true},
    {field: '13',width: 120, title: '清单时间', sortable: true},
    {field: '14',width: 120, title: '生产用时(天)', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'新安北玻产业园',
      2:'1#宿舍楼墙',
      3:'1#补片',
      4:'8',
      5:'9.82',
      6:'2023-12-01 11:06:10',
      7:'NG23113003',
      8:'2023-12-03 23:19:11',
      9:'切割',
      10:'2',
      11:'0',
      12:'9',
      13:'已审核',
      14:'4',
    },
    {
      1:'新安北玻产业园',
      2:'1#宿舍楼墙',
      3:'1#补片',
      4:'8',
      5:'9.82',
      6:'2023-12-01 11:06:10',
      7:'NG23113003',
      8:'2023-12-03 23:19:11',
      9:'切割',
      10:'2',
      11:'0',
      12:'9',
      13:'已审核',
      14:'4',
    },
    {
      1:'新安北玻产业园',
      2:'1#宿舍楼墙',
      3:'1#补片',
      4:'8',
      5:'9.82',
      6:'2023-12-01 11:06:10',
      7:'NG23113003',
      8:'2023-12-03 23:19:11',
      9:'切割',
      10:'2',
      11:'0',
      12:'9',
      13:'已审核',
      14:'4',
    },
    {
      1:'新安北玻产业园',
      2:'1#宿舍楼墙',
      3:'1#补片',
      4:'8',
      5:'9.82',
      6:'2023-12-01 11:06:10',
      7:'NG23113003',
      8:'2023-12-03 23:19:11',
      9:'切割',
      10:'2',
      11:'0',
      12:'9',
      13:'已审核',
      14:'4',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['4','5','10','11','12']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,36 +188,35 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'新安北玻产业园',
    2:'1#宿舍楼墙',
    3:'1#补片',
    4:'8',
    5:'9.82',
    6:'2023-12-01 11:06:10',
    7:'NG23113003',
    8:'2023-12-03 23:19:11',
    9:'切割',
    10:'2',
    11:'0',
    12:'9',
    13:'已审核',
    14:'4',
  },
]

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--订单计划分解-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
@@ -79,35 +231,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="项目名称" width="115" :show-overflow-tooltip='true'/>
        <el-table-column prop="2" label="客户批次" width="115" :show-overflow-tooltip='true'/>
        <el-table-column prop="3" label="批次" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="数量" :show-overflow-tooltip='true'/>
        <el-table-column prop="5" label="面积" :show-overflow-tooltip='true' />
        <el-table-column prop="6" label="订单交接时间" width="115" :show-overflow-tooltip='true'/>
        <el-table-column prop="7" label="销售单号" width="115" :show-overflow-tooltip='true'/>
        <el-table-column prop="8" label="开始切割时间" width="115" :show-overflow-tooltip='true'/>
        <el-table-column prop="9" label="流转工序" width="82"/>
        <el-table-column prop="10" label="完工数量" width="85" :show-overflow-tooltip='true'/>
        <el-table-column prop="11" label="已入库数量" width="95"/>
        <el-table-column prop="12" label="未入库数量" width="95"/>
        <el-table-column prop="13" label="清单时间" width="82"/>
        <el-table-column prop="14" label="生产用时(天)" width="115"/>
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/ProcessToBeCompleted.vue

@@ -1,23 +1,127 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1',  title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2', title: '单片名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3',title: '未完数', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4', title: '未完面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},

  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'新安北玻产业园',
      2:'19mm超白平钢',
      3:'1',
      4:'3.11',
    },
    {
      1:'新安北玻产业园',
      2:'19mm超白平钢',
      3:'1',
      4:'3.11',
    },
    {
      1:'新安北玻产业园',
      2:'19mm超白平钢',
      3:'1',
      4:'3.11',
    },
    {
      1:'新安北玻产业园',
      2:'19mm超白平钢',
      3:'1',
      4:'3.11',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','finishedArea','wornNumber','wornArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,29 +139,37 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'新安北玻产业园',
    2:'19mm超白平钢',
    3:'1',
    4:'3.11',
  },
]

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--工序待完成报表-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
<!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
          <el-option
              v-for="item in options"
@@ -66,30 +178,56 @@
              :value="item.value"
          />
        </el-select>
        &nbsp;&nbsp;
        <el-button type="primary">查询</el-button>
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="项目名称" width="115" :show-overflow-tooltip='true'/>
        <el-table-column prop="2" label="单品名称" width="115" :show-overflow-tooltip='true'/>
        <el-table-column prop="3" label="未完数" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="未完面积" :show-overflow-tooltip='true'/>
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/ProductionSchedule.vue

@@ -1,27 +1,254 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import type { TableColumnCtx } from 'element-plus'
<script setup>

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 100, title: '序号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '楼层编号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 100,title: '形状', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '成品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 90,title: '宽', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 90,title: '高', sortable: true},
    {field: '7',width: 90, title: '数量', sortable: true},
    {field: '8',width: 90, title: '片标记', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 80,title: '标记', sortable: true},
    {field: '10', width: 120,title: '单片名称', sortable: true},
    {field: '11',width: 120, title: '切割', sortable: true},
    {field: '12',width: 120, title: '磨边', sortable: true},
    {field: '13',width: 120, title: '钢化', sortable: true},
    {field: '14',width: 120, title: '入库数量', sortable: true},
    {field: '15',width: 120, title: '入库面积', sortable: true},
    {field: '16',width: 120, title: '发货数量', sortable: true},
    {field: '17',width: 120, title: '发货面积', sortable: true},
    {field: '17',width: 120, title: '结算总面积', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'1',
      2:'J8-B1-BD-BL1-001',
      3:'普形',
      4:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢+12Ar(结)+10mm超白平钢(内)',
      5:'1114',
      6:'1445',
      7:'3',
      8:'(外)',
      9:'1',
      10:'10mm超白UD60平钢(外)',
      11:'1',
      12:'1',
      13:'1',
      14:'0',
      15:'0',
      16:'0',
      17:'0',
      18:'4.11',
    },
    {
      1:'1',
      2:'J8-B1-BD-BL1-001',
      3:'普形',
      4:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢+12Ar(结)+10mm超白平钢(内)',
      5:'1114',
      6:'1445',
      7:'3',
      8:'(中)',
      9:'2',
      10:'10mm超白UD60平钢(外)',
      11:'1',
      12:'1',
      13:'1',
      14:'0',
      15:'0',
      16:'0',
      17:'0',
      18:'4.11',
    },
    {
      1:'1',
      2:'J8-B1-BD-BL1-001',
      3:'普形',
      4:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢+12Ar(结)+10mm超白平钢(内)',
      5:'1114',
      6:'1445',
      7:'3',
      8:'(内)',
      9:'3',
      10:'10mm超白UD60平钢(外)',
      11:'1',
      12:'1',
      13:'1',
      14:'0',
      15:'0',
      16:'0',
      17:'0',
      18:'4.11',
    },
    {
      1:'2',
      2:'J8-B1-BD-BL1-001',
      3:'普形',
      4:'6mm超白UD60平钢(外)+12Ar(结)+6mm超白平钢+12Ar(结)+6mm超白平钢(内)',
      5:'1114',
      6:'1445',
      7:'3',
      8:'(外)',
      9:'1',
      10:'6mm超白UD60平钢(外)',
      11:'1',
      12:'1',
      13:'1',
      14:'0',
      15:'0',
      16:'0',
      17:'0',
      18:'4.11',
    },
    {
      1:'2',
      2:'J8-B1-BD-BL1-001',
      3:'普形',
      4:'6mm超白UD60平钢(外)+12Ar(结)+6mm超白平钢+12Ar(结)+6mm超白平钢(内)',
      5:'1114',
      6:'1445',
      7:'3',
      8:'(中)',
      9:'2',
      10:'6mm超白UD60平钢(外)',
      11:'1',
      12:'1',
      13:'1',
      14:'0',
      15:'0',
      16:'0',
      17:'0',
      18:'4.11',
    },
    {
      1:'2',
      2:'J8-B1-BD-BL1-001',
      3:'普形',
      4:'6mm超白UD60平钢(外)+12Ar(结)+6mm超白平钢+12Ar(结)+6mm超白平钢(内)',
      5:'1114',
      6:'1445',
      7:'3',
      8:'(内)',
      9:'3',
      10:'6mm超白UD60平钢(外)',
      11:'1',
      12:'1',
      13:'1',
      14:'0',
      15:'0',
      16:'0',
      17:'0',
      18:'4.11',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['7','11','12','13','14','15','16','17','18']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
]

const form = reactive({
  name: '',
  region: '',
@@ -31,159 +258,30 @@
  type: [],
  resource: '',
  desc: '',

})

const mergeCells = ref([
  { row: 0, col: 2, rowspan: 3, colspan: 0},
  { row: 3, col: 2, rowspan: 3, colspan: 0},

const objectSpanMethod = ({
                            row,
                            column,
                            rowIndex,
                            columnIndex,
                          }: SpanMethodProps) => {
  if (columnIndex === 0 ||columnIndex === 1||columnIndex === 2||columnIndex === 3||columnIndex === 6) {
    console.log(rowIndex)
    if (rowIndex % 3 === 0) {
      return {
        rowspan: 3,
        colspan: 1,
        column:1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
        column:1
      }
    }
  }
  { row: 0, col: 3, rowspan: 3, colspan: 0},
  { row: 3, col: 3, rowspan: 3, colspan: 0},

}
const tableData = [
  {
    1:'1',
    2:'J8-B1-BD-BL1-001',
    3:'普形',
    4:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢+12Ar(结)+10mm超白平钢(内)',
    5:'1114',
    6:'1445',
    7:'3',
    8:'(外)',
    9:'1',
    10:'10mm超白UD60平钢(外)',
    11:'1',
    12:'1',
    13:'1',
    14:'0',
    15:'0',
    16:'0',
    17:'0',
    18:'4.11',
  },
  {
    1:'1',
    2:'J8-B1-BD-BL1-001',
    3:'普形',
    4:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢+12Ar(结)+10mm超白平钢(内)',
    5:'1114',
    6:'1445',
    7:'3',
    8:'(中)',
    9:'2',
    10:'10mm超白UD60平钢(外)',
    11:'1',
    12:'1',
    13:'1',
    14:'0',
    15:'0',
    16:'0',
    17:'0',
    18:'4.11',
  },
  {
    1:'1',
    2:'J8-B1-BD-BL1-001',
    3:'普形',
    4:'10mm超白UD60平钢(外)+12Ar(结)+10mm超白平钢+12Ar(结)+10mm超白平钢(内)',
    5:'1114',
    6:'1445',
    7:'3',
    8:'(内)',
    9:'3',
    10:'10mm超白UD60平钢(外)',
    11:'1',
    12:'1',
    13:'1',
    14:'0',
    15:'0',
    16:'0',
    17:'0',
    18:'4.11',
  },
  {
    1:'2',
    2:'J8-B1-BD-BL1-001',
    3:'普形',
    4:'6mm超白UD60平钢(外)+12Ar(结)+6mm超白平钢+12Ar(结)+6mm超白平钢(内)',
    5:'1114',
    6:'1445',
    7:'3',
    8:'(外)',
    9:'1',
    10:'6mm超白UD60平钢(外)',
    11:'1',
    12:'1',
    13:'1',
    14:'0',
    15:'0',
    16:'0',
    17:'0',
    18:'4.11',
  },
  {
    1:'2',
    2:'J8-B1-BD-BL1-001',
    3:'普形',
    4:'6mm超白UD60平钢(外)+12Ar(结)+6mm超白平钢+12Ar(结)+6mm超白平钢(内)',
    5:'1114',
    6:'1445',
    7:'3',
    8:'(中)',
    9:'2',
    10:'6mm超白UD60平钢(外)',
    11:'1',
    12:'1',
    13:'1',
    14:'0',
    15:'0',
    16:'0',
    17:'0',
    18:'4.11',
  },
  {
    1:'2',
    2:'J8-B1-BD-BL1-001',
    3:'普形',
    4:'6mm超白UD60平钢(外)+12Ar(结)+6mm超白平钢+12Ar(结)+6mm超白平钢(内)',
    5:'1114',
    6:'1445',
    7:'3',
    8:'(内)',
    9:'3',
    10:'6mm超白UD60平钢(外)',
    11:'1',
    12:'1',
    13:'1',
    14:'0',
    15:'0',
    16:'0',
    17:'0',
    18:'4.11',
  },
]
  { row: 0, col: 4, rowspan: 3, colspan: 0},
  { row: 3, col: 4, rowspan: 3, colspan: 0},

  { row: 0, col: 5, rowspan: 3, colspan: 0},
  { row: 3, col: 5, rowspan: 3, colspan: 0},

  { row: 0, col: 8, rowspan: 3, colspan: 0},
  { row: 3, col: 8, rowspan: 3, colspan: 0},
])

</script>
<!--生产发货进度-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>
@@ -192,44 +290,53 @@
      </el-row>

    </div>
    <div>
      <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px"
      >
        <el-table-column prop="1" label="序号" />
        <el-table-column prop="2" label="楼层编号" width="120px" :show-overflow-tooltip='true'/>
        <el-table-column prop="3" label="形状" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="成品名称" width="120px" :show-overflow-tooltip='true'/>
        <el-table-column prop="5" label="宽" />
        <el-table-column prop="6" label="高" />
        <el-table-column prop="7" label="数量"/>
        <el-table-column prop="8" label="片标记"/>
        <el-table-column prop="9" label="标记" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="单片名称" width="120px"  :show-overflow-tooltip='true'/>
        <el-table-column prop="11" label="切割"  width="120px" />
        <el-table-column prop="12" label="磨边" :show-overflow-tooltip='true' width="150px" />
        <el-table-column prop="13" label="钢化"  />
        <el-table-column prop="14" label="入库数量"  />
        <el-table-column prop="15" label="入库面积"  />
        <el-table-column prop="16" label="发货数量"  />
        <el-table-column prop="17" label="发货面积"  />
        <el-table-column prop="18" label="结算总面积"  />
      </el-table>
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        :merge-cells="mergeCells"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/QualityReport.vue

@@ -1,23 +1,170 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '客户编码', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 130,title: '项目名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '订单序号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '产品名称', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '订单数量', sortable: true},
    {field: '7',width: 100, title: '备用件', sortable: true},
    {field: '8',width: 120, title: '投入数量', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 120,title: '次破数量', sortable: true},
    {field: '10', width: 120,title: '补片数量', sortable: true},
    {field: '11',width: 120, title: '入库数量', sortable: true},
    {field: '12',width: 120, title: '报废率', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'NG23022706',
      2:'45',
      3:'大板镜',
      4:'1',
      5:'3mm 高性能环保镜 3660*2440',
      6:'180 ',
      7:'0',
      8:'186',
      9:'3',
      10:'3',
      11:'180',
      12:'1.6129%',

    },
    {
      1:'NG23022706',
      2:'45',
      3:'大板镜',
      4:'1',
      5:'3mm 高性能环保镜 3660*2440',
      6:'180 ',
      7:'0',
      8:'186',
      9:'3',
      10:'3',
      11:'180',
      12:'1.6129%',

    },
    {
      1:'NG23022706',
      2:'45',
      3:'大板镜',
      4:'1',
      5:'3mm 高性能环保镜 3660*2440',
      6:'180 ',
      7:'0',
      8:'186',
      9:'3',
      10:'3',
      11:'180',
      12:'1.6129%',

    },
    {
      1:'NG23022706',
      2:'45',
      3:'大板镜',
      4:'1',
      5:'3mm 高性能环保镜 3660*2440',
      6:'180 ',
      7:'0',
      8:'186',
      9:'3',
      10:'3',
      11:'180',
      12:'1.6129%',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['6','7','8','9','10','11']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,30 +182,27 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'NG23022706',
    2:'45',
    3:'大板镜',
    4:'1',
    5:'3mm 高性能环保镜 3660*2440',
    6:'180 ',
    7:'0',
    8:'186',
    9:'3',
    10:'3',
    11:'180',
    12:'1.6129%',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--品质报表-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="客户名称" v-model="form.name" style="width: 200px"/>-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
@@ -66,39 +210,59 @@
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-button type="primary">查询</el-button>
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="销售单号" />
        <el-table-column prop="2" label="客户编码"/>
        <el-table-column prop="3" label="项目名称" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="订单序号" />
        <el-table-column prop="5" label="产品名称" :show-overflow-tooltip='true'/>
        <el-table-column prop="6" label="订单数量" />
        <el-table-column prop="7" label="备用件"/>
        <el-table-column prop="8" label="投入数量"/>
        <el-table-column prop="9" label="次破数量" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="布片数量"  />
        <el-table-column prop="11" label="入库数量"  width="120px" />
        <el-table-column prop="12" label="报废率" :show-overflow-tooltip='true' width="150px" />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 50%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/RawMaterialRequisition.vue

@@ -1,23 +1,165 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 100, title: '批次', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 130,title: '销售单号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '产品类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '物料名称', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '原片产地', sortable: true},
    {field: '7',width: 90, title: '宽', sortable: true},
    {field: '8',width: 90, title: '高', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 120,title: '已领数量', sortable: true},
    {field: '10', width: 120,title: '已领面积', sortable: true},
    {field: '11',width: 120, title: '原片生产日期', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'武汉安铭华侨城',
      2:'23第1批',
      3:'N0231210',
      4:'平钢',
      5:'10mm超白UD60',
      6:'山东全品',
      7:'3360',
      8:'4567',
      9:'6',
      10:'22.76',
      11:'2023-10-22',

    },
    {
      1:'武汉安铭华侨城',
      2:'23第1批',
      3:'N0231210',
      4:'平钢',
      5:'10mm超白UD60',
      6:'山东全品',
      7:'3360',
      8:'4567',
      9:'6',
      10:'22.76',
      11:'2023-10-22',

    },
    {
      1:'武汉安铭华侨城',
      2:'23第1批',
      3:'N0231210',
      4:'平钢',
      5:'10mm超白UD60',
      6:'山东全品',
      7:'3360',
      8:'4567',
      9:'6',
      10:'22.76',
      11:'2023-10-22',

    },
    {
      1:'武汉安铭华侨城',
      2:'23第1批',
      3:'N0231210',
      4:'平钢',
      5:'10mm超白UD60',
      6:'山东全品',
      7:'3360',
      8:'4567',
      9:'6',
      10:'22.76',
      11:'2023-10-22',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['9','10']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,30 +177,27 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'武汉安铭华侨城',
    2:'23第1批',
    3:'N0231210',
    4:'平钢',
    5:'10mm超白UD60',
    6:'山东全品',
    7:'3360',
    8:'4567',
    9:'6',
    10:'22.76',
    11:'2023-10-22',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--原片领料-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 200px"/>-->
<!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 200px"/>-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
@@ -66,38 +205,60 @@
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;

        <el-button type="primary">查询</el-button>
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="项目名称" :show-overflow-tooltip='true'/>
        <el-table-column prop="2" label="批次"/>
        <el-table-column prop="3" label="销售单号" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="产品类型" />
        <el-table-column prop="5" label="物料名称" :show-overflow-tooltip='true'/>
        <el-table-column prop="6" label="原片产地" />
        <el-table-column prop="7" label="宽"/>
        <el-table-column prop="8" label="高"/>
        <el-table-column prop="9" label="已领数量" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="已领面积"  />
        <el-table-column prop="11" label="原片生产日期"  width="120px" />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/SplittingDetailsOutside.vue

@@ -1,23 +1,170 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 130, title: '流程卡号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 100, title: '序号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 100,title: '落架顺序', sortable: true,},
    {field: '4',width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '批次', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '楼层编号', sortable: true},
    {field: '7',width: 90, title: '宽', sortable: true},
    {field: '8',width: 90, title: '高', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 90,title: '数量', sortable: true},
    {field: '10', width: 90,title: '面积', sortable: true},
    {field: '11',width: 90, title: '形状', sortable: true},
    {field: '12',width: 120, title: '备注', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'NG23120702A01',
      2:'8',
      3:'1',
      4:'银隆广场',
      5:'补8',
      6:'J8-B1-BD-BL1-009 ',
      7:'1764',
      8:'2466',
      9:'5',
      10:'23.13',
      11:'普形',
      12:'',

    },
    {
      1:'NG23120702A01',
      2:'8',
      3:'1',
      4:'银隆广场',
      5:'补8',
      6:'J8-B1-BD-BL1-009 ',
      7:'1764',
      8:'2466',
      9:'5',
      10:'23.13',
      11:'普形',
      12:'',

    },
    {
      1:'NG23120702A01',
      2:'8',
      3:'1',
      4:'银隆广场',
      5:'补8',
      6:'J8-B1-BD-BL1-009 ',
      7:'1764',
      8:'2466',
      9:'5',
      10:'23.13',
      11:'普形',
      12:'',

    },
    {
      1:'NG23120702A01',
      2:'8',
      3:'1',
      4:'银隆广场',
      5:'补8',
      6:'J8-B1-BD-BL1-009 ',
      7:'1764',
      8:'2466',
      9:'5',
      10:'23.13',
      11:'普形',
      12:'',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['9','10']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,27 +182,23 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'NG23120702A01',
    2:'8',
    3:'1',
    4:'银隆广场',
    5:'补8',
    6:'J8-B1-BD-BL1-009 ',
    7:'1764',
    8:'2466',
    9:'5',
    10:'23.13',
    11:'普形',
    12:'',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--分架明细-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
        <el-input placeholder="销售单号" v-model="form.name" style="width: 200px"/>
@@ -64,33 +207,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="流程卡号" width="130px"/>
        <el-table-column prop="2" label="序号"/>
        <el-table-column prop="3" label="落架顺序" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="项目名称" />
        <el-table-column prop="5" label="批次" />
        <el-table-column prop="6" label="楼层编号" :show-overflow-tooltip='true' />
        <el-table-column prop="7" label="宽"/>
        <el-table-column prop="8" label="高"/>
        <el-table-column prop="9" label="数量" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="面积"  />
        <el-table-column prop="11" label="形状"   />
        <el-table-column prop="12" label="备注" :show-overflow-tooltip='true' width="150px" />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/TaskCompletionStatus.vue

@@ -1,23 +1,180 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '客户名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '项目名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 100,title: '批次', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '产品大类', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '产品小类', sortable: true},
    {field: '7',width: 100, title: '订单数', sortable: true},
    {field: '8',width: 100, title: '总面积', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 120,title: '发货数量', sortable: true},
    {field: '10', width: 120,title: '发货面积', sortable: true},
    {field: '11',width: 120, title: '报表日期', sortable: true},
    {field: '12',width: 90, title: '切割', sortable: true},
    {field: '13',width: 90, title: '磨边', sortable: true},
    {field: '14',width: 90, title: '钢化', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'西安高科幕墙门窗有限公司   ',
      2:'银隆广场',
      3:'补8',
      4:'NG23120702',
      5:'中空玻璃',
      6:'双平钢中空',
      7:'1',
      8:'1.88',
      9:'',
      10:'',
      11:'2023-12-17',
      12:'5',
      13:'5',
      14:'5',

    },
    {
      1:'西安高科幕墙门窗有限公司   ',
      2:'银隆广场',
      3:'补8',
      4:'NG23120702',
      5:'中空玻璃',
      6:'双平钢中空',
      7:'1',
      8:'1.88',
      9:'',
      10:'',
      11:'2023-12-17',
      12:'5',
      13:'5',
      14:'5',

    },
    {
      1:'西安高科幕墙门窗有限公司   ',
      2:'银隆广场',
      3:'补8',
      4:'NG23120702',
      5:'中空玻璃',
      6:'双平钢中空',
      7:'1',
      8:'1.88',
      9:'',
      10:'',
      11:'2023-12-17',
      12:'5',
      13:'5',
      14:'5',

    },
    {
      1:'西安高科幕墙门窗有限公司   ',
      2:'银隆广场',
      3:'补8',
      4:'NG23120702',
      5:'中空玻璃',
      6:'双平钢中空',
      7:'1',
      8:'1.88',
      9:'',
      10:'',
      11:'2023-12-17',
      12:'5',
      13:'5',
      14:'5',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['7','8','9','10']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,33 +192,27 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'西安高科幕墙门窗有限公司   ',
    2:'银隆广场',
    3:'补8',
    4:'NG23120702',
    5:'中空玻璃',
    6:'双平钢中空',
    7:'1',
    8:'1.88',
    9:'',
    10:'',
    11:'2023-12-17',
    12:'5',
    13:'5',
    14:'5',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--任务完成情况-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
<!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
@@ -69,7 +220,7 @@
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 120px"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
@@ -84,35 +235,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="客户名称" :show-overflow-tooltip='true'/>
        <el-table-column prop="2" label="项目名称" :show-overflow-tooltip='true'/>
        <el-table-column prop="3" label="批次" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="销售单号" width="120px" />
        <el-table-column prop="5" label="产品大类" />
        <el-table-column prop="6" label="产品小类" width="120px"/>
        <el-table-column prop="7" label="订单数"/>
        <el-table-column prop="8" label="总面积"/>
        <el-table-column prop="9" label="发货数量" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="发货面积"  />
        <el-table-column prop="11" label="报表日期"  width="120px" />
        <el-table-column prop="12" label="切割"  />
        <el-table-column prop="13" label="磨边"  />
        <el-table-column prop="14" label="钢化"  />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/TeamOutput.vue

@@ -1,23 +1,185 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '报工时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '工序', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 130,title: '班组名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '流程卡号', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '产品大类', sortable: true},
    {field: '7',width: 100, title: '产品小类', sortable: true},
    {field: '8',width: 120, title: '在制品名称', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 110,title: '磨边类型', sortable: true},
    {field: '10', width: 100,title: '形状', sortable: true},
    {field: '11',width: 100, title: '厚度', sortable: true},
    {field: '12',width: 110, title: '完工数量', sortable: true},
    {field: '13',width: 110, title: '完工面积', sortable: true},
    {field: '14',width: 110, title: '平方毫米(天)', sortable: true},
    {field: '15',width: 110, title: '包装方式', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'银川大楼',
      5:'NG23010121A01',
      6:'中空玻璃',
      7:'平中空夹胶',
      8:'5mmLYE-70平钢(外)+20mmA(密)+5mm超白平钢(内)',
      9:'精磨',
      10:'普型',
      11:'5',
      12:'11',
      13:'41.14',
      14:'123.33',
      15:'',

    },
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'银川大楼',
      5:'NG23010121A01',
      6:'中空玻璃',
      7:'平中空夹胶',
      8:'5mmLYE-70平钢(外)+20mmA(密)+5mm超白平钢(内)',
      9:'精磨',
      10:'普型',
      11:'5',
      12:'11',
      13:'41.14',
      14:'123.33',
      15:'',

    },
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'银川大楼',
      5:'NG23010121A01',
      6:'中空玻璃',
      7:'平中空夹胶',
      8:'5mmLYE-70平钢(外)+20mmA(密)+5mm超白平钢(内)',
      9:'精磨',
      10:'普型',
      11:'5',
      12:'11',
      13:'41.14',
      14:'123.33',
      15:'',

    },
    {
      1:'2023-01-01',
      2:'钢化',
      3:'钢化一班',
      4:'银川大楼',
      5:'NG23010121A01',
      6:'中空玻璃',
      7:'平中空夹胶',
      8:'5mmLYE-70平钢(外)+20mmA(密)+5mm超白平钢(内)',
      9:'精磨',
      10:'普型',
      11:'5',
      12:'11',
      13:'41.14',
      14:'123.33',
      15:'',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['12','13','14']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,34 +197,27 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'2023-01-01',
    2:'钢化',
    3:'钢化一班',
    4:'银川大楼',
    5:'NG23010121A01',
    6:'中空玻璃',
    7:'平中空夹胶',
    8:'5mmLYE-70平钢(外)+20mmA(密)+5mm超白平钢(内)',
    9:'精磨',
    10:'普型',
    11:'5',
    12:'11',
    13:'41.14',
    14:'123.33',
    15:'',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--班组产量-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="班组名称" v-model="form.name" style="width: 150px"/>-->
<!--        <el-input placeholder="厚度" v-model="form.name" style="width: 50px"/>-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
@@ -70,6 +225,7 @@
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
@@ -78,43 +234,58 @@
              :key="item.value"
              :label="item.label"
              :value="item.value"
              style="width: 100px"
          />
        </el-select>
        <el-button type="primary">查询</el-button>
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="报工时间" width="100px"  />
        <el-table-column prop="2" label="工序"/>
        <el-table-column prop="3" label="班组名称" width="100px" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="项目名称" width="100px"  :show-overflow-tooltip='true'/>
        <el-table-column prop="5" label="流程卡号" width="130px"/>
        <el-table-column prop="6" label="产品大类" width="100px"/>
        <el-table-column prop="7" label="产品小类" width="100px"/>
        <el-table-column prop="8" label="在制品名称"  width="120px" :show-overflow-tooltip='true'/>
        <el-table-column prop="9" label="磨边类型" width="90px" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="形状"  />
        <el-table-column prop="11" label="厚度"  />
        <el-table-column prop="12" label="完工数量" :show-overflow-tooltip='true' width="100px" />
        <el-table-column prop="13" label="完工面积"  width="100px"/>
        <el-table-column prop="14" label="平方毫米"  width="100px"/>
        <el-table-column prop="15" label="包装方式"  width="100px"/>
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/WorkInProgress.vue

@@ -1,23 +1,175 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1', width: 120, title: '工序',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2',width: 120, title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3', width: 130,title: '客户名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4',width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5', width: 100,title: '批次', sortable: true,showOverflow:"ellipsis"},
    {field: '6', width: 100,title: '序号', sortable: true},
    {field: '7',width: 100, title: '形状', sortable: true},
    {field: '8',width: 120, title: '楼层编号', sortable: true,showOverflow:"ellipsis"},
    {field: '9', width: 120,title: '工艺流程', sortable: true},
    {field: '10', width: 120,title: '订单数', sortable: true},
    {field: '11',width: 120, title: '宽', sortable: true},
    {field: '12',width: 120, title: '高', sortable: true},
    {field: '13',width: 120, title: '库存数', sortable: true},
    {field: '14',width: 120, title: '库存面积', sortable: true},
    {field: '15',width: 120, title: '成品名称', sortable: true},
    {field: '16',width: 120, title: '在制品名称', sortable: true},
    {field: '17',width: 120, title: '弯钢半径', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'磨边',
      2:'NG22091906A02/1',
      3:'中国建筑装饰集团有限公司',
      4:'银川绿地中心南塔(25批2)',
      5:'25批2',
      6:'形状',
      7:'2',
      8:'25-BL19',
      9:'切割->镀膜->磨边->钢化->包装',
      10:'40',
      11:'1345',
      12:'1556',
      13:'1',
      14:'1.99',
      15:'8mm超白【LYTM-46】平钢',
      16:'8mm超白【LYTM-46】平钢',
      17:'0',

    },
    {
      1:'磨边',
      2:'NG22091906A02/1',
      3:'中国建筑装饰集团有限公司',
      4:'银川绿地中心南塔(25批2)',
      5:'25批2',
      6:'形状',
      7:'2',
      8:'25-BL19',
      9:'切割->镀膜->磨边->钢化->包装',
      10:'40',
      11:'1345',
      12:'1556',
      13:'1',
      14:'1.99',
      15:'8mm超白【LYTM-46】平钢',
      16:'8mm超白【LYTM-46】平钢',
      17:'0',

    },
    {
      1:'磨边',
      2:'NG22091906A02/1',
      3:'中国建筑装饰集团有限公司',
      4:'银川绿地中心南塔(25批2)',
      5:'25批2',
      6:'形状',
      7:'2',
      8:'25-BL19',
      9:'切割->镀膜->磨边->钢化->包装',
      10:'40',
      11:'1345',
      12:'1556',
      13:'1',
      14:'1.99',
      15:'8mm超白【LYTM-46】平钢',
      16:'8mm超白【LYTM-46】平钢',
      17:'0',

    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','finishedArea','wornNumber','wornArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,36 +187,27 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'磨边',
    2:'NG22091906A02/1',
    3:'中国建筑装饰集团有限公司',
    4:'银川绿地中心南塔(25批2)',
    5:'25批2',
    6:'形状',
    7:'2',
    8:'25-BL19',
    9:'切割->镀膜->磨边->钢化->包装',
    10:'40',
    11:'1345',
    12:'1556',
    13:'1',
    14:'1.99',
    15:'8mm超白【LYTM-46】平钢',
    16:'8mm超白【LYTM-46】平钢',
    17:'0',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--在制品报表-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
<!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
@@ -87,38 +230,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="工序" />
        <el-table-column prop="2" label="流程卡号" width="120px" :show-overflow-tooltip='true'/>
        <el-table-column prop="3" label="客户名称" width="120px" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="项目名称" width="120px" :show-overflow-tooltip='true'/>
        <el-table-column prop="5" label="批次" />
        <el-table-column prop="6" label="序号" />
        <el-table-column prop="7" label="形状"/>
        <el-table-column prop="8" label="楼层编号" width="120px" :show-overflow-tooltip='true'/>
        <el-table-column prop="9" label="工艺流程" width="120px" :show-overflow-tooltip='true' />
        <el-table-column prop="10" label="订单数"  />
        <el-table-column prop="11" label="宽"   />
        <el-table-column prop="12" label="高" :show-overflow-tooltip='true' />
        <el-table-column prop="13" label="库存数"  />
        <el-table-column prop="14" label="库存面积"  width="100px"/>
        <el-table-column prop="15" label="成品名称" width="120px"  :show-overflow-tooltip='true'/>
        <el-table-column prop="16" label="在制品名称"  width="120px" :show-overflow-tooltip='true'/>
        <el-table-column prop="17" label="弯钢半径"  width="100px"/>
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/report/Yield.vue

@@ -1,23 +1,151 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
<script setup>

import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: '1',  title: '工序',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: '2', title: '销售单号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '3',title: '客户名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: '4', title: '成品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '5',title: '完工面积', sortable: true,showOverflow:"ellipsis"},
    {field: '6',title: '次破面积', sortable: true},
    {field: '7', title: '总面积', sortable: true},
    {field: '8', title: '成品率', sortable: true,},
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      1:'夹层',
      2:'NG23103001',
      3:'慕青文化',
      4:'10mmLYTM-140弯钢化(外)+2.28PVB透明+10mm白玻弯钢化(内)',
      5:'256.67',
      6:'7.94',
      7:'264.61',
      8:'97.0%',

    },
    {
      1:'夹层',
      2:'NG23103001',
      3:'慕青文化',
      4:'10mmLYTM-140弯钢化(外)+2.28PVB透明+10mm白玻弯钢化(内)',
      5:'256.67',
      6:'7.94',
      7:'264.61',
      8:'97.0%',

    },
    {
      1:'夹层',
      2:'NG23103001',
      3:'慕青文化',
      4:'10mmLYTM-140弯钢化(外)+2.28PVB透明+10mm白玻弯钢化(内)',
      5:'256.67',
      6:'7.94',
      7:'264.61',
      8:'97.0%',

    },
    {
      1:'夹层',
      2:'NG23103001',
      3:'慕青文化',
      4:'10mmLYTM-140弯钢化(外)+2.28PVB透明+10mm白玻弯钢化(内)',
      5:'256.67',
      6:'7.94',
      7:'264.61',
      8:'97.0%',

    },

  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['5','6','7']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const value = ref('')
@@ -35,27 +163,27 @@
    label: 'Option3',
  },
]
const tableData = [
  {
    1:'夹层',
    2:'NG23103001',
    3:'慕青文化',
    4:'10mmLYTM-140弯钢化(外)+2.28PVB透明+10mm白玻弯钢化(内)',
    5:'256.67',
    6:'7.94',
    7:'264.61',
    8:'97.0%',

  },
]
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',

})

</script>
<!--成品率报表-->

<template>
  <div class="div-main">
  <div class="main-div-customer">
    <div id="selectForm">
      <el-row :gutter="0">
<!--        <el-input placeholder="工序" v-model="form.name" style="width: 100px"/>-->
<!--        <el-input placeholder="客户名称" v-model="form.name" style="width: 120px"/>-->
        <!--        <el-input placeholder="销售单号" v-model="form.name" style="width: 150px"/>-->
        <!--        <el-input placeholder="项目名称" v-model="form.name" style="width: 150px"/>-->
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
@@ -63,6 +191,7 @@
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
            style="width: 100px"
        />
        &nbsp;&nbsp;
        <el-select v-model="value" class="m-2" placeholder="查询类型">
@@ -77,29 +206,52 @@
      </el-row>

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column prop="1" label="工序" />
        <el-table-column prop="2" label="销售单号"/>
        <el-table-column prop="3" label="客户名称" :show-overflow-tooltip='true' />
        <el-table-column prop="4" label="成品名称"  :show-overflow-tooltip='true'/>
        <el-table-column prop="5" label="完工面积" />
        <el-table-column prop="6" label="次破面积" />
        <el-table-column prop="7" label="总面积"/>
        <el-table-column prop="8" label="成品率"/>
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 70%;
  width: 60%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/reportingWorks/AddReportingWork.vue

@@ -1,124 +1,239 @@
<script setup>
import { reactive } from 'vue'
import {Open} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/processCard/PrintFlowCard', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
}

// do not use same name with ref
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

const form = reactive({
  lckh:'',
  lckh: 'NG23120801A01/1'
})
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
  //  {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    {field: 'serialNumber',width:90, title: '序号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'singlePieceName',width:120, title: '单片名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'marking',width:90, title: '标记', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'pieces',width:100, title: '片标记',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'processCardNumber',width:110, title: '流程卡数量', sortable: true,showOverflow:"ellipsis"},
    {field: 'width',width:70, title: '宽', sortable: true},
    {field: 'height',width:70, title: '高', sortable: true},
    {field: 'shape',width:70, title: '形状', sortable: true,showOverflow:"ellipsis"},
    {field: 'upCompletedQuantity',width:120, title: '上工完工数量', sortable: true},
    {field: 'completedQuantity',width:100, title: '完工数量', sortable: true},
    {field: 'numberBroken',width:100, title: '次破数量', sortable: true},
    {field: 'availableUse',width:80, title: '可利用', sortable: true},
    {field: 'returnProcess',width:100, title: '退回工序', sortable: true},
    {field: 'reasonType',width:100, title: '次破类型', sortable: true},
    {field: 'reasonDamage',width:100, title: '次破原因', sortable: true},
    {field: 'responsibilityDevice',width:100, title: '责任设备', sortable: true},
    {field: 'responsibilityProcess',width:100, title: '责任工序', sortable: true},
    {field: 'responsibilityTeams',width:100, title: '责任班组', sortable: true},
    {field: 'responsibilityPersonnel',width:100, title: '责任人员', sortable: true},
    {field: 'completed', width:90,title: '已完工', sortable: true},
    {field: 'onceBroken', width:90,title: '已次破', sortable: true}

  ],//表头按钮

  toolbarConfig: {
    buttons: [
      { code: 'empty', name: '清空报工数量'  },
      { code: 'sameCompletion', name: '完工相同'  },
      { code: 'sameDamage', name: '次破相同'  },
      { code: 'sameOneCompletion', name: '完工一列相同'  },
      { code: 'sameOneDamage', name: '次破一列相同'  },
      {code: 'print_lck', name: '保存',status:'primary' ,icon:'vxe-icon-save'},
      {code: 'print_lck', name: '保存并审核',status:'primary' ,icon:'vxe-icon-save'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '11',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(内)',
      marking: '2',
      pieces: '(内)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '11',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      serialNumber:'2',
      singlePieceName: '8mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '11',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      serialNumber:'2',
      singlePieceName: '8mm白玻平钢(内)',
      marking: '2',
      pieces: '(内)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '11',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['processCardNumber','upCompletedQuantity','completedQuantity','numberBroken','']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const tableData = [
  {
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(内)',
    marking: '2',
    pieces: '(内)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    serialNumber:'2',
    singlePieceName: '8mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    serialNumber:'2',
    singlePieceName: '8mm白玻平钢(内)',
    marking: '2',
    pieces: '(内)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
]
</script>

<template>
<div>
  <div id="head">
    <el-input placeholder="流程卡号" v-model="form.name" style="width: 200px"/>
    <el-input placeholder="流程卡号" v-model="form.lckh" style="width: 200px"/>
    &nbsp;

    <select class="processesSt">
@@ -172,55 +287,76 @@
        <td>1</td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td><el-button  type="primary">保存</el-button></td>
        <td><el-button  type="primary">保存并审核</el-button></td>
        <td><el-button  type="primary">清空报工数量</el-button></td>
        <td><el-button  type="primary">完工相同</el-button></td>
        <td><el-button  type="primary">次破相同</el-button></td>
        <td>单片次破</td>
        <td>
          <el-select v-model="value" placeholder="允许" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </td>

        <td><el-button  type="primary">完工一列相同</el-button></td>
        <td><el-button  type="primary">次破一列相同</el-button></td>
        <td><el-button  type="primary">是否允许</el-button></td>
        <td></td>
        <td></td>
        <td></td>

        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
  <div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column  prop="serialNumber" label="序号" width="60" />
      <el-table-column prop="singlePieceName" :show-overflow-tooltip='true' label="单片名称" width="120" />
      <el-table-column prop="marking" label="标记" width="60" />
      <el-table-column prop="pieces" label="片标记" width="70" />
      <el-table-column prop="processCardNumber" label="流程卡数量" width="95" />
      <el-table-column prop="width" label="宽" width="60" />
      <el-table-column prop="height" label="高" width="60" />
      <el-table-column prop="shape" label="形状" :show-overflow-tooltip='true' width="60" />
      <el-table-column prop="upCompletedQuantity" label="上工完工数量" width="110" />
      <el-table-column prop="completedQuantity" label="完工数量" width="85" />
      <el-table-column prop="numberBroken" label="次破数量" width="85" />
      <el-table-column prop="availableUse" label="可利用" width="70" />
      <el-table-column prop="returnProcess" label="退回工序" width="85" />
      <el-table-column prop="reasonType" label="次破类型" :show-overflow-tooltip='true' width="85" />
      <el-table-column prop="reasonDamage" label="次破原因" :show-overflow-tooltip='true' width="85" />
      <el-table-column prop="responsibilityDevice" label="责任设备" :show-overflow-tooltip='true' width="85" />
      <el-table-column prop="responsibilityProcess" label="责任工序" :show-overflow-tooltip='true' width="85" />
      <el-table-column prop="responsibilityTeams" label="责任班组" :show-overflow-tooltip='true' width="85" />
      <el-table-column prop="responsibilityPersonnel" label="责任人员" :show-overflow-tooltip='true' width="85" />
      <el-table-column prop="completed" label="已完工" width="90" />
      <el-table-column prop="onceBroken" label="已次破" width="90" />
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        min-height="100px"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        size="small"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">打印</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">排版</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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





    </el-table><!-- <h1>{{msg}}</h1> -->
    </vxe-grid>
  </div>
</div>
</template>

<style scoped>


.processCard{
  width: 140px;
}

 north-glass-erp/northglass-erp/src/views/pp/reportingWorks/QualityInReviewDetail.vue

@@ -1,192 +1,274 @@
<script setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  lckh:'',
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/ReportingWorkDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: 'serialNumber', width: 120, title: '序号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'singlePieceName',width: 120, title: '单片名称', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'marking', width: 130,title: '标记', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'pieces',width: 120, title: '片标记',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'processCardNumber', width: 100,title: '流程卡数量', sortable: true,showOverflow:"ellipsis"},
    {field: 'width', width: 100,title: '宽', sortable: true},
    {field: 'height',width: 100, title: '高', sortable: true},
    {field: 'shape',width: 120, title: '形状', sortable: true,showOverflow:"ellipsis"},
    {field: 'upCompletedQuantity', width: 120,title: '上工完工数量', sortable: true},
    {field: 'completedQuantity',width: 120, title: '完工数量', sortable: true},
    {field: 'numberBroken',width: 120, title: '次破数量', sortable: true},
    {field: 'availableUse',width: 120, title: '可利用', sortable: true},
    {field: 'returnProcess',width: 120, title: '退回工序', sortable: true},
    {field: 'reasonType',width: 120, title: '次破类型', sortable: true},
    {field: 'reasonDamage',width: 120, title: '次破原因', sortable: true},
    {field: 'responsibilityDevice',width: 120, title: '责任设备', sortable: true},
    {field: 'responsibilityProcess',width: 120, title: '责任工序', sortable: true},
    {field: 'responsibilityTeams',width: 120, title: '责任班组', sortable: true},
    {field: 'responsibilityPersonnel',width: 120, title: '责任人员', sortable: true},
    {field: 'completed',width: 90, title: '已完工', sortable: true},
    {field: 'onceBroken',width: 90, title: '已次破', sortable: true},
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {code: 'print_lck', name: '审核通过',status:'primary' },
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      serialNumber:'1',
      singlePieceName: '6mm白玻平钢(内)',
      marking: '2',
      pieces: '(内)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      serialNumber:'2',
      singlePieceName: '8mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
    {
      serialNumber:'2',
      singlePieceName: '8mm白玻平钢(内)',
      marking: '2',
      pieces: '(内)',
      processCardNumber: '11',
      width: '575',
      height:"2241",
      shape: '普形',
      upCompletedQuantity: '12',
      completedQuantity: '1',
      numberBroken:'',
      availableUse:'',
      returnProcess:'',

      reasonType: '机器',
      reasonDamage:'气泡超标',
      available:'',
      reworkProcess:'',
      responsibilityProcess:'中空',
      responsibilityTeams:'中空一班',
      responsibilityPersonnel:'',
      responsibilityDevice:'中空3#线',
      completed:'',
      onceBroken:'',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['processCardNumber','upCompletedQuantity','completedQuantity','numberBroken','completed','onceBroken']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})

const tableData = [
  {
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    serialNumber:'1',
    singlePieceName: '6mm白玻平钢(内)',
    marking: '2',
    pieces: '(内)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    serialNumber:'2',
    singlePieceName: '8mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
  {
    serialNumber:'2',
    singlePieceName: '8mm白玻平钢(内)',
    marking: '2',
    pieces: '(内)',
    processCardNumber: '11',
    width: '575',
    height:"2241",
    shape: '普形',
    upCompletedQuantity: '12',
    completedQuantity: '1',
    numberBroken:'',
    availableUse:'',
    returnProcess:'',

    reasonType: '机器',
    reasonDamage:'气泡超标',
    available:'',
    reworkProcess:'',
    responsibilityProcess:'中空',
    responsibilityTeams:'中空一班',
    responsibilityPersonnel:'',
    responsibilityDevice:'中空3#线',
    completed:'',
    onceBroken:'',
  },
]
</script>

<template>
  <div class="main-div-customer">

    <div>
      <div class="adopt" style="float: right">
        <el-button type="primary">通过</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column  prop="serialNumber" label="序号" width="60" />
        <el-table-column prop="singlePieceName" :show-overflow-tooltip='true' label="单片名称" width="120" />
        <el-table-column prop="marking" label="标记" width="60" />
        <el-table-column prop="pieces" label="片标记" width="70" />
        <el-table-column prop="processCardNumber" label="流程卡数量" width="95" />
        <el-table-column prop="width" label="宽" width="60" />
        <el-table-column prop="height" label="高" width="60" />
        <el-table-column prop="shape" label="形状" :show-overflow-tooltip='true' width="60" />
        <el-table-column prop="upCompletedQuantity" label="上工完工数量" width="110" />
        <el-table-column prop="completedQuantity" label="完工数量" width="85" />
        <el-table-column prop="numberBroken" label="次破数量" width="85" />
        <el-table-column prop="availableUse" label="可利用" width="70" />
        <el-table-column prop="returnProcess" label="退回工序" width="85" />
        <el-table-column prop="reasonType" label="次破类型" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="reasonDamage" label="次破原因" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityDevice" label="责任设备" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityProcess" label="责任工序" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityTeams" label="责任班组" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="responsibilityPersonnel" label="责任人员" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="completed" label="已完工" width="90" />
        <el-table-column prop="onceBroken" label="已次破" width="90" />
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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





      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>

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

<style scoped>

.processCard{
  width: 140px;
}
.processesSt{
  height: 33px;
  width: 80px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 5px;
}
#titleTable tr,#titleTable td{
  border: 1px solid #000;
}
#titleTable{
  border-collapse: collapse;
  text-align: center;
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#titleTable td{
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(1){
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(2){
  width: 100px;
}
.chaxun{
  background-color:#D5EAFF;
  border: none;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/reportingWorks/QualityInspectionReview.vue

@@ -1,107 +1,199 @@
<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
<script setup>

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/QualityInReviewDetail', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的审核状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 120, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'reportingWorkNo',width: 120,  title: '报工编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'reportingWorkTime',width: 120, title: '报工时间', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName',width: 120, title: '项目名称', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'customerName',width: 120, title: '客户名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'thisProcess',width: 100, title: '本工序', sortable: true,showOverflow:"ellipsis"},
    {field: 'teamName',width: 110, title: '报工班组', sortable: true},
    {field: 'finishedNumber',width: 100, title: '完工数量', sortable: true},
    {field: 'wornNumber', width: 100,title: '次破数量', sortable: true},
    {field: 'responsibilityProcess',width: 100, title: '责任工序', sortable: true},
    {field: 'previousProcess', width: 100,title: '上工序', sortable: true},
    {field: 'nextProcess',width: 100, title: '下工序', sortable: true},
    {field: 'qualityInspector',width: 120, title: '质检员', sortable: true},
    {field: 'qualityState',width: 120, title: '质检状态', sortable: true},
    {field: 'notes',width: 120, title: '备注', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      reportingWorkNo: 'BG2312070001',
      reportingWorkTime: '2023-12-01 08:01:22',
      processCard: 'NG231207A01',
      entryName: '信合春天里',
      customerName: 'XXXX',
      thisProcess: '中空',
      teamName:"中空一班",
      finishedNumber: '11',
      wornNumber: '1',
      responsibilityProcess: '钢化',
      previousProcess:'钢化',
      nextProcess:'包装',
      qualityInspector: 'XXX',
      qualityState: '1',
      notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      reportingWorkNo: 'BG2312070002',
      reportingWorkTime: '2023-12-01 08:01:22',
      processCard: 'NG231207A01',
      entryName: '信合春天里',
      customerName: 'XXXX',
      thisProcess: '中空',
      teamName:"中空一班",
      finishedNumber: '11',
      wornNumber: '1',
      responsibilityProcess: '钢化',
      previousProcess:'钢化',
      nextProcess:'包装',
      qualityInspector: 'XXX',
      qualityState: '1',
      notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      reportingWorkNo: 'BG2312070003',
      reportingWorkTime: '2023-12-01 08:01:22',
      processCard: 'NG231207A01',
      entryName: '信合春天里',
      customerName: 'XXXX',
      thisProcess: '中空',
      teamName:"中空一班",
      finishedNumber: '11',
      wornNumber: '1',
      responsibilityProcess: '钢化',
      previousProcess:'钢化',
      nextProcess:'包装',
      qualityInspector: 'XXX',
      qualityState: '1',
      notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      reportingWorkNo: 'BG2312070004',
      reportingWorkTime: '2023-12-01 08:01:22',
      processCard: 'NG231207A01',
      entryName: '信合春天里',
      customerName: 'XXXX',
      thisProcess: '中空',
      teamName:"中空一班",
      finishedNumber: '11',
      wornNumber: '1',
      responsibilityProcess: '钢化',
      previousProcess:'钢化',
      nextProcess:'包装',
      qualityInspector: 'XXX',
      qualityState: '1',
      notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },

  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','wornNumber']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})
const tableData = [
  {
    reportingWorkNo: 'BG2312070001',
    reportingWorkTime: '2023-12-01 08:01:22',
    processCard: 'NG231207A01',
    entryName: '信合春天里',
    customerName: 'XXXX',
    thisProcess: '中空',
    teamName:"中空一班",
    finishedNumber: '11',
    wornNumber: '1',
    responsibilityProcess: '钢化',
    previousProcess:'钢化',
    nextProcess:'包装',
    qualityInspector: 'XXX',
    qualityState: '1',
    notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    reportingWorkNo: 'BG2312070002',
    reportingWorkTime: '2023-12-01 08:01:22',
    processCard: 'NG231207A01',
    entryName: '信合春天里',
    customerName: 'XXXX',
    thisProcess: '中空',
    teamName:"中空一班",
    finishedNumber: '11',
    wornNumber: '1',
    responsibilityProcess: '钢化',
    previousProcess:'钢化',
    nextProcess:'包装',
    qualityInspector: 'XXX',
    qualityState: '1',
    notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    reportingWorkNo: 'BG2312070003',
    reportingWorkTime: '2023-12-01 08:01:22',
    processCard: 'NG231207A01',
    entryName: '信合春天里',
    customerName: 'XXXX',
    thisProcess: '中空',
    teamName:"中空一班",
    finishedNumber: '11',
    wornNumber: '1',
    responsibilityProcess: '钢化',
    previousProcess:'钢化',
    nextProcess:'包装',
    qualityInspector: 'XXX',
    qualityState: '1',
    notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    reportingWorkNo: 'BG2312070004',
    reportingWorkTime: '2023-12-01 08:01:22',
    processCard: 'NG231207A01',
    entryName: '信合春天里',
    customerName: 'XXXX',
    thisProcess: '中空',
    teamName:"中空一班",
    finishedNumber: '11',
    wornNumber: '1',
    responsibilityProcess: '钢化',
    previousProcess:'钢化',
    nextProcess:'包装',
    qualityInspector: 'XXX',
    qualityState: '1',
    notes: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },

]


</script>

<template>
  <div>
  <div class="main-div-customer">
    <div style="width: 600px">
      <el-row :gutter="0">
<!--        <el-input placeholder="流程卡号" v-model="form.name" style="width: 200px"/>-->
<!--        &nbsp;&nbsp;-->
        <select class="processesSt">
          <option value="未审核">未审核</option>
          <option value="已审核">已审核</option>
        </select>
        &nbsp;&nbsp;
        <!--        <el-input placeholder="流程卡号" v-model="form.name" style="width: 200px"/>-->
        <!--        &nbsp;&nbsp;-->
<!--        <select class="processesSt">-->
<!--          <option value="未审核">未审核</option>-->
<!--          <option value="已审核">已审核</option>-->
<!--        </select>-->

        <el-date-picker
            v-model="value"
            type="daterange"
@@ -114,44 +206,47 @@
        <el-button type="primary">查询</el-button>
      </el-row>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column fixed label="操作" width="60"  >
          <el-button link type="primary" size="small">通过</el-button>
        </el-table-column>
        <el-table-column sortable prop="reportingWorkNo" label="报工编号" width="120" >
          <template v-slot="scope">
            <router-link :to="{path:'QualityInReviewDetail'}" >{{scope.row.reportingWorkNo}}</router-link>
          </template>
        </el-table-column>
        <el-table-column prop="reportingWorkTime" label="报工时间" width="155" />
        <el-table-column prop="processCard" label="流程卡号" width="125" />
        <el-table-column prop="entryName" label="项目名称"  :show-overflow-tooltip='true' width="155" />
        <el-table-column prop="customerName" label="客户名称"  :show-overflow-tooltip='true' width="155" />
        <el-table-column prop="thisProcess" label="本工序" width="70" />
        <el-table-column prop="teamName" label="报工班组" width="95" />
        <el-table-column prop="finishedNumber" label="完工数量" width="85" />
        <el-table-column prop="wornNumber" label="次破数量" width="85" />
        <el-table-column prop="responsibilityProcess" label="责任工序" width="85" />
        <el-table-column prop="previousProcess" label="上工序" width="70" />
        <el-table-column prop="nextProcess" label="下工序" width="70" />
        <el-table-column prop="qualityInspector" label="质检员" width="80" />
        <el-table-column prop="qualityState" label="质检状态" width="90" />
        <el-table-column prop="notes" label="备注" :show-overflow-tooltip='true' width="350" />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">审核</el-button>
      </template>

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


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

<style scoped>
.processesSt{
  height: 33px;
  width: 80px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 5px;
.main-div-customer{
  width: 99%;
  height: 100%;
}

</style>

 north-glass-erp/northglass-erp/src/views/pp/reportingWorks/SelectReportingWorks.vue

@@ -1,169 +1,245 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {useRouter} from "vue-router";
<script setup>

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
const router = useRouter()
function goToPage() {
  router.push('/main/reportingWorks/AddReportingWork')
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/reportingWorks/AddReportingWork', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的反审状态')
      break
    }
  }
}
const tableData = [
  {
    reportingWorkNo: 'BG2312080011',
    reportingWorkTime: '2023-12-08 09:05:58',
    processCard: 'NG23120801A01',
    entryName: '信合春天里',
    batch: '四批二',
    device:'大海利宁',
    thisProcess: '切割',
    finishedNumber: '13',
    finishedArea: '44.22',
    wornNumber: '',
    wornArea: '',
    teamName:'切割一班'

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    reportingWorkNo: 'BG2312080013',
    reportingWorkTime: '2023-12-08 09:05:58',
    processCard: 'NG23120801A01',
    entryName: '信合春天里',
    batch: '一批二',
    device:'大海利宁',
    thisProcess: '切割',
    finishedNumber: '13',
    finishedArea: '44.22',
    wornNumber: '',
    wornArea: '',
    teamName:'切割一班'
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    reportingWorkNo: 'BG2311080025',
    reportingWorkTime: '2023-12-08 09:05:58',
    processCard: 'NG23120801A01',
    entryName: '信合春天里',
    batch: '一批二',
    device:'大海利宁',
    thisProcess: '切割',
    finishedNumber: '13',
    finishedArea: '44.22',
    wornNumber: '',
    wornArea: '',
    teamName:'切割一班'
  customConfig: {
    storage: true
  },
  {
    reportingWorkNo: 'BG2303080025',
    reportingWorkTime: '2023-12-08 09:05:58',
    processCard: 'NG23120801A01',
    entryName: '信合春天里',
    batch: '一批二',
    device:'大海利宁',
    thisProcess: '切割',
    finishedNumber: '13',
    finishedArea: '44.22',
    wornNumber: '',
    wornArea: '',
    teamName:'切割一班'
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 140, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'reportingWorkNo', width: 120, title: '报工编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'reportingWorkTime',width: 120, title: '报工时间', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'processCard', width: 130,title: '流程卡号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName',width: 120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'batch', width: 100,title: '批次', sortable: true,showOverflow:"ellipsis"},
    {field: 'device', width: 100,title: '设备', sortable: true},
    {field: 'thisProcess',width: 100, title: '本工序', sortable: true},
    {field: 'finishedNumber',width: 120, title: '本工序完工', sortable: true,showOverflow:"ellipsis"},
    {field: 'finishedArea', width: 120,title: '完工面积', sortable: true},
    {field: 'wornNumber',width: 120, title: '本工序次破', sortable: true},
    {field: 'wornArea',width: 120, title: '次破面积', sortable: true},
    {field: 'teamName',width: 120, title: '班组名称', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  {
    reportingWorkNo: 'BG2312080001',
    reportingWorkTime: '2023-12-08 09:05:58',
    processCard: 'NG23120801A01',
    entryName: '信合春天里',
    batch: '一批二',
    device:'大海利宁',
    thisProcess: '切割',
    finishedNumber: '13',
    finishedArea: '44.22',
    wornNumber: '',
    wornArea: '',
    teamName:'切割一班'
  },
  {
    reportingWorkNo: 'BG2312080015',
    reportingWorkTime: '2023-12-08 09:05:58',
    processCard: 'NG23120801A01',
    entryName: '信合春天里',
    batch: '一批二',
    device:'大海利宁',
    thisProcess: '切割',
    finishedNumber: '13',
    finishedArea: '44.22',
    wornNumber: '',
    wornArea: '',
    teamName:'切割一班'
  },
]
  data:  [
    {
      reportingWorkNo: 'BG2312080011',
      reportingWorkTime: '2023-12-08 09:05:58',
      processCard: 'NG23120801A01',
      entryName: '信合春天里',
      batch: '四批二',
      device:'大海利宁',
      thisProcess: '切割',
      finishedNumber: '13',
      finishedArea: '44.22',
      wornNumber: '',
      wornArea: '',
      teamName:'切割一班'
    },
    {
      reportingWorkNo: 'BG2312080013',
      reportingWorkTime: '2023-12-08 09:05:58',
      processCard: 'NG23120801A01',
      entryName: '信合春天里',
      batch: '一批二',
      device:'大海利宁',
      thisProcess: '切割',
      finishedNumber: '13',
      finishedArea: '44.22',
      wornNumber: '',
      wornArea: '',
      teamName:'切割一班'
    },
    {
      reportingWorkNo: 'BG2311080025',
      reportingWorkTime: '2023-12-08 09:05:58',
      processCard: 'NG23120801A01',
      entryName: '信合春天里',
      batch: '一批二',
      device:'大海利宁',
      thisProcess: '切割',
      finishedNumber: '13',
      finishedArea: '44.22',
      wornNumber: '',
      wornArea: '',
      teamName:'切割一班'
    },
    {
      reportingWorkNo: 'BG2303080025',
      reportingWorkTime: '2023-12-08 09:05:58',
      processCard: 'NG23120801A01',
      entryName: '信合春天里',
      batch: '一批二',
      device:'大海利宁',
      thisProcess: '切割',
      finishedNumber: '13',
      finishedArea: '44.22',
      wornNumber: '',
      wornArea: '',
      teamName:'切割一班'
    },
    {
      reportingWorkNo: 'BG2312080001',
      reportingWorkTime: '2023-12-08 09:05:58',
      processCard: 'NG23120801A01',
      entryName: '信合春天里',
      batch: '一批二',
      device:'大海利宁',
      thisProcess: '切割',
      finishedNumber: '13',
      finishedArea: '44.22',
      wornNumber: '',
      wornArea: '',
      teamName:'切割一班'
    },
    {
      reportingWorkNo: 'BG2312080015',
      reportingWorkTime: '2023-12-08 09:05:58',
      processCard: 'NG23120801A01',
      entryName: '信合春天里',
      batch: '一批二',
      device:'大海利宁',
      thisProcess: '切割',
      finishedNumber: '13',
      finishedArea: '44.22',
      wornNumber: '',
      wornArea: '',
      teamName:'切割一班'
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['finishedNumber','finishedArea','wornNumber','wornArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
    <div id="selectForm" >
      <el-row :gutter="0">
<!--          <el-input placeholder="流程卡号" v-model="form.name" style="width: 200px"/>-->
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">反审</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


<!--        &nbsp;&nbsp;-->
<!--          <el-input placeholder="项目名称" v-model="form.name" style="width: 200px"/>-->

<!--        &nbsp;&nbsp;-->
        <el-date-picker
            v-model="value"
            type="daterange"
            start-placeholder="报工开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
        />
        &nbsp;&nbsp;
        <el-button type="primary">查询</el-button>
      </el-row>

    </div>
    <el-table :data="tableData" border style="width: 100%" height="100%">
      <el-table-column fixed label="操作" width="140"  >
        <el-button link type="primary" size="small" @click="goToPage">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
        <el-button link type="primary" size="small">反审</el-button>
      </el-table-column>
      <el-table-column sortable prop="reportingWorkNo" label="报工编号" width="120" >
        <template v-slot="scope">
          <router-link :to="{path:'ReportingWorkDetail'}" >{{scope.row.reportingWorkNo}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="reportingWorkTime" label="报工时间" width="155" />
      <el-table-column prop="processCard" label="流程卡号" width="135" />
      <el-table-column prop="entryName" label="项目名称" width="155" />
      <el-table-column prop="batch" label="批次" width="75" />
      <el-table-column prop="device" label="设备" width="100" />
      <el-table-column prop="thisProcess" label="本工序" width="100" />
      <el-table-column prop="finishedNumber" label="本工序完工" width="100" />
      <el-table-column prop="finishedArea" label="完工面积" width="90" />
      <el-table-column prop="wornNumber" label="本工序次破" width="100" />
      <el-table-column prop="wornArea" label="次破面积" width="90" />
      <el-table-column prop="teamName" label="班组名称"  width="150" />
    </el-table><!-- <h1>{{msg}}</h1> -->
    </vxe-grid>
  </div>
</template>

<style scoped>
#selectForm {
  width: 45%;
.main-div-customer{
  width: 99%;
  height: 100%;
  text-align: center;
}

</style>

 north-glass-erp/northglass-erp/src/views/pp/rework/AddRework.vue

@@ -1,123 +1,213 @@
<script setup>
import {reactive, ref} from 'vue'

// do not use same name with ref
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      alert('我接收到子组件传送的编辑信息')
      //router.push({path: '/main/processCard/AddProcessCard', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
}

const tableData = [
  {
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

    reworkNumber:'FG20202020',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    batch:'二批三',
    serialNumber:'1',
    area:'23.11',
    qualityInspector:"张三",
    number:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    width: '575',
    height:"2241",
    shape: '普形',
    type: '机器',
    damage:'气泡超标',
    device:'XXX',
    reworkProcess:'切割',
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {

    reworkNumber:'FG20203333',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    batch:'二批三',
    serialNumber:'1',
    area:'23.11',
    qualityInspector:"张三",
    number:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    width: '575',
    height:"2241",
    shape: '普形',
    type: '机器',
    damage:'气泡超标',
    reworkProcess:'磨边',
    device:'XXX'
  filterConfig: {   //筛选配置项
    remote: true
  },
]
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 70, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'reworkTeams',width: 90, title: '返工班组', editRender: { name: 'input', attrs: { placeholder: '' } }},
    {field: 'reworkNumber',width: 120, title: '返工编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'salesOrderNo',width: 120, title: '销售单号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'processCardNo',width: 120, title: '流程卡号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName', width: 120,title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'batch',width: 80, title: '批次', sortable: true,showOverflow:"ellipsis"},
    {field: 'serialNumber',width: 80, title: '序号', sortable: true},
    {field: 'singlePieceName',width: 120, title: '单片名称', sortable: true},
    {field: 'marking',width: 80, title: '标记', sortable: true,showOverflow:"ellipsis"},
    {field: 'pieces',width: 90, title: '片标记', sortable: true},
    {field: 'number',width: 80, title: '数量', sortable: true},
    {field: 'width',width: 80, title: '宽', sortable: true},
    {field: 'height',width: 80, title: '高', sortable: true},
    {field: 'shape',width: 80, title: '形状', sortable: true},
    {field: 'type',width: 100, title: '返工工序', sortable: true},
    {field: 'type',width: 100, title: '返工类型', sortable: true},
    {field: 'damage',width: 120, title: '返工原因', sortable: true},
    {field: 'device',width: 120, title: '责任设备', sortable: true},
    {field: 'teams',width: 120, title: '责任班组', sortable: true},
    {field: 'area',width: 120, title: '返工面积', sortable: true},
    {field: 'qualityInspector',width: 100, title: '质检员', sortable: true}
  ],//表头按钮

  toolbarConfig: {
     // buttons: [{
     //   name:'保存'
     // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {

      reworkNumber:'FG20202020',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      batch:'二批三',
      serialNumber:'1',
      area:'23.11',
      qualityInspector:"张三",
      number:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      width: '575',
      height:"2241",
      shape: '普形',
      type: '机器',
      damage:'气泡超标',
      device:'XXX',
      reworkProcess:'切割',
    },
    {

      reworkNumber:'FG20203333',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      batch:'二批三',
      serialNumber:'1',
      area:'23.11',
      qualityInspector:"张三",
      number:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      width: '575',
      height:"2241",
      shape: '普形',
      type: '机器',
      damage:'气泡超标',
      reworkProcess:'磨边',
      device:'XXX'
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['total','TotalArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">保存</el-button>

      </template>

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


    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column fixed label="操作" width="70"  >
          <el-button link type="primary" size="small">保存</el-button>
        </el-table-column>
        <el-table-column prop="reworkTeams" label="返工班组" :show-overflow-tooltip='true' width="85" >
          <el-input></el-input>
        </el-table-column>
        <el-table-column prop="reworkNumber" label="返工编号" width="105" />
        <el-table-column sortable prop="salesOrderNo" label="销售单号" width="120" />
        <el-table-column sortable prop="processCardNo" label="流程卡号" width="130" />
        <el-table-column prop="entryName" label="项目名称" width="120" :show-overflow-tooltip='true'/>
        <el-table-column  prop="batch" label="批次" width="70" />
        <el-table-column  prop="serialNumber" label="序号" width="60" />
        <el-table-column prop="singlePieceName" :show-overflow-tooltip='true' label="单片名称" width="120" />
        <el-table-column prop="marking" label="标记" width="60" />
        <el-table-column prop="pieces" label="片标记" width="70" />
        <el-table-column prop="number" label="数量" width="95" />
        <el-table-column prop="width" label="宽" width="60" />
        <el-table-column prop="height" label="高" width="60" />
        <el-table-column prop="shape" label="形状" :show-overflow-tooltip='true' width="60" />
        <el-table-column prop="reworkProcess" label="返工工序" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="type" label="返工类型" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="damage" label="返工原因" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="device" label="责任设备" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="teams" label="责任班组" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="area" label="返工面积" width="85" />
        <el-table-column prop="qualityInspector" label="质检员" width="80" />





      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    </vxe-grid>
  </div>
</template>

<style scoped>


#titleTable tr,#titleTable td{
  border: 1px solid #000;
}
#titleTable{
  border-collapse: collapse;
  text-align: center;
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#titleTable td{
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(1){
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(2){
  width: 100px;
}
.chaxun{
  background-color:#D5EAFF;
  border: none;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/rework/SelectRework.vue

@@ -1,61 +1,9 @@
<script setup>
import {reactive, ref} from 'vue'

// do not use same name with ref
import {reactive, ref} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()

const value = ref('')
const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
const tableData = [
  {

    reworkNumber:'FG20202020',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    batch:'二批三',
    serialNumber:'1',
    area:'23.11',
    qualityInspector:"张三",
    number:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    width: '575',
    height:"2241",
    shape: '普形',
    reworkTeams:'XX二班',
    type: '机器',
    damage:'气泡超标',
    reworkProcess:'XXXX',
    device:'XXX'
  },
  {

    reworkNumber:'FG20203333',
    salesOrderNo:'NG23010101',
    processCardNo:'NG23010101A01',
    entryName:'xxxx',
    batch:'二批三',
    serialNumber:'1',
    area:'23.11',
    qualityInspector:"张三",
    number:'1',
    singlePieceName: '6mm白玻平钢(外)',
    marking: '1',
    pieces: '(外)',
    width: '575',
    height:"2241",
    shape: '普形',
    reworkTeams:'XX二班',
    type: '机器',
    damage:'气泡超标',
    reworkProcess:'XXXX',
    device:'XXX'
  },
]
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

@@ -69,61 +17,217 @@
  resource: '',
  desc: '',
})
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      console.log(type)

     // router.push({path: '/main/Rework/SelectRework', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
    case  'setType':{
      alert('我接收到子组件传送的排版状态')
      break
    }
  }
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'reworkNumber',width: 120, title: '返工编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'salesOrderNo',width: 120, title: '销售单号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'processCardNo',width: 120, title: '流程卡号', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'entryName', width: 120,title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'batch',width: 80, title: '批次', sortable: true,showOverflow:"ellipsis"},
    {field: 'serialNumber',width: 80, title: '序号', sortable: true},
    {field: 'singlePieceName',width: 120, title: '单片名称', sortable: true},
    {field: 'marking',width: 80, title: '标记', sortable: true,showOverflow:"ellipsis"},
    {field: 'pieces',width: 90, title: '片标记', sortable: true},
    {field: 'number',width: 80, title: '数量', sortable: true},
    {field: 'width',width: 80, title: '宽', sortable: true},
    {field: 'height',width: 80, title: '高', sortable: true},
    {field: 'shape',width: 80, title: '形状', sortable: true},
    {field: 'type',width: 100, title: '返工类型', sortable: true},
    {field: 'damage',width: 120, title: '返工原因', sortable: true},
    {field: 'device',width: 120, title: '责任设备', sortable: true},
    {field: 'teams',width: 120, title: '责任班组', sortable: true},
    {field: 'area',width: 120, title: '返工面积', sortable: true},
    {field: 'reworkProcess',width: 120, title: '返工工序', sortable: true},
    {field: 'reworkTeams',width: 120, title: '返工班组', sortable: true},
    {field: 'qualityInspector',width: 100, title: '质检员', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {

      reworkNumber:'FG20202020',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      batch:'二批三',
      serialNumber:'1',
      area:'23.11',
      qualityInspector:"张三",
      number:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      width: '575',
      height:"2241",
      shape: '普形',
      reworkTeams:'XX二班',
      type: '机器',
      damage:'气泡超标',
      reworkProcess:'XXXX',
      device:'XXX'
    },
    {

      reworkNumber:'FG20203333',
      salesOrderNo:'NG23010101',
      processCardNo:'NG23010101A01',
      entryName:'xxxx',
      batch:'二批三',
      serialNumber:'1',
      area:'23.11',
      qualityInspector:"张三",
      number:'1',
      singlePieceName: '6mm白玻平钢(外)',
      marking: '1',
      pieces: '(外)',
      width: '575',
      height:"2241",
      shape: '普形',
      reworkTeams:'XX二班',
      type: '机器',
      damage:'气泡超标',
      reworkProcess:'XXXX',
      device:'XXX'
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['number','area']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div>
  <div class="main-div-customer">
    <div id="head" >
<!--      <el-input placeholder="流程卡号" v-model="form.xsdh" style="width: 200px"/>-->
<!--      &nbsp;-->

<!--      <el-input placeholder="项目名称" v-model="form.lckh" style="width: 200px"/>-->
<!--      &nbsp;-->
      <el-date-picker
          v-model="value"
          type="daterange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="defaultTime"
      />
      <el-button type="primary">查询</el-button>
    </div>
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column fixed label="操作" width="100"  >
          <el-button link type="primary" size="small" @click="dialogFormVisible = true">编辑</el-button>
          <el-button link type="primary" size="small">审核</el-button>
        </el-table-column>
        <el-table-column prop="reworkNumber" label="返工编号" width="155" />
        <el-table-column sortable prop="salesOrderNo" label="销售单号" width="120" />
        <el-table-column sortable prop="processCardNo" label="流程卡号" width="130" />
        <el-table-column prop="entryName" label="项目名称" width="120" :show-overflow-tooltip='true'/>
        <el-table-column  prop="batch" label="批次" width="70" />
        <el-table-column  prop="serialNumber" label="序号" width="60" />
        <el-table-column prop="singlePieceName" :show-overflow-tooltip='true' label="单片名称" width="120" />
        <el-table-column prop="marking" label="标记" width="60" />
        <el-table-column prop="pieces" label="片标记" width="70" />
        <el-table-column prop="number" label="数量" width="95" />
        <el-table-column prop="width" label="宽" width="60" />
        <el-table-column prop="height" label="高" width="60" />
        <el-table-column prop="shape" label="形状" :show-overflow-tooltip='true' width="60" />
        <el-table-column prop="type" label="返工类型" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="damage" label="返工原因" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="device" label="责任设备" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="teams" label="责任班组" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="area" label="返工面积" width="85" />
        <el-table-column prop="reworkProcess" label="返工工序" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="reworkTeams" label="返工班组" :show-overflow-tooltip='true' width="85" />
        <el-table-column prop="qualityInspector" label="质检员" width="80" />
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="dialogFormVisible = true" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'setType')" link type="primary" size="small">审核</el-button>
      </template>

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





      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>

    </vxe-grid>
    <el-dialog v-model="dialogFormVisible" title="返工编辑">
      <el-form :model="form">
        <el-form-item label="返工编号" :label-width="formLabelWidth">
@@ -149,43 +253,8 @@
</template>

<style scoped>
#head{
  width: 70%;
}

.processCard{
  width: 140px;
}
.processesSt{
  height: 33px;
  width: 80px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 5px;
}
#titleTable tr,#titleTable td{
  border: 1px solid #000;
}
#titleTable{
  border-collapse: collapse;
  text-align: center;
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#titleTable td{
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(1){
  width: 100px;
  height: 30px;
}
#titleTable td:nth-child(2){
  width: 100px;
}
.chaxun{
  background-color:#D5EAFF;
  border: none;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/workOrder/AddWorkOrder.vue

@@ -1,94 +1,166 @@
<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import {ArrowLeftBold} from "@element-plus/icons-vue";
import request from "@/utils/request";
import deepClone from "@/utils/deepClone";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import  GlassType from '@/components/basic/product/GlassType.vue'
<script setup>

interface User {
  //销售单号
  selection:string
  //产品编号
  productID: string
  //产品名称
  productName: string
  //总数量
  total: string
  //总面积
  totalArea:string
  //周长
  perimeter:string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const router = useRouter()
let flag = $ref(true)
function intoCreateProduct(){
  if(flag){
    router.push('/main/workOrder/SelectAddWorkOrder')
  }else {
    router.push('/main/workOrder/SelectAddWorkOrder')
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/workOrder/addWorkOrder', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
  flag=!flag
}

//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

const tableData: User[] = [
  {
    selection: 'NG231201',
    productID: '9001010208000021',
    productName: '6mm超白UD60平钢(外)+12A(结)+6mm超白平钢(内)',
    total:"123",
    totalArea:"1233.12",
    perimeter:"133"
//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    selection: 'NG231201',
    productID: '9001010203000008',
    productName: '6mm超白LYDE-80平钢(外)+12Ar(结)+6mm超白平钢(内)',
    total:"123",
    totalArea:"1233.12",
    perimeter:"133"
  filterConfig: {   //筛选配置项
    remote: true
  },
]
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'checkbox',fixed:"left", title: '选择', width: 80 },
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {field: 'salesOrderNo', title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'productID', title: '产品编号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName', title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'total', title: '总数量', sortable: true},
    {field: 'totalArea', title: '总面积', sortable: true},
    {field: 'perimeter', title: '周长', sortable: true,showOverflow:"ellipsis"},
  ],//表头按钮

  toolbarConfig: {
    buttons: [
      {code: 'print_lck', name: '保存',status:'primary' ,icon:'vxe-icon-save'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      salesOrderNo: 'NG231201',
      productID: '9001010208000021',
      productName: '6mm超白UD60平钢(外)+12A(结)+6mm超白平钢(内)',
      total:"123",
      totalArea:"1233.12",
      perimeter:"133"
    },
    {
      salesOrderNo: 'NG231201',
      productID: '9001010203000008',
      productName: '6mm超白LYDE-80平钢(外)+12Ar(结)+6mm超白平钢(内)',
      total:"123",
      totalArea:"1233.12",
      perimeter:"133"
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['total','totalArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
<div >
  <div id="headerButton">
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    <el-button type="primary">保存</el-button>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">转工单</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


    </vxe-grid>
  </div>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="销售单号" width="120">
      <template #default="scope">{{ scope.row.selection }}</template>
    </el-table-column>
    <el-table-column property="productID" label="产品编号"  :show-overflow-tooltip='true'/>
    <el-table-column property="productName" label="产品名称" width="280" show-overflow-tooltip :show-overflow-tooltip='true'/>
    <el-table-column property="total" label="总数量"  />
    <el-table-column property="totalArea" label="总面积" />
    <el-table-column property="perimeter" label="周长"  />
  </el-table>
</div>
</template>

<style scoped>
#headerButton{
  width: 200px;
 float: right;
.main-div-customer{
  width: 99%;
  height: 100%;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/workOrder/SelectAddWorkOrder.vue

@@ -1,4 +1,4 @@
<script lang="ts" setup>
  <script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref

 north-glass-erp/northglass-erp/src/views/pp/workOrder/SelectWorkOrder.vue

@@ -1,177 +1,245 @@
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import SelectWorkOrder from "@/views/pp/workOrder/SelectWorkOrder.vue";
import SelectAddWorkOrder from "@/views/pp/workOrder/SelectAddWorkOrder.vue";
import {ArrowLeftBold} from "@element-plus/icons-vue";
import request from "@/utils/request";
import deepClone from "@/utils/deepClone";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
<script setup>



const defaultTime = ref<[Date, Date]>([
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
])
// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const router = useRouter()
function goToPage() {
  router.push('/main/workOrder/addWorkOrder')
import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/workOrder/addWorkOrder', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}

const tableData = [
  {
    salesOrderNo: 'NG231201',
    productionOrderNo: 'NG231201A',
    entryName: '信合春天里',
    batch: '23批',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    monolithicTotalArea: '509.78',
    total: '169',
    productTotalArea: '175.31',
    perimeter: '99.84',
    radius: '0',
    createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
//表尾求和
const sumNum = (list, field) => {
  let count = 0
  list.forEach(item => {
    count += Number(item[field])
  })
  return count.toFixed(2)
}

//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  {
    salesOrderNo: 'NG231201',
    productionOrderNo: 'NG231201B',
    entryName: '信合春天里',
    batch: '23批',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    monolithicTotalArea: '509.78',
    total: '169',
    productTotalArea: '175.31',
    perimeter: '99.84',
    radius: '0',
    createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  filterConfig: {   //筛选配置项
    remote: true
  },
  {
    salesOrderNo: 'NG231202',
    productionOrderNo: 'NG231202A',
    entryName: '信合春天里',
    batch: '23批',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    monolithicTotalArea: '509.78',
    total: '169',
    productTotalArea: '175.31',
    perimeter: '99.84',
    radius: '0',
    createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  customConfig: {
    storage: true
  },
  {
    salesOrderNo: 'NG231203',
    productionOrderNo: 'NG231203A',
    entryName: '信合春天里',
    batch: '23批',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    monolithicTotalArea: '509.78',
    total: '169',
    productTotalArea: '175.31',
    perimeter: '99.84',
    radius: '0',
    createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'seq',fixed:"left", title: '自序', width: 50 },
    {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'salesOrderNo', title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true, },
    {field: 'productionOrderNo', title: '流程卡号', sortable: true,showOverflow:"ellipsis" ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'batch', title: '批次', sortable: true,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
    {field: 'productName', title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'monolithicTotalArea', title: '单片总面积', sortable: true,showOverflow:"ellipsis"},
    {field: 'total', title: '总数量', sortable: true},
    {field: 'productTotalArea', title: '成品总面积', sortable: true},
    {field: 'perimeter', title: '周长', sortable: true,showOverflow:"ellipsis"},
    {field: 'radius', title: '半径', sortable: true},
    {field: 'createTime', title: '加工要求', sortable: true}
  ],//表头按钮

  toolbarConfig: {
    // buttons: [{
    //
    // }],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  {
    salesOrderNo: 'NG231204',
    productionOrderNo: 'NG231204A',
    entryName: '信合春天里',
    batch: '23批',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    monolithicTotalArea: '509.78',
    total: '169',
    productTotalArea: '175.31',
    perimeter: '99.84',
    radius: '0',
    createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    salesOrderNo: 'NG231205',
    productionOrderNo: 'NG231205A',
    entryName: '信合春天里',
    batch: '23批',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    monolithicTotalArea: '509.78',
    total: '169',
    productTotalArea: '175.31',
    perimeter: '99.84',
    radius: '0',
    createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
  {
    salesOrderNo: 'NG231206',
    productionOrderNo: 'NG231206A',
    entryName: '信合春天里',
    batch: '23批',
    productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
    monolithicTotalArea: '509.78',
    total: '169',
    productTotalArea: '175.31',
    perimeter: '99.84',
    radius: '0',
    createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
  },
]
  data:  [
    {
      salesOrderNo: 'NG231201',
      productionOrderNo: 'NG231201A',
      entryName: '信合春天里',
      batch: '23批',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      monolithicTotalArea: '509.78',
      total: '169',
      productTotalArea: '175.31',
      perimeter: '99.84',
      radius: '0',
      createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231201',
      productionOrderNo: 'NG231201B',
      entryName: '信合春天里',
      batch: '23批',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      monolithicTotalArea: '509.78',
      total: '169',
      productTotalArea: '175.31',
      perimeter: '99.84',
      radius: '0',
      createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231202',
      productionOrderNo: 'NG231202A',
      entryName: '信合春天里',
      batch: '23批',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      monolithicTotalArea: '509.78',
      total: '169',
      productTotalArea: '175.31',
      perimeter: '99.84',
      radius: '0',
      createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231203',
      productionOrderNo: 'NG231203A',
      entryName: '信合春天里',
      batch: '23批',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      monolithicTotalArea: '509.78',
      total: '169',
      productTotalArea: '175.31',
      perimeter: '99.84',
      radius: '0',
      createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231204',
      productionOrderNo: 'NG231204A',
      entryName: '信合春天里',
      batch: '23批',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      monolithicTotalArea: '509.78',
      total: '169',
      productTotalArea: '175.31',
      perimeter: '99.84',
      radius: '0',
      createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231205',
      productionOrderNo: 'NG231205A',
      entryName: '信合春天里',
      batch: '23批',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      monolithicTotalArea: '509.78',
      total: '169',
      productTotalArea: '175.31',
      perimeter: '99.84',
      radius: '0',
      createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
    {
      salesOrderNo: 'NG231206',
      productionOrderNo: 'NG231206A',
      entryName: '信合春天里',
      batch: '23批',
      productName: '5mm白玻平钢(外)+0.76PVB透明+5mm白玻平钢(内)',
      monolithicTotalArea: '509.78',
      total: '169',
      productTotalArea: '175.31',
      perimeter: '99.84',
      radius: '0',
      createTime: '1)按企标2)每片玻璃标签贴室外面。内片玻璃打“3C商标”，统一打在玻璃“宽度”方向右下角4)按批次单独落架。',
    },
  ],//table body实际数据
  //脚部求和
  footerMethod ({ columns, data }) {//页脚函数
    let footList=['total','monolithicTotalArea','productTotalArea']
    return[
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return '合计:'
        }
        if (footList.includes(column.field)) {
          return sumNum(data, column.field)
        }
        return ''
      })
    ]
  }

})



</script>

<template>
  <div class="div-main">
    <div id="selectForm">
      <el-row :gutter="0">
        <el-input placeholder="销售单号" v-model="form.name" style="width: 200px"/>
        &nbsp;&nbsp;
        <el-date-picker
            v-model="form.date1"
            type="daterange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :default-time="defaultTime"
        />
        &nbsp;&nbsp;
        <el-button type="primary">查询</el-button>
      </el-row>
  <div class="main-div-customer">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%" height="100%">
        <el-table-column fixed label="操作" width="120"  >
          <el-button link  type="primary" size="small" @click="goToPage">转工单</el-button>
          <el-button link type="primary" size="small">删除</el-button>
        </el-table-column>
        <el-table-column sortable prop="salesOrderNo" label="销售单号" width="110"  />
        <el-table-column prop="entryName" label="项目名称" width="155" />
        <el-table-column prop="batch" label="批次" width="80" />
        <el-table-column prop="productName" label="产品名称" :show-overflow-tooltip='true' width="180" />
        <el-table-column prop="monolithicTotalArea" label="单片总面积" width="100" />
        <el-table-column prop="total" label="总数量" width="75" />
        <el-table-column prop="productTotalArea" label="成品总面积" width="100" />
        <el-table-column prop="perimeter" label="周长" width="100" />
        <el-table-column prop="radius" label="半径" width="70" />
        <el-table-column prop="createTime" label="加工要求" :show-overflow-tooltip='true' width="350" />
      </el-table><!-- <h1>{{msg}}</h1> -->
    </div>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">转工单</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


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

<style scoped>
.div-main{
  width: 100%;
.main-div-customer{
  width: 99%;
  height: 100%;
}
#selectForm {
  width: 50%;
  text-align: center;
}
</style>

 north-glass-erp/northglass-erp/src/views/pp/workOrder/WorkOrder.vue

@@ -53,7 +53,7 @@
}
#div-title{
  height: 5%;
  width: 100%;
  width: 98%;
}
#searchButton{
  margin-top: -5px;
@@ -66,6 +66,5 @@
#main-body{
  width: 99%;
  height: 92%;
  margin-top: 1%;
}
</style>

 north-glass-erp/northglass-erp/src/views/sd/customer/SelectCustomer.vue

@@ -1,67 +1,153 @@
<script setup>

let orderList = $ref([
  {
    '0':'1',
    '1':'太仓卓高玻璃制品有限公司',
    '2':'A',
    '3':'100000',
    '4':'江苏太仓xxxx街道',
    '5':'张三',
    '6':'139xxxxxxxx',

  },
  {
    '0':'1',
    '1':'山西某某公司',
    '2':'A',
    '3':'100000',
    '4':'江苏太仓xxxx街道',
    '5':'张三',
    '6':'139xxxxxxxx',

import {reactive} from "vue";
import {useRouter} from  'vue-router'
let router=useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/customer/CreateCustomer', query: { id: row.id }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
])
}

let titleList = $ref([
  '客户编码',
  '名称',
  '客户等级',
  '信用额度',
  '地址',
  '联系人',
  '联系电话'
])


//子组件接收参数

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'CustomerList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
          {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
          {type: 'seq',fixed:"left", title: '自序', width: 80 },
          {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
          {field: '0', title: '客户编码',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
          {field: '1', title: '名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
          {field: '2', title: '客户等级',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
          {field: '3', title: '信用额度',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
          {field: '4', title: '地址',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
          {field: '5', title: '联系人',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
          {field: '6', title: '联系电话',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
      ],//表头按钮
  toolbarConfig: {
    buttons: [],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      '0':'1',
      '1':'太仓卓高玻璃制品有限公司',
      '2':'A',
      '3':'100000',
      '4':'江苏太仓xxxx街道',
      '5':'张三',
      '6':'139xxxxxxxx',

    },
    {
      '0':'1',
      '1':'山西某某公司',
      '2':'A',
      '3':'100000',
      '4':'江苏太仓xxxx街道',
      '5':'张三',
      '6':'139xxxxxxxx',

    }
  ],//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 ''
      })
    ]
  }

})



</script>

<template>
  <div class="main-div-customer">
    <el-table
        :data="orderList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        lazy
        border
    >
      <el-table-column type="expand" fixed>
        <template #default="props" >
          <div m="4">
    <vxe-grid
        max-height="100%"
        @filter-change="filterChanged"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

            <p m="t-0 b-2">客户相关信息</p>
    >
      <!--      @toolbar-button-click="toolbarButtonClickEvent"-->
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed width="110"  >
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
      </el-table-column>
      <el-table-column
          :prop="index.toString()"
          :show-overflow-tooltip='true'
           v-for="(item,index) in titleList"
          :label="item" >
      </el-table-column>
    </el-table>
        </div>
      </template>


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


 north-glass-erp/northglass-erp/src/views/sd/delivery/CreateDelivery.vue

@@ -1,65 +1,150 @@
<script setup>

let deliveryTitle = $ref([
  '销售单号',
  '批次',
  '库存可发',
  '未发数量',
  '总数量',
  '本次发货数量',
  '楼号',
  '产品编号',
  '产品名称',
  '单价',
  '库区',
  '异形参数',
  '金额',
  '宽',
  '高',
  '形状',
  '实际单片/总面积',
  '结算单片面积',
  '结算总面积',
  '加工要求',
  '备注',
  '磨边类型',
  '周长',
import {reactive} from "vue";


])

let deliveryList =[
  {
    '0': 'NG23110101',
    '1': '20批1',
    '2': '16',
    '3': '18',
    '4': '20',
    '5': '20',
    '6': 'A楼b层',
    '7': '101',
    '8': '10mmLYTM-140弯钢化',
    '9': '1008.38',
    '10': 'A号柱子',
    '11': '',
    '12': '100',
    '13': '3360',
    '14': '2440',
    '15': '普形',
    '16': '1.11/100.1',
    '17': '1.22',
    '18': '11.11',
    '19': '这是加工要求',
    '20': '这是备注',
    '21': '这是磨边类型',
    '22': '1.1'
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[

    {type:'expand',slots: { content:'content' },width: 50,fixed:"left"},
    {type:'checkbox',title: '选则', width: 80,fixed:"left"},
    {type: 'seq', title: '自序', width: 80 ,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},
    {field: '17',width:120,  title: '结算单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '18',width:120,  title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '19',width:120,  title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '20',width:120,  title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '21',width:120,  title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '22',width:120,  title: '周长',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},


  ],//表头按钮
  toolbarConfig: {
    buttons: [
      {'code': 'add', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'}
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      '0': 'NG23110102',
      '1': '20批1',
      '2': '16',
      '3': '18',
      '4': '20',
      '5': '20',
      '6': 'A楼b层',
      '7': '101',
      '8': '10mmLYTM-140弯钢化',
      '9': '1008.38',
      '10': 'A号柱子',
      '11': '100',
      '12': '3360',
      '13': '2440',
      '14': '普形',
      '15': '1.11',
      '16': '100.1',
      '17': '1.22',
      '18': '11.11',
      '19': '这是加工要求',
      '20': '这是备注',
      '21': '这是磨边类型',
      '22': '1.1'
    },
    {
      '0': 'NG23110102',
      '1': '20批1',
      '2': '16',
      '3': '18',
      '4': '20',
      '5': '20',
      '6': 'A楼b层',
      '7': '101',
      '8': '10mmLYTM-140弯钢化',
      '9': '1008.38',
      '10': 'A号柱子',
      '11': '100',
      '12': '3360',
      '13': '2440',
      '14': '普形',
      '15': '1.11',
      '16': '100.1',
      '17': '1.22',
      '18': '11.11',
      '19': '这是加工要求',
      '20': '这是备注',
      '21': '这是磨边类型',
      '22': '1.1'
    }
  ],//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 ''
      })
    ]
  }
]

})
</script>

<template>
  <div class="main-div">
    <div class="order-primary">
    <div class="order-primary" style="background-color: white">
      <el-row>
        <el-col  :span="2"><el-text>客户编码:</el-text></el-col>
        <el-col  :span="5"><el-text style="font-size: large;color: #181818">131</el-text></el-col>
@@ -112,33 +197,33 @@
        <el-col  :span="5"><el-text style="font-size: large;color: #181818"></el-text></el-col>
        <el-col  :span="2"><el-text>发货员:</el-text></el-col>
        <el-col  :span="5"><el-text style="font-size: large;color: #181818"></el-text></el-col>
        <el-col style="background-color: #337ecc" :span="2"><el-button style="width: 100%" type="primary">保存</el-button></el-col>
      </el-row>
    </div>
    <div class="order-detail">
      <el-table
          :data="deliveryList"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          border
      >
        <el-table-column type="expand" fixed>
          <template #default="props" >
            <div m="4">
              <p m="t-0 b-2">订单发货有关所有信息</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column  label="选则" fixed>
          <el-checkbox/>
        </el-table-column>
        <el-table-column
            :prop="index.toString()"
            :show-overflow-tooltip='true'
            width="100" v-for="(item,index) in deliveryTitle"
            :label="item" />
      <vxe-grid
          max-height="97%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"

      </el-table>
      >
        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
        <template #content="{ row}">
          <ul class="expand-wrapper">
            <li  v-for="(item,key,index) in row">
              <span style="font-weight: bold">{{key+':  '}}</span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>

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


 north-glass-erp/northglass-erp/src/views/sd/delivery/Delivery.vue

@@ -11,6 +11,7 @@
        <el-breadcrumb-item :to="{ path: '/main/delivery/selectDelivery' }">发货首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/main/delivery/selectOrderList' }">订单发货</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/main/delivery/deliveryReport' }">报表</el-breadcrumb-item>
        <el-breadcrumb-item v-show="false" :to="{ path: '/main/delivery/deliveryReport' }">报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

@@ -38,7 +39,7 @@
}
/*main-body样式*/
#main-body{
  width: 100%;
  width: 99%;
  height: 95%;
  margin-top: 1%;
}

 north-glass-erp/northglass-erp/src/views/sd/delivery/DeliveryReport.vue

@@ -1,38 +1,96 @@
<script setup>

import {Folder, Search} from "@element-plus/icons-vue";

let titleList = [
  '序号',
  '发货单号',
  '销售单号',
  '客户单号',
  '项目名称',
  '客户名称',
  '业务员',
  '送货地址',
  '发货员',
  '楼号',
  '产品编号',
  '产品名称',
  '本次发货数量',
  '周长',
  '实际面积',
  '发货面积',
  '单价',
  '发货金额',
  '宽',
  '高',
  '形状',
  '磨边类型',
  '备注',
  '加工要求',
  '建立时间'
import {reactive} from "vue";



const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[

]
    {type:'expand',slots: { content:'content' },width: 50,fixed:"left"},
    {type: 'seq', title: '自序', width: 80 ,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},
    {field: '17',width:120,  title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '18',width:120,  title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '19',width:120,  title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '20',width:120,  title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '21',width:120,  title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '22',width:120,  title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '22',width:120,  title: '建立时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}


  ],//表头按钮
  toolbarConfig: {
    buttons: [
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
  ],//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 ''
      })
    ]
  }

})

</script>

<template>
@@ -44,30 +102,31 @@
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Folder">导出</el-button>
    <div class="order-detail">
      <el-table
          :data="dataList"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          border
      <vxe-grid
          max-height="97%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"

      >

        <el-table-column type="expand" fixed>
          <template #default="props" >
            <div m="4">
              <p m="t-0 b-2">: {{ props.row['2'] }}</p>
        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </template>
        </el-table-column>
          </div>
        </template>
        <template #content="{ row}">
          <ul class="expand-wrapper">
            <li  v-for="(item,key,index) in row">
              <span style="font-weight: bold">{{key+':  '}}</span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>


        <el-table-column
            :prop="index.toString()"
            :show-overflow-tooltip='true'
            width="120" v-for="(item,index) in titleList"
            :label="item"    />
      </el-table>
      </vxe-grid>
    </div>
  </div>
</template>
@@ -79,12 +138,6 @@
}
.el-col{
  border: #181818 1px solid;
}
:deep(.el-table .el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}
.order-primary{
  width: 100%;

 north-glass-erp/northglass-erp/src/views/sd/delivery/SelectDelivery.vue

@@ -1,35 +1,81 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/delivery/createDelivery', query: { deliveryID: 'JG24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}

let deliveryTitle = $ref([
  '序号',
  '审核',
  '出库',
  '发货单号',
  '发货员',
  '发货日期',
  '客户编号',
  '客户名称',
  '批次',
  '项目名称',
  '订单编号',
  '付款条件',
  '付款方式',
  '总数量',
  '总面积',
  '总金额',
  '报表日期',
  '业务员',
  '送货日期',
  '收款时间'
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',slots: { content:'content' },width: 50},
    {title: '操作', width: 110, slots: { default: 'button_slot' }},
    {type: 'seq', title: '自序', width: 80 },

])
    {title: '审核', width: 40, slots: { default: 'state' }},
    {title: '出库', width: 40, slots: { default: 'state' }},
    {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}

let deliveryList =[
  {
    '0': '1',
    '1': '',
    '2': '',

  ],//表头按钮
  toolbarConfig: {
    buttons: [],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [{
    '3': 'JG23120801',
    '4': '郑珊珊',
    '5': '2023-12-08',
@@ -48,11 +94,26 @@
    '18': '宿迁某某地址',
    '19': '2023-12-08'
  }
]
  ],//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 ''
      })
    ]
  }

})
</script>

<template>
  <div>
  <div style="width: 100%;height: 100%">
    <el-date-picker
        v-model="value1"
        type="daterange"
@@ -60,46 +121,44 @@
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-table
        :data="deliveryList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        lazy
        border
        style="width: 99%;"
        max-height="80vh">
      <el-table-column type="expand" fixed>
        <template #default="props" >
          <div m="4">
            <p m="t-0 b-2">: {{ props.row['2'] }}</p>
    <vxe-grid
        max-height="97%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <template #state="{ row}">
        <el-checkbox checked/>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed width="110"  >
        <el-button link type="primary" size="small">编辑</el-button>
<!--        <el-button @click="openCraft" link type="primary" size="small">审核</el-button>-->
<!--        <el-button link type="primary" size="small">修改</el-button>-->
        <el-button link type="primary" size="small">删除</el-button>
      </el-table-column>
      <el-table-column
         :prop="index.toString()"
         :show-overflow-tooltip='true'
         width="100" v-for="(item,index) in deliveryTitle"
         :label="item" >
        <el-checkbox v-if="index>0 && index<3" checked/>
      </el-table-column>


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

</template>

<style scoped>
:deep(.el-table .el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}
</style>

 north-glass-erp/northglass-erp/src/views/sd/delivery/SelectOrderList.vue

@@ -1,61 +1,165 @@
<script setup>
import {CirclePlus, Search} from "@element-plus/icons-vue";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
import {reactive, ref} from "vue";
const router = useRouter()

let router = useRouter()
let deliveryTitle = $ref([
  '序号',
  '销售单号',
  '客户编号',
  '客户名称',
  '总数量',
  '可用库存',
  '项目名称',
  '批次',
  '总金额',
  '结算总面积',
  '报表日期',
  '包装方式',
  '订单类型',
  '送货地址',
  '业务员'

])

let deliveryList =[
  {
    '0': '1',
    '1': 'NG23110101',
    '2': '11',
    '3': '中建',
    '4': '534',
    '5': '116',
    '6': '黄石有轨电车',
    '7': '20批',
    '8': '111100.02',
    '9': '1008.38',
    '10': '2023-10-30',
    '11': '叉车木箱',
    '12': '普通订单',
    '13': '',
    '14': '王龙'
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/delivery/createDelivery', query: { deliveryID: 'JG24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
]

let listName = $ref([
  '下单','工艺','审核','生产','交接','下达','入库','发货'
])

function addDelivery(){
  router.push({path:'/main/delivery/createDelivery'})
}
const xGrid = ref()
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[

    {type:'expand',slots: { content:'content' },width: 50,fixed:"left"},
    {type:'checkbox',title: '选则', width: 80,fixed:"left"},
    {type: 'seq', title: '自序', width: 80 ,fixed:"left"},

    {title: '下单', width: 40, slots: { default: 'state' }},
    {title: '工艺', width: 40, slots: { default: 'state' }},
    {title: '审核', width: 40, slots: { default: 'state' }},
    {title: '生产', width: 40, slots: { default: 'state' }},
    {title: '交接', width: 40, slots: { default: 'state' }},
    {title: '下达', width: 40, slots: { default: 'state' }},
    {title: '入库', width: 40, slots: { default: 'state' }},
    {title: '发货', width: 40, slots: { default: 'state' }},

    {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}


  ],//表头按钮
  toolbarConfig: {
    buttons: [
      {'code': 'add', 'name': '发货',status: 'primary',icon: 'vxe-icon-add'}
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      '0': '1',
      '1': 'NG23110102',
      '2': '11',
      '3': '中建',
      '4': '534',
      '5': '116',
      '6': '黄石有轨电车',
      '7': '20批',
      '8': '111100.02',
      '9': '1008.38',
      '10': '2023-10-30',
      '11': '叉车木箱',
      '12': '普通订单',
      '13': '',
      '14': '王龙'
    },
    {
      '0': '1',
      '1': 'NG23110101',
      '2': '11',
      '3': '中建',
      '4': '534',
      '5': '116',
      '6': '黄石有轨电车',
      '7': '20批',
      '8': '111100.02',
      '9': '1008.38',
      '10': '2023-10-30',
      '11': '叉车木箱',
      '12': '普通订单',
      '13': '',
      '14': '王龙'
    }
  ],//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 ''
      })
    ]
  }

})
const gridEvents = {
  toolbarButtonClick ({ code }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'add': {
          router.push({path: '/main/delivery/createDelivery', params: { orderID: 'NG24010101' }})
          break
        }
      }
    }
  }
}




</script>

<template>
  <div>
  <div  style="width: 100%;height: 100%">
    <el-date-picker
        v-model="value1"
        type="daterange"
@@ -63,44 +167,47 @@
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-button @click="addDelivery" style="margin-top: -5px"  id="searchButton" type="primary" :icon="CirclePlus">发货</el-button>
    <el-table
        :data="deliveryList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        lazy
        border
        style="width: 99%;"
        max-height="80vh">
      <el-table-column type="expand" fixed>
        <template #default="props" >
          <div m="4">
            <p m="t-0 b-2">订单发货有关所有信息</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="选择" fixed width="40"  >
        <el-checkbox />
      </el-table-column>
      <el-table-column v-for="item in listName" prop="" :label="item" width="40"   >
    <vxe-grid
        max-height="97%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"

    >
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <template #state="{ row}">
        <el-checkbox checked/>
      </el-table-column>
      </template>

      <el-table-column
          :prop="index.toString()"
          :show-overflow-tooltip='true'
          width="100" v-for="(item,index) in deliveryTitle"
          :label="item" />
    </el-table>
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

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


  </div>

</template>

<style scoped>
:deep(.el-table .el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}

</style>

 north-glass-erp/northglass-erp/src/views/sd/order/CreateOrder.vue

@@ -1,11 +1,110 @@
<script setup>
import {reactive, ref} from "vue"
import {VXETable} from "vxe-table"
import {useRouter} from "vue-router"
const router = useRouter()

const xGrid = ref()
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type: 'seq',fixed:"left", title: '自序', width: 80 },
    {field: 'orderID',width:120,  title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '产品',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '单价',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '结算单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderID',width:120,  title: '外购',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}



  ],//表头按钮
  toolbarConfig: {
    buttons: [
      {'code': 'remarks', 'name': '加工要求'},
      {'code': 'Craft', 'name': '工艺',status: 'primary'},
      {'code': 'add', 'name': '审核',status: 'primary',disabled: true},
      {'code': 'add', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'}
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
  ],//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 ''
      })
    ]
  }

})

const gridEvents = {
  toolbarButtonClick ({ code }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Craft': {
          router.push({path: '/main/order/updateOrderCraft', query: { orderID: 12123 }})
          break
        }
      }
    }
  }
}

</script>

<template>
  <div class="main-div">

    <div class="order-primary">
    <div class="order-primary" style="background-color: white">
      <el-row>
        <el-col  :span="2"><el-text>*项目名称：</el-text></el-col>
        <el-col  :span="2"><el-input/></el-col>
@@ -90,33 +189,27 @@
      <el-row>
        <el-col  :span="2"><el-text>其他金额：</el-text></el-col>
        <el-col  :span="2"><el-text /></el-col>
        <el-col style="background-color: #337ecc" :span="2"><el-button style="width: 100%" type="primary">加工要求</el-button></el-col>
        <el-col style="background-color: #337ecc" :span="2"><el-button style="width: 100%" type="primary">导入Excel</el-button></el-col>
        <el-col style="background-color: #337ecc" :span="2"><el-button style="width: 100%" type="primary">提交</el-button></el-col>
        <el-col  :span="2"><el-text>其他金额备注：</el-text></el-col>
        <el-col  :span="2"><el-text /></el-col>

      </el-row>
    </div>
    <div class="order-detail">
      <el-table
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          border
      <vxe-grid
          max-height="97%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"
      >
        <el-table-column  label="序号" />
        <el-table-column  label="楼号" />
        <el-table-column  label="产品" />
        <el-table-column  label="宽" />
        <el-table-column  label="高" />
        <el-table-column  label="数量" />
        <el-table-column  label="单价" />
        <el-table-column  label="形状" />

        <el-table-column  label="实际总/单片面积" width="150"/>
        <el-table-column  label="结算单片面积" width="150" />
        <el-table-column  label="结算总面积" width="150" />
        <el-table-column  label="加工要求" width="100" />
        <el-table-column  label="外购" />
        <el-table-column  label="备注" />
      </el-table>
        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
      </vxe-grid>
    </div>
  </div>
</template>

 north-glass-erp/northglass-erp/src/views/sd/order/Order.vue

@@ -12,6 +12,7 @@
        <el-breadcrumb-item :to="{ path: '/main/order/selectOrder' }">订单首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/main/order/createOrder' }">创建</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/main/order/orderReport' }">报表</el-breadcrumb-item>
        <el-breadcrumb-item v-show="false" :to="{ path: '/main/order/orderReport' }">报表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

@@ -23,7 +24,7 @@

<style scoped>
#main-div{
  width: 100%;
  width: 99%;
  height: 100%;
}
#div-title{

 north-glass-erp/northglass-erp/src/views/sd/order/OrderReport.vue

@@ -1,49 +1,112 @@
<script setup>

import {Folder, Search} from "@element-plus/icons-vue";
import BasicTable from "@/components/basic/BasicTable.vue";
import {reactive} from "vue";

let titleList = [
  '序号',
  '订单类型',
  '客户名称',
  '项目名称',
  '销售单号',
  '批次',
  '产品编号',
  '产品编码',
  '产品名称',
  '订单序号',
  '楼号',
  '宽',
  '高',
  '数量',
  '半径',
  '实际面积',
  '结算总面积',
  '形状',
  '磨边类型',
  '主加工要求',
  '加工要求',
  '备注',
  '商标选项',
  '包装方式',
  '工艺流程',
  '周长',
  '单价',
  '金额',
  '铝条方式',
  '订单类型',
  '业务员',
  '送货地址',
  '制单员',
  '建立时间',
  '总厚度',
  '产品大类',
  '产品小类',
  '客户批次'
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderReport',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    {type: 'seq',fixed:"left", title: '自序', width: 80 },
    {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: 'prodID',width:120, title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '半径',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '实际面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '主加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '商标选项',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '包装方式',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '工艺流程',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '周长',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '单价',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '金额',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '铝条方式',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '订单类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '业务员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '送货地址',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '制单员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '建立时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '总厚度',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '产品大类',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '产品小类',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'prodID',width:120, title: '客户批次',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}

  ],//表头按钮
  toolbarConfig: {
    buttons: [],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
  ],//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 ''
      })
    ]
  }

})


]






</script>

<template>
@@ -55,9 +118,14 @@
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Folder">导出</el-button>
    <div class="order-detail">
      <el-table
      <vxe-grid
          max-height="97%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
      ></vxe-grid>
<!--      <el-table
          :data="dataList"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
@@ -78,7 +146,7 @@
            :show-overflow-tooltip='true'
            width="100" v-for="(item,index) in titleList"
            :label="item"    />
      </el-table>
      </el-table>-->
    </div>
  </div>
</template>
@@ -102,6 +170,10 @@
}
.order-detail{
  width: 100%;
  height: 80%;
  height: 90%;

}



</style>

 north-glass-erp/northglass-erp/src/views/sd/order/SelectOrder.vue

@@ -1,38 +1,153 @@
<script setup>
  import {Search} from "@element-plus/icons-vue"
  import {useRouter} from "vue-router"
  import {reactive} from "vue";
  const router = useRouter()

  let orderList = $ref([
    {
      '1':'NG23120701',
      '2':'1',
      '3':'中山市云镜家居有限公司',
      '4':'大板镜',
      '5':'一批1',
      '6':'999999.99',
      '7':'99999',
      '8':'99999.99',
      '9':'99999.99',
      '10':'2023-12-07',
      '11':'装箱',
      '12':'普通订单',
      '13':'张三',
      '14':'第二批',
      '15':'2023-12-30',
  const getTableRow = (row,type) =>{
    switch (type) {
      case 'edit' :{
        //alert('我接收到子组件传送的编辑信息')
        router.push({path: '/main/order/createOrder', query: { orderID: 'NG24010101' }})
        break
      }
      case 'delete':{
        alert('我接收到子组件传送的删除信息')
        break
      }
    }
  ])
  let listName = $ref([
      '下单','工艺','审核','生产','交接','下达','入库','发货'
  ])

  function openCraft(){
    router.push({name:'updateOrderCraft'})
  }

  const gridOptions = reactive({
    border:  "full",//表格加边框
    keepSource: true,//保持源数据
    align: 'center',//文字居中
    stripe:true,//斑马纹
    rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
    id: 'OrderList',
    showFooter: true,//显示脚
    printConfig: {},
    importConfig: {},
    exportConfig: {},
    scrollY:{ enabled: true },//开启虚拟滚动
    showOverflow:true,
    columnConfig: {
      resizable: true,
      useKey: true
    },
    filterConfig: {   //筛选配置项
      remote: true
    },
    customConfig: {
      storage: true
    },
    editConfig: {
      trigger: 'click',
      mode: 'row',
      showStatus: true
    },//表头参数
    columns:[
      {type:'expand',slots: { content:'content' },width: 50,fixed:"left",},
      {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left",},
      {type: 'seq', title: '自序', width: 80 ,fixed:"left",},

      {title: '下单', width: 40, slots: { default: 'state' }},
      {title: '工艺', width: 40, slots: { default: 'state' }},
      {title: '审核', width: 40, slots: { default: 'state' }},
      {title: '生产', width: 40, slots: { default: 'state' }},
      {title: '交接', width: 40, slots: { default: 'state' }},
      {title: '下达', width: 40, slots: { default: 'state' }},
      {title: '入库', width: 40, slots: { default: 'state' }},
      {title: '发货', width: 40, slots: { default: 'state' }},

      {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}


    ],//表头按钮
    toolbarConfig: {
      buttons: [

      ],
      import: false,
      export: true,
      print: true,
      zoom: true,
      custom: true
    },
    data:  [
      {
        '0': '1',
        '1': 'NG23110102',
        '2': '11',
        '3': '中建',
        '4': '534',
        '5': '116',
        '6': '黄石有轨电车',
        '7': '20批',
        '8': '111100.02',
        '9': '1008.38',
        '10': '2023-10-30',
        '11': '叉车木箱',
        '12': '普通订单',
        '13': '',
        '14': '王龙'
      },
      {
        '0': '1',
        '1': 'NG23110101',
        '2': '11',
        '3': '中建',
        '4': '534',
        '5': '116',
        '6': '黄石有轨电车',
        '7': '20批',
        '8': '111100.02',
        '9': '1008.38',
        '10': '2023-10-30',
        '11': '叉车木箱',
        '12': '普通订单',
        '13': '',
        '14': '王龙'
      }
    ],//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 ''
        })
      ]
    }

  })






</script>

<template>
  <div >
  <div  style="width: 100%;height: 100%">
    <el-date-picker
        v-model="value1"
        type="daterange"
@@ -40,85 +155,46 @@
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-table
        :data="orderList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        lazy
        border
        style="width: 99%;"
        max-height="80vh">
      <el-table-column type="expand" fixed>
        <template #default="props" >
          <div m="4">
    <vxe-grid
        max-height="97%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

            <p m="t-0 b-2">编号: {{ props.row.prodID }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed width="110"  >
<!--        <el-button @click="openCraft" link type="primary" size="small">工艺</el-button>-->
<!--        审核与工艺都在同一个按钮-->
        <el-button link type="primary" size="small">编辑</el-button>
        <el-button link type="primary" size="small">删除</el-button>
<!--订单审核后不能删除只能作废-->
      </el-table-column>
      <el-table-column   label="序号" width="40"  />
    >
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <el-table-column v-for="item in listName" prop="" :label="item" width="40"   >
<!--        <el-table-column prop="1" >-->
<!--          <template #header>-->
<!--            <el-button type="primary" size="small" style="width: 10px;height: 10px"></el-button>-->
<!--          </template>-->

<!--          <el-checkbox checked/>-->
<!--        </el-table-column>-->
      <template #state="{ row}">
        <el-checkbox checked/>
      </template>

      </el-table-column>
      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

      <el-table-column  prop="1" width="110" label="销售单号"    />

      <el-table-column  prop="2" width="55" label="客户编号"    />

      <el-table-column  prop="3" width="120" label="客户名称"    />

      <el-table-column  prop="4" width="120" label="项目名称"   />

      <el-table-column  prop="5" label="批次"     />

      <el-table-column  prop="6" width="100" label="总金额"     />

      <el-table-column  prop="7" label="数量"     />

      <el-table-column  prop="8" width="100" label="结算面积"    />

      <el-table-column  prop="9" width="100" label="实际面积"    />

      <el-table-column  prop="10" width="100" label="报表日期" />

      <el-table-column  prop="11" width="100" label="包装方式" />

      <el-table-column  prop="12" width="100" label="订单类型" />

      <el-table-column  prop="13" label="业务员" />

      <el-table-column  prop="14" width="100" label="客户批次" />

      <el-table-column  prop="15" width="100" label="交货日期" />
      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>
    </vxe-grid>



    </el-table>
  </div>
</template>

<style scoped>
:deep(.el-table .el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;

}
</style>

 north-glass-erp/northglass-erp/src/views/sd/order/UpdateOrderCraft.vue

@@ -1,25 +1,78 @@
<script setup>
  let titleList = [
    '序号',
    '楼号',
    '成品名称',
    '标记',
    '子产品',
    '成品宽',
    '成品高',
    '形状',
    '成品尺寸',
    '磨边类型',
    '单片宽',
    '单片高',
    '单片尺寸',
    '数量',
    '工艺流程',
    '加工要求',
    '备注'
  ]
import {reactive, ref} from "vue"
import {useRouter} from "vue-router"
const router = useRouter()

  let  dataList = [

const xGrid = ref()
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹楼号
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    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}
  ],//表头按钮
  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 },
  ],
  toolbarConfig: {
    buttons: [
      {'code': 'remarks', 'name': '加工要求'},
      {'code': 'Craft', 'name': '订单详情',status: 'primary'},
      {'code': 'Craft', 'name': '审核',status: 'primary'},
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      '0' : '1',
      '1' : 'JHH-T33-G-07A-01',
@@ -60,28 +113,36 @@
      '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 ''
      })
    ]
  }

  const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
})

    if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
      // 获取当前行的需要合并的单元格数
      const rowNum = dataList[rowIndex]['17']
      if (rowNum) {
        // 一个单元格纵向横向合并的单元格数量
        return {
          rowspan: rowNum, // 纵向合并单元格的数量
          colspan: rowNum > 0 ? 1 : 0 // 横向合并单元格的数量，纵向单元格数是0的话说明他是被合并的，横向单元格数也就为0不显示了，这里不考虑横向合并所以写死的是1
        };
      } else {
        // 被合并项设置为0，即不显示单元格
        return {
          rowspan: 0,
          colspan: 0
        };
const gridEvents = {
  toolbarButtonClick ({ code }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'Craft': {
          router.push({path: '/main/order/createOrder', query: { orderID: 12123 }})
          break
        }
      }
    }
  }
}



@@ -90,7 +151,7 @@
<template>
  <div class="main-div">

    <div class="order-primary">
    <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>
@@ -112,38 +173,42 @@
        <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  style="background-color: #337ecc" :span="4"><el-button style="width: 100%;height: 100%" size="small"  type="primary">加工要求详细</el-button></el-col>
        <el-col  style="background-color: #337ecc" :span="4"><el-button style="width: 100%;height: 100%"  size="small" type="primary">审核</el-button></el-col>
      </el-row>
    </div>
    <div class="order-detail">

      <vxe-grid
          max-height="97%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"

      <el-table
          :data="dataList"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          border
          :span-method="objectSpanMethod"
      >
        <!--      下拉显示所有信息插槽-->
        <template #content="{ row}">
          <ul class="expand-wrapper">
            <li  v-for="(item,key,index) in row">
              <span style="font-weight: bold">{{key+':  '}}</span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>

        <el-table-column type="expand" fixed>
          <template #default="props" >
            <div m="4">
              <p m="t-0 b-2">产品名称: {{ props.row['2'] }}</p>
              <p m="t-0 b-2">单片: {{ props.row['4'] }}</p>
              <p m="t-0 b-2">工艺: {{ props.row['14'] }}</p>
        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">修改工艺</el-button>
        </template>

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

        <el-table-column label="操作" fixed><el-button link type="primary" size="small">修改工艺</el-button></el-table-column>
        <el-table-column
            :prop="index.toString()"
            :show-overflow-tooltip='true'
            width="100"
            v-for="(item,index) in titleList" :label="item"    />
      </el-table>
    </div>
  </div>
</template>
@@ -156,12 +221,6 @@
}
.el-col{
  border: #181818 1px solid;
}
:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}
.order-primary{
  width: 100%;

 north-glass-erp/northglass-erp/src/views/sd/product/Product.vue

@@ -18,8 +18,8 @@
     <el-breadcrumb :separator-icon="ArrowRight">
       <el-breadcrumb-item :to="{ path: '/main/product/selectProduct' }">产品首页</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/main/product/createProduct' }">创建</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/main/product/test' }">测试</el-breadcrumb-item>
       <el-breadcrumb-item :to="{ path: '/main/product/test1' }">测试</el-breadcrumb-item>
<!--       <el-breadcrumb-item :to="{ path: '/main/product/test' }">测试</el-breadcrumb-item>-->
<!--       <el-breadcrumb-item :to="{ path: '/main/product/test1' }">测试</el-breadcrumb-item>-->
       <el-breadcrumb-item v-show="false" :to="{ path: '/main/product/test1' }">测试</el-breadcrumb-item>
     </el-breadcrumb>


 north-glass-erp/northglass-erp/src/views/sd/product/SelectProduct.vue

@@ -1,45 +1,94 @@
<script setup>
import request from "@/utils/request";
import deepClone from "@/utils/deepClone";
import {ElDatePicker, ElMessage} from "element-plus";
import request from "@/utils/request"
import deepClone from "@/utils/deepClone"
import {ElDatePicker, ElMessage} from "element-plus"
import useProductGlassTypeStore from "@/stores/productGlassType"
import {watch} from "vue";
import {Search} from "@element-plus/icons-vue";
import GlassType from "@/components/sd/product/GlassType.vue";
import router from "@/router";
import {watch} from "vue"
import {Search} from "@element-plus/icons-vue"
import GlassType from "@/components/sd/product/GlassType.vue"
import {useRouter} from  'vue-router'
import BasicTable from '@/components/basic/BasicTable.vue'
let productGlassTypeStore = useProductGlassTypeStore()
let router=useRouter()
watch(productGlassTypeStore,(newVal,oldVal) => {
  console.log(newVal.GlassType)
  let list = productList.filter( product=>{
    return  product.glassType==newVal.GlassType
  })
})

let loading = $ref(true)
let productList=$ref([])
//let productList=$ref([])
let flag = $ref(false)
request.get("/product").then((res) => {
  if(res.code==200){
    productList= deepClone(res.data)
    loading=false
    tableProp.datas= deepClone(res.data)
    flag = true
  }else{
    ElMessage.warning(res.msg)
    router.push("/login")
  }
})

//子组件接收参数
let tableProp = $ref({
  title:[
    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    {type: 'seq',fixed:"left", title: '自序', width: 80 },
    {title: '操作', width: 110, slots: { default: 'button_slot' },fixed:"left"},
    {field: 'prodID', title: '编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'product', title: '名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'typeName', title: '所属类别',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'query', title: '快速查询',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'remarks', title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'creator', title: '创建人',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'createTime', title: '创建时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
  ],
  datas:null,
  footList:[],
  //筛选条件列
  filter:{
  },
})



const getChildren = (row,type) =>{
  switch (type) {
    case 'edit' : {
      router.push({path: '/main/product/createProduct', query: { id: row.id }})
      break
    }
    case 'delete': {
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
}

const getCheckList = (row) =>{
  alert('我接收到子组件传送的确认复选框信息可在控制台查看')
  console.log(row)
}

</script>

<template>

  <div>
    <glass-type   style="float: left" />
  <div style="width: 100%;height: 100%">
      <glass-type   style="float: left" />
      <el-button
          id="select"
          type="primary" :icon="Search">查询</el-button>


    <el-button
        id="select"
        type="primary" :icon="Search">查询</el-button>
      <basic-table style="height: 97%" v-if="flag"
                   :tableProp="tableProp"
                   @getCheckList="getCheckList"
                   @getChildren="getChildren"
      ></basic-table>


    <el-table

<!--    <el-table
        v-loading="loading"
        :data="productList"
        :header-cell-style="{ 'text-align': 'center' }"
@@ -65,7 +114,6 @@
      </el-table-column>
      <el-table-column label="操作" width="110" fixed  >
        <el-button link type="primary" size="small">编辑</el-button>
<!--        <el-button link type="primary" size="small">修改</el-button>-->
        <el-button link type="primary" size="small">删除</el-button>
      </el-table-column>
      <el-table-column sortable prop="prodID" label="编号" width="110"  />
@@ -75,7 +123,7 @@
      <el-table-column prop="remarks" label="备注" :show-overflow-tooltip='true' width="100" />
      <el-table-column prop="creator" label="创建人" width="75" />
      <el-table-column prop="createTime" label="创建时间" width="100" />
    </el-table>
    </el-table>-->
  </div>
</template>


 north-glass-erp/northglass-erp/src/views/sd/product/Test.vue

@@ -29,6 +29,7 @@

let tableProp = $ref({
  title:[

    {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
    { type: 'checkbox',fixed:"left", title: '选择', width: 80 },
    { type: 'seq',fixed:"left", title: '自序', width: 80 },
@@ -41,38 +42,7 @@
    {field: 'creator', title: '创建人', sortable: true},
    {field: 'createTime', title: '创建时间', sortable: true}
  ],
  datas:[
      {
    "id": 24,
    "prodID": "0101000001",
    "product": "6mm超白平钢(外)+1.52PVB超白+6mm超白LNGFX85平钢+20Ar暖边条(结)+10mm超白LYE-80平钢(内) ",
    "glassType": "0101",
    "typeName": "平钢",
    "totalThickness": 40,
    "thickness": 22,
    "remarks": "1",
    "state": 1,
    "creator": "张三里",
    "createTime": "2023-11-23",
    "updateTime": null,
    "query": "6+6+10+10+10",
    "_X_ROW_KEY": "row_11"
  },{
      "id": 24,
      "prodID": "0101000001",
      "product": "6mm超白平钢(外)+1.52PVB超白+6mm超白LNGFX85平钢+20Ar暖边条(结)+10mm超白LYE-80平钢(内) ",
      "glassType": "0101",
      "typeName": "平钢",
      "totalThickness": 40,
      "thickness": 22,
      "remarks": "1",
      "state": 1,
      "creator": "张三里",
      "createTime": "2023-11-23",
      "updateTime": null,
      "query": "6+6+10+10+10",
      "_X_ROW_KEY": "row_11"
    }],
  datas:null,
//脚部求和
  footList:['remarks'],
  //筛选条件列
@@ -89,7 +59,7 @@
let flag = $ref(false)
request.get("/product").then((res) => {
  if(res.code==200){
    //tableProp.datas= res.data
    tableProp.datas= res.data
    flag = true
    //console.log(res.data)
  }else{
@@ -97,18 +67,17 @@
  }
})

//必须加上
//接收子组件传过来的选中复选框数据
const getCheckList = (row) =>{
  alert('我接收到子组件传送的确认复选框信息可在控制台查看')
  console.log(row)
}

//必须加上

const getChildren = (row,type) =>{
  switch (type) {
    case 'edit' :{
      alert('我接收到子组件传送的编辑信息')
      //alert('我接收到子组件传送的编辑信息')

      break
    }
@@ -116,10 +85,7 @@
      alert('我接收到子组件传送的删除信息')
      break
    }

  }


}
const getFilterChildren = (param) =>{

@@ -132,8 +98,7 @@
<template>

  <div style="width: 100%;height: 100%;">
    <el-input   v-model="tableProp.filter.product"/>

<!--    <el-input   v-model="tableProp.filter.product"/>-->
    <basic-table v-if="flag"
                 :tableProp="tableProp"
                 @getCheckList="getCheckList"

 north-glass-erp/northglass-erp/src/views/sd/returns/CreateReturns.vue

@@ -1,65 +1,100 @@
<script setup>

let deliveryTitle = $ref([
  '发货单号',
  '批次',
  '可退数量',
  '已退数量',
  '总数量',
  '本次退货数量',
  '楼号',
  '产品编号',
  '产品名称',
  '单价',
  '库区',
  '异形参数',//可以不需要
  '金额',
  '宽',
  '高',
  '形状',
  '实际单片/总面积',
  '结算单片面积',
  '结算总面积',
  '加工要求',
  '备注',
  '磨边类型',
  '周长',
import {reactive} from "vue";


])

let deliveryList =[
  {
    '0': 'JG23110101',
    '1': '20批1',
    '2': '16',
    '3': '4',
    '4': '20',
    '5': '16',
    '6': 'A楼b层',
    '7': '101',
    '8': '10mmLYTM-140弯钢化',
    '9': '1008.38',
    '10': 'A号柱子',
    '11': '',
    '12': '100',
    '13': '3360',
    '14': '2440',
    '15': '普形',
    '16': '1.11/100.1',
    '17': '1.22',
    '18': '11.11',
    '19': '这是加工要求',
    '20': '这是备注',
    '21': '这是磨边类型',
    '22': '1.1'
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',slots: { content:'content' },width: 50,fixed:"left"},
    {type:'checkbox',title: '选则', width: 80,fixed:"left"},
    {type: 'seq', title: '自序', width: 80 ,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},
    {field: '17',width:120,  title: '结算单片面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '18',width:120,  title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '19',width:120,  title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '20',width:120,  title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '21',width:120,  title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '22',width:120,  title: '周长',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},


  ],//表头按钮
  toolbarConfig: {
    buttons: [
      {'code': 'add', 'name': '保存',status: 'primary',icon: 'vxe-icon-save'}
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
  ],//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 ''
      })
    ]
  }
]

})

</script>

<template>
  <div class="main-div">
    <div class="order-primary">
    <div class="order-primary" style="background-color: white" >
      <el-row>
        <el-col  :span="2"><el-text>客户编码:</el-text></el-col>
        <el-col  :span="5"><el-text style="font-size: large;color: #181818">131</el-text></el-col>
@@ -75,7 +110,7 @@
            <el-option/>
          </el-select>
        </el-col>
        <el-col  :span="2"><el-text>发货报表日期:</el-text></el-col>
        <el-col  :span="2"><el-text>退货日期:</el-text></el-col>
        <el-col  :span="5">
          <el-date-picker
              type="week"
@@ -90,33 +125,33 @@
        <el-col  :span="5"><el-text style="font-size: large;color: #181818"></el-text></el-col>
        <el-col  :span="2"><el-text>发货员:</el-text></el-col>
        <el-col  :span="5"><el-text style="font-size: large;color: #181818"></el-text></el-col>
        <el-col style="background-color: #337ecc" :span="2"><el-button style="width: 100%" type="primary">保存</el-button></el-col>
      </el-row>
    </div>
    <div class="order-detail">
      <el-table
          :data="deliveryList"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          border
      >
        <el-table-column type="expand" fixed>
          <template #default="props" >
            <div m="4">
              <p m="t-0 b-2">订单发货有关所有信息</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column  label="选则" fixed>
          <el-checkbox/>
        </el-table-column>
        <el-table-column
            :prop="index.toString()"
            :show-overflow-tooltip='true'
            width="110" v-for="(item,index) in deliveryTitle"
            :label="item" />
      <vxe-grid
          max-height="97%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"

      </el-table>
      >
        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </div>
        </template>
        <template #content="{ row}">
          <ul class="expand-wrapper">
            <li  v-for="(item,key,index) in row">
              <span style="font-weight: bold">{{key+':  '}}</span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>

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


 north-glass-erp/northglass-erp/src/views/sd/returns/ReturnsReport.vue

@@ -1,6 +1,7 @@
<script setup>

import {Folder, Search} from "@element-plus/icons-vue";
import {reactive} from "vue";

let titleList = [
  '序号',
@@ -33,6 +34,93 @@


]

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[

    {type:'expand',slots: { content:'content' },width: 50,fixed:"left"},
    {type: 'seq', title: '自序', width: 80 ,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},
    {field: '17',width:120,  title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '18',width:120,  title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '19',width:120,  title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '20',width:120,  title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '21',width:120,  title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '22',width:120,  title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: '22',width:120,  title: '建立时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}


  ],//表头按钮
  toolbarConfig: {
    buttons: [
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
  ],//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 ''
      })
    ]
  }

})

</script>

<template>
@@ -46,28 +134,30 @@
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Folder">导出</el-button>
    <div class="order-detail">
      <el-table
          :data="dataList"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          border
      <vxe-grid
          max-height="97%"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"

      >

        <el-table-column type="expand" fixed>
          <template #default="props" >
            <div m="4">
              <p m="t-0 b-2">: {{ props.row['2'] }}</p>
        <template #num1_filter="{ column, $panel }">
          <div>
            <div v-for="(option, index) in column.filters" :key="index">
              <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
            </div>
          </template>
        </el-table-column>
          </div>
        </template>
        <template #content="{ row}">
          <ul class="expand-wrapper">
            <li  v-for="(item,key,index) in row">
              <span style="font-weight: bold">{{key+':  '}}</span>
              <span>{{ item }}</span>
            </li>
          </ul>
        </template>


        <el-table-column
            :prop="index.toString()"
            :show-overflow-tooltip='true'
            width="120" v-for="(item,index) in titleList"
            :label="item"    />
      </el-table>
      </vxe-grid>
    </div>
  </div>
</template>
@@ -79,12 +169,6 @@
}
.el-col{
  border: #181818 1px solid;
}
:deep(.el-table .el-input__wrapper) {
  box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}
.order-primary{
  width: 100%;

 north-glass-erp/northglass-erp/src/views/sd/returns/SelectDeliveryList.vue

@@ -1,61 +1,158 @@
<script setup>
import {CirclePlus, Search} from "@element-plus/icons-vue";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue"
import {useRouter} from "vue-router"
import {reactive, ref} from "vue";
const router = useRouter()

let router = useRouter()
let deliveryTitle = $ref([
  '序号',
  '发货单号',
  '客户编号',
  '客户名称',
  '总数量',
  '可用库存',
  '项目名称',
  '批次',
  '总金额',
  '结算总面积',
  '报表日期',
  '包装方式',
  '订单类型',
  '送货地址',
  '业务员'

])

let deliveryList =[
  {
    '0': '1',
    '1': 'NG23110101',
    '2': '11',
    '3': '中建',
    '4': '534',
    '5': '116',
    '6': '黄石有轨电车',
    '7': '20批',
    '8': '111100.02',
    '9': '1008.38',
    '10': '2023-10-30',
    '11': '叉车木箱',
    '12': '普通订单',
    '13': '',
    '14': '王龙'
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { deliveryID: 'JG24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
]

let listName = $ref([
  '审核','出库'
])

function addReturns(){
  router.push({path:'/main/Returns/createReturns'})
}
const xGrid = ref()
const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[

    {type:'expand',slots: { content:'content' },width: 50,fixed:"left"},
    {title: '操作',slots: { default: 'button_slot' }, width: 80,fixed:"left"},
    {type: 'seq', title: '自序', width: 80 ,fixed:"left"},

    {title: '审核', width: 40, slots: { default: 'state' }},
    {title: '出库', width: 40, slots: { default: 'state' }},

    {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}


  ],//表头按钮
  toolbarConfig: {
    buttons: [
    ],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      '0': '1',
      '1': 'NG23110102',
      '2': '11',
      '3': '中建',
      '4': '534',
      '5': '116',
      '6': '黄石有轨电车',
      '7': '20批',
      '8': '111100.02',
      '9': '1008.38',
      '10': '2023-10-30',
      '11': '叉车木箱',
      '12': '普通订单',
      '13': '',
      '14': '王龙'
    },
    {
      '0': '1',
      '1': 'NG23110101',
      '2': '11',
      '3': '中建',
      '4': '534',
      '5': '116',
      '6': '黄石有轨电车',
      '7': '20批',
      '8': '111100.02',
      '9': '1008.38',
      '10': '2023-10-30',
      '11': '叉车木箱',
      '12': '普通订单',
      '13': '',
      '14': '王龙'
    }
  ],//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 ''
      })
    ]
  }

})
const gridEvents = {
  toolbarButtonClick ({ code }) {
    const $grid = xGrid.value
    if ($grid) {
      switch (code) {
        case 'add': {
          router.push({path: '/main/delivery/createDelivery', params: { orderID: 'NG24010101' }})
          break
        }
      }
    }
  }
}




</script>

<template>
  <div>
  <div  style="width: 100%;height: 100%">
    <el-date-picker
        v-model="value1"
        type="daterange"
@@ -63,43 +160,46 @@
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-table
        :data="deliveryList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        lazy
        border
        style="width: 99%;"
        max-height="80vh">
      <el-table-column type="expand" fixed>
        <template #default="props" >
          <div m="4">
            <p m="t-0 b-2">退货相关信息</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="选择" fixed width="70"  >
        <el-button @click="addReturns" link type="primary" size="small">退货</el-button>
      </el-table-column>
      <el-table-column v-for="item in listName" prop="" :label="item" width="40"   >
    <vxe-grid
        max-height="97%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"

    >
      <template #state="{ row}">
        <el-checkbox checked/>
      </el-table-column>
      </template>

      <el-table-column
          :prop="index.toString()"
          :show-overflow-tooltip='true'
          width="100" v-for="(item,index) in deliveryTitle"
          :label="item" />
    </el-table>
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">退货</el-button>
      </template>

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


  </div>

</template>

<style scoped>
:deep(.el-table .el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}

</style>

 north-glass-erp/northglass-erp/src/views/sd/returns/SelectReturns.vue

@@ -1,54 +1,120 @@
<script setup>
import {Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
import {useRouter} from "vue-router"
const router = useRouter()

let deliveryTitle = $ref([
  '序号',
  '审核',
  '出库',
  '退货单号',
  '退货员',
  '退货日期',
  '客户编码',
  '客户名称',
  '批次',
  '项目名称',
  '发货单号',
  '退货方式',
  '付款方式',
  '总数量',
  '总面积',
  '总金额',
  '报表日期',
  '业务员',
  '送货日期',
  '收款时间'

])

let deliveryList =[
  {
    '0': '1',
    '1': '',
    '2': '',
    '3': 'TH23120801',
    '4': '郑珊珊',
    '5': '2023-12-08',
    '6': '310',
    '7': '上海里诺建筑工程有限公司',
    '8': '补1-2',
    '9': '宿迁某某项目',
    '10': 'JG23112304',
    '11': '实物退货',
    '12': '',
    '13': '8',
    '14': '15.68',
    '15': '11912.05',
    '16': '2023-11-24',
    '17': '王龙',
    '18': '',
    '19': '2023-12-08'

const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
      //alert('我接收到子组件传送的编辑信息')
      router.push({path: '/main/returns/createReturns', query: { ReturnID: 'TH24010101' }})
      break
    }
    case 'delete':{
      alert('我接收到子组件传送的删除信息')
      break
    }
  }
]
}

const gridOptions = reactive({
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
  id: 'OrderList',
  showFooter: true,//显示脚
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true },//开启虚拟滚动
  showOverflow:true,
  columnConfig: {
    resizable: true,
    useKey: true
  },
  filterConfig: {   //筛选配置项
    remote: true
  },
  customConfig: {
    storage: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },//表头参数
  columns:[
    {type:'expand',slots: { content:'content' },width: 50},
    {title: '操作', width: 110, slots: { default: 'button_slot' }},
    {type: 'seq', title: '自序', width: 80 },

    {title: '审核', width: 40, slots: { default: 'state' }},
    {title: '入库', width: 40, slots: { default: 'state' }},

    {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}
  ],//表头按钮
  toolbarConfig: {
    buttons: [],
    import: false,
    export: true,
    print: true,
    zoom: true,
    custom: true
  },
  data:  [
    {
      '0': '1',
      '1': '',
      '2': '',
      '3': 'TH23120801',
      '4': '郑珊珊',
      '5': '2023-12-08',
      '6': '310',
      '7': '上海里诺建筑工程有限公司',
      '8': '补1-2',
      '9': '宿迁某某项目',
      '10': 'JG23112304',
      '11': '实物退货',
      '12': '8',
      '13': '15.68',
      '14': '11912.05',
      '15': '2023-11-24',
      '16': '王龙'
    }
  ],//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 ''
      })
    ]
  }
})
</script>

<template>
@@ -60,45 +126,46 @@
        end-placeholder="结束时间"
    />
    <el-button style="margin-top: -5px"  id="searchButton" type="primary" :icon="Search">查询</el-button>
    <el-table
        :data="deliveryList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        lazy
        border
        style="width: 99%;"
        max-height="80vh">
      <el-table-column type="expand" fixed>
        <template #default="props" >
          <div m="4">
            <p m="t-0 b-2">: 退货的明细</p>


    <vxe-grid
        max-height="97%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"

    >
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row}">
        <ul class="expand-wrapper">
          <li  v-for="(item,key,index) in row">
            <span style="font-weight: bold">{{key+':  '}}</span>
            <span>{{ item }}</span>
          </li>
        </ul>
      </template>

      <template #state="{ row}">
        <el-checkbox checked/>
      </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')" link type="primary" size="small">编辑</el-button>
        <el-button @click="getTableRow(row,'delete')" link type="primary" size="small">删除</el-button>
      </template>

      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed width="110"  >
        <el-button link type="primary" size="small">编辑</el-button>
<!--        <el-button link type="primary" size="small">修改</el-button>-->
        <el-button link type="primary" size="small">删除</el-button>
      </el-table-column>
      <el-table-column
          :prop="index.toString()"
          :show-overflow-tooltip='true'
          width="100" v-for="(item,index) in deliveryTitle"
          :label="item" >
        <el-checkbox v-if="index>0 && index<3" checked/>
      </el-table-column>


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

</template>

<style scoped>
:deep(.el-table .el-input__wrapper) {
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
  cursor: default;
  border: none !important;
  background-color: transparent;
}
</style>