aiot-app/pages/pda/entrust/create/create.vue

<template>
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="新建请托"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <scroll-view scroll-y class="form-container">
      <!-- 基本信息 -->
      <view class="section">
        <view class="section-title">基本信息</view>

        <view class="form-item">
          <text class="label required">类型</text>
          <picker
            mode="selector"
            :range="typeList"
            range-key="label"
            @change="typeChange"
            class="picker-full"
          >
            <view class="picker-value">
              {{ form.typeName || "请选择类型" }}
            </view>
          </picker>
        </view>

        <view class="form-item">
          <text class="label required">紧急程度</text>
          <picker
            mode="selector"
            :range="priorityList"
            range-key="name"
            @change="priorityChange"
            class="picker-full"
          >
            <view class="picker-value">
              {{ form.priorityName || "请选择紧急程度" }}
            </view>
          </picker>
        </view>

        <view class="form-item">
          <text class="label required">名称</text>
          <input v-model="form.name" placeholder="请输入名称" class="input" />
        </view>

        <view class="form-item">
          <text class="label">请托部门</text>
          <input
            v-model="form.pleaseEntrustDeptName"
            disabled
            class="input disabled"
          />
        </view>

        <view class="form-item">
          <text class="label">请托人</text>
          <input
            v-model="form.pleaseEntrustUserName"
            disabled
            class="input disabled"
          />
        </view>

        <view class="form-item">
          <text class="label">所属工厂</text>
          <input v-model="form.factoriesName" disabled class="input disabled" />
        </view>

        <view class="form-item">
          <text class="label">受托工厂</text>
          <picker
            mode="selector"
            :range="factoryList"
            range-key="name"
            @change="factoryChange"
            class="picker-full"
          >
            <view class="picker-value">
              {{ form.beEntrustedFactoriesName || "请选择受托工厂" }}
            </view>
          </picker>
        </view>

        <view class="form-item">
          <text class="label required">受托部门</text>
          <view class="picker-full" @click="openDeptPopup">
            <view class="picker-value">
              {{ form.beEntrustedDeptName || "请选择受托部门" }}
            </view>
          </view>
        </view>

        <view class="form-item">
          <text class="label">执行人</text>
          <picker
            mode="selector"
            :range="userList"
            range-key="name"
            @change="userChange"
            class="picker-full"
          >
            <view class="picker-value">
              {{ form.executeUserName || "请选择执行人" }}
            </view>
          </picker>
        </view>

        <view class="form-item">
          <text class="label required">是否尾工序</text>
          <radio-group @change="isLastChange">
            <label class="radio-item">
              <radio value="1" :checked="form.isLast == 1" />是
            </label>
            <label class="radio-item">
              <radio value="0" :checked="form.isLast == 0" />否
            </label>
          </radio-group>
        </view>
      </view>

      <!-- 产品信息 -->
      <view class="section">
        <view class="section-title">产品信息</view>

        <view class="btn-group">
          <button class="btn-primary" size="mini" @click="addOrder">
            新建
          </button>
          <button class="btn-danger" size="mini" @click="removeOrder">
            删除
          </button>
          <button class="btn-select" size="mini" @click="selectAll">
            全选
          </button>
          <button class="btn-deselect" size="mini" @click="deselectAll">
            取消
          </button>
        </view>

        <view v-if="orderList.length > 0" class="order-list">
          <view
            v-for="(item, index) in orderList"
            :key="index"
            class="order-item"
            :class="{ active: selectedOrders.includes(index) }"
          >
            <view class="order-header">
              <checkbox
                :checked="selectedOrders.includes(index)"
                @click.stop="toggleSelect(index)"
                class="order-checkbox"
              />
              <text class="order-name">{{ item.categoryName }}</text>
              <text class="order-code">{{ item.workOrderCode }}</text>
            </view>

            <view class="order-row">
              <text class="label">计划编号:</text>
              <text class="value">{{ item.productionPlanCode }}</text>
            </view>

            <view class="order-row">
              <text class="label">牌号:</text>
              <text class="value">{{ item.brandNum }}</text>
            </view>

            <view class="order-row">
              <text class="label">批次号:</text>
              <text class="value">{{ item.batchNo }}</text>
            </view>

            <view class="order-row">
              <text class="label required">请托数量:</text>
              <input
                v-model="item.totalCount"
                type="digit"
                placeholder="请输入数量"
                class="order-input"
              />
              <text class="unit">{{ item.measuringUnit }}</text>
            </view>

            <view class="order-row">
              <text class="label">需求描述:</text>
              <textarea
                v-model="item.describes"
                placeholder="请输入需求描述"
                class="order-textarea"
                auto-height
              />
            </view>

            <view class="order-row">
              <text class="label required">工序:</text>
              <picker
                mode="selector"
                :range="item.taskList || []"
                range-key="name"
                @change="(e) => taskChange(e, index)"
                class="order-picker"
              >
                <view class="picker-value">
                  {{ item.taskName || "请选择工序" }}
                </view>
              </picker>
            </view>

            <view class="order-row">
              <text class="label required">完成日期:</text>
              <uni-datetime-picker
                type="datetime"
                v-model="item.planDeliveryTime"
                @change="(e) => dateChange(e, index)"
                class="order-picker"
              >
              </uni-datetime-picker>
            </view>
          </view>
        </view>

        <view v-else class="empty-order">
          <text>暂无产品信息，请点击新建添加</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部按钮 -->
    <view class="footer-btns">
      <view class="btn-cancel" @click="handleCancel">取消</view>
      <view class="btn-save" @click="handleSave(1)">保存</view>
      <view v-if="type === 'add'" class="btn-submit" @click="handleSave(2)"
        >提交</view
      >
    </view>

    <!-- 部门树形选择器 -->
    <uni-popup ref="deptPopup" type="bottom" :safe-area="false">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择受托部门</text>
          <text class="popup-close" @click="$refs.deptPopup.close()">关闭</text>
        </view>
        <scroll-view scroll-y class="dept-tree">
          <view
            v-for="dept in flatDeptList"
            :key="dept.id"
            v-show="dept.visible"
            class="dept-item"
            :style="{ paddingLeft: dept.level * 40 + 'rpx' }"
          >
            <text
              v-if="dept.hasChildren"
              class="dept-arrow"
              @click.stop="toggleDept(dept)"
              >{{ dept.expanded ? "▼" : "▶" }}</text
            >
            <text v-else class="dept-arrow-placeholder"></text>
            <text @click="selectDept(dept)">{{ dept.name }}</text>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import {
  save,
  addSubmit,
  pleaseEntrustDetail,
  update,
  getProduceTaskList,
} from "@/api/entrust/index";
import { getUserPage, listOrganizations, getDictByCode } from "@/api/common";
import { getFactoryarea } from "@/api/inspectionWork/index";

export default {
  data() {
    return {
      type: "add",
      form: {
        type: "",
        typeName: "",
        priority: "",
        priorityName: "",
        name: "",
        pleaseEntrustDeptName: "",
        pleaseEntrustDeptId: "",
        pleaseEntrustUserName: "",
        pleaseEntrustUserId: "",
        factoriesName: "",
        factoriesId: "",
        beEntrustedFactoriesId: "",
        beEntrustedFactoriesName: "",
        beEntrustedDeptId: "",
        beEntrustedDeptName: "",
        executeUserId: "",
        executeUserName: "",
        isLast: 0,
      },
      typeList: [],
      priorityList: [
        { name: "一般", value: 1 },
        { name: "紧急", value: 2 },
      ],
      factoryList: [],
      deptList: [],
      flatDeptList: [],
      userList: [],
      orderList: [],
      selectedOrders: [],
      selectedOrder: [],
    };
  },

  onShow() {
    if (this.selectedOrder && this.selectedOrder.length > 0) {
      this.receiveOrder(this.selectedOrder);
      this.selectedOrder = [];
    }
  },

  async onLoad(options) {
    this.type = options.type || "add";
    // 获取工厂列表
    await this.getFactoryList();
    this.initData();

    if (options.id) {
      this.getDetail(options.id);
    }
  },

  methods: {
    initData() {
      // 初始化用户信息
      const userInfo = uni.getStorageSync("userInfo");
      if (userInfo) {
        this.form.pleaseEntrustDeptName = userInfo.groupName;
        this.form.pleaseEntrustDeptId = userInfo.groupId;
        this.form.pleaseEntrustUserName = userInfo.name;
        this.form.pleaseEntrustUserId = userInfo.userId;
        const data = this.factoryList.filter(
          (it) => it.factoryId == userInfo.factoryId,
        );

        if (data.length != 0) {
          this.form.factoriesId = data[0].factoryId;
          this.form.factoriesName = data[0].factoryName;
        }
      }

      // 获取类型列表
      this.getTypeList();
    },

    async getTypeList() {
      try {
        const res = await getDictByCode("entrust_type");
        if (res?.length != 0) {
          let list = res.map((item) => {
            let key = Object.keys(item)[0];
            return { value: Number(key), label: item[key] };
          });
          this.typeList = list;
        }
      } catch (error) {
        console.error("获取类型列表失败", error);
      }
    },

    async getFactoryList() {
      try {
        const res = await getFactoryarea({
          pageNum: 1,
          size: 999,
          type: 1,
        });
        this.factoryList = res.list || [];
      } catch (error) {
        console.error("获取工厂列表失败", error);
      }
    },

    async getDeptList(factoryId) {
      try {
        const res = await listOrganizations();
        this.deptList = res || [];
        this.flatDeptList = this.buildFlatDeptList(this.deptList);
      } catch (error) {
        console.error("获取部门列表失败", error);
      }
    },

    buildFlatDeptList(list) {
      const map = {};
      const roots = [];

      list.forEach((item) => {
        map[item.id] = {
          ...item,
          children: [],
          expanded: false,
          visible: true,
          level: 0,
          hasChildren: false,
        };
      });

      list.forEach((item) => {
        const node = map[item.id];
        if (item.parentId === "0" || !map[item.parentId]) {
          roots.push(node);
        } else {
          map[item.parentId].children.push(node);
          map[item.parentId].hasChildren = true;
        }
      });

      const result = [];
      const traverse = (nodes, level) => {
        nodes.forEach((node) => {
          node.level = level;
          result.push(node);
          if (node.children.length > 0) {
            node.children.forEach((child) => (child.visible = false));
            traverse(node.children, level + 1);
          }
        });
      };

      traverse(roots, 0);
      return result;
    },

    toggleDept(dept) {
      dept.expanded = !dept.expanded;
      const index = this.flatDeptList.findIndex((d) => d.id === dept.id);
      if (index !== -1) {
        this.updateChildrenVisibility(dept, index + 1);
      }
    },

    updateChildrenVisibility(parent, startIndex) {
      const parentLevel = parent.level;
      for (let i = startIndex; i < this.flatDeptList.length; i++) {
        const item = this.flatDeptList[i];
        if (item.level <= parentLevel) break;
        if (item.level === parentLevel + 1) {
          item.visible = parent.expanded;
          if (!parent.expanded) item.expanded = false;
        }
        if (item.level > parentLevel + 1) {
          item.visible = false;
          item.expanded = false;
        }
      }
      this.$forceUpdate();
    },

    selectDept(dept) {
      this.form.beEntrustedDeptId = dept.id;
      this.form.beEntrustedDeptName = dept.name;
      this.form.executeUserId = "";
      this.form.executeUserName = "";
      this.getUserList(dept.id);
      this.$refs.deptPopup.close();
    },

    async getUserList(deptId) {
      try {
        const res = await getUserPage({
          pageNum: 1,
          size: -1,
          groupId: deptId,
        });
        this.userList = res.list || [];
      } catch (error) {
        console.error("获取用户列表失败", error);
      }
    },

    async getDetail(id) {
      try {
        const res = await pleaseEntrustDetail(id);
        const data = res;

        this.form = {
          ...this.form,
          pleaseEntrustDeptName: data.applyDeptName,
          pleaseEntrustDeptId: data.applyDeptId,
          pleaseEntrustUserName: data.createUserName,
          pleaseEntrustUserId: data.createUserId,
          factoriesId: data.applyFactoriesId,
          factoriesName: data.applyFactoriesName,
          beEntrustedDeptId: data.beEntrustedDeptId,
          beEntrustedDeptName: data.beEntrustedDeptName,
          beEntrustedFactoriesName: data.beEntrustedFactoriesName,
          beEntrustedFactoriesId: data.beEntrustedFactoriesId,
          executeUserId: data.executeUserId,
          executeUserName: data.executeUserName,
          name: data.name,
          type: data.type,
          typeName:
            (this.typeList.find((t) => t.value == data.type) || {}).label || "",
          priority: data.priority,
          priorityName:
            (this.priorityList.find((p) => p.value == data.priority) || {})
              .name || "",
          id: data.id,
        };

        if (data.beEntrustedFactoriesId) {
          this.getDeptList(data.beEntrustedFactoriesId);
        }

        if (data.beEntrustedDeptId) {
          this.getUserList(data.beEntrustedDeptId);
        }

        this.orderList = [{ ...data, taskList: [] }];
        await this.getOrderTaskList();
      } catch (error) {
        uni.showToast({
          title: "加载失败",
          icon: "none",
        });
      }
    },

    typeChange(e) {
      const index = e.detail.value;
      this.form.type = this.typeList[index].value;
      this.form.typeName = this.typeList[index].label;
    },

    priorityChange(e) {
      const index = e.detail.value;
      this.form.priority = this.priorityList[index].value;
      this.form.priorityName = this.priorityList[index].name;
    },

    factoryChange(e) {
      const index = e.detail.value;
      this.form.beEntrustedFactoriesId = this.factoryList[index].id;
      this.form.beEntrustedFactoriesName = this.factoryList[index].name;
      this.form.beEntrustedDeptId = "";
      this.form.beEntrustedDeptName = "";
      this.form.executeUserId = "";
      this.form.executeUserName = "";
      this.userList = [];
      this.getDeptList(this.factoryList[index].id);
    },

    openDeptPopup() {
      if (!this.form.beEntrustedFactoriesId) {
        uni.showToast({ title: "请先选择受托工厂", icon: "none" });
        return;
      }
      this.$refs.deptPopup.open();
    },

    deptChange(e) {
      const index = e.detail.value;
      this.form.beEntrustedDeptId = this.deptList[index].id;
      this.form.beEntrustedDeptName = this.deptList[index].name;
      this.getUserList(this.deptList[index].id);
    },

    userChange(e) {
      const index = e.detail.value;
      this.form.executeUserId = this.userList[index].id;
      this.form.executeUserName = this.userList[index].name;
    },

    isLastChange(e) {
      this.form.isLast = Number(e.detail.value);
    },

    addOrder() {
      const selectedIds = this.orderList
        .map((item) => item.workOrderId || item.id)
        .join(",");
      uni.navigateTo({
        url: `/pages/pda/entrust/selectOrder/selectOrder?selectedIds=${selectedIds}`,
      });
    },

    receiveOrder(list) {
      if (!list || list.length === 0) {
        this.orderList = [];
        return;
      }

      const getKey = (item) => item.id;
      const newKeys = new Set(list.map(getKey));
      const oldKeys = new Set(this.orderList.map(getKey));

      const keptOldList = this.orderList.filter((old) =>
        newKeys.has(getKey(old)),
      );
      const addedItems = list.filter((item) => !oldKeys.has(getKey(item)));

      const newList = addedItems.map((item) => ({
        ...item,
        describes: "",
        totalCount: item.formingNum,
        taskList: [],
        measuringUnit: item.unit,
        categoryName: item.productName,
        categoryCode: item.productCode,
        workOrderId: item.id,
        workOrderCode: item.code,
        brandNum: item.brandNo,
        modelType: item.model,
        planDeliveryTime: item.startTime,
        applyDeptId: this.form.pleaseEntrustDeptId,
        applyDeptName: this.form.pleaseEntrustDeptName,
        applyFactoriesId: this.form.factoriesId,
        applyFactoriesName: this.form.factoriesName,
      }));

      this.orderList = [...keptOldList, ...newList];
      this.getOrderTaskList();
    },

    removeOrder() {
      if (this.selectedOrders.length === 0) {
        uni.showToast({
          title: "请选择要删除的产品",
          icon: "none",
        });
        return;
      }

      uni.showModal({
        title: "提示",
        content: `确定要删除选中的${this.selectedOrders.length}个产品吗？`,
        success: (res) => {
          if (res.confirm) {
            this.orderList = this.orderList.filter(
              (_, index) => !this.selectedOrders.includes(index),
            );
            this.selectedOrders = [];
          }
        },
      });
    },

    toggleSelect(index) {
      const idx = this.selectedOrders.indexOf(index);
      if (idx > -1) {
        this.selectedOrders.splice(idx, 1);
      } else {
        this.selectedOrders.push(index);
      }
    },

    selectAll() {
      this.selectedOrders = this.orderList.map((_, index) => index);
    },

    deselectAll() {
      this.selectedOrders = [];
    },

    taskChange(e, index) {
      const taskIndex = e.detail.value;
      const task = this.orderList[index].taskList[taskIndex];
      this.orderList[index].taskId = task.id;
      this.orderList[index].taskName = task.name;
    },

    dateChange(e, index) {
      this.orderList[index].planDeliveryTime = e;
    },

    async getOrderTaskList() {
      for (const item of this.orderList) {
        try {
          const res = await getProduceTaskList({
            isDetail: true,
            pageNum: 1,
            routingId: item.produceRoutingId,
            size: -1,
          });

          let list = res.list || [];
          if (list.length) {
            list = list.filter((it) => it.taskId != -2);
            const arr = list.findIndex((it) => it.id == item.taskId);
            if (arr != -1) {
              list.splice(0, arr);
            }
            item.taskList = list;
          }
        } catch (error) {
          console.error("获取工序列表失败", error);
        }
      }
    },

    validate() {
      if (!this.form.type) {
        uni.showToast({ title: "请选择类型", icon: "none" });
        return false;
      }
      if (!this.form.name) {
        uni.showToast({ title: "请输入名称", icon: "none" });
        return false;
      }
      if (!this.form.beEntrustedDeptId) {
        uni.showToast({ title: "请选择受托部门", icon: "none" });
        return false;
      }
      if (this.orderList.length === 0) {
        uni.showToast({ title: "请添加产品信息", icon: "none" });
        return false;
      }

      for (const item of this.orderList) {
        if (!item.totalCount) {
          uni.showToast({ title: "请托数量不能为空", icon: "none" });
          return false;
        }
        if (!item.taskId) {
          uni.showToast({ title: "工序不能为空", icon: "none" });
          return false;
        }
        if (!item.planDeliveryTime) {
          uni.showToast({ title: "完成日期不能为空", icon: "none" });
          return false;
        }
      }

      return true;
    },

    async handleSave(saveType) {
      if (!this.validate()) return;

      const user = this.userList.find((it) => it.id == this.form.executeUserId);
      const status = saveType == 1 ? 0 : 1;

      this.orderList.forEach((item) => {
        item.beEntrustedFactoriesId = this.form.beEntrustedFactoriesId;
        item.beEntrustedFactoriesName = this.form.beEntrustedFactoriesName;
        item.beEntrustedDeptName = this.form.beEntrustedDeptName;
        item.beEntrustedDeptId = this.form.beEntrustedDeptId;
        item.executeUserId = user?.id || "";
        item.executeUserName = user?.name || "";
        item.isLast = this.form.isLast;
        item.name = this.form.name;
        item.type = this.form.type;
        item.status = status;
        item.approvalStatus = saveType == 1 ? 0 : 1;
      });

      let apiFunc;
      if (saveType === 1) {
        apiFunc = this.type === "edit" ? update : save;
      } else {
        apiFunc = addSubmit;
      }

      if (this.type === "add") {
        this.orderList.forEach((it) => (it.id = ""));
      }

      uni.showLoading({ title: "保存中..." });

      try {
        await apiFunc(this.orderList);
        uni.hideLoading();
        uni.showToast({
          title: "保存成功",
          icon: "success",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        uni.hideLoading();
        uni.showToast({
          title: "保存失败",
          icon: "none",
        });
      }
    },

    handleCancel() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: $page-bg;
}

.form-container {
  flex: 1;
  padding: 20rpx;
  padding-bottom: 140rpx;
  background-color: #f5f5f5;
}

.section {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 20rpx;

  .section-title {
    font-size: 28rpx;
    font-weight: normal;
    color: #999;
    margin-bottom: 16rpx;
    padding: 0 24rpx;
  }
}

.form-item {
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;

  &:first-child {
    border-radius: 12rpx 12rpx 0 0;
  }

  &:last-child {
    border-bottom: none;
    border-radius: 0 0 12rpx 12rpx;
  }

  .label {
    width: 180rpx;
    font-size: 30rpx;
    color: #333;
    flex-shrink: 0;

    &.required::before {
      content: "*";
      color: #ff4d4f;
      margin-right: 4rpx;
    }
  }

  .input {
    flex: 1;
    font-size: 30rpx;
    color: #333;
    text-align: right;

    &.disabled {
      color: #999;
    }
  }

  .picker-value {
    flex: 1;
    font-size: 30rpx;
    color: #333;
    text-align: right;
  }

  .picker-full {
    flex: 1;
    text-align: right;
  }

  .radio-item {
    margin-left: 40rpx;
    font-size: 28rpx;
  }
}

.btn-group {
  display: flex;
  justify-content: flex-end !important;
  gap: 20rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 12rpx;

  button {
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    border-radius: 30rpx;
    padding: 0 32rpx;
  }

  .btn-primary {
    background-color: #1890ff;
    color: #fff;
  }

  .btn-danger {
    background-color: #ff4d4f;
    color: #fff;
  }

  .btn-select {
    background-color: #52c41a;
    color: #fff;
  }

  .btn-deselect {
    background-color: #faad14;
    color: #fff;
  }
}

.order-list {
  // padding: 0 24rpx;

  .order-item {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    border: 2rpx solid #e0e0e0;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);

    &.active {
      border-color: #1890ff;
      background-color: #f0f7ff;
    }

    .order-header {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 20rpx;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .order-checkbox {
        transform: scale(1.2);
        flex-shrink: 0;
      }

      .order-name {
        flex: 1;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .order-code {
        font-size: 26rpx;
        color: #999;
        flex-shrink: 0;
      }
    }

    .order-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 20rpx;
      font-size: 28rpx;

      .label {
        min-width: 160rpx;
        padding-top: 20rpx;
        color: #666;
        flex-shrink: 0;

        &.required::before {
          content: "*";
          color: #ff4d4f;
          margin-right: 4rpx;
        }
      }

      .value {
        flex: 1;
        padding-top: 20rpx;
        color: #333;
        word-break: break-all;
      }

      .order-input {
        flex: 1;
        padding: 20rpx 16rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        font-size: 28rpx;
        min-height: 80rpx;
        background-color: #fff;
      }

      .order-textarea {
        flex: 1;
        padding: 20rpx 16rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        font-size: 28rpx;
        min-height: 100rpx;
        line-height: 1.6;
        background-color: #fff;
      }

      .order-picker {
        flex: 1;
      }

      .unit {
        margin-left: 12rpx;
        padding-top: 20rpx;
        color: #999;
        flex-shrink: 0;
      }

      .picker-value {
        flex: 1;
        padding: 20rpx 16rpx;
        border: 1rpx solid #e0e0e0;
        border-radius: 8rpx;
        font-size: 28rpx;
        min-height: 80rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        color: #333;
      }
    }
  }
}

.empty-order {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80rpx 0;
  font-size: 28rpx;
  color: #999;
  background-color: #fff;
  border-radius: 12rpx;
  // margin: 0 24rpx;
}

.footer-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx 32rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.08);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;

  .btn-cancel,
  .btn-save,
  .btn-submit {
    flex: 1;
    min-width: 0;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    border-radius: 44rpx;
    text-align: center;
    box-sizing: border-box;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
  }

  .btn-cancel {
    background-color: #fff;
    color: #666;
    border: 1rpx solid #e0e0e0;
  }

  .btn-save {
    background-color: $theme-color;
    color: #fff;
  }

  .btn-submit {
    background-color: $theme-color;
    color: #fff;
  }
}

.popup-content {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  z-index: 999;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }

    .popup-close {
      font-size: 28rpx;
      color: $theme-color;
    }
  }

  .dept-tree {
    flex: 1;
    padding: 24rpx;

    .dept-item {
      display: flex;
      align-items: center;
      padding: 24rpx;
      border-bottom: 1rpx solid #f0f0f0;
      font-size: 30rpx;
      color: #333;

      &:active {
        background-color: #f5f5f5;
      }

      .dept-arrow {
        width: 40rpx;
        margin-right: 12rpx;
        color: #999;
        font-size: 24rpx;
      }

      .dept-arrow-placeholder {
        width: 40rpx;
        margin-right: 12rpx;
      }
    }
  }
}
</style>