SaaS-lib/lib/component/form/input/input-modal.vue

<!-- @format -->

<template>
  <div>
    <ns-input
      v-if="!baseStyle"
      class="ns-input-area"
      :disabled="true"
      v-model:value="itemName"
      placeholder="请选择">
      <template #addonAfter>
        <a-button type="primary" class="ns-area" style="height: 32px" @click="showModal">{{
          buttonLabel
        }}</a-button>
        <!-- <ns-button type="primary" class="ns-area" style="height: 32px" @click="showModal"
          >{{ buttonLabel }}
        </ns-button> -->
      </template>
    </ns-input>
    <span v-else @click="showModal">{{ buttonLabel }}</span>
    <ns-modal
      width="1000px"
      v-if="visible"
      v-model:visible="visible"
      :maskClosable="false"
      class="modal"
      wrapClassName="ns-modeBase"
      :title="title">
      <div class="ns-basic-modecontent">
        <!-- <h4 class="title">{{ title }}</h4> -->
        <ns-view-list-table :model="data" v-bind="tableConfig" :row-selection="rowSelection" />
      </div>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button
          key="submit"
          :style="{ borderColor: !ischeck ? '#dfe3e9' : '' }"
          :disabled="!ischeck"
          type="primary"
          @click="handleOk"
          >确定</a-button
        >
      </template>
    </ns-modal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, ref, watch } from 'vue';
  export default defineComponent({
    name: 'NsInputModal',
    props: {
      baseStyle: {
        type: String,
        default: '',
      },
      title: {
        type: String,
        default: '',
      },
      defaultValue: {
        type: String,
        default: '',
      },
      showLabel: {
        type: String,
      },
      buttonLabel: {
        type: String,
        default: '选择',
      },
      rebackInfo: {
        type: Array,
        default: () => [],
      },
      tableConfig: {
        type: Object,
        default: () => ({}),
      },
      reName: {
        type: Array,
        default: () => [],
      },
      data: {
        type: Object,
        default: () => ({}),
      },
      formModel: {
        type: Object,
        default: () => ({}),
      },
    },
    emits: ['change', 'getItem'],
    setup(props) {
      // eslint-disable-next-line vue/no-setup-props-destructure
      const { showLabel, rebackInfo, tableConfig, data, reName } = props;
      const visible = ref(false);
      const itemName = ref('');
      const showModal = () => {
        visible.value = true;
      };
      const selectItem = ref({});
      const ischeck = ref(false);
      const handleCancel = () => {
        visible.value = false;
      };
      watch(
        () => props.defaultValue,
        (e: any) => {
          itemName.value = e;
        },
      );

      return {
        visible,
        showModal,
        // eslint-disable-next-line vue/no-dupe-keys
        showLabel,
        // eslint-disable-next-line vue/no-dupe-keys
        rebackInfo,
        // eslint-disable-next-line vue/no-dupe-keys
        data,
        // eslint-disable-next-line vue/no-dupe-keys
        tableConfig,
        // eslint-disable-next-line vue/no-dupe-keys
        reName,
        selectItem,
        ischeck,
        itemName,
        handleCancel,
        rowSelection: {
          type: 'radio',
          onSelect: (record: T, selected: Boolean) => {
            ischeck.value = true;
            selectItem.value = record;
          },
        },
      };
    },
    methods: {
      handleOk() {
        if (this.reName.length === 0) {
          this.itemName = this.selectItem[this.showLabel];
          if (this.rebackInfo.length === 0) {
            this.$emit('change', this.selectItem);
            this.$emit('getItem', this.selectItem);
          } else {
            if (this.rebackInfo.length === 1) {
              this.$emit('change', this.selectItem[this.rebackInfo[0]]);
              this.$emit('getItem', this.selectItem[this.rebackInfo[0]]);
            } else {
              let info = {};
              this.rebackInfo.forEach((item) => {
                info[item] = this.selectItem[item];
              });
              this.$emit('change', info);
              this.$emit('getItem', info);
            }
          }
        } else {
          if (this.reName.length === this.rebackInfo.length && this.reName.length > 0) {
            if (this.rebackInfo.length === 1) {
              let info = {};
              info[this.reName[0]] = this.selectItem[this.rebackInfo[0]];
              this.$emit('change', info);
              this.$emit('getItem', info);
            } else {
              let info = {};
              this.rebackInfo.forEach((item, index) => {
                info[this.reName[index]] = this.selectItem[item];
              });
              this.$emit('change', info);
              this.$emit('getItem', info);
            }
          }
        }
        this.visible = false;
        // this.$emit('ceshi', 'qaq');
        //this.$emit('change', this.itemName);
      },
    },
  });
</script>
<style lang="less" scoped>
  .ns-area:hover,
  // :focus {
  //   color: white !important;
  // }
  .ns-area {
    color: white;
  }
  :deep(.ant-input) {
    border-right: 0;
  }
  :deep(.ns-area) {
    border: 0;
  }
  .title {
    font-size: 14px;
    font-weight: bold;
  }

  :deep(.ns-line) {
    display: none;
  }
  :deep(.ant-modal-content) {
    max-width: 900px;
  }
  :deep(.ns-form-item) {
    width: 250px;
  }
  :deep(.ant-input-group-addon) {
    padding: 0 !important;
    border: 0px solid #dcdfe2 !important;
    height: 30px !important;
  }
  :deep(.ant-btn) {
    height: 30px !important;
  }
  // :deep(.ns-table-main) {
  //   padding: 0 !important;
  // }
  :deep(.ant-input-disabled) {
    color: #172e3d !important;
  }
  :deep(.ns-table-header){
    padding-left:24px;
  }
  //  :deep(.ns-table .ns-table-search) {
  //   border-bottom: none !important;
  // }
</style>