fix: 库存样式调整

spring

9 小时以前 f2a6e4d05709739659817dae2a49c16f1fd6277f

fix: 库存样式调整

 src/views/inventoryManagement/stockManagement/Qualified.vue

@@ -1,36 +1,52 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title ml10">产品类型：</span>
    <div class="search_form search_form--wrap">
      <div class="search-field">
        <span class="search_title">产品类型：</span>
        <el-radio-group v-model="productScope" class="qualified-product-scope" @change="onProductScopeChange">
          <el-radio-button label="成品">成品</el-radio-button>
          <el-radio-button label="其他产品">其他产品</el-radio-button>
        </el-radio-group>
        <!-- <span class="search_title ml10" style="margin-left: 20px">产品大类：</span>
        <el-input v-model="searchForm.productName"
                  style="width: 240px"
                  placeholder="请输入"
                  clearable/> -->
        <span class="search_title ml10" style="margin-left: 20px">规格型号：</span>
        <el-input v-model="searchForm.model"
                  style="width: 240px"
                  placeholder="请输入"
                  clearable/>
        <span class="search_title ml10" style="margin-left: 20px">UID码：</span>
        <el-input v-model="searchForm.uidNo"
                  style="width: 200px"
                  placeholder="请输入"
                  clearable/>
        <span class="search_title ml10" style="margin-left: 20px">批次号：</span>
        <el-input v-model="searchForm.batchNo"
                  style="width: 200px"
                  placeholder="请输入"
                  clearable/>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
      </div>
      <div>
         <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button>
      <div class="search-field">
        <span class="search_title">产品名称：</span>
        <el-input
          v-model="searchForm.productName"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div class="search-field">
        <span class="search_title">规格型号：</span>
        <el-input
          v-model="searchForm.model"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div class="search-field">
        <span class="search_title">UID码：</span>
        <el-input
          v-model="searchForm.uidNo"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div class="search-field">
        <span class="search_title">批次号：</span>
        <el-input
          v-model="searchForm.batchNo"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div class="search-field search-field--actions">
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button>
        <el-button type="info" plain icon="Upload" @click="isShowImportModal = true">
          导入库存
        </el-button>
@@ -40,7 +56,7 @@
    <div class="table_list">
      <el-table :data="tableData" border v-loading="tableLoading" @selection-change="handleSelectionChange"
        :expand-row-keys="expandedRowKeys" :row-key="row => row.id" style="width: 100%"
        :row-class-name="tableRowClassName" height="calc(100vh - 18.5em)">
        :row-class-name="tableRowClassName" height="calc(100vh - 26.5em)">
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column label="产品大类" prop="productName" show-overflow-tooltip />
@@ -133,10 +149,7 @@
const productScope = ref('成品')

const getProductScopeParams = () => {
  if (productScope.value === '成品') {
    return { productType: 2 }
  }
  return { productTypes: '1,3' }
  return { productScope: productScope.value }
}

const onProductScopeChange = () => {
@@ -239,6 +252,41 @@
</script>

<style scoped lang="scss">
.search_form--wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.search-field {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;

  .search_title {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
    min-width: 4.5em;
  }

  .search-input {
    width: 200px;
  }

  .qualified-product-scope {
    flex-shrink: 0;
  }
}

.search-field--actions {
  flex-wrap: wrap;
  gap: 8px;
}

.qualified-product-scope {
  vertical-align: middle;
}

 src/views/inventoryManagement/stockManagement/Unqualified.vue

@@ -1,31 +1,45 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <div>
        <span class="search_title ml10">产品大类：</span>
        <el-input v-model="searchForm.productName"
                  style="width: 240px"
                  placeholder="请输入"
                  clearable/>
        <span class="search_title ml10" style="margin-left: 20px">规格型号：</span>
        <el-input v-model="searchForm.model"
                  style="width: 240px"
                  placeholder="请输入"
                  clearable/>
        <span class="search_title ml10" style="margin-left: 20px">UID码：</span>
        <el-input v-model="searchForm.uidNo"
                  style="width: 200px"
                  placeholder="请输入"
                  clearable/>
        <span class="search_title ml10" style="margin-left: 20px">批次号：</span>
        <el-input v-model="searchForm.batchNo"
                  style="width: 200px"
                  placeholder="请输入"
                  clearable/>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px">搜索</el-button>
    <div class="search_form search_form--wrap">
      <div class="search-field">
        <span class="search_title">产品名称：</span>
        <el-input
          v-model="searchForm.productName"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div>
         <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button>
      <div class="search-field">
        <span class="search_title">规格型号：</span>
        <el-input
          v-model="searchForm.model"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div class="search-field">
        <span class="search_title">UID码：</span>
        <el-input
          v-model="searchForm.uidNo"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div class="search-field">
        <span class="search_title">批次号：</span>
        <el-input
          v-model="searchForm.batchNo"
          class="search-input"
          placeholder="请输入"
          clearable
        />
      </div>
      <div class="search-field search-field--actions">
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button type="primary" @click="isShowNewModal = true">新增库存</el-button>
        <el-button @click="handleOut">导出</el-button>
      </div>
    </div>
@@ -78,7 +92,7 @@

<script setup>
import pagination from '@/components/PIMTable/Pagination.vue'
import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue'
import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineAsyncComponent } from 'vue'
import { ElMessageBox } from "element-plus";
import { getStockUninventoryListPage } from "@/api/inventoryManagement/stockUninventory.js";
const NewStockInventory = defineAsyncComponent(() => import("@/views/inventoryManagement/stockManagement/New.vue"));
@@ -166,13 +180,8 @@
const expandedRowKeys = ref([])

// 表格行类名
const tableRowClassName = ({ row }) => {
  // const stock = Number(row?.unLockedQuantity ?? 0);
  // const warn = Number(row?.warnNum ?? 0);
  // if (!Number.isFinite(stock) || !Number.isFinite(warn)) {
  //   return '';
  // }
  // return stock < warn ? 'row-low-stock' : '';
const tableRowClassName = () => {
  return '';
};

// 导出
@@ -185,7 +194,7 @@
    type: 'warning',
  }
  ).then(() => {
    proxy.download("/stockUninventory/exportStockUninventory", {}, '不合格库存信息.xlsx')
    proxy.download("/stockUninventory/exportStockUninventory", { ...searchForm.value }, '不合格库存信息.xlsx')
  }).catch(() => {
    proxy.$modal.msg("已取消")
  })
@@ -197,6 +206,37 @@
</script>

<style scoped lang="scss">
.search_form--wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.search-field {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 8px;

  .search_title {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
    min-width: 4.5em;
  }

  .search-input {
    width: 200px;
  }
}

.search-field--actions {
  flex-wrap: wrap;
  gap: 8px;
}

:deep(.row-low-stock td) {
  background-color: #fde2e2;
  color: #c45656;

 src/views/salesManagement/salesQuotation/index.vue

@@ -56,13 +56,6 @@
        <el-table-column prop="salesperson" label="业务员" width="100" />
        <el-table-column prop="quotationDate" label="报价日期" width="120" />
        <el-table-column prop="validDate" label="有效期至" width="120" />
        <el-table-column prop="status" label="审批状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" disable-transitions>
              {{ row.status || '--' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="报价金额" width="120">
          <template #default="scope">
            ¥{{ scope.row.totalAmount.toFixed(2) }}
@@ -71,7 +64,7 @@
        <el-table-column label="操作" width="200" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button link type="primary" @click="handleEdit(scope.row)" :disabled="!['待审批','拒绝'].includes(scope.row.status)">编辑</el-button>
            <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
@@ -149,69 +142,13 @@
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
            <!-- <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="付款方式" prop="paymentMethod">
                  <el-input v-model="form.paymentMethod" placeholder="请输入付款方式" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 审批人信息 -->
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><UserFilled /></el-icon>
              <span class="card-title">审批人选择</span>
              <el-button type="primary" size="small" @click="addApproverNode" class="header-btn">
                <el-icon><Plus /></el-icon>
                新增节点
              </el-button>
            </div>
          </template>
          <div class="form-content">
            <el-row>
              <el-col :span="24">
                <el-form-item>
                  <div class="approver-nodes-container">
                    <div
                      v-for="(node, index) in approverNodes"
                      :key="node.id"
                      class="approver-node-item"
                    >
                      <div class="approver-node-label">
                        <span class="node-step">{{ index + 1 }}</span>
                        <span class="node-text">审批人</span>
                        <el-icon class="arrow-icon"><ArrowRight /></el-icon>
                      </div>
                      <el-select
                        v-model="node.userId"
                        placeholder="选择人员"
                        class="approver-select"
                        clearable
                      >
                        <el-option
                          v-for="user in userList"
                          :key="user.userId"
                          :label="user.nickName"
                          :value="user.userId"
                        />
                      </el-select>
                      <el-button
                        type="danger"
                        size="small"
                        :icon="Delete"
                        @click="removeApproverNode(index)"
                        v-if="approverNodes.length > 1"
                        class="remove-btn"
                      >删除</el-button>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            </el-row> -->
          </div>
        </el-card>

@@ -356,7 +293,7 @@
<script setup>
import { ref, reactive, computed, onMounted, markRaw, shallowRef } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete } from '@element-plus/icons-vue'
import { Search, Document, Box, EditPen, Plus } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
import FormDialog from '@/components/Dialog/FormDialog.vue'
import {getQuotationList,addQuotation,updateQuotation,deleteQuotation} from '@/api/salesManagement/salesQuotation.js'
@@ -429,26 +366,10 @@
const userList = ref([]);
const customerOption = ref([]);

// 审批人节点相关
const approverNodes = ref([
  { id: 1, userId: null }
])
let nextApproverId = 2

const isEdit = ref(false)
const editId = ref(null)
const currentQuotation = ref({})
const formRef = ref()

// 添加审批人节点
function addApproverNode() {
  approverNodes.value.push({ id: nextApproverId++, userId: null })
}

// 删除审批人节点
function removeApproverNode(index) {
  approverNodes.value.splice(index, 1)
}

// 计算属性
const filteredList = computed(() => {
@@ -457,16 +378,6 @@
})

// 方法
const getStatusType = (status) => {
  const statusMap = {
    '待审批': 'info',
    '审核中': 'primary',
    '通过': 'success',
    '拒绝': 'danger'
  }
  return statusMap[status] || 'info'
}

const resetSearch = () => {
  searchForm.quotationNo = ''
  searchForm.customer = ''
@@ -480,9 +391,6 @@
  dialogTitle.value = '新增报价'
  isEdit.value = false
  resetForm()
  // 重置审批人节点
  approverNodes.value = [{ id: 1, userId: null }]
  nextApproverId = 2
  dialogVisible.value = true
    let userLists = await userListNoPage();
    // 只复制需要的字段，避免将组件引用放入响应式对象
@@ -684,19 +592,6 @@
  form.discountAmount = row.discountAmount || 0
  form.totalAmount = row.totalAmount || 0
  
  // 反显审批人
  if (row.approveUserIds) {
    const userIds = row.approveUserIds.split(',')
    approverNodes.value = userIds.map((userId, idx) => ({
      id: idx + 1,
      userId: parseInt(userId.trim())
    }))
    nextApproverId = userIds.length + 1
  } else {
    approverNodes.value = [{ id: 1, userId: null }]
    nextApproverId = 2
  }
  
  // 加载用户列表
  let userLists = await userListNoPage();
  userList.value = (userLists.data || []).map(item => ({
@@ -795,16 +690,6 @@
        return
      }

      // 审批人必填校验
      const hasEmptyApprover = approverNodes.value.some(node => !node.userId)
      if (hasEmptyApprover) {
        ElMessage.error('请为所有审批节点选择审批人！')
        return
      }
      
      // 收集所有节点的审批人id
      form.approveUserIds = approverNodes.value.map(node => node.userId).join(',')
      
      // 计算所有产品的单价总和
      form.totalAmount = form.products.reduce((sum, product) => {
        const price = Number(product.unitPrice) || 0
@@ -865,8 +750,6 @@
        validDate: item.validDate || '',
        paymentMethod: item.paymentMethod || '',
        status: item.status || '草稿',
        // 审批人（用于编辑时反显）
        approveUserIds: item.approveUserIds || '',
        remark: item.remark || '',
        products: item.products ? item.products.map(product => ({
          productId: product.productId || '',
@@ -991,71 +874,6 @@
  }
}

.approver-nodes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 12px 0;
}

.approver-node-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
  min-width: 180px;
  
  &:hover {
    border-color: #409eff;
    background: #f0f7ff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
  }
}

.approver-node-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
  
  .node-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #409eff;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
  }
  
  .node-text {
    font-weight: 500;
  }
  
  .arrow-icon {
    color: #909399;
    font-size: 14px;
  }
}

.approver-select {
  width: 100%;
  min-width: 150px;
}

.remove-btn {
  margin-top: 4px;
}

.product-table {
  :deep(.el-table__header) {
    background-color: #f5f7fa;
@@ -1082,14 +900,4 @@
  text-align: right;
}

// 响应式优化
@media (max-width: 1200px) {
  .approver-nodes-container {
    gap: 16px;
  }
  
  .approver-node-item {
    min-width: 160px;
  }
}
</style>