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="#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: 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 {
  padding: 20rpx 0;
}
.item-title {
  font-size: 28rpx;
  color: #111827;
  font-weight: 600;
}
.item-sub {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #6b7280;
  white-space: pre-wrap;
}
.actions {
  display: flex;
  height: 100%;
  align-items: stretch;
}
.action {
  width: 140rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #fff;
}
.action.edit {
  background: #4f6ef7;
}
.action.del {
  background: #ff4d4f;
}
.empty {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #9aa0a6;
}
</style>