ToDo 上传/查看框架协议

src/views/tenderManage/tenderClientList.vue

@@ -1,5 +1,31 @@
 <template>
-  <el-card>客户名录</el-card>
+  <div class="card">
+    <el-table class="mb10" :data="tableData" border stripe>
+      <el-table-column label="序号" type="index" width="60" />
+      <el-table-column label="公司名称" prop="companyName" />
+      <el-table-column label="联系人" prop="contactName" />
+      <el-table-column label="手机号" prop="contactPhone" />
+      <el-table-column label="邮箱" prop="contactEmail" />
+      <el-table-column label="操作" width="300">
+        <template #default="scope">
+          <el-button size="small" type="primary">上传年度框架协议</el-button>
+          <el-button size="small" type="default">查看年度框架协议</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="df aic jcfe" style="width: 100%">
+      <el-pagination
+        v-model:current-page="currentPage"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 50, 100, 200]"
+        background
+        layout="sizes, prev, pager, next"
+        :total="total"
+        @size-change="getTenderProxyList()"
+        @current-change="getTenderProxyList()"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -12,6 +38,28 @@ import { mapGetters } from "vuex";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
+const tableData = ref([]);
+const total = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const term = ref("");
+async function getTenderProxyList() {
+  let { data } = await api.getTenderProxyList({
+    currentPage: currentPage.value,
+    size: pageSize.value,
+    term: term.value,
+  });
+  if (data.status === 0) {
+    tableData.value = data.result;
+    total.value = data.total;
+  } else {
+    tableData.value = [];
+    total.value = data.total || 0;
+  }
+}
+onMounted(() => {
+  getTenderProxyList();
+});
 </script>
 
 <style scoped></style>