服务工单-新增、编辑完成，查看页面完成

package.json

@@ -26,7 +26,7 @@
     "echarts": "^4.6.0",
     "element-china-area-data": "^6.1.0",
     "element-ui": "^2.13.0",
-    "file-saver": "^2.0.1",
+    "file-saver": "^2.0.5",
     "fuse.js": "3.4.4",
     "js-cookie": "^2.2.0",
     "js-table2excel": "^1.0.3",
@@ -47,7 +47,7 @@
     "vue-router": "^3.1.6",
     "vuedraggable": "^2.21.0",
     "vuex": "^3.1.1",
-    "xlsx": "^0.15.5"
+    "xlsx": "^0.15.6"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/api/productManagement/installation.js

@@ -105,4 +105,15 @@ export function checkInstallation(data) {
     method: 'post',
     data: data
   })
+}
+
+// 导出安装工单列表
+// TO DO
+export function exportInstallationOrder(data) {
+  return request({
+    url: '/api/installation/export',
+    method: 'post',
+    data,
+    responseType: 'blob'
+  })
 } 

src/mixins/exportMixin.js

@@ -0,0 +1,63 @@
+
+export default {
+  methods: {
+    /**
+     * 处理导出功能
+     * @param {Object} options - 导出配置项
+     * @param {Function} options.exportApi - 导出接口函数
+     * @param {Object} options.params - 导出参数
+     * @param {string} [options.fileName='导出数据.xlsx'] - 导出文件名
+     * @param {string} [options.fileType='application/vnd.ms-excel'] - 文件类型
+     */
+    async handleExport({ exportApi, params, fileName = '导出数据.xlsx', fileType = 'application/vnd.ms-excel' }) {
+      if (!exportApi) {
+        this.$message.error('导出接口未定义')
+        return
+      }
+
+      try {
+        await this.$confirm('是否确认导出所有数据项?', '警告', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(async () => {
+          // 显示加载中
+          const loading = this.$loading({
+            lock: true,
+            text: '正在导出数据，请稍候...',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+
+          try {
+            const response = await exportApi(params)
+            
+            // 创建Blob对象
+            const blob = new Blob([response], {
+              type: fileType
+            })
+            
+            // 创建下载链接
+            const link = document.createElement('a')
+            link.href = window.URL.createObjectURL(blob)
+            link.download = fileName
+            link.click()
+            
+            // 清理
+            window.URL.revokeObjectURL(link.href)
+            
+            this.$message.success('导出成功')
+          } catch (error) {
+            console.error('导出失败:', error)
+            this.$message.error('导出失败，请重试')
+          } finally {
+            loading.close()
+          }
+        }).catch(() => {})
+      } catch (error) {
+        console.error('导出操作失败:', error)
+      }
+    }
+
+  }
+} 

src/views/productManagement/installationOrder/components/AddDialog.vue

@@ -10,45 +10,45 @@
   >
     <el-form ref="form" :model="form" :rules="rules" label-width="120px">
       <el-row :gutter="10">
-        <el-col :span="8">
-          <el-form-item label="服务单号" prop="serviceNo">
-            <el-input v-model="form.serviceNo" disabled />
-          </el-form-item>
-        </el-col>
         <el-col :span="8">
           <el-form-item label="下单人" prop="orderer">
-            <el-select v-model="form.orderer" placeholder="请选择下单人" style="width: 100%">
-              <el-option label="默认当前登录账号" value="default" disabled />
+            <el-select v-model="form.orderer" placeholder="请选择下单人" style="width: 100%" filterable>
+              <el-option
+                v-for="item in installerOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
-          <el-form-item label="下单时间" prop="orderTime">
-            <el-date-picker
-              v-model="form.orderTime"
-              type="datetime"
-              placeholder="选择日期时间"
-              style="width: 100%"
-            />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-row :gutter="10">
         <el-col :span="8">
           <el-form-item label="服务项目" prop="serviceProject">
             <el-select v-model="form.serviceProject" placeholder="请选择服务项目" style="width: 100%">
-              <el-option label="请选择服务项目" value="" disabled />
+              <el-option
+                v-for="item in projectOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="服务人员" prop="serviceStaff">
             <el-select v-model="form.serviceStaff" placeholder="请选择服务人员" style="width: 100%">
-              <el-option label="张三" value="张三" />
+              <el-option
+                v-for="item in installerOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
         <el-col :span="8">
           <el-form-item label="预计完成时间" prop="estimatedCompleteTime">
             <el-date-picker
@@ -59,9 +59,6 @@
             />
           </el-form-item>
         </el-col>
-      </el-row>
-
-      <el-row :gutter="10">
         <el-col :span="8">
           <el-form-item label="发货单号" prop="deliveryNo">
             <el-input v-model="form.deliveryNo" disabled />
@@ -72,9 +69,28 @@
             <el-input v-model="form.contract" disabled />
           </el-form-item>
         </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
         <el-col :span="8">
           <el-form-item label="客户" prop="customer">
-            <el-input v-model="form.customer" disabled />
+            <el-select
+              v-model="form.customer"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入客户名称搜索"
+              :loading="loading"
+              style="width: 400px !important"
+              :remote-method="handleCustomerInput"
+            >
+              <el-option
+                v-for="item in customerOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
       </el-row>
@@ -88,27 +104,111 @@
         />
       </el-form-item>
 
-      <el-form-item label="货品" prop="products">
-        <el-table :data="form.products" border style="width: 100%">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="选择货品">
+            <el-select
+              v-model="selectedProduct"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入货品名称搜索"
+              :loading="productLoading"
+              style="width: 600px !important"
+              :remote-method="handleProductInput"
+              @change="handleProductChange"
+              @focus="handleProductInput('')"
+            >
+              <el-option
+                v-for="item in productOptions"
+                :key="item.id"
+                :value="item.id"
+              >
+                <template>
+                  <div class="product-option">
+                    <div class="option-item">
+                      <span class="label">编号</span>
+                      <span class="value">{{item.goodsCode}}</span>
+                    </div>
+                    <div class="option-item">
+                      <span class="label">名称</span>
+                      <span class="value">{{item.goodsName}}</span>
+                    </div>
+                    <div class="option-item">
+                      <span class="label">规格</span>
+                      <span class="value">{{item.goodsSpecification || '-'}}</span>
+                    </div>
+                    <div class="option-item">
+                      <span class="label">库存</span>
+                      <span class="value">{{item.stock || 0}}</span>
+                    </div>
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label-width="120px">
+        <el-table :data="form.products" border style="width: calc(100% - 20px); ">
           <el-table-column type="index" label="序号" width="50" align="center" />
-          <el-table-column prop="code" label="货品编号" align="center" />
-          <el-table-column prop="name" label="货品名称" align="center" />
-          <el-table-column prop="spec" label="货品规格" align="center" />
-          <el-table-column prop="image" label="货品图片" align="center" />
-          <el-table-column prop="unit" label="计量单位" align="center" />
-          <el-table-column prop="stock" label="现有库存" align="center" />
-          <el-table-column prop="orderQuantity" label="订单数量" align="center" />
-          <el-table-column prop="shippedQuantity" label="已发货数量" align="center" />
-          <el-table-column prop="unshippedQuantity" label="未发货数量" align="center" />
-          <el-table-column prop="remark" label="备注" align="center" />
-          <el-table-column label="操作" align="center" width="100">
+          <el-table-column prop="goodsCode" label="货品编号" align="center" />
+          <el-table-column prop="goodsName" label="货品名称" align="center" />
+          <el-table-column prop="goodsSpecification" label="货品规格" align="center" width="50"/>
+          <el-table-column prop="goodsImagePath" label="货品图片" align="center">
+            <template slot-scope="scope">
+              <el-image 
+                v-if="scope.row.goodsImagePath"
+                :src="baseApi + scope.row.goodsImagePath"
+                style="width: 50px; height: 50px"
+                :preview-src-list="[baseApi + scope.row.goodsImagePath]"
+                fit="contain"
+              >
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+              <div v-else class="image-slot" style="width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; background: #f5f7fa; border-radius: 4px;">
+                <i class="el-icon-picture-outline" style="font-size: 20px; color: #909399;"></i>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="goodsUnit" label="计量单位" align="center" width="50"/>
+          <el-table-column prop="stock" label="现有库存" align="center" width="60"/>
+          <el-table-column prop="orderQuantity" label="订单数量" align="center" width="110">
+            <template slot-scope="scope">
+              <el-input 
+                v-model="scope.row.orderQuantity"
+                size="mini"
+                style="width: 70px"
+                @input="handleOrderQuantityInput($event, scope.row)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="shippedQuantity" label="已发货数量" align="center" width="70"/>
+          <el-table-column prop="unshippedQuantity" label="未发货数量" align="center" width="70"/>
+          <el-table-column prop="remark" label="备注" align="center" width="100">
+            <template slot-scope="scope">
+              <el-input 
+                v-model="scope.row.remark" 
+                size="mini"
+                placeholder="备注"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100" fixed="right">
             <template slot-scope="scope">
               <el-button
                 size="mini"
-                type="text"
-                style="color: #F56C6C"
+                type="danger"
+                plain
                 @click="handleRemoveProduct(scope.$index)"
-              >删除</el-button>
+                style="padding: 4px 8px; border-radius: 4px;"
+              >
+                <i class="el-icon-delete" style="margin-right: 2px;" />
+                删除
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -122,33 +222,73 @@
 </template>
 
 <script>
+import { GetDataByName,GetDataByNames,ExecDataByConfig } from '@/api/common'
+
 export default {
   name: 'AddDialog',
   props: {
     visible: {
       type: Boolean,
       default: false
+    },
+    installerOptions: {
+      type: Array,
+      default: () => []
+    },
+    projectOptions: {
+      type: Array,
+      default: () => []
+    },
+    currentUser: {
+      type: Object,
+      default: () => ({
+        id: '',
+        name: ''
+      })
+    }
+  },
+  computed: {
+    baseApi() {
+      return process.env.VUE_APP_BASE_API
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        // 弹窗打开时设置默认值并获取数据
+        this.$nextTick(() => {
+          this.form.orderer = parseInt(this.currentUser.id)
+          this.customerOptions = []
+          this.getInitialData()
+        })
+      }
     }
   },
   data() {
     return {
-      // 表单数据
       form: {
-        serviceNo: 'FW' + new Date().getTime(),
-        orderer: 'default',
-        orderTime: new Date(),
+        orderer: '',
         serviceProject: '',
         serviceStaff: '',
         estimatedCompleteTime: '',
-        deliveryNo: 'FH202410230001',
-        contract: 'HT202410230001',
-        customer: '根据发货单自动带出',
+        deliveryNo: '',
+        contract: '',
+        customer: '',
         remark: '',
         products: []
       },
       
+      customerOptions: [], // 客户选项
+      loading: false, // 客户加载状态
+      selectedProduct: '', // 当前选中的货品
+      productOptions: [], // 货品选项
+      productLoading: false, // 货品加载状态
+      
       // 表单校验规则
       rules: {
+        orderer: [
+          { required: true, message: '请选择下单人', trigger: 'change' }
+        ],
         serviceProject: [
           { required: true, message: '请选择服务项目', trigger: 'change' }
         ],
@@ -157,33 +297,199 @@ export default {
         ],
         estimatedCompleteTime: [
           { required: true, message: '请选择预计完成时间', trigger: 'change' }
+        ],
+        customer: [
+          { required: true, message: '请选择客户', trigger: 'change' }
         ]
       }
     }
   },
   methods: {
+    // 处理客户输入
+    handleCustomerInput(value) {
+      this.loading = true
+      const send_select_list = 
+        {
+          name: 'getCustomerNameFuzzy',
+          returntype:'Map',
+          parammaps: {
+            inputvalue: value || ''
+          }
+        }
+      
+
+      GetDataByName(send_select_list).then(response => {
+        this.customerOptions = response.data.list || []
+      }).catch(error => {
+        console.error('搜索客户失败:', error)
+        this.$message.error('搜索客户失败')
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+
     // 关闭弹窗
     handleDialogClose() {
       this.$emit('update:visible', false)
       this.$refs.form && this.$refs.form.resetFields()
     },
+
     // 取消
     handleCancel() {
       this.handleDialogClose()
     },
+    getInitialData(){
+        this.form.products = []
+        //this.handleProductInput('')
+    },
     // 移除货品
     handleRemoveProduct(index) {
       this.form.products.splice(index, 1)
     },
+
+    // 处理货品输入搜索
+    handleProductInput(value) {
+      this.productLoading = true
+      const send_select_list = {
+        name: 'getGoodsListByCode',
+        returntype: 'Map',
+        parammaps: {
+          goodsCode: value || ''
+        }
+      }
+
+      GetDataByName(send_select_list).then(response => {
+        this.productOptions = response.data.list || []
+        // 打印第一条数据查看结构
+        if (this.productOptions.length > 0) {
+          console.log('商品数据结构:', this.productOptions[0])
+        }
+      }).catch(error => {
+        console.error('搜索货品失败:', error)
+        this.$message.error('搜索货品失败')
+      }).finally(() => {
+        this.productLoading = false
+      })
+    },
+
+    // 处理货品选择变化
+    handleProductChange(value) {
+      const selectedProduct = this.productOptions.find(item => item.goodsId === value)
+      if (selectedProduct) {
+        // 检查是否已经添加过该货品
+        const existingProduct = this.form.products.find(item => item.goodsId === selectedProduct.goodsId)
+        if (existingProduct) {
+          this.$message.warning('该货品已经添加过了')
+          this.selectedProduct = ''
+          return
+        }
+
+        // 添加新货品到表格
+        this.form.products.push({
+          goodsId: selectedProduct.goodsId,
+          goodsCode: selectedProduct.goodsCode,
+          goodsName: selectedProduct.goodsName,
+          goodsSpecification: selectedProduct.goodsSpecification,
+          goodsImagePath: selectedProduct.goodsImagePath || '',
+          goodsUnit: selectedProduct.goodsUnit,
+          stock: selectedProduct.stock || 0,
+          orderQuantity: 1,
+          shippedQuantity: 0,
+          unshippedQuantity: 0,
+          remark: ''
+        })
+      }
+      this.selectedProduct = '' // 清空选择
+    },
+
+    // 处理订单数量输入
+    handleOrderQuantityInput(value, row) {
+      // 只允许输入正整数
+      value = value.replace(/[^\d]/g, '')
+      if (value === '') {
+        row.orderQuantity = 1
+      } else {
+        const num = parseInt(value)
+        row.orderQuantity = num || 1
+      }
+    },
+
     // 提交表单
     handleSubmit() {
       this.$refs.form.validate(async (valid) => {
         if (valid) {
           try {
-            // TODO: 调用新增API
-            this.$message.success('保存成功')
-            this.handleDialogClose()
-            this.$emit('success')
+            // 检查是否添加了货品
+            if (this.form.products.length === 0) {
+              this.$message.warning('请至少添加一个货品')
+              return
+            }
+
+            // 构建保存参数
+            const params = {
+              common: {
+                returnmap: "0"
+              },
+              data: [
+                {
+                  name: "insertInstallationOrder",
+                  type: "e",
+                  parammaps: {
+                    projectId: this.form.serviceProject,
+                    projectName: this.projectOptions.find(item => item.value === this.form.serviceProject)?.label || '',
+                    customerId: this.form.customer,
+                    customerName: this.customerOptions.find(item => item.id === this.form.customer)?.name || '',
+                    totalQuantity: this.form.products.reduce((sum, item) => sum + parseInt(item.orderQuantity || 0), 0),
+                    installedQuantity: 0,
+                    uninstalledQuantity: this.form.products.reduce((sum, item) => sum + parseInt(item.orderQuantity || 0), 0),
+                    dispatcherId: this.form.orderer,
+                    dispatcherName: this.installerOptions.find(item => item.value === this.form.orderer)?.label || '',
+                    serviceStaffNames: this.installerOptions.find(item => item.value === this.form.serviceStaff)?.label || '',
+                    serviceStaffIds: this.form.serviceStaff,
+                    estimatedCompleteTime: this.form.estimatedCompleteTime ? this.form.estimatedCompleteTime.toISOString().slice(0, 19).replace('T', ' ') : null,
+                    remark: this.form.remark || ''
+                  }
+                },
+                {
+                  name: "insertInstallationOrderDetail",
+                  resultmaps: {
+                    list: this.form.products.map(item => ({
+                        goodsId: item.goodsId,
+                        goodsName: item.goodsName,
+                        orderQuantity: parseInt(item.orderQuantity || 0),
+                        shippedQuantity: 0,
+                        unshippedQuantity: parseInt(item.orderQuantity || 0),
+                        remark: item.remark || ''
+                    }))
+                  },
+                  children: [
+                    {
+                      name: "insertInstallationOrderDetail",
+                      type: "e",
+                      parammaps: {
+                        goodsId: "@insertInstallationOrderDetail.goodsId",
+                        goodsName: "@insertInstallationOrderDetail.goodsName",
+                        orderQuantity: "@insertInstallationOrderDetail.orderQuantity",
+                        remark: "@insertInstallationOrderDetail.remark",
+                        shippedQuantity: "@insertInstallationOrderDetail.shippedQuantity",
+                        unshippedQuantity: "@insertInstallationOrderDetail.unshippedQuantity",
+                        orderId: "@insertInstallationOrder.LastInsertId"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+
+            // 调用保存接口
+            const response = await ExecDataByConfig(params)
+            if (response.msg === 'ok') {
+              this.$message.success('保存成功')
+              this.handleDialogClose()
+              this.$emit('success')
+            } else {
+              this.$message.error(response.data || '保存失败')
+            }
           } catch (error) {
             console.error('保存失败:', error)
             this.$message.error('保存失败')
@@ -224,10 +530,6 @@ export default {
         }
       }
       
-      .el-input, .el-select, .el-date-picker {
-        width: 180px !important;
-      }
-      
       .el-textarea {
         width: 100%;
       }
@@ -265,4 +567,169 @@ export default {
     }
   }
 }
+
+.product-option {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  transition: all 0.25s ease;
+  border-radius: 4px;
+  margin: 1px;
+  position: relative;
+  border: 1px solid transparent;
+  min-height: 32px;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &:hover {
+    background-color: #f9fafc;
+    border-color: #e4e7ed;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    z-index: 2;
+  }
+
+  .option-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 0 4px;
+    box-sizing: border-box;
+
+    &:first-child {
+      width: 180px;
+      padding-right: 16px;
+      margin-right: 4px;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 14px;
+        width: 1px;
+        background-color: #dcdfe6;
+        transform: translateY(-50%);
+      }
+    }
+
+    &:nth-child(2) {
+      width: 160px;
+      padding-right: 16px;
+      margin-right: 4px;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 14px;
+        width: 1px;
+        background-color: #dcdfe6;
+        transform: translateY(-50%);
+      }
+    }
+
+    &:nth-child(3) {
+      width: 140px;
+      padding-right: 16px;
+      margin-right: 4px;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 14px;
+        width: 1px;
+        background-color: #dcdfe6;
+        transform: translateY(-50%);
+      }
+    }
+
+    &:last-child {
+      flex: 1;
+      min-width: 80px;
+    }
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      color: #409EFF;
+      background: rgba(64, 158, 255, 0.08);
+      padding: 1px 6px;
+      border-radius: 3px;
+      margin-right: 6px;
+      font-size: 12px;
+      min-width: 32px;
+      height: 18px;
+      border: 1px solid rgba(64, 158, 255, 0.2);
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .value {
+      color: #606266;
+      font-size: 12px;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      padding: 0 2px;
+      min-width: 0;
+    }
+  }
+}
+
+:deep(.el-select-dropdown__item) {
+  padding: 0 !important;
+  height: auto !important;
+  margin: 1px;
+  line-height: normal;
+
+  &.hover, &:hover {
+    background-color: transparent;
+    
+    .product-option {
+      background-color: #f9fafc;
+      border-color: #e4e7ed;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &.selected {
+    .product-option {
+      background-color: #f0f7ff;
+      border-color: rgba(64, 158, 255, 0.2);
+      
+      .label {
+        background: rgba(64, 158, 255, 0.12);
+        border-color: rgba(64, 158, 255, 0.3);
+      }
+      
+      .value {
+        color: #409EFF;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: #409EFF;
+      }
+    }
+  }
+}
+
+:deep(.el-select-dropdown__wrap) {
+  padding: 1px;
+  max-height: 280px;
+}
 </style> 

src/views/productManagement/installationOrder/components/EditDialog.vue

@@ -0,0 +1,784 @@
+<!-- 编辑服务计划弹窗 -->
+<template>
+  <el-dialog
+    title="编辑服务计划"
+    :visible.sync="visible"
+    width="1000px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleDialogClose"
+  >
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="服务单号" prop="orderNo">
+            <el-input v-model="form.orderNo" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="下单人" prop="orderer">
+            <el-select v-model="form.orderer" placeholder="请选择下单人" style="width: 100%" filterable>
+              <el-option
+                v-for="item in installerOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="下单时间" prop="orderTime">
+            <el-date-picker
+              v-model="form.orderTime"
+              type="datetime"
+              placeholder="选择日期时间"
+              style="width: 100%"
+              disabled
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="服务项目" prop="serviceProject">
+            <el-select v-model="form.serviceProject" placeholder="请选择服务项目" style="width: 100%">
+              <el-option
+                v-for="item in projectOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="服务人员" prop="serviceStaffIds">
+            <el-select v-model="form.serviceStaffIds" placeholder="请选择服务人员" style="width: 100%">
+              <el-option
+                v-for="item in installerOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="预计完成时间" prop="estimatedCompleteTime">
+            <el-date-picker
+              v-model="form.estimatedCompleteTime"
+              type="date"
+              placeholder="选择日期"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="发货单号" prop="deliveryNo">
+            <el-input v-model="form.deliveryNo" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="合同" prop="contractNo">
+            <el-input v-model="form.contractNo" disabled />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="客户" prop="customer">
+            <el-input
+              v-model="form.customerName"
+              disabled
+              placeholder="客户名称"
+              style="width: 400px !important"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          type="textarea"
+          v-model="form.remark"
+          :rows="2"
+          placeholder="请输入备注信息"
+        />
+      </el-form-item>
+
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="选择货品">
+            <el-select
+              v-model="selectedProduct"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="请输入货品名称搜索"
+              :loading="productLoading"
+              style="width: 600px !important"
+              :remote-method="handleProductInput"
+              @change="handleProductChange"
+              @focus="handleProductInput('')"
+            >
+              <el-option
+                v-for="item in productOptions"
+                :key="item.id"
+                :value="item.id"
+              >
+                <template>
+                  <div class="product-option">
+                    <div class="option-item">
+                      <span class="label">编号</span>
+                      <span class="value">{{item.goodsCode}}</span>
+                    </div>
+                    <div class="option-item">
+                      <span class="label">名称</span>
+                      <span class="value">{{item.goodsName}}</span>
+                    </div>
+                    <div class="option-item">
+                      <span class="label">规格</span>
+                      <span class="value">{{item.goodsSpecification || '-'}}</span>
+                    </div>
+                    <div class="option-item">
+                      <span class="label">库存</span>
+                      <span class="value">{{item.stock || 0}}</span>
+                    </div>
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label-width="120px">
+        <el-table :data="form.products" border style="width: calc(100% - 20px); ">
+          <el-table-column type="index" label="序号" width="50" align="center" />
+          <el-table-column prop="goodsCode" label="货品编号" align="center" />
+          <el-table-column prop="goodsName" label="货品名称" align="center" />
+          <el-table-column prop="goodsSpecification" label="货品规格" align="center" width="50"/>
+          <el-table-column prop="goodsImagePath" label="货品图片" align="center">
+            <template slot-scope="scope">
+              <el-image 
+                v-if="scope.row.goodsImagePath"
+                :src="baseApi + scope.row.goodsImagePath"
+                style="width: 50px; height: 50px"
+                :preview-src-list="[baseApi + scope.row.goodsImagePath]"
+                fit="contain"
+              >
+                <div slot="error" class="image-slot">
+                  <i class="el-icon-picture-outline"></i>
+                </div>
+              </el-image>
+              <div v-else class="image-slot" style="width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; background: #f5f7fa; border-radius: 4px;">
+                <i class="el-icon-picture-outline" style="font-size: 20px; color: #909399;"></i>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="goodsUnit" label="计量单位" align="center" width="50"/>
+          <el-table-column prop="stock" label="现有库存" align="center" width="60"/>
+          <el-table-column prop="orderQuantity" label="订单数量" align="center" width="110">
+            <template slot-scope="scope">
+              <el-input 
+                v-model="scope.row.orderQuantity"
+                size="mini"
+                style="width: 70px"
+                @input="handleOrderQuantityInput($event, scope.row)"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="shippedQuantity" label="已发货数量" align="center" width="70"/>
+          <el-table-column prop="unshippedQuantity" label="未发货数量" align="center" width="70"/>
+          <el-table-column prop="remark" label="备注" align="center" width="100">
+            <template slot-scope="scope">
+              <el-input 
+                v-model="scope.row.remark" 
+                size="mini"
+                placeholder="备注"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="100" fixed="right">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="danger"
+                plain
+                @click="handleRemoveProduct(scope.$index)"
+                style="padding: 4px 8px; border-radius: 4px;"
+              >
+                <i class="el-icon-delete" style="margin-right: 2px;" />
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSubmit">保存并关闭</el-button>
+      <el-button @click="handleCancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { GetDataByName, GetDataByNames, ExecDataByConfig } from '@/api/common'
+
+export default {
+  name: 'EditDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    installerOptions: {
+      type: Array,
+      default: () => []
+    },
+    projectOptions: {
+      type: Array,
+      default: () => []
+    },
+    currentUser: {
+      type: Object,
+      default: () => ({
+        id: '',
+        name: ''
+      })
+    },
+    rowData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    baseApi() {
+      return process.env.VUE_APP_BASE_API
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        // 弹窗打开时初始化数据
+        this.$nextTick(async () => {
+          await this.getOrderData()
+          this.getInitialData()
+        })
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        products: []  // 只保留 products 数组，因为表格初始化需要它
+      },
+      customerOptions: [], // 客户选项
+      loading: false, // 客户加载状态
+      selectedProduct: '', // 当前选中的货品
+      productOptions: [], // 货品选项
+      productLoading: false, // 货品加载状态
+      
+      // 表单校验规则
+      rules: {
+        orderer: [
+          { required: true, message: '请选择下单人', trigger: 'change' }
+        ],
+        serviceProject: [
+          { required: true, message: '请选择服务项目', trigger: 'change' }
+        ],
+        serviceStaffIds: [
+          { required: true, message: '请选择服务人员', trigger: 'change' }
+        ],
+        estimatedCompleteTime: [
+          { required: true, message: '请选择预计完成时间', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 获取订单数据
+    async getOrderData() {
+      try {
+        const params = [
+          {
+            name: "getInstallationOrderById",
+            returntype: "Map",
+            parammaps: {
+              id: this.rowData.id
+            }
+          },
+          {
+            name: "getInstallationOrderDetail",
+            returntype: "Map",
+            parammaps: {
+              orderId: this.rowData.id
+            }
+          }
+        ]
+
+        const response = await GetDataByNames(params)
+        if (response.msg === 'ok') {
+          // 获取主表数据
+          const mainData = response.data.getInstallationOrderById.list[0] || {}
+          // 获取明细表数据
+          const detailData = response.data.getInstallationOrderDetail.list || []
+
+          // 初始化表单数据
+          this.form = {
+            orderNo: mainData.orderNo || '',
+            orderTime: mainData.orderTime ? new Date(mainData.orderTime) : '',
+            orderer: parseInt(mainData.dispatcherId),
+            serviceProject: parseInt(mainData.projectId),
+            serviceStaffIds: parseInt(mainData.serviceStaffIds),
+            estimatedCompleteTime: mainData.estimatedCompleteTime ? new Date(mainData.estimatedCompleteTime) : '',
+            deliveryNo: mainData.deliveryNo || '',
+            contractNo: mainData.contractNo || '',
+            customerName: mainData.customerName || '',
+            remark: mainData.remark || '',
+            products: detailData.map(item => ({
+              goodsId: item.goodsId,
+              goodsCode: item.goodsCode || '',
+              goodsName: item.goodsName || '',
+              goodsSpecification: item.goodsSpecification || '',
+              goodsImagePath: item.goodsImagePath || '',
+              goodsUnit: item.goodsUnit || '',
+              stock: item.stock || 0,
+              orderQuantity: item.orderQuantity || 0,
+              shippedQuantity: item.shippedQuantity || 0,
+              unshippedQuantity: item.unshippedQuantity || 0,
+              remark: item.remark || ''
+            }))
+          }
+          console.log('form:', this.form)
+        } else {
+          this.$message.error('获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error)
+        this.$message.error('获取数据失败')
+      }
+    },
+
+    // 获取客户信息
+    handleCustomerInput(value) {
+      
+    },
+
+    // 关闭弹窗
+    handleDialogClose() {
+      this.$emit('update:visible', false)
+      this.$refs.form && this.$refs.form.resetFields()
+      this.form.products = []
+    },
+
+    // 取消
+    handleCancel() {
+      this.handleDialogClose()
+    },
+
+    getInitialData() {
+      // 获取客户信息
+      this.handleCustomerInput('')
+    },
+
+    // 移除货品
+    handleRemoveProduct(index) {
+      this.form.products.splice(index, 1)
+    },
+
+    // 处理货品输入搜索
+    handleProductInput(value) {
+      this.productLoading = true
+      const send_select_list = {
+        name: 'getGoodsListByCode',
+        returntype: 'Map',
+        parammaps: {
+          goodsCode: value || ''
+        }
+      }
+
+      GetDataByName(send_select_list).then(response => {
+        this.productOptions = response.data.list || []
+      }).catch(error => {
+        console.error('搜索货品失败:', error)
+        this.$message.error('搜索货品失败')
+      }).finally(() => {
+        this.productLoading = false
+      })
+    },
+
+    // 处理货品选择变化
+    handleProductChange(value) {
+      console.log('value:', this.form.products, value)
+      const selectedProduct = this.productOptions.find(item => item.goodsId === value)
+      if (selectedProduct) {
+        // 检查是否已经添加过该货品
+        const existingProduct = this.form.products.find(item => item.goodsId === selectedProduct.goodsId)
+        if (existingProduct) {
+          this.$message.warning('该货品已经添加过了')
+          this.selectedProduct = ''
+          return
+        }
+
+        // 添加新货品到表格
+        this.form.products.push({
+          goodsId: selectedProduct.goodsId,
+          goodsCode: selectedProduct.goodsCode,
+          goodsName: selectedProduct.goodsName,
+          goodsSpecification: selectedProduct.goodsSpecification,
+          goodsImagePath: selectedProduct.goodsImagePath || '',
+          goodsUnit: selectedProduct.goodsUnit,
+          stock: selectedProduct.stock || 0,
+          orderQuantity: 1,
+          shippedQuantity: 0,
+          unshippedQuantity: 0,
+          remark: ''
+        })
+      }
+      this.selectedProduct = '' // 清空选择
+    },
+
+    // 处理订单数量输入
+    handleOrderQuantityInput(value, row) {
+      // 只允许输入正整数
+      value = value.replace(/[^\d]/g, '')
+      if (value === '') {
+        row.orderQuantity = 1
+      } else {
+        const num = parseInt(value)
+        row.orderQuantity = num || 1
+      }
+    },
+
+    // 提交表单
+    handleSubmit() {
+      this.$refs.form.validate(async (valid) => {
+        if (valid) {
+          try {
+            // 检查是否添加了货品
+            if (this.form.products.length === 0) {
+              this.$message.warning('请至少添加一个货品')
+              return
+            }
+
+            // 构建保存参数
+            const params = {
+              common: {
+                returnmap: "0"
+              },
+              data: [
+                {
+                  name: "updateInstallationOrder",
+                  type: "e",
+                  parammaps: {
+                    id: this.rowData.id,
+                    projectId: this.form.serviceProject,
+                    projectName: this.projectOptions.find(item => item.value === this.form.serviceProject)?.label || '',
+                    totalQuantity: this.form.products.reduce((sum, item) => sum + parseInt(item.orderQuantity || 0), 0),
+                    uninstalledQuantity: this.form.products.reduce((sum, item) => sum + parseInt(item.orderQuantity || 0), 0),
+                    dispatcherId: this.form.orderer,
+                    dispatcherName: this.installerOptions.find(item => item.value === this.form.orderer)?.label || '',
+                    serviceStaffNames: this.installerOptions.find(item => item.value === this.form.serviceStaffIds)?.label || '',
+                    serviceStaffIds: this.form.serviceStaffIds,
+                    estimatedCompleteTime: this.form.estimatedCompleteTime ? this.form.estimatedCompleteTime.toISOString().slice(0, 19).replace('T', ' ') : null,
+                    remark: this.form.remark || ''
+                  }
+                },
+                {
+                  name: "deleteInstallationOrderDetailByOrderId",
+                  type: "e",
+                  parammaps: {
+                    orderId: this.rowData.id,
+                  }
+                },
+                {
+                  name: "insertInstallationOrderDetail",
+                  resultmaps: {
+                    list: this.form.products.map(item => ({
+                        goodsId: item.goodsId,
+                        goodsName: item.goodsName,
+                        orderQuantity: parseInt(item.orderQuantity || 0),
+                        shippedQuantity: 0,
+                        unshippedQuantity: parseInt(item.orderQuantity || 0),
+                        remark: item.remark || ''
+                    }))
+                  },
+                  children: [
+                    {
+                      name: "insertInstallationOrderDetail",
+                      type: "e",
+                      parammaps: {
+                        goodsId: "@insertInstallationOrderDetail.goodsId",
+                        goodsName: "@insertInstallationOrderDetail.goodsName",
+                        orderQuantity: "@insertInstallationOrderDetail.orderQuantity",
+                        remark: "@insertInstallationOrderDetail.remark",
+                        shippedQuantity: "@insertInstallationOrderDetail.shippedQuantity",
+                        unshippedQuantity: "@insertInstallationOrderDetail.unshippedQuantity",
+                        orderId: this.rowData.id,
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+
+            // 调用保存接口
+            const response = await ExecDataByConfig(params)
+            if (response.msg === 'ok') {
+              this.$message.success('保存成功')
+              this.handleDialogClose()
+              this.$emit('success')
+            } else {
+              this.$message.error(response.data || '保存失败')
+            }
+          } catch (error) {
+            console.error('保存失败:', error)
+            this.$message.error('保存失败')
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  border-radius: 8px;
+  
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #ebeef5;
+    margin-right: 0;
+    
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+    
+    .el-form {
+      .el-form-item {
+        margin-bottom: 18px;
+        
+        .el-form-item__label {
+          font-weight: normal;
+          color: #606266;
+        }
+      }
+      
+      .el-textarea {
+        width: 100%;
+      }
+      
+      .el-table {
+        margin-top: 8px;
+        
+        th {
+          background-color: #f5f7fa;
+          color: #333;
+          font-weight: 500;
+          padding: 8px 0;
+        }
+        
+        td {
+          padding: 8px 0;
+        }
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    padding: 15px 20px;
+    border-top: 1px solid #ebeef5;
+    text-align: right;
+    
+    .el-button {
+      padding: 9px 20px;
+      font-size: 13px;
+      border-radius: 4px;
+      
+      & + .el-button {
+        margin-left: 10px;
+      }
+    }
+  }
+}
+
+.product-option {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  transition: all 0.25s ease;
+  border-radius: 4px;
+  margin: 1px;
+  position: relative;
+  border: 1px solid transparent;
+  min-height: 32px;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &:hover {
+    background-color: #f9fafc;
+    border-color: #e4e7ed;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    z-index: 2;
+  }
+
+  .option-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 0 4px;
+    box-sizing: border-box;
+
+    &:first-child {
+      width: 180px;
+      padding-right: 16px;
+      margin-right: 4px;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 14px;
+        width: 1px;
+        background-color: #dcdfe6;
+        transform: translateY(-50%);
+      }
+    }
+
+    &:nth-child(2) {
+      width: 160px;
+      padding-right: 16px;
+      margin-right: 4px;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 14px;
+        width: 1px;
+        background-color: #dcdfe6;
+        transform: translateY(-50%);
+      }
+    }
+
+    &:nth-child(3) {
+      width: 140px;
+      padding-right: 16px;
+      margin-right: 4px;
+      
+      &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 14px;
+        width: 1px;
+        background-color: #dcdfe6;
+        transform: translateY(-50%);
+      }
+    }
+
+    &:last-child {
+      flex: 1;
+      min-width: 80px;
+    }
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      color: #409EFF;
+      background: rgba(64, 158, 255, 0.08);
+      padding: 1px 6px;
+      border-radius: 3px;
+      margin-right: 6px;
+      font-size: 12px;
+      min-width: 32px;
+      height: 18px;
+      border: 1px solid rgba(64, 158, 255, 0.2);
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .value {
+      color: #606266;
+      font-size: 12px;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      padding: 0 2px;
+      min-width: 0;
+    }
+  }
+}
+
+:deep(.el-select-dropdown__item) {
+  padding: 0 !important;
+  height: auto !important;
+  margin: 1px;
+  line-height: normal;
+
+  &.hover, &:hover {
+    background-color: transparent;
+    
+    .product-option {
+      background-color: #f9fafc;
+      border-color: #e4e7ed;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &.selected {
+    .product-option {
+      background-color: #f0f7ff;
+      border-color: rgba(64, 158, 255, 0.2);
+      
+      .label {
+        background: rgba(64, 158, 255, 0.12);
+        border-color: rgba(64, 158, 255, 0.3);
+      }
+      
+      .value {
+        color: #409EFF;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background-color: #409EFF;
+      }
+    }
+  }
+}
+
+:deep(.el-select-dropdown__wrap) {
+  padding: 1px;
+  max-height: 280px;
+}
+</style>

src/views/productManagement/installationOrder/components/ViewDialog.vue

@@ -0,0 +1,637 @@
+<!-- 查看服务计划弹窗 -->
+<template>
+  <el-dialog
+    title="查看服务计划"
+    :visible.sync="visible"
+    width="1000px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="handleDialogClose"
+  >
+    <el-form ref="form" :model="form" label-width="120px">
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="服务单号">
+            <el-input v-model="form.orderNo" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="下单人">
+            <el-input v-model="ordererName" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="下单时间">
+            <el-input v-model="form.orderTime" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="服务项目">
+            <el-input v-model="projectName" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="服务人员">
+            <el-input v-model="serviceStaffName" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="接单时间">
+            <el-input v-model="form.acceptTime" readonly />
+          </el-form-item>
+        </el-col>
+        
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="客户">
+            <el-input
+              v-model="form.customerName"
+              readonly
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="发货单号">
+            <el-input v-model="form.deliveryNo" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="合同">
+            <el-input v-model="form.contractNo" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      
+
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <el-form-item label="安装总数量">
+            <el-input v-model="form.totalQuantity" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="已安装数量">
+            <el-input v-model="form.installedQuantity" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="未安装数量">
+            <el-input v-model="form.uninstalledQuantity" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        
+        <el-col :span="8">
+          <el-form-item label="预计完成时间">
+            <el-input v-model="form.estimatedCompleteTime" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="实际完成时间">
+            <el-input v-model="form.actualCompleteTime" readonly />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="距预估完成时间">
+            <el-input v-model="remainingTimeText" readonly />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        
+        <el-col :span="8">
+          <el-form-item label="安装进度">
+            <div class="">
+              <el-progress :percentage="Number(form.progress)" :stroke-width="15" style="line-height: unset;"/>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item label="备注">
+            <el-input
+              type="textarea"
+              v-model="form.remark"
+              :rows="2"
+              readonly
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label-width="0">
+        <div class="detail-section">
+          <div class="table-header">
+            <div class="section-title">货品明细</div>
+            <el-button type="text" class="fold-button" @click="isTableVisible = !isTableVisible">
+              <span>{{ isTableVisible ? '收起' : '展开' }}</span>
+              <i :class="isTableVisible ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
+            </el-button>
+          </div>
+          <div v-show="isTableVisible">
+            <el-table :data="form.products" border style="width: 100%;">
+              <el-table-column type="index" label="序号" width="50" align="center" />
+              <el-table-column prop="goodsCode" label="货品编号" align="center" />
+              <el-table-column prop="goodsName" label="货品名称" align="center" />
+              <el-table-column prop="goodsSpecification" label="货品规格" align="center" width="50"/>
+              <el-table-column prop="goodsImagePath" label="货品图片" align="center">
+                <template slot-scope="scope">
+                  <el-image 
+                    v-if="scope.row.goodsImagePath"
+                    :src="baseApi + scope.row.goodsImagePath"
+                    style="width: 50px; height: 50px"
+                    :preview-src-list="[baseApi + scope.row.goodsImagePath]"
+                    fit="contain"
+                  >
+                    <div slot="error" class="image-slot">
+                      <i class="el-icon-picture-outline"></i>
+                    </div>
+                  </el-image>
+                  <div v-else class="image-slot" style="width: 50px; height: 50px; display: inline-flex; justify-content: center; align-items: center; background: #f5f7fa; border-radius: 4px;">
+                    <i class="el-icon-picture-outline" style="font-size: 20px; color: #909399;"></i>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsUnit" label="计量单位" align="center" width="50"/>
+              <el-table-column prop="stock" label="现有库存" align="center" width="60"/>
+              <el-table-column prop="orderQuantity" label="订单数量" align="center" width="70"/>
+              <el-table-column prop="shippedQuantity" label="已发货数量" align="center" width="70"/>
+              <el-table-column prop="unshippedQuantity" label="未发货数量" align="center" width="70"/>
+              <el-table-column prop="remark" label="备注" align="center" width="100"/>
+            </el-table>
+          </div>
+        </div>
+      </el-form-item>
+
+      <!-- 服务验收 -->
+      <el-form-item label-width="0">
+        <div class="detail-section">
+          <div class="section-title">服务验收</div>
+          <div class="acceptance-image">
+            <el-image 
+              v-if="form.acceptanceImagePath"
+              :src="baseApi + form.acceptanceImagePath"
+              style="width: 120px; height: 120px;"
+              :preview-src-list="[baseApi + form.acceptanceImagePath]"
+              fit="cover"
+            >
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </el-image>
+            <div v-else class="empty-image">
+              <i class="el-icon-picture-outline" style="font-size: 24px;"></i>
+              <span style="margin-top: 8px;">暂无验收图片</span>
+            </div>
+          </div>
+        </div>
+      </el-form-item>
+
+      <!-- 流程进度 -->
+      <el-form-item label-width="0">
+        <div class="detail-section">
+          <div class="section-title">流程进度</div>
+          <div class="process-steps">
+            <el-steps :active="form.currentStep" align-center finish-status="success">
+              <el-step title="服务下单">
+                <template slot="description">
+                  <div class="step-description">
+                    <div>孙xx</div>
+                    <div>{{ form.orderTime }}</div>
+                  </div>
+                </template>
+                <template slot="icon">
+                  <i :class="form.currentStep >= 1 ? 'el-icon-check' : ''" :style="{color: form.currentStep >= 1 ? '#67C23A' : ''}"></i>
+                </template>
+              </el-step>
+              <el-step title="服务接单">
+                <template slot="description">
+                  <div class="step-description">
+                    <div>{{ form.isRejected ? '已驳回' : '徐XX' }}</div>
+                    <div>{{ form.acceptTime }}</div>
+                  </div>
+                </template>
+                <template slot="icon" v-if="form.isRejected">
+                  <i class="el-icon-close" style="color: #F56C6C;"></i>
+                </template>
+              </el-step>
+              <el-step title="开始服务">
+                <template slot="description">
+                  <div class="step-description">
+                    <div>{{ form.startTime ? '徐XX' : '' }}</div>
+                    <div>{{ form.startTime }}</div>
+                  </div>
+                </template>
+              </el-step>
+              <el-step title="完成服务">
+                <template slot="description">
+                  <div class="step-description">
+                    <div>{{ form.actualCompleteTime ? '徐XX' : '' }}</div>
+                    <div>{{ form.actualCompleteTime }}</div>
+                  </div>
+                </template>
+              </el-step>
+              <el-step title="验收">
+                <template slot="description">
+                  <div class="step-description">
+                    <div>{{ form.acceptanceTime ? '孙xx' : '' }}</div>
+                    <div>{{ form.acceptanceTime }}</div>
+                  </div>
+                </template>
+              </el-step>
+            </el-steps>
+          </div>
+        </div>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="handleDialogClose">关 闭</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { GetDataByNames } from '@/api/common'
+
+export default {
+  name: 'ViewDialog',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    installerOptions: {
+      type: Array,
+      default: () => []
+    },
+    projectOptions: {
+      type: Array,
+      default: () => []
+    },
+    rowData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    baseApi() {
+      return process.env.VUE_APP_BASE_API
+    },
+    ordererName() {
+      return this.installerOptions.find(item => item.value === parseInt(this.form.orderer))?.label || ''
+    },
+    projectName() {
+      return this.projectOptions.find(item => item.value === parseInt(this.form.serviceProject))?.label || ''
+    },
+    serviceStaffName() {
+      return this.installerOptions.find(item => item.value === parseInt(this.form.serviceStaffIds))?.label || ''
+    },
+    remainingTimeText() {
+      if (this.form.remainingTime === null || this.form.remainingTime === undefined) return ''
+      if (this.form.remainingTime < 0) {
+        return `已逾期 ${Math.abs(this.form.remainingTime)} 天`      }
+      return `${this.form.remainingTime} 天`
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        // 弹窗打开时初始化数据
+        this.$nextTick(() => {
+          this.getOrderData()
+        })
+      }
+    }
+  },
+  data() {
+    return {
+      isTableVisible: true,
+      isAcceptanceVisible: true,
+      isProcessVisible: true,
+      form: {
+        orderNo: '',
+        orderTime: '',
+        orderer: '',
+        serviceProject: '',
+        serviceStaffIds: '',
+        estimatedCompleteTime: '',
+        deliveryNo: '',
+        contractNo: '',
+        customerName: '',
+        remark: '',
+        products: [],
+        totalQuantity: 0,
+        installedQuantity: 0,
+        uninstalledQuantity: 0,
+        progress: 0,
+        acceptTime: '',
+        actualCompleteTime: '',
+        remainingTime: null,
+        acceptanceImagePath: '',
+        currentStep: 2,
+        isRejected: true,
+        rejectReason: 'xxxxxxx',
+        startTime: '',
+        acceptanceTime: ''
+      }
+    }
+  },
+  methods: {
+    // 获取订单数据
+    async getOrderData() {
+      try {
+        this.isTableVisible = true  // 重置表格为展开状态
+        const params = [
+          {
+            name: "getInstallationOrderById",
+            returntype: "Map",
+            parammaps: {
+              id: this.rowData.id
+            }
+          },
+          {
+            name: "getInstallationOrderDetail",
+            returntype: "Map",
+            parammaps: {
+              orderId: this.rowData.id
+            }
+          }
+        ]
+
+        const response = await GetDataByNames(params)
+        if (response.msg === 'ok') {
+          // 获取主表数据
+          const mainData = response.data.getInstallationOrderById.list[0] || {}
+          // 获取明细表数据
+          const detailData = response.data.getInstallationOrderDetail.list || []
+
+          // 初始化表单数据
+          this.form = {
+            orderNo: mainData.orderNo || '',
+            orderTime: mainData.orderTime || '',
+            orderer: mainData.dispatcherId,
+            serviceProject: mainData.projectId,
+            serviceStaffIds: mainData.serviceStaffIds,
+            estimatedCompleteTime: mainData.estimatedCompleteTime || '',
+            deliveryNo: mainData.deliveryNo || '',
+            contractNo: mainData.contractNo || '',
+            customerName: mainData.customerName || '',
+            remark: mainData.remark || '',
+            totalQuantity: mainData.totalQuantity || 0,
+            installedQuantity: mainData.installedQuantity || 0,
+            uninstalledQuantity: mainData.uninstalledQuantity || 0,
+            progress: mainData.progress || 0,
+            acceptTime: mainData.acceptTime || '',
+            actualCompleteTime: mainData.actualCompleteTime || '',
+            remainingTime: mainData.remainingTime,
+            products: detailData.map(item => ({
+              goodsId: item.goodsId,
+              goodsCode: item.goodsCode || '',
+              goodsName: item.goodsName || '',
+              goodsSpecification: item.goodsSpecification || '',
+              goodsImagePath: item.goodsImagePath || '',
+              goodsUnit: item.goodsUnit || '',
+              stock: item.stock || 0,
+              orderQuantity: item.orderQuantity || 0,
+              shippedQuantity: item.shippedQuantity || 0,
+              unshippedQuantity: item.unshippedQuantity || 0,
+              remark: item.remark || ''
+            })),
+            acceptanceImagePath: mainData.acceptanceImagePath || '',
+            currentStep: mainData.currentStep || 2,
+            isRejected: mainData.isRejected || true,
+            rejectReason: mainData.rejectReason || 'xxxxxxx',
+            startTime: mainData.startTime || '',
+            acceptanceTime: mainData.acceptanceTime || ''
+          }
+        } else {
+          this.$message.error('获取数据失败')
+        }
+      } catch (error) {
+        console.error('获取数据失败:', error)
+        this.$message.error('获取数据失败')
+      }
+    },
+
+    // 关闭弹窗
+    handleDialogClose() {
+      this.$emit('update:visible', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-dialog) {
+  border-radius: 8px;
+  
+  .el-dialog__header {
+    padding: 20px;
+    border-bottom: 1px solid #ebeef5;
+    margin-right: 0;
+    
+    .el-dialog__title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
+  }
+
+  .el-dialog__body {
+    padding: 20px;
+    
+    .el-form {
+      .el-form-item {
+        margin-bottom: 18px;
+        
+        .el-form-item__label {
+          font-weight: normal;
+          color: #606266;
+        }
+
+        :deep(.el-input.is-disabled .el-input__inner) {
+          color: #606266;
+          background-color: #fff;
+          border-color: transparent;
+          cursor: default;
+        }
+
+        :deep(.el-textarea.is-disabled .el-textarea__inner) {
+          color: #606266;
+          background-color: #fff;
+          border-color: transparent;
+          cursor: default;
+        }
+      }
+      
+      .el-textarea {
+        width: 100%;
+      }
+      
+      .el-table {
+        margin-top: 8px;
+        
+        th {
+          background-color: #f5f7fa;
+          color: #333;
+          font-weight: 500;
+          padding: 8px 0;
+        }
+        
+        td {
+          padding: 8px 0;
+        }
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    padding: 15px 20px;
+    border-top: 1px solid #ebeef5;
+    text-align: right;
+    
+    .el-button {
+      padding: 9px 20px;
+      font-size: 13px;
+      border-radius: 4px;
+    }
+  }
+}
+
+.progress-wrapper {
+  padding: 0 10px;
+  .progress-text {
+    display: block;
+    text-align: center;
+    margin-bottom: 5px;
+    color: #606266;
+  }
+  :deep(.el-progress-bar__outer) {
+    background-color: #ebeef5;
+  }
+  :deep(.el-progress-bar__inner) {
+    transition: all 0.3s;
+  }
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+  
+  .fold-button {
+    padding: 0;
+    font-size: 13px;
+    color: #909399;
+    
+    span {
+      margin-right: 4px;
+    }
+    
+    &:hover {
+      color: #409EFF;
+    }
+  }
+}
+
+.acceptance-image {
+  margin-top: 10px;
+  :deep(.el-image) {
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid #ebeef5;
+  }
+}
+
+.empty-image {
+  width: 120px;
+  height: 120px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #f5f7fa;
+  color: #909399;
+  font-size: 13px;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+}
+
+.section-title {
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 15px;
+  position: relative;
+  padding-left: 10px;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 15px;
+    background-color: #409EFF;
+    border-radius: 2px;
+  }
+}
+
+.process-steps {
+  padding: 20px;
+  background-color: #f8f9fb;
+  border-radius: 4px;
+
+  :deep(.el-step__head) {
+    .el-step__icon {
+      width: 26px;
+      height: 26px;
+    }
+  }
+
+  :deep(.el-step__main) {
+    .el-step__title {
+      font-size: 14px;
+      font-weight: 500;
+    }
+  }
+
+  .step-description {
+    font-size: 12px;
+    line-height: 1.5;
+    
+    div:first-child {
+      color: #409EFF;
+      margin-bottom: 2px;
+    }
+    
+    div:last-child {
+      color: #909399;
+    }
+  }
+
+  .reject-reason {
+    margin-top: 20px;
+    padding: 12px 15px;
+    background-color: #fef0f0;
+    color: #f56c6c;
+    font-size: 13px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.detail-section {
+  padding-left: 20px;
+}
+</style>
+

src/views/productManagement/installationOrder/index.vue

@@ -5,7 +5,7 @@
     <el-form :model="queryParams" ref="queryForm" :inline="true" class="demo-form-inline">
       <el-form-item>
         <el-select
-          v-model="queryParams.installer"
+          v-model="queryParams.serviceStaffIds"
           placeholder="服务人员"
           clearable
           filterable
@@ -31,7 +31,7 @@
       </el-form-item>
       <el-form-item>
         <el-select
-          v-model="queryParams.status"
+          v-model="queryParams.statusName"
           placeholder="处理状态"
           clearable
           size="small"
@@ -87,7 +87,7 @@
       </el-form-item>
       <el-form-item>
         <el-button size="small" class="successBorder" icon="el-icon-search" @click="handleQuery">搜索</el-button>
-        <el-button size="small" class="successBorder" icon="el-icon-download" @click="handleExport">导出</el-button>
+        <el-button size="small" class="successBorder" icon="el-icon-download" @click="onExportClick">导出</el-button>
         <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增计划</el-button>
         <el-radio-group v-model="queryParams.viewType" size="small" @change="handleViewTypeChange" style="margin-left: 8px">
           <el-radio-button label="">全部</el-radio-button>
@@ -116,12 +116,12 @@
       <el-table-column prop="orderNo" label="服务单号" align="center" />
       <el-table-column prop="projectName" label="项目名称" align="center" />
       <el-table-column prop="customerName" label="客户名称" align="center" width="120" />
-      <el-table-column prop="product" label="货品" align="center" width="150" >
+      <el-table-column prop="goodsName" label="货品" align="center" width="150" >
         <template slot-scope="scope">
           <div class="product-tags">
-            <template v-if="scope.row.product">
+            <template v-if="scope.row.goodsName">
               <el-tag
-                v-for="(item, index) in scope.row.product.split(';')"
+                v-for="(item, index) in scope.row.goodsName.split(',')"
                 :key="index"
                 size="mini"
                 :type="['success', 'warning', 'danger', 'primary'][index % 4]"
@@ -145,13 +145,13 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="dispatcher" label="派单人" align="center" width="100" />
-      <el-table-column prop="serviceStaff" label="服务人员" align="center" width="120">
+      <el-table-column prop="dispatcherName" label="派单人" align="center" width="100" />
+      <el-table-column prop="serviceStaffNames" label="服务人员" align="center" width="120">
         <template slot-scope="scope">
           <div class="staff-tags">
-            <template v-if="scope.row.serviceStaff">
+            <template v-if="scope.row.serviceStaffNames">
               <el-tag
-                v-for="(item, index) in scope.row.serviceStaff.split(';')"
+                v-for="(item, index) in scope.row.serviceStaffNames.split(',')"
                 :key="index"
                 size="mini"
                 :type="['primary', 'success', 'warning', 'danger'][index % 4]"
@@ -188,9 +188,9 @@
         </template>
       </el-table-column>
       <el-table-column prop="actualCompleteTime" label="实际完成时间" align="center" width="140" />
-      <el-table-column prop="status" label="处理状态" align="center" width="100">
+      <el-table-column prop="statusName" label="处理状态" align="center" width="100">
         <template slot-scope="scope">
-          <el-tag :type="getStatusType(scope.row.statusText)">{{ scope.row.statusText }}</el-tag>
+          <el-tag :type="getStatusType(scope.row.statusName)">{{ scope.row.statusName }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column prop="remark" label="备注" align="center" min-width="120" />
@@ -198,7 +198,8 @@
         <template slot-scope="scope">
           <el-button
             size="mini"
-            style="color: #333"
+            type="info"
+            plain
             @click="handleView(scope.row)"
           >查看</el-button>
           <el-button
@@ -233,11 +234,35 @@
       @pagination="getList"
     />
 
-    <!-- 新增服务计划弹窗 -->
+    <!-- 新增服务计划弹窗 
+     传递 installerOptions 给下单人和服务人员选择器
+     传递 projectOptions 给服务项目选择器
+     传递 currentUser 给下单人选择器-->
     <add-dialog
       :visible.sync="dialogVisible"
+      :installer-options="installerOptions"
+      :project-options="projectOptions"
+      :current-user="currentUser"
       @success="getList"
     />
+
+    <!-- 编辑弹窗 -->
+    <edit-dialog
+      :visible.sync="editDialogVisible"
+      :installer-options="installerOptions"
+      :project-options="projectOptions"
+      :current-user="currentUser"
+      :row-data="currentRow"
+      @success="handleEditSuccess"
+    />
+
+    <!-- 查看弹窗 -->
+    <view-dialog
+      :visible.sync="viewDialogVisible"
+      :installer-options="installerOptions"
+      :project-options="projectOptions"
+      :row-data="currentRow"
+    />
   </div>
 </template>
 
@@ -245,13 +270,22 @@
 import Pagination from "@/components/Pagination";
 import { GetDataByName, GetDataByNames } from '@/api/common'
 import AddDialog from './components/AddDialog'
+import exportMixin from '@/mixins/exportMixin'
+import paramsMixin from './mixins/paramsMixin'
+import { exportInstallationOrder } from '@/api/productManagement/installation'
+import Cookies from 'js-cookie'
+import EditDialog from './components/EditDialog.vue'
+import ViewDialog from './components/ViewDialog.vue'
 
 export default {
   name: 'InstallationOrder',
   components: {
     Pagination,
-    AddDialog
+    AddDialog,
+    EditDialog,
+    ViewDialog
   },
+  mixins: [exportMixin, paramsMixin],
   data() {
     return {
       // 表格高度
@@ -268,9 +302,9 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 10,
-        installer: '',
+        serviceStaffIds: '',
         customerName: '',
-        status: '',
+        statusName: '',
         projectName: '',
         projectId: '',
         orderTimeRange: [],
@@ -316,10 +350,19 @@ export default {
       },
       pendingCount: 0,
       // 弹窗显示控制
-      dialogVisible: false
+      dialogVisible: false,
+      // 当前用户信息
+      currentUser: {
+        id: Cookies.get('g_userId') || '',
+        name: Cookies.get('g_empname') || ''
+      },
+      editDialogVisible: false,
+      viewDialogVisible: false,
+      currentRow: null
     }
   },
   created() {
+    console.log('当前用户信息', this.currentUser)
     this.getList()
     this.getSelectOptions()
     // 添加resize事件监听
@@ -345,43 +388,13 @@ export default {
         }, delay)
       }
     },
+    
     // 获取列表数据
     getList() {
       this.loading = true;
-      // 处理日期范围
-      let orderStartTime = '';
-      let orderEndTime = '';
-      let completeStartTime = '';
-      let completeEndTime = '';
-
-      if (this.queryParams.orderTimeRange && this.queryParams.orderTimeRange.length === 2) {
-        orderStartTime = this.formatDate(this.queryParams.orderTimeRange[0]);
-        orderEndTime = this.formatDate(this.queryParams.orderTimeRange[1]);
-      }
-      if (this.queryParams.completeTimeRange && this.queryParams.completeTimeRange.length === 2) {
-        completeStartTime = this.formatDate(this.queryParams.completeTimeRange[0]);
-        completeEndTime = this.formatDate(this.queryParams.completeTimeRange[1]);
-      }
-
-      // 构造查询参数
-      const send_data = {
-        name: 'getInstallationOrderList',
-        page: this.queryParams.pageNum,
-        offset: this.queryParams.pageNum,
-        pagecount: this.queryParams.pageSize,
-        returntype: 'Map',
-        parammaps: {
-          installer: this.queryParams.installer || '',
-          customerName: this.queryParams.customerName || '',
-          status: this.queryParams.status || '',
-          projectId: this.queryParams.projectId || '',
-          orderNo: this.queryParams.orderNo || '',
-          orderStartTime,
-          orderEndTime,
-          completeStartTime,
-          completeEndTime,
-        }
-      };
+      
+      // 使用参数处理混入方法
+      const send_data = this.handleParams(this.queryParams, 'getInstallationOrderList');
 
       GetDataByName(send_data).then(response => {
         this.tableData = response.data.list || [];
@@ -448,28 +461,40 @@ export default {
       this.queryParams.pageNum = 1
       this.getList()
     },
+    // 导出按钮点击事件处理
+    onExportClick() {
+      const params = this.handleExportParams(this.queryParams, '/api/installation/export');
+      
+      this.handleExport({
+        exportApi: exportInstallationOrder,
+        params,
+        fileName: '安装工单列表.xlsx'
+      })
+    },
     handleAdd() {
       this.dialogVisible = true
     },
     handleViewTypeChange(value) {
-      this.queryParams.status = value
+      this.queryParams.statusName = value
       this.getList()
     },
-    getStatusType(status) {
+    getStatusType(statusName) {
       const statusMap = {
         '待处理': 'warning',
         '处理中': 'primary',
         '已完成': 'success',
         '已驳回': 'danger'
       }
-      console.log('状态类型', status)
-      return statusMap[status] || 'info'
+      return statusMap[statusName] || 'info'
     },
     handleView(row) {
-      // TODO: 实现查看功能
+      this.currentRow = row
+      this.viewDialogVisible = true
     },
+    // 处理编辑按钮点击
     handleEdit(row) {
-      // TODO: 实现编辑功能
+      this.currentRow = row
+      this.editDialogVisible = true
     },
     // 删除
     async handleDelete(row) {
@@ -615,6 +640,10 @@ export default {
       const month = String(d.getMonth() + 1).padStart(2, '0');
       const day = String(d.getDate()).padStart(2, '0');
       return `${year}-${month}-${day}`;
+    },
+    // 处理编辑成功
+    handleEditSuccess() {
+      this.getList() // 刷新列表数据
     }
   }
 }

src/views/productManagement/installationOrder/mixins/paramsMixin.js

@@ -0,0 +1,76 @@
+export default {
+  methods: {
+    /**
+     * 处理查询参数
+     * @param {Object} queryParams - 原始查询参数
+     * @param {string} name - 接口名称
+     * @returns {Object} 处理后的参数
+     */
+    handleParams(queryParams, name = 'getInstallationOrderList') {
+      const { orderTimeRange, completeTimeRange, ...restParams } = queryParams
+      
+      return {
+        name,
+        page: queryParams.pageNum,
+        offset: queryParams.pageNum,
+        pagecount: queryParams.pageSize,
+        returntype: 'Map',
+        parammaps: {
+          serviceStaffIds: restParams.serviceStaffIds || '',
+          customerName: restParams.customerName || '',
+          statusName: restParams.statusName || '',
+          projectId: restParams.projectId || '',
+          orderNo: restParams.orderNo || '',
+          orderStartTime: orderTimeRange?.[0] ? this.formatDate(orderTimeRange[0]) : '',
+          orderEndTime: orderTimeRange?.[1] ? this.formatDate(orderTimeRange[1]) : '',
+          completeStartTime: completeTimeRange?.[0] ? this.formatDate(completeTimeRange[0]) : '',
+          completeEndTime: completeTimeRange?.[1] ? this.formatDate(completeTimeRange[1]) : ''
+        }
+      }
+    },
+
+    /**
+     * 处理导出参数
+     * @param {Object} queryParams - 原始查询参数
+     * @param {string} name - 接口名称
+     * @returns {Object} 处理后的导出参数
+     */
+    handleExportParams(queryParams, name) {
+      if (!name) {
+        throw new Error('导出接口名称不能为空')
+      }
+      
+      const { orderTimeRange, completeTimeRange, pageNum, pageSize, ...restParams } = queryParams
+      
+      return {
+        name,
+        returntype: 'Map',
+        parammaps: {
+          serviceStaffIds: restParams.serviceStaffIds || '',
+          customerName: restParams.customerName || '',
+          statusName: restParams.statusName || '',
+          projectId: restParams.projectId || '',
+          orderNo: restParams.orderNo || '',
+          orderStartTime: orderTimeRange?.[0] ? this.formatDate(orderTimeRange[0]) : '',
+          orderEndTime: orderTimeRange?.[1] ? this.formatDate(orderTimeRange[1]) : '',
+          completeStartTime: completeTimeRange?.[0] ? this.formatDate(completeTimeRange[0]) : '',
+          completeEndTime: completeTimeRange?.[1] ? this.formatDate(completeTimeRange[1]) : ''
+        }
+      }
+    },
+
+    /**
+     * 格式化日期为yyyy-MM-dd
+     * @param {Date} date - 日期对象
+     * @returns {string} 格式化后的日期字符串
+     */
+    formatDate(date) {
+      if (!date) return ''
+      const d = new Date(date)
+      const year = d.getFullYear()
+      const month = String(d.getMonth() + 1).padStart(2, '0')
+      const day = String(d.getDate()).padStart(2, '0')
+      return `${year}-${month}-${day}`
+    }
+  }
+}