4dkk_mp/src/views/lanUser/delListModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @cancel="resetFields"
    @register="register"
    title="删除员工"
    @ok="handleOk"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm">
        <template #tips>
          <div>请将员工的数据迁移后，再删除员工（删除员工后，权益将进行解绑）</div>
        </template>
      </BasicForm>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref, unref } from 'vue';
  import { delApi } from '/@/api/staff/list';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { t } = useI18n();

  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['reload'],
    setup(_, context) {
      const modelRef = ref({
        toUserId: 0,
        userId: 0,
      });
      const options = ref([]);
      const { createMessage } = useMessage();
      const schemas: FormSchema[] = [
        {
          field: 'toUserPhone',
          component: 'Select',
          label: '选择迁移的员工',
          required: true,
          itemProps: {
            validateTrigger: 'blur',
          },
          colProps: {
            span: 22,
          },
          componentProps: {
            options: options.value,
          },
        },
        {
          field: 'tips',
          component: 'Select',
          slot: 'tips',
          label: ' ',
        },
      ];
      const [registerForm, { validate, resetFields, updateSchema }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      function onDataReceive(data) {
        data = unref(data);
        modelRef.value.userId = data.id;
        console.log('onDataReceive', data);
        // 方式1;
        if (data.option) {
          options.value = data.option.map((ele) => {
            ele.label = ele.nickName;
            ele.value = ele.phone;
            return ele;
          });
          updateSchema({
            field: 'toUserPhone',
            component: 'Select',
            label: '选择迁移的员工',
            required: true,
            itemProps: {
              validateTrigger: 'blur',
            },
            colProps: {
              span: 22,
            },
            componentProps: {
              options: data.option,
              onChange: function (value, item) {
                modelRef.value.toUserId = item.id;
                console.log('onChange', value, item);
              },
            },
          });
        }
      }

      async function handleOk() {
        let data = await validate();
        let res = await delApi({
          toUserPhone: data.toUserPhone,
          userId: modelRef.value.userId,
          toUserId: modelRef.value.toUserId,
        });
        context && context.emit('reload', res);
        createMessage.success(t('common.optSuccess'));
        closeModal();
        resetFields();
      }

      return { options, register, registerForm, model: modelRef, handleOk, resetFields };
    },
  });
</script>