zhuangxiuAdmin/src/views/Order/orderList/index.vue

<script setup lang="tsx">
import { reactive, ref, unref } from 'vue'
// import { getOrderList, assignSalesman, getOrderDetail } from '@/api/order'
import { getOrderList, getOrderDetail } from '@/api/order'
import { useTable } from '@/hooks/web/useTable'
import { Table, TableColumn } from '@/components/Table'
import { ContentWrap } from '@/components/ContentWrap'
import { FormSchema } from '@/components/Form'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { searchTime } from '@/utils/searchTime'
import { searchOrder } from '@/api/order/types'
import { ElTabs, ElTabPane, ElButton, ElDivider, ElDrawer } from 'element-plus'
import Detail from './components/Detail.vue'
import Draft from './components/Draft.vue'
import addItem from './components/addItem.vue'
import { SalespersonButtom } from '@/components/SalespersonList'
const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const res = await getOrderList({
      ...searchParams.value,
      page: unref(currentPage) || 1,
      limit: unref(pageSize) || 10,
      step: unref(activeName) || 0
    })
    return {
      list: res.data.list || [],
      total: res.data.count || 0
    }
  }
})
const { dataList, loading, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const dialogVisible = ref(false)
const dialogTitle = ref('')
const showSalesperson = ref(false)


const tableColumns = reactive<TableColumn[]>([
  {
    field: 'id',
    label: 'ID',
    align: 'center',
    width: 70
  },
  {
    field: 'real_name',
    label: '用户',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
        return (
          <>
            <div>昵称: {row.real_name}</div>
			<div>UID: {row.uid} </div>
            <div>手机号: {row.phone}</div>
          </>
        )
      }
    }
  },
  {
      field: 'salesperson',
      label: '业务员',
      minWidth: 100,
      slots: {
        default: (data: any) => {
          const row = data.row
  		if(row.salesperson && row.salesperson.id) {
  			return (
  			  <>
  			    <div> {row.salesperson.name}</div>
  			  </>
  			)
  		}else {
  			return (
  			  <>
  			  </>
  			)
  		}
          
        }
      }
    },
{
    field: 'designer',
    label: '设计师',
    minWidth: 100,
    slots: {
      default: (data: any) => {
        const row = data.row
		if(row.designer && row.designer.id) {
			return (
			  <>
			    <div> {row.designer.name}</div>
			  </>
			)
		}else {
			return (
			  <>
			  </>
			)
		}
        
      }
    }
  },
	
	{
	    field: 'worker',
	    label: '安装工',
	    minWidth: 100,
	    slots: {
	      default: (data: any) => {
	        const row = data.row
			if(row.worker && row.worker.id) {
				return (
				  <>
				    <div> {row.worker.name}</div>
				  </>
				)
			}else {
				return (
				  <>
				  </>
				)
			}
	        
	      }
	    }
	  },
  {
    field: 'address',
    label: '地址',
    minWidth: 100
  },
  {
    field: 'price',
    label: '金额',
    minWidth: 100
  },
  {
    field: 'area',
    label: '预估面积',
    minWidth: 100
  },
  {
    field: 'add_time',
    label: '时间',
    minWidth: 160
  },
  {
    field: 'mark',
    label: '备注',
    minWidth: 140
  },
  {
    field: 'action',
    label: '操作',
    width: 200,
    headerAlign: 'center',
    align: 'center',
    slots: {
      default: (data: any) => {
        const row = data.row;
        return (
          <>
		  <ElButton type="primary" link size="small"  onClick={() => action('edit', row)}>详情</ElButton>
		  <ElDivider direction="vertical" />
		  <ElButton type="primary" link size="small">详情</ElButton>
          </>
        )
      }
    }
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'uid',
    label: 'UID',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请输入用户UID'
    }
  },
  {
    field: 'real_name',
    label: '用户昵称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入用户昵称'
    }
  },
  {
    field: 'salesperson_id',
    label: '业务员',
    component: 'Input',
    componentProps: {
      type: 'number',
      placeholder: '请选择业务员'
    }
  },
  {
    field: 'order_id',
    label: '订单号',
    component: 'Input',
    componentProps: {
      placeholder: '请输入订单号'
    }
  },
  searchTime
])
const searchParams = ref<searchOrder>({
  uid: '',
  real_name: '',
  time: '',
  store_id: '',
  salesperson_id: '',
  step: '',
  order_id: ''
})
const setSearchParams = (data: any) => {
  searchParams.value = data
  const search = searchParams.value
  if (data.time) {
    search.time = data.time.join('-')
  } else {
    search.time = ''
  }
  getList()
}
const activeName = ref(0)
const tabsConfig = reactive([
  {
    title: '待付款',
    total: 0,
    step: 0
  },
  {
    title: '设计师订单',
    total: 0,
    step: 1
  },
  {
    title: '商品订单',
    total: 0,
    step: 2
  },
  {
    title: '安装订单',
    total: 0,
    step: 3
  },
  {
    title: '待评价',
    total: 0,
    step: 4
  },
  {
    title: '已完成',
    total: 0,
    step: 5
  }
])
const activeNames = ref(0)
const currentRow = ref()
const tabsConfigs = reactive([
  {
    title: '基本信息',
    total: 0,
    step: 0
  },
  {
    title: '设计稿',
    total: 0,
    step:1
  },
  {
    title: '增项',
    total: 0,
    step:2
  },
])
const getLists = (e)=> {
	console.log(e)
}
const checkedSalesperson = (e) => {
	console.log(e)
	currentRow.value.salesperson_id = e.id;
	currentRow.value.salesperson = e
}
const action = async (type: string, row?: any) => {
  // actionType.value = type
  // if (type == 'add') {
  //   dialogTitle.value = t('exampleDemo.add')
  //   currentRow.value = undefined
  // }
  
  //   console.log(currentRow, 'currentRow')
  // }
   const res = await getOrderDetail(row.id)
  if (type == 'edit') {
    dialogTitle.value = '详情'
    currentRow.value = res.data
	console.log(row,'row');
    dialogVisible.value = true
	}
}
// const goAssignSalesman = async (id:number, data: any) => {
// 	await assignSalesman(id,data)
// }
</script>

<template>
  <ContentWrap>
    <ElTabs v-model="activeName" @tab-click="getList">
      <ElTabPane
        v-for="(item, index) in tabsConfig"
        :key="index"
        :label="`${item.title}${item.total > 0 ? `(${item.total})` : ''}`"
        :name="index"
      />
    </ElTabs>
    <div class="max-w-1000px">
      <Search isCol :schema="searchSchema" @reset="setSearchParams" @search="setSearchParams" />
    </div>
    <div class="mb-10px"> </div>
    <Table
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :columns="tableColumns"
      default-expand-all
      node-key="id"
      stripe
      :data="dataList"
      :loading="loading"
      @register="tableRegister"
      :pagination="{
        total
      }"
    />
  </ContentWrap>
  
  <ElDrawer
      v-model="dialogVisible"
      :title="dialogTitle"
      direction="rtl"
	  size="50%"
    >
      <ElTabs v-model="activeNames" >
        <ElTabPane
          v-for="(item, index) in tabsConfigs"
          :key="index"
          :label="`${item.title}${item.total > 0 ? `(${item.total})` : ''}`"
          :name="index"
        />
      </ElTabs>
	  <Detail v-if="activeNames === 0" :current-row="currentRow" @checkedSalesperson="checkedSalesperson"/>
	  <Draft v-if="activeNames === 1" :current-row="currentRow" />
	  <addItem v-if="activeNames === 2" :current-row="currentRow" />
    </ElDrawer>
</template>