进度-2

src/views/progress/component/share.vue

@@ -1,54 +1,193 @@
 <template>
     <el-card class="tjm_card_style_custom">
+        <div class="tjm_card_title">条件检索</div>
+        <div class="tjm_card_select">
+            <el-scrollbar>
+                <el-form class="tjm_card_select_left" :model="params" label-width="80px" label-position="left">
+                    <el-row :gutter="15">
+                        <el-col :lg="8" :md="12" :xs="24">
+                            <el-form-item label="所属部门">
+                                <el-tree-select v-model="deptQuery.modelValue" :data="deptQuery.data" :props="deptQuery.props" check-strictly filterable clearable placeholder="请选择所属部门" @node-click="nodeClick"></el-tree-select>
+                            </el-form-item>
+                        </el-col>
+                        <!-- <el-col :lg="8" :md="12" :xs="24">
+                            <el-form-item label="填报人">
+                                <el-input v-model="params.createName" clearable placeholder="请输入填报人"></el-input>
+                            </el-form-item>
+                        </el-col> -->
+                        <el-col :lg="8" :md="12" :xs="24">
+                            <el-form-item label="项目名称">
+                                <el-input v-model="params.name" clearable placeholder="请输入项目名称"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :lg="12" :md="16" :xs="24" class="query-date-col">
+                            <el-form-item label="填报日期">
+                                <el-date-picker v-model="createMonth" type="month" :clearable="false" value-format="YYYY-MM" placeholder="请选择填报月份" @change="monthChange"></el-date-picker>
+                                <el-date-picker v-model="createTime" type="daterange" :disabled-date="disabledDate" :clearable="false" value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>            
+                </el-form>
+
+                <div class="tjm_card_select_right">
+                    <el-button type="primary" icon="search" @click="reloadTable">搜索</el-button>
+                    <el-button icon="refresh-right" @click="reset">重置</el-button>
+                </div>
+            </el-scrollbar>
+        </div>
+        <el-divider></el-divider>
+
+        <div class="tjm_card_tools">
+            <div class="tjm_card_tools_right">
+                <el-button icon="download" @click="table_export">导出</el-button>
+            </div>
+        </div>
+
         <div class="tjm_card_table">
             <el-table v-loading="loading" row-key="id" header-cell-class-name="tjm_card_table_header" height="400" :data="tableData" border @row-click="table_detail">
                 <el-table-column type="index" label="序号" width="55"></el-table-column>
+                 <template v-for="(item, index) in columns" :key="index">
+                    <el-table-column :label="item.label" :prop="item.props" :min-width="item.width || 180" show-overflow-tooltip>
+                        <template #default="scope">
+                            <el-tag v-if="item.props == 'ytbDate' && !columnFormat(scope.row, item.props)" type="info">未设置</el-tag>
+                            <el-tag v-else-if="item.props == 'isReport' || item.props == 'isDelay'" :type="tagType(columnFormat(scope.row, item.props))">{{ columnFormat(scope.row, item.props) }}</el-tag>
+                            <template v-else>{{ columnFormat(scope.row, item.props) }}</template>
+                        </template>
+                    </el-table-column>
+                </template>
+                <!-- <el-table-column label="操作" fixed="right" width="100">
+                    <template #default="scope">
+                        <el-button type="primary" link icon="tickets" @click.stop="table_detail(scope.row)">查看</el-button>
+                    </template>
+                </el-table-column> -->
             </el-table>
         </div>
         <div class="tjm_card_pagination">
             <yh-pagination v-model:pageNo="params.page" v-model:pageSize="params.size" :total="total" @paginationChange="reloadTable"></yh-pagination>
         </div>
     </el-card>
+
+    <policy-explain v-if="dialog" ref="policyExplain" @closed="dialog = false"></policy-explain>
 </template>
 
 <script>
+import moment from "moment";
 import API from "@/api/policy/progress";
+import { getMainList } from "@/api/system/depart";
+import { share_columns as columns } from "@/views/progress/main";
+import { exportExcel } from "@/utils/exportExcel";
+
 import yhPagination from "@/components/Pagination/index.vue";
+import policyExplain from "@/views/policyStrive/explain.vue";
 
 export default {
     components: {
-        yhPagination
+        yhPagination,
+        policyExplain
+    },
+
+    props: {
+        ytbDate: { type: Number, default: 0 }
     },
 
     data() {
         return {
+            columns,
+
+            deptQuery: {
+                modelValue: null,
+                data: [],
+                props: { 
+                    label: "name",
+                    value: "id"
+                },
+                paramsFormat: {
+                    0: "deptId",
+                    1: "companyId"
+                }
+            },
+
             loading: false,
+            createMonth: moment().format("YYYY-MM"),
+            createTime: [moment().startOf("month").format("YYYY-MM-DD"), moment().endOf("month").format("YYYY-MM-DD")],
             params: {
                 page: 1,
                 size: 10
             },
 
             total: 0,
-            tableData: []
+            tableData: [],
+            
+            dialog: false
         }
     },
 
     mounted() {
+        this.getDeptTree();
         this.reloadTable();
     },
 
     methods: {
+        disabledDate(date) {
+            return moment(date).valueOf() > moment(this.createMonth).endOf("month").valueOf() || moment(date).valueOf() < moment(this.createMonth).startOf("month").valueOf()
+        },
+
+        tagType(value) {
+            return value == "否" && "danger" || "primary";
+        },
+
+        columnFormat(row, props) {
+            if (props == "isReport") return row.isLand == 1 && row.sjFinishTime && "是" || "否";
+            if (props == "isDelay") {
+                if (!row.ytbDate) return "否";
+                if (row.isLand == 1 && row.sjFinishTime) return moment(row.ytbDate).diff(row.sjFinishTime) < 0 && "是" || "否";
+                else return moment().diff(row.ytbDate) > 0 && "是" || "否";
+            }
+
+            return row[props];
+        },
+
+        getDeptTree() {
+            getMainList().then(res => this.deptQuery.data = res.data);
+        },
+
         reloadTable() {
+            this.params.beginCreateTime = this.createTime[0] + " 00:00:00";
+            this.params.endCreateTime = this.createTime[1] + " 23:59:59";
+
             this.loading = true;
             API.progress.share(this.params).then(res => {
                 this.loading = false;
-                this.tableData = res.data.records;
+                this.tableData = res.data.records.map(item => {
+                    item.ytbDate = this.ytbDate && (this.createMonth + "-" + this.ytbDate) || "";
+                    return item;
+                });
                 this.total = res.data.total;
             }).catch(() => this.loading = false);
         },
 
+        nodeClick({ deptType, id }) {
+            for (const key in this.deptQuery.paramsFormat) {
+                this.params[this.deptQuery.paramsFormat[key]] = null;
+            }
+
+            this.params[this.deptQuery.paramsFormat[deptType]] = id;
+        },
+
+        monthChange(e) {
+            this.createTime = [moment(e).startOf("month").format("YYYY-MM-DD"), moment(e).endOf("month").format("YYYY-MM-DD")];
+        },
+
+        table_export() {
+            const header = columns.map(c => c.label);
+            const data = this.tableData.map(v => columns.map(c => c.props).map(j => this.columnFormat(v, j)));
+
+            exportExcel(header, data, [], `${this.$route.name}.xlsx`);
+        },
+
         table_detail(row) {
-            // this.$emit("table_detail", );
+            this.dialog = true;
+            nextTick(() => this.$refs.policyExplain.open("detail").setData(row.id));
         }
     }
 }
@@ -58,12 +197,24 @@ export default {
 .tjm_card_style_custom {
   border: none;
   box-shadow: 0 0;
+  margin-top: 0;
 
   :deep(.el-card__body) {
     padding-top: 10px;
 
-    .tjm_card_table {
-      margin-top: 0;
+    .query-date-col {
+      .el-date-editor.el-date-editor--month {
+        max-width: 110px;
+      }
+
+      .el-date-editor.el-date-editor--month + .el-date-editor {
+        flex: 1;
+        margin-left: 10px;
+      }
+    }
+
+    .tjm_card_tools {
+      justify-content: flex-end;
     }
   }
 }

src/views/progress/component/strive.vue

@@ -5,18 +5,23 @@
             <el-scrollbar>
                 <el-form class="tjm_card_select_left" :model="params" label-width="80px" label-position="left">
                     <el-row :gutter="15">
-                        <el-col :lg="10" :md="12" :xs="24">
+                        <el-col :lg="8" :md="12" :xs="24">
                             <el-form-item label="所属部门">
                                 <el-tree-select v-model="deptQuery.modelValue" :data="deptQuery.data" :props="deptQuery.props" check-strictly filterable clearable placeholder="请选择所属部门" @node-click="nodeClick"></el-tree-select>
                             </el-form-item>
                         </el-col>
-                        <el-col :lg="10" :md="12" :xs="24">
+                        <!-- <el-col :lg="8" :md="12" :xs="24">
+                            <el-form-item label="填报人">
+                                <el-input v-model="params.createName" clearable placeholder="请输入填报人"></el-input>
+                            </el-form-item>
+                        </el-col> -->
+                        <el-col :lg="8" :md="12" :xs="24">
                             <el-form-item label="项目名称">
                                 <el-input v-model="params.name" clearable placeholder="请输入项目名称"></el-input>
                             </el-form-item>
                         </el-col>
-                        <el-col :lg="14" :md="20" :xs="24">
-                            <el-form-item class="query-date-item" label="填报日期">
+                        <el-col :lg="12" :md="16" :xs="24" class="query-date-col">
+                            <el-form-item label="填报日期">
                                 <el-date-picker v-model="createMonth" type="month" :clearable="false" value-format="YYYY-MM" placeholder="请选择填报月份" @change="monthChange"></el-date-picker>
                                 <el-date-picker v-model="createTime" type="daterange" :disabled-date="disabledDate" :clearable="false" value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                             </el-form-item>
@@ -81,10 +86,6 @@ export default {
         policyExplain
     },
 
-    props: {
-        ytbDate: { type: Number, default: 0 }
-    },
-
     data() {
         return {
             columns,
@@ -132,6 +133,7 @@ export default {
         },
 
         columnFormat(row, props) {
+            if (props == "ytbDate") return row[props] && (this.createMonth + "-" + row[props]) || "";
             if (props == "isReport") return row.isLand == 1 && row.sjFinishTime && "是" || "否";
             if (props == "isDelay") {
                 if (!row.ytbDate) return "否";
@@ -153,10 +155,7 @@ export default {
             this.loading = true;
             API.progress.strive(this.params).then(res => {
                 this.loading = false;
-                this.tableData = res.data.records.map(item => {
-                    item.ytbDate = this.ytbDate && (this.createMonth + "-" + this.ytbDate) || "";
-                    return item;
-                });
+                this.tableData = res.data.records;
                 this.total = res.data.total;
             }).catch(() => this.loading = false);
         },
@@ -197,9 +196,9 @@ export default {
   :deep(.el-card__body) {
     padding-top: 10px;
 
-    .query-date-item .el-form-item__content {
+    .query-date-col {
       .el-date-editor.el-date-editor--month {
-        flex-basis: 30%;
+        max-width: 110px;
       }
 
       .el-date-editor.el-date-editor--month + .el-date-editor {

src/views/progress/index.vue

@@ -4,7 +4,7 @@
             <el-tab-pane v-for="(label, key) in progressTab" :key="key" :label="label" :name="key"></el-tab-pane>
         </el-tabs>
 
-        <component :is="allComps[element]" :ytbDate="ytbDate"></component>
+        <component :is="allComps[element]"></component>
     </div>
 </template>
 
@@ -19,22 +19,11 @@ export default {
             allComps,
             progressTab,
 
-            // element: "policy_share",
-            element: "policy_strive",
-
-            ytbDate: null
+            element: "policy_share",
         }
     },
 
-    mounted() {
-        this.getCondition();
-    },
-
-    methods: {
-        getCondition() {
-            API.condition.get().then(res => this.ytbDate = res.data || null).catch(() => this.ytbDate = null);
-        }
-    }
+    methods: {}
 }
 </script>
 

src/views/progress/main.js

@@ -3,6 +3,15 @@ export const progressTab = {
     policy_strive: "政策争取"
 }
 
+export const share_columns = [
+    { label: "填报单位", props: "companyName" },
+    { label: "填报部门", props: "deptName" },
+    { label: "填报人", props: "createName" },
+    { label: "应填报日期", props: "ytbDate", width: "120" },
+    { label: "是否上报", props: "isReport", width: "100" },
+    { label: "是否迟报", props: "isDelay", width: "100" }
+]
+
 export const strive_columns = [
     { label: "填报单位", props: "companyName" },
     { label: "填报部门", props: "deptName" },