<script lang="ts" setup>

import { ref } from 'vue'

const list= ref([] as any[])

const onClickLeft = () =>{
  history.back()
}
const onClickRight=()=>{
  uni.navigateTo({
  	url:'/pages/maintenance/p-details'
  })
}
</script>

<template>
<view class="flex">
    <van-nav-bar
      title="工序项维护"
      left-text="返回"
      left-arrow
      right-text="新增"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  <view class="content">
    <view class="grid-container">
      <view class="grid-item">工序</view>
      <view class="grid-item">序号</view>
      <view class="grid-item">操作</view>
    </view>
    <view class="grid-container" v-for="(item,index) in list" :key="index">
      <view class="grid-item">{{item.name}}</view>
      <view class="grid-item">{{item.id}}</view>
      <view class="grid-item" style="color: red">删除</view>
    </view>
  </view>
</view>
</template>

<style scoped lang="scss">
.flex{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  .van-nav-bar{
    width: 100%;
  }
  .content{
    flex: 1;
    padding: 0 10px;
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      .grid-item{
        text-align: center;
        border: 1px solid #f2f2f2;
        ::v-deep(.van-cell){
          padding: 0 5px;
        }
      }
    }
  }
}
</style>
