NNowhZzU
2023-12-25 fcd7ece15a86fc0cb526ee801ff8262b0db22dee
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>