bigdata_WX/pages/cb/shuifeizsFirst/components/rotationItems.vue

<template>
  <view
    class="rotation-wrapper"
    :style="{ height: tktype === 1 ? '176rpx' : '450rpx' }"
  >
    <view class="rotation-item" v-for="(item, index) in list" :key="index">
      <view class="rotation-item__label">{{ item.label }}</view>
      <view class="rotation-item__value">
        <u-number-box
          v-model="item.value"
          :min="1"
          :max="9999"
          maxlength="4"
          @change="() => valChange(item)"
          v-if="item.isNumber"
        ></u-number-box>
        <view class="rotation-item__value__input">
          <u-input
            v-model="item.value"
            type="number"
            maxlength="6"
            :max="999999"
            input-align="right"
            @blur="valChange(item)"
            v-if="!item.isNumber && !item.isSelect"
          />
          <text
            style="margin-left: 16rpx; width: 80rpx"
            v-if="!item.isNumber && !item.isSelect"
            >分钟</text
          >
        </view>
        <view
          v-if="!item.isNumber && item.isSelect"
          class="rotation-item__value__select"
          @click="show = true"
        >
          <text
            style="color: #9ba6a3; margin-right: 16rpx"
            :style="{ color: formData.sfmode ? '#666' : '#9ba6a3' }"
            >{{ selectText }}</text
          >
          <u-icon name="arrow-right" color="#4E5969" size="24rpx"></u-icon>
        </view>
      </view>
    </view>
    <u-action-sheet
      :list="actionSheetList"
      v-model="show"
      @click="actionSheetCallback"
    ></u-action-sheet>
  </view>
</template>
<script>
export default {
  name: 'rotationItem',
  props: {
    formData: {
      type: Object,
      default: () => {},
    },
    tktype: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    tktype: {
      handler(val) {
        if (val !== 1) {
          this.list = [
            {
              label: '轮灌次数',
              isNumber: true,
              value: this.formData['lgcs'] || 1,
              key: 'lgcs',
            },
            {
              label: '轮灌间隔',
              isNumber: false,
              value: this.formData['lgjg'] || '',
              key: 'lgjg',
            },
            {
              label: '肥前水',
              isNumber: false,
              value: this.formData['fqcx'] || '',
              key: 'fqcx',
            },
            {
              label: '肥后水',
              isNumber: false,
              value: this.formData['fhcx'] || '',
              key: 'fhcx',
            },
            {
              label: '模式选择',
              isNumber: false,
              value: this.formData['sfmode'] || '',
              key: 'sfmode',
              isSelect: true,
            },
          ];
        } else {
          this.list = [
            {
              label: '轮灌次数',
              isNumber: true,
              value: this.formData['lgcs'] || 1,
              key: 'lgcs',
            },
            {
              label: '轮灌间隔',
              isNumber: false,
              value: this.formData['lgjg'] || '',
              key: 'lgjg',
            },
          ];
        }
      },
      deep: true,
      immediate: true,
    },
    formData: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      list: [],
      selectText: '请选择',
      show: false,
      actionSheetList: [
        {
          text: '定时',
          id: 1,
        },
        {
          text: '定量',
          id: 2,
        },
        {
          text: 'EC调配',
          id: 3,
        },
        {
          text: '混肥比例',
          id: 4,
        },
      ],
    };
  },
  methods: {
    valChange(item) {
      this.formData[item.key] = item.value;
      this.$emit('formDataHandler', { key: [item.key], value: item.value });
    },
    actionSheetCallback(index) {
      this.formData['sfmode'] = this.actionSheetList[index].id;
      this.selectText = this.actionSheetList[index].text;
    },
  },
};
</script>
<style scoped lang="scss">
.rotation-wrapper {
  height: 450rpx;
  border-radius: 16rpx;
  background-color: #ffffff;
  position: relative;
  width: calc(100% - 64rpx);
  margin: 0 32rpx;
  margin-top: 32rpx;
  .rotation-item {
    height: 88rpx;
    width: calc(100% - 32rpx);
    margin: 0 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4rpx solid #f0f0f0;
    .rotation-item__label {
      width: 50%;
      text-align: left;
      color: #042118;
      font-family: 'Source Han Sans CN VF';
      font-size: 28rpx;
      font-weight: 400;
    }
    .rotation-item__value {
      width: 50%;
      text-align: right;
      padding-right: 16rpx;
      .rotation-item__value__input {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>