进度-3

src/api/folder.js

@@ -45,7 +45,12 @@ export default {
         return axios({
             url,
             method: "get",
-            responseType: "blob"
+            responseType: "blob",
+            // transformResponse: [, transformResponse: txt解码
+            //     async function (data) {
+            //         return await transformData(data);
+            //     }
+            // ]
         })
     },
 
@@ -58,4 +63,12 @@ export default {
             }
         })
     }
+}
+
+function transformData(data) {
+    return new Promise(resolve=>{
+        let reader = new FileReader();
+        reader.readAsText(data, "GBK");
+        reader.onload = () => resolve(reader.result);
+    });
 }

src/components/Pagination/index.vue

@@ -1,11 +1,12 @@
 <template>
-	<el-pagination :layout="layout" :total="total" :page-size="pageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
+	<el-pagination :background="background" :layout="layout" :total="total" :page-size="pageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
 </template>
 
 <script setup>
 const $emit = defineEmits(["update:pageNo", "update:pageSize", "paginationChange"]);
 const props = defineProps({
-    total: { type: Number, default: 20 },
+    background: { type: Boolean, default: false },
+    total: { type: Number, default: 0 },
     layout: { type: String, default: "total, sizes, prev, pager, next" },
 	pageNo: { type: Number, default: 1 },
 	pageSize: { type: Number, default: 10 },

src/components/Upload/fileViewer.vue

@@ -25,6 +25,7 @@
 
 <script>
 import { defineAsyncComponent } from "vue";
+import Folder from "@/api/folder";
 import vue_office_docx from "@vue-office/docx";
 import vue_office_excel from "@vue-office/excel";
 import vue_office_pdf from "@vue-office/pdf";
@@ -32,7 +33,7 @@ import vue_office_pdf from "@vue-office/pdf";
 import "@vue-office/docx/lib/index.css";
 import "@vue-office/excel/lib/index.css";
 
-import { fileTypes } from "./main";
+import { fileTypes, officeOptions } from "./main";
 
 export default {
     emits: ["closed"],
@@ -50,15 +51,7 @@ export default {
             fileName: null,
             fileType: null,
             filePath: null,
-            options: {
-                xls: false,       // 预览xlsx文件设为false；预览xls文件设为true
-                minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
-                minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
-                widthOffset: 10,  // 如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
-                heightOffset: 10, // 在默认渲染的列表高度上再加 Npx高
-                beforeTransformData: workbookData => workbookData, // 底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
-                transformData: workbookData => workbookData // 将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
-            },
+            options: {},
 
             showViewer: false
         }
@@ -68,16 +61,24 @@ export default {
         init(uploadFile) {
             this.fileName = uploadFile.name;
             this.filePath = uploadFile.path;
-            this.fileType = fileTypes[uploadFile["fileType"]];
-
+            this.fileType = fileTypes[uploadFile["fileType"]] || uploadFile["fileType"];
             if (!fileTypes[uploadFile["fileType"]]) {
                 ElMessage.warning("当前只支持预览.docx、.pdf、excel文件，文件已下载");
                 this.downloadFile();
             } else {
                 if (this.fileType == "image") this.showViewer = true;
+                else if (this.fileType == "txt") {
+                this.downloadFile();
+        //             Folder.download(this.filePath, this.fileType).then(res => {
+        //                 res.data.then(txt=>{
+        //                     console.log(txt)
+        // })
+            // });
+                }
                 else {
                     this.loading = true;
                     this.visible = true;
+                    this.options = officeOptions[this.fileType.split(".")[0]] || {};
                     if (this.fileType.includes(".")) this.options.xls = this.fileType.split(".")[1] == "xls";
                 }
             }
@@ -87,7 +88,7 @@ export default {
             Folder.download(this.filePath).then(res => {
                 const a = document.createElement("a");
                 const blob = new Blob([res.data], { type: this.fileType });
-                a.download = this.fileName;
+                // a.download = this.fileName;
                 a.href = URL.createObjectURL(blob);
                 a.click();
             });
@@ -97,7 +98,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.yh-file-viewer :deep(.el-dialog) {
+.yh-file-viewer {
+--el-overlay-color-lighter: gray;
+:deep(.el-dialog) {
   --el-dialog-bg-color: transparent;
   padding: 0;
 
@@ -136,9 +139,9 @@ export default {
     }
 
     .yh-file-viewer__content {
-      height: calc(100% - 64px);
+      height: calc(100% - 64px - 2 * var(--el-dialog-padding-primary));
       padding: var(--el-dialog-padding-primary);
     }
   }
-}
+}}
 </style>

src/components/Upload/main.js

@@ -5,5 +5,38 @@ export const fileTypes = {
     "application/vnd.ms-excel": "excel.xls",
     "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "excel.xlsx",
     "application/pdf": "pdf",
-    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx"
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "docx",
+    "text/plain": "txt"
+}
+
+export const officeOptions = {
+    excel: {
+        xls: false,       // 预览xlsx文件设为false；预览xls文件设为true
+        minColLength: 0,  // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
+        minRowLength: 0,  // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
+        widthOffset: 10,  // 如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
+        heightOffset: 10, // 在默认渲染的列表高度上再加 Npx高
+        beforeTransformData: workbookData => workbookData, // 底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
+        transformData: workbookData => workbookData // 将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
+    },
+    pdf: {
+        // width: 500, //number，可不传，用来控制pdf预览的宽度，默认根据文档实际宽度计算
+        // httpHeaders: {}, //object, Basic authentication headers
+        // password: '' //string, 加密pdf的密码
+    },
+    docx: {
+        className: "docx", //class name/prefix for default and document style classes
+        inWrapper: true, //enables rendering of wrapper around document content
+        ignoreWidth: false, //disables rendering width of page
+        ignoreHeight: false, //disables rendering height of page
+        ignoreFonts: false, //disables fonts rendering
+        breakPages: true, //enables page breaking on page breaks
+        ignoreLastRenderedPageBreak: false, //disables page breaking on lastRenderedPageBreak elements
+        experimental: false, //enables experimental features (tab stops calculation)
+        trimXmlDeclaration: true, //if true, xml declaration will be removed from xml documents before parsing
+        useBase64URL: false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
+        useMathMLPolyfill: false, //includes MathML polyfills for chrome, edge, etc.
+        showChanges: false, //enables experimental rendering of document changes (inserions/deletions)
+        debug: false //enables additional logging
+    }
 }

src/views/progress/component/share.vue

@@ -5,22 +5,12 @@
             <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-col :lg="8" :xs="24">
+                            <el-form-item label="部门名称">
+                                <el-input v-model="params.name" 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.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-col :lg="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>
@@ -37,29 +27,18 @@
         </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 v-loading="loading" row-key="id" header-cell-class-name="tjm_card_table_header" height="400" :data="tableData" border>
                 <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>
+                            <el-button v-else-if="item.props == 'count'" type="primary" link @click.stop="table_detail(scope.row)">{{ columnFormat(scope.row, item.props) }}</el-button>
                             <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">
@@ -67,52 +46,33 @@
         </div>
     </el-card>
 
-    <policy-explain v-if="dialog" ref="policyExplain" @closed="dialog = false"></policy-explain>
+    <policy-detail v-if="dialog" ref="policyDetail" @closed="dialog = false"></policy-detail>
 </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 { dept_columns as columns, deptTypeDic } from "@/views/progress/main";
 
 import yhPagination from "@/components/Pagination/index.vue";
-import policyExplain from "@/views/policyStrive/explain.vue";
+import policyDetail from "@/views/progress/dialog.vue";
 
 export default {
     components: {
         yhPagination,
-        policyExplain
-    },
-
-    props: {
-        ytbDate: { type: Number, default: 0 }
+        policyDetail
     },
 
     data() {
         return {
-            columns,
-
-            deptQuery: {
-                modelValue: null,
-                data: [],
-                props: { 
-                    label: "name",
-                    value: "id"
-                },
-                paramsFormat: {
-                    0: "deptId",
-                    1: "companyId"
-                }
-            },
-
+            columns, deptTypeDic,
             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
+                size: 10,
+                state: 0
             },
 
             total: 0,
@@ -123,7 +83,6 @@ export default {
     },
 
     mounted() {
-        this.getDeptTree();
         this.reloadTable();
     },
 
@@ -132,25 +91,12 @@ export default {
             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 && "是" || "否";
-            }
-
+            if (props == "ytbDate") return row[props] && (this.createMonth + "-" + row[props]) || "";
+            if (props == "deptType") return deptTypeDic[row[props]] || "";
             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";
@@ -158,36 +104,18 @@ export default {
             this.loading = true;
             API.progress.share(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);
         },
 
-        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.dialog = true;
-            nextTick(() => this.$refs.policyExplain.open("detail").setData(row.id));
+            nextTick(() => this.$refs.policyDetail.open().setData(row));
         }
     }
 }
@@ -212,9 +140,13 @@ export default {
         margin-left: 10px;
       }
     }
+  }
+}
 
-    .tjm_card_tools {
-      justify-content: flex-end;
+@media (min-width: 1200px) {
+  .tjm_card_style_custom :deep(.query-date-col) {
+    .el-date-editor.el-date-editor--month + .el-date-editor {
+      max-width: 240px;
     }
   }
 }

src/views/progress/dialog.vue

@@ -0,0 +1,130 @@
+<template>
+    <el-dialog v-model="visible" title="政策关联" width="80%" @closed="$emit('closed')">
+        <el-card class="tjm_card_style_custom">
+            <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-input v-model="params.createName" 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>
+    </el-dialog>
+
+    <!-- <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 { share_columns as columns } from "@/views/progress/main";
+
+export default {
+    emits: ["closed"],
+    
+    data() {
+        return {
+            columns,
+
+            visible: false,
+            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: [],
+            
+            dialog: false
+        }
+    },
+
+    methods: {
+        open() {
+            this.visible = true;
+            return this;
+        },
+
+        setData(row) {
+            console.log(row)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.tjm_card_style_custom {
+  border: none;
+  box-shadow: 0 0;
+  margin-top: 0;
+
+  :deep(.el-card__body) {
+    padding-top: 10px;
+
+    .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;
+    }
+  }
+}
+</style>

src/views/progress/main.js

@@ -3,6 +3,15 @@ export const progressTab = {
     policy_strive: "政策争取"
 }
 
+export const deptTypeDic = ["部门", "单位"];
+export const dept_columns = [
+    { label: "部门名称", props: "name" },
+    { label: "部门代码", props: "code", width: "120" },
+    { label: "类型", props: "deptType", width: "100" },
+    { label: "应填报日期", props: "ytbDate", width: "120" },
+    { label: "政策数量", props: "count", width: "100" }
+]
+
 export const share_columns = [
     { label: "填报单位", props: "companyName" },
     { label: "填报部门", props: "deptName" },

src/views/system/dept.vue

@@ -80,14 +80,18 @@
                     row-key="id"
                 >
                     <!-- <el-table-column type="selection" width="55" /> -->
-                    <el-table-column prop="name" label="部门名称" />
+                    <el-table-column prop="name" label="部门名称" min-width="180" />
+                    <el-table-column prop="code" label="部门代码" />
                     <el-table-column label="类型">
+                        <template #default="scope">{{ ["部门", "单位"][scope.row.deptType] }}</template>
+                    </el-table-column>
+                    <el-table-column prop="sort" label="排序" />
+                    <el-table-column label="部门状态">
                         <template #default="scope">
-                            {{ scope.row.deptType == 1 && "单位" || "部门" }}
+                            <el-switch v-model="scope.row.state" :active-value="0" :inactive-value="1" disabled></el-switch>
                         </template>
                     </el-table-column>
-                    <el-table-column prop="sort" label="排序" />
-                    <el-table-column prop="ope" label="操作">
+                    <el-table-column label="操作" width="220">
                         <template #default="scope">
                             <el-button link type="primary" icon="Edit" @click="editItem(scope.row)">修改</el-button>
                             <el-button link type="primary" icon="Plus" @click="addItem(scope.row)">新增</el-button>
@@ -301,4 +305,14 @@ function deleteDepartClick(row) {
     })
 }
 getList()
-</script>
+</script>
+
+<style lang="scss" scoped>
+.el-switch.is-disabled {
+  opacity: 1;
+
+  :deep(.el-switch__core) {
+    cursor: unset;
+  }
+}
+</style>

src/views/system/menu.vue

@@ -43,7 +43,7 @@
                 row-key="id"
                 :expand-row-keys="expandKeys"
             >
-                <el-table-column type="selection" width="55" />
+                <!-- <el-table-column type="selection" width="55" /> -->
                 <el-table-column prop="name" label="菜单名称" width="180" />
                 <el-table-column prop="path" label="菜单路由" />
                 <el-table-column prop="type" label="类型" width="120">

src/views/system/role.vue

@@ -97,8 +97,8 @@
                     style="width: 100%"
                     row-key="id"
                 >
-                    <el-table-column type="selection" width="55" />
-                    <el-table-column type="index" width="50" />
+                    <!-- <el-table-column type="selection" width="55" /> -->
+                    <el-table-column type="index" label="序号" width="55"></el-table-column>
                     <el-table-column prop="name" label="角色名称" width="180" />
                     <el-table-column prop="code" label="角色代码" width="180" />
                     <el-table-column prop="description" label="角色描述" />
@@ -121,7 +121,7 @@
                 </el-table>
             </div>
             <div class="tjm_cart_pagination">
-                <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange" />
+                <yh-pagination v-model:pageNo="params.page" layout="prev, pager, next" :total="total" @paginationChange="getList"></yh-pagination>
             </div>
         </el-card>
 
@@ -222,6 +222,7 @@ import {
     setRolePortTree
 } from "@/api/system/role"
 import API from "@/api/system/log";
+import yhPagination from "@/components/Pagination/index.vue";
 
 const activeName = ref("first")
 const defaultProps = ref({
@@ -276,11 +277,6 @@ function getList() {
     })
 }
 
-function currentChange(e) {
-    params.value.page = e
-    getList()
-}
-
 function addClick() {
     dialogTitle.value = "新增"
     addShow.value = true

src/views/system/setting/index.vue

@@ -69,11 +69,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.handler-btn-item {
-  margin-top: 36px;
+.tjm_card_style_custom .el-form {
+  width: 80%;
+  margin: 20px auto 0;
 
-  :deep(.el-form-item__content) {
-    justify-content: flex-end;
+  .handler-btn-item {
+    margin-top: var(--el-card-padding);
+
+    :deep(.el-form-item__content) {
+      justify-content: flex-end;
+    }
   }
 }
 </style>

src/views/system/user.vue

@@ -3,6 +3,7 @@ import { getMainList } from "@/api/system/depart.js"
 import { getRoleList } from "@/api/system/role"
 import API from "@/api/system/log";
 import { exportExcel } from "@/utils/exportExcel";
+import yhPagination from "@/components/Pagination/index.vue";
 import {
     getUserList,
     addUser,
@@ -55,15 +56,7 @@ function resetParamsBtn() {
     }
     getUserListData()
 }
-function sizeChange(e) {
-    params.value.size = e
-    getUserListData()
-}
 
-function currentChange(e) {
-    params.value.page = e
-    getUserListData()
-}
 //部门点击
 function treeNodeClick(value) {
     params.value.deptId = value.id
@@ -318,55 +311,27 @@ function table_export() {
             <el-table style="flex: 1;" row-key="id" header-cell-class-name="tjm_card_table_header" :data="tableData" border @selection-change="selectionChange">
                 <el-table-column type="selection" width="55" />
                 <el-table-column type="index" label="序号" width="55" />
-                <el-table-column prop="userName" label="用户名" />
-                <el-table-column prop="deptName" label="所属部门" width="240" />
-                <el-table-column prop="name" label="姓名" />
-                <el-table-column prop="mobile" label="手机号" />
-                <el-table-column prop="email" label="电子邮箱" width="240" />
-                <el-table-column prop="state" label="用户状态">
+                <el-table-column prop="userName" label="用户名" min-width="180" />
+                <el-table-column prop="deptName" label="所属部门" min-width="180" show-overflow-tooltip />
+                <el-table-column prop="name" label="姓名" min-width="180" />
+                <el-table-column prop="mobile" label="手机号" min-width="120" />
+                <el-table-column prop="email" label="电子邮箱" min-width="180" show-overflow-tooltip />
+                <el-table-column prop="state" label="用户状态" min-width="100">
                     <template #default="scope">
-                        {{ ["启用", "禁用"][scope.row.state] }}
+                        <el-switch v-model="scope.row.state" :active-value="0" :inactive-value="1" disabled></el-switch>
                     </template>
                 </el-table-column>
-                <el-table-column label="操作" width="120">
+                <el-table-column fixed="right" label="操作" width="240">
                     <template #default="scope">
-                        <el-tooltip content="修改" placement="top">
-                            <el-button
-                                link
-                                type="primary"
-                                icon="Edit"
-                                @click="modUserBtn(scope.row)"
-                            ></el-button>
-                        </el-tooltip>
-                        <el-tooltip content="删除" placement="top">
-                            <el-button
-                                link
-                                type="primary"
-                                icon="Delete"
-                                @click="delUserBtn(scope.row)"
-                            ></el-button>
-                        </el-tooltip>
-                        <el-tooltip content="重置密码" placement="top">
-                            <el-button
-                                link
-                                type="primary"
-                                icon="Key"
-                                @click="resetUserPwdBtn(scope.row)"
-                            ></el-button>
-                        </el-tooltip>
+                        <el-button link type="primary" icon="Edit" @click="modUserBtn(scope.row)">修改</el-button>
+                        <el-button link type="primary" icon="Delete" @click="delUserBtn(scope.row)">删除</el-button>
+                        <el-button link type="primary" icon="Key" @click="resetUserPwdBtn(scope.row)">重置密码</el-button>
                     </template>
                 </el-table-column>
             </el-table>
         </div>
         <div class="tjm_card_pagination">
-            <el-pagination
-                background
-                layout="total,sizes,prev, pager, next,"
-                :total="total"
-                :page-sizes="[20, 30, 100]"
-                @size-change="sizeChange"
-                @current-change="currentChange"
-            />
+            <yh-pagination v-model:pageNo="params.page" v-model:pageSize="params.size" :pageSizes="[20, 30, 100]" :total="total" @paginationChange="getUserListData"></yh-pagination>
         </div>
     </el-card>
 
@@ -443,4 +408,14 @@ function table_export() {
             </div>
         </template>
     </el-dialog>
-</template>
+</template>
+
+<style lang="scss" scoped>
+.el-switch.is-disabled {
+  opacity: 1;
+
+  :deep(.el-switch__core) {
+    cursor: unset;
+  }
+}
+</style>