169 lines
4.3 KiB
Vue
169 lines
4.3 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="#4f6ef7" />
|
||
</view>
|
||
|
||
<view v-if="value.length" class="list">
|
||
<uni-swipe-action>
|
||
<uni-swipe-action-item v-for="(i, idx) in value" :key="idx">
|
||
<view class="item">
|
||
<view class="item-title">{{ idx + 1 }}、{{ i.category || '' }}</view>
|
||
<view class="item-sub">{{ i.opinion || '' }}</view>
|
||
</view>
|
||
<template #right>
|
||
<view class="actions">
|
||
<view class="action edit" @click.stop="edit(i, idx)">编辑</view>
|
||
<view class="action del" @click.stop="remove(idx)">删除</view>
|
||
</view>
|
||
</template>
|
||
</uni-swipe-action-item>
|
||
</uni-swipe-action>
|
||
</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('确定删除吗？', () => {
|
||
const list = value.value.map((i) => ({ category: i.category, opinion: i.opinion }));
|
||
list.splice(idx, 1);
|
||
emitChange(list);
|
||
toast('已删除');
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.wrap {
|
||
padding: 12px 14px;
|
||
border-bottom: 1px solid #eee;
|
||
}
|
||
.head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.head-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.label {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
}
|
||
.required {
|
||
color: #ff4d4f;
|
||
font-size: 14px;
|
||
}
|
||
.list {
|
||
margin-top: 10px;
|
||
}
|
||
.item {
|
||
padding: 10px 0;
|
||
}
|
||
.item-title {
|
||
font-size: 14px;
|
||
color: #111827;
|
||
font-weight: 600;
|
||
}
|
||
.item-sub {
|
||
margin-top: 6px;
|
||
font-size: 13px;
|
||
color: #6b7280;
|
||
white-space: pre-wrap;
|
||
}
|
||
.actions {
|
||
display: flex;
|
||
height: 100%;
|
||
align-items: stretch;
|
||
}
|
||
.action {
|
||
width: 70px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
}
|
||
.action.edit {
|
||
background: #4f6ef7;
|
||
}
|
||
.action.del {
|
||
background: #ff4d4f;
|
||
}
|
||
.empty {
|
||
margin-top: 10px;
|
||
font-size: 13px;
|
||
color: #9aa0a6;
|
||
}
|
||
</style>
|
||
|