地址簿弹窗

src/views/compositeSearch/components/AddressBook.vue

@@ -0,0 +1,172 @@
+<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>

src/views/compositeSearch/components/addAddress.vue

@@ -0,0 +1,126 @@
+<template>
+  <a-modal
+    v-model:visible="modelValue"
+    v-bind="dialogSetting"
+    width="750px"
+    title="编辑地址"
+    :footer="true"
+    modal-class="add_pick_up_model"
+    :mask-closable="false"
+    @cancel="cancel"
+  >
+    <a-form :model="form">
+      <a-row :gutter="16">
+        <a-col :span="24">
+          <a-form-item
+            field="value1"
+            label="名称"
+            :label-col-flex="labelWidth"
+          >
+            <a-input v-model="form.value1" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item
+            field="value2"
+            label="地址街道"
+            :label-col-flex="labelWidth"
+          >
+            <a-input v-model="form.value2"/>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item
+            field="value3"
+            label="国家二字码"
+            :label-col-flex="labelWidth"
+          >
+            <a-input v-model="form.value3" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item
+            field="value3"
+            label="城市"
+            :label-col-flex="labelWidth"
+          >
+            <a-input v-model="form.value4" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item
+            field="value3"
+            label="电话号码"
+            :label-col-flex="labelWidth"
+          >
+            <a-input v-model="form.value5" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item
+            field="value3"
+            label="邮编编码"
+            :label-col-flex="labelWidth"
+          >
+            <a-input v-model="form.value5" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import Select from '@/components/select/index.vue';
+import { PropType, computed } from 'vue';
+import { Empty } from '@arco-design/web-vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  dialogSetting: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: Number,
+    default: 1,
+  },
+});
+const { modelValue, dialogSetting, type } = toRefs(props);
+const labelWidth = ref('80px');
+const cancel = () => {
+  emit('update:modelValue', false);
+};
+const form = reactive({
+  value1: '',
+  value2: '',
+  value3: '',
+  value4: '',
+  value5: '',
+});
+</script>
+
+<style lang="less">
+.add_pick_up_model {
+  .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>