货车收入列表

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

@@ -49,18 +49,19 @@
       </a-descriptions-item>
     </a-descriptions>
 
-
+    <a-tabs default-active-key="1"  size="large">
-    <div class="train-number">
+      <a-tab-pane key="1" tab="货车收入列表">
-      <h2>
+        <TruckIncomeList :ListUrl="TruckIncomeList" :ListUrlData="TSelectData" :ListFieldName="TSelectDataFieldName"
-        出车记录
+        :Columns="this.$data.Tcolumns" :dataId ="dataId">
-      </h2>
+      </TruckIncomeList>
-
+      </a-tab-pane>
-      <zkTableList :ListUrl="TrainNumberList" :ListUrlData="zkSelectData" :ListFieldName="zkSelectDataFieldName"
+      <a-tab-pane key="2" tab="出车记录" force-render>  
-        :Columns="this.$data.columns">
+        <zkTableList :ListUrl="TrainNumberList" :ListUrlData="zkSelectData" :ListFieldName="zkSelectDataFieldName"
+        :Columns="this.$data.columns" >
 
       </zkTableList>
-
+      </a-tab-pane>
-    </div>
+    </a-tabs>
 
 
 
@@ -68,10 +69,11 @@
 </template>
 <script>
 import zkTableList from "./TrainNumberList.vue";
-
+import TruckIncomeList from "./TruckList.vue";
 export default {
   components: {
-    zkTableList
+    zkTableList,
+    TruckIncomeList
   },
   props: {
     dataId: {
@@ -91,10 +93,16 @@ export default {
   data() {
     return {
       TrainNumberList: `${this.$BASE_URL}/TrainNumber/v1/train/number/list`, // 车次列表
+      TruckIncomeList: `${this.$BASE_URL}/Truck/v1/truck/income/list`, // 车辆收入列表
+      truckID:null,
       zkSelectData:{
 
+      },
+      TSelectData:{
+
       },
       zkSelectDataFieldName:"TrainNumber",
+      TSelectDataFieldName:"TruckIncome",
       // 表格列配置
       columns: [
         { type: 'seq', width: 60 },
@@ -144,6 +152,30 @@ export default {
 
           // =============================== 表格列 自动生成 Start ===============================
 
+      ],
+      Tcolumns: [
+        { type: 'seq', width: 60 },
+          // =============================== 表格列 自动生成 Start ===============================
+          { field: 'train_number_code', align: 'center', sortable: true, title: '出车单号', width: 200 }, // 车次单号
+          { field: 'train_number_id', align: 'center', sortable: true, title: '出车单号id', width: 200 }, // 车次单号
+          { field: 'year', align: 'center', sortable: true, title: '年份', width: 120 }, // 车次单号
+          { field: 'month', align: 'center', sortable: true, title: '月份', width: 120 }, // 车次单号
+          { field: 'date_time', align: 'center', sortable: true, title: '日期', formatter: 'formatDate', width: 200 }, // 车次单号
+          {
+            field: 'driver_id', align: 'center', sortable: true, title: '司机', width: 80,
+            slots: { default: 'driver_id' }
+          }, // 司机id
+          // {field: 'custom_id', sortable: true, title: '客户id', width: 250}, // 客户id
+          // { field: 'custom_name', align: 'center', sortable: true, title: '客户名称', width: 200 }, // 客户名称
+          // {field: 'supplier_id', sortable: true, title: '供应商id', width: 250}, // 供应商id
+          // { field: 'supplier_name', align: 'center', sortable: true, title: '供应商名称', width: 200 }, // 客户名称
+          {
+            field: 'income', sortable: true, title: '收入', minWidth: 80, fixed: 'right',
+            align: 'center',
+          }, // 收入
+
+          // =============================== 表格列 自动生成 Start ===============================
+
       ],
       data: {},
     }
@@ -169,8 +201,7 @@ export default {
           }
         }
       }).then(a => {
-        console.log("a", a)
+
-        console.log("this.pageOptions.ApiUrl", this.pageOptions.ApiUrl)
         this.data = a.data[this.pageOptions.FieldName];
       }).catch((a) => {
         this.$mk.error(a.msg, "aaa");

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

@@ -0,0 +1,300 @@
+<template>
+  <vxe-grid ref='xGrid' v-bind="gridOptions" @form-submit="initListData" @page-change="handlePageChange">
+    <!--  时间选择  -->
+    <template #create_time_item>
+      <a-range-picker @change="onChangeCreatTime"/>
+    </template>
+    <!--  表单区操作  -->
+    <template #operate_item>
+      <a-button type="primary" status="primary">查询</a-button>
+      <a-button
+          @click="() => {
+                    gridOptions.formConfig.data.name = '';
+                    gridOptions.formConfig.data.code = '';
+                    gridOptions.formConfig.data.create_time = 0;
+                    gridOptions.formConfig.data.end_time = 0;
+                  }"
+      >重置
+      </a-button>
+    </template>
+    
+    <template #driver_id="{ row }">
+      {{ row.driver_name }}
+    </template>
+    <template #is_outsourcing="{ row }">
+      <a-tag color="green" v-if="row.is_outsourcing === 1">
+        委外出车
+      </a-tag>
+      <a-tag color="blue" v-if="row.is_need_outbound === 1">
+        正常出车
+      </a-tag>
+    </template>
+
+    <template #is_change_tire="{ row }">
+      <a-tag color="green" v-if="row.is_change_tire === 0">
+        无
+      </a-tag>
+      <a-tag color="red" v-else>
+        是
+      </a-tag>
+    </template>
+
+    <template #is_repair="{ row }">
+      <a-tag color="green" v-if="row.is_repair === 0">
+        无
+      </a-tag>
+      <a-tag color="red" v-else>
+        是
+      </a-tag>
+    </template>
+
+    <template #is_oil="{ row }">
+      <a-tag color="green" v-if="row.is_oil === 0">
+        无
+      </a-tag>
+      <a-tag color="red" v-else>
+        是
+      </a-tag>
+    </template>
+    <template #empty>
+      <a-empty/>
+    </template>
+  </vxe-grid>
+</template>
+<script>
+import ListMixin from "@/application/zk/mixins/ListComponents.js";
+
+
+export default {
+  mixins: [ListMixin],
+  props: {
+    Columns: {
+      type: Array
+    },
+    dataId:{},
+    FormConfig: {
+      type: Object,
+      default: () => {
+        return {
+          data: {
+            name: '',
+            code: '',
+            create_time: 0
+          },
+          // items: [
+          //   {
+          //     field: 'name',
+          //     title: '名称',
+          //     slots: {default: 'name_item'} // 自定义插槽
+          //   },
+          //   {
+          //     field: 'code',
+          //     title: '编码',
+          //     slots: {default: 'code_item'} // 自定义插槽
+          //   },
+          //   {
+          //     field: 'create_time',
+          //     title: '时间',
+          //     slots: {default: 'create_time_item'} // 自定义插槽
+          //   },
+          //   {slots: {default: 'operate_item'}}
+          // ]
+        }
+      }
+    },
+  },
+  data() {
+    return {
+      DeleteIds: [], // 删除的id
+      gridOptions: { // 表格配置
+        resizable: true,  // 是否允许拖动列宽调整大小
+        border: true,  // 是否带有纵向边框
+        showOverflow: true,  // 当内容过长时显示为省略号
+        loading: false,  // 是否显示加载中
+        minHeight: '600',   // 最小高度
+        maxHeight: '1200',  // 最大高度
+        // 间隔条纹
+        stripe: true,
+        exportConfig: {  // 导出配置
+
+        },
+
+        pagerConfig: {// 分页配置
+          total: 0, // 总条数
+          currentPage: this.ListUrlData.page, // 当前页
+          pageSize: this.ListUrlData.limit, // 默认每页显示条数
+          pageSizes: [10, 20, 30, 50, 100, 500, 1000, 2000] // 每页显示条数选项
+        },
+        checkboxConfig: { // 复选框配置
+          // 设置复选框支持分页勾选，需要设置 rowId 行数据主键
+          reserve: true,
+          // 点击行选中复选框
+          trigger: 'row',
+          highlight: true
+        },
+        formConfig: this.FormConfig,  // 表单配置
+        toolbarConfig: { // 工具栏配置
+          export: true,  // 是否显示导出按钮
+          custom: true,  // 是否显示自定义列按钮
+          slots: {
+            buttons: 'toolbar_buttons'  // 自定义插槽
+          }
+        },
+        columns: this.Columns,  // 表格列配置
+        data: []
+      },
+    }
+  },
+  created() {
+    // 初始化列表数据
+    this.initListData()
+  },
+  methods: {
+
+    // 初始化列表数据
+    initListData() {
+      this.ListUrlData.order_bys = []
+      this.ListUrlData.order_bys.push({
+        column: "create_time",
+        order: "desc"
+      })
+      this.ListUrlData.search_rules = [];
+      // if (this.gridOptions.formConfig.data.name !== '') {
+      //   this.ListUrlData.search_rules.push(
+      //       {
+      //         column: "name",
+      //         mode: "like",
+      //         value: this.gridOptions.formConfig.data.name
+      //       }
+      //   )
+      // }
+      // if (this.gridOptions.formConfig.data.code !== '') {
+      //   this.ListUrlData.search_rules.push(
+      //       {
+      //         column: "code",
+      //         mode: "like",
+      //         value: this.gridOptions.formConfig.data.code
+      //       }
+      //   )
+      // }
+      this.ListUrlData.truck_id = this.$mk.toBigInt(this.dataId);
+      this.$zk.getPagedData({
+        url: this.ListUrl,
+        listFieldName: this.ListFieldName,
+        data: this.ListUrlData,
+        loading: "加载中...",
+        config: {
+          headers: {
+            'Content-Type': 'application/json'
+          }
+        }
+      }).then(a => {
+        if (a.total === 0) {
+          this.gridOptions.pagerConfig.currentPage = this.ListUrlData.page;
+          this.gridOptions.pagerConfig.pageSize = this.ListUrlData.limit;
+          this.gridOptions.pagerConfig.total = a.total;
+          this.gridOptions.data = a[this.ListFieldName];
+          return
+        }
+        this.gridOptions.data = a[this.ListFieldName];
+        // this.list中的id字段转换为字符串
+        this.gridOptions.data.forEach(item => {
+          item.id = item.id.toString();
+        });
+        this.gridOptions.pagerConfig.currentPage = this.ListUrlData.page;
+        this.gridOptions.pagerConfig.pageSize = this.ListUrlData.limit;
+        this.gridOptions.pagerConfig.total = a.total;
+      }).catch((a) => {
+        this.$mk.error(a.msg);
+      });
+    },
+
+    // 删除
+    pageDelete: function (row) {
+      let ids = [];
+      if (row) {
+        ids.push(row.id);
+      }
+      this.$refs.xGrid.getCheckboxRecords().forEach(item => {
+        ids.push(item.id);
+      });
+      console.log(ids);
+      if (!ids.length) {  // 如果没有选中行
+        this.$mk.error("请选择行"); // 提示
+        return;
+      }
+      this.$mk.confirm('您确定要删除吗？').then(type => { // 确认删除
+        if (type === 'confirm') { // 如果确认删除
+          this.DeleteUrlData.ids = ids;
+          this.Delete()
+          this.$message.success("删除成功")
+        }
+      });
+
+
+    },
+    // 分页
+    handlePageChange({currentPage, pageSize}) {
+      this.ListUrlData.page = currentPage
+      this.ListUrlData.limit = pageSize
+      this.initListData()
+    },
+    // 时间选择
+    onChangeCreatTime(date, dateString) {
+      console.log("dateString:", dateString)
+      if (dateString[0] === '' && dateString[1] === '') {
+        this.ListUrlData.start_time = 0;
+        this.ListUrlData.end_time = 0;
+        this.initListData()
+      } else {
+        this.ListUrlData.start_time = dateString[0];
+        this.ListUrlData.end_time = dateString[1];
+        this.initListData()
+      }
+    },
+    // 新增
+    Add() {
+      this.$openPage(this.CreateRouter);
+    },
+    // 编辑
+    pageEdit(row) {
+      console.log(row)
+      if (!row) { // 如果没有选中行
+        this.$mk.msg("请选择行"); // 提示
+        return; // 返回
+      }
+      this.$openPage(this.UpdateRouter + "/" + row.id); // 打开页面
+    },
+    // 详情
+    pageDetail(row) {
+      console.log(row)
+      if (!row) { // 如果没有选中行
+        this.$mk.msg("请选择行"); // 提示
+        return; // 返回
+      }
+      this.$mk.dialog.open({
+        height: 800,
+        width: 1200,
+        page: () => import(this.DetailVueComponent),
+        title: "详情",
+        dataId: row.id,
+        pageOptions: {
+          ApiUrl: this.DetailUrl,
+          ApiData: this.DetailUrlData,
+          FieldName: this.DetailFieldName,
+          title: "详情",
+        },
+        // callback: ({success}) => {
+        //   success && this.initListData(); // 如果成功，初始化列表数据
+        // }
+      })
+    }
+  }
+}
+
+</script>
+<style scoped lang="less">
+.ant-btn {
+  margin-right: 10px;
+}
+</style>