门店管理，销售管理的代码框架开发

src/views/sales/index.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件区域 -->
+    <el-card class="filter-container" shadow="never">
+      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
+        <el-form-item label="选择门店">
+          <el-select v-model="queryParams.storeId" placeholder="请选择所属门店" clearable>
+            <el-option
+              v-for="item in storeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="销售名称">
+          <el-input
+            v-model="queryParams.salesName"
+            placeholder="请输入销售名称"
+            clearable
+            style="width: 200px"
+          />
+        </el-form-item>
+
+        <el-form-item label="销售创建时间">
+          <el-date-picker
+            v-model="queryParams.createTimeRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          />
+        </el-form-item>
+
+        <el-form-item label="所属项目">
+          <el-select v-model="queryParams.projectId" placeholder="请选择所属项目" clearable>
+            <el-option
+              v-for="item in projectOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="录音时间">
+          <el-date-picker
+            v-model="queryParams.recordingTimeRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          />
+        </el-form-item>
+
+        <el-form-item label="状态">
+          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
+            <el-option label="启用" value="1" />
+            <el-option label="禁用" value="0" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">筛选</el-button>
+          <el-button icon="el-icon-delete" @click="resetQuery">清空</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <!-- 数据表格区域 -->
+    <el-card class="table-container" shadow="never">
+      <el-table
+        v-loading="loading"
+        :data="salesList"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
+
+        <el-table-column type="selection" width="55" />
+        <el-table-column label="序号" type="index" width="50" />
+        <el-table-column label="销售名称" prop="salesName" min-width="120" />
+        <el-table-column label="登录账号" prop="loginAccount" min-width="120" />
+        <el-table-column label="录音数" prop="recordingCount" sortable min-width="100" />
+        <el-table-column label="平均录音时间(分钟)" prop="avgRecordingTime" sortable min-width="150" />
+        <el-table-column label="录音总时长(小时)" prop="totalRecordingTime" sortable min-width="150" />
+        <el-table-column label="所属项目" prop="projectName" min-width="150" />
+        <el-table-column label="所属门店" prop="storeName" min-width="150" />
+        <el-table-column label="角色" prop="role" min-width="100" />
+        <el-table-column label="创建时间" prop="createTime" min-width="150" />
+        <el-table-column label="最近录音时间" prop="lastRecordingTime" min-width="150" />
+        <el-table-column label="最后登录时间" prop="lastLoginTime" min-width="150" />
+        <el-table-column label="最后登录IP" prop="lastLoginIp" min-width="120" />
+        <el-table-column label="销售状态" prop="status" min-width="100">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
+              {{ scope.row.status === '1' ? '启用' : '禁用' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="120" fixed="right">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleViewRecordings(scope.row)">查看录音</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <el-pagination
+        :current-page="queryParams.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="queryParams.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top: 20px; text-align: right;"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getSalesList, deleteSales } from '@/api/sales'
+
+export default {
+  name: 'Sales',
+  data() {
+    return {
+      loading: false,
+      salesList: [],
+      total: 0,
+      selectedIds: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        salesName: '',
+        storeId: '',
+        projectId: '',
+        status: '',
+        createTimeRange: [],
+        recordingTimeRange: []
+      },
+      // 门店选项
+      storeOptions: [
+        { value: '1', label: '销售演示-上汽' },
+        { value: '2', label: 'DCC演示' }
+      ],
+      // 项目选项
+      projectOptions: [
+        { value: '1', label: '广丰项目' },
+        { value: '2', label: '广丰项目 电话接访话术' }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    // 获取列表数据
+    getList() {
+      this.loading = true
+      const params = {
+        ...this.queryParams,
+        createTimeStart: this.queryParams.createTimeRange && this.queryParams.createTimeRange[0],
+        createTimeEnd: this.queryParams.createTimeRange && this.queryParams.createTimeRange[1],
+        recordingTimeStart: this.queryParams.recordingTimeRange && this.queryParams.recordingTimeRange[0],
+        recordingTimeEnd: this.queryParams.recordingTimeRange && this.queryParams.recordingTimeRange[1]
+      }
+
+      // 移除空值
+      Object.keys(params).forEach(key => {
+        if (params[key] === '' || params[key] === null || params[key] === undefined) {
+          delete params[key]
+        }
+      })
+
+      getSalesList(params).then(response => {
+        this.salesList = response.data.records || response.data
+        this.total = response.data.total || response.data.length
+        this.loading = false
+      }).catch(() => {
+        // 开发环境使用模拟数据
+        this.salesList = [
+          {
+            id: 1,
+            salesName: '123',
+            loginAccount: '123321',
+            recordingCount: 0,
+            avgRecordingTime: 0,
+            totalRecordingTime: 0,
+            projectName: '广丰项目',
+            storeName: '销售演示-上汽',
+            role: '销售',
+            createTime: '2025-06-20 12:56',
+            lastRecordingTime: '',
+            lastLoginTime: '2025-07-02 12:07:02',
+            lastLoginIp: '-',
+            status: '1'
+          },
+          {
+            id: 2,
+            salesName: '刘先生',
+            loginAccount: '刘先生',
+            recordingCount: 8,
+            avgRecordingTime: 2.79,
+            totalRecordingTime: 0.37,
+            projectName: '广丰项目 电话接访话术',
+            storeName: 'DCC演示',
+            role: '呼叫员',
+            createTime: '2025-06-04 18:37',
+            lastRecordingTime: '2025-07-01 10:47:24',
+            lastLoginTime: '2025-08-07 15:02:19',
+            lastLoginIp: '-',
+            status: '1'
+          }
+        ]
+        this.total = this.salesList.length
+        this.loading = false
+      })
+    },
+
+    // 查询
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+
+    // 重置查询
+    resetQuery() {
+      this.$refs.queryForm.resetFields()
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        salesName: '',
+        storeId: '',
+        projectId: '',
+        status: '',
+        createTimeRange: [],
+        recordingTimeRange: []
+      }
+      this.getList()
+    },
+
+    // 选择变化
+    handleSelectionChange(selection) {
+      this.selectedIds = selection.map(item => item.id)
+    },
+
+    // 分页大小变化
+    handleSizeChange(val) {
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+
+    // 当前页变化
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+
+    // 查看录音
+    handleViewRecordings(row) {
+      console.log('查看录音', row)
+      this.$message.info('查看录音功能待实现')
+    },
+
+    // 编辑
+    handleEdit(row) {
+      console.log('编辑', row)
+    },
+
+    // 删除
+    handleDelete(row) {
+      this.$confirm('确认删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteSales(row.id).then(() => {
+          this.$message.success('删除成功')
+          this.getList()
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.filter-container {
+  margin-bottom: 20px;
+}
+
+.table-container {
+  margin-top: 20px;
+}
+
+.el-form-item {
+  margin-bottom: 15px;
+}
+</style>