|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view class="check-task-status-box">
|
|
|
- <text class="title" :style="textStyle">任务状态:</text>
|
|
|
- <view class="status-input" @click="showMultiPicker">
|
|
|
+ <text class="title" :style="textStyle">{{ title }}</text>
|
|
|
+ <view class="status-input" @click="openPopup">
|
|
|
<view class="status-tags">
|
|
|
<view v-if="selectedItems.length === 0" class="placeholder-tag">
|
|
|
<text class="placeholder-text">请选择</text>
|
|
|
@@ -11,7 +11,7 @@
|
|
|
<text class="tag-text">{{ selectedItems[0] }}</text>
|
|
|
</view>
|
|
|
<view class="count-tag">
|
|
|
- <text class="count-text">{{ selectedItems.length - 1 }}</text>
|
|
|
+ <text class="count-text">+{{ selectedItems.length - 1 }}</text>
|
|
|
</view>
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
@@ -20,42 +20,44 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
</view>
|
|
|
- <image class="arrow-icon" :src="iconMap.ArrowDown" />
|
|
|
</view>
|
|
|
|
|
|
- <!-- 多选弹窗 -->
|
|
|
- <view v-if="showPopup" class="popup-mask" @click="closePopup">
|
|
|
- <view class="popup-content" @click.stop>
|
|
|
- <view class="popup-header">
|
|
|
- <text class="popup-title">选择任务状态</text>
|
|
|
- </view>
|
|
|
- <view class="popup-options">
|
|
|
- <view
|
|
|
- v-for="item in itemList"
|
|
|
- :key="item.value"
|
|
|
- class="option-item"
|
|
|
- :class="{ selected: selectedCodes.includes(item.value) }"
|
|
|
- @click="toggleOption(item)"
|
|
|
- >
|
|
|
- <view class="checkbox" :class="{ checked: selectedCodes.includes(item.value) }"></view>
|
|
|
- <text class="option-label">{{ item.label }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="popup-footer">
|
|
|
- <button class="cancel-btn" @click="closePopup">取消</button>
|
|
|
- <button class="confirm-btn" @click="confirmSelection">确定</button>
|
|
|
+ <wd-popup
|
|
|
+ v-model="popupVisible"
|
|
|
+ position="bottom"
|
|
|
+ :safe-area-inset-bottom="true"
|
|
|
+ closable
|
|
|
+ custom-style="border-radius: 10px 10px 0 0;"
|
|
|
+ >
|
|
|
+ <view class="popup-header">
|
|
|
+ <text class="popup-title">选择{{ title.replace(':', '') }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="popup-options">
|
|
|
+ <view
|
|
|
+ v-for="item in itemList"
|
|
|
+ :key="item.value"
|
|
|
+ class="option-item"
|
|
|
+ :class="{ selected: tempSelectedCodes.includes(item.value) }"
|
|
|
+ @click="toggleOption(item)"
|
|
|
+ >
|
|
|
+ <view class="checkbox" :class="{ checked: tempSelectedCodes.includes(item.value) }"></view>
|
|
|
+ <text class="option-label">{{ item.label }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ <view class="popup-footer">
|
|
|
+ <button class="cancel-btn" @click="cancelSelection">取消</button>
|
|
|
+ <button class="confirm-btn" @click="confirmSelection">确定</button>
|
|
|
+ </view>
|
|
|
+ </wd-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { ref, computed } from 'vue'
|
|
|
-import iconMap from '@/utils/imagesMap'
|
|
|
import { PressureCheckerMyTaskStatus } from '@/utils/dictMap'
|
|
|
|
|
|
interface Props {
|
|
|
+ title: string
|
|
|
type: string
|
|
|
defaultValue?: Array<string | number>
|
|
|
textStyle?: any
|
|
|
@@ -69,68 +71,68 @@ const emit = defineEmits<{
|
|
|
change: [selectedCodes: Array<string | number>, type: string]
|
|
|
}>()
|
|
|
|
|
|
-const showPopup = ref(false)
|
|
|
-const selectedCodes = ref<Array<string | number>>(props.defaultValue || [])
|
|
|
+const popupVisible = ref(false)
|
|
|
+const selectedCodes = ref<Array<string | number>>([...props.defaultValue])
|
|
|
const selectedItems = ref<string[]>([])
|
|
|
+const tempSelectedCodes = ref<Array<string | number>>([])
|
|
|
|
|
|
const itemList = [
|
|
|
+ { label: '待认领', value: PressureCheckerMyTaskStatus.WAIT_CONFIRM },
|
|
|
{ label: '作废', value: PressureCheckerMyTaskStatus.CANCELLATION },
|
|
|
{ label: '待录入', value: PressureCheckerMyTaskStatus.CONFIRMED },
|
|
|
{ label: '记录录入', value: PressureCheckerMyTaskStatus.RECORD_INPUT },
|
|
|
{ label: '记录校核', value: PressureCheckerMyTaskStatus.RECORD_CHECK },
|
|
|
{ label: '报告编制', value: PressureCheckerMyTaskStatus.REPORT_INPUT },
|
|
|
+ { label: '报告审核', value: PressureCheckerMyTaskStatus.REPORT_AUDIT },
|
|
|
+ { label: '报告审批', value: PressureCheckerMyTaskStatus.REPORT_APPROVE },
|
|
|
+ { label: '报告报告办结', value: PressureCheckerMyTaskStatus.REPORT_END },
|
|
|
]
|
|
|
|
|
|
-// 初始化选中项
|
|
|
if (props.defaultValue && props.defaultValue.length > 0) {
|
|
|
selectedItems.value = itemList
|
|
|
.filter((item) => props.defaultValue?.includes(item.value))
|
|
|
.map((item) => item.label)
|
|
|
}
|
|
|
|
|
|
-// 判断是否超出宽度(选中1个显示tag,2个及以上显示第一个tag+剩余数量)
|
|
|
const isOverflow = computed(() => {
|
|
|
return selectedItems.value.length > 1
|
|
|
})
|
|
|
|
|
|
-// 暴露方法
|
|
|
defineExpose({
|
|
|
reset: () => {
|
|
|
- selectedCodes.value = props.defaultValue || []
|
|
|
+ selectedCodes.value = [...props.defaultValue]
|
|
|
selectedItems.value = itemList
|
|
|
.filter((item) => props.defaultValue?.includes(item.value))
|
|
|
.map((item) => item.label)
|
|
|
},
|
|
|
- inputContent: selectedCodes.value,
|
|
|
+ inputContent: computed(() => selectedCodes.value),
|
|
|
})
|
|
|
|
|
|
-// 显示弹窗
|
|
|
-const showMultiPicker = () => {
|
|
|
- showPopup.value = true
|
|
|
-}
|
|
|
-
|
|
|
-// 关闭弹窗
|
|
|
-const closePopup = () => {
|
|
|
- showPopup.value = false
|
|
|
+const openPopup = () => {
|
|
|
+ tempSelectedCodes.value = [...selectedCodes.value]
|
|
|
+ popupVisible.value = true
|
|
|
}
|
|
|
|
|
|
-// 切换选项
|
|
|
const toggleOption = (item: { label: string; value: number }) => {
|
|
|
- const index = selectedCodes.value.indexOf(item.value)
|
|
|
+ const index = tempSelectedCodes.value.indexOf(item.value)
|
|
|
if (index > -1) {
|
|
|
- selectedCodes.value.splice(index, 1)
|
|
|
+ tempSelectedCodes.value.splice(index, 1)
|
|
|
} else {
|
|
|
- selectedCodes.value.push(item.value)
|
|
|
+ tempSelectedCodes.value.push(item.value)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 确认选择
|
|
|
+const cancelSelection = () => {
|
|
|
+ popupVisible.value = false
|
|
|
+}
|
|
|
+
|
|
|
const confirmSelection = () => {
|
|
|
+ selectedCodes.value = [...tempSelectedCodes.value]
|
|
|
selectedItems.value = itemList
|
|
|
.filter((item) => selectedCodes.value.includes(item.value))
|
|
|
.map((item) => item.label)
|
|
|
emit('change', selectedCodes.value, props.type)
|
|
|
- closePopup()
|
|
|
+ popupVisible.value = false
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -154,7 +156,6 @@ const confirmSelection = () => {
|
|
|
flex: 1;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
height: 30px;
|
|
|
padding: 0 5px;
|
|
|
border: 1px solid #ccc;
|
|
|
@@ -212,32 +213,6 @@ const confirmSelection = () => {
|
|
|
color: rgba(136, 136, 136, 1);
|
|
|
}
|
|
|
|
|
|
-.arrow-icon {
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.popup-mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 999;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
-}
|
|
|
-
|
|
|
-.popup-content {
|
|
|
- width: 100%;
|
|
|
- max-width: 500px;
|
|
|
- overflow: hidden;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10px 10px 0 0;
|
|
|
-}
|
|
|
-
|
|
|
.popup-header {
|
|
|
padding: 15px;
|
|
|
text-align: center;
|