aiot-app/pages/tour_tally/defects/SparepartForm.vue

<template>
  <view class="cell">
    <!-- :rules="rules" -->
    <u--form labelPosition="left" :model="form" ref="form1">
      <u-form-item
        label="出库类型"
        prop="form.outType"
        borderBottom
        @click="
          show.typeList = true;
          hideKeyboard();
        "
        ref="item1"
      >
        <u--input
          v-model="form.outType"
          disabled
          disableColor="#ffffff"
          placeholder="请选择"
          border="none"
        >
        </u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item
        label="仓库"
        prop="form.warehouse"
        borderBottom
        @click="
          show.whList = true;
          hideKeyboard();
        "
        ref="item1"
      >
        <u--input
          v-model="form.warehouse.name"
          disabled
          disableColor="#ffffff"
          placeholder="请选择"
          border="none"
        >
        </u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item
        label="收货人"
        prop="form.receiveName"
        borderBottom
        ref="item1"
      >
        <u--input
          v-model="form.receiveName"
          border="none"
          placeholder="请输入收货人"
        ></u--input>
      </u-form-item>
      <u-form-item
        label="联系方式"
        prop="form.receivePhone"
        borderBottom
        ref="item1"
      >
        <u--input
          v-model="form.receivePhone"
          border="none"
          placeholder="请输入联系方式"
        ></u--input>
      </u-form-item>
      <u-form-item
        label="收货时间"
        prop="form.receiveTime"
        borderBottom
        @click="
          show.receiveTime = true;
          hideKeyboard();
        "
        ref="item1"
      >
        <u--input
          v-model="form.receiveTime"
          disabled
          disableColor="#ffffff"
          placeholder="选择日期时间"
          border="none"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item
        label="供应商"
        prop="form.supplier"
        borderBottom
        @click="
          show.supplierList = true;
          hideKeyboard();
        "
        ref="item1"
      >
        <u--input
          v-model="form.supplier.name"
          disabled
          disableColor="#ffffff"
          placeholder="请选择性别"
          border="none"
        >
        </u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item
        label="出库登记人"
        prop="form.executor"
        borderBottom
        @click="
          show.userList = true;
          hideKeyboard();
        "
        ref="item1"
      >
        <u--input
          v-model="form.executor.name"
          disabled
          disableColor="#ffffff"
          placeholder="请选择性别"
          border="none"
        >
        </u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>

      <u-form-item label="备注" prop="form.remark" borderBottom ref="item1">
        <u--textarea
          v-model="form.remark"
          placeholder="请输入内容"
        ></u--textarea>
      </u-form-item>
    </u--form>

    <u-action-sheet
      :show="show.typeList"
      :actions="typeList"
      title="请选择出库类型"
      @close="show.typeList = false"
      @select="bindSelect($event, 'typeList')"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="show.userList"
      :actions="userList"
      title="请选择出库登记人"
      @close="show.userList = false"
      @select="bindSelect($event, 'userList')"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="show.whList"
      :actions="whList"
      title="请选择仓库"
      @close="show.whList = false"
      @select="bindSelect($event, 'whList')"
    >
    </u-action-sheet>
    <u-action-sheet
      :show="show.supplierList"
      :actions="supplierList"
      title="请选择供应商"
      @close="show.supplierList = false"
      @select="bindSelect($event, 'supplierList')"
    >
    </u-action-sheet>
    <u-calendar
      :show="show.receiveTime"
      :closeOnClickOverlay="true"
      @confirm="confirm"
      @close="show.receiveTime = false"
    ></u-calendar>
  </view>
</template>

<script>
import { get, postJ } from "@/utils/api.js";
export default {
  data() {
    return {
      form: {
        goodsType: 3, //设备
        supplier: {},
        executor: {},
        warehouse: {},
        attaments: [],
      },
      show: {
        typeList: false,
        userList: false,
        whList: false,
        supplierList: false,
        receiveTime: false,
      },
      typeList: [], //类型
      userList: [], //角色
      whList: [], //仓库集合
      supplierList: [], //供应商集合
      rules: {
        "form.outType": {
          type: "string",
          required: true,
          message: "请选择出库类型",
          trigger: ["blur", "change"],
        },
        "form.warehouse": {
          type: "string",
          required: true,
          message: "请选择仓库",
          trigger: ["blur", "change"],
        },
        "form.receiveName": {
          type: "string",
          required: true,
          message: "请输入收货人",
          trigger: ["blur", "change"],
        },
        "form.receivePhone": {
          type: "string",
          required: true,
          message: "请输入联系方式",
          trigger: ["blur", "change"],
        },
        "form.receiveTime": {
          type: "string",
          required: true,
          message: "请选择收货时间",
          trigger: ["blur", "change"],
        },
        "form.supplier": {
          type: "string",
          required: true,
          message: "请选择供应商",
          trigger: ["blur", "change"],
        },
        "form.executor": {
          type: "string",
          required: true,
          message: "请选择出库登记人",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  mounted() {
    this.getInit();
  },
  updated() {
    this.$emit("change", this.form);
  },
  methods: {
    async getInit() {
      let muster = await get(this.apiWebUrl + "/data/dict/source", {
        code: "wh,out_type",
      });

      this.whList = muster.data.wh;
      this.typeList = muster.data.out_type;
      let supplier = await get(this.apiWebUrl + "/data/dict/source", {
        code: "company_info",
        rela: 5,
      });

      this.supplierList = supplier.data.company_info;

      let user = await postJ(this.apiWebUrl + "/main/user/users", {});
      this.userList = user.data;
    },
    confirm(value) {
      this.form.receiveTime = value[0];
      this.show.receiveTime = false;
    },
    bindSelect($event, type) {
      console.log($event, type);
      let { name, id } = $event;
      switch (type) {
        //出库类型
        case "typeList":
          this.form.outType = name;
          break;
        //仓库
        case "whList":
          this.form.warehouse.name = name;
          this.form.warehouse.id = id;
          break;
        //出库登记人
        case "userList":
          this.form.executor.name = name;
          this.form.executor.id = id;
          break;
        //供应商
        case "supplierList":
          this.form.supplier.name = name;
          this.form.supplier.id = id;
          break;
        default:
          break;
      }
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
  },
};
</script>

<style scoped lang="scss">
.cell {
  padding: 0 20rpx;
}

/deep/ {
  .u-form-item__body__left {
    width: 160rpx !important;
  }

  .u-form-item__body__left__content__label {
    font-size: $uni-font-size-base;
  }

  .u-textarea,
  uni-textarea {
    padding-left: 0;
    padding-right: 0;
  }
}
</style>