diff --git a/src/api/system/source.ts b/src/api/system/source.ts
new file mode 100644
index 0000000..e0fabe7
--- /dev/null
+++ b/src/api/system/source.ts
@@ -0,0 +1,23 @@
+/**
+ * 溯源供方请求接口
+ */
+import request from '../index'
+const prefix = '/meter'
+
+// 列表查询
+export function getSoucreList(data: object) {
+  return request({
+    url: `${prefix}/supplier/list`,
+    method: 'post',
+    data,
+  })
+}
+
+// 数据删除
+export function getSoucreListDelete(data: object) {
+  return request({
+    url: `${prefix}/supplier/delete`,
+    method: 'post',
+    data,
+  })
+}

diff --git a/src/api/system/source.ts b/src/api/system/source.ts
new file mode 100644
index 0000000..e0fabe7
--- /dev/null
+++ b/src/api/system/source.ts
@@ -0,0 +1,23 @@
+/**
+ * 溯源供方请求接口
+ */
+import request from '../index'
+const prefix = '/meter'
+
+// 列表查询
+export function getSoucreList(data: object) {
+  return request({
+    url: `${prefix}/supplier/list`,
+    method: 'post',
+    data,
+  })
+}
+
+// 数据删除
+export function getSoucreListDelete(data: object) {
+  return request({
+    url: `${prefix}/supplier/delete`,
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/measure/source/approve.vue b/src/views/measure/source/approve.vue
index 2fcdf5d..8efe918 100644
--- a/src/views/measure/source/approve.vue
+++ b/src/views/measure/source/approve.vue
@@ -1,3 +1,4 @@
 <template>
   <div>溯源供方审批</div>
 </template>
+

diff --git a/src/api/system/source.ts b/src/api/system/source.ts
new file mode 100644
index 0000000..e0fabe7
--- /dev/null
+++ b/src/api/system/source.ts
@@ -0,0 +1,23 @@
+/**
+ * 溯源供方请求接口
+ */
+import request from '../index'
+const prefix = '/meter'
+
+// 列表查询
+export function getSoucreList(data: object) {
+  return request({
+    url: `${prefix}/supplier/list`,
+    method: 'post',
+    data,
+  })
+}
+
+// 数据删除
+export function getSoucreListDelete(data: object) {
+  return request({
+    url: `${prefix}/supplier/delete`,
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/measure/source/approve.vue b/src/views/measure/source/approve.vue
index 2fcdf5d..8efe918 100644
--- a/src/views/measure/source/approve.vue
+++ b/src/views/measure/source/approve.vue
@@ -1,3 +1,4 @@
 <template>
   <div>溯源供方审批</div>
 </template>
+
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e966fb8..cad751e 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -1,3 +1,182 @@
+<script lang="ts" setup name="ListSource">
+import { reactive, ref } from 'vue'
+import type { Ref } from 'vue'
+import type { IlistQuery } from './list_interface'
+import ListSourceAdd from './listAdd.vue'
+import { getSoucreList, getSoucreListDelete } from '@/api/system/source'
+
+// 查询条件
+const listQuery: Ref<IlistQuery> = ref({
+  supplierNo: '', // 业务内容
+  supplierName: '', // 溯源供方名称
+  businessContent: '', // 溯源供方编号
+  offset: 1,
+  limit: 20,
+})
+// 控制是否显示新增页面
+const show = ref(true)
+// 表格数据
+const list = ref([])
+// 总数
+const total = ref(20)
+// 表头
+const columns = ref([
+  {
+    text: '溯源供方编号',
+    value: 'supplierNo',
+    width: '160',
+  },
+  {
+    text: '溯源供方名称',
+    value: 'supplierName',
+    width: '120',
+  },
+  {
+    text: '业务内容',
+    value: 'businessContent',
+  },
+  {
+    text: '业务资质',
+    value: 'briefName',
+  },
+  {
+    text: '负责人',
+    value: 'director',
+  },
+  {
+    text: '联系方式',
+    value: 'mobile',
+  },
+  {
+    text: '地址',
+    value: 'companyCity',
+  },
+  {
+    text: '创建时间',
+    value: 'createTime',
+    width: '200',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+  },
+])
+
+// 按钮数组
+const buttons = ref(['批量导入', '模板下载', '新建', '导出', '打印'])
+// 表格loding
+const listLoading = ref(false)
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  getSoucreList(listQuery.value).then((response) => {
+    list.value = response.data
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+fetchData(true)
+// 多选发生改变时
+const handleSelectionChange = (e: any) => { }
+// 点击编辑/详情
+const handleEdit = (index: string, row: object) => {
+  show.value = false
+}
+// 点击删除
+const handleDelete = (index: string, row: object) => {
+  // getSoucreListDelete(row.target.id).then((res) => {
+
+  // })
+}
+// 分页
+const handleSizeChange = (val: string) => { }
+// 分页
+const handleCurrentChange = (val: string) => { }
+// 点击搜索
+const searchList = () => {
+  fetchData(true)
+}
+// 点击重置
+const clearList = () => {
+  listQuery.value = {
+    supplierNo: '', // 业务内容
+    supplierName: '', // 溯源供方名称
+    businessContent: '', // 溯源供方编号
+    offset: 1,
+    limit: 20,
+  }
+}
+</script>
+
 <template>
-  <div>溯源供方列表</div>
+  <div v-if="show">
+    <app-container>
+      <search-area type="seperate" need-clear @search="searchList" @clear="clearList">
+        <search-item>
+          <el-input v-model.trim="listQuery.supplierNo" placeholder="溯源供方编号" clearable />
+        </search-item>
+        <search-item>
+          <el-input v-model.trim="listQuery.supplierName" placeholder="溯源供方名称" clearable />
+        </search-item>
+        <search-item>
+          <el-input v-model.trim="listQuery.businessContent" placeholder="业务内容" clearable />
+        </search-item>
+      </search-area>
+    </app-container>
+    <app-container>
+      <div class="table-top">
+        <h3>数据列表</h3>
+        <div>
+          <el-button v-for="(item, index) in buttons" :key="index" type="primary">
+            {{ item }}
+          </el-button>
+        </div>
+      </div>
+      <el-table :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="(column, index) in columns" :key="index" :label="column.text" :prop="column.value"
+          :width="column.width" align="center"
+        />
+        <el-table-column align="center" label="操作" width="240">
+          <template #default="scope">
+            <el-button size="small" type="primary" link @click="handleEdit(scope.$index, scope.row)">
+              编辑
+            </el-button>
+            <el-button size="small" link type="primary" @click="handleEdit(scope.$index, scope.row)">
+              详情
+            </el-button>
+            <el-button size="small" link type="danger" @click="handleDelete(scope.$index, scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </app-container>
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="listQuery.offset" v-model:page-size="listQuery.limit"
+        :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+  <list-source-add v-else />
 </template>
+
+<style lang="scss" scoped>
+.table-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pagination {
+  position: fixed;
+  bottom: 0;
+}
+</style>

diff --git a/src/api/system/source.ts b/src/api/system/source.ts
new file mode 100644
index 0000000..e0fabe7
--- /dev/null
+++ b/src/api/system/source.ts
@@ -0,0 +1,23 @@
+/**
+ * 溯源供方请求接口
+ */
+import request from '../index'
+const prefix = '/meter'
+
+// 列表查询
+export function getSoucreList(data: object) {
+  return request({
+    url: `${prefix}/supplier/list`,
+    method: 'post',
+    data,
+  })
+}
+
+// 数据删除
+export function getSoucreListDelete(data: object) {
+  return request({
+    url: `${prefix}/supplier/delete`,
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/measure/source/approve.vue b/src/views/measure/source/approve.vue
index 2fcdf5d..8efe918 100644
--- a/src/views/measure/source/approve.vue
+++ b/src/views/measure/source/approve.vue
@@ -1,3 +1,4 @@
 <template>
   <div>溯源供方审批</div>
 </template>
+
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e966fb8..cad751e 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -1,3 +1,182 @@
+<script lang="ts" setup name="ListSource">
+import { reactive, ref } from 'vue'
+import type { Ref } from 'vue'
+import type { IlistQuery } from './list_interface'
+import ListSourceAdd from './listAdd.vue'
+import { getSoucreList, getSoucreListDelete } from '@/api/system/source'
+
+// 查询条件
+const listQuery: Ref<IlistQuery> = ref({
+  supplierNo: '', // 业务内容
+  supplierName: '', // 溯源供方名称
+  businessContent: '', // 溯源供方编号
+  offset: 1,
+  limit: 20,
+})
+// 控制是否显示新增页面
+const show = ref(true)
+// 表格数据
+const list = ref([])
+// 总数
+const total = ref(20)
+// 表头
+const columns = ref([
+  {
+    text: '溯源供方编号',
+    value: 'supplierNo',
+    width: '160',
+  },
+  {
+    text: '溯源供方名称',
+    value: 'supplierName',
+    width: '120',
+  },
+  {
+    text: '业务内容',
+    value: 'businessContent',
+  },
+  {
+    text: '业务资质',
+    value: 'briefName',
+  },
+  {
+    text: '负责人',
+    value: 'director',
+  },
+  {
+    text: '联系方式',
+    value: 'mobile',
+  },
+  {
+    text: '地址',
+    value: 'companyCity',
+  },
+  {
+    text: '创建时间',
+    value: 'createTime',
+    width: '200',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+  },
+])
+
+// 按钮数组
+const buttons = ref(['批量导入', '模板下载', '新建', '导出', '打印'])
+// 表格loding
+const listLoading = ref(false)
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  getSoucreList(listQuery.value).then((response) => {
+    list.value = response.data
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+fetchData(true)
+// 多选发生改变时
+const handleSelectionChange = (e: any) => { }
+// 点击编辑/详情
+const handleEdit = (index: string, row: object) => {
+  show.value = false
+}
+// 点击删除
+const handleDelete = (index: string, row: object) => {
+  // getSoucreListDelete(row.target.id).then((res) => {
+
+  // })
+}
+// 分页
+const handleSizeChange = (val: string) => { }
+// 分页
+const handleCurrentChange = (val: string) => { }
+// 点击搜索
+const searchList = () => {
+  fetchData(true)
+}
+// 点击重置
+const clearList = () => {
+  listQuery.value = {
+    supplierNo: '', // 业务内容
+    supplierName: '', // 溯源供方名称
+    businessContent: '', // 溯源供方编号
+    offset: 1,
+    limit: 20,
+  }
+}
+</script>
+
 <template>
-  <div>溯源供方列表</div>
+  <div v-if="show">
+    <app-container>
+      <search-area type="seperate" need-clear @search="searchList" @clear="clearList">
+        <search-item>
+          <el-input v-model.trim="listQuery.supplierNo" placeholder="溯源供方编号" clearable />
+        </search-item>
+        <search-item>
+          <el-input v-model.trim="listQuery.supplierName" placeholder="溯源供方名称" clearable />
+        </search-item>
+        <search-item>
+          <el-input v-model.trim="listQuery.businessContent" placeholder="业务内容" clearable />
+        </search-item>
+      </search-area>
+    </app-container>
+    <app-container>
+      <div class="table-top">
+        <h3>数据列表</h3>
+        <div>
+          <el-button v-for="(item, index) in buttons" :key="index" type="primary">
+            {{ item }}
+          </el-button>
+        </div>
+      </div>
+      <el-table :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="(column, index) in columns" :key="index" :label="column.text" :prop="column.value"
+          :width="column.width" align="center"
+        />
+        <el-table-column align="center" label="操作" width="240">
+          <template #default="scope">
+            <el-button size="small" type="primary" link @click="handleEdit(scope.$index, scope.row)">
+              编辑
+            </el-button>
+            <el-button size="small" link type="primary" @click="handleEdit(scope.$index, scope.row)">
+              详情
+            </el-button>
+            <el-button size="small" link type="danger" @click="handleDelete(scope.$index, scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </app-container>
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="listQuery.offset" v-model:page-size="listQuery.limit"
+        :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+  <list-source-add v-else />
 </template>
+
+<style lang="scss" scoped>
+.table-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pagination {
+  position: fixed;
+  bottom: 0;
+}
+</style>
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
new file mode 100644
index 0000000..609ba57
--- /dev/null
+++ b/src/views/measure/source/listAdd.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup name="ListSourceAdd">
+import { reactive, ref } from 'vue'
+import type { Ref } from 'vue'
+import type { IlistQuery } from './list_interface'
+const formInline: Ref<IlistQuery> = ref({
+  businessContent: '',
+  supplierName: '',
+  supplierNo: '',
+
+})
+const list = ref([{ name: '张三', address: '666', date: '777' }])
+</script>
+
+<template>
+  <div class="top-info">
+    <h4 class="title">
+      基本信息
+    </h4>
+    <div>
+      <el-button type="primary" plain>
+        导出
+      </el-button>
+      <el-button type="warning" plain>
+        关闭
+      </el-button>
+    </div>
+  </div>
+  <div class="info-content">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100" label-position="left">
+      <el-form-item label="溯源供方编号:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入溯源供方编号" />
+      </el-form-item>
+      <el-form-item label="公司名称:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入公司名称" />
+      </el-form-item>
+      <el-form-item label="公司简称:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入公司简称" />
+      </el-form-item>
+      <el-form-item label="业务内容:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入业务内容" />
+      </el-form-item>
+      <el-form-item label="税号:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入税号" />
+      </el-form-item>
+      <el-form-item label="银行账户名:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入银行账户名" />
+      </el-form-item>
+      <el-form-item label="银行名称:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入银行名称" />
+      </el-form-item>
+      <el-form-item label="银行账号:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入银行账号" />
+      </el-form-item>
+      <el-form-item label="邮编:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入邮编" />
+      </el-form-item>
+      <el-form-item label="负责人:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入负责人" />
+      </el-form-item>
+      <el-form-item label="电话:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入电话" />
+      </el-form-item>
+      <el-form-item label="传真:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入传真" />
+      </el-form-item>
+      <el-form-item label="手机:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入手机" />
+      </el-form-item>
+      <el-form-item label="邮箱:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="网址:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入网址" />
+      </el-form-item>
+      <div class="info-dizhi">
+        <el-form-item label="公司地址:">
+          <el-select v-model="formInline.supplierNo" placeholder="国别">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="省">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="市">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="区/县">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-input v-model="formInline.businessContent" placeholder="公司地址" />
+        </el-form-item>
+      </div>
+      <div class="info-dizhi">
+        <el-form-item label="开票用地址:">
+          <el-select v-model="formInline.supplierNo" placeholder="国别">
+            <el-option label="Zone one" value="shanghai" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="省">
+            <el-option label="Zone one" value="shanghai" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="市">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="区/县">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-input v-model="formInline.businessContent" placeholder="开票用地址" />
+        </el-form-item>
+      </div>
+      <div class="input-width">
+        <el-form-item label="公司业务范围:">
+          <el-input v-model="formInline.businessContent" placeholder="请输入公司业务范围" />
+        </el-form-item>
+      </div>
+      <div class="input-width">
+        <el-form-item label="备注:">
+          <el-input v-model="formInline.businessContent" placeholder="请输入备注" />
+        </el-form-item>
+      </div>
+      <div class="info-appendix">
+        <el-form-item label="附件:">
+          <span>扫描件.pdf X</span>
+          <el-button>上传</el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <el-tabs type="border-card">
+      <el-tab-pane label="人员信息">
+        <div class="table-top">
+          <div class="table-top-title">
+            人员信息
+          </div>
+          <div class="table-top-button">
+            <el-button>删除行</el-button>
+            <el-button>增加行</el-button>
+          </div>
+        </div>
+        <el-table :data="list" border style="width: 100%;">
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="业务记录">
+        <div class="table-top">
+          <div class="table-top-title">
+            业务记录
+          </div>
+          <div class="table-top-button">
+            <el-button>删除行</el-button>
+            <el-button>增加行</el-button>
+          </div>
+        </div>
+        <el-table :data="list" border style="width: 100%;">
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="标准装置信息">
+        <div class="table-top">
+          <div class="table-top-title">
+            标准装置信息
+          </div>
+          <div class="table-top-button">
+            <el-button>删除行</el-button>
+            <el-button>增加行</el-button>
+          </div>
+        </div>
+        <el-table :data="list" border style="width: 100%;">
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top-info {
+  padding: 10px 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .title {
+    width: 75%;
+    text-align: center;
+  }
+}
+
+.info-content {
+  padding: 15px;
+
+  .info-dizhi {
+    margin-right: 155px;
+  }
+}
+
+.el-select {
+  width: 9vw;
+  margin-right: 15px;
+}
+
+.info-dizhi .el-input {
+  width: 15vw;
+}
+
+.input-width .el-input {
+  width: 40vw;
+}
+
+.info-appendix span {
+  margin-right: 25px;
+}
+
+.table-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .table-top-title {
+    width: 60vw;
+    text-align: center;
+  }
+}
+</style>

diff --git a/src/api/system/source.ts b/src/api/system/source.ts
new file mode 100644
index 0000000..e0fabe7
--- /dev/null
+++ b/src/api/system/source.ts
@@ -0,0 +1,23 @@
+/**
+ * 溯源供方请求接口
+ */
+import request from '../index'
+const prefix = '/meter'
+
+// 列表查询
+export function getSoucreList(data: object) {
+  return request({
+    url: `${prefix}/supplier/list`,
+    method: 'post',
+    data,
+  })
+}
+
+// 数据删除
+export function getSoucreListDelete(data: object) {
+  return request({
+    url: `${prefix}/supplier/delete`,
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/measure/source/approve.vue b/src/views/measure/source/approve.vue
index 2fcdf5d..8efe918 100644
--- a/src/views/measure/source/approve.vue
+++ b/src/views/measure/source/approve.vue
@@ -1,3 +1,4 @@
 <template>
   <div>溯源供方审批</div>
 </template>
+
diff --git a/src/views/measure/source/list.vue b/src/views/measure/source/list.vue
index e966fb8..cad751e 100644
--- a/src/views/measure/source/list.vue
+++ b/src/views/measure/source/list.vue
@@ -1,3 +1,182 @@
+<script lang="ts" setup name="ListSource">
+import { reactive, ref } from 'vue'
+import type { Ref } from 'vue'
+import type { IlistQuery } from './list_interface'
+import ListSourceAdd from './listAdd.vue'
+import { getSoucreList, getSoucreListDelete } from '@/api/system/source'
+
+// 查询条件
+const listQuery: Ref<IlistQuery> = ref({
+  supplierNo: '', // 业务内容
+  supplierName: '', // 溯源供方名称
+  businessContent: '', // 溯源供方编号
+  offset: 1,
+  limit: 20,
+})
+// 控制是否显示新增页面
+const show = ref(true)
+// 表格数据
+const list = ref([])
+// 总数
+const total = ref(20)
+// 表头
+const columns = ref([
+  {
+    text: '溯源供方编号',
+    value: 'supplierNo',
+    width: '160',
+  },
+  {
+    text: '溯源供方名称',
+    value: 'supplierName',
+    width: '120',
+  },
+  {
+    text: '业务内容',
+    value: 'businessContent',
+  },
+  {
+    text: '业务资质',
+    value: 'briefName',
+  },
+  {
+    text: '负责人',
+    value: 'director',
+  },
+  {
+    text: '联系方式',
+    value: 'mobile',
+  },
+  {
+    text: '地址',
+    value: 'companyCity',
+  },
+  {
+    text: '创建时间',
+    value: 'createTime',
+    width: '200',
+  },
+  {
+    text: '备注',
+    value: 'remark',
+  },
+])
+
+// 按钮数组
+const buttons = ref(['批量导入', '模板下载', '新建', '导出', '打印'])
+// 表格loding
+const listLoading = ref(false)
+const fetchData = (isNowPage: boolean) => {
+  listLoading.value = true
+  if (!isNowPage) {
+    // 是否显示当前页，否则跳转第一页
+    listQuery.value.offset = 1
+  }
+  getSoucreList(listQuery.value).then((response) => {
+    list.value = response.data
+    total.value = parseInt(response.data.total)
+    listLoading.value = false
+  })
+}
+fetchData(true)
+// 多选发生改变时
+const handleSelectionChange = (e: any) => { }
+// 点击编辑/详情
+const handleEdit = (index: string, row: object) => {
+  show.value = false
+}
+// 点击删除
+const handleDelete = (index: string, row: object) => {
+  // getSoucreListDelete(row.target.id).then((res) => {
+
+  // })
+}
+// 分页
+const handleSizeChange = (val: string) => { }
+// 分页
+const handleCurrentChange = (val: string) => { }
+// 点击搜索
+const searchList = () => {
+  fetchData(true)
+}
+// 点击重置
+const clearList = () => {
+  listQuery.value = {
+    supplierNo: '', // 业务内容
+    supplierName: '', // 溯源供方名称
+    businessContent: '', // 溯源供方编号
+    offset: 1,
+    limit: 20,
+  }
+}
+</script>
+
 <template>
-  <div>溯源供方列表</div>
+  <div v-if="show">
+    <app-container>
+      <search-area type="seperate" need-clear @search="searchList" @clear="clearList">
+        <search-item>
+          <el-input v-model.trim="listQuery.supplierNo" placeholder="溯源供方编号" clearable />
+        </search-item>
+        <search-item>
+          <el-input v-model.trim="listQuery.supplierName" placeholder="溯源供方名称" clearable />
+        </search-item>
+        <search-item>
+          <el-input v-model.trim="listQuery.businessContent" placeholder="业务内容" clearable />
+        </search-item>
+      </search-area>
+    </app-container>
+    <app-container>
+      <div class="table-top">
+        <h3>数据列表</h3>
+        <div>
+          <el-button v-for="(item, index) in buttons" :key="index" type="primary">
+            {{ item }}
+          </el-button>
+        </div>
+      </div>
+      <el-table :data="list" style="width: 100%;" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" />
+        <el-table-column align="center" label="序号" width="80" type="index" />
+        <el-table-column
+          v-for="(column, index) in columns" :key="index" :label="column.text" :prop="column.value"
+          :width="column.width" align="center"
+        />
+        <el-table-column align="center" label="操作" width="240">
+          <template #default="scope">
+            <el-button size="small" type="primary" link @click="handleEdit(scope.$index, scope.row)">
+              编辑
+            </el-button>
+            <el-button size="small" link type="primary" @click="handleEdit(scope.$index, scope.row)">
+              详情
+            </el-button>
+            <el-button size="small" link type="danger" @click="handleDelete(scope.$index, scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </app-container>
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="listQuery.offset" v-model:page-size="listQuery.limit"
+        :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
+        @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+  <list-source-add v-else />
 </template>
+
+<style lang="scss" scoped>
+.table-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pagination {
+  position: fixed;
+  bottom: 0;
+}
+</style>
diff --git a/src/views/measure/source/listAdd.vue b/src/views/measure/source/listAdd.vue
new file mode 100644
index 0000000..609ba57
--- /dev/null
+++ b/src/views/measure/source/listAdd.vue
@@ -0,0 +1,233 @@
+<script lang="ts" setup name="ListSourceAdd">
+import { reactive, ref } from 'vue'
+import type { Ref } from 'vue'
+import type { IlistQuery } from './list_interface'
+const formInline: Ref<IlistQuery> = ref({
+  businessContent: '',
+  supplierName: '',
+  supplierNo: '',
+
+})
+const list = ref([{ name: '张三', address: '666', date: '777' }])
+</script>
+
+<template>
+  <div class="top-info">
+    <h4 class="title">
+      基本信息
+    </h4>
+    <div>
+      <el-button type="primary" plain>
+        导出
+      </el-button>
+      <el-button type="warning" plain>
+        关闭
+      </el-button>
+    </div>
+  </div>
+  <div class="info-content">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100" label-position="left">
+      <el-form-item label="溯源供方编号:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入溯源供方编号" />
+      </el-form-item>
+      <el-form-item label="公司名称:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入公司名称" />
+      </el-form-item>
+      <el-form-item label="公司简称:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入公司简称" />
+      </el-form-item>
+      <el-form-item label="业务内容:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入业务内容" />
+      </el-form-item>
+      <el-form-item label="税号:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入税号" />
+      </el-form-item>
+      <el-form-item label="银行账户名:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入银行账户名" />
+      </el-form-item>
+      <el-form-item label="银行名称:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入银行名称" />
+      </el-form-item>
+      <el-form-item label="银行账号:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入银行账号" />
+      </el-form-item>
+      <el-form-item label="邮编:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入邮编" />
+      </el-form-item>
+      <el-form-item label="负责人:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入负责人" />
+      </el-form-item>
+      <el-form-item label="电话:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入电话" />
+      </el-form-item>
+      <el-form-item label="传真:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入传真" />
+      </el-form-item>
+      <el-form-item label="手机:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入手机" />
+      </el-form-item>
+      <el-form-item label="邮箱:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="网址:">
+        <el-input v-model="formInline.businessContent" placeholder="请输入网址" />
+      </el-form-item>
+      <div class="info-dizhi">
+        <el-form-item label="公司地址:">
+          <el-select v-model="formInline.supplierNo" placeholder="国别">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="省">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="市">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="区/县">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-input v-model="formInline.businessContent" placeholder="公司地址" />
+        </el-form-item>
+      </div>
+      <div class="info-dizhi">
+        <el-form-item label="开票用地址:">
+          <el-select v-model="formInline.supplierNo" placeholder="国别">
+            <el-option label="Zone one" value="shanghai" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="省">
+            <el-option label="Zone one" value="shanghai" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="市">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-select v-model="formInline.supplierNo" placeholder="区/县">
+            <el-option label="Zone one" value="shanghai" />
+            <el-option label="Zone two" value="beijing" />
+          </el-select>
+          <el-input v-model="formInline.businessContent" placeholder="开票用地址" />
+        </el-form-item>
+      </div>
+      <div class="input-width">
+        <el-form-item label="公司业务范围:">
+          <el-input v-model="formInline.businessContent" placeholder="请输入公司业务范围" />
+        </el-form-item>
+      </div>
+      <div class="input-width">
+        <el-form-item label="备注:">
+          <el-input v-model="formInline.businessContent" placeholder="请输入备注" />
+        </el-form-item>
+      </div>
+      <div class="info-appendix">
+        <el-form-item label="附件:">
+          <span>扫描件.pdf X</span>
+          <el-button>上传</el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <el-tabs type="border-card">
+      <el-tab-pane label="人员信息">
+        <div class="table-top">
+          <div class="table-top-title">
+            人员信息
+          </div>
+          <div class="table-top-button">
+            <el-button>删除行</el-button>
+            <el-button>增加行</el-button>
+          </div>
+        </div>
+        <el-table :data="list" border style="width: 100%;">
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="业务记录">
+        <div class="table-top">
+          <div class="table-top-title">
+            业务记录
+          </div>
+          <div class="table-top-button">
+            <el-button>删除行</el-button>
+            <el-button>增加行</el-button>
+          </div>
+        </div>
+        <el-table :data="list" border style="width: 100%;">
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="标准装置信息">
+        <div class="table-top">
+          <div class="table-top-title">
+            标准装置信息
+          </div>
+          <div class="table-top-button">
+            <el-button>删除行</el-button>
+            <el-button>增加行</el-button>
+          </div>
+        </div>
+        <el-table :data="list" border style="width: 100%;">
+          <el-table-column prop="date" label="Date" />
+          <el-table-column prop="name" label="Name" />
+          <el-table-column prop="address" label="Address" />
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top-info {
+  padding: 10px 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .title {
+    width: 75%;
+    text-align: center;
+  }
+}
+
+.info-content {
+  padding: 15px;
+
+  .info-dizhi {
+    margin-right: 155px;
+  }
+}
+
+.el-select {
+  width: 9vw;
+  margin-right: 15px;
+}
+
+.info-dizhi .el-input {
+  width: 15vw;
+}
+
+.input-width .el-input {
+  width: 40vw;
+}
+
+.info-appendix span {
+  margin-right: 25px;
+}
+
+.table-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .table-top-title {
+    width: 60vw;
+    text-align: center;
+  }
+}
+</style>
diff --git a/src/views/measure/source/list_interface.ts b/src/views/measure/source/list_interface.ts
new file mode 100644
index 0000000..cebfa79
--- /dev/null
+++ b/src/views/measure/source/list_interface.ts
@@ -0,0 +1,15 @@
+export interface IlistQuery {
+  businessContent: string
+  supplierName: string
+  supplierNo: string
+  logType?: string
+  offset: number
+  limit: number
+}
+
+export interface IformInline {
+  businessContent: string
+  supplierName: string
+  supplierNo: string
+}
+