ba_web/src/views/securityManagement/trainingManagement/trainingProject/components/selectPersonnelDialog.vue

<template>
  <div>
    <el-dialog
      title="选择人员"
      v-model="visible"
      width="50%"
      :before-close="handleClose"
    >
      <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
        :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth"
        @chooseData="handleChooseData"
        >
        <template #pxsc="{ row }">
          <span>{{ row.pxsc }}h</span>
        </template>
      </MyTable>
      <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
        ...pageData.pageConfiger,
        total: pageData.total
      }"></Pages>

      <template #footer>
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref, reactive, getCurrentInstance, watchEffect } from 'vue';
import { qcckPost } from "@/api/qcckApi.js";
import Pages from '@/components/aboutTable/Pages.vue';
import MyTable from '@/components/aboutTable/MyTable.vue';

const { proxy } = getCurrentInstance()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  defaultSelectKeys: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['update:modelValue', 'change'])

const visible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})

const selectList = ref([])

const pageData = reactive({
  tableData: [{}],
  keyCount: 0,
  tableConfiger: {
    rowKey: "id",
    rowHieght: 61,
    showIndex: false,
    showSelectType: "checkBox",
    haveControls: false,
    loading: false
  },
  total: 0,
  tableHeight: 300,
  pageConfiger: {
    sfcjpx: 1,
    pageSize: 10,
    pageCurrent: 1
  },
  controlsWidth: 180,
  tableColumn: [
    { label: "姓名", prop: "xm" },
    { label: "证件号码", prop: "sfzh" },
    { label: "联系电话", prop: "lxdh" },
    { label: "培训时长", prop: "pxsc", showSolt: true },
  ]
});

watchEffect(() => {
  pageData.tableConfiger.defaultSelectKeys = props.defaultSelectKeys
})

const getList = async () => {
  pageData.tableConfiger.loading = true;

  try {
    const res = await qcckPost({
      ...pageData.pageConfiger,
    }, `/mosty-base/baxx/pxry/page`)

    if (res) {
      pageData.tableData = res.records || []
      pageData.total = res.total
    }

  } finally {
    pageData.tableConfiger.loading = false
  }
}
const open = async () => {
  await getList()
  visible.value = true
}

const changeNo = (val) => {
  pageData.pageConfiger.pageNum = val;
  getList();
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList();
};

const handleClose = () => {
  selectList.value = []
  pageData.tableData = []
  visible.value = false
}

const handleChooseData = (data) => {
  selectList.value = data
}

const handleSubmit = () => {
  if (selectList.value.length === 0) return proxy.$message.warning('请选择人员')
  emits('change', selectList.value)

  handleClose()
}

defineExpose({ open })
</script>

<style>

</style>