feat(salesQuotation): 添加导入详情功能及优化界面交互

chenhj

18 小时以前 cb76922f5e8ccade2bdd3e1c73c64c2fe711c45f

 src/views/salesManagement/salesQuotation/index.vue

@@ -11,13 +11,16 @@
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
              <el-icon>
                <Search/>
              </el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-select v-model="searchForm.customer" placeholder="请选择客户" clearable>
                  <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.customerName">
            <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName"
                       :value="item.customerName">
                     {{
                        item.customerName + "——" + item.taxpayerIdentificationNumber
                     }}
@@ -71,11 +74,14 @@
            ¥{{ scope.row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right" align="center">
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="scope">
            <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)"
                       :disabled="!['待审批','拒绝'].includes(scope.row.status)">编辑
            </el-button>
            <el-button link type="primary" @click="handleView(scope.row)" style="color: #67C23A">查看</el-button>
            <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button link type="primary" @click="handleImportDetail(scope.row)">导入详情</el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -91,14 +97,17 @@
    </el-card>

    <!-- 新增/编辑对话框 -->
    <FormDialog v-model="dialogVisible" :title="dialogTitle" width="85%" :close-on-click-modal="false" @close="dialogVisible = false" @confirm="handleSubmit" @cancel="dialogVisible = false">
    <FormDialog v-model="dialogVisible" :title="dialogTitle" width="85%" :close-on-click-modal="false"
                @close="dialogVisible = false" @confirm="handleSubmit" @cancel="dialogVisible = false">
      <div class="quotation-form-container">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="quotation-form">
        <!-- 基本信息 -->
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><Document /></el-icon>
                <el-icon class="card-icon">
                  <Document/>
                </el-icon>
              <span class="card-title">基本信息</span>
            </div>
          </template>
@@ -106,8 +115,10 @@
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="客户名称" prop="customer">
                  <el-select v-model="form.customer" placeholder="请选择客户" style="width: 100%" @change="handleCustomerChange" clearable>
                    <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.customerName">
                    <el-select v-model="form.customer" placeholder="请选择客户" style="width: 100%"
                               @change="handleCustomerChange" clearable>
                      <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName"
                                 :value="item.customerName">
                      {{
                        item.customerName + "——" + item.taxpayerIdentificationNumber
                      }}
@@ -166,10 +177,14 @@
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><UserFilled /></el-icon>
                <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-icon>
                    <Plus/>
                  </el-icon>
                新增节点
              </el-button>
            </div>
@@ -187,7 +202,9 @@
                      <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>
                          <el-icon class="arrow-icon">
                            <ArrowRight/>
                          </el-icon>
                      </div>
                      <el-select
                        v-model="node.userId"
@@ -209,7 +226,8 @@
                        @click="removeApproverNode(index)"
                        v-if="approverNodes.length > 1"
                        class="remove-btn"
                      >删除</el-button>
                        >删除
                        </el-button>
                    </div>
                  </div>
                </el-form-item>
@@ -222,16 +240,21 @@
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><Box /></el-icon>
                <el-icon class="card-icon">
                  <Box/>
                </el-icon>
              <span class="card-title">产品信息</span>
              <el-button type="primary" size="small" @click="addProduct" class="header-btn">
                <el-icon><Plus /></el-icon>
                  <el-icon>
                    <Plus/>
                  </el-icon>
                添加产品
              </el-button>
            </div>
          </template>
          <div class="form-content">
            <el-table :data="form.products" border style="width: 100%" class="product-table" v-if="form.products.length > 0">
              <el-table :data="form.products" border style="width: 100%" class="product-table"
                        v-if="form.products.length > 0">
            <el-table-column prop="product" label="产品名称" width="200">
              <template #default="scope">
                <el-form-item :prop="`products.${scope.$index}.productId`" class="product-table-form-item">
@@ -296,7 +319,9 @@
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><EditPen /></el-icon>
                <el-icon class="card-icon">
                  <EditPen/>
                </el-icon>
              <span class="card-title">备注信息</span>
            </div>
          </template>
@@ -317,15 +342,21 @@
      </div>
    </FormDialog>

    <FormDialog v-model="importDialogVisible" title="导入报价单" width="85%" :close-on-click-modal="false" @close="importDialogVisible = false" @confirm="handleImportSubmit" @cancel="importDialogVisible = false">
    <FormDialog v-model="importDialogVisible" title="导入报价单" width="85%" :close-on-click-modal="false"
                @close="importDialogVisible = false" @confirm="handleImportSubmit"
                @cancel="importDialogVisible = false">
      <!-- 审批人信息 -->
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><UserFilled /></el-icon>
            <el-icon class="card-icon">
              <UserFilled/>
            </el-icon>
              <span class="card-title">审批人选择</span>
              <el-button type="primary" size="small" @click="addImportApproverNode" class="header-btn">
                <el-icon><Plus /></el-icon>
              <el-icon>
                <Plus/>
              </el-icon>
                新增节点
              </el-button>
            </div>
@@ -343,7 +374,9 @@
                      <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>
                      <el-icon class="arrow-icon">
                        <ArrowRight/>
                      </el-icon>
                      </div>
                      <el-select
                        v-model="node.userId"
@@ -365,7 +398,8 @@
                        @click="removeImportApproverNode(index)"
                        v-if="importApproverNodes.length > 1"
                        class="remove-btn"
                      >删除</el-button>
                    >删除
                    </el-button>
                    </div>
                  </div>
                </el-form-item>
@@ -376,11 +410,14 @@
        <el-card class="form-card" shadow="hover">
          <template #header>
            <div class="card-header-wrapper">
              <el-icon class="card-icon"><Paperclip /></el-icon>
            <el-icon class="card-icon">
              <Paperclip/>
            </el-icon>
              <span class="card-title">附件材料</span>
            </div>
          </template>
          <div class="form-content">
          <el-button type="primary" @click="downloadImportTemplate" style="margin-bottom: 20px">下载模板文件</el-button>
            <el-form-item label="附件材料" prop="files">
          <el-upload
            v-model:file-list="importFileList"
@@ -399,11 +436,11 @@
                <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                  {{ file.name }}
                </span>
<!--                <div style="display:flex; align-items:center; gap: 6px;">-->
                  <div style="display:flex; align-items:center; gap: 6px;">
<!--                  <el-button link type="success" :icon="Download" @click="handleDownload(file)" />-->
<!--                  <el-button link type="primary" :icon="View" @click="handlePreview(file)" />-->
<!--                  <el-button link type="danger" :icon="Delete" @click="triggerRemoveFile(file)" />-->
<!--                </div>-->
                  </div>
              </div>
            </template>
            <template #tip>
@@ -430,7 +467,9 @@
<!--          <el-tag :type="getStatusType(currentQuotation.status)">{{ currentQuotation.status }}</el-tag>-->
<!--        </el-descriptions-item>-->
        <el-descriptions-item label="报价总额" :span="2">
          <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">¥{{ currentQuotation.totalAmount?.toFixed(2) }}</span>
          <span style="font-size: 18px; color: #e6a23c; font-weight: bold;">¥{{
              currentQuotation.totalAmount?.toFixed(2)
            }}</span>
        </el-descriptions-item>
      </el-descriptions>
      
@@ -453,16 +492,33 @@
        <p>{{ currentQuotation.remark }}</p>
      </div>
    </el-dialog>
    <ImportQuotationDetail v-if="showDetail" v-model:showModal="showDetail" :quotationId="currentQuotation.id" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, markRaw, shallowRef, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Document, UserFilled, Box, EditPen, Plus, ArrowRight, Delete, Download, View } from '@element-plus/icons-vue'
import {
  Search,
  Document,
  UserFilled,
  Box,
  EditPen,
  Plus,
  ArrowRight,
  Delete,
} from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
import FormDialog from '@/components/Dialog/FormDialog.vue'
import {getQuotationList,addQuotation,updateQuotation,deleteQuotation, importQuotation} from '@/api/salesManagement/salesQuotation.js'
import ImportQuotationDetail from '@/views/salesManagement/salesQuotation/ImportQuotationDetail.vue'
import {
  getQuotationList,
  addQuotation,
  updateQuotation,
  deleteQuotation,
  importQuotation
} 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";
@@ -550,6 +606,7 @@
let nextApproverId = 2

const isEdit = ref(false)
const showDetail = ref(false)
const editId = ref(null)
const currentQuotation = ref({})
const formRef = ref()
@@ -756,6 +813,7 @@
      return productOptions.value
   });
};

function convertIdToValue(data) {
   return data.map((item) => {
      const { id, children, ...rest } = item;
@@ -770,6 +828,7 @@
      return newItem;
   });
}

// 根据名称反查节点 id，便于仅存名称时的反显
function findNodeIdByLabel(nodes, label) {
   if (!label) return null;
@@ -783,6 +842,7 @@
   }
   return null;
}

const getModels = (value, row) => {
   if (!row) return;
   // 如果清空选择，则清空相关字段
@@ -1087,6 +1147,10 @@
  })
}

const downloadImportTemplate = () => {
  proxy.download("/sales/quotation/downloadTemplate", {}, "报价单导入模板.xlsx");
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val.page
  pagination.pageSize = val.limit
@@ -1145,6 +1209,12 @@
    }))
   });
}

const handleImportDetail = (row) => {
  showDetail.value = true
  currentQuotation.value = row
}


onMounted(()=>{
  handleSearch()
@@ -1230,9 +1300,11 @@

.product-table-form-item {
  margin-bottom: 0;

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }

  :deep(.el-form-item__label) {
    width: auto;
    min-width: auto;