资源需求（标准物质相关）模块调整；新增统一附件组件并接入供应商管理与客户满意度；客户满意度表单改客户卡片下拉并关联已完成委托单；预览、图表、导航栏等组件调整

吴羡

8 小时以前 b4c2cbc7825fe4732fb6333447fdada9567bcb97

 src/views/CNAS/systemManagement/customerSatisfaction/components/formDialog.vue

@@ -22,11 +22,19 @@
        </tr>
        <tr>
          <td class="td-title">
            <p>姓名：</p>
            <p>客户：</p>
          </td>
          <td class="td-info">
            <el-input v-model="form.userName" placeholder="请输入内容" size="small">
            </el-input>
            <el-select v-model="form.orderId" filterable clearable size="small" style="width: 100%"
              popper-class="customer-select-popper" placeholder="请选择客户（已完成委托单）" @change="onCustomerChange">
              <el-option v-for="opt in customerOptions" :key="opt.id" :label="opt.company" :value="opt.id">
                <div class="customer-card">
                  <div>客户：{{ opt.company }}</div>
                  <div class="customer-card-sub">委托单编号：{{ opt.entrustCode || '--' }}</div>
                  <div class="customer-card-sub">样品名称：{{ opt.sampleName || '--' }}</div>
                </div>
              </el-option>
            </el-select>
          </td>
          <td class="td-title">
            <p>部门：</p>
@@ -142,6 +150,7 @@
  addClientSatisfaction,
  updateClientSatisfaction
} from '@/api/cnas/systemManagement/customerSatisfaction.js'
import { selectCompletedOrders } from '@/api/business/productOrder'
export default {
  name: 'formDialog',
  // import 引入的组件需要注入到对象中才能使用
@@ -157,6 +166,7 @@
        department: '',
        contactNumber: '',
        serviceAttitude: '',
        serviceAttitudeSuggestion: '',
        technicalCompetence: '',
        technicalCompetenceSuggestion: '',
        inspectionWork: '',
@@ -165,7 +175,12 @@
        reasonableFeesSuggestion: '',
        remark: '',
        clientSatisfactionId: '',
        orderId: '',
        entrustCode: '',
        sampleName: ''
      },
      // 客户下拉选项：只包含"已下过委托单且已完成"的数据
      customerOptions: [],
      operationType: '',
      editLoad: false,

@@ -173,14 +188,89 @@
  },
  // 方法集合
  methods: {
    openDia(type, row) {
    async openDia(type, row) {
      this.formDia = true;
      this.operationType = type
      await this.loadCustomerOptions()
      if (this.operationType === 'edit') {
        this.form = { ...row }
        // 老数据没有关联委托单：合成一个选项把原来的值回显出来，不强制重选
        if (row.orderId == null && row.userName) {
          this.customerOptions.unshift({
            id: 0,
            company: row.userName,
            entrustCode: row.entrustCode || '--',
            sampleName: row.sampleName || '--'
          })
          this.form.orderId = 0
        } else if (row.orderId && !this.customerOptions.some(o => o.id === row.orderId)) {
          // 关联的委托单已不是"已完成"状态，用记录里的信息兜底回显
          this.customerOptions.unshift({
            id: row.orderId,
            company: row.userName || '未知客户',
            entrustCode: row.entrustCode || '--',
            sampleName: row.sampleName || '--'
          })
        }
      } else {
        this.resetForm()
      }
    },
    resetForm() {
      this.form = {
        unitName: '',
        fillDate: '',
        userName: '',
        department: '',
        contactNumber: '',
        serviceAttitude: '',
        serviceAttitudeSuggestion: '',
        technicalCompetence: '',
        technicalCompetenceSuggestion: '',
        inspectionWork: '',
        inspectionWorkSuggestion: '',
        reasonableFees: '',
        reasonableFeesSuggestion: '',
        remark: '',
        clientSatisfactionId: '',
        orderId: '',
        entrustCode: '',
        sampleName: ''
      }
    },
    // 下拉数据：后端只返回"已检验"的委托单（state=4）
    loadCustomerOptions() {
      this.customerOptions = []
      return selectCompletedOrders().then(res => {
        if (res.code === 200 && res.data) {
          this.customerOptions = res.data.map(o => ({
            id: o.id,
            company: o.company,
            entrustCode: o.entrustCode,
            sampleName: o.sampleView
          }))
        }
      }).catch(err => {
        console.log('err---', err)
      })
    },
    // 选中客户后：回填客户名并自动带出单位名称、委托单编号、样品名称
    onCustomerChange(val) {
      const opt = this.customerOptions.find(o => o.id === val)
      if (!opt || opt.id === 0) {
        return
      }
      this.form.userName = opt.company
      this.form.entrustCode = opt.entrustCode
      this.form.sampleName = opt.sampleName
      this.form.unitName = opt.company
    },
    handleEdit() {
      const orderIdEmpty = this.form.orderId === '' || this.form.orderId === null || this.form.orderId === undefined
      if (orderIdEmpty) {
        this.$message.warning('请选择客户')
        return
      }
      if (!this.form.unitName) {
        this.$message.warning('请填写单位名称')
        return
@@ -190,8 +280,13 @@
        return
      }
      this.editLoad = true
      const payload = { ...this.form }
      // 老数据合成的回显选项（id=0）不算真实关联，保存时仍保持未关联
      if (payload.orderId === 0) {
        payload.orderId = null
      }
      if (this.operationType === 'add') {
        addClientSatisfaction(this.form).then(res => {
        addClientSatisfaction(payload).then(res => {
          this.editLoad = false
          this.$message.success('提交成功')
          this.closeFormDia()
@@ -200,7 +295,7 @@
          this.editLoad = false
        })
      } else {
        updateClientSatisfaction(this.form).then(res => {
        updateClientSatisfaction(payload).then(res => {
          this.editLoad = false
          this.$message.success('提交成功')
          this.closeFormDia()
@@ -251,4 +346,18 @@
  word-wrap: break-word;
  white-space: normal;
}

.customer-card-sub {
  color: #909399;
  font-size: 12px;
}
</style>

<style>
/* 下拉卡片三行需要自适应高度，弹层 teleport 到 body，用自定义 popper-class 命中 */
.customer-select-popper .el-select-dropdown__item {
  height: auto;
  line-height: 1.7;
  padding: 6px 12px;
}
</style>