aiot-app/pages/production/execute/extrusion/preparation.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="`${title}-准备`"
      @clickLeft="back"
    >
      <view class="nav-right" slot="right">
        <view class="text-box" @click="addMaterial"> 添加物料 </view>
      </view>
    </uni-nav-bar>
    <uni-forms
      class="list"
      ref="form"
      :modelValue="formData"
      :rules="rules"
      validate-trigger="blur"
    >
      <div
        class="list-item"
        v-for="(item, index) in formData.list"
        :key="index"
      >
        <div class="item-title" @click="showContent(item)">
          <div>
            物料编码 <span>{{ item.code }}</span>
          </div>
          <div class="title-delt" @click="remove(item, index)">删除</div>
          <!-- <image src="~@/static/product/xl.svg" :style="item.show?'transform: rotate(180deg)':''"></image> -->
        </div>
        <div class="item-content">
          <!-- v-if="item.show" -->
          <template>
            <div class="content-line">
              <div class="line-left">
                <span>物料名称</span>
                <p>{{ item.name }}</p>
              </div>
            </div>
            <!-- <div class="content-line">
              <div class="line-left">
                <span>类型</span>
                <p>{{ item.categoryLevelGroupName }}</p>
              </div>
            </div> -->
            <div class="content-line">
              <div class="line-left">
                <span>牌号</span>
                <p>{{ item.brandNum }}</p>
              </div>
            </div>
            <div class="content-line">
              <div class="line-left">
                <span>型号</span>
                <p>{{ item.model }}</p>
              </div>
            </div>
            <div class="content-line">
              <div class="line-left">
                <span>需求数量</span>
                <p>
                  <!-- 						:rules="[{'required': true,errorMessage: '生产数量必填'},{pattern:/^[1-9]\d*$/,errorMessage: '请输入正整数',trigger: 'blur'}]" -->
                  <uni-forms-item
                    ref="input"
                    :key="item.id"
                    :name="['list', index, 'demandWeight']"
                    style="margin-top: 30rpx"
                  >
                    <uni-easyinput
                      size="small"
                      type="number"
                      v-model="item.demandWeight"
                    />
                  </uni-forms-item>
                  PCS
                </p>
              </div>
              <div class="line-right">
                <u-button
                  class="right-minus"
                  @click="reduce(item, index)"
                  :disabled="item.demandWeight < 2"
                  >-</u-button
                >
                <u-button class="right-add" @click="add(item, index)"
                  >+</u-button
                >
              </div>
            </div>
            <div class="content-line">
              <div class="line-left">
                <span>仓库</span>
                <uni-forms-item
                  ref="input"
                  :rules="[{ required: true, errorMessage: '仓库是必选' }]"
                  :key="item.id"
                  :name="['list', index, 'warehouse']"
                  style="margin-top: 40rpx"
                >
                  <uni-easyinput
                    :value="item.warehouse"
                    readonly
                    placeholder="请输入"
                    size="small"
                    @click.native="choose(item, index)"
                  />
                </uni-forms-item>
              </div>
            </div>
            <!-- <div class="content-delt" @click="remove(item,index)">删除</div> -->
          </template>
          <!-- 				<div class="content-line" v-else>
					<span>{{ item.name }}</span>
					<div class="line-right">
						400{{item.measuringUnit}}
					</div>
				</div> -->
        </div>
      </div>
    </uni-forms>
    <div class="footer">
      <div class="footer-btn" @click="submit">领料</div>
    </div>
    <locationPopu
      ref="locationRef"
      @checkLocation="comfirmLocation"
    ></locationPopu>
    <materialDialog
      ref="materialDialogRef"
      @affirm="comfirmChoose"
      :chooseList="formData.list"
      :params="materialPar"
    />
  </view>
</template>

<script>
import { post, postJ, get, getJ } from "@/utils/api.js";
import materialDialog from "./components/materialDialog.vue";
import locationPopu from "../components/locationPopu.vue";
import { batchSave, getLoginUser } from "@/api/production/extrusion.js";
export default {
  components: {
    materialDialog,
    locationPopu,
  },
  data() {
    return {
      title: "挤压成型",
      formData: {
        list: [],
      },
      rules: {},
      chooseIndex: null,
      code: "",
      id: "",
      userInfo: {},
      //正整数正则 /^[1-9]\d*$/
      materialPar: {},
    };
  },
  onLoad({ id, code, taskInstanceId, versionId }) {
    if (id) {
      this.id = id;
    }
    if (code) {
      this.code = code;
    }

    this.materialPar = {
      taskInstanceId,
      versionId,
    };
    this.getUserInfo();
  },
  methods: {
    showContent(item) {
      this.$set(item, "show", !item.show);
    },
    remove(item, index) {
      this.formData.list.splice(index, 1);
    },
    reduce(item, index) {
      this.$set(
        this.formData.list[index],
        "demandWeight",
        Number(item.demandWeight) - 1
      );
    },
    add(item, index) {
      this.$set(
        this.formData.list[index],
        "demandWeight",
        Number(item.demandWeight) + 1
      );
    },
    choose(item, index) {
      this.chooseIndex = index;
      this.$refs.locationRef.open();
    },
    submit() {
      this.$refs.form
        .validate()
        .then((res) => {
          batchSave({
            ...this.userInfo,
            pickOrderList: this.formData.list,
          }).then((res) => {
            if (res) {
              uni.$u.toast("提交成功！");
              uni.navigateBack({
                delta: 1,
              });
            }
          });
        })
        .catch((err) => {
          uni.$u.toast("请补全信息！");
        });
    },

    addMaterial() {
      this.$refs.materialDialogRef.open();
    },

    comfirmChoose(list) {
      // 取出在弹窗中选中并且不在表格中的数据
      list = list.map((item) => ({
        ...item,
        name: item.categoryName,
        code: item.categoryCode,
        sourceCategoryId: item.id,
        brandNum: item.brandNum,
        factoryCode: item.factoryCode,
      }));
      const result = list.filter(
        (i) => this.formData.list.findIndex((p) => p.id === i.id) === -1
      );
      // 取出在表格中并且不在弹窗中选中的数据 即取消选中的数据
      const del = this.formData.list.filter(
        (i) => list.findIndex((p) => p.id === i.id) === -1
      );
      for (let i = this.formData.list.length - 1; i >= 0; i--) {
        for (let j in del) {
          if (this.formData.list[i].id === del[j].id) {
            this.formData.list.splice(i, 1);
          }
        }
      }
      this.formData.list = this.formData.list.concat(
        result.map((item, index) => {
          this.$set(item, "demandWeight", 0);
          this.$set(item, "warehouse", "");
          this.$set(item, "warehouseId", "");
          this.$set(item, "workOrderCode", this.code);
          this.$set(item, "workOrderId", this.id);
          return item;
        })
      );
    },

    comfirmLocation(cho) {
      if (cho.warehouseId) {
        this.$set(
          this.formData.list[this.chooseIndex],
          "warehouseId",
          cho.warehouseId
        );
        this.$set(
          this.formData.list[this.chooseIndex],
          "warehouse",
          cho.warehouse
        );
      }
    },

    getUserInfo() {
      getLoginUser().then((res) => {
        this.userInfo.executorId = res.accountId;
        this.userInfo.executorName = res.name;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  width: 94%;
  margin: 0 auto;
  padding: 0 0 100rpx;
  .list-item {
    width: 100%;
    margin: 20rpx auto 40rpx;
    .item-title {
      padding: 0 12rpx;
      border-bottom: 1rpx solid #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
      color: #000;
      font-weight: bold;
      height: 80rpx;
      line-height: 80rpx;
      image {
        width: 21rpx;
        height: 11rpx;
      }
      span {
        margin-left: 15rpx;
      }
      .title-delt {
        color: #ec808d;
        // margin: 30rpx auto 0;
        width: 100rpx;
        text-align: center;
      }
    }
    .item-content {
      .content-line {
        padding: 0 12rpx;
        border-bottom: 1rpx dashed #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 80rpx;
        line-height: 80rpx;
        .line-left {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            width: 180rpx;
            text-align: left;
            color: rgb(127, 127, 127);
          }
          p {
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            /deep/.uni-easyinput {
              width: 220rpx;
              margin-right: 10rpx;
              height: 20rpx !important;

              .uni-easyinput__content {
                height: 70rpx !important;
              }
            }
          }
        }
        .line-right {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .right-minus {
            width: 80rpx;
            height: 51rpx;
            text-align: center;
            line-height: 51rpx;
            color: #fff;
            background: #f59a23;
            border: none;
          }
          .right-add {
            width: 80rpx;
            height: 51rpx;
            text-align: center;
            line-height: 51rpx;
            color: #fff;
            background: #70b603;
            margin-left: 10rpx;
            border: none;
          }
          .right-add.right-choose {
            width: 120rpx;
          }
        }
      }
    }
  }
}
.footer {
  width: 100%;
  height: 90rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  .footer-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34rpx;
    color: #fff;
    background: #70b603;
  }
}
</style>