feat(工时列表): 增加项目筛选功能

.eslintrc.js

@@ -40,6 +40,7 @@ module.exports = {
     "vue/no-use-v-if-with-v-for": 0,
     "vue/html-closing-bracket-newline": 0,
     "vue/no-parsing-error": 0,
-    "no-console": 0
+    "no-console": 0,
+    "vue/max-attributes-per-line": 4
   }
 }
\ No newline at end of file

src/api/project/project.js

+import {axios} from '@/util/axios/request';
+
+const baseUrl = {
+  // 项目
+  project: '/projects', 
+};
+
+
+/**
+ * 可供选择的项目
+ * @param {*} parameter 
+ */
+export function getSelectableProjects() {
+  return axios({
+    url: `${baseUrl.project}/selectable`,
+    method: 'get'
+  })
+}

src/api/task/task.js

@@ -6,7 +6,10 @@ const baseUrl = {
 };
 
 
-
+/**
+ * 工时列表
+ * @param {*} parameter 
+ */
 export function getPage(parameter) {
   return axios({
     url: `${baseUrl.taskEstimate}/consumed-page`,
@@ -14,4 +17,14 @@ export function getPage(parameter) {
     data: parameter,
     useFullLoading: true
   })
+}
+
+/**
+ * 工时辅助信息
+ */
+export function getAuxiliaryInfo(month) {
+  return axios({
+    url: `${baseUrl.taskEstimate}/auxiliary-info/${month}`,
+    method: 'get'
+  });
 }
\ No newline at end of file

src/views/task/taskEstimate/TaskEstimateList.vue

@@ -18,6 +18,37 @@
                 />
               </a-form-item>
             </a-col>
+
+            <a-col :span="6">
+              <a-form-item
+                label="月份"
+                :labelCol="{ span: 8 }"
+                :wrapperCol="{ span: 16 }"
+              >
+                <a-month-picker
+                  style="width: 100%"
+                  @change="onMonthChange"
+                  :defaultValue="moment()"
+                />
+              </a-form-item>
+            </a-col>
+
+            <a-col :span="6">
+              <a-form-item
+                label="项目"
+                :labelCol="{ span: 8 }"
+                :wrapperCol="{ span: 16 }"
+              >
+                <a-select
+                  show-search
+                  :filter-option="projectFilterOption"
+                  :allowClear="true"
+                  v-model="query.projectId"
+                  :options="projectOptions"
+                  @change="projectChange"
+                />
+              </a-form-item>
+            </a-col>
           </a-row>
         </div>
       </a-form>
@@ -26,16 +57,14 @@
       <a-table
         size="middle"
         @change="sortChange"
-        :columns="columns"
+        :columns="reactiveColumns"
         :dataSource="dataSource"
         :pagination="false"
-        :rowKey="rowKey"
+        rowKey="rowKey"
         :loading="loading"
         bordered
+        class="task-consume-table"
       >
-        <!--        <template v-for="">-->
-
-        <!--        </template>-->
         <div slot="title" slot-scope="data">
           <span class="cust-title">
             <a-icon type="hdd" />工时列表{{ data.none }}
@@ -63,46 +92,25 @@
             :showTotal="$showTotal"
           />
         </div>
-        <span slot="action" slot-scope="text, record, index">
-          <a-button
-            size="small"
-            style="margin-right: 20px"
-            @click="changeStatus(record, index)"
-            :disabled="isEdit"
-            v-if="!record.disabled"
-            ><span style="font-size: 8px">编辑</span></a-button
-          >
-          <a-button
-            size="small"
-            style="margin-right: 20px"
-            @click="changeStatus(record, index)"
-            v-if="record.disabled"
-            ><span style="font-size: 8px">取消</span></a-button
-          >
-        </span>
-        <span slot="wages" slot-scope="text, record, index" :key="record.id">
-          <a-input-number
-            style="width: 200px"
-            v-if="record.disabled || isEdit"
-            @change="(e) => handleChange(e, index, 'wages')"
-            :defaultValue="text"
-          ></a-input-number>
-          <template v-else> ￥ {{ text }} RMB</template>
-        </span>
       </a-table>
     </div>
   </a-card>
 </template>
 
 <script>
-import { getPage } from "@/api/task/task";
+import { getPage, getAuxiliaryInfo } from "@/api/task/task";
+import { getSelectableProjects } from "@/api/project/project";
 import { humpToLine, setOrder } from "@/util/util";
+import moment from "moment";
+import _ from "lodash";
 
 const dataSource = [];
+
 const columns = [
   {
     title: "姓名",
-    dataIndex: "userName",
+    dataIndex: "realName",
+    width: 80,
     customRender: (value, row) => {
       const obj = {
         children: value,
@@ -112,36 +120,33 @@ const columns = [
       return obj;
     },
   },
-  { title: "项目", dataIndex: "projectName" },
-];
-const totalCol = { title: "合计", dataIndex: "total",align: 'right' };
-
-// 1日到28日
-for (let i = 1; i <= 28; i++) {
-  columns.push({
-    title: i,
-    dataIndex: `d${i}`,
-    align: 'right'
-  });
-}
-// 29到31日
-for (let i = 29; i <= 31; i++) {
-  columns.push({
-    title: i,
-    align: 'right',
-    dataIndex: `d${i}`,
-   /*  customRender: (value) => {
+  {
+    title: "项目",
+    dataIndex: "projectName",
+    width: 200,
+    customRender: (value, record) => {
       const obj = {
         children: value,
         attrs: {},
       };
-
+      if (record.rowKey.startsWith("total")) {
+        obj.attrs.style = "font-weight: 600;";
+      }
       return obj;
-    }, */
-  });
-}
+    },
+  },
+];
 
-columns.push(totalCol);
+const totalCol = {
+  title: "合计",
+  dataIndex: "total",
+  align: "right",
+  width: 45,
+  customRender: (text) => ({
+    children: _.round(text || 0, 1),
+    attrs: { style: "font-weight: 500;" },
+  }),
+};
 
 export default {
   name: "TaskEstimateList",
@@ -150,11 +155,13 @@ export default {
       isFirstLoad: true,
       query: {
         userName: "",
-        month: "",
+        projectId: null,
+        month: moment().format("YYYY-MM"),
         sort: "",
         page: 1,
         size: 10,
       },
+      month: null,
       dayOfTheMonth: 31,
       total: 0,
       isEdit: false,
@@ -163,12 +170,57 @@ export default {
       loading: false,
       columns: columns,
       dataSource: dataSource,
+      moment,
+      fixedColums: [],
+      restDays: [],
+      standardConsume: 8,
+      projectOptions: [],
     };
   },
   computed: {
     defaultPageSize: function () {
       return this.$defaultPageSize();
     },
+    reactiveColumns() {
+      const dateColumns = [];
+
+      for (let i = 1; i <= this.dayOfTheMonth; i++) {
+        dateColumns.push({
+          title: i,
+          dataIndex: `d${i}`,
+          width: 40,
+          align: "right",
+          customRender: (text, record) => {
+            const value = _.round(text || 0, 1);
+
+            const obj = {
+              children: value,
+              attrs: {
+                style: "text-align: right;",
+              },
+            };
+            if (record.rowKey.startsWith("total")) {
+              obj.attrs.style += "font-weight: 500;";
+              if (!this.restDays.includes(i)) {
+                if (value > this.standardConsume) {
+                  obj.attrs.style = obj.attrs.style + "color: blue;";
+                }
+                if (value < this.standardConsume) {
+                  obj.attrs.style = obj.attrs.style + "color: red;";
+                }
+              }
+            }
+            if (this.restDays.includes(i)) {
+              obj.attrs.style = obj.attrs.style + "background: #9aefb8;";
+            }
+
+            return obj;
+          },
+        });
+      }
+
+      return columns.concat(dateColumns.concat(totalCol));
+    },
   },
   methods: {
     search() {
@@ -177,6 +229,11 @@ export default {
     },
     reset() {
       this.query.userName = "";
+      this.query.projectId = null;
+      this.query.month = moment().format("YYYY-MM");
+      this.loadData();
+    },
+    projectChange() {
       this.loadData();
     },
     pageChange(page) {
@@ -199,6 +256,12 @@ export default {
         }
         this.loading = false;
       });
+      getAuxiliaryInfo(this.query.month).then(
+        ({ data: [restDays, standardConsume] }) => {
+          this.restDays = restDays;
+          this.standardConsume = standardConsume;
+        }
+      );
     },
 
     sortChange(pagination, filters, sorter) {
@@ -206,16 +269,40 @@ export default {
       this.query.order = setOrder(sorter.order);
       this.loadData();
     },
-    changeBatch() {},
-
-    onCtDateChange(date, dateString) {
-      this.ctDatePicker = date;
-      this.query.ctDateBegin = dateString[0];
-      this.query.ctDateEnd = dateString[1];
+    /**
+     * 筛选项目
+     */
+    projectFilterOption(input, option) {
+      return (
+        option.componentOptions.children[0].text
+          .toLowerCase()
+          .indexOf(input.toLowerCase()) >= 0
+      );
+    },
+    /**
+     * 月份输入框change事件
+     */
+    onMonthChange(date, dateString) {
+      // 重新查询数据
+      this.query.page = 1;
+      this.month = date;
+      this.query.month = dateString;
       this.loadData();
+      // 重新计算当月天数
+      this.dayOfTheMonth = date.daysInMonth();
     },
   },
-  mounted() {},
+  mounted() {
+    getSelectableProjects().then(({ data }) => {
+      if (data && data.length) {
+        this.projectOptions = data.map((d) => ({
+          title: d.name,
+          value: d.id,
+        }));
+      }
+    });
+  },
+
   activated() {
     if (this.isFirstLoad == true) {
       this.loadData(this.defaultPageSize);