公共选人控件的抽象写法【项目管理系统】gench.projectmanage.pc

gench.projectmanage.pc

选人控件引用 一

   <a-row gutter="24">
      <a-col span="24">
        <a-form-item label="参与者" name="charges"
          :rules="[{ type: 'array', required: true, message: '请选择参与者', trigger: ['blur'] }]">
          <selectChargeCheckBox v-model:charges="workPlanData.charges" :project-charges-list="getWorkPlanCharge()" />
        </a-form-item>
      </a-col>
      
    </a-row>

const getWorkPlanCharge = () => {
  
  let findWorkPlan = workPlanList.value.find(obj => obj.id == workPlanData.value.workPlanId)
  console.log('参与人1',findWorkPlan)
  return findWorkPlan ? findWorkPlan.charges : []
}

选人控件引用二：

<a-row style="width:100%">
                <a-col :span="24" class="flex-start" style="width:100%">
                    <a-form-item label="参与者" name="charges" style="width:100%"
                        :rules="[{ type: 'array', required: true, message: '请选择参与者', trigger: ['blur'] }]">
                        <selectChargeCheckBox v-model:charges="taskData.charges" :project-charges-list="project.charges" />
                    </a-form-item>
                </a-col>
            </a-row>

选人控件

<template>
  <div style="display: flex;gap:5px;align-items: center">
    <a-empty :image="simpleImage" v-if="userList.length == 0" style="width: 100%">
      <template #description>
        <span>
          暂无人员选择
        </span>
      </template>
    </a-empty>
    <a-checkbox-group v-model:value="selectUsers" style="width: 100%" @change="userChange()" v-else>
          <a-checkbox :key="index" :value="item.fapUserId" v-for="(item, index) in userList">
            {{ item.fapUserName }}
          </a-checkbox>
    </a-checkbox-group>
  </div>
</template>
<script setup lang="ts">
import { Empty } from 'ant-design-vue';
import { ref, watch } from 'vue'
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
const props = defineProps({
  charges: {
    type: Array<any>,
    default: []
  },
  projectChargesList: {
    type: Array<any>,
    default: [],
  },
})

watch(() => props.projectChargesList, (newVal, oldVal) => {
  userList.value = newVal;
}, {
  deep: true,
})

watch(() => props.charges, (newVal, oldVal) => {
  selectUsers.value = newVal.map(obj => {
    return obj.fapUserId
  });
}, {
  deep: true,
})

const emit = defineEmits(["update:charges"])
const userList: any = ref([...props.projectChargesList])
const selectUsers: any = ref([])
const userChange = () => {
  emit("update:charges", selectUsers.value.map(obj => {   //charges更新的是父级里的  v-model:charges 里的数据内容

 　　return {
      fapUserId: obj,
      fapUserName: userList.value.find(item => item.fapUserId == obj).fapUserName,
    }
  })
  );
}



</script>



<style>
</style>