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

<template>
  <div style="">
    <span @click="chose" v-if="!label" style="cursor: pointer">请选择</span>
    <span @click="chose" v-else style="cursor: pointer; color: rgb(14, 210, 191)">
      {{ label }}
    </span>
  </div>
  <div id="inputarea">
    <a-modal
      v-model:visible="visible"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="cancel"
      width="900px"
      style="top: 3%"
      :title="title"
    >
      <!-- <p class="title">{{ title }}</p> -->
      <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>
            <ns-view-list-table v-bind="item.tableConfig" :row-selection="rowSelection" />
          </a-tab-pane>
        </a-tabs>
      </div>
      <div v-else>
        <ns-view-list-table v-bind="tableConfig" :row-selection="rowSelection" />
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts">
  import { runInThisContext } from 'node:vm';
  import { defineComponent, ref } from 'vue';
  import AppVue from '/@/App.vue';
  // let rowSelection='';
  export default defineComponent({
    name: 'NsModalTable',
    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 },
      id: { type: String },
      title: {
        type: String,
      },
      changeTable: {
        type: Function,
      },
      record: {
        type: Object,
      },
      dataIndex: {
        type: String,
      },
      // 需要该条数据上的更多信息
      extraSelect: {
        type: Array,
      },
      valueP: {
        type: Object || String,
      },
      // 显示在界面上的字段名
      showLabelValue: {
        type: String,
      },
    },
    emits: ['change', 'blur', 'changeTable'],
    setup(props, { emit, attrs }) {
      // console.log(JSON.parse(JSON.stringify(props.record)), 'zhouzhoutedfg');
      // console.log(attrs, 'attrs123');
      let newValue = attrs.value;
      var label = '';
      let showlabel = ref();
      showlabel = props.showLabelValue;
      // console.log(props.dataIndex, 'zhouzhou');
      let actionInfo = props.record;
      if (props.dataIndex) {
        label = actionInfo && actionInfo[props.dataIndex + 'Name'];
        // console.log(label, 'zhouxxlabel');
      }
      if (showlabel) {
        label = props.record && props.record[showlabel];
        let labelType = props.valueP;
        if (labelType && labelType instanceof Array && labelType.length > 0) {
          let arr: any[] = [];
          labelType.forEach((element: { [x: string]: any }) => {
            if (element[showlabel]) {
              arr.push(element[showlabel]);
            }
          });
          label = arr.join(',');
        }
        // console.log(props.valueP, 'valueP');
        emit('change', props.valueP);
      }
      if (newValue) {
        // console.log(newValue, 'label');
        label = newValue;
        emit('change', props.valueP);
      }
      return {
        label,
      };
    },
    data(props) {
      return {
        activeKey: 0,
        visible: false,
        key: props.defaultKey || '' || [],
        roomUuid: '',
        //是否选中后在取消的值
        iflabelValue: '',
        ifkeyValue: props.defaultKey || '' || [],
        selectedRows: [],
        // label: '',
        rowSelection: {
          type: props.type,
          //默认选中
          getCheckboxProps(record: { [x: string]: string }) {
            let uuid = [] || '';
            //如果有多个table
            if (props.ifTab) {
              for (const iterator of props.tabs) {
                (uuid as Array<any>).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: [], selectedRows: []) => {
            let labelDemo = [];
            let selectedRowsValue = JSON.parse(JSON.stringify(selectedRows));
            this.selectedRows = 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();
            }
          },
        },
      };
    },

    mounted() {
      // this.set(obj, "newField", "newData")
    },

    methods: {
      chose() {
        this.visible = true;
      },
      handleOk() {
        //确定--需要赋值
        let that = this;
        this.label = this.iflabelValue;
        this.key = this.ifkeyValue;
        // console.log(this.label, this.key, '我是周周子组件，哈哈哈');
        let data = {
          name: this.label,
          value: this.key,
        };
        let moreSelects: any;

        let selectedItems = JSON.parse(JSON.stringify(this.selectedRows));
        // console.log(selectedItems, 'selectedItemszhouzhou ');
        selectedItems &&
          selectedItems.forEach((it) => {
            if (this.extraSelect) {
              this.extraSelect.forEach((element) => {
                moreSelects = {
                  ...moreSelects,
                  [element.name]: it[element.value],
                };
              });
              // item = Object.assign(item, moreSelects);
            }
          });
        let changeData = Object.assign(this.record, moreSelects);
        changeData[this.dataIndex] = this.key;
        changeData[this.dataIndex + `Name`] = this.label;
        // console.log(changeData, 'changeData');
        this.$emit('changeTable', changeData);
        this.visible = false;
      },
      cancel() {
        console.log('cancle');
        //取消-不需要赋值
        this.visible = false;
      },
    },
  });
</script>

<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);
    border-right: 0;
  }

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

  :deep(.ns-area) {
    border: 0;
  }
</style>