ykt-wxapp/components/form-template/form-cell/form-positive-find.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>