修改采购ui

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

@@ -1,82 +1,99 @@
 <template>
   <div class="erp-supplier-page">
-    <el-row :gutter="16">
-      <el-col :span="10">
-        <el-card shadow="never" class="panel-card">
-          <div slot="header" class="panel-header">
-            <span>供应商档案</span>
-            <el-button type="primary" size="mini" @click="openSupplierDialog()">新增</el-button>
+    <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>
-          <div class="toolbar">
-            <el-input v-model="supplierQuery.name" placeholder="供应商名称" size="small" clearable class="toolbar-input" />
-            <el-select v-model="supplierQuery.creditRating" placeholder="信用等级" size="small" clearable class="toolbar-input">
-              <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-button size="small" type="primary" @click="loadSuppliers">查询</el-button>
-            <el-button size="small" @click="resetSupplierQuery">重置</el-button>
+          <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>
-          <el-table :data="supplierList" height="420" size="small" border v-loading="supplierLoading">
-            <el-table-column prop="supplierCode" label="编码" width="120" />
-            <el-table-column prop="name" label="名称" min-width="160" />
-            <el-table-column prop="creditRating" label="信用" width="80" />
-            <el-table-column label="联系人" width="140">
-              <template slot-scope="scope">
-                <div>{{ scope.row.contactPerson || '-' }}</div>
-                <div class="cell-sub">{{ scope.row.contactPhone || '' }}</div>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="160">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" @click="openSupplierDialog(scope.row)">编辑</el-button>
-                <el-button type="text" size="mini" @click="handleDeleteSupplier(scope.row)" style="color:#c0392b">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-      <el-col :span="14">
-        <el-card shadow="never" class="panel-card">
-          <div slot="header" class="panel-header">
-            <span>供应商价格表</span>
-            <el-button type="primary" size="mini" @click="openPriceDialog()">新增价格</el-button>
+        </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>
-          <div class="toolbar">
-            <el-input v-model="priceQuery.materialTypeCode" placeholder="物料编码" size="small" clearable class="toolbar-input" />
-            <el-select v-model="priceQuery.supplierId" placeholder="供应商" size="small" clearable class="toolbar-input">
-              <el-option v-for="sp in supplierOptions" :key="sp.supplierId" :label="sp.name" :value="sp.supplierId" />
-            </el-select>
-            <el-date-picker v-model="priceRange" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至"
-              start-placeholder="生效日期" end-placeholder="失效日期" />
-            <el-button size="small" type="primary" @click="loadPrices">查询</el-button>
-          </div>
-          <el-table :data="priceList" size="small" border v-loading="priceLoading">
-            <el-table-column prop="supplierId" label="供应商" width="150">
-              <template slot-scope="scope">
-                {{ matchSupplier(scope.row.supplierId) }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="materialTypeCode" label="物料类型" width="160" />
-            <el-table-column prop="specification" label="规格" min-width="140" />
-            <el-table-column prop="price" label="价格(含税)" width="110" />
-            <el-table-column label="有效期" width="200">
-              <template slot-scope="scope">
-                <div>{{ scope.row.validFrom || '-' }}</div>
-                <div class="cell-sub">{{ scope.row.validTo || '-' }}</div>
-              </template>
-            </el-table-column>
-            <el-table-column label="操作" width="160">
-              <template slot-scope="scope">
-                <el-button type="text" size="mini" @click="openPriceDialog(scope.row)">编辑</el-button>
-                <el-button type="text" size="mini" @click="handleDeletePrice(scope.row)" style="color:#c0392b">删除</el-button>
-              </template>
-            </el-table-column>
-          </el-table>
-        </el-card>
-      </el-col>
-    </el-row>
+          <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">
@@ -87,8 +104,10 @@
         <el-form-item label="名称" prop="name">
           <el-input v-model="supplierDialog.form.name" />
         </el-form-item>
-        <el-form-item label="类型">
-          <el-input v-model="supplierDialog.form.type" />
+        <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>
@@ -125,11 +144,14 @@
             <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="materialTypeCode">
-          <el-input v-model="priceDialog.form.materialTypeCode" />
+        <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" />
+          <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" />
@@ -166,31 +188,39 @@ import {
   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' }]
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        type: [{ required: true, message: '请选择类型', trigger: 'change' }]
       },
-      priceQuery: { pageNum: 1, pageSize: 50, supplierId: null, materialTypeCode: null },
+      priceQuery: { pageNum: 1, pageSize: 50, supplierId: null },
       priceList: [],
       priceLoading: false,
       priceDialog: { visible: false, title: '', form: {} },
       priceRules: {
         supplierId: [{ required: true, message: '请选择供应商', trigger: 'change' }],
-        materialTypeCode: [{ required: true, message: '请输入物料类型', trigger: 'blur' }],
+        rawMaterialId: [{ required: true, message: '请选择原料', trigger: 'change' }],
         price: [{ required: true, message: '请输入价格', trigger: 'change' }]
       },
-      priceRange: [],
       priceValidRange: [],
-      supplierOptions: []
+      supplierOptions: [],
+      priceDrawer: { visible: false, supplier: null },
+      activePricePanels: []
     }
   },
   created() {
@@ -218,7 +248,7 @@ export default {
         this.supplierDialog.form = { ...row }
         this.supplierDialog.title = '编辑供应商'
       } else {
-        this.supplierDialog.form = { supplierCode: '', name: '', creditRating: 'A' }
+        this.supplierDialog.form = { supplierCode: '', name: '', creditRating: 'A', type: 'RAW' }
         this.supplierDialog.title = '新增供应商'
       }
       this.supplierDialog.visible = true
@@ -243,17 +273,31 @@ export default {
         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() {
-      const query = { ...this.priceQuery }
-      if (this.priceRange && this.priceRange.length === 2) {
-        query.beginTime = this.priceRange[0]
-        query.endTime = this.priceRange[1]
+      if (!this.priceQuery.supplierId) {
+        this.priceList = []
+        return
       }
       this.priceLoading = true
-      listSupplierPrice(query)
+      listSupplierPrice(this.priceQuery)
         .then(res => {
           this.priceList = res.rows || []
+          this.activePricePanels = (this.priceList[0] && [this.priceList[0].priceId]) || []
         })
         .finally(() => {
           this.priceLoading = false
@@ -273,7 +317,8 @@ export default {
         this.priceValidRange = [row.validFrom, row.validTo]
         this.priceDialog.title = '编辑价格'
       } else {
-        this.priceDialog.form = { supplierId: null, materialTypeCode: '', price: 0 }
+        const currentSupplierId = this.priceDrawer.supplier?.supplierId || null
+        this.priceDialog.form = { supplierId: currentSupplierId, rawMaterialId: '', materialTypeCode: '', specification: '', price: 0 }
         this.priceValidRange = []
         this.priceDialog.title = '新增价格'
       }
@@ -287,6 +332,10 @@ export default {
           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('保存成功')
@@ -302,6 +351,18 @@ export default {
         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 || '-'}`
     }
   }
 }
@@ -309,32 +370,176 @@ export default {
 
 <style lang="scss" scoped>
 .erp-supplier-page {
-  background: #eef1f3;
   padding: 16px;
   min-height: 100%;
 }
-.panel-card {
-  border: 1px solid #d0d5d8;
+.surface-panel {
+  background: #fff;
+  border: 1px solid #d6dce1;
+  border-radius: 4px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
-.panel-header {
+.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: center;
-  font-weight: 600;
-  color: #1f2d3d;
+  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;
+  }
 }
-.toolbar {
+.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;
-  align-items: center;
-  margin-bottom: 12px;
+  justify-content: flex-end;
+  gap: 8px;
+  .danger {
+    color: #c0392b;
+  }
 }
-.toolbar-input {
-  width: 150px;
-  margin-right: 8px;
-}
-.cell-sub {
-  font-size: 12px;
-  color: #7c8792;
+.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>