aiot-app/pages/warehouse/inventoryAllocation copy/preview.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="调拨预览"
      @clickLeft="back"
    >
      <!--右菜单-->
      <template slot="right">
        <text class="roughDraft" @click="handleSaveToRoughDraft"
          >保存为草稿</text
        >
      </template>
    </uni-nav-bar>
    <view class="view-container">
      <DetailView
        :baseInfo="baseInfo.conventionalStockTransferReq"
        :list="baseInfo.infoReqList"
        type="view"
      />
    </view>
    <view class="footer">
      <view class="verify-box">
        <u-input
          class="dept"
          :value="baseInfo.conventionalStockTransferReq.deptName"
          disableColor="#ffffff"
          placeholder="请选择审批部门"
          @click.native="$refs.treePicker._show()"
          disabled
          border="surround"
        >
          <u-icon
            v-show="baseInfo.conventionalStockTransferReq.deptName"
            slot="suffix"
            name="close-circle-fill"
            @click.native.stop="verifyDeptConfirm([])"
          ></u-icon>
        </u-input>
        <picker
          @change="(e) => handlePicker(e, userList, 'auditorId', 'auditorName')"
          :value="0"
          :disabled="!baseInfo.conventionalStockTransferReq.deptName"
          :range="userList"
          range-key="name"
        >
          <u-input
            @click.native="handlMind"
            class="name"
            :value="baseInfo.conventionalStockTransferReq.auditorName"
            disableColor="#ffffff"
            placeholder="请选择审批人"
            disabled
            border="surround"
          >
            <u-icon
              slot="suffix"
              name="close-circle-fill"
              v-show="baseInfo.conventionalStockTransferReq.auditorName"
              @click.native.stop="clearAuditor"
            ></u-icon>
          </u-input>
        </picker>
      </view>
      <u-button type="primary" @click="handleSave">提交审核</u-button>
    </view>

    <ba-tree-picker
      ref="treePicker"
      :multiple="false"
      @select-change="verifyDeptConfirm"
      key="dept"
      title="选择部门"
      :localdata="deptList"
      valueKey="code"
      textKey="name"
      childrenKey="children"
    />
  </view>
</template>

<script>
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
import DetailView from "./components/DetailView.vue";
import { post, postJ, get, getJ } from "@/utils/api.js";
export default {
  components: { DetailView, baTreePicker },
  data() {
    return {
      activeName: 1,
      baseInfo: {
        conventionalStockTransferReq: {
          deptCode: "",
          deptName: "",
          auditorId: "",
          auditorName: "",
        },
      },

      assetsList: [],
      deptList: [],
      userList: [],
      loading: false,
    };
  },
  onLoad({ id }) {
    if (id) {
      const storeInfo = uni.getStorageSync("inventoryAllocation_preview");
      const info = storeInfo[id] || {};
      this.baseInfo = info.params;
      this.assetsList = info.assetsList;
    }
    this.getDept();
  },
  methods: {
    handlMind() {
      if (this.baseInfo.conventionalStockTransferReq.deptName) {
        return;
      }

      uni.showToast({
        title: "请先选择部门",
        icon: "none",
      });
    },
    async handleSaveToRoughDraft() {
      delete this.baseInfo.conventionalStockTransferReq.createTime;

      const params = uni.$u.deepClone(this.baseInfo);
      params.infoReqList = [
        ...params.infoReqList,
        ...this.assetsList.map((item) => {
          item.detailReqList = item.curDetailReqList;

          return item;
        }),
      ];

      const res = await postJ(
        this.apiUrl + `/conventionalStockTransfer/saveDraft`,
        params,
        true
      );
      if (res?.success) {
        uni.showToast({
          title: "保存成功！",
          mask: true,
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 2,
          });
        }, 1500);
      }
    },
    async handleSave() {
      delete this.baseInfo.conventionalStockTransferReq.createTime;
      const res = await postJ(
        this.apiUrl + `/conventionalStockTransfer/add`,
        this.baseInfo,
        true,
        false
      ).catch((err) => {
        console.log(err);
        if (err.code === "B00000") {
          uni.showModal({
            title: "提示",
            content: err.message,
            showCancel: false,
            success: function (res) {},
          });
        }
      });
      if (res?.success) {
        uni.showToast({
          title: "提交成功！",
          mask: true,
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 2,
          });
        }, 1500);
      }
    },
    // 审核人保存
    handlePicker(e, list, idKey, nameKey) {
      if (idKey) {
        this.$set(
          this.baseInfo.conventionalStockTransferReq,
          idKey,
          list[e.detail.value].id
        );
      }
      if (nameKey) {
        this.$set(
          this.baseInfo.conventionalStockTransferReq,
          nameKey,
          list[e.detail.value].name
        );
      }
      console.log(this.baseInfo.conventionalStockTransferReq);
    },
    // 部门确认
    verifyDeptConfirm(data, name) {
      this.baseInfo.conventionalStockTransferReq.deptCode = data[0];
      this.baseInfo.conventionalStockTransferReq.deptName = name;
      this.$set(this.baseInfo.conventionalStockTransferReq, "auditorId", "");
      this.$set(this.baseInfo.conventionalStockTransferReq, "auditorName", "");
      if (data[0]) {
        this.getUser(data[0]);
      } else {
        this.userList = [];
        this.$refs.treePicker._reTreeList();
      }
    },
    clearAuditor() {
      this.$set(this.baseInfo.conventionalStockTransferReq, "auditorId", "");
      this.$set(this.baseInfo.conventionalStockTransferReq, "auditorName", "");
    },
    // 获取部门
    getDept() {
      get(this.apiUrl + "/main/org/dept/effectiveTree").then((res) => {
        if (res?.success) {
          this.deptList = res.data;
        }
      });
    },

    // 获取人员
    getUser(deptCode) {
      post(this.apiUrl + "/main/user/list", {
        deptCode,
        page: 1,
        size: 9999,
      }).then((res) => {
        if (res?.success) {
          this.userList = res.data.items.map((item) => {
            item.name = item.trueName;
            item.id = item.userId;
            return item;
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.roughDraft {
  color: rgba(75, 121, 2, 1);
  white-space: nowrap;
}
.tabs {
  position: fixed;
  width: 100vw;
  background-color: rgba(242, 242, 242, 0.792156862745098);
  padding-top: 20rpx;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20rpx;

  .tab-item {
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    &.active {
      background: linear-gradient(
        180deg,
        rgba(75, 121, 2, 1) 0%,
        rgba(255, 255, 255, 1) 12%
      );
    }
  }
}
.view-container {
  padding-bottom: 200rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  left: 0;
  background-color: #fff;
  .verify-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
    /deep/.u-input {
      border: 1rpx solid #ccc;
    }
    .dept.u-input {
      margin-right: 30rpx;
    }

    uni-picker {
      width: 40%;
    }
  }
}
</style>