5.16

src/pages/Middle/transport/TrainNumber/TrainNumber/List.vue

@@ -38,14 +38,14 @@
     </a-row>
 
 
-    <vxe-toolbar ref="xToolbar" custom>
+    <vxe-toolbar ref="xToolbar" custom export>
       <template #buttons>
         <a-button type="primary" icon="delete" @click="pageDelete()">批量删除</a-button>
       </template>
     </vxe-toolbar>
     <!-- 表格区 -->
     <div class="gridPanel">
-      <vxe-grid ref='xGrid' v-bind="gridOptions">
+      <vxe-grid ref='xGrid' v-bind="gridOptions" :export-config="{}">
 
         <!-- =============================== 表格列 自动生成 Start =============================== -->
         <template #truck_id="{ row }">

src/pages/Middle/transport/Truck/Truck/TrainNumberList.vue

@@ -1,15 +1,33 @@
 <template>
+  <div>
+    <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch" @reset="onReset">
+      <template #driver_id="{ }">
+        <ZkSelectSearch :ListTitle="'请选择司机'" :IsListShowCode="true"     
+          :ListUrl="zkSelectSearch2.Search"
+          :ListUrlData="zkSelectSearch2.zkSelectData"
+          :ListFieldName="zkSelectSearch2.zkSelectDataFieldName"
+          :BackFieldNames="zkSelectSearch2.zkBackFieldNames" @zkSelectSearch="StaffhandleChange">
+        </ZkSelectSearch>
+      </template>
+      <template #date="{ }">
+        <a-form-item label="创建时间" :style="{ display: 'inline-block', width: 120 }">
+        </a-form-item>
+        <a-form-item :style="{ display: 'inline-block', width: 'calc(100% - 120px )' }">
+          <a-range-picker @change="onDateChange" />
+        </a-form-item>
+      </template>
+    </vxe-form>
     <vxe-grid ref='xGrid' v-bind="gridOptions" @form-submit="initListData" @page-change="handlePageChange">
     <!--  工具栏  -->
     <template #toolbar_buttons>
       <a-button @click="pageDelete()">批量删除</a-button>
     </template>
     <!--  时间选择  -->
-    <template #create_time_item>
+    <!-- <template #create_time_item>
       <a-range-picker @change="onChangeCreatTime"/>
-    </template>
+    </template> -->
     <!--  表单区操作  -->
-    <template #operate_item>
+    <!-- <template #operate_item>
       <a-button type="primary" status="primary">查询</a-button>
       <a-button
           @click="() => {
@@ -20,7 +38,7 @@
                   }"
       >重置
       </a-button>
-    </template>
+    </template> -->
     
     <template #driver_id="{ row }">
       {{ row.driver_name }}
@@ -64,13 +82,16 @@
       <a-empty/>
     </template>
   </vxe-grid>
+  </div>
+  
 </template>
 <script>
 import ListMixin from "@/application/zk/mixins/ListComponents.js";
-
+import BASE_URL from '@/services/Middle/transport/TrainNumber/api.js';
-
+import ZkSelectSearch from '@/components/zk/zkSelectSearch.vue';
 export default {
   mixins: [ListMixin],
+  components: { ZkSelectSearch },
   props: {
     Columns: {
       type: Array
@@ -110,6 +131,54 @@ export default {
   data() {
     return {
       DeleteIds: [], // 删除的id
+      zkSelectSearch2: {
+        Search: `${BASE_URL.BASE_URL}/MesStaff/v1/mes/staff/list`,
+        zkSelectData: {
+          page: 1,
+          limit: 50,
+          order_bys: [
+            {
+              column: "create_time",
+              order: "desc"
+            },
+          ],
+        },
+        zkSelectDataFieldName: 'MesStaff',
+        zkBackFieldNames: ['id', 'name', 'code', 'create_time'],
+      },
+     //搜索区
+     searchFormData: {
+        code: '',
+        truck_id: '',
+        driver_id: '',
+      },
+      // 搜索区配置
+      searchRules: [
+        { key: "code", mode: "like" },
+        { key: "driver_id", mode: "like" }
+      ],
+      //搜索区
+      searchFormItems: [ // 子项
+        {
+          field: 'code',
+          title: '车次单号',
+          span: 4,
+          itemRender: { name: '$input', props: { placeholder: '请输入车次单号' } }
+        },
+        {
+          field: 'driver_id',
+          title: '司机',
+          span: 4,
+          slots: { default: 'driver_id' }
+        },
+        { span: 8, slots: { default: 'date' } },  // 自定义列
+        {
+          align: 'left', span: 4, itemRender: {  // 按钮列
+            name: '$buttons', children: [{ props: { type: 'submit', content: '搜索', status: 'primary' } },  // 搜索按钮
+            { props: { type: 'reset', content: '重置' } }]
+          }
+        }
+      ],
       gridOptions: { // 表格配置
         resizable: true,  // 是否允许拖动列宽调整大小
         border: true,  // 是否带有纵向边框
@@ -186,6 +255,9 @@ export default {
           mode: "=",
           value: this.truckID
         })
+      this.ListUrlData.start_time = this.start_time;
+      this.ListUrlData.end_time = this.end_time;
+      this.ListUrlData.search_rules =  this.ListUrlData.search_rules.concat(this.getSearchParms());
       this.$zk.getPagedData({
         url: this.ListUrl,
         listFieldName: this.ListFieldName,
@@ -259,6 +331,16 @@ export default {
         this.ListUrlData.end_time = dateString[1];
         this.initListData()
       }
+    },
+     // 修改日期
+     onDateChange(date) { // 日期选择器事件
+      if (date && date.length) { // 如果有值
+        this.start_time = parseInt(date[0]._d.getTime() / 1000); // 将日期转换为时间戳
+        this.end_time = parseInt(date[1]._d.getTime() / 1000); // 将日期转换为时间戳
+      } else { // 如果没有值
+        this.start_time = 0; // 将日期转换为时间戳
+        this.end_time = 0; // 将日期转换为时间戳
+      }
     },
     // 新增
     Add() {
@@ -296,6 +378,55 @@ export default {
           success && this.initListData(); // 如果成功，初始化列表数据
         }
       })
+    },
+     // 选择器改变
+     StaffhandleChange(value) {
+      
+      this.searchFormData.driver_id = value.id;
+      
+      // this.$refs.xGrid.commitProxy('query') // 提交搜索
+      
+    },
+    // 获取搜索参数
+    getSearchParms() { // 获取搜索参数
+      var rules = []; // 定义搜索参数
+      let findMode = k => { // 查找搜索模式
+        for (let i in this.searchRules) { // 遍历搜索规则
+          if (this.searchRules[i].key == k) return this.searchRules[i].mode; // 如果找到了就返回搜索模式
+        }
+        return "="; // 如果没有找到就返回等于
+      };
+
+      for (let key in this.searchFormData) { // 遍历搜索表单数据
+        let value = this.searchFormData[key]; // 获取值
+        if (value) { // 如果有值
+          let mode = findMode(key); // 获取搜索模式
+          if (mode == "like") { // 如果是模糊搜索
+            value = "%" + value + "%"; // 如果是模糊搜索就在两边加上%
+          }
+          rules.push({ // 添加搜索参数
+            column: key, // 字段名
+            mode: mode, // 搜索模式
+            value: value // 值
+          });
+        }
+      }
+      return rules; // 返回搜索参数
+    },
+     // 搜索
+     onSearch() {
+      this.initListData()
+      // console.log(this.$refs.xGrid)
+      // this.$refs.xGrid.commitProxy('query') // 提交搜索
+    },
+    onReset(){
+      this.start_time = null;
+      this.end_time = null;
+      this.searchFormData = {
+        code: '',
+        driver_id:'',
+      }
+      this.initListData();
     }
   }
 }