aiot-app/pages/maintain_service/sparepart/sparepart.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="申请备品备件"
      @clickLeft="back"
    ></uni-nav-bar>
    <view class="sparepart-container">
      <view class="infos">
        <!-- <view class="col">
          <text class="label">申领单号</text>
          <text class="content">{{ formData.applyOrder }}</text>
        </view>
        <view class="col">
          <text class="label">期望完成时间</text>
          <text class="content" @click="timeShow = true">{{
            formData.expectedPerformanceTime | timeFilter
          }}</text>
        </view> -->
        <u-form
          labelPosition="left"
          :model="formData"
          ref="formRef"
          labelWidth="250"
          labelAlign="left"
          class="baseForm"
        >
          <!-- <u-form-item label="审核人部门" prop="verifyDeptName" borderBottom>
            <u-input
              :value="formData.verifyDeptName"
              disableColor="#ffffff"
              placeholder="请选择"
              disabled
              type="select"
              clearable
              @click.native="$refs.verifyTreePicker._show()"
            />
            <view slot="right" style="display: flex; align-item: center">
              <u-icon
                v-show="formData.verifyDeptName"
                name="close-circle-fill"
                @click="verifyDeptConfirm([], '')"
              ></u-icon>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </u-form-item>
          <u-form-item label="审核人" prop="approvalUserId" borderBottom>
            <picker
              @change="
                e =>
                  handlePicker(
                    e,
                    userList,
                    'approvalUserId',
                    'approvalUserName'
                  )
              "
              :value="pickerIndex"
              :range="userList"
              range-key="name"
            >
              <u-input
                :value="formData.approvalUserName"
                disableColor="#ffffff"
                placeholder="请选择"
                disabled
                type="select"
              />
            </picker>
            <view slot="right" style="display: flex; align-item: center">
              <u-icon
                v-show="formData.approvalUserName"
                name="close-circle-fill"
                @click="
                  handlePicker(null, [], 'approvalUserId', 'approvalUserName')
                "
              ></u-icon>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </u-form-item> -->
          <u-form-item
            label="仓库："
            prop="warehouseId"
            style="height: 120rpx"
            required
          >
            <!-- <uni-datetime-picker type="datetime" v-model="formData.datetime" @change="changeLog" /> -->
            <picker
              @change="bindPickerChange"
              :value="warehosueVal"
              :range="warehouseList"
              range-key="name"
            >
              <input
                disabled
                class="uni-input"
                v-model="warehosueName"
                placeholder="请选择"
              />
            </picker>
          </u-form-item>
          <!-- <u-form-item
            label="期望完成时间："
            prop="approvalUserId"
            style="height: 120rpx"
          >
            <text class="content" @click="timeShow = true">{{
              formData.expectedPerformanceTime | timeFilter
            }}</text>
          </u-form-item> -->
        </u-form>
      </view>
      <view class="detail-title">
        申请明细
        <u-button @click="addGoods" type="success" size="small">
          添加物品
        </u-button></view
      >
      <view class="detail-content">
        <uni-collapse
          :key="forceUpdate"
          ref="collapseRef"
          v-model="collapseVal"
          accordion
        >
          <uni-collapse-item
            :typeOpen="1"
            :name="item.informationCode"
            :show-animation="true"
            v-for="(item, index) in registerlist"
            :key="item.informationCode"
          >
            <template slot="title">
              <view class="row">
                <view class="col">
                  <view class="col-item">
                    {{ item.informationName }}({{ item.informationCode }})
                  </view>
                </view>
                <view class="col">
                  <view class="col-item">
                    规格/型号：{{ item.specification }}/{{ item.modelType }}
                  </view>
                  <view class="col-item">
                    {{ item.isUnpack ? "包装单位" : "计量单位" }}：{{
                      item.isUnpack
                        ? `${item.measuringUnit}/${item.minPackUnit}`
                        : item.measuringUnit
                    }}
                  </view>
                </view>
                <view class="col">
                  <view class="col-item">
                    所需数量：{{ item.selectNum || 0 }}{{ item.measuringUnit }}
                  </view>
                  <view
                    class="col-item text-primary"
                    @click.stop="openPlus(item)"
                  >
                    添加备品备件
                  </view>
                </view>
              </view>
            </template>

            <view class="instance-list">
              <view class="" v-for="(itm, index) in item.tableData">
                <view class="row">
                  <uni-icons
                    type="trash"
                    size="27"
                    color="red"
                    @click="handleDelete(item, itm, index)"
                  ></uni-icons>
                  <view class="col">
                    <view class="col-item">
                      {{ itm.onlyCode }}
                    </view>
                  </view>
                  <view class="col">
                    <view class="col-item"> 批次号：{{ itm.batchNum }} </view>
                    <view class="col-item"> 包装编码：{{ itm.num }} </view>
                  </view>
                  <view class="col">
                    <view class="col-item">
                      {{ itm.manufactureTime ? "生产日期" : "采购日期" }}：{{
                        itm.manufactureTime || itm.procurementTime
                      }}
                    </view>
                  </view>
                  <view class="col" v-if="!itm.isUnpack">
                    <view class="col-item">
                      最小包装单元：{{ itm.measurementUnit }}{{ itm.unit }}/{{
                        itm.minPackUnit
                      }}
                    </view>
                  </view>
                  <view class="col">
                    <view class="col-item">
                      货位：{{ itm.warehouseName }}-{{ itm.areaName }}-{{
                        itm.shelfCode
                      }}-{{ itm.cargoSpaceCode }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>

        <!-- <view class="col" v-for="(item, index) in registerlist" :key="item.id">
          <view>
            <view>{{ item.informationName }}</view>
            <view style="color: #aaaaaa"
              >({{ item.informationCode }}/{{ item.modelType }})</view
            >
          </view>
          <u-number-box
            v-model="item.num"
            :step="1"
            :min="0"
            :name="index"
            :disabledInput="true"
            @change="numChange"
          ></u-number-box>
        </view>
        <view class="plus" @click="openPlus">+</view> -->
      </view>
    </view>
    <view class="sparepart-footer">
      <button class="primary" @click="toSubmit">提交</button>
      <button class="defualt" @click="back">返回</button>
    </view>
    <u-datetime-picker
      @confirm="timeConfirm"
      @cancel="timeCancel"
      :show="timeShow"
      v-model="formData.expectedPerformanceTime"
      mode="datetime"
    ></u-datetime-picker>

    <u-popup :show="popShow" @close="close" @open="open">
      <view class="select-container" v-if="popShow">
        <view class="title"
          >添加备件
          <view class="btn-box">
            <text class="btn cancel" @click="close">取消</text>
            <text class="btn confirm" @click="popConfirm">确定</text>
          </view>
        </view>
        <!-- <input
          type="text"
          :value="curClassification.name"
          placeholder="选择分类"
          @click="openPicker"
        /> -->
        <input
          type="text"
          @input="nameFilter"
          v-model="searchKey"
          placeholder="搜索编号"
        />
        <view class="self-table-header">
          <view class="table-code">备品备件编码</view>
          <view class="table-batch">批次号</view>
        </view>
        <view class="table-wrapper">
          <view class="listContent">
            <checkbox-group @change="selectionChange">
              <view
                class="listBox"
                v-for="(item, index) in tableData"
                :key="index"
              >
                <label>
                  <view class="self-table-tr">
                    <view class="table-code">{{ item.onlyCode }}</view>
                    <view class="table-batch">{{ item.batchNum }}</view>
                    <view class="table-date"></view>
                    <view class="other-info">
                      <view>包装编码：{{ item.num }}</view>
                      <view v-if="!currentRow.isUnpack"
                        >最小包装单元：{{ item.measurementUnit
                        }}{{ item.unit }}/{{ item.minPackUnit }}</view
                      >
                      <view v-if="item.manufactureTime || item.procurementTime"
                        >{{
                          item.procurementTime ? "采购日期" : "生产日期"
                        }}：{{
                          item.manufactureTime || item.procurementTime
                        }}</view
                      >

                      <view style="width: 100%"
                        >货位：{{ item.warehouseName }}-{{ item.areaName }}-{{
                          item.shelfCode
                        }}-{{ item.cargoSpaceCode }}</view
                      >
                    </view>
                    <view class="checked">
                      <checkbox
                        :value="item.onlyCode"
                        :checked="selectList.includes(item.onlyCode)"
                      ></checkbox>
                    </view>
                  </view>
                </label>
              </view>
            </checkbox-group>
            <u-empty style="margin-top: 20vh" v-if="!tableData.length" />
          </view>
        </view>
      </view>
    </u-popup>
    <!-- <ba-tree-picker
      ref="treePicker"
      :multiple="false"
      @select-change="confirm"
      title="选择分类"
      :localdata="listData"
      valueKey="id"
      textKey="name"
      childrenKey="children"
    /> -->

    <ba-tree-picker
      ref="verifyTreePicker"
      key="verify"
      :multiple="false"
      @select-change="verifyDeptConfirm"
      title="选择部门"
      :localdata="deptList"
      valueKey="code"
      textKey="name"
      childrenKey="children"
    />
    <u-modal
      :show="showConfirm"
      title="提示"
      @confirm="warehosueConfirm"
      @cancel="warehosueCancel"
      :showCancelButton="true"
      content="仓库修改后，已添加的备品备件信息将会被清空，是否要继续修改仓库？"
    ></u-modal>
  </view>
</template>

<script>
import { get, postJ, post } from "@/utils/api.js";
import dayjs from "dayjs";
import { debounce } from "lodash";
let [page, size, isEnd] = [1, 10, true];
export default {
  components: {},
  filters: {
    timeFilter(inp) {
      return inp && dayjs(inp).format("YYYY-MM-DD HH:mm");
    },
  },

  data() {
    return {
      workOrderId: "",
      planFinishTime: "",
      workOrderCode: "",
      showConfirm: false,
      popShow: false,
      timeShow: false,
      time: "",

      pageId: "",
      pickerDeptShow: false,
      list: [],
      treeList: [],
      classificationId: "",
      // formData: {
      //   applyOrder: getRuleNo('BJ'),
      //   expectedPerformanceTime: new Date().getTime()
      // },
      registerlist: [],
      listData: [],
      curClassification: {
        id: "",
        name: "",
      },

      planCode: "",
      formData: {
        approvalUserId: "",
        approvalUserName: "",
        verifyDeptCode: "",
        verifyDeptName: "",
        // expectedPerformanceTime: new Date().getTime()
      },
      pickerIndex: 0,
      userList: [],
      deptList: [], //部门
      searchKey: "",
      tableData: [],
      selectIndex: [],
      chooseItem: {},
      sourceCode: null,
      sourceId: null,
      // 关键词搜索
      nameFilter: debounce(this.getTableData, 500),
      chooseIndex: null,
      warehouseId: "",
      warehosueName: "",
      warehouseList: [],
      warehosueVal: 0,
      memo: [],
      selectList: [],
      currentRow: {},
      forceUpdate: false,
      collapseVal: "",
    };
  },
  onLoad(options) {
    this.planCode = options.planCode;
    this.sourceCode = options.sourceCode;
    this.sourceId = options.sourceId;
    // this.getDept()
    // this._getPlanInfo()
    this.getwarehouseList();
    // this.workOrderId = workOrderId
    // this.workOrderCode = workOrderCode
    // this.planFinishTime = planFinishTime
    // this._getClassification()
  },
  computed: {
    selectAll: {
      set(val) {
        if (val) {
          this.selectList = this.tableData.map((i) => i.onlyCode);
        } else {
          this.selectList = [];
        }
      },
      get() {
        return (
          this.selectList.length &&
          this.selectList.length == this.tableData.length
        );
      },
    },
  },
  onShow() {
    uni.$off("setSelectList");
    uni.$on("setSelectList", (selectList) => {
      if (selectList?.length) {
        this.registerlist = this.registerlist.filter((item) => {
          const index = selectList.findIndex((i) => i.curId === item.curId);

          if (index > -1) {
            selectList.splice(index, 1);
          }

          return index > -1;
        });

        this.registerlist.push(
          ...selectList.map((item) => {
            return {
              curId: item.curId,
              isUnpack: item.isUnpack,
              informationCode: item.assetCode || item.informationCode,
              informationName: item.assetName || item.informationName,
              specification: item.specification,
              minPackUnit: item.minPackUnit,
              modelType: item.modelType,
              measuringUnit: item.unit || item.measuringUnit,
              tableData: item.tableData || [],
              num: 0,
              selectNum: 0,
            };
          })
        );
      }
    });
  },
  onReachBottom: function () {
    if (isEnd) {
      return;
    }
    // 显示加载图标
    uni.showLoading({
      title: "数据加载中",
    });
    this.getMoreLists();
  },
  methods: {
    showPopu() {
      this.popShow = true;
    },
    changeLog(e) {
      console.log("change事件:", e);
    },
    // 选择审核人确定
    handlePicker(e, list, idKey, nameKey) {
      if (idKey) {
        this.formData[idKey] = list[e?.detail.value]?.id;
      }
      if (nameKey) {
        this.formData[nameKey] = list[e?.detail.value]?.name;
      }
      this.$nextTick(() => {
        if (idKey === "assetType" || idKey === "bizScene") {
          this.$refs.formRef.validateField(idKey);
        }
      });
    },
    // 部门确认
    verifyDeptConfirm(data, name) {
      this.formData.verifyDeptCode = data[0];
      this.formData.verifyDeptName = name;
      this.formData.approvalUserId = "";
      this.formData.approvalUserName = "";

      this.getUser(data[0]);
    },
    // 获取部门
    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;
          });
        }
      });
    },

    numChange(val) {
      if (val?.value === 0) {
        this.registerlist.splice(val.name, 1);
      }
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    selectionChange({ detail }) {
      this.selectList = detail.value;
    },
    // 点击提交
    toSubmit() {
      // if (!this.formData.expectedPerformanceTime) {
      //   uni.showToast({
      //     icon: 'error',
      //     title: '请选择期望完成时间'
      //   })
      //   return
      // }
      // if (!this.formData.approvalUserName) {
      //   uni.showToast({
      //     icon: 'error',
      //     title: '请选择审核人'
      //   })
      //   return
      // }
      const stockOutApplyDetailList = this.registerlist.filter(
        (i) => i.tableData.length
      );
      if (!stockOutApplyDetailList.length) {
        uni.showToast({
          icon: "error",
          title: "请添加申请备件",
        });
        return;
      }
      const params = {
        ...this.formData,
        sparePartsApplyDetailList: this.registerlist
          .filter((i) => i.tableData.length)
          .map((i) => i.tableData)
          .flat()
          .map((i) => {
            delete i.id;
            return {
              informationCode: i.assetCode,
              informationName: i.assetName,
              assetCode: i.onlyCode,
            };
          }),
        sourceCode: this.sourceCode,
        sourceId: this.sourceId,
        sourceType: 2,
      };
      params.expectedPerformanceTime = dayjs(
        params.expectedPerformanceTime
      ).format("YYYY-MM-DD HH:mm:ss");

      postJ(this.apiUrl + "/sparePartsApply/save", params).then((res) => {
        if (res?.success) {
          this.back();
        }
      });
    },
    addGoods() {
      if (!this.warehouseId) {
        uni.showToast({
          title: "请选择仓库！",
          icon: "none",
        });
        return;
      }
      const storageKey = Date.now() + "";
      uni.setStorageSync(storageKey, this.registerlist);
      uni.navigateTo({
        url:
          "/pages/warehouse/outHouse/selectOutType?warehousingType=7&warehousingName=备品备件" +
          "&storageKey=" +
          storageKey +
          "&warehouseId=" +
          this.warehouseId,
      });
    },
    handleDelete(item, row, index) {
      uni.showModal({
        title: `确定删除${row.onlyCode}？`,
        content: "",
        confirmText: "确认",
        success: function (res) {
          if (res.confirm) {
            item.tableData.splice(index, 1);

            item.selectNum = item.tableData.reduce((next, pre) => {
              next += pre.isUnpack ? 1 : pre.measurementUnit || 0;

              return next;
            }, 0);
          }
        },
      });
    },

    // 选择备品备件
    openPicker() {
      this.$refs.treePicker._show();
    },

    handleSelectionChange(val) {
      console.log("handleSelectionChangeval", val);
      this.selectIndex = val.detail.index;
    },
    //获取备品备件分类
    _getClassification() {
      postJ(this.apiUrl + "/classificationTree/list", [4]).then((res) => {
        if (res?.success) {
          this.listData = res.data;
        }
      });
    },
    // 查询计划备件明细
    _getPlanInfo() {
      postJ(this.apiUrl + "/sparePartsApply/getSparePartsApplyDetail", {
        planCode: this.planCode,
      }).then((res) => {
        if (res?.success) {
          this.registerlist = res.data.map((item) => {
            item.tableData = [];
            item.curId = item.informationCode;
            delete item.equipmentCode;
            return item;
          });
        }
      });
    },
    close() {
      this.selectIndex = [];
      // this.$refs.tableRef.clearSelection()
      this.popShow = false;
      this.chooseItem = {};
      this.currentRow = {};
    },
    // 确定选择的备品备件
    popConfirm() {
      const selectList = [
        ...this.memo,
        ...this.tableData.filter((item) =>
          this.selectList.includes(item.onlyCode)
        ),
      ];
      if (!selectList.length) {
        uni.showToast({
          icon: "none",
          title: "请选择需添加的备品备件",
        });
        return;
      }
      // this.registerlist.push(this.chooseItem)
      this.currentRow.tableData = selectList;

      let selectNum = 0;

      this.currentRow.tableData.forEach((item) => {
        selectNum += item.isUnpack ? 1 : item.measurementUnit || 0;
      });

      this.currentRow.selectNum = selectNum;
      this.collapseVal = this.currentRow.informationCode;

      console.log(this.collapseVal);
      this.close();
    },
    open(...args) {
      // this.getTableData()
    },
    //获取仓库
    getwarehouseList() {
      post(this.apiUrl + "/warehouseGoodsshelves/select/warehouseList").then(
        (res) => {
          if (res.success) {
            this.warehouseList = res.data
              .filter((i) => !i.isDelete && !!i.status)
              .map((n) => {
                return {
                  name: n.name,
                  id: n.id,
                };
              });
          }
        }
      );
    },
    warehosueConfirm() {
      const obj = this.warehouseList[this.warehouseInfo?.detail?.value] || {};
      this.warehosueName = obj.name;
      this.warehouseId = obj.id;
      this.registerlist = [];

      this.showConfirm = false;
    },
    warehosueCancel() {
      this.warehosueVal = this.warehouseList.findIndex(
        (i) => i.id === this.warehouseId
      );

      this.showConfirm = false;
    },
    bindPickerChange(val) {
      this.warehosueVal = val?.detail?.value;
      if (
        this.warehouseId &&
        (this.registerlist.length > 0 ||
          this.registerlist.some((i) => i.tableData.length))
      ) {
        this.warehouseInfo = val;
        this.showConfirm = true;
      } else {
        const obj = this.warehouseList[val?.detail?.value] || {};
        this.warehosueName = obj.name;
        this.warehouseId = obj.id;
        this.registerlist = [];
      }
    },
    getTableData() {
      const params = {
        assetCode: this.currentRow.informationCode,
        searchKey: this.searchKey,
        warehouseId: this.warehouseId,
      };
      this.memo.push(
        ...this.tableData.filter((item) =>
          this.selectList.includes(item.onlyCode)
        )
      );
      this.selectList = [];
      get(
        this.apiUrl + "/outInWarehouse/getWarehouseActualDetail",
        params
      ).then((res) => {
        if (res?.success) {
          this.tableData = res.data;
          this.$nextTick(() => {
            this.tableData.map((i, idx) => {
              const index = this.memo.findIndex(
                (itm) => i.onlyCode === itm.onlyCode
              );
              if (index > -1) {
                this.selectList.push(i.onlyCode);
                this.memo.splice(index, 1);
              }
            });
          });
        }
      });
    },
    // 备品备件行选中事件
    rowclick(item, index) {
      this.chooseIndex = index;
      this.selectIndex = [index];
      this.chooseItem = item;
    },
    openPlus(item) {
      if (!this.warehouseId) {
        uni.showToast({
          title: "请选择仓库！",
          icon: "none",
        });
        return;
      }
      this.selectList = [];
      this.memo = uni.$u.deepClone(item.tableData);
      this.currentRow = item;
      this.popShow = true;
      this.getTableData();
    },
    timeConfirm() {
      this.timeShow = false;
    },
    timeCancel() {
      this.timeShow = false;
    },
    resetEqui() {
      this.pickerDeptShow = true;
      this.$refs.pickerDeptName.show();
    },
    handleChange(e) {
      let data = e.detail.value[e.detail.value.length - 1];
      this.classificationId = data.value;
      page = 1;
      isEnd = true;
      uni.showLoading({
        title: "数据加载中",
      });
      this.getList();
    },
    getTreeList() {
      postJ(this.apiUrl + "/classificationTree/list", [4]).then((res) => {
        // console.log(res)
        if (res.success) {
          this.treeList = res.data;
          this.pickerDeptShow = true;
          this.$refs.pickerDeptName.show();
        }
      });
    },
    getFirstList: function () {
      page = 1;
      isEnd = true;
      uni.showLoading({
        title: "数据加载中",
      });
      this.getList();
    },
    getMoreLists: function () {
      //获取更多数据
      page++;
      this.getList();
    },
    //获取列表数据
    getList() {
      post(this.apiUrl + "/classificationSpareParts/classificationSpare/list", {
        page,
        size,
        code: "",
        classificationId: this.classificationId,
      })
        .then((res) => {
          // console.log(res)
          let data = res.data.records;
          let pageTotal = res.data.pages;
          if (page === 1) {
            data.forEach((el) => {
              el.num = 0;
            });
            this.list = data;
          } else {
            data.forEach((element) => {
              element.num = 0;
              this.list.push(element);
            });
          }
          page < pageTotal ? (isEnd = false) : (isEnd = true);
        })
        .then(() => {
          uni.hideLoading();
        });
    },
    submit(data) {
      let list = data;
      let pickData = list.filter((item) => {
        return item.checked && !item.disabled && item.num > 0;
      });

      if (pickData.length == 0) {
        uni.showToast({
          title: "请选择备品备件数量",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      this.$store.dispatch("maintenance/setSparepartIndex", this.index);
      this.$store.dispatch("maintenance/setSparepart", pickData);
      this.$store.dispatch("maintenance/setEquiIndex", this.equiIndex);
      this.back();
    },
  },
};
</script>

<style lang="scss" scoped>
.instance-list {
  background-color: #fff;
  font-size: 28rpx;
  .row {
    position: relative;
    padding: 10rpx 20rpx;

    & + .row {
      margin-top: 10rpx;
    }
    .uni-icons {
      position: absolute;
      top: 10rpx;
      right: 20rpx;
    }
  }
}
/deep/.uni-data-tree-input {
  display: none;
}
.no_data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  .center {
    text-align: center;
    color: #555;
    font-size: $uni-font-size-base;
  }
}
.footer {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  text-align: center;
  border-top: 1rpx solid #eeecec;
  background-color: #ffffff;

  .bottom {
    font-size: $uni-font-size-lg;
    margin-left: 20rpx;

    .select-all {
      color: $j-primary-green;
    }
  }

  .footer-span-btn {
    height: 30rpx;
    line-height: 30rpx;
    font-size: $uni-font-size-lg;
    color: #ffffff;
    margin-right: 20rpx;
    padding: 10rpx 20rpx;
    text-align: center;
    background-color: $j-primary-green;
    border-radius: 40rpx;
  }
}

.footer-right {
  justify-content: flex-end;
}
.sparepart-container {
  padding: 40rpx 20rpx;
  margin-bottom: 120rpx;
  .infos {
    border: 1rpx solid rgba(242, 242, 242, 1);
    padding: 0 20rpx;
    .col {
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      align-items: stretch;
      font-size: 28rpx;
      & + .col {
        margin-top: 4rpx;
      }
      .label {
        display: inline-block;
        width: 200rpx;
        padding-right: 20rpx;
        text-align: right;
        background-color: rgba(215, 215, 215, 1);
      }
      .content {
        flex: 1;
        background-color: rgba(242, 242, 242, 1);
        padding-left: 8rpx;
        border: 1rpx solid rgba(215, 215, 215, 1);
      }
    }
  }
  .detail-title {
    font-size: 34rpx;
    padding: 20rpx 0;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;

    .u-button {
      width: 180rpx;
      margin: 0;
    }
  }
  .detail-content {
    border: 1rpx solid rgba(242, 242, 242, 1);
    min-height: 50vh;
    padding-bottom: 100rpx;
    .col {
      font-size: 30rpx;
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);
      display: flex;
      padding: 10rpx;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(242, 242, 242, 0.372549019607843);
    }

    .plus {
      width: 40rpx;
      height: 40rpx;
      line-height: 38rpx;
      text-align: center;
      background-color: $j-primary-border-green;
      color: #fff;
      margin: 16rpx 0 0 16rpx;
    }
  }

  /deep/.u-number-box {
    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.6em !important;
    }
    .u-number-box__input {
      width: 2em !important;
    }
    .u-number-box__minus,
    .u-number-box__plus {
      background-color: $j-primary-border-green !important;

      .u-icon__icon {
        color: #fff !important;
      }
    }
  }
}

.select-container {
  // height:60vh;

  .title {
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background-color: $j-primary-border-green;
    font-weight: bold;
    position: relative;
    font-size: 28rpx;
    color: #fff;
    .btn-box {
      position: absolute;
      top: 50%;
      right: 10rpx;
      transform: translateY(-50%);
    }
    .btn {
      width: 60rpx;
      height: 32rpx;
      display: inline-block;
      font-size: 28rpx;
      border: 1px solid #fff;
      text-align: center;
      line-height: 30rpx;
    }
  }
  input {
    display: block;
    margin: 8rpx auto;
    width: 720rpx;
    height: 72rpx;
    border: 1rpx solid rgb(153, 153, 153);
    padding-left: 8rpx;
  }
  /deep/.uni-table {
    margin-top: 10rpx;
    // min-width: 100% !important;
    // max-width: 100%;
  }
  .uni-table-th-row {
    padding: 24rpx 0 !important;
  }
  .uni-table-td,
  .uni-table-th {
    font-size: 28rpx;
  }
  .uni-table-th {
    background-color: rgba(242, 242, 242, 1);
    padding: 24rpx 0 !important;
  }

  .table-wrapper {
    height: 75vh;
    overflow: auto;
    padding: 20rpx;
  }
}
.sparepart-footer {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  background: #fff;
  button {
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    &.primary {
      background-color: $j-primary-border-green;
      color: #fff;
    }
  }
}

.listContent {
  flex: 1;
  overflow: auto;
  padding-bottom: 125rpx;

  .self-table-tr {
    padding: 5rpx 0;
    border-bottom: 1rpx solid #ccc;
  }
}
.self-table-header {
  padding: 20rpx;
  border-bottom: 1rpx solid #ccc;
}
.self-table-tr,
.self-table-header {
  font-size: 28rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .table-date,
  .table-batch,
  .table-code {
    box-sizing: border-box;
    width: 27%;
    padding: 0 5rpx;
    word-break: break-all;
  }
  .table-code {
    width: 50%;
  }
  .table-date {
    width: 37%;
  }

  .other-info {
    color: #aaa;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    flex-wrap: wrap;

    > view {
      margin-bottom: 10rpx;
    }
  }

  .checked {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>