开发环境配置更新与数据查询优化

- 优化了technicianData组件中的数据查询逻辑，添加了日期范围选择和技师姓名搜索功能。
- 实现了分页功能，可以调整每页显示数量并进行分页跳转。
- 重命名方法参数以提高代码的可读性。

src/api/system/js.js

@@ -107,10 +107,10 @@ export function getDept(data) {
 }
 
 // 技师数据
-export function getJsData(data) {
+export function getJsData(query) {
   return request({
     url: '/tJsDay/selectAll',
     method: 'get',
-    data:data
+    params:query
   })
 }

src/views/technician/technicianData/technicianData.vue

@@ -2,11 +2,48 @@
   <div class="data_box">
 
     <div class="block">
-      <span class="demonstration">统计日期</span>
+
+
+  
+  <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+
+    <el-form-item label="统计日期" prop="value2">
       <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
-        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="getList"
+        value-format="yyyy-MM-dd">
       </el-date-picker>
+    </el-form-item>
+      <el-form-item label="技师姓名" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入技师姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
     </div>
+
+
     <el-table :data="tableData" style="width: 100%">
       <!-- <el-table-column prop="date" label="日期" width="180">
       </el-table-column>
@@ -28,6 +65,16 @@
       <!-- <el-table-column label="部门id" align="center" prop="deptId" /> -->
       <el-table-column label="城市" align="center" prop="deptName" />
     </el-table>
+    <el-pagination 
+    v-show="total > 0"
+    @size-change="handleSizeChange" 
+    @current-change="handleCurrentChange" 
+    :current-page="queryParams.current"
+    :page-sizes="[10, 20, 30, 40, 50, 100]" 
+    :page-size="queryParams.size" 
+    layout="total, sizes, prev, pager, next, jumper" 
+    :total="total">
+    </el-pagination>
   </div>
 
 
@@ -73,21 +120,71 @@ export default {
         }]
       },
       value2: '',
-      tableData: []
+      tableData: [],
+      // 总条数
+      total: 0,
+      size: 10,
+      showSearch: true,
+      // 查询参数
+      queryParams: {
+        startTime: "",
+        endTime: "",
+        current: 1,
+        name: null,
+        size: 10,
+        
+      }
     };
   },
   methods: {
     //获取技师数据
-    getJsData() {
-      getJsData().then((res) => {
-        this.tableData = res.data.records
+    getList() {
+      this.queryParams.startTime = this.value2[0]
+      this.queryParams.endTime = this.value2[1]
+      // console.log(this.value2)
+      console.log(this.queryParams)
+      getJsData(this.queryParams).then((res) => {
+        console.log("111111111111111", this.queryParams)
+        this.tableData = res.data.records;
+        this.total = res.data.total;
         console.log(res);
       });
     },
+
+    handleSizeChange(val) {
+    // console.log(val,"handleSizeChange")
+    this.queryParams.size = val;
+    this.getList();
+  },
+  handleCurrentChange(val) {
+      this.queryParams.current = val;
+      this.getList();
+      // console.log(val,"val")
+    },
+    handleQuery(val){
+      // this.queryParams.name = val;
+      this.getList();
+      // console.log(val,"val")
+    },
+    resetQuery() {
+      this.reset()
+      this.value2 = ''
+      this.getList();
+    },
+    reset(){
+      this.queryParams = {
+        startTime: null,
+        endTime: null,
+        current: 1,
+        name: null,
+        size: 10,
+      }
+    }
   },
 
+ 
   mounted() {
-    this.getJsData();
+    this.getList();
   },
 };
 </script>
@@ -96,6 +193,20 @@ export default {
 .data_box {
   width: 100%;
   height: 100%;
-  padding: 20px;
+  padding: 30px;
+}
+.el-pagination {
+  float: right;
+  padding: 30px 0;
+}
+.demonstration{
+  margin-right: 30px ;
+}
+.block{
+  margin-bottom: 30px ;
+}
+.el-input{
+  width: 200px;
+  margin-left: 30px;
 }
 </style>