ckgl/pages/whiteEmbryo/w-suppliers.vue

<script lang="ts" setup>

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

const showPop = ref(false)
const list= ref([] as any[])
const form = ref({active:false} as any)
const name = ref('')

onMounted(()=>{
	init()
})

const init=()=>{
	getAction('/suppliers',{page:1,size:100,name:name.value}).then((res:any)=>{
		if(res.code===200){
			list.value=res.data.record
		}
	})
}

watch(name,()=>{
	init()
})

const onClickLeft = () =>{
  history.back()
}
const onClickRight=()=>{
  showPop.value=true
  form.value={active:false}
}
const edit = (item:any) =>{
  form.value=item
  showPop.value=true
}
const submit =()=>{
	if(form.value.id){
		putAction('/suppliers',{id:form.value.id,name:form.value.name,active:form.value.active}).then((res:any)=>{
			  if(res.code===200){
				  showPop.value=false
				  showToast('提交成功！')
				  init()
			  }
		})
	}else{
		postAction('/suppliers',{name:form.value.name,active:form.value.active}).then((res:any)=>{
			  if(res.code===200){
				  showPop.value=false
				  showToast('提交成功！')
				  init()
			  }
		})
	}
}
//删除
const del=(item:any)=>{
	let url='/suppliers/'+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>
	  	<van-cell-group inset>
	  	  <van-field
	  	    v-model="name"
	  	    name="供应商名称"
	  	    label="供应商名称"
	  	    colon
	  	    class="bot"
	  	    label-width="6em"
	  	  />
	  </van-cell-group>
	</view>
    <view class="content">
      <view class="grid-container">
        <view class="grid-item">编号</view>
        <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.name}}</view>
        <view class="grid-item">{{item.id}}</view>
        <view
          class="grid-item"><span style="color: #35a5f7" @click="edit(item)">编辑</span>  &nbsp;&nbsp; <span
          style="color: red" @click="del(item)">删除
        </span></view>
      </view>
    </view>
  </view>

  <van-popup v-model:show="showPop" style="width: 80%" round>
    <view>
      <h3 style="text-align: center">{{form.id?'编辑':'新增'}}</h3>
      <van-cell-group inset>
        <van-field
          v-model="form.name"
          name="供应商名称"
          label="供应商名称"
          colon
          class="bot"
          label-width="6em"
          :rules="[{ required: true, message: '请填写' }]"
        />
        <van-field name="状态" label="状态" colon label-width="6em">
          <template #input>
            <van-radio-group v-model="form.active" direction="horizontal">
              <van-radio :name="true">启用</van-radio>
              <van-radio :name="false">禁用</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </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-y: hidden;
  .van-nav-bar{
    width: 100%;
  }
  .content{
    flex: 1;
    padding: 0 10px;
	overflow-y: scroll;
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 3fr 1.5fr 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;
}
.bot{
  ::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>