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

<template>
  <div style="">
    <ns-input
      class="ns-input-area"
      :disabled="true"
      placeholder="请选择"
      @click="chose"
      :value="floorName"
    >
      <template #addonAfter>
        <a-button class="ns-area" style="background: #5cc0d1; height: 32px" @click="chose"
          >{{ addonAfter }}
        </a-button>
      </template>
    </ns-input>
  </div>
  <a-modal
    v-model:visible="visible"
    :maskClosable="false"
    @ok="handleOkAddress"
    @cancel="cancelModel"
    width="900px"
    style="top: 3%"
  >
    <p class="title">地址选择</p>
    <ns-view-list-table v-bind="tableConfigAddress" :row-selection="rowSelectionAddress" />
  </a-modal>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { http } from '/nerv-lib/util/http';

  // let rowSelection='';
  export default defineComponent({
    name: 'NsInputAddress',
    // props: {
    //   addonAfter: {
    //     type: String,
    //     default: '',
    //   },
    // },
    // eslint-disable-next-line vue/require-prop-types
    props: ['size', 'id', 'field', 'formModel', 'allowClear', 'value', 'addonAfter', 'disabled'],
    emits: ['change', 'blur'],
    setup() {
      const pra = {
        pageSize: 10,
        regionType: 2,
      };
      let resData = ref();
      http.get('/api/community/community/objs/Region', pra).then((res) => {
        // console.log(res.data.data);
        resData.value = res.data.data;
      });
      return { resData };
    },
    data() {
      return {
        activeKey: '1',
        //地址选择
        tableConfigAddress: {
          api: '/api/community/community/objs/BedChoose/Inspection?regionType=2',
          defaultPageSize: 5,
          columns: [
            {
              title: '楼栋单元',
              dataIndex: 'floorName',
              fixed: 'left',
              width: 200,
            },
            {
              title: '楼层',
              dataIndex: 'floorNum',
              width: 200,
            },
            {
              title: '房间',
              dataIndex: 'roomName',
              width: 200,
            },
          ],
          formConfig: {
            schemas: [
              ///api/community/community/objs/Region?regionType=2
              {
                field: 'regionUuid',
                component: 'nsSelectApi',
                label: '楼栋单元',
                // addLink: ['regionName', 'regionUuid'],
                autoAddLink: true,
                componentProps: {
                  autoSelectFirst: false,
                  api: '/api/community/community/objs/Region',
                  params: {
                    pageSize: 10,
                    regionType: 2,
                  },
                  resultField: 'data.data',
                  labelField: 'regionName',
                  valueField: 'regionUuid',
                  immediate: true,
                },
              },
              {
                field: 'floorUuid',
                label: '楼层',
                dynamicParams: {
                  regionUuid: 'fieldLink.regionUuid.regionUuid',
                },
                defaultParams: {
                  regionType: 2,
                  pageSize: 10,
                },
                component: 'nsSelectApi',
                defaultValue: '',
                componentProps: {
                  autoSelectFirst: false,
                  api: '/api/community/community/objs/Region',
                  resultField: 'data.data',
                  labelField: 'regionName',
                  valueField: 'regionUuid',
                  // options: [
                  //   {
                  //     label: '全部',
                  //     value: 'all',
                  //   },
                  // ],
                },
              },
            ],
            params: {},
          },
          // columnActions: {
          //   width: 0,
          //   title: '',
          //   actions: [
          //     {
          //       label: '启动',
          //       name: 'start',
          //       ifShow: true,
          //     },
          //   ],
          // },
          rowKey: 'roomUuid',
        },
        visible: false,
        regionUuid: '',
        roomUuid: '',
        floorName: '',
        rootLevelCode: '',
        rowSelectionAddress: {
          type: 'radio',
          onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
            this.roomUuid = selectedRows[0].roomUuid;
            this.queryName = selectedRows[0].floorName;
            this.spliceAddress =
              selectedRows[0].floorName +
              '-' +
              selectedRows[0].floorNum +
              '-' +
              selectedRows[0].roomName;
            // console.log(selectedRows[0]);
            // console.log("type");
            // console.log(this.floorName);
            // console.log(this.type);
          },
        },
      };
    },
    methods: {
      chose() {
        this.visible = true;
      },
      cancelModel() {
        this.floorName = '';
      },
      handleOkAddress() {
        this.floorName = this.spliceAddress;
        // console.log(this.resData);
        this.resData.forEach((item) => {
          for (let val in item) {
            if (item[val] == this.queryName) {
              this.rootLevelCode = item['rootLevelCode'];
              return;
            }
          }
        });
        this.$emit('change', { address: this.floorName, rootLevelCode: this.rootLevelCode });
        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);
  }

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

  :deep(.ant-input) {
    border-right: 0px;
  }

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