zgty-mas-m/sheep/components/company-dept-dialog/company-dept-dialog.vue

<template>
  <view v-if="dialogStore.show" class="company-dept-dialog">
    <view class="company-dept-dialog__mask" @tap="handleCancel" />
    <view class="company-dept-dialog__panel">
      <view class="company-dept-dialog__header">
        <text class="company-dept-dialog__title">{{ dialogStore.title }}</text>
      </view>
      <view class="company-dept-dialog__body">
        <view class="company-dept-dialog__field">
          <text class="company-dept-dialog__label">公司</text>
          <picker
            mode="selector"
            :range="companyOptions"
            range-key="companyName"
            :value="companyIndex"
            @change="onCompanyChange"
          >
            <view class="company-dept-dialog__picker">
              <text class="company-dept-dialog__picker-text">
                {{ currentCompanyName }}
              </text>
              <text class="company-dept-dialog__arrow">▼</text>
            </view>
          </picker>
        </view>
        <view class="company-dept-dialog__field">
          <text class="company-dept-dialog__label">部门</text>
          <picker
            mode="selector"
            :range="deptOptions"
            range-key="deptName"
            :value="deptIndex"
            @change="onDeptChange"
          >
            <view class="company-dept-dialog__picker">
              <text class="company-dept-dialog__picker-text">
                {{ currentDeptName }}
              </text>
              <text class="company-dept-dialog__arrow">▼</text>
            </view>
          </picker>
        </view>
      </view>
      <view class="company-dept-dialog__footer">
        <button class="company-dept-dialog__btn company-dept-dialog__btn--cancel" @tap="handleCancel">
          取消
        </button>
        <button
          class="company-dept-dialog__btn company-dept-dialog__btn--confirm"
          :class="{ 'company-dept-dialog__btn--disabled': !isConfirmEnabled }"
          :disabled="!isConfirmEnabled"
          @tap="handleConfirm"
        >
          确定
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import sheep from '@/sheep';

const dialogStore = sheep.$store('company-dept');

const companyOptions = computed(() => dialogStore.companyList || []);
const deptOptions = computed(() => dialogStore.getDeptsByCompanyId(dialogStore.selectedCompanyId));

const companyIndex = computed(() => {
  const index = companyOptions.value.findIndex((item) => item.companyId === dialogStore.selectedCompanyId);
  return index >= 0 ? index : 0;
});

const deptIndex = computed(() => {
  const index = deptOptions.value.findIndex((item) => item.deptId === dialogStore.selectedDeptId);
  return index >= 0 ? index : 0;
});

const currentCompanyName = computed(() => {
  if (!companyOptions.value.length) return '暂无公司可选';
  const company = companyOptions.value.find((item) => item.companyId === dialogStore.selectedCompanyId);
  return company?.companyName || '请选择公司';
});

const currentDeptName = computed(() => {
  if (!deptOptions.value.length) return '暂无部门可选';
  const dept = deptOptions.value.find((item) => item.deptId === dialogStore.selectedDeptId);
  return dept?.deptName || '请选择部门';
});

const isConfirmEnabled = computed(() => !!dialogStore.selectedCompanyId && !!dialogStore.selectedDeptId);

const onCompanyChange = (event) => {
  const index = event?.detail?.value;
  if (index === undefined) return;
  const company = companyOptions.value[index];
  if (company) {
    dialogStore.setSelectedCompany(company.companyId);
  }
};

const onDeptChange = (event) => {
  const index = event?.detail?.value;
  if (index === undefined) return;
  const dept = deptOptions.value[index];
  if (dept) {
    dialogStore.setSelectedDept(dept.deptId);
  }
};

const handleCancel = () => {
  dialogStore.cancel();
};

const handleConfirm = () => {
  if (!isConfirmEnabled.value) return;
  dialogStore.confirm();
};
</script>

<style scoped lang="scss">
.company-dept-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;

  &__mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
  }

  &__panel {
    position: relative;
    width: 620rpx;
    background: #ffffff;
    border-radius: 24rpx;
    padding: 48rpx 40rpx 32rpx;
    box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.18);
  }

  &__header {
    margin-bottom: 40rpx;
  }

  &__title {
    display: block;
    font-size: 32rpx;
    font-weight: 600;
    color: #1f1f1f;
    text-align: center;
    line-height: 1.4;
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
  }

  &__field {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }

  &__label {
    font-size: 28rpx;
    color: #606266;
  }

  &__picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 28rpx;
    border-radius: 16rpx;
    background: #f7f8fa;
    border: 1rpx solid #e4e7ed;
  }

  &__picker-text {
    font-size: 28rpx;
    color: #303133;
  }

  &__arrow {
    font-size: 24rpx;
    color: #909399;
  }

  &__footer {
    display: flex;
    justify-content: space-between;
    gap: 24rpx;
    margin-top: 48rpx;
  }

  &__btn {
    flex: 1;
    height: 88rpx;
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: 500;
  }

  &__btn--cancel {
    color: #606266;
    background: #f5f7fa;
    border: 1rpx solid transparent;
  }

  &__btn--confirm {
    color: #ffffff;
    background: linear-gradient(90deg, #2f6bff 0%, #3c8bff 100%);
    border: 1rpx solid transparent;
  }

  &__btn--disabled {
    opacity: 0.5;
  }
}
</style>