duty-management-web/src/views/system/seat-manage/people.vue

<template>
  <CusDialog
      title="新增人员"
      :show="show"
      @close="$emit('update:show', false)"
      @submit="onSubmit"
      width="400px"
      maxHeight="80%"
      footAlign="right"
  >
    <div class="__normal-form">
      <CusForm labelWidth="100px" ref="ref_form">
        <CusFormColumn
            :span="24"
            required
            label="单位:"
            link="select"
            v-model:param="cusDetail.deptId"
            :options="$store.state.dictionary.deptList"
            :disabled="true"/>
        <CusFormColumn
            :span="24"
            required
            label="值班人员:"
            v-model:param="cusDetail.peopleId"
            link="select"
            static
            labelKey="displayName"
            valueKey="id"
            multiple
            :options="peopleList"
            :isLoading="loadingPeople"
            @getObject="getPeopleObj"/>
      </CusForm>
    </div>
  </CusDialog>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";

export default defineComponent({
  name: '',
  components: {},
  props: {
    show: {},
    transfer: <any>{}
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      cusDetail: <any>{},
      peopleList: {},
      selectPeopleList: [],
      selectUserId: [],
      loadingPeople: false
    })
    const ref_form = ref()
    watch(() => props.show, (n) => {
      if (n) {
        state.cusDetail = {
          deptId: props.transfer.deptId,
          peopleId: []
        }
        state.selectUserId = props.transfer.selectUserId
        getPeople()
        nextTick(() => {
          ref_form.value.reset()
        })
      }
    })
    const getPeople = () => {
      state.loadingPeople = true
      state.peopleList = []
      that.$api.getSeatDutyUnitPersonList({externalId: store.state.dictionary.deptMap.get(state.cusDetail.deptId).externalId}).then(res => {
        if (res.code === 200) {
          state.peopleList = res.data.filter(v => !state.selectUserId.includes(v.id))
        } else {
          ElMessage.error(res.message)
        }
        state.loadingPeople = false
      }).catch(() => {
        state.loadingPeople = false
      })
    }
    const onSubmit = () => {
      ref_form.value.submit().then(() => {
        emit('getPeople', state.selectPeopleList)
        emit('update:show', false)
      }).catch((e) => {
        ElMessage({
          message: e[0].message,
          grouping: true,
          type: 'warning',
        })
      })
    }
    const getPeopleObj = (arr) => {
      state.selectPeopleList = arr.map(v => {
        const obj = {
          linkPhone: v.phoneNumber,
          name: v.displayName,
          accountId: v.id
        }
        return obj
      })
    }
    return {
      ...toRefs(state),
      onSubmit,
      ref_form,
      getPeopleObj
    }
  },
})
</script>

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