ckgl/pages/whiteEmbryo/w-level.vue

<script lang="ts" setup>

import { onMounted, ref } from 'vue'
import { deleteAction, getAction, postAction, putAction } from '../../common/http';
import { showToast } from 'vant';

const showPop = ref(false)
const list= ref([] as any[])
const level = ref('' as any)
const id= ref('' as any)

onMounted(()=>{
	init()
})
const init =()=>{
	getAction('/rawFabricLevels',{page:1,size:100}).then((res:any)=>{
		if(res.code===200){
			list.value=res.data.record
		}
	})
}
const onClickLeft = () =>{
  history.back()
}
const onClickRight=()=>{
  showPop.value=true
  level.value=''
  id.value = ''
}
const edit = (item:any) =>{
  level.value=item.level
  id.value = item.id
  showPop.value=true
}
const submit =()=>{
	if(!level.value) return showToast('请填写等级!')
	if(id.value){
		putAction('/rawFabricLevels',{id:id.value,level:level.value}).then((res:any)=>{
			if(res.code===200){
				showPop.value=false
				showToast('编辑成功！')
				init()
			}
		})
	}else{
		postAction('/rawFabricLevels',{level:level.value}).then((res:any)=>{
			if(res.code===200){
				showPop.value=false
				showToast('提交成功！')
				init()
			}
		})
	}
}
const delItem = (item:any) =>{
	let url = /rawFabricLevels/+item.id
	deleteAction(url).then((res:any)=>{
		if(res.code===200){
			showToast('删除成功！')
			init()
		}
	})
}
</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.id}}</view>
        <view class="grid-item">{{item.level}}</view>
        <view
          class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span>  &nbsp;&nbsp; <span
          style="color: red" @click="delItem(item)">删除
        </span></view>
      </view>
    </view>
  </view>

  <van-popup v-model:show="showPop" style="width: 80%" round>
    <view>
      <h3 style="text-align: center">新增</h3>
      <van-cell-group inset>
        <van-field
          v-model="level"
          name="白胚等级"
          label="白胚等级"
          colon
          label-width="5em"
        />
      </van-cell-group>
      <view class="a-c">
        <van-button type="danger" @click="showPop=false">取消</van-button>
        <van-button type="primary" @click="submit">确认</van-button>
      </view>
    </view>
  </van-popup>
</template>

<style scoped lang="scss">
.flex{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  .van-nav-bar{
    width: 100%;
  }
  .content{
    flex: 1;
    padding: 0 10px;
	overflow-y: scroll;
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 3fr 2fr;
      .grid-item{
        border: 1px solid #f2f2f2;
        text-align: center;
        ::v-deep .van-cell{
          padding: 0 5px;
        }
      }
    }
    .card{
      margin: 10px 15px;
      padding: 5px;
      border: 1px solid #02a7f0;
      border-radius: 10px;
    }
  }
}
.a-b{
  display:flex;
  margin-bottom:10px;
  ::v-deep .van-cell{
    padding: 0;
  }
}
::v-deep .van-field{
  font-size: 16px;
}
::v-deep .van-field__control{
  border-bottom: 1px solid #d7d7d7;
  font-size: 16px;
}
::v-deep .van-field__label{
  text-align: end;
}
.a-c{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin:15px;
  ::v-deep .van-button--normal{
    padding: 5px;
    height: 30px;
  }
}
</style>