PersonGroupMover.vue

<template>
  <a-modal
      title="人员移动"
      v-if='isVisible'
      v-model:visible="isVisible"
      width="520px"
      height='50%'
      class="detail-modal"
  >
    <a-form :model="formData">
      <a-form-item label="分组">
        <a-select v-model:value="formData.personUnid" placeholder="请选择分组id">
          <a-select-option
              v-for="item in dataList"
              :key="item.person_unid"
              :value="item.person_unid"
          >人id：{{item.person_unid}}</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button type="primary" @click="onSave">保存</a-button>
      <a-button @click="onCancel">返回</a-button>
    </template>
  </a-modal>
</template>

<script>
import { ref } from "vue";
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import { ElMessage } from "element-plus";

export default {
  name: 'PersonGroupEditor',
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const isVisible = ref(false);
    // 表单
    function getInitialFormData() {
      return {
        personUnid: '',
        unidList: [],
      }
    }
    const formData = ref(getInitialFormData())

    const initDialog = (data, selectedList) => {
      console.log('initDialog', data, selectedList)
      formData.value = getInitialFormData()
      formData.value.unidList = selectedList.map(item => item.unid)
      isVisible.value = true;
    };

    const onCancel = () => {
      isVisible.value = false;
    };
    const onSave = () => {
      const params = {
        unid: formData.value.unidList.join(','),
        personUnid: formData.value.personUnid,
      }
      clusterResultApi.updateRecognition(params).then(
          (r) => {
            if(r.msg_code==200){
              ElMessage({
                message: `保存成功`,
                type: 'success'
              })
              // 刷新列表
              emit('refresh')
              onCancel()
            } else {
              ElMessage({
                message: `保存失败`,
                type: 'error'
              })
            }
          }
      )
    };

    return {
      isVisible,
      formData,
      onSave,
      onCancel,
      initDialog,
    };
  },
};
</script>

<style lang="less" scoped>
</style>