shuiwu/src/demo/detail.vue

// headData:描述区显示数据
// title:主标题内容
// tabs:tab数据页
// ownertable:数据表名称
// delParam:删除数据的请求参数
// utils.isDisabled(数据状态,[与之匹配的数据],()=>{自定义方法,优先级高于前面的判断})
<template>
  <div>
    <detail-template :headData="mainAreaData" :title="'订单号:' + orderData.sonum" :tabs="['订单明细']" ownertable="sa_order"
    :delParam="{id:'20221031141202',content:{userids:[router.currentRoute.value.query.id]}}" :disable="utils.isDisabled(userData.status,['ACTIVE'])">
      <template #operation>
      </template>
      <template #tab0>
      </template>
    </detail-template>
  </div>
</template>

<script setup>
import Api from '@/api/api'
import tool  from '@/utils/utils'
import detailTemplate from '@/components/detailTemplate/index.vue'
import edit from './modules/edit.vue'

import { useRouter } from "vue-router";
import { onMounted,ref } from "vue";
const router = useRouter()
const mainAreaData = ref([])
const param = ref({
  "id": 20221109093902,
  "content": {
    "sa_orderid": 0, //订单ID
    "pageNumber": 1,
    "pageSize": 20,
    "where": {
      "condition": ""
    }
  },
})
const orderData = ref({})
const mianData = async ()=>{
  const res = await Api.requested({
    "id":'20221108151302',
    "content": {
      "nocache":true,
      "sa_orderid": router.currentRoute.value.query.id
    }
  })
  orderData.value = res.data
  changeDataStructure(res.data)

}
const changeDataStructure = (data) => {
  mainAreaData.value = [
    {
      label:'订单状态',
      value:data.status,
      style:function() {
        let style = {}
        switch (data.status) {
          case '新建':
            style = {color:"#000000"}
            break;
          case '提交':
            style = {color:"#d90a0a"}
            break;
          case '交期待确认':
            style = {color:"#e09a1a"}
            break;
          case '交期确认':
            style = {color:"#3874f6"}
            break;
          case '审核':
            style = {color:"#52C41A"}
            break;
          case '关闭':
            style = {color:"#b2c0ea"}
            break;
          default:
            break;
        }
        return style
      }
    },
    {
      label:'订单类型',
      value:data.type
    },
    {
      label:'明细分类',
      value:data.typemx
    },
    {
      label:'单据日期',
      value:data.billdate
    },
    {
      label:'企业名称',
      value:data.enterprisename
    },
    {
      label:'订单总金额',
      value:data.defaultamount,
      style:function () {
        let style = {color:"#ff0000"}
        return style
      }
    },
    {
      label:'合计数量',
      value:data.qty,
      style:function () {
        let style = {color:"#ff0000"}
        return style
      }
    },
    {
      label:'品牌',
      value:data.brandname
    },
    {
      label:'领域',
      value:data.tradefield
    },
    {
      label:'领域明细',
      value:data.tradefieldmx
    },
    {
      label:'业务员',
      value:data.saler_name
    },
    {
      label:'销售分类',
      value:`${data.saletype}`
    },
    {
      label:'退回原因',
      value:data.backreason
    },
    {
      label:'备注',
      value:data.remarks
    },
  ]
}
const onSelectChange = (val) =>{
  console.log(val,'orderManage')
}
const columns = [
  {
    title:'行号',
    dataIndex:'rowno',
    width:90,
    ellipsis:true,
  },
  {
    title:'产品名称',
    dataIndex:'itemname',
    width:180,
    ellipsis:true,
  },
  {
    title:'产品编号',
    dataIndex:'itemno',
    width:180,
    ellipsis:true,
  },
  {
    title:'erp编号',
    dataIndex:'erpitemno',
    width:180,
    ellipsis:true,
  },
  {
    title:'型号',
    dataIndex:'model',
    width:180,
    ellipsis:true,
  },
  {
    title:'规格',
    dataIndex:'spec',
    width:180,
    ellipsis:true,
  },
  {
    title:'数量',
    dataIndex:'qty',
    width:180,
    ellipsis:true,
  },
  {
    title:'标准价格',
    dataIndex:'marketprice',
    width:180,
    ellipsis:true,
  },
  {
    title:'单价',
    dataIndex:'price',
    width:180,
    ellipsis:true,
  },
  {
    title:'金额',
    dataIndex:'amount',
    width:180,
    ellipsis:true,
  },
  {
    title:'库存数量',
    dataIndex:'cansaleqty',
    width:180,
    ellipsis:true,
  },
  {
    title:'库存状态',
    dataIndex:'stockstatus',
    width:180,
    ellipsis:true,
  },
  {
    title:'包装数量',
    dataIndex:'packageqty',
    width:180,
    ellipsis:true,
  },
  {
    title:'未发货数量',
    dataIndex:'undeliqty',
    width:180,
    ellipsis:true,
  },
  {
    title:'备注',
    dataIndex:'remarks',
    width:360,
    ellipsis:true,
  }
]
onMounted (()=>{
  mianData()
})
</script>
<style>
</style>