协同审批-添加导出功能

gaoluyang

7 天以前 c99b4166febfde47d5b350d30bac443a11de42f5

 src/views/salesManagement/salesQuotation/index.vue

@@ -3,7 +3,7 @@
    <el-card class="box-card">
      <!-- 搜索区域 -->
      <el-row :gutter="20" class="search-row">
        <el-col :span="6">
        <el-col :span="8">
          <el-input
            v-model="searchForm.quotationNo"
            placeholder="请输入报价单号"
@@ -15,22 +15,24 @@
            </template>
          </el-input>
        </el-col>
        <el-col :span="6">
        <el-col :span="8">
          <el-select v-model="searchForm.customer" placeholder="请选择客户" clearable>
            <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option>
            <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option>
            <el-option label="北京贸易公司" value="北京贸易公司"></el-option>
                  <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.customerName">
                     {{
                        item.customerName + "——" + item.taxpayerIdentificationNumber
                     }}
                  </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="searchForm.status" placeholder="请选择报价状态" clearable>
            <el-option label="草稿" value="草稿"></el-option>
            <el-option label="已发送" value="已发送"></el-option>
            <el-option label="客户确认" value="客户确认"></el-option>
            <el-option label="已过期" value="已过期"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
<!--        <el-col :span="6">-->
<!--          <el-select v-model="searchForm.status" placeholder="请选择报价状态" clearable>-->
<!--            <el-option label="草稿" value="草稿"></el-option>-->
<!--            <el-option label="已发送" value="已发送"></el-option>-->
<!--            <el-option label="客户确认" value="客户确认"></el-option>-->
<!--            <el-option label="已过期" value="已过期"></el-option>-->
<!--          </el-select>-->
<!--        </el-col>-->
        <el-col :span="8">
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button style="float: right;" type="primary" @click="handleAdd">
@@ -48,7 +50,7 @@
        stripe
        height="calc(100vh - 22em)"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"/>
            <el-table-column align="center" label="序号" type="index" width="60" />
        <el-table-column prop="quotationNo" label="报价单号" width="150" />
        <el-table-column prop="customer" label="客户名称" />
        <el-table-column prop="salesperson" label="业务员" width="100" />
@@ -59,13 +61,13 @@
            ¥{{ scope.row.totalAmount.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="报价状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
<!--        <el-table-column prop="status" label="报价状态" width="100">-->
<!--          <template #default="scope">-->
<!--            <el-tag :type="getStatusType(scope.row.status)">-->
<!--              {{ scope.row.status }}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column label="操作" width="250" fixed="right" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
@@ -86,7 +88,7 @@
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="900px" :close-on-click-modal="false">
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="1300px" :close-on-click-modal="false">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <!-- 基本信息 -->
        <el-card class="form-card" shadow="never">
@@ -97,18 +99,19 @@
            <el-col :span="12">
              <el-form-item label="客户名称" prop="customer">
                <el-select v-model="form.customer" placeholder="请选择客户" style="width: 100%" @change="handleCustomerChange">
                  <el-option label="上海科技有限公司" value="上海科技有限公司"></el-option>
                  <el-option label="深圳电子有限公司" value="深圳电子有限公司"></el-option>
                  <el-option label="北京贸易公司" value="北京贸易公司"></el-option>
                           <el-option v-for="item in customerOption" :key="item.id" :label="item.customerName" :value="item.customerName">
                              {{
                                 item.customerName + "——" + item.taxpayerIdentificationNumber
                              }}
                           </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业务员" prop="salesperson">
                <el-select v-model="form.salesperson" placeholder="请选择业务员" style="width: 100%">
                  <el-option label="陈志强" value="陈志强"></el-option>
                  <el-option label="刘雅婷" value="刘雅婷"></el-option>
                  <el-option label="王建国" value="王建国"></el-option>
                           <el-option v-for="item in userList" :key="item.nickName" :label="item.nickName"
                                           :value="item.nickName" />
                </el-select>
              </el-form-item>
            </el-col>
@@ -166,9 +169,9 @@
            </div>
          </template>
          <el-table :data="form.products" border style="width: 100%">
            <el-table-column prop="productName" label="产品名称" width="200">
            <el-table-column prop="product" label="产品名称" width="200">
              <template #default="scope">
                <el-input v-model="scope.row.productName" placeholder="请输入产品名称" />
                <el-input v-model="scope.row.product" placeholder="请输入产品名称" />
              </template>
            </el-table-column>
            <el-table-column prop="specification" label="规格型号" width="150">
@@ -176,17 +179,17 @@
                <el-input v-model="scope.row.specification" placeholder="规格型号" />
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="数量" width="100">
            <el-table-column prop="quantity" label="数量">
              <template #default="scope">
                <el-input-number v-model="scope.row.quantity" :min="1" :precision="0" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="80">
            <el-table-column prop="unit" label="单位">
              <template #default="scope">
                <el-input v-model="scope.row.unit" placeholder="单位" />
              </template>
            </el-table-column>
            <el-table-column prop="unitPrice" label="单价" width="120">
            <el-table-column prop="unitPrice" label="单价">
              <template #default="scope">
                <el-input-number v-model="scope.row.unitPrice" :min="0" :precision="2" style="width: 100%" @change="calculateAmount(scope.row)" />
              </template>
@@ -273,9 +276,9 @@
        <el-descriptions-item label="有效期至">{{ currentQuotation.validDate }}</el-descriptions-item>
        <el-descriptions-item label="付款方式">{{ currentQuotation.paymentMethod }}</el-descriptions-item>
        <el-descriptions-item label="交货期">{{ currentQuotation.deliveryPeriod }}</el-descriptions-item>
        <el-descriptions-item label="报价状态">
          <el-tag :type="getStatusType(currentQuotation.status)">{{ currentQuotation.status }}</el-tag>
        </el-descriptions-item>
<!--        <el-descriptions-item label="报价状态">-->
<!--          <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>
        </el-descriptions-item>
@@ -284,7 +287,7 @@
      <div style="margin-top: 20px;">
        <h4>产品明细</h4>
        <el-table :data="currentQuotation.products" border style="width: 100%">
          <el-table-column prop="productName" label="产品名称" />
          <el-table-column prop="product" label="产品名称" />
          <el-table-column prop="specification" label="规格型号" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="unit" label="单位" />
@@ -310,10 +313,13 @@
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ref, reactive, computed,onMounted  } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import Pagination from '@/components/PIMTable/Pagination.vue'
// import Pagination from '@/components/PIMTable/Pagination.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";

// 响应式数据
const loading = ref(false)
@@ -323,56 +329,7 @@
  status: ''
})

const quotationList = ref([
  {
    id: 1,
    quotationNo: 'QT202312001',
    customer: '上海科技有限公司',
    salesperson: '陈志强',
    quotationDate: '2023-12-01',
    validDate: '2023-12-31',
    totalAmount: 50000.00,
    paymentMethod: '全款到付',
    deliveryPeriod: '30天',
    status: '已发送',
    remark: '重要客户报价',
    products: [
      { productName: '工业传感器', specification: 'SEN-001', quantity: 10, unit: '个', unitPrice: 5000, amount: 50000 }
    ]
  },
  {
    id: 2,
    quotationNo: 'QT202312002',
    customer: '深圳电子有限公司',
    salesperson: '刘雅婷',
    quotationDate: '2023-12-02',
    validDate: '2023-12-31',
    totalAmount: 35000.00,
    paymentMethod: '分期付款',
    deliveryPeriod: '20天',
    status: '客户确认',
    remark: '常规报价',
    products: [
      { productName: '控制模块', specification: 'CTL-002', quantity: 5, unit: '个', unitPrice: 7000, amount: 35000 }
    ]
  },
  {
    id: 3,
    quotationNo: 'QT202312003',
    customer: '北京贸易公司',
    salesperson: '王建国',
    quotationDate: '2023-12-03',
    validDate: '2023-12-31',
    totalAmount: 28000.00,
    paymentMethod: '月结',
    deliveryPeriod: '15天',
    status: '草稿',
    remark: '新客户报价',
    products: [
      { productName: '数据采集器', specification: 'DAQ-003', quantity: 4, unit: '个', unitPrice: 7000, amount: 28000 }
    ]
  }
])
const quotationList = ref([])

const pagination = reactive({
  total: 3,
@@ -384,6 +341,7 @@
const viewDialogVisible = ref(false)
const dialogTitle = ref('新增报价')
const form = reactive({
  quotationNo: '',
  customer: '',
  salesperson: '',
  quotationDate: '',
@@ -409,6 +367,8 @@
  paymentMethod: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
  deliveryPeriod: [{ required: true, message: '请输入交货期', trigger: 'blur' }]
}
const userList = ref([]);
const customerOption = ref([]);

const isEdit = ref(false)
const editId = ref(null)
@@ -441,21 +401,22 @@
  return statusMap[status] || 'info'
}

const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

const resetSearch = () => {
  searchForm.quotationNo = ''
  searchForm.customer = ''
  searchForm.status = ''
}

const handleAdd = () => {
const handleAdd = async () => {
  dialogTitle.value = '新增报价'
  isEdit.value = false
  resetForm()
  dialogVisible.value = true
   let userLists = await userListNoPage();
   userList.value = userLists.data;
   customerList().then((res) => {
      customerOption.value = res;
   });
}

const handleView = (row) => {
@@ -480,9 +441,16 @@
  }).then(() => {
    const index = quotationList.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      quotationList.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
      deleteQuotation(row.id).then(res=>{
        // console.log(res)
        if(res.code===200){
          ElMessage.success('删除成功')
          handleSearch()
        }
      })
      // quotationList.value.splice(index, 1)
      // pagination.total--
      // ElMessage.success('删除成功')
    }
  })
}
@@ -552,22 +520,40 @@
        // 编辑
        const index = quotationList.value.findIndex(item => item.id === editId.value)
        if (index > -1) {
          quotationList.value[index] = { ...form, id: editId.value }
          ElMessage.success('编辑成功')
          updateQuotation(form).then(res=>{
            // console.log(res)
            if(res.code===200){
              ElMessage.success('编辑成功')
              dialogVisible.value = false
              handleSearch()
            }
          })
          // quotationList.value[index] = { ...form, id: editId.value }
          // ElMessage.success('编辑成功')
        }
      } else {
        // 新增
        const newId = Math.max(...quotationList.value.map(item => item.id)) + 1
        const quotationNo = `QT${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}${String(newId).padStart(3, '0')}`
        quotationList.value.push({
          ...form,
          id: newId,
          quotationNo: quotationNo
        // const newId = Math.max(...quotationList.value.map(item => item.id)) + 1
        form.quotationNo = `QT${new Date().getFullYear()}${String(new Date().getMonth() + 1).padStart(2, '0')}${String(new Date().getDate()).padStart(2, '0')}`

        addQuotation(form).then(res=>{
          // console.log(res)
          if(res.code===200){
            ElMessage.success('新增成功')
            dialogVisible.value = false
            handleSearch()
          }
        })
        pagination.total++
        ElMessage.success('新增成功')

        // quotationList.value.push({
        //   ...form,
        //   // id: newId,
        //   quotationNo: quotationNo
        // })
        // pagination.total++
        // ElMessage.success('新增成功')
      }
      dialogVisible.value = false
      
    }
  })
}
@@ -576,6 +562,26 @@
  pagination.currentPage = val.page
  pagination.pageSize = val.limit
}
const handleSearch = ()=>{
  const params = {
    page:pagination,
    ...searchForm
  }
  getQuotationList(params).then(res=>{
    // console.log(res)
    if(res.code===200){
      quotationList.value = res.data.records
      pagination.total = res.data.total
    }
  })
   customerList().then((res) => {
      customerOption.value = res;
   });
}

onMounted(()=>{
  handleSearch()
})
</script>

<style scoped>