mes-vue/src/views/distributionrecord/index.vue

<template>
  <div class="page-container">
    <!-- 用户列表 -->
    <n-card class="user-list-card" size="small">
      <!-- 搜索表单 -->
      <div class="search-form">
        <n-form  
          :model="searchForm" 
          label-placement="left"
        >
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi :span="6" label="开始日期">
            <n-date-picker v-model:value="searchForm.startdate" type="date" />
          </n-form-item-gi>
          <n-form-item-gi :span="6" label="结束日期">
            <n-date-picker v-model:value="searchForm.enddate" type="date" />
          </n-form-item-gi>
          <n-form-item-gi :span="6">
            <n-space> 
              <n-button type="primary" @click="search">
                <template #icon><n-icon><SearchOutline /></n-icon></template>
                搜索
              </n-button>
              <n-button @click="reset"> 
                <template #icon><n-icon><RefreshOutline /></n-icon></template>
                重置
              </n-button>
            </n-space>
          </n-form-item-gi>
        </n-grid>
          
        </n-form>
      </div>

      <!-- 表格 -->
      <n-data-table
        :columns="columns"
        size="small"
        striped
        :data="datalist" 
        :bordere="false"
        :single-line="false"
        :loading="loading"
        remote
      />

      <div class="pagination-container" style="display: flex; justify-content: flex-end; margin-top: 12px">
        <n-pagination
          v-model:page="pagination.page"
          v-model:page-size="pagination.pageSize"
          :item-count="pagination.itemCount"
          :page-sizes="[10, 20, 50, 100]"
          show-size-picker
          show-quick-jumper
          @update:page="handlePageChange"
          @update:page-size="handlePageSizeChange"
        >
          <template #prefix>
            共 {{ pagination.itemCount }} 条
          </template>
        </n-pagination>
      </div>
    </n-card>

  </div>

</template>

<script setup lang="ts">
import { 
  ref, 
  reactive, 
  h, 
  onMounted,
  watch, 
} from 'vue'


import { 
  NButton, 
  NIcon, 
  NSpace, 
  NPagination, 
  NGrid, 
  // NGi, 
  NTag,
  useMessage,
  useDialog,
  //type FormInst, 
} from 'naive-ui'

import { 
  SearchOutline, 
  RefreshOutline,
  AddOutline
} from '@vicons/ionicons5'

import { useUserStore } from '@/stores/user'
import { dictDataApi } from '@/api/org'
import { 
  mytasks,
  inspectio 
} from '@/api/production'
import PlmModelDrawer from '@/components/PlmModelDrawer.vue'
import type { PlmModelOpenContext } from '@/api/plmModel'
import  AssingWorkVue from '@/views/biz/flowingAround/assingWork.vue'
import { qualityTestingApi, type QualityTesting } from '@/api/qualityTesting'
import SumbitDetailCard from '@/components/SumbitDetailCard.vue'
import { SubmitLog } from '@/api/submitLog'

const dialog = useDialog()

const message = useMessage()

const userStore = useUserStore()

// 权限检查
const hasPermission = (permission: string) => userStore.hasPermission(permission)


//派工状态字典
const qcAssingStatusOptions = ref<{ label: string; value: any;class:any }[]>([])

// ==================== 搜索表单 ====================
const searchForm = reactive({
  page: 1,
  pageSize: 20,
  startdate:null,
  enddate:null
})



// ==================== 表格 ====================
const datalist = ref<any>([])
const loading = ref(false)

//分页
const pagination = reactive({
  page: 1,
  pageSize: 10,
  itemCount: 0
})


const columns = [
  // { 
  //   type: 'selection',
  //   minWidth:60
  // },
    {
    align:"center",
    title:"图纸",
    key:"materialName",
    minWidth:150,
    render(row:any) {
      var opt = row.materialName
      if(opt) return opt
      return '-'
    }
  },
  {
    align:"center",
    title:"文件",
    key:"materialCode",
    minWidth:150,
    render(row:any) {
      var opt = row.materialCode
      if(opt) return opt
      return '-'
    }
  },
  {
    align:"center",
    title:"NC文件",
    key:"materialCode",
    minWidth:150
  },
  {
    align:"center",
    title:"下发时间",
    key:"assingCode",
    minWidth:150
  },
  
  // {
  //   align:'center',
  //   title: '操作',
  //   key: 'actions',
  //   width: 150,
  //   fixed: 'right',
  //   render(row:any) {
  //     const buttons:any = []
    
  //         if(hasPermission('biz:assingWork:edit')){
  //             buttons.push(h(NButton, { 
  //             size: 'small',
  //             type:'primary',  
  //             ghost:true,
  //             onClick: () => {  } }, 
  //             { default:  () =>  '编辑'}
  //           ))
  //         }
  //         if(hasPermission('biz:assingWork:edit')){
  //             buttons.push(h(NButton, { 
  //             size: 'small',
  //             type:'error',  
  //             ghost:true,
  //             onClick: () => { } }, 
  //             { default:  () =>  '删除'}
  //           ))
  //         }
         

  //     return buttons.length > 0 ? h(NSpace, {justify:'center'}, { default: () => buttons }) : '-'
  //   }
  // }
]





//搜索数据
function search() {
  pagination.page = 1
  searchForm.page = 1
  searchForm.pageSize = 20
  getlist()
}

//重置
function reset() {
  searchForm.processId =''
  searchForm.processName = ''
}

//获取列表数据
function getlist() {
  mytasks(searchForm).then((rps:any) => {
    datalist.value = rps.records
    pagination.itemCount = rps.total
  })
}



function handlePageChange(page: number) {
  pagination.page = page
  searchForm.page = page
  getlist()
}

function handlePageSizeChange(pageSize: number) {
  pagination.pageSize = pageSize
  pagination.page = 1
  searchForm.page = 1
  searchForm.pageSize = pageSize
  getlist()
}



// 加载字典选项
async function loadDictOptions() {
  //qcCancelLoading = true
  try {
    const data = await dictDataApi.listByType('assing_status')
    qcAssingStatusOptions.value = data.map(d => ({ label: d.dictLabel, value: (Number(d.dictValue) || d.dictValue),class:d.listClass }))
  }catch {}
}


//新增
let addModel = ref(false)

const addformRef = ref({
  gxname:''
})
let formData = reactive<any>({

}) 
const addrules = {
   gxname: [
    { required: true, message: '请输入工序名称', trigger: 'blur' },
    // {
    //   validator(rule:any,value: any) {
    //     if(value > pauseform.qcNum){
    //       return new Error(`报检数量最大为${pauseform.qcNum}`)
    //     }
    //     return true
    //   },
    //   trigger: ['blur']
    // }
  ]
}

function addhand() {
  addModel.value = true
}

onMounted(() => {
  getlist()
 loadDictOptions()

})
</script>

<style scoped>

</style>