YY_MP_REFACTOR/src/pages-task/task-visit/components/visit-template/shared/DepartmentFields.vue

<template>
  <view v-for="(department, index) in departments" :key="department.id" class="department-field">
    <view class="department-field__header">
      <view class="department-field__label">
        <text class="department-field__required">*</text>
        拜访科室{{ departments.length > 1 ? index + 1 : '' }}
      </view>
      <view
        class="department-field__action"
        @click="index === 0 ? addDepartment() : removeDepartment(index)"
      >
        {{ index === 0 ? '+' : '−' }}
      </view>
    </view>

    <view class="department-field__input">
      <wd-input v-model="department.departmentName" no-border placeholder="请输入拜访科室" />
    </view>

    <ImgUpload
      v-model:value="department.photoUrls"
      :task-field-config="photoFieldConfig"
      :canvas-id="`visitDepartmentCanvas${department.id}`"
    />
  </view>
</template>

<script setup lang="ts">
import type { TaskFieldConfigItem } from '@/services/modules/task/taskFrom/type'

import type { DepartmentFormItem } from '../types'
import { createDepartment, parsePhotoUrls } from '../utils'

import ImgUpload from '@/pages-task/task-form/components/ImgUpload.vue'

const departments = defineModel<DepartmentFormItem[]>({ required: true })

const photoFieldConfig = {
  taskFiledValue: '科室照片',
  isMustfill: '1',
  taskFiledMinsize: 1,
  taskFiledMaxsize: 1,
} as TaskFieldConfigItem

const addDepartment = () => {
  const lastDepartment = departments.value.at(-1)

  if (
    !lastDepartment?.departmentName.trim() ||
    parsePhotoUrls(lastDepartment.photoUrls).length === 0
  ) {
    uni.showToast({ title: '请先完善当前拜访科室', icon: 'none' })
    return
  }

  departments.value.push(createDepartment())
}

const removeDepartment = (index: number) => {
  if (index > 0) departments.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.department-field {
  padding: 22rpx 30rpx 8rpx;
  background: #ffffff;
  border-top: 2rpx solid #f1f3f6;
}

.department-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.department-field__label {
  color: #303a49;
  font-size: 26rpx;
  line-height: 38rpx;
}

.department-field__required {
  margin-right: 6rpx;
  color: #e65d5d;
}

.department-field__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54rpx;
  height: 54rpx;
  color: #4a91ea;
  font-size: 38rpx;
  line-height: 54rpx;
  background: #eef6ff;
  border-radius: 50%;
}

.department-field__input {
  margin-top: 16rpx;
  padding: 0 20rpx;
  background: #f7f9fc;
  border: 2rpx solid #e8edf3;
  border-radius: 14rpx;
}
</style>