添加筛选

pages/main/index/cloud_balance.vue

@@ -1,5 +1,21 @@
 <template>
   <div id="cloud-balance">
+    <section class="top">
+      <el-select v-model="status" placeholder="项目状态">
+        <el-option v-for="item of jobStatusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+      </el-select>
+      <el-select v-model="period" placeholder="账单状态">
+        <el-option
+          v-for="item of periodStatusList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        ></el-option>
+      </el-select>
+      <el-input style="width: 200px;" v-model="checkUser" placeholder="负责人"></el-input>
+      <el-input style="width: 200px;" v-model="jobID" placeholder="项目ID"></el-input>
+      <el-button @click="clickSearchConfirm">确认</el-button>
+    </section>
     <div class="table">
       <el-table
         v-if="tableData.length"
@@ -126,6 +142,17 @@ const tableWidths = [
 export default {
   data() {
     return {
+      // 项目ID
+      jobID: '',
+      // 审核人
+      period: '',
+      status: '',
+      // 状态列表数据
+      jobStatusList: [],
+      // 负责人
+      checkUser: '',
+      // 审核人列表
+      periodStatusList: [],
       // 数据总条目
       totalCount: 0,
       currentPage: 1,
@@ -141,8 +168,21 @@ export default {
   },
   mounted() {
     this.getTableData()
+    this.getEnum()
   },
   methods: {
+    /**
+     * 获取筛选值
+     */
+    async getEnum() {
+      let { data } = await this.$get('/api/admin/job/getEnum')
+      console.log(data)
+      if(data) {
+        let { jobStatusList, periodStatusList } = data
+        this.jobStatusList = jobStatusList
+        this.periodStatusList = periodStatusList
+      }
+    },
     // 点击操作
     clickOperate({ job_id, id }) {
       // todo period_id mean what?
@@ -185,11 +225,22 @@ export default {
         pre_send_salary_timeShow: new Date(i.pre_send_salary_time * 1000).toLocaleDateString(),
       }))
     },
+    /**
+     * 点击筛选确认
+     */
+    clickSearchConfirm() {
+      this.currentPage = 1
+      this.getTableData()
+    },
     // 获取列表数据
-    async getTableData(page = 1) {
+    async getTableData() {
       this.tableData = []
-      const res = await this.$post('/api/admin/job/get_all_periods', { page }) // /api/admin/job/jobs {status: 0, p:1} /api/admin/job/job_status_map
-      // console.log(res)
+      let body = { page: this.currentPage }
+      if(this.status) body.j_status = this.status
+      if(this.period) body.p_status = this.period
+      if(this.checkUser) body.chk_user = this.checkUser
+      if(this.jobID) body.job_id = this.jobID
+      const res = await this.$post('/api/admin/job/get_all_periods', body)
       const data = res.data
       this.tableData = this.formatTableData(data.list)
       // // console.log(this.tableData)
@@ -201,10 +252,14 @@ export default {
 </script>
 
 <style>
+#cloud-balance .top {
+  margin-top: 10px;
+}
 #cloud-balance .table {
-  height: calc(100% - 40px);
+  margin-top: 30px;
+  height: calc(100% - 120px);
 }
 #cloud-balance .end-row {
-  background: rgba(0, 0, 0, .1);
+  background: rgba(0, 0, 0, 0.1);
 }
 </style>