首页分成两张表格

guoyuji

2024-05-31 ee4dc5d6c9d3bc8ae8e704f93fa6b233e8b42e8f

首页分成两张表格

 north-glass-erp/northglass-erp/src/components/sd/order/OrderCraftDetail.vue

New file
@@ -0,0 +1,103 @@
<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import {changeFilterEvent, filterChanged} from "@/hook"
import {useI18n} from "vue-i18n"
import request from "@/utils/request"
const { t } = useI18n()
const xGrid = ref()
const gridOptions = reactive({
  loading:false,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  showOverflow:true,
  rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
  virtualScroll: true, // 开启虚拟滚动功能
  id: 'OrderList',
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
  //scrollX:{ enabled: true,gt:15 },//开启虚拟滚动

  columnConfig: {
    resizable: true,
    useKey: true
  },

  customConfig: {
    storage: true
  },


  columns:[
    {field: 'orderNumber',width:120,  title: t('order.OrderNum'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    //{field: 'orderDetail.buildingNumber',width:120,  title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
    {field: 'orderDetail.productName',width:120,  title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'glassAddress',width:120,  title: t('craft.glassAddress'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'glassChild',width:120,  title: t('craft.glassChild'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.width',width:120,  title: t('craft.width'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.height',width:120,  title: t('craft.height'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.shape',width:120,  title: t('order.shape'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'totalArea',width:120,  title: t('craft.totalArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'childWidth',width:120,  title: t('craft.childWidth'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'childHeight',width:120,  title: t('craft.childHeight'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'area',width:120,  title: t('craft.area'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.quantity',width:120,  title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'process',width:120,  title: t('craft.process'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'icon',width:120,  title: t('order.icon'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.processingNote',width:120,  title: t('order.processingNote'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.remarks',width:120,  title: t('basicData.remarks'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'orderDetail.edgingType',width:120,  title: t('order.edgingType'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}
  ],


})

let props = defineProps({
  orderId:null
})
onMounted(()=>{
  request.post(`/order/getOrderCraftDetailById/${props.orderId}`).then(res=>{
    xGrid.value.reloadData(res.data)
  })
})

watch(()=>props.orderId,(newValue)=>{
  request.post(`/order/getOrderCraftDetailById/${props.orderId}`).then(res=>{
    xGrid.value.reloadData(res.data)
  })
})
</script>

<template>
  <div style="width: 100%;height: 100%">
    <vxe-grid
        height="100%"
        size="mini"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
    >
      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="text"
                   v-model="option.data"
                   @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>

      <template #default_shape="{ row }">
        <span>{{ row.shape==='1'?'普形':row.shape==='2'?'异形':null }}</span>
      </template>

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

<style scoped>

</style>

 north-glass-erp/northglass-erp/src/components/sd/order/OrderDetail.vue

New file
@@ -0,0 +1,105 @@
<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import {changeFilterEvent, filterChanged} from "@/hook"
import {useI18n} from "vue-i18n"
import request from "@/utils/request"
const { t } = useI18n()
const xGrid = ref()
const gridOptions = reactive({
  loading:false,
  border:  "full",//表格加边框
  keepSource: true,//保持源数据
  align: 'center',//文字居中
  stripe:true,//斑马纹
  showOverflow:true,
  rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
  virtualScroll: true, // 开启虚拟滚动功能
  id: 'OrderList',
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
  //scrollX:{ enabled: true,gt:15 },//开启虚拟滚动

  columnConfig: {
    resizable: true,
    useKey: true
  },

  customConfig: {
    storage: true
  },


  columns:[
    {type: 'seq', title: t('basicData.Number'), width: 80 },
    // {field: 'buildingNumber',width:120,  title: '楼号',editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
    {field: 'productId',width:140,  title: t('order.productId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'productName',width:300,  title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    //{field: 'price',width:140,  title: t('order.price'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    //{field: 'grossAmount',width:160,  title: t('order.grossAmount'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'width',width:120,  title: t('order.width') ,editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'height',width:140,  title: t('order.height'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'quantity',width:140,  title: t('order.quantity'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'area',width:150,  title: t('order.trueArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
    {field: 'grossArea',width:160,  title: t('order.trueGrossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
    {field: 'computeArea',width:180,  title: t('order.computeArea'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'computeGrossArea',width:200,  title: t('order.computeGrossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'processingNote',width:200,  title: t('order.processingNote'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'remarks',width:140,  title: t('basicData.remarks'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'shape',width:120,
      title: t('order.shape'),
      editRender: { name: 'input'},
      filters:[{ data: '' }],
      slots: { filter: 'num1_filter',default:'default_shape' }, sortable: true,filterMethod:filterChanged},
    {field: 'bendRadius',width:160,  title: t('order.bendRadius'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
    {field: 'edgingType',width:160,  title: t('order.edgingType'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},

  ],
})

let props = defineProps({
  orderId:null
})
onMounted(()=>{
  request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{
    xGrid.value.reloadData(res.data)
  })
})
watch(()=>props.orderId,(newValue)=>{
  request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{
      xGrid.value.reloadData(res.data)
  })
})
</script>

<template>
  <div style="width: 100%;height: 100%">
    <vxe-grid
        height="100%"
        size="mini"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
    >
      <template #num1_filter="{ column, $panel }">
        <div>
          <div v-for="(option, index) in column.filters" :key="index">
            <input type="text"
                   v-model="option.data"
                   @input="changeFilterEvent($event, option, $panel)"/>
          </div>
        </div>
      </template>

      <template #default_shape="{ row }">
        <span>{{ row.shape==='1'?'普形':row.shape==='2'?'异形':null }}</span>
      </template>

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

<style scoped>

</style>

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

@@ -56,7 +56,7 @@
  }
})
const columns = [
  {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
  // {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
  {field: 'product_name', width: 150, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod: filterChanged},
  {field: 'glass_child',width: 130, title: '单片名称' ,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod: filterChanged},
  {field: 'order_type', width: 120,title: '订单类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod: filterChanged},

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

@@ -855,7 +855,9 @@

}

//表格回车，在表格最后一行添加一行空数据
const handleKeyDown = (evnt) =>{
  //判断表示是否为筛选状态
  if(xGrid.value.isFilter()){
    return
  }

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

@@ -9,10 +9,13 @@
  import {VXETable} from "vxe-table"
  import  useUserInfoStore from '@/stores/userInfo'
  import footSum from "@/hook/footSum"
  import OrderDetail from "@/components/sd/order/OrderDetail.vue"
  import OrderCraftDetail from "@/components/sd/order/OrderCraftDetail.vue"
  import {useI18n} from "vue-i18n"
  import {columnDrop2, sortable2} from "@/hook/columnMove";
  const { t } = useI18n()
  const userStore = useUserInfoStore()
  const tabsValue=ref('1')
  const router = useRouter()
  let rowClickIndex = ref(null)
  const dialogTableVisible = ref(false)
@@ -190,7 +193,7 @@
        }
      }
    },
    cellClick({ row }){
    cellDblclick({ row }){
      rowClickIndex.value = row
    }
  }
@@ -252,6 +255,7 @@
        selectDate.value=res.data.selectDate
        orderList.value = deepClone(res.data.data)
        xGrid.value.loadData(orderList.value)

      }else{
        ElMessage.warning(res.msg)
      }
@@ -305,6 +309,7 @@
  })



  // let initTime = null
  // nextTick(() => {
  //   // 加载完成之后在绑定拖动事件
@@ -324,100 +329,126 @@

<template>
  <div  style="width: 100%;height: 100% ;">
    <el-date-picker
        v-model="selectDate"
        type="daterange"
        :start-placeholder="$t('basicData.startDate')"
        :end-placeholder="$t('basicData.startDate')"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
    <div style="width: 100%;height: 55%">
      <el-date-picker
          v-model="selectDate"
          type="daterange"
          :start-placeholder="$t('basicData.startDate')"
          :end-placeholder="$t('basicData.startDate')"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"

    />
    <el-button @click="changeDate"
               style="margin-top: -5px"
               id="searchButton"
               type="primary"
               :icon="Search">
      {{ $t('basicData.search') }}
    </el-button>
    <vxe-grid
        @filter-change="filterChanged"
        max-height="100%"
        class="mytable-scrollbar"
        ref="xGrid"
        v-bind="gridOptions"
        v-on="gridEvents"
      />
      <el-button @click="changeDate"
                 style="margin-top: -5px"
                 id="searchButton"
                 type="primary"
                 :icon="Search">
        {{ $t('basicData.search') }}
      </el-button>
      <vxe-grid
          @filter-change="filterChanged"
          height="110%"
          size="mini"
          class="mytable-scrollbar"
          ref="xGrid"
          v-bind="gridOptions"
          v-on="gridEvents"

    >
      <!--      下拉显示所有信息插槽-->
      <template #content="{ row }">
        <ul class="expand-wrapper">
          <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined && index>9">
            <span style="font-weight: bold">{{item.title+':  '}}</span>
            <span>{{ row[item.field] }}</span>
          </li>
        </ul>
      </template>
      >
        <!--      下拉显示所有信息插槽-->
        <template #content="{ row }">
          <ul class="expand-wrapper">
            <li  v-for="(item,index) in gridOptions.columns" v-show="item.field!==undefined && index>9">
              <span style="font-weight: bold">{{item.title+':  '}}</span>
              <span>{{ row[item.field] }}</span>
            </li>
          </ul>
        </template>

      <template #state="{ row,column}">
        <el-checkbox
            v-if="row[column.field] === 2"
            @click.native.prevent
            :indeterminate="row[column.field]===1"
            :checked="true"/>
        <el-checkbox
            v-else
            @click.native.prevent
            :indeterminate="row[column.field]===1"
            :checked="false"/>
      </template>
        <template #state="{ row,column}">
          <el-checkbox
              v-if="row[column.field] === 2"
              @click.native.prevent
              :indeterminate="row[column.field]===1"
              :checked="true"/>
          <el-checkbox
              v-else
              @click.native.prevent
              :indeterminate="row[column.field]===1"
              :checked="false"/>
        </template>

      <!--左边固定显示的插槽-->
      <template #button_slot="{ row }">
        <el-button @click="getTableRow(row,'edit')"
                   v-if="userStore.user.permissions.indexOf('selectOrder.edit') > -1"
                   link
                   type="primary"
                   size="small">
          {{ $t('basicData.edit') }}
        </el-button>
        <el-popconfirm @confirm="getTableRow(row,'delete')" :title="$t('searchOrder.deleteConfirm')">
          <template #reference>
            <el-button  link type="primary" size="small">{{ $t('basicData.delete') }}</el-button>
          </template>
        </el-popconfirm>
      </template>
        <!--左边固定显示的插槽-->
        <template #button_slot="{ row }">
          <el-button @click="getTableRow(row,'edit')"
                     v-if="userStore.user.permissions.indexOf('selectOrder.edit') > -1"
                     link
                     type="primary"
                     size="small">
            {{ $t('basicData.edit') }}
          </el-button>
          <el-popconfirm @confirm="getTableRow(row,'delete')" :title="$t('searchOrder.deleteConfirm')">
            <template #reference>
              <el-button  link type="primary" size="small">{{ $t('basicData.delete') }}</el-button>
            </template>
          </el-popconfirm>
        </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)"/>
        <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>
        </div>
      </template>
        </template>

      <template #toolbar_buttons>
        <vxe-select @change="changeOrderType" v-model="orderType" :placeholder="$t('searchOrder.orderType')">
          <vxe-option value="2" :label="$t('searchOrder.regularOrders')"></vxe-option>
          <vxe-option value="-2" :label="$t('searchOrder.cancelledOrders')"></vxe-option>
          <vxe-option value="0" :label="$t('searchOrder.allOrders')"></vxe-option>
        </vxe-select>
      </template>
        <template #toolbar_buttons>
          <vxe-select @change="changeOrderType" v-model="orderType" :placeholder="$t('searchOrder.orderType')">
            <vxe-option value="2" :label="$t('searchOrder.regularOrders')"></vxe-option>
            <vxe-option value="-2" :label="$t('searchOrder.cancelledOrders')"></vxe-option>
            <vxe-option value="0" :label="$t('searchOrder.allOrders')"></vxe-option>
          </vxe-select>
        </template>

      <template #pager>
        <!--使用 pager 插槽-->
<!--        'PrevJump','NextJump', -->
        <vxe-pager
            @page-change="handlePageChange"
            :layouts="[  'PrevPage', 'Jump','PageCount', 'NextPage',  'Total']"
            v-model:current-page="pageNum"
            v-model:page-size="total.pageSize"
            v-model:pager-count="total.pageTotal"
            :total="total.dataTotal"
        >
        </vxe-pager>
      </template>
    </vxe-grid>
        <template #pager>
          <!--使用 pager 插槽-->
          <!--        'PrevJump','NextJump', -->
          <vxe-pager
              @page-change="handlePageChange"
              :layouts="[  'PrevPage', 'Jump','PageCount', 'NextPage',  'Total']"
              v-model:current-page="pageNum"
              v-model:page-size="total.pageSize"
              v-model:pager-count="total.pageTotal"
              :total="total.dataTotal"
          >
          </vxe-pager>
        </template>
      </vxe-grid>

    </div>
    <div style="width: 100%;height: 45%;">
      <el-tabs type="border-card"
               v-model="tabsValue"
               class="demo-tabs"
               style="width: 100%;height: 100%" >
        <el-tab-pane label="详情" name="1" >
          <order-detail
              v-if="tabsValue==='1'"
            :orderId="rowClickIndex===null?null:rowClickIndex.orderId"
          />
        </el-tab-pane>
        <el-tab-pane label="工艺 " name="2">
          <order-craft-detail
              v-if="tabsValue==='2'"
              :orderId="rowClickIndex===null?null:rowClickIndex.orderId"
          />
        </el-tab-pane>
        <el-tab-pane label="流程卡" name="3"></el-tab-pane>
      </el-tabs>

    </div>


    <el-dialog
        v-model="dialogTableVisible"
@@ -432,5 +463,13 @@
</template>

<style scoped>
:deep(.el-tabs__content) {
  width: 100%;
  height: 86%;
}
.el-tab-pane{
  width: 100%;
  height: 100%;
}

</style>

 north-glass-erp/src/main/java/com/example/erp/controller/sd/OrderController.java

@@ -62,17 +62,32 @@
    }

    @ApiOperation("根据id获取订单信息")
    @SaCheckPermission("selectOrder.edit")
    @PostMapping("/getOrderById/{id}")
    public Result getOrderById(@PathVariable String id)  {
        return  Result.seccess(orderService.getOrderById(id));
    }

    @ApiOperation("根据id获取订单明细信息")
    @SaCheckPermission("selectOrder.edit")
    @PostMapping("/getOrderDetailById/{id}")
    public Result getOrderDetailById(@PathVariable String id)  {
        return  Result.seccess(orderService.getOrderDetailById(id));
    }




    @ApiOperation("查询订单工艺")
    @SaCheckPermission("updateOrderCraft.search")
    @PostMapping("/getOrderCraftById/{id}")
    public Result getOrderCraftById(@PathVariable String id)  {
        return  Result.seccess(orderService.getOrderCraftById(id));
    }

    @PostMapping("/getOrderCraftDetailById/{id}")
    public Result getOrderCraftDetailById(@PathVariable String id)  {
        return  Result.seccess(orderService.getOrderCraftDetailById(id));
    }
    @ApiOperation("审核订单")
    @SaCheckPermission("createOrder.review")
    @PostMapping("/reviewOrderById/{id}/{status}")

 north-glass-erp/src/main/java/com/example/erp/service/sd/OrderService.java

@@ -348,4 +348,12 @@
    public Map<String,String> getOrderProductDetailTag(String orderId) {
        return orderDetailMapper.getOrderProductDetailTag(orderId);
    }

    public List<OrderDetail> getOrderDetailById(String id) {
        return orderDetailMapper.selectList(new QueryWrapper<OrderDetail>().eq("order_id",id));
    }

    public List<OrderGlassDetail> getOrderCraftDetailById(String id) {
         return orderGlassDetailMapper.selectOrderGlassDetailByOrderId(id);
    }
}