YX-SCM/yunxi-ui-app-hl/pages/renwu/work-report.vue

<template>
  <view class="container">
    <uni-card title="完工报告表" padding="5" spacing="0" margin="0">
      <scroll-view class="scrollbox" :scroll-y="true" scroll-top="0">
        <view class="report-item">
          <text class="uni-my-2">成品完成量</text>
          <view class="target">
            <view class="imgbox">
              <image slot='cover' class="unimg" mode="aspectFill" :src="info.imgurl"></image>
              <text class="name">xxx产品</text>
            </view>
            <view class="number">
              <text>计划数量: </text>
              <text style="color:#409eff;font-size: 16px;margin-left: 8px;">30</text>
            </view>
          </view>
          <view class="completed">
            <view class="completed_item1">完成数量</view>
            <view class="completed_item2">
              <u-input placeholder="数量" v-model="form.completed" type="number" maxlength="3"
                @blur="formatNumber(form.completed)" :custom-style="checkNumber(form.completed)">
                <u-text :text="info.unit" slot="suffix" margin="0 3px 0 0"></u-text>
              </u-input>
            </view>
          </view>
        </view>
        <view class="report-item">
          <reportItem :picklist="picklist" title="领料返库" name="restore" @setFormItem="setFormItem"></reportItem>
        </view>
        <view class="report-item">
          <reportItem :picklist="picklist" title="加工货损" name="damage" @setFormItem="setFormItem"></reportItem>
        </view>
      </scroll-view>
      <!-- 提交申请 -->
      <view slot="actions" class="actions">
        <u-button type="primary" :hairline="true" text="提交报告" @click="submitReport"></u-button>
        <u-button type="error" :hairline="true" text="再看看" @click="closeReport"></u-button>
      </view>
    </uni-card>

    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import reportItem from './work-report-item.vue';
  export default {
    components: {
      reportItem
    },
    inject: ['checkData'],
    props: {
      picklist: {
        type: Array,
        require: false,
        default: () => []
      },
      info: {
        type: Object,
        require: false,
        default: () => []
      },
      show: {
        type: Boolean,
        require: false,
        default: false
      }
    },
    options: {
      styleIsolation: 'shared',
    },
    data() {
      return {
        restoreSelectorShow: false,
        damageSelectorShow: false,
        form: {
          completed: 1,
          restore: [],
          damage: [],
        },
      }
    },
    methods: {
      // 提交完工报告
      submitReport() {
        let params = uni.$u.deepClone(this.form);
        console.log(params); // todo
        this.$emit("update:show", false);
      },
      // 再看看
      closeReport() {
        this.$emit("update:show", false);
      },
      // 更新表单数据
      setFormItem(obj) {
        this.form[obj.name] = obj.value;
      },
      // 输入框失去焦点事件
      formatNumber(number) {
        this.form.completed = this.$base.filterNonNumeric(number + '');
        return this.form.completed;
      },
      // 检测输入数字有效性
      checkNumber(val) {
        this.checkData(this,val);
      }
    },
    // watch:{
    //   form: {
    //     handler(newVal, oldVal) {
    //       console.log(newVal);
    //     },
    //     deep: true
    //   }
    // }
  }
</script>

<style lang="scss" scoped>
  @import "../../styles/base.scss";

  .scrollbox {
    height: 420px;
    overflow: hidden;
  }

  .report-item {
    margin-bottom: 15px;

    .target {
      margin-top: 10px;
      @include flex-space-between(row);

      .imgbox {
        @include imgbox(30, 30);
      }

      .number {
        font-size: 14px;
      }
    }

    .completed {
      @include flex-space-between(row);
      height: 45px;
      border: 1px solid #e4e4e4;
      margin-top: 10px;

      &_item1 {
        flex: 1;
        background-color: #f5f5f5;
        color: #666;
        font-weight: 700;
        line-height: 45px;
        padding: 0 10px;
      }

      &_item2 {
        flex: 1;
        padding: 0 10px;
      }
    }
  }

  .actions {
    margin-bottom: 20px;
    @include flex-space-around(row);

    ::v-deep {
      .u-button {
        width: 100px;
        height: 35px;
      }
    }
  }
</style>