初始化移动端提交
This commit is contained in:
chenbowen
233
sheep/components/company-dept-dialog/company-dept-dialog.vue
Normal file
233
sheep/components/company-dept-dialog/company-dept-dialog.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user