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

<template>
  <view class="container">
    <view class="subject">
      <view>{{title}}</view>
      <view class="options">
        <u-button type="success" icon="plus" size="mini" @click="addRow"></u-button>
        <u-button type="primary" icon="minus" size="mini" @click="removeRows"
          :disabled="selectedIndexs.length == 0"></u-button>
      </view>
    </view>
    <view class="uni-mt-4">
      <uni-table ref="table2" border stripe emptyText="暂未添加记录" type="selection" @selection-change="selectRowChange">
        <uni-tr>
          <uni-th width="120" align="center">物料名称</uni-th>
          <uni-th width="80" align="center">规格</uni-th>
          <uni-th width="100" align="center">数量</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in selectList" :key="index">
          <uni-td width="120" align="center">{{item.name}}</uni-td>
          <uni-td width="80" align="center">{{ item.spec }}</uni-td>
          <uni-td width="100" align="center">
            <u-input placeholder="数量" v-model="item.number" type="number" maxlength="3" @blur="formatNumber(item)"
              :custom-style="checkNumber(item.number)">
              <u-text :text="item.unit" slot="suffix" margin="0 3px 0 0"></u-text>
            </u-input>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <!-- 物料选择弹框 -->
    <u-popup :show="selectorShow" mode="center" @close="selectorShow = false" closeable>
      <view class="select-box">
        <uni-section title="选择物料" type="line">
          <uni-data-select :localdata="selectRange" @change="changeRestore"></uni-data-select>
        </uni-section>
      </view>
    </u-popup>

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

<script>
  export default {
    // model: {
    //   prop: 'formData',
    //   event: 'changeData',
    // },
    inject: ['checkData'],
    props: {
      // formData: {
      //   type: Number,
      //   require: false,
      //   default: 100
      // }
      name: {
        type: String,
        require: true,
      },
      picklist: {
        type: Array,
        require: false,
        default: () => []
      },
      title: {
        type: String,
        require: false,
        default: "上报记录",
      },
    },
    options: {
      styleIsolation: 'shared',
    },
    data() {
      return {
        selectorShow: false,
        datalist: [], // 物料数据
        selectList: [], // 选中列表
        selectedIndexs: [], // 已选中索引
      }
    },
    created() {
      // 深度克隆
      this.datalist = uni.$u.deepClone(this.picklist);
    },
    computed: {
      // 计算下拉选项
      selectRange() {
        return this.datalist.reduce((result, item) => {
          let obj = {
            value: item.id,
            text: item.name,
            disable: item.disable ? true : false
          };
          result.push(obj);
          return result;
        }, []);
      }
    },
    methods: {
      // 输入框失去焦点事件
      formatNumber(item) {
        item.number = this.$base.filterNonNumeric(item.number + '');
      },
      // 检测输入数字有效性
      checkNumber(val) {
         this.checkData(this,val);
      },
      // 返库记录选中项发生变化时
      selectRowChange(e) {
        this.selectedIndexs = e.detail.index;
        // console.log(this.selectedIndexs);
      },
      // 添加返库数据
      addRow() {
        this.selectorShow = true;
      },
      // 选中返库物料
      changeRestore(val) {
        let index = this.datalist.findIndex(item => item.id == val);
        if (index != -1) {
          let obj = Object.assign({}, this.datalist[index]);
          obj.number = 1; // 返库数量默认为1
          this.selectList.push(obj);
        }
        this.selectorShow = false;
      },
      // 删除返库数据
      removeRows() {
        this.$base.removeIndexesItems(this.selectedIndexs, this.selectList);
        console.log(this.selectList);
      }
    },
    watch: {
      selectList: {
        handler(newVal, oldVal) {
          console.log(newVal);
          let restoreIds = newVal.map(v => v.id);
          for (let index in this.datalist) {
            let id = this.datalist[index].id;
            // 赋予对象不存在的属性为响应式
            this.$set(this.datalist[index], 'disable', restoreIds.includes(id) ? 1 : 0);
          }
          // 通知父组件更新表单字段
          this.$emit('setFormItem', {name: this.name, value: newVal});
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .subject {
    margin: 10px 0;
    @include flex-space-between(row);

    .options {
      @include flex-space-around(row);

      ::v-deep {
        .u-button {
          width: 30px;
          height: 30px;
          min-width: 30px;
          margin-left: 5px;
        }
      }
    }
  }

  .select-box {
    width: 300px;
    max-height: 360px;
    background-color: #f5f5f5;
  }
</style>