CITS/src/views/compositeSearch/components/AddressBook.vue

<template>
  <a-modal v-model:visible="modelValue" v-bind="dialogSetting" width="65%" :title="title" :footer="false"
    modal-class="add_pick_up_model" :mask-closable="false" @cancel="cancel">
    <a-form :model="form">
      <a-row :gutter="0">
        <a-col :span="24">
          <div class="header">
            <div>
              <a-input v-model="form.value1" style="width: 400px;margin-right: 20px;" />
              <a-button type="primary" @click="search()">查询</a-button>
            </div>
            <div>
              <a-button type="primary">
                <template #default>新增地址</template>
                <template #icon>
                  <icon-plus />
                </template>
              </a-button>
            </div>
          </div>

        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <!-- <a-table :columns="columns" :data="tableData" :pagination="true" class="table_box">
            <template #cz="{ record }">
              <a-button @click="">view</a-button>
            </template>
          </a-table> -->
          <a-table :columns="columns" :data="tableData">
            <template #operations="{ record }">
              <a-space size="5">
                <a-button type="text" @click="search()">
                  编辑
                </a-button>
                <a-button type="text" @click="search()">
                  删除
                </a-button>
              </a-space>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
  <addAddress v-model="showDialog" :type="modelType"></addAddress>
</template>

<script lang="ts" setup>
  import Select from '@/components/select/index.vue';
  import RoleApi from '@/views/background/role/api/RoleApi';
  import { PropType, computed } from 'vue';
  import useTableIndex from '@/hooks/tableIndex';
  import { Empty } from '@arco-design/web-vue';
  import addAddress from '../components/addAddress.vue';

  const modelType = ref(1); // 1、详情 2、确认，3、打印
  const showDialog = ref<boolean>(true);
  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    dialogSetting: {
      type: Object,
      default: () => ({}),
    },
    type: {
      type: Number,
      default: 1,
    },
    title: {
      type: String,
      default: "收货人地址簿",
    }
  });

  const search = function () {

  }

  const { modelValue, dialogSetting, type,title } = toRefs(props);
  // watch(
  //   () => type,
  //   (newVal) => {
  //   },
  //   {
  //     immediate: true,
  //     deep: true,
  //   }
  // );
  // 表格
  const columns = computed(() => {
    return useTableIndex([
      {
        title: '名称',
        dataIndex: 'a',
      },
      {
        title: '地址街道',
        dataIndex: 'b',
      },
      {
        title: '国家二字码',
        dataIndex: 'b',
      },
      {
        title: '城市',
        dataIndex: 'b',
      },
      {
        title: '电话号码',
        dataIndex: 'b',
      },
      {
        title: '邮政编码',
        dataIndex: 'b',
      },
      {
        title: '操作',
        dataIndex: '',
      }
    ]);
  });
  const labelWidth = ref('0');
  const emit = defineEmits(['ok', 'cancel', 'okAndDown', 'update:modelValue']);
  const cancel = () => {
    emit('update:modelValue', false);
  };
  const form = reactive({
    value1: '',
    value2: '',
    value3: '',
    value4: '',
    value5: '',
  });
  const tableData = ref([{ a: 1, b: 2 }]);
</script>

<style lang="less">
  .add_pick_up_model {
    .header {
      padding-bottom: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .arco-modal-body {
      padding: 24px 40px;
    }

    .add_btn {
      margin-left: 12px;
    }

    .table_box {
      margin-bottom: 24px;
    }

    .footer_box_btn {
      .btn_f {
        text-align: center;
      }

      .arco-btn {
        margin-left: 24px;
      }
    }
  }
</style>