安装工单-页面初始化

src/views/productManagement/installationOrder/index.vue

@@ -0,0 +1,255 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<template>
+  <div class="installation-order">
+    <!-- 筛选条件 -->
+    <el-card class="filter-container">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
+        <el-form-item label="安装人员">
+          <el-input v-model="queryParams.installer" placeholder="请输入安装人员" clearable size="small"/>
+        </el-form-item>
+        <el-form-item label="客户名称">
+          <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable size="small"/>
+        </el-form-item>
+        <el-form-item label="处理状态">
+          <el-select v-model="queryParams.status" placeholder="请选择处理状态" clearable size="small">
+            <el-option
+              v-for="dict in statusOptions"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="项目名称">
+          <el-select v-model="queryParams.projectName" placeholder="请选择项目名称" clearable size="small">
+            <el-option
+              v-for="dict in projectOptions"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="下单时间">
+          <el-date-picker
+            v-model="queryParams.orderTimeRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item label="完成时间">
+          <el-date-picker
+            v-model="queryParams.completeTimeRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            size="small"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
+          <el-button type="success" icon="el-icon-download" size="small" @click="handleExport">导出</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 操作按钮 -->
+    <el-card class="operation-container">
+      <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增计划</el-button>
+      <el-radio-group v-model="queryParams.viewType" size="small" @change="handleViewTypeChange">
+        <el-radio-button label="all">全部</el-radio-button>
+        <el-radio-button label="pending">待处理</el-radio-button>
+        <el-radio-button label="processed">已处理</el-radio-button>
+      </el-radio-group>
+    </el-card>
+
+    <!-- 表格 -->
+    <el-card>
+      <el-table v-loading="loading" :data="tableData" border>
+        <el-table-column type="index" label="序号" width="50" align="center"/>
+        <el-table-column prop="orderNo" label="安装单号" align="center"/>
+        <el-table-column prop="projectName" label="项目名称" align="center"/>
+        <el-table-column prop="customerName" label="客户名称" align="center"/>
+        <el-table-column prop="product" label="货品" align="center"/>
+        <el-table-column prop="totalQuantity" label="安装总数量" align="center"/>
+        <el-table-column prop="installedQuantity" label="已安装数量" align="center"/>
+        <el-table-column prop="uninstalledQuantity" label="未安装数量" align="center"/>
+        <el-table-column prop="progress" label="安装进度" align="center">
+          <template slot-scope="scope">
+            <el-progress :percentage="scope.row.progress"/>
+          </template>
+        </el-table-column>
+        <el-table-column prop="dispatcher" label="派单人" align="center"/>
+        <el-table-column prop="serviceStaff" label="服务人员" align="center"/>
+        <el-table-column prop="orderTime" label="下单时间" align="center"/>
+        <el-table-column prop="acceptTime" label="接单时间" align="center"/>
+        <el-table-column prop="estimatedCompleteTime" label="预估完成时间" align="center"/>
+        <el-table-column prop="remainingTime" label="距预估完成时间还剩" align="center"/>
+        <el-table-column prop="actualCompleteTime" label="实际完成时间" align="center"/>
+        <el-table-column prop="status" label="处理状态" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.statusText }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" label="备注" align="center"/>
+        <el-table-column label="操作" width="400" align="center">
+          <template slot-scope="scope">
+            <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
+            <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
+            <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
+            <el-button size="mini" type="text" @click="handleDispatch(scope.row)">派单</el-button>
+            <el-button size="mini" type="text" @click="handleReject(scope.row)">接单驳回</el-button>
+            <el-button size="mini" type="text" @click="handleDailyWrite(scope.row)">每日填写</el-button>
+            <el-button size="mini" type="text" @click="handleComplete(scope.row)">完成</el-button>
+            <el-button size="mini" type="text" @click="handleAccept(scope.row)">接单</el-button>
+            <el-button size="mini" type="text" @click="handleCheck(scope.row)">验收</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      
+      <!-- 分页 -->
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InstallationOrder',
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 总条数
+      total: 0,
+      // 表格数据
+      tableData: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        installer: undefined,
+        customerName: undefined,
+        status: undefined,
+        projectName: undefined,
+        orderTimeRange: [],
+        completeTimeRange: [],
+        viewType: 'all'
+      },
+      // 状态选项
+      statusOptions: [
+        { label: '待处理', value: 'pending' },
+        { label: '处理中', value: 'processing' },
+        { label: '已完成', value: 'completed' },
+        { label: '已驳回', value: 'rejected' }
+      ],
+      // 项目选项
+      projectOptions: [
+        { label: '项目A', value: 'A' },
+        { label: '项目B', value: 'B' }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.loading = true
+      // TODO: 调用接口获取数据
+      setTimeout(() => {
+        this.loading = false
+      }, 1000)
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    handleExport() {
+      // TODO: 实现导出功能
+    },
+    handleAdd() {
+      // TODO: 实现新增功能
+    },
+    handleViewTypeChange(value) {
+      this.getList()
+    },
+    getStatusType(status) {
+      const statusMap = {
+        pending: 'info',
+        processing: 'warning',
+        completed: 'success',
+        rejected: 'danger'
+      }
+      return statusMap[status]
+    },
+    handleView(row) {
+      // TODO: 实现查看功能
+    },
+    handleEdit(row) {
+      // TODO: 实现编辑功能
+    },
+    handleDelete(row) {
+      // TODO: 实现删除功能
+    },
+    handleDispatch(row) {
+      // TODO: 实现派单功能
+    },
+    handleReject(row) {
+      // TODO: 实现接单驳回功能
+    },
+    handleDailyWrite(row) {
+      // TODO: 实现每日填写功能
+    },
+    handleComplete(row) {
+      // TODO: 实现完成功能
+    },
+    handleAccept(row) {
+      // TODO: 实现接单功能
+    },
+    handleCheck(row) {
+      // TODO: 实现验收功能
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.installation-order {
+  padding: 20px;
+  
+  .filter-container {
+    margin-bottom: 20px;
+  }
+  
+  .operation-container {
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .el-card {
+    margin-bottom: 20px;
+  }
+  
+  :deep(.el-table) {
+    margin-top: 10px;
+    
+    .el-button {
+      padding: 2px 0;
+      margin: 0 5px;
+    }
+  }
+}
+</style>