进销存new 1.不需要再配置"screen"了

gaoluyang

4 天以前 9d017720cc0df497f5764121202fde3f8be16e82

 src/views/salesManagement/salesQuotation/index.vue

@@ -155,63 +155,6 @@
          </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"
                                    filterable
                        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>
          </div>
        </el-card>

        <!-- 产品信息 -->
        <el-card class="form-card" shadow="hover">
          <template #header>
@@ -353,14 +296,14 @@
<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'
import {userListNoPage} from "@/api/system/user.js";
import {customerList} from "@/api/salesManagement/salesLedger.js";
import {modelList, productTreeList} from "@/api/basicData/product.js";
import {listCustomerPrivatePool} from "@/api/basicData/customerFile.js";
import { userListNoPage } from "@/api/system/user.js";

// 响应式数据
const loading = ref(false)
@@ -371,6 +314,7 @@
})

const quotationList = ref([])
const userList = ref([])
const productOptions = ref([]);
const modelOptions = ref([]);
const pagination = reactive({
@@ -424,29 +368,12 @@
  })
  return r
})
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(() => {
@@ -478,21 +405,11 @@
  dialogTitle.value = '新增报价'
  isEdit.value = false
  resetForm()
  // 重置审批人节点
  approverNodes.value = [{ id: 1, userId: null }]
  nextApproverId = 2
  dialogVisible.value = true
   let userLists = await userListNoPage();
   // 只复制需要的字段，避免将组件引用放入响应式对象
   userList.value = (userLists.data || []).map(item => ({
    userId: item.userId,
    nickName: item.nickName || '',
    userName: item.userName || ''
  }));
   getProductOptions();
   listCustomerPrivatePool({current: -1,size:-1}).then((res) => {
      customerOption.value = res.data.records;
   });
  getProductOptions();
  listCustomerPrivatePool({current: -1,size:-1}).then((res) => {
    customerOption.value = res.data.records;
  });
}
const getProductOptions = () => {
   // 返回 Promise，便于编辑时 await 确保能反显
@@ -676,28 +593,7 @@
  form.discountRate = row.discountRate || 0
  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 => ({
    userId: item.userId,
    nickName: item.nickName || '',
    userName: item.userName || ''
  }));
  

  dialogVisible.value = true
}

@@ -784,22 +680,12 @@
        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
        return sum + price
      }, 0)
      

      if (isEdit.value) {
        // 编辑
        const index = quotationList.value.findIndex(item => item.id === editId.value)
@@ -823,7 +709,7 @@
          }
        })
      }
      

    }
  })
}
@@ -877,12 +763,23 @@
      pagination.total = res.data.total
    }
  })
   customerList().then((res) => {
      customerOption.value = res;
   });
   // customerList().then((res) => {
   //    customerOption.value = res;
   // });
}

const getUserList = async () => {
  try {
    const res = await userListNoPage()
    userList.value = Array.isArray(res?.data) ? res.data : []
  } catch (error) {
    userList.value = []
    ElMessage.error('加载业务员列表失败')
  }
}

onMounted(()=>{
  getUserList()
  handleSearch()
})
</script>
@@ -975,71 +872,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;
@@ -1066,14 +898,4 @@
  text-align: right;
}

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