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

<!-- @format -->

<template>
  <div style="">
    <ns-input
      class="ns-input-area"
      readonly
      :disabled="disabled"
      placeholder="请选择"
      @click="chose"
      :value="label">
      <template #addonAfter>
        <ns-button type="primary" :disabled="disabled" class="ns-area" @click="chose">{{
          addonAfter
        }}</ns-button>
      </template>
    </ns-input>
    <!-- <div></div> -->
    <span style="color: red">{{ alert }}</span>
  </div>
  <div id="inputarea">
    <ns-modal
      class="customModal"
      v-model:visible="visible"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="cancel"
      width="900px"
      :bodyStyle="{ padding: '16px' }"
      :title="title">
      <div v-if="ifTab">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane v-for="(item, index) in tabs" :key="index">
            <template #tab>
              <span> {{ item.name }} </span>
            </template>
            <div style="border: 16px solid #e5ebf0; border-top: none">
              <ns-view-list-table v-bind="item.tableConfig" :row-selection="rowSelection" />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-else style="border: 16px solid #e5ebf0; border-top: none">
        <ns-view-list-table v-bind="tableConfig" :row-selection="rowSelection" />
      </div>
    </ns-modal>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  // let rowSelection='';
  export default defineComponent({
    name: 'NsInputModalTable',
    props: {
      api: {
        type: String,
        default: '',
      },
      defaultKey: {
        type: String || Array,
        default: '',
      },
      alert: {
        type: String,
        default: '',
      },
      addonAfter: {
        type: String,
        default: '',
      },
      ifTab: {
        type: Boolean,
        default: false,
      },
      tabs: {
        type: Array,
        default: () => [],
      },
      tableConfig: {
        type: Object,
        default: () => {},
      },
      labelValue: {
        type: String,
        default: '',
      },
      keyValue: {
        type: String || Array,
        default: '',
      },
      field: {
        type: String,
      },
      type: {
        type: String,
        default: 'radio',
      },
      formModel: {
        type: Object,
      },
      allowClear: { type: Boolean },
      size: { type: String },
      disabled: { type: Boolean, default: false },
      id: { type: String },
      title: {
        type: String,
      },
      bodyStyle: Object,
    },
    emits: ['change'],
    setup(props, { emit, attrs }) {
      let newValue = attrs.value;
      var label = '';
      if (newValue) {
        label = newValue;
        emit('change', props.defaultKey);
      }
      return {
        label,
      };
    },
    data(props) {
      return {
        activeKey: 0,
        visible: false,
        key: props.defaultKey || '' || [],
        roomUuid: '',
        //是否选中后在取消的值
        iflabelValue: '',
        ifkeyValue: props.defaultKey || '' || [],
        // label: '',
        rowSelection: {
          type: props.type,
          selectedRowKeys: [props.defaultKey || ''],
          //默认选中
          getCheckboxProps(record: { [x: string]: string }) {
            let uuid = [] || '';
            //如果有多个table
            if (props.ifTab) {
              for (const iterator of props.tabs) {
                uuid.push(iterator.tableConfig.rowKey);
              }
              //单选
              if (props.type == 'radio') {
                for (const iterator of uuid) {
                  if (iterator in record) {
                    return {
                      defaultChecked: record[iterator] == props.defaultKey, // 配置默认勾选的列
                    };
                  }
                }
              }
              //多选
              else if (props.type == 'checkbox') {
                for (const iterator of uuid) {
                  if (iterator in record) {
                    for (const defaultKey of props.defaultKey) {
                      return {
                        defaultChecked: record[iterator] == defaultKey, // 配置默认勾选的列
                      };
                    }
                  }
                }
              }
            }
            //单个table
            else {
              if (props.type == 'radio') {
                return {
                  defaultChecked: record[props.keyValue] == props.defaultKey, // 配置默认勾选的列
                };
              } else if (props.type == 'checkbox') {
                for (const iterator of props.defaultKey) {
                  return {
                    defaultChecked: record[props.keyValue] == iterator, // 配置默认勾选的列
                  };
                }
              }
            }
          },
          onChange: (selectedRowKeys: Key[], selectedRows: EnumData[]) => {
            console.log('ceshi');
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.rowSelection.selectedRowKeys = selectedRowKeys;
            let labelDemo = [];
            let selectedRowsValue = JSON.parse(JSON.stringify(selectedRows));
            if (props.type == 'radio') {
              this.ifkeyValue = selectedRowKeys[0];
              this.iflabelValue = selectedRowsValue[0][this.labelValue];
            } else if (props.type == 'checkbox') {
              for (const iterator of selectedRowsValue) {
                labelDemo.push(iterator[this.labelValue]);
              }
              this.ifkeyValue = selectedRowKeys;
              this.iflabelValue = labelDemo.join();
            }
            console.log(this.ifkeyValue);
            console.log(this.iflabelValue);
          },
        },
      };
    },

    methods: {
      chose() {
        this.visible = true;
      },
      handleOk() {
        //确定--需要赋值
        this.label = this.iflabelValue;
        this.key = this.ifkeyValue;
        this.$emit('change', this.key);
        this.visible = false;
      },
      cancel() {
        console.log('cancle');
        //取消-不需要赋值
        this.visible = false;
      },
    },
  });
</script>
<style lang="less">
  .ant-modal-content .ns-table .ns-table-search {
    // border-bottom: 24px solid #ffffff !important;
  }
</style>

<style lang="less" scoped>
  // .ns-area:hover,
  // :focus {
  //   color: white !important;
  // }
  // .ns-area {
  //   color: white;
  // }

  // :deep(.ant-input) {
  //   background: rgba(223, 227, 233, 0.5);
  // }

  // :deep(.ant-input:focus) {
  //   border-color: rgba(223, 227, 233, 0.5);
  //   border-right-width: 0px !important;
  //   outline: 0;
  //   box-shadow: none;
  // }

  // :deep(.ns-area) {
  //   border: 0;
  // }
  :deep(.ant-input-group-addon) {
    padding: 0 !important;
    border: 0px solid #dcdfe2 !important;
    height: 30px !important;
  }
  :deep(.ant-btn) {
    // height: 32px !important;
  }
  :deep(.ns-table-main) {
    padding: 0 !important;
  }
</style>