178 lines
4.5 KiB
Vue
178 lines
4.5 KiB
Vue
<template>
|
||
<view class="wrap">
|
||
<view class="head" @click="add">
|
||
<view class="head-left">
|
||
<text class="label">{{ name }}</text>
|
||
<text v-if="required" class="required">*</text>
|
||
</view>
|
||
<uni-icons type="plusempty" size="20" color="#0877F1" />
|
||
</view>
|
||
|
||
<view v-if="value.length" class="list">
|
||
<view v-for="(i, idx) in value" :key="idx" class="item">
|
||
<view class="item-main">
|
||
<view class="item-title">{{ idx + 1 }}、{{ i.category || '' }}</view>
|
||
<view class="item-sub">{{ i.opinion || '' }}</view>
|
||
</view>
|
||
<view class="item-actions">
|
||
<view class="text-action edit" @click.stop="edit(i, idx)">编辑</view>
|
||
<view class="text-action del" @click.stop="remove(idx)">删除</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view v-else class="empty">暂无内容，点击右侧 + 添加</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, onUnmounted, ref } from 'vue';
|
||
import { confirm, toast } from '@/utils/widget';
|
||
|
||
const emits = defineEmits(['change']);
|
||
const props = defineProps({
|
||
form: { type: Object, default: () => ({}) },
|
||
name: { default: '' },
|
||
required: { type: Boolean, default: false },
|
||
title: { default: '' },
|
||
disableChange: { type: Boolean, default: false },
|
||
});
|
||
|
||
const value = computed(() => {
|
||
const arr = props.form?.[props.title];
|
||
return Array.isArray(arr) ? arr.filter((i) => i && (i.category || i.opinion)) : [];
|
||
});
|
||
|
||
const activeEventName = ref('');
|
||
function clearListener() {
|
||
if (activeEventName.value) uni.$off(activeEventName.value);
|
||
activeEventName.value = '';
|
||
}
|
||
onUnmounted(clearListener);
|
||
|
||
function emitChange(next) {
|
||
emits('change', { title: props.title, value: next });
|
||
}
|
||
|
||
function add() {
|
||
if (props.disableChange) return;
|
||
uni.setStorageSync('current-positive-find', { category: '', opinion: '' });
|
||
clearListener();
|
||
activeEventName.value = `positive-find-change_${Date.now()}`;
|
||
uni.$on(activeEventName.value, (data) => {
|
||
const list = value.value.map((i) => ({ category: i.category, opinion: i.opinion }));
|
||
list.push({ category: String(data?.category || ''), opinion: String(data?.opinion || '') });
|
||
emitChange(list);
|
||
});
|
||
uni.navigateTo({
|
||
url: `/pages/others/edit-positive-find?eventName=${encodeURIComponent(activeEventName.value)}&title=${encodeURIComponent(props.name || '阳性发现')}`,
|
||
});
|
||
}
|
||
|
||
function edit(item, idx) {
|
||
if (props.disableChange) return;
|
||
uni.setStorageSync('current-positive-find', { category: item?.category || '', opinion: item?.opinion || '' });
|
||
clearListener();
|
||
activeEventName.value = `positive-find-change_${Date.now()}`;
|
||
uni.$on(activeEventName.value, (data) => {
|
||
const list = value.value.map((i) => ({ category: i.category, opinion: i.opinion }));
|
||
list[idx] = { category: String(data?.category || ''), opinion: String(data?.opinion || '') };
|
||
emitChange(list);
|
||
});
|
||
uni.navigateTo({
|
||
url: `/pages/others/edit-positive-find?eventName=${encodeURIComponent(activeEventName.value)}&title=${encodeURIComponent(props.name || '阳性发现')}`,
|
||
});
|
||
}
|
||
|
||
function remove(idx) {
|
||
if (props.disableChange) return;
|
||
confirm('确定删除吗？')
|
||
.then(() => {
|
||
const list = value.value.map((i) => ({ category: i.category, opinion: i.opinion }));
|
||
list.splice(idx, 1);
|
||
emitChange(list);
|
||
toast('已删除');
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.wrap {
|
||
padding: 24rpx 28rpx;
|
||
border-bottom: 2rpx solid #eee;
|
||
}
|
||
.head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.head-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
.label {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
}
|
||
.required {
|
||
color: #ff4d4f;
|
||
font-size: 28rpx;
|
||
}
|
||
.list {
|
||
margin-top: 20rpx;
|
||
}
|
||
.item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 24rpx;
|
||
padding: 24rpx 0;
|
||
border-bottom: 2rpx solid #f3f4f6;
|
||
}
|
||
.item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.item-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
.item-title {
|
||
font-size: 28rpx;
|
||
color: #111827;
|
||
font-weight: 600;
|
||
word-break: break-all;
|
||
}
|
||
.item-sub {
|
||
margin-top: 12rpx;
|
||
font-size: 26rpx;
|
||
color: #6b7280;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
.item-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
flex-shrink: 0;
|
||
padding-top: 4rpx;
|
||
}
|
||
.text-action {
|
||
font-size: 26rpx;
|
||
line-height: 1;
|
||
}
|
||
.text-action.edit {
|
||
color: #0877F1;
|
||
}
|
||
.text-action.del {
|
||
color: #ff4d4f;
|
||
}
|
||
.empty {
|
||
margin-top: 20rpx;
|
||
font-size: 26rpx;
|
||
color: #9aa0a6;
|
||
}
|
||
</style>
|