ckgl/pages/maintenance/p-details.vue

<script setup lang="ts">

import { ref } from 'vue'

const form = ref({xx:[{}],scx:[{}]} as any)
const showPicker = ref(false)
const popuList = ref([] as any[])
const dataType = ref('' as any)

const pickerOpen = () =>{
    if(dataType.value==='isNull'){
      popuList.value=[{text:'是',value:'是'},{text:'否',value:'否'}]
    }
}
const chooseItem = (type:any) =>{
  dataType.value=type
  showPicker.value=true
}
const pickerConfirm = (val:any) =>{
  form.value[dataType.value]=val.selectedValues[0]
  showPickerCancel()
}
const showPickerCancel = () =>{
  showPicker.value=false
}

const onSubmit = () =>{

}
</script>

<template>
  <view class="flex">
    <van-nav-bar
      title="工序详情"
    />
    <view class="content">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field name="checkbox" label="类型" colon label-width="6em">
            <template #input>
              <van-radio-group v-model="form.type" direction="horizontal">
                <van-radio name="1">普通</van-radio>
                <van-radio name="2">特殊</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="form.name"
            name="工序名称"
            label="工序名称"
            colon
            label-width="6em"
            :rules="[{ required: true, message: '请填写工序名称' }]"
          />
          <van-field
            v-model="form.serialNum"
            name="序号"
            label="序号"
            colon
            label-width="6em"
            :rules="[{ required: true, message: '请填写序号' }]"
          />

          <van-field name="checkbox" label="需上传项" colon label-width="6em">
            <template #input>
              <van-icon name="add" color="red" size="25" @click="form.scx.push({})"/>
            </template>
          </van-field>

          <view class="card" v-for="(item,index) in form.scx" :key="index">
            <van-field
              v-model="item.name"
              name="上传项名称"
              label="上传项名称"
              colon
              label-width="6em"
              :rules="[{ required: true, message: '请填写上传项名称' }]"
            />
            <van-field name="类型" label="类型" colon label-width="6em">
              <template #input>
                <van-radio-group v-model="item.type1" direction="horizontal">
                  <van-radio name="1">填空</van-radio>
                  <van-radio name="2">选择</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <template v-if="item.type1==1">
              <van-field name="checkbox" label="填写内容" colon label-width="6em">
                <template #input>
                  <van-checkbox-group v-model="item.type1" direction="horizontal" shape="square">
                    <van-checkbox name="1">文字</van-checkbox>
                    <van-checkbox name="2">图片</van-checkbox>
                  </van-checkbox-group>
                </template>
              </van-field>
            </template>
            <template v-if="item.type1==2">
              <view class="a-b">
                <p style="width: 8.5em;text-align: end">选项内容：</p>
                <view>
                  <view v-for="(itemSecond,indexSecond) in item.xx" :key="indexSecond" class="a-b">
                    <van-icon name="add" color="red" size="25" v-if="indexSecond===0" @click="item.xx.push({})"/>
                    <van-icon name="clear" color="red" size="25" v-if="indexSecond!=0" @click="item.xx.splice(indexSecond,1)"/>
                    <van-field
                      v-model="itemSecond.name"
                      readonly
                      @click="chooseItem('')"
                      :rules="[{ required: true, message: '请选择' }]"
                    />
                  </view>
                </view>
              </view>
            </template>

            <van-field
              v-model="form.isNull"
              name="是否必填"
              label="是否必填"
              colon
              readonly
              @click="chooseItem('isNull')"
              label-width="6em"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </view>

        </van-cell-group>

        <view style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </view>
      </van-form>
    </view>
  </view>

  <!--选择框-->
  <van-popup v-model:show="showPicker" round position="bottom" @open="pickerOpen">
    <van-picker
      show-toolbar
      :columns="popuList"
      @confirm="pickerConfirm"
      @cancel="showPickerCancel"
      ref="pickerRef"
    />
  </van-popup>
</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;
    .radio-label{
      margin-right: 15px;
    }
    .card{
      border: 1px solid #d7d7d7;
      border-radius: 6px;
      box-shadow:2px 2px 5px rgba(0, 0, 0, 0.5);
      margin: 10px;
    }
    ::v-deep(.van-field){
      font-size: 16px;
    }
    ::v-deep(.van-field__label){
      text-align: end;
    }
    .a-b{
      display:flex;
      margin-bottom:10px;
      ::v-deep(.van-field__control){
          border: 1px solid #d7d7d7;
      }
      ::v-deep(.van-cell){
        padding: 0;
      }
    }
  }
}
</style>