# 销售台账/销售报价-总合同号联动选择及附件查看

## 涉及页面

- 销售台账列表页/新增编辑页
- 销售报价列表页/新增编辑页

## 新增API

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /basic/customer-contract/list/{customerId} | 查询客户合同记录列表（供下拉选择） |
| GET | /basic/customer-contract/files/byContractNo?masterContractNo=xxx | 根据总合同号查询附件 |

## 前端修改点

### 1. 销售台账新增/编辑页 - 客户选择后联动总合同号

```html
<el-form-item label="客户名称" prop="customerId">
  <el-select
    v-model="form.customerId"
    placeholder="请选择客户"
    filterable
    @change="handleCustomerChange"
  >
    <el-option
      v-for="item in customerList"
      :key="item.id"
      :label="item.customerName"
      :value="item.id"
    />
  </el-select>
</el-form-item>

<el-form-item label="总合同号" prop="masterContractNo">
  <el-select
    v-model="form.masterContractNo"
    placeholder="请先选择客户"
    filterable
    clearable
    :disabled="!form.customerId"
  >
    <el-option
      v-for="item in contractList"
      :key="item.id"
      :label="item.masterContractNo"
      :value="item.masterContractNo"
    />
  </el-select>
</el-form-item>
```

### 2. 销售报价新增/编辑页 - 同样添加客户和总合同号联动

```html
<el-form-item label="客户名称" prop="customerId">
  <el-select
    v-model="form.customerId"
    placeholder="请选择客户"
    filterable
    @change="handleCustomerChange"
  >
    <el-option
      v-for="item in customerList"
      :key="item.id"
      :label="item.customerName"
      :value="item.id"
    />
  </el-select>
</el-form-item>

<el-form-item label="总合同号" prop="masterContractNo">
  <el-select
    v-model="form.masterContractNo"
    placeholder="请先选择客户"
    filterable
    clearable
    :disabled="!form.customerId"
  >
    <el-option
      v-for="item in contractList"
      :key="item.id"
      :label="item.masterContractNo"
      :value="item.masterContractNo"
    />
  </el-select>
</el-form-item>
```

### 3. 销售台账列表页 - 操作栏添加查看总合同附件按钮

```html
<el-table-column label="操作" width="200">
  <template #default="{ row }">
    <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
    <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
    <el-button
      type="text"
      size="small"
      v-if="row.masterContractNo"
      @click="handleViewContractFiles(row)"
    >查看附件</el-button>
  </template>
</el-table-column>
```

### 4. 总合同附件查看弹窗

```html
<el-dialog title="总合同附件" v-model="contractFileDialogVisible" width="600px">
  <el-table :data="contractFileList" v-if="contractFileList.length">
    <el-table-column prop="name" label="文件名称" />
    <el-table-column prop="byteSize" label="文件大小" width="120">
      <template #default="{ row }">
        {{ formatFileSize(row.byteSize) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template #default="{ row }">
        <el-link type="primary" :href="row.previewURL" target="_blank">预览</el-link>
        <el-link type="primary" :href="row.downloadURL" style="margin-left: 10px">下载</el-link>
      </template>
    </el-table-column>
  </el-table>
  <el-empty v-else description="暂无附件" />
</el-dialog>
```

### 5. data 数据

```js
data() {
  return {
    // 合同列表（供下拉选择）
    contractList: [],
    // 总合同附件弹窗
    contractFileDialogVisible: false,
    contractFileList: []
  }
}
```

### 6. 方法

```js
methods: {
  // 客户选择变化时，加载该客户的合同列表
  async handleCustomerChange(customerId) {
    this.form.masterContractNo = ''  // 清空总合同号
    this.contractList = []
    if (!customerId) return
    
    const res = await this.$http.get(`/basic/customer-contract/list/${customerId}`)
    if (res.code === 200) {
      this.contractList = res.data
    }
  },

  // 查看总合同附件
  async handleViewContractFiles(row) {
    if (!row.masterContractNo) {
      this.$message.warning('该记录没有总合同号')
      return
    }
    const res = await this.$http.get('/basic/customer-contract/files/byContractNo', {
      params: { masterContractNo: row.masterContractNo }
    })
    if (res.code === 200) {
      this.contractFileList = res.data || []
      this.contractFileDialogVisible = true
    }
  },

  // 格式化文件大小
  formatFileSize(bytes) {
    if (!bytes) return '0 B'
    const k = 1024
    const sizes = ['B', 'KB', 'MB', 'GB']
    const i = Math.floor(Math.log(bytes) / Math.log(k))
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
  }
}
```

### 7. 销售台账/报价列表页 - 表格显示总合同号列

```html
<el-table-column prop="masterContractNo" label="总合同号" width="150" show-overflow-tooltip />
```

### 8. 编辑页打开时回显总合同号

```js
// 打开编辑弹窗时，加载客户的合同列表并回显
async handleEdit(row) {
  this.form = { ...row }
  this.dialogVisible = true
  
  // 加载客户的合同列表
  if (row.customerId) {
    const res = await this.$http.get(`/basic/customer-contract/list/${row.customerId}`)
    if (res.code === 200) {
      this.contractList = res.data
    }
  }
}
```

## 注意事项

- 总合同号来源于客户档案私海的合同记录子表
- 选择顺序：先选客户 -> 自动加载该客户的合同列表 -> 再选总合同号
- 销售台账表已有 `master_contract_no` 字段，销售报价表需新增该字段
- 查看附件按钮仅在总合同号存在时显示
- 附件列表通过总合同号查询，支持预览和下载