productLine-applet/pages/product/process/processConfig.vue

<template>
  <view  class="page">
	  <tn-nav-bar fixed>工序追溯</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view class="tn-bg-white tn-padding-left tn-padding-right">
			  <tn-form-item label="产品型号" :labelWidth="200" :borderBottom="false">
				<tn-input v-model="productModelName" type="select" placeholder="请选择产品型号" :selectOpen="modelSelectShow" @click="modelSelectShow = true" :showRightIcon="false"></tn-input>
			  </tn-form-item>
		  </view>
		  <view v-if="productModelName && processConfig.processNames" class="tn-margin-sm" >
			 <view class="tn-margin-top-sm" v-for="(item,index) in processConfig.processNames.split('>')">
			    <tn-list-cell :radius="true" class="tn-text-center"  @click="toProcess(index)">
			      {{item}}
			    </tn-list-cell>
			  </view>
		  </view>
	  </view>
	  
	  
	  <tn-select
	    v-model="clientSelectShow"
	    mode="single"
	    :list="clientList"
	    @confirm="clientSelectConfirm"
	  		labelName="name"
	  		valueName="id"
	  ></tn-select>
	  
	  <tn-select
	    v-model="modelSelectShow"
	    mode="single"
	    :list="modelList"
	    @confirm="modelSelectConfirm"
		labelName="productName"
		valueName="id"
	  ></tn-select>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
          modelSelectShow: false,
		  productModelId:'',
		  productModelName:'',
		  modelList: [],
		  processConfig:{},
		  
      }
    },
	onShow(){
	},
	onLoad(){
		this.getModelSelect()
	},
    methods: {
		async getModelSelect(){
			const result= await this.api.request('wx/product/api/modelSelect',{isEnableProcess:'1'},'get')
			this.modelList = result
		},
		async modelSelectConfirm(event) {
		  this.productModelName = `${event[0]['label']}`
		  this.productModelId = `${event[0]['value']}`
		  let item = event[0].item
		  const result= await this.api.request('wx/product/api/getProcessConfig',{processConfigId:item.processConfigId},'get')
		  this.processConfig = result
		},
		toProcess(index){
			uni.navigateTo({
				url:"/pages/product/process/process?processId="+this.processConfig.processIds.split(',')[index]+"&productModelId="+this.productModelId
			})
		}
    }
  }
</script>

<style lang="scss" scoped>
  
  .page {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
	
	.list__options {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	
	.list {
	  &__left {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    
	    &__icon, &__image {
	      margin-right: 18rpx;
	    }
	  }
	  
	  &__right {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
	  }
	}
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
	
</style>