ant-vue-admin/src/views/money/bill/customCom/CustomInput.vue

<template>
  <!-- <BasicTable @register="registerTable" /> -->
  <div class="wrap">
    <div class="content">
      <Input
        :class="placeholder === '交易名称' ? 'input-width' : ''"
        :placeholder="placeholder"
        disabled
        v-model:value="value"
      />
      <a-button
        class="mr-2 add-btn"
        color="success"
        :disabled="disabled"
        @click="openAddPop(placeholder, type)"
      >
        添加
      </a-button>
      <Checkbox
        class="checkbox"
        v-if="placeholder === '交易名称'"
        v-model:checked="checked"
        @change="onCheckChange"
        :disabled="ck_disabled"
        >会费</Checkbox
      >
    </div>
    <Popup @register="register" @select="select" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, onUpdated, reactive, nextTick, toRefs } from 'vue';
  import { Input } from 'ant-design-vue';
  import { Checkbox } from 'ant-design-vue';
  import Popup from './popup.vue';
  import { useModal } from '/@/components/Modal';

  const props = {
    value: { type: Object, default: '' },
    placeholder: { type: String, default: '' },
    type: { type: Number, default: 1 },
  };
  interface State {
    value: object | string;
    placeholder: string;
    disabled: boolean;
    type: number;
  }

  export default defineComponent({
    name: 'CustomInput',
    components: { Input, Checkbox, Popup },
    props,
    emits: ['change'],
    setup(props, { emit }) {
      const state = reactive<State>({
        value: '',
        placeholder: props.placeholder,
        disabled: false,
        type: 1,
      });
      const checkbox = reactive({
        checked: false,
        ck_disabled: false,
      });
      const [register, { openModal: openPopup }] = useModal();
      // 初始化
      function init() {
        nextTick(() => {
          state.type = props.type;
          if (props.value.name) {
            state.value = props.value.name;
          } else if (props.value.url) {
            state.value = props.value.url;
          } else {
            state.value = props.value;
            if (props.value === '会费') {
              checkbox.checked = true;
            } else {
              checkbox.checked = false;
            }
          }
        });
      }
      onUpdated(() => {
        init();
        if (state.value !== '会费' || !state.disabled) {
          if (
            state.value !== '' &&
            (typeof props.value === 'string' || typeof props.value === 'number')
          ) {
            state.disabled = true;
            checkbox.ck_disabled = true;
          } else {
            state.disabled = false;
            checkbox.ck_disabled = false;
            if (state.value === '会费') {
              checkbox.checked = true;
              state.disabled = true;
            }
          }
        }
        if (props.value == '' && state.disabled) {
          checkbox.checked = false;
          state.disabled = false;
          state.value = '';
        } else if (props.value === '会费' && state.disabled) {
          // checkbox.checked = true;
          checkbox.ck_disabled = true;
        }
      });

      function onCheckChange(evt) {
        console.log(`evt`, evt);
        console.log(`evt.target.checked`, evt.target.checked);
        const checked = evt.target.checked;
        if (checked) {
          state.disabled = true;
          emit('change', { id: 0, name: '会费' });
        } else {
          state.disabled = false;
          emit('change', '');
        }
      }
      function openAddPop(title, type) {
        openPopup(true, { title, type });
      }
      function select(data) {
        emit('change', data);
      }

      return {
        openAddPop,
        onCheckChange,
        select,
        openPopup,
        register,
        ...toRefs(state),
        ...toRefs(checkbox),
      };
    },
  });
</script>
<style scoped>
  .content {
    display: flex;
  }

  .add-btn {
    margin-left: 2px;
  }

  .input-width {
    width: 70%;
  }

  .checkbox {
    height: 30px;
  }
  @media screen and (max-width: 450px) {
    .input-width {
      width: 39%;
    }
  }
  @media screen and (max-width: 380px) {
    .input-width {
      width: 35%;
    }
  }
  @media screen and (max-width: 330px) {
    .input-width {
      width: 23%;
    }
  }
</style>