klp-oa/klp-ui/src/views/erp/supplier/index.vue

<template>
  <div class="erp-supplier-page">
    <section class="surface-panel supplier-panel">
      <header class="surface-header">
        <span>供应商档案</span>
        <el-button type="primary" size="small" @click="openSupplierDialog()">新增</el-button>
      </header>
      <div class="inline-filter">
        <el-input v-model="supplierQuery.name" placeholder="供应商名称" size="small" clearable />
        <el-select v-model="supplierQuery.creditRating" placeholder="信用等级" size="small" clearable>
          <el-option label="A" value="A" />
          <el-option label="B" value="B" />
          <el-option label="C" value="C" />
          <el-option label="D" value="D" />
        </el-select>
        <div class="filter-actions">
          <el-button size="small" type="primary" @click="loadSuppliers">查询</el-button>
          <el-button size="small" @click="resetSupplierQuery">重置</el-button>
        </div>
      </div>
      <div class="supplier-grid" v-loading="supplierLoading">
        <div
          v-for="item in supplierList"
          :key="item.supplierId"
          class="supplier-card"
        >
          <div class="card-head">
            <div>
              <p class="title">{{ item.name }}</p>
              <p class="sub">编码：{{ item.supplierCode || '-' }}</p>
            </div>
            <div class="tag-group">
              <el-tag size="mini" type="info">{{ supplierTypeLabel(item.type) }}</el-tag>
              <el-tag size="mini" type="plain">信用 {{ item.creditRating || '-' }}</el-tag>
            </div>
          </div>
          <ul class="card-body">
            <li><span>联系人</span><strong>{{ item.contactPerson || '-' }}</strong></li>
            <li><span>电话</span><strong>{{ item.contactPhone || '-' }}</strong></li>
            <li><span>地址</span><strong>{{ item.address || '-' }}</strong></li>
            <li><span>备注</span><strong>{{ item.remark || '-' }}</strong></li>
          </ul>
          <div class="card-actions">
            <el-button type="text" size="mini" @click="openSupplierDialog(item)">编辑</el-button>
            <el-button type="text" size="mini" @click="openPriceDrawer(item)">价格</el-button>
            <el-button type="text" size="mini" class="danger" @click="handleDeleteSupplier(item)">删除</el-button>
          </div>
        </div>
        <el-empty v-if="!supplierList.length && !supplierLoading" description="暂无数据" />
      </div>
    </section>

    <el-drawer
      title="供应商价格表"
      :visible.sync="priceDrawer.visible"
      size="480px"
      direction="rtl"
      append-to-body
      custom-class="price-drawer"
      @close="closePriceDrawer"
    >
      <div class="price-drawer-body">
        <div class="drawer-header" v-if="priceDrawer.supplier">
          <div class="drawer-title-block">
            <p class="drawer-title">{{ priceDrawer.supplier.name }}</p>
            <p class="drawer-sub">编码：{{ priceDrawer.supplier.supplierCode || '-' }}</p>
          </div>
          <el-button type="primary" size="mini" @click="openPriceDialog()">新增价格</el-button>
        </div>

        <div class="drawer-section">
          <div class="drawer-section-title">价格列表</div>
          <el-collapse v-model="activePricePanels" accordion>
            <el-collapse-item
              v-for="item in priceList"
              :name="item.priceId"
              :title="`${item.materialTypeCode || '未指定'} · ￥${item.price || 0}`"
              :key="item.priceId"
            >
              <ul class="price-info">
                <li><span>规格</span>{{ item.specification || '-' }}</li>
                <li><span>含税价</span>{{ item.price || '-' }}</li>
                <li><span>有效期</span>{{ formatRange(item.validFrom, item.validTo) }}</li>
                <li><span>备注</span>{{ item.remark || '-' }}</li>
              </ul>
              <div class="price-actions">
                <el-button type="text" size="mini" @click="openPriceDialog(item)">编辑</el-button>
                <el-button type="text" size="mini" class="danger" @click="handleDeletePrice(item)">删除</el-button>
              </div>
            </el-collapse-item>
          </el-collapse>
          <el-empty v-if="!priceList.length && !priceLoading" description="暂无价格记录" />
          <el-skeleton v-if="priceLoading" animated rows="4" />
        </div>
      </div>
    </el-drawer>

    <!-- 供应商弹窗 -->
    <el-dialog :title="supplierDialog.title" :visible.sync="supplierDialog.visible" width="520px">
      <el-form :model="supplierDialog.form" :rules="supplierRules" ref="supplierForm" label-width="90px" size="small">
        <el-form-item label="编码" prop="supplierCode">
          <el-input v-model="supplierDialog.form.supplierCode" />
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="supplierDialog.form.name" />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="supplierDialog.form.type" placeholder="请选择类型">
            <el-option v-for="opt in supplierTypeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="信用等级">
          <el-select v-model="supplierDialog.form.creditRating" clearable>
            <el-option label="A" value="A" />
            <el-option label="B" value="B" />
            <el-option label="C" value="C" />
            <el-option label="D" value="D" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="supplierDialog.form.contactPerson" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="supplierDialog.form.contactPhone" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="supplierDialog.form.address" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="supplierDialog.form.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="supplierDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitSupplier">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 价格弹窗 -->
    <el-dialog :title="priceDialog.title" :visible.sync="priceDialog.visible" width="520px">
      <el-form :model="priceDialog.form" :rules="priceRules" ref="priceForm" label-width="100px" size="small">
        <el-form-item label="供应商" prop="supplierId">
          <el-select v-model="priceDialog.form.supplierId" placeholder="选择供应商">
            <el-option v-for="sp in supplierOptions" :key="sp.supplierId" :label="sp.name" :value="sp.supplierId" />
          </el-select>
        </el-form-item>
        <el-form-item label="原料" prop="rawMaterialId">
          <RawMaterialSelect v-model="priceDialog.form.rawMaterialId" @change="handleMaterialChange" />
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input v-model="priceDialog.form.materialTypeCode" placeholder="选择原料后自动带出" readonly />
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="priceDialog.form.specification" placeholder="选择原料后可调整" />
        </el-form-item>
        <el-form-item label="含税价格" prop="price">
          <el-input-number v-model="priceDialog.form.price" :min="0" :precision="2" />
        </el-form-item>
        <el-form-item label="有效期">
          <el-date-picker
            v-model="priceValidRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始"
            end-placeholder="结束"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="priceDialog.form.remark" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="priceDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitPrice">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listSupplier,
  addSupplier,
  updateSupplier,
  delSupplier,
  listSupplierPrice,
  addSupplierPrice,
  updateSupplierPrice,
  delSupplierPrice
} from '@/api/erp/purchase'
import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'

export default {
  name: 'ErpSupplierManage',
  components: { RawMaterialSelect },
  data() {
    return {
      supplierTypeOptions: [
        { label: '原料供应商', value: 'RAW' },
        { label: '其他供应商', value: 'OTHER' }
      ],
      supplierQuery: { pageNum: 1, pageSize: 50, name: null, creditRating: null },
      supplierList: [],
      supplierLoading: false,
      supplierDialog: { visible: false, title: '', form: {} },
      supplierRules: {
        supplierCode: [{ required: true, message: '请输入编码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }]
      },
      priceQuery: { pageNum: 1, pageSize: 50, supplierId: null },
      priceList: [],
      priceLoading: false,
      priceDialog: { visible: false, title: '', form: {} },
      priceRules: {
        supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
        rawMaterialId: [{ required: true, message: '请选择原料', trigger: 'change' }],
        price: [{ required: true, message: '请输入价格', trigger: 'change' }]
      },
      priceValidRange: [],
      supplierOptions: [],
      priceDrawer: { visible: false, supplier: null },
      activePricePanels: []
    }
  },
  created() {
    this.loadSuppliers()
    this.loadPrices()
  },
  methods: {
    loadSuppliers() {
      this.supplierLoading = true
      listSupplier(this.supplierQuery)
        .then(res => {
          this.supplierList = res.rows || []
          this.supplierOptions = this.supplierList
        })
        .finally(() => {
          this.supplierLoading = false
        })
    },
    resetSupplierQuery() {
      this.supplierQuery = { pageNum: 1, pageSize: 50, name: null, creditRating: null }
      this.loadSuppliers()
    },
    openSupplierDialog(row) {
      if (row) {
        this.supplierDialog.form = { ...row }
        this.supplierDialog.title = '编辑供应商'
      } else {
        this.supplierDialog.form = { supplierCode: '', name: '', creditRating: 'A', type: 'RAW' }
        this.supplierDialog.title = '新增供应商'
      }
      this.supplierDialog.visible = true
      this.$nextTick(() => this.$refs.supplierForm && this.$refs.supplierForm.clearValidate())
    },
    submitSupplier() {
      this.$refs.supplierForm.validate(valid => {
        if (!valid) return
        const api = this.supplierDialog.form.supplierId ? updateSupplier : addSupplier
        api(this.supplierDialog.form).then(() => {
          this.$message.success('保存成功')
          this.supplierDialog.visible = false
          this.loadSuppliers()
        })
      })
    },
    handleDeleteSupplier(row) {
      this.$confirm('确认删除该供应商吗？', '提示').then(() => {
        return delSupplier(row.supplierId)
      }).then(() => {
        this.$message.success('删除成功')
        this.loadSuppliers()
      })
    },
    supplierTypeLabel(val) {
      const target = this.supplierTypeOptions.find(opt => opt.value === val)
      return target ? target.label : '其他供应商'
    },
    // price
    openPriceDrawer(item) {
      this.priceDrawer = { visible: true, supplier: item }
      this.priceQuery = { ...this.priceQuery, supplierId: item.supplierId, pageNum: 1 }
      this.loadPrices()
    },
    closePriceDrawer() {
      this.priceDrawer.visible = false
      this.priceDrawer.supplier = null
      this.priceList = []
    },
    loadPrices() {
      if (!this.priceQuery.supplierId) {
        this.priceList = []
        return
      }
      this.priceLoading = true
      listSupplierPrice(this.priceQuery)
        .then(res => {
          this.priceList = res.rows || []
          this.activePricePanels = (this.priceList[0] && [this.priceList[0].priceId]) || []
        })
        .finally(() => {
          this.priceLoading = false
        })
    },
    matchSupplier(id) {
      const target = this.supplierOptions.find(sp => sp.supplierId === id)
      return target ? target.name : id
    },
    openPriceDialog(row) {
      if (!this.supplierOptions.length) {
        this.$message.warning('请先维护供应商')
        return
      }
      if (row) {
        this.priceDialog.form = { ...row }
        this.priceValidRange = [row.validFrom, row.validTo]
        this.priceDialog.title = '编辑价格'
      } else {
        const currentSupplierId = this.priceDrawer.supplier?.supplierId || null
        this.priceDialog.form = { supplierId: currentSupplierId, rawMaterialId: '', materialTypeCode: '', specification: '', price: 0 }
        this.priceValidRange = []
        this.priceDialog.title = '新增价格'
      }
      this.priceDialog.visible = true
      this.$nextTick(() => this.$refs.priceForm && this.$refs.priceForm.clearValidate())
    },
    submitPrice() {
      this.$refs.priceForm.validate(valid => {
        if (!valid) return
        if (this.priceValidRange && this.priceValidRange.length === 2) {
          this.priceDialog.form.validFrom = this.priceValidRange[0]
          this.priceDialog.form.validTo = this.priceValidRange[1]
        }
        if (!this.priceDialog.form.materialTypeCode) {
          this.$message.warning('请先选择原料')
          return
        }
        const api = this.priceDialog.form.priceId ? updateSupplierPrice : addSupplierPrice
        api(this.priceDialog.form).then(() => {
          this.$message.success('保存成功')
          this.priceDialog.visible = false
          this.loadPrices()
        })
      })
    },
    handleDeletePrice(row) {
      this.$confirm('确认删除该价格吗？', '提示').then(() => {
        return delSupplierPrice(row.priceId)
      }).then(() => {
        this.$message.success('删除成功')
        this.loadPrices()
      })
    },
    handleMaterialChange(val, rows) {
      const target = Array.isArray(rows) ? rows[0] : null
      this.priceDialog.form.rawMaterialId = val
      if (target) {
        this.priceDialog.form.materialTypeCode = target.rawMaterialCode
        this.priceDialog.form.specification = target.specification
      }
    },
    formatRange(start, end) {
      if (!start && !end) return '-'
      return `${start || '-'} ~ ${end || '-'}`
    }
  }
}
</script>

<style lang="scss" scoped>
.erp-supplier-page {
  padding: 16px;
  min-height: 100%;
}
.surface-panel {
  background: #fff;
  border: 1px solid #d6dce1;
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: #1b2a38;
}
.inline-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  .filter-actions {
    display: flex;
    gap: 8px;
  }
  > *:not(.filter-actions) {
    flex: 1 1 150px;
  }
}
.supplier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.supplier-card {
  border: 1px solid #d6dce1;
  padding: 12px;
  border-radius: 4px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .title {
    font-weight: 600;
    margin: 0;
    color: #15212d;
  }
  .sub {
    margin: 2px 0 0;
    color: #79828c;
    font-size: 12px;
  }
  .tag-group {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
  }
}
.card-body {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #4a5663;
    & + li {
      margin-top: 4px;
    }
    span {
      color: #8a96a3;
    }
    strong {
      color: #151e26;
    }
  }
}
.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  .danger {
    color: #c0392b;
  }
}
.price-drawer {
  .price-drawer-body {
    padding: 16px 20px 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .drawer-header {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 4px;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .drawer-title-block {
    display: flex;
    flex-direction: column;
  }
  .drawer-title {
    margin: 0;
    font-weight: 600;
    color: #1f2a37;
  }
  .drawer-sub {
    margin-top: 4px;
    color: #7a8694;
    font-size: 12px;
  }
  .drawer-section {
    margin-top: 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .drawer-section-title {
    font-size: 13px;
    color: #5c6c7b;
    margin-bottom: 8px;
  }
  ::v-deep .el-collapse-item__header {
    padding-left: 10px;
  }
  ::v-deep .el-collapse-item__content {
    padding: 10px 10px 12px;
  }
  .price-info {
    list-style: none;
    padding: 0;
    margin: 0 0 4px;
    li {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: #4a5663;
      & + li {
        margin-top: 4px;
      }
      span {
        color: #8a96a3;
      }
    }
  }
  .price-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    .danger {
      color: #c0392b;
    }
  }
}
</style>