工单管理-完成

src/icons/svg/生产汇总.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1600764537714" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13015" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+  <!-- 文档底板 -->
+  <path d="M832 144v736c0 17.7-14.3 32-32 32H224c-17.7 0-32-14.3-32-32V144c0-17.7 14.3-32 32-32h576c17.7 0 32 14.3 32 32z" fill="#ffffff"/>
+  
+  <!-- 齿轮图标 -->
+  <path d="M512 280c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z m116.6 100.8l-29.2 29.2c-4.7 4.7-4.7 12.3 0 17l83.5 83.5c4.7 4.7 12.3 4.7 17 0l29.2-29.2c4.7-4.7 4.7-12.3 0-17l-83.5-83.5c-4.7-4.7-12.3-4.7-17 0z" fill="#ffffff"/>
+  
+  <!-- 数据条形图 -->
+  <path d="M320 448h64v320h-64z" fill="#ffffff"/>
+  <path d="M480 368h64v400h-64z" fill="#ffffff"/>
+  <path d="M640 528h64v240h-64z" fill="#ffffff"/>
+  
+  <!-- 顶部曲线 -->
+  <path d="M320 240c48-48 112-80 192-80s144 32 192 80" fill="none" stroke="#ffffff" stroke-width="32" stroke-linecap="round"/>
+  
+  <!-- 底部数据线 -->
+  <path d="M320 800h384" fill="none" stroke="#ffffff" stroke-width="32" stroke-linecap="round"/>
+</svg> 

src/views/basicData/departmentManagement/index copy.vue

@@ -0,0 +1,466 @@
+<template>
+  <div class="app-container">
+    <div class="app-container">
+      <div class="filter-container">
+        <el-button class="success" icon="el-icon-plus" @click="form_add"
+          >新增</el-button
+        >
+      </div>
+      <el-table
+        v-loading="listLoading"
+        element-loading-text="给我一点时间"
+        :data="list"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+        :row-style="rowStyle"
+        :cell-style="cellStyle"
+        class="elTable"
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      >
+        <el-table-column label="部门名称" header-align="center" width="250px">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.menutype | menutypeFilter" size="small">
+              <span>{{ scope.row.dname }}</span>
+            </el-tag>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="备注" header-align="center" align="center">
+          <template slot-scope="scope">
+            <span>{{ scope.row.remark }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="顺序"
+          width="100px"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <span>{{ scope.row.sort }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="启用"
+          width="100px"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-switch
+              v-model="scope.row.enable"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              :active-value="1"
+              :inactive-value="0"
+              @change="change_enable(scope.$index, scope.row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          header-align="center"
+          align="center"
+          width="230"
+          class-name="small-padding fixed-width"
+          fixed="right"
+        >
+          <template slot-scope="{ row }">
+            <el-button type="primary" size="mini" @click="form_edit(row)">
+              编辑
+            </el-button>
+            <el-button
+              v-if="row.status != '已删'"
+              size="mini"
+              type="danger"
+              @click="handleDelete(row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-dialog
+        :title="textMap[dialogStatus]"
+        :visible.sync="dialogFormVisible"
+        :close-on-click-modal="false"
+        width="40%"
+      >
+        <el-form
+          ref="dataForm"
+          :rules="rules"
+          :model="deptform"
+          label-position="left"
+          label-width="100px"
+          style="width: 400px; margin-left: 50px"
+        >
+          <el-form-item label="上级部门" prop="parentid">
+            <tree-select
+              :disabled="disabled"
+              :height="280"
+              :width="200"
+              size="small"
+              :data="parent"
+              :default-props="defaultProps"
+              clearable
+              :node-key="nodeKey"
+              :checked-keys="defaultCheckedKeys"
+              @popoverHide="popoverHide"
+            />
+          </el-form-item>
+          <el-form-item label="部门名称" prop="dname">
+            <el-input ref="dname" v-model="deptform.dname" />
+          </el-form-item>
+
+          <el-form-item label="备注" prop="remark">
+            <el-input ref="remark" v-model="deptform.remark" />
+          </el-form-item>
+
+          <el-form-item label="顺序" prop="sort">
+            <el-input ref="sort" v-model="deptform.sort" />
+          </el-form-item>
+          <el-form-item label="启用" prop="enable">
+            <el-switch
+              ref="enable"
+              v-model="deptform.enable"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              :active-value="1"
+              :inactive-value="0"
+            />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button
+            class="cancelClose"
+            @click="
+              dialogFormVisible = false;
+              get_table_data();
+            "
+            >关闭</el-button
+          >
+          <el-button
+            class="success"
+            @click="
+              dialogStatus === 'create' ? add_dialog_save() : form_edit_save()
+            "
+            >确认</el-button
+          >
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import TreeSelect from "@/components/TreeSelect";
+import waves from "@/directive/waves"; // waves directive
+import { isIntegerZero } from "@/utils/validate";
+import {
+  PostDataByName,
+  GetDataByName,
+  transData,
+  failproccess,
+} from "@/api/common";
+import { MessageBox } from "element-ui";
+export default {
+  name: "DepartmentManagement",
+  components: { TreeSelect },
+  directives: { waves },
+
+  filters: {
+    menutypeFilter(menutype) {
+      const menutypeMap = {
+        menu: "",
+        button: "warning",
+      };
+      return menutypeMap[menutype];
+    },
+  },
+  data() {
+    return {
+      disabled: false,
+      tableKey: 0,
+      list: [{ deptname: "公司", id: 1, parentid: -1, remark: "" }],
+      parent: [],
+      parentmenu: [],
+      parentButton: [],
+
+      listLoading: true,
+      requestParam: {
+        name: "createdept",
+        parammaps: {},
+      },
+      deptform: {
+        id: "",
+        dname: "",
+        remark: "",
+        sort: "",
+        parentid: "",
+        enable: "1",
+      },
+      get_table_dataParm: { name: "getDepartments" },
+      getRecuListParm: { name: "getDepartmentCascade" },
+      getRecuListBParm: {
+        name: "getMenuListBRecu",
+        idname: "id",
+        parammaps: { id: 0 },
+      },
+      rules: {
+        dname: [
+          {
+            type: "string",
+            required: true,
+            message: "部门名称必填",
+            trigger: "change",
+          },
+        ],
+
+        sort: [{ validator: isIntegerZero, trigger: "blur" }],
+      },
+      dialogFormVisible: false,
+      dialogStatus: "",
+      textMap: {
+        update: "编辑",
+        create: "新增",
+      },
+      rowStyle: { maxHeight: 50 + "px", height: 45 + "px" },
+      cellStyle: { padding: 0 + "px" },
+      defaultProps: {
+        children: "children",
+        label: "title",
+      },
+      nodeKey: "id",
+      defaultCheckedKeys: [],
+    };
+  },
+  created() {
+    this.get_table_data();
+    this.get_select_list();
+  },
+  methods: {
+    popoverHide(checkedIds, checkedData) {
+      this.deptform.parentid = checkedIds;
+    },
+
+    get_table_data() {
+      this.listLoading = true;
+      GetDataByName(this.get_table_dataParm).then((response) => {
+        if (response.data.list !== null) {
+          console.log(this.list, "-----------------");
+          for (var i = 0; i < response.data.list.length; i++) {
+            response.data.list[i].enable = parseInt(
+              response.data.list[i].enable
+            );
+          }
+          this.list = transData(
+            response.data.list,
+            "id",
+            "parentid",
+            "children"
+          );
+        }
+
+        // Just to simulate the time of the request
+        setTimeout(() => {
+          this.listLoading = false;
+        }, 0.5 * 1000);
+      });
+    },
+    get_select_list() {
+      GetDataByName(this.getRecuListParm).then((response) => {
+        if (response.data.list !== null) {
+          this.parentmenu = transData(
+            response.data.list,
+            "id",
+            "parentid",
+            "children"
+          );
+        }
+      });
+    },
+    refreshDownList() {
+      for (var val of this.parentmenu) {
+        this.parent = [];
+        this.parent.push({
+          id: val.id,
+          title: val.title,
+          parentid: val.parentid,
+        });
+      }
+    },
+    resetRequestParam() {
+      this.deptform.id = "";
+      this.deptform.parentid = "0";
+      this.deptform.dname = "";
+      this.deptform.remark = "";
+      this.deptform.sort = "0";
+      this.deptform.enable = 1;
+    },
+    form_add() {
+      this.resetRequestParam();
+      this.dialogStatus = "create";
+      this.parent = this.parentmenu;
+      this.dialogFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].clearValidate();
+      });
+    },
+    add_dialog_save() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          this.requestParam.name = "insertDepartments";
+
+          if (this.deptform.parentid === "") this.deptform.parentid = "0";
+
+          this.requestParam.parammaps = {
+            id: "",
+            dname: this.deptform.dname,
+            remark: this.deptform.remark,
+            sort: this.deptform.sort,
+            parentId: this.deptform.parentid,
+            enable: this.deptform.enable,
+          };
+
+          PostDataByName(this.requestParam).then((response) => {
+            console.log("新增保存发送参数", this.requestParam);
+            if (response.msg !== "fail") {
+              this.$notify({
+                title: "成功",
+                message: "保存成功",
+                type: "success",
+                duration: 2000,
+              });
+              this.dialogFormVisible = false;
+              this.get_table_data();
+              this.get_select_list();
+            } else {
+              this.$notify({
+                title: "失败",
+                message: "保存失败",
+                type: "error",
+                duration: 2000,
+              });
+            }
+          });
+        }
+      });
+    },
+
+    form_edit(row) {
+      this.parent = this.parentmenu;
+      console.log("row=====>", row);
+      this.defaultCheckedKeys = [row.parentid];
+      console.log(this.defaultCheckedKeys);
+      this.deptform.parentid = row.parentid;
+      this.deptform.dname = row.dname;
+      this.deptform.remark = row.remark;
+      this.deptform.sort = row.sort;
+      this.deptform.id = row.id;
+      this.deptform.enable = row.enable;
+      this.dialogStatus = "update";
+
+      this.dialogFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs["dataForm"].clearValidate();
+      });
+    },
+    form_edit_save() {
+      this.$refs["dataForm"].validate((valid) => {
+        if (valid) {
+          this.requestParam.name = "updateDepartments";
+
+          this.requestParam.parammaps = {
+            id: this.deptform.id,
+            dname: this.deptform.dname,
+            remark: this.deptform.remark,
+            sort: this.deptform.sort,
+            parentId: this.deptform.parentid,
+            enable: this.deptform.enable,
+          };
+
+          console.log(this.requestParam);
+          PostDataByName(this.requestParam).then((response) => {
+            console.log("编辑保存发送参数", this.requestParam);
+            if (response.msg !== "fail") {
+              this.get_table_data();
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "成功",
+                message: "保存成功",
+                type: "success",
+                duration: 2000,
+              });
+            } else {
+              this.$notify({
+                title: "失败",
+                message: "保存失败",
+                type: "error",
+                duration: 2000,
+              });
+            }
+          });
+        }
+      });
+    },
+    change_enable(index, row) {
+      this.requestParam.name = "updateDepartments";
+      this.requestParam.parammaps = {
+        id: row.id,
+        dname: row.dname,
+        remark: row.remark,
+        sort: row.sort,
+        parentId: row.parentid,
+        enable: row.enable,
+      };
+
+      PostDataByName(this.requestParam).then((response) => {
+        console.log("编辑保存发送参数", this.requestParam);
+        if (response.msg !== "fail") {
+          this.get_table_data();
+          this.dialogFormVisible = false;
+          this.$notify({
+            title: "成功",
+            message: "保存成功",
+            type: "success",
+            duration: 2000,
+          });
+        } else {
+          this.$notify({
+            title: "失败",
+            message: "保存失败",
+            type: "error",
+            duration: 2000,
+          });
+        }
+      });
+    },
+    handleDelete(row) {
+      MessageBox.confirm("确认删除此信息？", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.requestParam.name = "delDepartments";
+        this.requestParam.parammaps = {
+          id: row.id,
+        };
+        PostDataByName(this.requestParam).then(() => {
+          this.get_table_data();
+          this.dialogFormVisible = false;
+          this.$notify({
+            title: "成功",
+            message: "删除成功",
+            type: "success",
+            duration: 2000,
+          });
+        });
+      });
+    },
+  },
+};
+</script>

src/views/basicData/departmentManagement/index.vue

@@ -2,10 +2,26 @@
   <div class="app-container">
     <div class="app-container">
       <div class="filter-container">
-        <el-button   class="success" icon="el-icon-plus" @click="form_add">新增</el-button>
+        <el-button class="success" icon="el-icon-plus" @click="form_add"
+          >新增</el-button
+        >
       </div>
-      <el-table v-loading="listLoading" element-loading-text="给我一点时间" :data="list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
-        <el-table-column label="部门名称" header-align="center" width="300px">
+      <el-table
+        v-loading="listLoading"
+        element-loading-text="给我一点时间"
+        :data="list"
+        border
+        fit
+        highlight-current-row
+        style="width: 100%"
+        :row-style="rowStyle"
+        :cell-style="cellStyle"
+        class="elTable"
+        row-key="id"
+        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        default-expand-all
+      >
+        <el-table-column label="部门名称" header-align="center" width="250px">
           <template slot-scope="scope">
             <el-tag :type="scope.row.menutype | menutypeFilter" size="small">
               <span>{{ scope.row.dname }}</span>
@@ -13,37 +29,90 @@
           </template>
         </el-table-column>
 
-        <el-table-column label="备注" width="500px" header-align="center" align="center">
+        <el-table-column label="备注" header-align="center" align="center">
           <template slot-scope="scope">
             <span>{{ scope.row.remark }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="顺序" width="100px" header-align="center" align="center">
+        <el-table-column
+          label="顺序"
+          width="100px"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
             <span>{{ scope.row.sort }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="启用" min-width="80px" header-align="center" align="center">
+        <el-table-column
+          label="启用"
+          width="100px"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
-            <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="change_enable(scope.$index, scope.row)" />
+            <el-switch
+              v-model="scope.row.enable"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              :active-value="1"
+              :inactive-value="0"
+              @change="change_enable(scope.$index, scope.row)"
+            />
           </template>
         </el-table-column>
-        <el-table-column label="操作" header-align="center" align="center" width="230" class-name="small-padding fixed-width" fixed="right">
-          <template slot-scope="{row}">
+        <el-table-column
+          label="操作"
+          header-align="center"
+          align="center"
+          width="230"
+          class-name="small-padding fixed-width"
+          fixed="right"
+        >
+          <template slot-scope="{ row }">
             <el-button type="primary" size="mini" @click="form_edit(row)">
               编辑
             </el-button>
-            <el-button v-if="row.status!='已删'" size="mini" type="danger" @click="handleDelete(row)">
+            <el-button
+              v-if="row.status != '已删'"
+              size="mini"
+              type="danger"
+              @click="handleDelete(row)"
+            >
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="40%">
-        <el-form ref="dataForm" :rules="rules" :model="deptform" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
+      <el-dialog
+        :title="textMap[dialogStatus]"
+        :visible.sync="dialogFormVisible"
+        :close-on-click-modal="false"
+        width="40%"
+      >
+        <el-form
+          ref="dataForm"
+          :rules="rules"
+          :model="deptform"
+          label-position="left"
+          label-width="100px"
+          style="width: 400px; margin-left: 50px"
+        >
           <el-form-item label="上级部门" prop="parentid">
-            <tree-select :disabled="disabled" :height="280" :width="200" size="small" :data="parent" :default-props="defaultProps" clearable :node-key="nodeKey" :checked-keys="defaultCheckedKeys" @popoverHide="popoverHide" />
+            <tree-select
+              :disabled="disabled"
+              :height="280"
+              :width="200"
+              size="small"
+              :data="parent"
+              :default-props="defaultProps"
+              clearable
+              :node-key="nodeKey"
+              :checked-keys="defaultCheckedKeys"
+              :expandAll="true"
+              @popoverHide="popoverHide"
+            />
           </el-form-item>
           <el-form-item label="部门名称" prop="dname">
             <el-input ref="dname" v-model="deptform.dname" />
@@ -57,15 +126,32 @@
             <el-input ref="sort" v-model="deptform.sort" />
           </el-form-item>
           <el-form-item label="启用" prop="enable">
-            <el-switch ref="enable" v-model="deptform.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" />
+            <el-switch
+              ref="enable"
+              v-model="deptform.enable"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              :active-value="1"
+              :inactive-value="0"
+            />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-
-          <el-button class="cancelClose" @click="dialogFormVisible = false;get_table_data()">关闭</el-button>
-          <el-button class="success" @click="dialogStatus==='create'?add_dialog_save():form_edit_save()">确认</el-button>
-
-
+          <el-button
+            class="cancelClose"
+            @click="
+              dialogFormVisible = false;
+              get_table_data();
+            "
+            >关闭</el-button
+          >
+          <el-button
+            class="success"
+            @click="
+              dialogStatus === 'create' ? add_dialog_save() : form_edit_save()
+            "
+            >确认</el-button
+          >
         </div>
       </el-dialog>
     </div>
@@ -73,195 +159,222 @@
 </template>
 
 <script>
-import TreeSelect from '@/components/TreeSelect'
-import waves from '@/directive/waves' // waves directive
-import { isIntegerZero } from '@/utils/validate'
-import { PostDataByName, GetDataByName, transData, failproccess, } from '@/api/common'
-import { MessageBox } from 'element-ui'
+import TreeSelect from "@/components/TreeSelect";
+import waves from "@/directive/waves"; // waves directive
+import { isIntegerZero } from "@/utils/validate";
+import {
+  PostDataByName,
+  GetDataByName,
+  transData,
+  failproccess,
+} from "@/api/common";
+import { MessageBox } from "element-ui";
 export default {
-  name: 'DepartmentManagement',
+  name: "DepartmentManagement",
   components: { TreeSelect },
   directives: { waves },
 
   filters: {
     menutypeFilter(menutype) {
       const menutypeMap = {
-        menu: '',
-        button: 'warning'
-      }
-      return menutypeMap[menutype]
-    }
+        menu: "",
+        button: "warning",
+      };
+      return menutypeMap[menutype];
+    },
   },
   data() {
     return {
       disabled: false,
       tableKey: 0,
-      list: [{ 'deptname': '公司', 'id': 1, 'parentid': -1, 'remark': '' }],
+      list: [{ deptname: "公司", id: 1, parentid: -1, remark: "" }],
       parent: [],
       parentmenu: [],
       parentButton: [],
 
       listLoading: true,
       requestParam: {
-        name: 'createdept',
-        parammaps: {}
+        name: "createdept",
+        parammaps: {},
       },
       deptform: {
-        id: '',
-        dname: '',
-        remark: '',
-        sort: '',
-        parentid: '',
-        enable: '1'
+        id: "",
+        dname: "",
+        remark: "",
+        sort: "",
+        parentid: "",
+        enable: "1",
       },
-      get_table_dataParm: { name: 'getDepartments' },
-      getRecuListParm: { name: 'getDepartmentCascade' },
-      getRecuListBParm: {        name: 'getMenuListBRecu',
-        idname: 'id',
-        parammaps: { id: 0 }
+      get_table_dataParm: { name: "getDepartments" },
+      getRecuListParm: { name: "getDepartmentCascade" },
+      getRecuListBParm: {
+        name: "getMenuListBRecu",
+        idname: "id",
+        parammaps: { id: 0 },
       },
       rules: {
-        dname: [{ type: 'string', required: true, message: '部门名称必填', trigger: 'change' }],
-
-        sort: [{ validator: isIntegerZero, trigger: 'blur' }]
+        dname: [
+          {
+            type: "string",
+            required: true,
+            message: "部门名称必填",
+            trigger: "change",
+          },
+        ],
+
+        sort: [{ validator: isIntegerZero, trigger: "blur" }],
       },
       dialogFormVisible: false,
-      dialogStatus: '',
+      dialogStatus: "",
       textMap: {
-        update: '编辑',
-        create: '新增'
+        update: "编辑",
+        create: "新增",
       },
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
+      rowStyle: { maxHeight: 50 + "px", height: 45 + "px" },
+      cellStyle: { padding: 0 + "px" },
       defaultProps: {
-        children: 'children',
-        label: 'title'
+        children: "children",
+        label: "title",
       },
-      nodeKey: 'id',
-      defaultCheckedKeys: []
-    }
+      nodeKey: "id",
+      defaultCheckedKeys: [],
+    };
   },
   created() {
-    this.get_table_data()
-    this.get_select_list()
+    this.get_table_data();
+    this.get_select_list();
   },
   methods: {
     popoverHide(checkedIds, checkedData) {
-      this.deptform.parentid = checkedIds
+      this.deptform.parentid = checkedIds;
     },
 
     get_table_data() {
-      this.listLoading = true
-      GetDataByName(this.get_table_dataParm).then(response => {
+      this.listLoading = true;
+      GetDataByName(this.get_table_dataParm).then((response) => {
         if (response.data.list !== null) {
-          console.log(this.list, '-----------------')
+          console.log(this.list, "-----------------");
           for (var i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].enable = parseInt(response.data.list[i].enable)
+            response.data.list[i].enable = parseInt(
+              response.data.list[i].enable
+            );
           }
-          this.list = transData(response.data.list, 'id', 'parentid', 'children')
+          this.list = transData(
+            response.data.list,
+            "id",
+            "parentid",
+            "children"
+          );
         }
 
         // Just to simulate the time of the request
         setTimeout(() => {
-          this.listLoading = false
-        }, 0.5 * 1000)
-      })
+          this.listLoading = false;
+        }, 0.5 * 1000);
+      });
     },
     get_select_list() {
-      GetDataByName(this.getRecuListParm).then(response => {
+      GetDataByName(this.getRecuListParm).then((response) => {
         if (response.data.list !== null) {
-          this.parentmenu = transData(response.data.list, 'id', 'parentid', 'children')
+          this.parentmenu = transData(
+            response.data.list,
+            "id",
+            "parentid",
+            "children"
+          );
         }
-      })
+      });
     },
     refreshDownList() {
       for (var val of this.parentmenu) {
-        this.parent = []
-        this.parent.push({ id: val.id, title: val.title, parentid: val.parentid })
+        this.parent = [];
+        this.parent.push({
+          id: val.id,
+          title: val.title,
+          parentid: val.parentid,
+        });
       }
     },
     resetRequestParam() {
-      this.deptform.id = ''
-      this.deptform.parentid = '0'
-      this.deptform.dname = ''
-      this.deptform.remark = ''
-      this.deptform.sort = '0'
-      this.deptform.enable = 1
+      this.deptform.id = "";
+      this.deptform.parentid = "0";
+      this.deptform.dname = "";
+      this.deptform.remark = "";
+      this.deptform.sort = "0";
+      this.deptform.enable = 1;
     },
     form_add() {
-      this.resetRequestParam()
-      this.dialogStatus = 'create'
-      this.parent = this.parentmenu
-      this.dialogFormVisible = true
+      this.resetRequestParam();
+      this.dialogStatus = "create";
+      this.parent = this.parentmenu;
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     add_dialog_save() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          this.requestParam.name = 'insertDepartments'
-
-          if (this.deptform.parentid === '') this.deptform.parentid = '0'
+          this.requestParam.name = "insertDepartments";
 
+          if (this.deptform.parentid === "") this.deptform.parentid = "0";
 
           this.requestParam.parammaps = {
-            id: '',
+            id: "",
             dname: this.deptform.dname,
             remark: this.deptform.remark,
             sort: this.deptform.sort,
             parentId: this.deptform.parentid,
-            enable: this.deptform.enable
-          }
-
+            enable: this.deptform.enable,
+          };
 
           PostDataByName(this.requestParam).then((response) => {
-
-            console.log('新增保存发送参数', this.requestParam)
-            if (response.msg !== 'fail') {
-              this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
-              this.dialogFormVisible = false
-              this.get_table_data()
-              this.get_select_list()
-
-
+            console.log("新增保存发送参数", this.requestParam);
+            if (response.msg !== "fail") {
+              this.$notify({
+                title: "成功",
+                message: "保存成功",
+                type: "success",
+                duration: 2000,
+              });
+              this.dialogFormVisible = false;
+              this.get_table_data();
+              this.get_select_list();
             } else {
-              this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
+              this.$notify({
+                title: "失败",
+                message: "保存失败",
+                type: "error",
+                duration: 2000,
+              });
             }
-
-
-          })
+          });
         }
-      })
+      });
     },
 
     form_edit(row) {
-      this.parent = this.parentmenu
-      console.log('row=====>', row)
-      this.defaultCheckedKeys = [row.parentid]
-      console.log(this.defaultCheckedKeys)
-      this.deptform.parentid = row.parentid
-      this.deptform.dname = row.dname
-      this.deptform.remark = row.remark
-      this.deptform.sort = row.sort
-      this.deptform.id = row.id
-      this.deptform.enable = row.enable
-      this.dialogStatus = 'update'
-
-      this.dialogFormVisible = true
+      this.parent = this.parentmenu;
+      console.log("row=====>", row);
+      this.defaultCheckedKeys = [row.parentid];
+      console.log(this.defaultCheckedKeys);
+      this.deptform.parentid = row.parentid;
+      this.deptform.dname = row.dname;
+      this.deptform.remark = row.remark;
+      this.deptform.sort = row.sort;
+      this.deptform.id = row.id;
+      this.deptform.enable = row.enable;
+      this.dialogStatus = "update";
+
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-
-      })
-
-
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     form_edit_save() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          this.requestParam.name = 'updateDepartments'
-
+          this.requestParam.name = "updateDepartments";
 
           this.requestParam.parammaps = {
             id: this.deptform.id,
@@ -269,72 +382,87 @@ export default {
             remark: this.deptform.remark,
             sort: this.deptform.sort,
             parentId: this.deptform.parentid,
-            enable: this.deptform.enable
-          }
-
+            enable: this.deptform.enable,
+          };
 
-          console.log(this.requestParam)
+          console.log(this.requestParam);
           PostDataByName(this.requestParam).then((response) => {
-            console.log('编辑保存发送参数', this.requestParam)
-            if (response.msg !== 'fail') {
-
-              this.get_table_data()
-              this.dialogFormVisible = false
-              this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
+            console.log("编辑保存发送参数", this.requestParam);
+            if (response.msg !== "fail") {
+              this.get_table_data();
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "成功",
+                message: "保存成功",
+                type: "success",
+                duration: 2000,
+              });
             } else {
-              this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
+              this.$notify({
+                title: "失败",
+                message: "保存失败",
+                type: "error",
+                duration: 2000,
+              });
             }
-
-          })
+          });
         }
-      })
+      });
     },
     change_enable(index, row) {
-      this.requestParam.name = 'updateDepartments'
+      this.requestParam.name = "updateDepartments";
       this.requestParam.parammaps = {
         id: row.id,
         dname: row.dname,
         remark: row.remark,
         sort: row.sort,
         parentId: row.parentid,
-        enable: row.enable
-      }
+        enable: row.enable,
+      };
 
       PostDataByName(this.requestParam).then((response) => {
-        console.log('编辑保存发送参数', this.requestParam)
-        if (response.msg !== 'fail') {
-
-          this.get_table_data()
-          this.dialogFormVisible = false
-          this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
+        console.log("编辑保存发送参数", this.requestParam);
+        if (response.msg !== "fail") {
+          this.get_table_data();
+          this.dialogFormVisible = false;
+          this.$notify({
+            title: "成功",
+            message: "保存成功",
+            type: "success",
+            duration: 2000,
+          });
         } else {
-          this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
+          this.$notify({
+            title: "失败",
+            message: "保存失败",
+            type: "error",
+            duration: 2000,
+          });
         }
-
-      })
+      });
     },
     handleDelete(row) {
-      MessageBox.confirm('确认删除此信息？', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
+      MessageBox.confirm("确认删除此信息？", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
       }).then(() => {
-        this.requestParam.name = 'delDepartments'
+        this.requestParam.name = "delDepartments";
         this.requestParam.parammaps = {
           id: row.id,
-        }
+        };
         PostDataByName(this.requestParam).then(() => {
-          this.get_table_data()
-          this.dialogFormVisible = false
+          this.get_table_data();
+          this.dialogFormVisible = false;
           this.$notify({
-            title: '成功',
-            message: '删除成功',
-            type: 'success',
-            duration: 2000
-          })
-        })
-      })
-    }
-  }
-}
+            title: "成功",
+            message: "删除成功",
+            type: "success",
+            duration: 2000,
+          });
+        });
+      });
+    },
+  },
+};
 </script>

src/views/basicData/staffManagement/index.vue

@@ -1,101 +1,212 @@
 <template>
   <div class="app-container">
     <div class="app-container">
-
-
-    <div class = "search-bx"  >
-        <div class="search">
-          <el-row :gutter="0">
-            <el-col :span="21">
-              <el-input v-model="get_table_dataParm.parammaps.ename" placeholder="姓名" style="width: 180px;" class="filter-item" clearable />
-              <el-select v-model="get_table_dataParm.parammaps.departmentId" placeholder="集团" class="filter-item" style="width: 120px;" clearable>
-                <el-option v-for="(item,index) in departmentList" :key="index" :label="item.name" :value="item.id" />
-              </el-select>
-            </el-col>
-            <el-col :span="3">
-                <el-button class="successBorder" @click="form_search">查询</el-button>
-                <el-button class="successBorder" @click="form_clear">重置</el-button>
-            </el-col>
-          </el-row>
-        </div>
-
-        <div class="operation">
-          <el-row :gutter="0">
-            <el-col :span="21">
-              <el-button   class="success" icon="el-icon-plus" @click="form_add">新增</el-button>
-            </el-col>
-            <el-col :span="3">
-
-            </el-col>
-          </el-row>
-
-        </div>
-
-    </div>
-
-
-      <div class="table" style="margin-top:100px">
-        <el-table v-loading="listLoading" element-loading-text="给我一点时间" :data="list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable" row-key="id">
-          <el-table-column label="序号" align="center" type="index" width="50px">
+      <el-form
+        :inline="true"
+        :model="get_table_dataParm"
+        class="demo-form-inline"
+      >
+        <el-form-item>
+          <el-input
+            v-model="get_table_dataParm.parammaps.ename"
+            placeholder="姓名"
+            style="width: 180px"
+            class="filter-item"
+            size="small"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-select
+            v-model="get_table_dataParm.parammaps.departmentId"
+            placeholder="部门"
+            class="filter-item"
+            size="small"
+            filterable
+            style="width: 130px"
+            clearable
+          >
+            <el-option
+              v-for="(item, index) in departmentList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            size="small"
+            type="info"
+            plain
+            icon="el-icon-search"
+            @click="form_search"
+            >查询</el-button
+          >
+          <el-button
+            size="small"
+            type="info"
+            plain
+            icon="el-icon-refresh"
+            @click="form_clear"
+            >重置</el-button
+          >
+          <el-button
+            size="small"
+            type="primary"
+            icon="el-icon-download"
+            @click="handleExport"
+            >导出</el-button
+          >
+          <el-button
+            size="small"
+            type="success"
+            icon="el-icon-plus"
+            @click="form_add"
+            >新增</el-button
+          >
+        </el-form-item>
+      </el-form>
+
+      <div class="table">
+        <el-table
+          v-loading="listLoading"
+          element-loading-text="给我一点时间"
+          :data="list"
+          border
+          fit
+          highlight-current-row
+          style="width: 100%"
+          :row-style="rowStyle"
+          :cell-style="cellStyle"
+          class="elTable"
+          row-key="id"
+        >
+          <el-table-column
+            label="序号"
+            align="center"
+            type="index"
+            width="50px"
+          >
             <template slot-scope="scope">
-              <span>{{ scope.$index + (pageNum-1) * pageSize + 1 }}</span>
+              <span>{{ scope.$index + (pageNum - 1) * pageSize + 1 }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="姓名" header-align="center" align="center" width="200px">
+          <el-table-column label="姓名" header-align="center" align="center">
             <template slot-scope="scope">
               <span>{{ scope.row.ename }}</span>
             </template>
           </el-table-column>
 
-          <el-table-column label="部门" width="200px" header-align="center" align="center">
+          <el-table-column label="部门" header-align="center" align="center">
             <template slot-scope="scope">
               <span>{{ scope.row.dname }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="电话" width="200px" header-align="center" align="center">
+          <el-table-column label="电话" header-align="center" align="center">
             <template slot-scope="scope">
               <span>{{ scope.row.telephone }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="备注" width="200px" header-align="center" align="center">
+          <el-table-column
+            label="备注"
+            width="200px"
+            header-align="center"
+            align="center"
+          >
             <template slot-scope="scope">
               <span>{{ scope.row.remark }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="顺序" width="100px" header-align="center" align="center">
+          <el-table-column label="顺序" header-align="center" align="center">
             <template slot-scope="scope">
               <span>{{ scope.row.sort }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="启用" min-width="80px" header-align="center" align="center">
+          <el-table-column label="启用" header-align="center" align="center">
             <template slot-scope="scope">
-              <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="change_enable(scope.$index, scope.row)" />
+              <el-switch
+                v-model="scope.row.enable"
+                active-color="#13ce66"
+                inactive-color="#ff4949"
+                :active-value="1"
+                :inactive-value="0"
+                @change="change_enable(scope.$index, scope.row)"
+              />
             </template>
           </el-table-column>
-          <el-table-column label="操作" header-align="center" align="center" width="260" class-name="small-padding fixed-width" fixed="right">
-            <template slot-scope="{row}">
+          <el-table-column
+            label="操作"
+            header-align="center"
+            align="center"
+            class-name="small-padding fixed-width"
+            width="250px"
+            fixed="right"
+          >
+            <template slot-scope="{ row }">
               <el-button type="primary" size="mini" @click="form_edit(row)">
                 编辑
               </el-button>
-              <el-button v-if="row.status!='已删'" size="mini" type="danger" @click="handleDelete(row)">
+              <el-button
+                v-if="row.status != '已删'"
+                size="mini"
+                type="danger"
+                @click="handleDelete(row)"
+              >
                 删除
               </el-button>
             </template>
           </el-table-column>
         </el-table>
-        <pagination v-show="total>=0" :total="total" :page.sync="get_table_dataParm.offset" :limit.sync="get_table_dataParm.pagecount" @pagination="get_table_data" />
+        <pagination
+          v-show="total >= 0"
+          :total="total"
+          :page.sync="get_table_dataParm.offset"
+          :limit.sync="get_table_dataParm.pagecount"
+          :page-sizes="[10, 50, 100, 200, 500]"
+          :layout="'total, sizes, prev, pager, next, jumper'"
+          @pagination="get_table_data"
+        />
       </div>
 
-      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="40%">
-        <el-form ref="dataForm" :rules="rules" :model="deptform" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
+      <el-dialog
+        :title="textMap[dialogStatus]"
+        :visible.sync="dialogFormVisible"
+        :close-on-click-modal="false"
+        width="40%"
+      >
+        <el-form
+          ref="dataForm"
+          :rules="rules"
+          :model="deptform"
+          label-position="left"
+          label-width="100px"
+          style="width: 400px; margin-left: 50px"
+        >
           <el-form-item label="姓名" prop="ename">
             <el-input ref="ename" v-model="deptform.ename" />
           </el-form-item>
           <el-form-item label="部门" prop="parentid">
-            <tree-select :disabled="disabled" :height="280" :width="200" size="small" :data="parent" :default-props="defaultProps" clearable :node-key="nodeKey" :checked-keys="defaultCheckedKeys" @popoverHide="popoverHide" />
+            <tree-select
+              :disabled="disabled"
+              :height="280"
+              :width="200"
+              size="small"
+              :data="parent"
+              :default-props="defaultProps"
+              clearable
+              :expandAll="true"
+              :node-key="nodeKey"
+              :checked-keys="defaultCheckedKeys"
+              @popoverHide="popoverHide"
+            />
           </el-form-item>
           <el-form-item label="电话" prop="telephone">
-            <el-input ref="telephone" v-model="deptform.telephone"  maxlength="11" />
+            <el-input
+              ref="telephone"
+              v-model="deptform.telephone"
+              maxlength="11"
+            />
           </el-form-item>
 
           <el-form-item label="备注" prop="remark">
@@ -106,13 +217,32 @@
             <el-input ref="sort" v-model="deptform.sort" />
           </el-form-item>
           <el-form-item label="启用" prop="enable">
-            <el-switch ref="enable" v-model="deptform.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" />
+            <el-switch
+              ref="enable"
+              v-model="deptform.enable"
+              active-color="#13ce66"
+              inactive-color="#ff4949"
+              :active-value="1"
+              :inactive-value="0"
+            />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button class="cancelClose" @click="dialogFormVisible = false;get_table_data()">关闭</el-button>
-          <el-button class="success" @click="dialogStatus==='create'?add_dialog_save():form_edit_save()">确认</el-button>
-
+          <el-button
+            class="cancelClose"
+            @click="
+              dialogFormVisible = false;
+              get_table_data();
+            "
+            >关闭</el-button
+          >
+          <el-button
+            class="success"
+            @click="
+              dialogStatus === 'create' ? add_dialog_save() : form_edit_save()
+            "
+            >确认</el-button
+          >
         </div>
       </el-dialog>
     </div>
@@ -120,34 +250,39 @@
 </template>
 
 <script>
-import TreeSelect from '@/components/TreeSelect'
-import waves from '@/directive/waves' // waves directive
-import Cookies from 'js-cookie'
-import { isIntegerZero } from '@/utils/validate'
-import { PostDataByName, GetDataByName, transData, failproccess, } from '@/api/common'
-import { MessageBox } from 'element-ui'
-import Pagination from '@/components/Pagination'
+import TreeSelect from "@/components/TreeSelect";
+import waves from "@/directive/waves"; // waves directive
+import Cookies from "js-cookie";
+import { isIntegerZero } from "@/utils/validate";
+import {
+  PostDataByName,
+  GetDataByName,
+  transData,
+  failproccess,
+} from "@/api/common";
+import { MessageBox } from "element-ui";
+import Pagination from "@/components/Pagination";
+import XLSX from "xlsx";
+
 export default {
-  name: 'StaffManagement',
+  name: "StaffManagement",
   components: { TreeSelect, Pagination },
   directives: { waves },
 
   filters: {
     menutypeFilter(menutype) {
       const menutypeMap = {
-        menu: '',
-        button: 'warning'
-      }
-      return menutypeMap[menutype]
-    }
+        menu: "",
+        button: "warning",
+      };
+      return menutypeMap[menutype];
+    },
   },
   data() {
     return {
       disabled: false,
       tableKey: 0,
-      list: [
-        { 'deptname': '公司', 'id': 1, 'parentid': -1, 'remark': '' }
-      ],
+      list: [{ deptname: "公司", id: 1, parentid: -1, remark: "" }],
       parent: [],
       parentmenu: [],
       parentButton: [],
@@ -155,28 +290,28 @@ export default {
       departmentList: [],
 
       requestParam: {
-        name: 'insertEmployees',
-        parammaps: {}
+        name: "insertEmployees",
+        parammaps: {},
       },
       deptform: {
-        id: '',
-        ename: '',
-        remark: '',
-        sort: '',
-        parentid: '0',
+        id: "",
+        ename: "",
+        remark: "",
+        sort: "",
+        parentid: "0",
         telephone: "",
-        enable: '1'
+        enable: "1",
       },
       get_table_dataParm: {
-        name: 'getEmployees',
+        name: "getEmployees",
         page: 1,
         offset: 1,
-        pagecount: parseInt(Cookies.get('pagecount')),
-        returntype: 'Map',
+        pagecount: 10,
+        returntype: "Map",
         parammaps: {
           ename: "",
           departmentId: "",
-        }
+        },
       },
 
       listLoading: true,
@@ -184,186 +319,208 @@ export default {
       list: [],
       total: 0,
 
-
-      getRecuListParm: { name: 'getDepartmentCascade' },
-      getRecuListBParm: {        name: 'getMenuListBRecu',
-        idname: 'id',
-        parammaps: { id: 0 }
+      getRecuListParm: { name: "getDepartmentCascade" },
+      getRecuListBParm: {
+        name: "getMenuListBRecu",
+        idname: "id",
+        parammaps: { id: 0 },
       },
       rules: {
-        ename: [{ type: 'string', required: true, message: '姓名必填', trigger: 'change' }],
-        parentid: [{ required: true, message: '部门名称必填', trigger: 'change' }],
-        telephone: [{ required: true, message: '电话不能为空'},
-            { min: 11, max: 11, message: '必填11个字符', trigger: 'blur' }],
-        sort: [{ validator: isIntegerZero, trigger: 'blur' }]
+        ename: [
+          {
+            type: "string",
+            required: true,
+            message: "姓名必填",
+            trigger: "change",
+          },
+        ],
+        parentid: [
+          { required: true, message: "部门名称必填", trigger: "change" },
+        ],
+        telephone: [
+          { required: true, message: "电话不能为空" },
+          { min: 11, max: 11, message: "必填11个字符", trigger: "blur" },
+        ],
+        sort: [{ validator: isIntegerZero, trigger: "blur" }],
       },
       dialogFormVisible: false,
-      dialogStatus: '',
+      dialogStatus: "",
       textMap: {
-        update: '编辑',
-        create: '新增'
+        update: "编辑",
+        create: "新增",
       },
-      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
-      cellStyle: { padding: 0 + 'px' },
+      rowStyle: { maxHeight: 50 + "px", height: 45 + "px" },
+      cellStyle: { padding: 0 + "px" },
       defaultProps: {
-        children: 'children',
-        label: 'title'
+        children: "children",
+        label: "title",
       },
-      nodeKey: 'id',
-      defaultCheckedKeys: []
-    }
+      nodeKey: "id",
+      defaultCheckedKeys: [],
+    };
   },
   created() {
-    this.get_table_data()
-    this.get_select_list()
+    this.get_table_data();
+    this.get_select_list();
   },
   methods: {
     popoverHide(checkedIds, checkedData) {
-      this.deptform.parentid = checkedIds
+      this.deptform.parentid = checkedIds;
     },
 
-
     form_search() {
-      console.log('点击了查询')
-      this.get_table_dataParm.offset = 1
-      this.get_table_data()
+      console.log("点击了查询");
+      this.get_table_dataParm.offset = 1;
+      this.get_table_data();
     },
     form_clear() {
-      console.log('点击了重置')
-      this.get_table_dataParm.parammaps.departmentId = ''
-      this.get_table_dataParm.parammaps.ename = ''
-      this.get_table_dataParm.offset = 1
-      this.get_table_data()
+      console.log("点击了重置");
+      this.get_table_dataParm.parammaps.departmentId = "";
+      this.get_table_dataParm.parammaps.ename = "";
+      this.get_table_dataParm.offset = 1;
+      this.get_table_data();
     },
 
     get_table_data() {
-      this.listLoading = true
-      GetDataByName(this.get_table_dataParm).then(response => {
+      this.listLoading = true;
+      GetDataByName(this.get_table_dataParm).then((response) => {
         if (response.data.list !== null) {
-          console.log(this.list, '-----------------')
           for (var i = 0; i < response.data.list.length; i++) {
-            response.data.list[i].enable = parseInt(response.data.list[i].enable)
+            response.data.list[i].enable = parseInt(
+              response.data.list[i].enable
+            );
           }
 
-          this.list = response.data.list
-
-          this.pageNum = response.data.pageNum
-          this.pageSize = response.data.pageSize
-          this.total = response.data.total
+          this.list = response.data.list;
 
+          this.pageNum = response.data.pageNum;
+          this.pageSize = response.data.pageSize;
+          this.total = response.data.total;
         } else {
-          this.list = []
+          this.list = [];
         }
 
-
         setTimeout(() => {
-          this.listLoading = false
-        }, 0.5 * 1000)
-      })
+          this.listLoading = false;
+        }, 0.5 * 1000);
+      });
     },
     get_select_list() {
-      GetDataByName(this.getRecuListParm).then(response => {
+      GetDataByName(this.getRecuListParm).then((response) => {
         if (response.data.list !== null) {
-          this.parentmenu = transData(response.data.list, 'id', 'parentid', 'children')
+          this.parentmenu = transData(
+            response.data.list,
+            "id",
+            "parentid",
+            "children"
+          );
         }
-      })
-
-      GetDataByName({ name: 'getDepartmentsSelect', offset: 0, pagecount: 0, parammaps: {} }).then(response => {
-
-        console.log("部门下拉框", response)
-        this.departmentList = response.data.list
-
-      })
+      });
+
+      GetDataByName({
+        name: "getDepartmentsSelect",
+        offset: 0,
+        pagecount: 0,
+        parammaps: {},
+      }).then((response) => {
+        console.log("部门下拉框", response);
+        this.departmentList = response.data.list;
+      });
     },
     refreshDownList() {
       for (var val of this.parentmenu) {
-        this.parent = []
-        this.parent.push({ id: val.id, title: val.title, parentid: val.parentid })
+        this.parent = [];
+        this.parent.push({
+          id: val.id,
+          title: val.title,
+          parentid: val.parentid,
+        });
       }
     },
     resetRequestParam() {
-      this.deptform.parentid = '0'
-      this.deptform.departmentid = '0'
-      this.deptform.ename = ''
-      this.deptform.remark = ''
-      this.deptform.sort = '0'
-      this.deptform.telephone = ''
-      this.deptform.id = ''
-      this.deptform.enable = 1
-
-
+      this.deptform.parentid = "0";
+      this.deptform.departmentid = "0";
+      this.deptform.ename = "";
+      this.deptform.remark = "";
+      this.deptform.sort = "0";
+      this.deptform.telephone = "";
+      this.deptform.id = "";
+      this.deptform.enable = 1;
     },
     form_add() {
-      this.resetRequestParam()
-      this.dialogStatus = 'create'
-      this.parent = this.parentmenu
-      this.dialogFormVisible = true
+      this.resetRequestParam();
+      this.dialogStatus = "create";
+      this.parent = this.parentmenu;
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-
-      })
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     add_dialog_save() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          this.requestParam.name = 'insertEmployees'
+          this.requestParam.name = "insertEmployees";
 
-          if (this.deptform.parentid === '') this.deptform.parentid = '0'
+          if (this.deptform.parentid === "") this.deptform.parentid = "0";
 
           this.requestParam.parammaps = {
-            id: '',
+            id: "",
             ename: this.deptform.ename,
             telephone: this.deptform.telephone,
             remark: this.deptform.remark,
             sort: this.deptform.sort,
             departmentId: this.deptform.parentid,
-            enable: this.deptform.enable
-          }
+            enable: this.deptform.enable,
+          };
 
           PostDataByName(this.requestParam).then((response) => {
-            console.log('新增保存发送参数', this.requestParam)
-            if (response.msg !== 'fail') {
-              this.get_table_data()
-              this.dialogFormVisible = false
-              this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
+            console.log("新增保存发送参数", this.requestParam);
+            if (response.msg !== "fail") {
+              this.get_table_data();
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "成功",
+                message: "保存成功",
+                type: "success",
+                duration: 2000,
+              });
             } else {
-              this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
+              this.$notify({
+                title: "失败",
+                message: "保存失败",
+                type: "error",
+                duration: 2000,
+              });
             }
-
-
-          })
+          });
         }
-      })
+      });
     },
 
     form_edit(row) {
-      this.parent = this.parentmenu
-      console.log('row=====>', row)
-      this.defaultCheckedKeys = [row.departmentid]
-      console.log(this.defaultCheckedKeys)
-      this.deptform.departmentid = row.departmentid
-      this.deptform.parentid = row.departmentid
-      this.deptform.ename = row.ename
-      this.deptform.remark = row.remark
-      this.deptform.sort = row.sort
-      this.deptform.telephone = row.telephone
-      this.deptform.id = row.id
-      this.deptform.enable = row.enable
-      this.dialogStatus = 'update'
-
-      this.dialogFormVisible = true
+      this.parent = this.parentmenu;
+      console.log("row=====>", row);
+      this.defaultCheckedKeys = [row.departmentid];
+      console.log(this.defaultCheckedKeys);
+      this.deptform.departmentid = row.departmentid;
+      this.deptform.parentid = row.departmentid;
+      this.deptform.ename = row.ename;
+      this.deptform.remark = row.remark;
+      this.deptform.sort = row.sort;
+      this.deptform.telephone = row.telephone;
+      this.deptform.id = row.id;
+      this.deptform.enable = row.enable;
+      this.dialogStatus = "update";
+
+      this.dialogFormVisible = true;
       this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-
-      })
-
-
+        this.$refs["dataForm"].clearValidate();
+      });
     },
     form_edit_save() {
-      this.$refs['dataForm'].validate((valid) => {
+      this.$refs["dataForm"].validate((valid) => {
         if (valid) {
-          this.requestParam.name = 'updateEmployees'
-
+          this.requestParam.name = "updateEmployees";
 
           this.requestParam.parammaps = {
             id: this.deptform.id,
@@ -372,28 +529,35 @@ export default {
             remark: this.deptform.remark,
             sort: this.deptform.sort,
             departmentId: this.deptform.parentid,
-            enable: this.deptform.enable
-          }
+            enable: this.deptform.enable,
+          };
 
-
-          console.log(this.requestParam)
+          console.log(this.requestParam);
           PostDataByName(this.requestParam).then((response) => {
-            console.log('编辑保存发送参数', this.requestParam)
-            if (response.msg !== 'fail') {
-
-              this.get_table_data()
-              this.dialogFormVisible = false
-              this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
+            console.log("编辑保存发送参数", this.requestParam);
+            if (response.msg !== "fail") {
+              this.get_table_data();
+              this.dialogFormVisible = false;
+              this.$notify({
+                title: "成功",
+                message: "保存成功",
+                type: "success",
+                duration: 2000,
+              });
             } else {
-              this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
+              this.$notify({
+                title: "失败",
+                message: "保存失败",
+                type: "error",
+                duration: 2000,
+              });
             }
-
-          })
+          });
         }
-      })
+      });
     },
     change_enable(index, row) {
-      this.requestParam.name = 'updateEmployees'
+      this.requestParam.name = "updateEmployees";
       this.requestParam.parammaps = {
         id: row.id,
         ename: row.ename,
@@ -401,53 +565,326 @@ export default {
         remark: row.remark,
         sort: row.sort,
         departmentId: row.departmentid,
-        enable: row.enable
-      }
+        enable: row.enable,
+      };
 
       PostDataByName(this.requestParam).then((response) => {
-        console.log('编辑保存发送参数', this.requestParam)
-        if (response.msg !== 'fail') {
-
-          this.get_table_data()
-          this.dialogFormVisible = false
-          this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
+        console.log("编辑保存发送参数", this.requestParam);
+        if (response.msg !== "fail") {
+          this.get_table_data();
+          this.dialogFormVisible = false;
+          this.$notify({
+            title: "成功",
+            message: "保存成功",
+            type: "success",
+            duration: 2000,
+          });
         } else {
-          this.$notify({ title: '失败', message: '保存失败', type: 'error', duration: 2000 })
+          this.$notify({
+            title: "失败",
+            message: "保存失败",
+            type: "error",
+            duration: 2000,
+          });
         }
-
-      })
+      });
     },
     handleDelete(row) {
-      MessageBox.confirm('确认删除此信息？', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning'
+      MessageBox.confirm("确认删除此信息？", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
       }).then(() => {
-        this.requestParam.name = 'delEmployees'
+        this.requestParam.name = "delEmployees";
         this.requestParam.parammaps = {
           id: row.id,
-        }
+        };
         PostDataByName(this.requestParam).then(() => {
-          this.get_table_data()
-          this.dialogFormVisible = false
+          this.get_table_data();
+          this.dialogFormVisible = false;
           this.$notify({
-            title: '成功',
-            message: '删除成功',
-            type: 'success',
-            duration: 2000
-          })
-        })
-      })
+            title: "成功",
+            message: "删除成功",
+            type: "success",
+            duration: 2000,
+          });
+        });
+      });
+    },
+    async handleExport() {
+      try {
+        const exportParams = {
+          name: "getEmployees",
+          returntype: "Map",
+          parammaps: this.get_table_dataParm.parammaps,
+        };
+
+        const response = await GetDataByName(exportParams);
+        if (response.msg !== "ok") {
+          this.$message.error("获取导出数据失败");
+          return;
+        }
+
+        const data = response.data.list || [];
+        if (data.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        const headers = [
+          "序号",
+          "姓名",
+          "部门",
+          "电话",
+          "备注",
+          "顺序",
+          "启用状态",
+        ];
+
+        const rows = data.map((item, index) => [
+          index + 1,
+          item.ename || "",
+          item.dname || "",
+          item.telephone || "",
+          item.remark || "",
+          item.sort,
+          item.enable === 1 ? "启用" : "禁用",
+        ]);
+
+        const wb = XLSX.utils.book_new();
+        const wsData = [headers, ...rows];
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        const colWidths = [
+          { wch: 8 },
+          { wch: 15 },
+          { wch: 20 },
+          { wch: 15 },
+          { wch: 30 },
+          { wch: 10 },
+          { wch: 10 },
+        ];
+        ws["!cols"] = colWidths;
+
+        XLSX.utils.book_append_sheet(wb, ws, "职工列表");
+
+        const fileName = `职工列表_${this.getFormattedDateTime()}.xlsx`;
+
+        XLSX.writeFile(wb, fileName);
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.app-container {
+  padding: 15px;
+  background-color: #f5f7fa;
+
+  .demo-form-inline {
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+    margin-bottom: 15px;
+
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+      margin-right: 10px;
+      vertical-align: top;
+
+      // 统一输入框和选择框高度
+      .el-input,
+      .el-select {
+        .el-input__inner {
+          height: 32px;
+          line-height: 32px;
+        }
+      }
+    }
+
+    :deep(.el-button) {
+      margin-left: 5px;
+      height: 32px;
+      line-height: 30px;
+      padding: 0 15px;
+      font-weight: 500;
+      border-radius: 4px;
+      font-size: 14px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      &[type="primary"] {
+        background-color: #409eff;
+        border-color: #409eff;
+        &:hover {
+          background-color: #66b1ff;
+          border-color: #66b1ff;
+        }
+      }
+
+      &[type="success"] {
+        background-color: #67c23a;
+        border-color: #67c23a;
+        &:hover {
+          background-color: #85ce61;
+          border-color: #85ce61;
+        }
+      }
+
+      &[type="info"] {
+        &.is-plain {
+          color: #909399;
+          background: #f4f4f5;
+          border-color: #d3d4d6;
+          &:hover {
+            color: #409eff;
+            background-color: #ecf5ff;
+            border-color: #b3d8ff;
+          }
+        }
+      }
+
+      &[type="danger"] {
+        background-color: #f56c6c;
+        border-color: #f56c6c;
+        &:hover {
+          background-color: #f78989;
+          border-color: #f78989;
+        }
+      }
+
+      // 图标样式
+      [class*="el-icon-"] {
+        margin-right: 5px;
+        & + span {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .table {
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+    :deep(.el-table) {
+      .el-button--mini {
+        height: 32px;
+        padding: 0 15px;
+        font-weight: 500;
+        border-radius: 4px;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        margin: 2px 4px;
+
+        &:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        &[type="primary"] {
+          background-color: #409eff;
+          border-color: #409eff;
+          &:hover {
+            background-color: #66b1ff;
+            border-color: #66b1ff;
+          }
+        }
+
+        &[type="danger"] {
+          background-color: #f56c6c;
+          border-color: #f56c6c;
+          &:hover {
+            background-color: #f78989;
+            border-color: #f78989;
+          }
+        }
+      }
     }
   }
 }
-</script>
-<style lang="scss" scoped>
+
 .search {
-  padding-top: 10px;
-  clear: both;
+  margin-bottom: 15px;
+}
+
+.operation {
+  margin-bottom: 15px;
+}
+
+.pagination-container {
+  margin-top: 15px;
 }
-.table {
-  margin-top: 10px;
+
+// 弹窗按钮样式
+:deep(.el-dialog) {
+  .dialog-footer {
+    padding: 15px 20px;
+    text-align: right;
+    background: #f8f9fa;
+    border-top: 1px solid #e9ecef;
+    border-radius: 0 0 4px 4px;
+
+    .el-button {
+      height: 32px;
+      line-height: 30px;
+      padding: 0 20px;
+      font-size: 14px;
+      font-weight: 500;
+      border-radius: 4px;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      margin-left: 10px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      &.cancelClose {
+        color: #606266;
+        background: #fff;
+        border-color: #dcdfe6;
+        &:hover {
+          color: #409eff;
+          border-color: #c6e2ff;
+          background-color: #ecf5ff;
+        }
+      }
+
+      &.success {
+        color: #fff;
+        background-color: #67c23a;
+        border-color: #67c23a;
+        &:hover {
+          background-color: #85ce61;
+          border-color: #85ce61;
+        }
+      }
+    }
+  }
 }
-</style>
+</style>

src/views/productManagement/installationCompletedSummary/components/InstallationStatistics.vue

@@ -130,13 +130,13 @@
                 @click="handleReset"
                 >重置</el-button
               >
-              <!-- <el-button
+              <el-button
                 type="success"
                 size="mini"
                 icon="el-icon-download"
                 @click="handleExport"
                 >导出</el-button
-              > -->
+              >
             </div>
           </el-form-item>
         </el-form>
@@ -367,6 +367,8 @@
       :row-data="currentRow"
       :installer-options="personnelOptions"
       :project-options="projectOptions"
+      :check-button-permission="() => false"
+      :is-current-user-in-service-staff="() => false"
     />
   </el-card>
 </template>
@@ -374,6 +376,7 @@
 <script>
 import { GetDataByName, GetDataByNames } from "@/api/common";
 import ViewDialog from "@/views/productManagement/installationOrder/components/ViewDialog.vue";
+import XLSX from "xlsx";
 
 export default {
   name: "InstallationStatistics",
@@ -444,14 +447,16 @@ export default {
         parammaps: this.queryParams,
       };
 
-      GetDataByName(send_select_list)
+      return GetDataByName(send_select_list)
         .then((response) => {
           this.tableData = response.data.list || [];
           this.handleSpanData(); // 处理合并信息
+          this.updateTimeHandler(); // 更新时间
         })
         .catch((error) => {
           console.error("获取数据失败:", error);
           this.$message.error("获取数据失败");
+          throw error;
         })
         .finally(() => {
           this.loading = false;
@@ -567,59 +572,127 @@ export default {
       this.dateRange = [];
       this.getTableData();
     },
-    // 导出按钮点击事件
-    handleExport() {
-      this.$confirm("确认导出已安装统计数据?", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          const send_select_list = {
-            name: "exportInstallationStatistics",
-            returntype: "Map",
-            parammaps: {
-              ...this.queryParams,
-              beginDate: this.dateRange?.[0]
-                ? this.formatDate(this.dateRange[0])
-                : "",
-              endDate: this.dateRange[1]
-                ? this.formatDate(this.dateRange[1])
-                : "",
-            },
-          };
+    // 导出功能
+    async handleExport() {
+      try {
+        let excelData = [];
+        const params = {
+          name: "getServicesSummaryList",
+          returntype: "Map",
+          parammaps: {},
+        };
 
-          this.loading = true;
-          GetDataByName(send_select_list)
-            .then((response) => {
-              if (response.data && response.data.fileUrl) {
-                // 创建一个隐藏的 a 标签用于下载
-                const link = document.createElement("a");
-                link.style.display = "none";
-                link.href = response.data.fileUrl;
-                link.setAttribute(
-                  "download",
-                  `已安装统计_${this.formatDate(new Date())}.xlsx`
-                );
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                this.$message.success("导出成功");
-              } else {
-                this.$message.error("导出失败：未获取到文件地址");
-              }
-            })
-            .catch((error) => {
-              console.error("导出失败:", error);
-              this.$message.error("导出失败：" + (error.message || "未知错误"));
-            })
-            .finally(() => {
-              this.loading = false;
-            });
-        })
-        .catch(() => {
-          this.$message.info("已取消导出");
-        });
+        const response = await GetDataByName(params);
+        if (response && response.data) {
+          excelData = response.data.list || [];
+        }
+
+        if (excelData.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        // 定义表头
+        const headers = [
+          "序号",
+          "服务单号",
+          "客户名称",
+          "接单时间",
+          "完成时间",
+          "总计划量",
+          "总完成量",
+          "计划总工时/天",
+          "分配人员",
+          "货品名称",
+          "项目名称",
+          "计划数量",
+          "完成数量",
+          "服务人员",
+          "服务数量",
+          "服务工时/天",
+          "完成效率",
+          "人效",
+        ];
+
+        // 格式化数据
+        const rows = excelData.map((item, index) => [
+          index + 1,
+          item.orderNo || "",
+          item.customerName || "",
+          item.acceptTime || "",
+          item.actualCompleteTime || "",
+          item.totalQuantity || 0,
+          item.installedQuantity || 0,
+          item.plannedTimes || 0,
+          item.serviceStaffNames || "",
+          item.goodsName || "",
+          item.projectName || "",
+          item.goodQuantity || 0,
+          item.goodInstallQuantity || 0,
+          item.installUserName || "",
+          item.serverInstallQuantity || 0,
+          item.serverWorkedTimes || 0,
+          item.completionRate ? item.completionRate + "%" : "0%",
+          item.productivity || 0,
+        ]);
+
+        // 创建工作簿
+        const wb = XLSX.utils.book_new();
+
+        // 组合表头和数据
+        const wsData = [headers, ...rows];
+
+        // 创建工作表
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        // 设置列宽
+        const colWidths = [
+          { wch: 8 }, // 序号
+          { wch: 15 }, // 服务单号
+          { wch: 20 }, // 客户名称
+          { wch: 20 }, // 接单时间
+          { wch: 20 }, // 完成时间
+          { wch: 10 }, // 总计划量
+          { wch: 10 }, // 总完成量
+          { wch: 15 }, // 计划总工时/天
+          { wch: 20 }, // 分配人员
+          { wch: 20 }, // 货品名称
+          { wch: 20 }, // 项目名称
+          { wch: 10 }, // 计划数量
+          { wch: 10 }, // 完成数量
+          { wch: 15 }, // 服务人员
+          { wch: 10 }, // 服务数量
+          { wch: 15 }, // 服务工时/天
+          { wch: 10 }, // 完成效率
+          { wch: 10 }, // 人效
+        ];
+        ws["!cols"] = colWidths;
+
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, "已安装统计");
+
+        // 生成文件名
+        const fileName = `已安装统计_${this.getFormattedDateTime()}.xlsx`;
+
+        // 导出文件
+        XLSX.writeFile(wb, fileName);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
+    // 获取格式化的日期时间
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
     },
     // 处理合并信息
     handleSpanData() {
@@ -847,6 +920,36 @@ export default {
         console.error("获取项目选项失败:", error);
       }
     },
+    // 添加刷新处理方法
+    async handleRefresh() {
+      try {
+        this.loading = true;
+        await this.getTableData();
+        this.$message.success("刷新成功");
+      } catch (error) {
+        console.error("刷新失败:", error);
+        this.$message.error("刷新失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 更新时间处理方法
+    async getUpdateTime() {
+      const now = new Date();
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const seconds = now.getSeconds().toString().padStart(2, "0");
+      return `${month}/${day} ${hours}:${minutes}:${seconds}更新`;
+    },
+
+    // 修改更新时间的方法
+    async updateTimeHandler() {
+      const newUpdateTime = await this.getUpdateTime();
+      this.$emit("update:updateTime", newUpdateTime);
+    },
   },
 };
 </script>

src/views/productManagement/installationCompletedSummary/index.vue

@@ -7,7 +7,7 @@
     </div>
 
     <!-- 已安装统计表格 -->
-    <installation-statistics :update-time="updateTime" />
+    <installation-statistics :update-time.sync="updateTime" />
   </div>
 </template>
 

src/views/productManagement/installationOrder/components/AddDialog.vue

@@ -228,6 +228,27 @@
             align="center"
             width="100"
           />
+          <el-table-column
+            prop="stock"
+            label="现有库存"
+            align="center"
+            width="60"
+          />
+          <el-table-column
+            prop="orderQuantity"
+            label="订单数量"
+            align="center"
+            width="110"
+          >
+            <template slot-scope="scope">
+              <el-input
+                v-model="scope.row.orderQuantity"
+                size="mini"
+                style="width: 70px"
+                @input="handleOrderQuantityInput($event, scope.row)"
+              />
+            </template>
+          </el-table-column>
           <el-table-column
             prop="goodsImagePath"
             label="货品图片"
@@ -271,27 +292,7 @@
             align="center"
             width="50"
           />
-          <el-table-column
-            prop="stock"
-            label="现有库存"
-            align="center"
-            width="60"
-          />
-          <el-table-column
-            prop="orderQuantity"
-            label="订单数量"
-            align="center"
-            width="110"
-          >
-            <template slot-scope="scope">
-              <el-input
-                v-model="scope.row.orderQuantity"
-                size="mini"
-                style="width: 70px"
-                @input="handleOrderQuantityInput($event, scope.row)"
-              />
-            </template>
-          </el-table-column>
+
           <el-table-column
             prop="shippedQuantity"
             label="已服务数量"

src/views/productManagement/installationOrder/components/DailyWriteDialog.vue

@@ -272,10 +272,10 @@ export default {
           // 根据是否填写状态计算初始剩余量
           let unshippedQuantity;
           if (item.isWrite === "已填写") {
-            // 如果是已填写状态，剩余量 = 计划总量 - 当日完成量
+            // 如果是已填写状态，剩余量 = 计划总量 - 已完成完成量
             unshippedQuantity = Math.max(
               0,
-              item.orderQuantity - item.todayQuantity
+              item.orderQuantity - item.installQuantity
             );
           } else {
             // 如果是未填写状态，剩余量 = 计划总量 - 已完成量 - 当日完成量
@@ -301,6 +301,7 @@ export default {
             projectId: item.projectId,
             projectName: item.projectName,
             oldTodayQuantity: item.oldTodayQuantity || 0,
+            oldInstallQuantity: item.oldInstallQuantity || 0,
           };
           return processedItem;
         });
@@ -321,28 +322,16 @@ export default {
     handleTodayQuantityChange(row) {
       // 确保输入的是非负整数
       row.todayQuantity = Math.floor(Math.max(0, row.todayQuantity));
-      const oldTodayQuantity = row.oldTodayQuantity;
+
       // 根据是否填写状态计算剩余量
       if (row.isWrite === "已填写") {
-        // 如果是已填写状态，剩余量 = 计划总量 - 当日完成量
-        row.unshippedQuantity =
-          row.orderQuantity -
-            row.installQuantity -
-            row.todayQuantity +
-            oldTodayQuantity <
-          0
-            ? 0
-            : row.orderQuantity -
-              row.installQuantity -
-              row.todayQuantity +
-              oldTodayQuantity;
-      } else {
-        // 如果是未填写状态，剩余量 = 计划总量 - 已完成量 - 当日完成量
-        row.unshippedQuantity =
-          row.orderQuantity - row.installQuantity - row.todayQuantity < 0
-            ? 0
-            : row.orderQuantity - row.installQuantity - row.todayQuantity;
+        row.installQuantity = row.oldInstallQuantity - row.oldTodayQuantity;
       }
+      // 剩余量 = 计划总量 - 已完成量 - 当日完成量
+      row.unshippedQuantity =
+        row.orderQuantity - row.installQuantity - row.todayQuantity < 0
+          ? 0
+          : row.orderQuantity - row.installQuantity - row.todayQuantity;
     },
 
     // 验证表格数据

src/views/productManagement/installationOrder/components/ViewDialog.vue

@@ -32,8 +32,8 @@
 
           <el-row :gutter="10">
             <el-col :span="8">
-              <el-form-item label="服务项目">
-                <el-input v-model="form.projectName" readonly />
+              <el-form-item label="派单人">
+                <el-input v-model="form.dispatcherName" readonly />
               </el-form-item>
             </el-col>
             <el-col :span="8">
@@ -108,24 +108,20 @@
                 <el-input :value="(form.progress || 0) + '%'" readonly />
               </el-form-item>
             </el-col>
-            <el-col :span="8">
-              <el-form-item label="派单人">
-                <el-input v-model="form.dispatcherName" readonly />
-              </el-form-item>
-            </el-col>
+
             <el-col :span="8">
               <el-form-item label="客户联系人">
                 <el-input v-model="form.contactName" readonly />
               </el-form-item>
             </el-col>
-          </el-row>
-
-          <el-row :gutter="10">
             <el-col :span="8">
               <el-form-item label="客户联系人电话">
                 <el-input v-model="form.contactPhone" readonly />
               </el-form-item>
             </el-col>
+          </el-row>
+
+          <el-row :gutter="10">
             <el-col :span="16">
               <el-form-item label="备注">
                 <el-input
@@ -249,7 +245,7 @@
                   />
                   <el-table-column
                     prop="unshippedQuantity"
-                    label="剩余量"
+                    label="未完成量"
                     align="center"
                     width="80"
                   >
@@ -496,7 +492,7 @@
 
             <el-table-column
               prop="orderQuantity"
-              label="服务总量"
+              label="计划总量"
               align="center"
               width="80"
             />
@@ -528,13 +524,13 @@
 
             <el-table-column
               prop="installQuantity"
-              label="当日服务量"
+              label="当天完成量"
               align="center"
               width="100"
             />
             <el-table-column
               prop="shippedQuantity"
-              label="累计服务量"
+              label="累计完成量"
               align="center"
               width="100"
             />
@@ -586,11 +582,13 @@ export default {
     },
     checkButtonPermission: {
       type: Function,
-      required: true,
+      required: false,
+      default: () => () => false,
     },
     isCurrentUserInServiceStaff: {
       type: Function,
-      required: true,
+      required: false,
+      default: () => () => false,
     },
   },
   computed: {
@@ -1161,30 +1159,36 @@ export default {
       }
 
       const headers = [
-        "日期",
+        "序号",
+        "服务单号",
+        "客户",
+        "预计完成时间",
+        "服务人员",
         "项目名称",
-        "货品编号",
-        "货品名称",
-        "服务总量",
+        "日期",
+        "货品",
+        "计划总量",
+        "累计完成量",
+        "当天完成量",
         "剩余量",
-        "服务人员",
-        "当日服务量",
-        "累计服务量",
         "备注",
       ];
 
-      const rows = data.map((item) => [
-        item.installDate || "",
+      const rows = data.map((item, index) => [
+        index + 1,
+        this.form.orderNo || "",
+        this.form.customerName || "",
+        this.form.estimatedCompleteTime || "",
+        item.installUserName || "",
         item.projectName || "",
-        item.goodsCode || "",
+        item.installDate || "",
         item.goodsName || "",
         parseInt(item.orderQuantity) || 0,
+        parseInt(item.shippedQuantity) || 0,
+        parseInt(item.installQuantity) || 0,
         parseInt(item.unshippedQuantity) < 0
           ? `超量 ${Math.abs(parseInt(item.unshippedQuantity))}`
           : parseInt(item.unshippedQuantity) || 0,
-        item.installUserName || "",
-        parseInt(item.installQuantity) || 0,
-        parseInt(item.shippedQuantity) || 0,
         item.installRemark || "",
       ]);
 
@@ -1195,16 +1199,19 @@ export default {
       const ws = XLSX.utils.aoa_to_sheet(wsData);
 
       const colWidths = [
-        { wch: 12 },
-        { wch: 20 },
-        { wch: 12 },
-        { wch: 20 },
-        { wch: 10 },
-        { wch: 10 },
-        { wch: 12 },
-        { wch: 12 },
-        { wch: 12 },
-        { wch: 30 },
+        { wch: 8 }, // 序号
+        { wch: 15 }, // 服务单号
+        { wch: 20 }, // 客户
+        { wch: 20 }, // 预计完成时间
+        { wch: 15 }, // 服务人员
+        { wch: 20 }, // 项目名称
+        { wch: 12 }, // 日期
+        { wch: 30 }, // 货品
+        { wch: 12 }, // 计划总量
+        { wch: 12 }, // 累计完成量
+        { wch: 12 }, // 当天完成量
+        { wch: 12 }, // 剩余量
+        { wch: 30 }, // 备注
       ];
       ws["!cols"] = colWidths;
 

src/views/productManagement/installationOrder/index.vue

@@ -656,6 +656,7 @@ import RejectDialog from "./components/RejectDialog.vue";
 import DailyWriteDialog from "./components/DailyWriteDialog.vue";
 import AcceptDialog from "./components/AcceptDialog.vue";
 import CheckDialog from "./components/CheckDialog.vue";
+import * as XLSX from "xlsx";
 
 export default {
   name: "InstallationOrder",
@@ -885,26 +886,144 @@ export default {
       this.queryParams.pageNum = 1;
       this.getList();
     },
-    // 导出按钮点击事件处理
-    onExportClick() {
-      // const send_select_list =
-      //   {
-      //     name: "getUsersSelect",
-      //     offset: 0,
-      //     pagecount: 0,
-      //     parammaps: {
-      //       enable: "1",
-      //     },
-      //   };
-      // GetDataByName(send_select_list)
-      //   .then((response) => {
-      //     // 处理服务人员数据
-      //     const excelData = response.data.list || [];
-      //     console.log("导出数据", excelData);
-      //   })
-      //   .catch((error) => {
-      //     console.error("获取下拉框数据失败:", error);
-      //   });
+    // 获取格式化的日期时间
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
+    },
+
+    // 导出功能
+    async onExportClick() {
+      try {
+        // 使用现有的查询参数，但不分页
+        const exportParams = {
+          name: "getInstallationOrderList",
+          returntype: "Map",
+          parammaps: {},
+        };
+
+        const response = await GetDataByName(exportParams);
+        if (response.msg !== "ok") {
+          this.$message.error("获取导出数据失败");
+          return;
+        }
+
+        const data = response.data.list || [];
+        if (data.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        // 定义表头
+        const headers = [
+          "序号",
+          "服务单号",
+          "下单人",
+          "下单时间",
+          "服务人员",
+          "接单时间",
+          "客户",
+          "发货单号",
+          "合同",
+          "货品名称",
+          "计划总量",
+          "已完成量",
+          "未完成量",
+          "预计完成时间",
+          "实际完成时间",
+          "距预估完成时间",
+          "安装进度",
+          "派单人",
+          "客户联系人",
+          "客户联系人电话",
+          "备注",
+        ];
+
+        // 格式化数据
+        const rows = data.map((item, index) => [
+          index + 1,
+          item.orderNo || "",
+          item.createName || "",
+          item.orderTime || "",
+          item.serviceStaffNames || "",
+          item.acceptTime || "",
+          item.customerName || "",
+          item.deliveryNo || "",
+          item.contractNo || "",
+          item.goodsName || "",
+          item.totalQuantity || "",
+          item.installedQuantity || "",
+          item.uninstalledQuantity || "",
+          item.estimatedCompleteTime || "",
+          item.actualCompleteTime || "",
+          item.remainingTime !== null && item.remainingTime !== undefined
+            ? item.remainingTime < 0
+              ? `已逾期 ${Math.abs(item.remainingTime)} 天`
+              : `${item.remainingTime} 天`
+            : "",
+          item.progress ? `${item.progress}%` : "0%",
+          item.dispatcherName || "",
+          item.contactName || "",
+          item.contactPhone || "",
+          item.remark || "",
+        ]);
+
+        // 创建工作簿
+        const wb = XLSX.utils.book_new();
+
+        // 组合表头和数据
+        const wsData = [headers, ...rows];
+
+        // 创建工作表
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        // 设置列宽
+        const colWidths = [
+          { wch: 8 }, // 序号
+          { wch: 15 }, // 服务单号
+          { wch: 12 }, // 下单人
+          { wch: 20 }, // 下单时间
+          { wch: 15 }, // 服务项目
+          { wch: 20 }, // 服务人员
+          { wch: 20 }, // 接单时间
+          { wch: 20 }, // 客户
+          { wch: 15 }, // 发货单号
+          { wch: 15 }, // 合同
+          { wch: 30 }, // 货品名称
+          { wch: 12 }, // 计划总量
+          { wch: 12 }, // 已完成量
+          { wch: 12 }, // 未完成量
+          { wch: 20 }, // 预计完成时间
+          { wch: 20 }, // 实际完成时间
+          { wch: 20 }, // 距预估完成时间
+          { wch: 12 }, // 安装进度
+          { wch: 12 }, // 派单人
+          { wch: 15 }, // 客户联系人
+          { wch: 15 }, // 客户联系人电话
+          { wch: 30 }, // 备注
+        ];
+        ws["!cols"] = colWidths;
+
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, "服务工单列表");
+
+        // 生成文件名
+        const fileName = `服务工单列表_${this.getFormattedDateTime()}.xlsx`;
+
+        // 导出文件
+        XLSX.writeFile(wb, fileName);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
     },
     handleAdd() {
       this.dialogVisible = true;
@@ -990,6 +1109,10 @@ export default {
     },
     // 派单
     async handleDispatch(row) {
+      if (!row.estimatedCompleteTime) {
+        this.$message.error("当前工单没有预计完成时间，无法派单，请编辑工单");
+        return;
+      }
       this.currentRow = row;
       this.dispatchDialogVisible = true;
     },
@@ -1226,7 +1349,6 @@ export default {
             ],
           });
         }
-
         params.data.push(
           {
             name: "checkInstallationOrder",

src/views/productManagement/installationSummary/components/InstallationTable.vue

@@ -14,6 +14,22 @@
             updateTime
           }}</span>
         </div>
+        <div style="display: flex; gap: 16px">
+          <el-button
+            type="text"
+            title="刷新"
+            icon="el-icon-refresh"
+            @click="handleRefresh"
+            style="padding: 0; font-size: 16px; color: #909399"
+          />
+          <el-button
+            type="text"
+            title="导出"
+            icon="el-icon-download"
+            @click="handleExport"
+            style="padding: 0; font-size: 16px; color: #909399"
+          />
+        </div>
       </div>
     </div>
     <div class="table-container">
@@ -27,6 +43,20 @@
         :header-cell-style="{ background: '#f5f7fa' }"
         @sort-change="handleSortChange"
       >
+        <el-table-column type="index" label="序号" width="50" align="center" />
+        <el-table-column
+          prop="orderNo"
+          label="服务单号"
+          min-width="120"
+          align="center"
+          sortable
+        >
+          <template slot-scope="scope">
+            <span class="order-no-text" @click="handleView(scope.row)">
+              {{ scope.row.orderNo }}
+            </span>
+          </template>
+        </el-table-column>
         <el-table-column
           prop="customerName"
           label="客户名称"
@@ -207,14 +237,28 @@
         </el-table-column>
       </el-table>
     </div>
+    <view-dialog
+      :visible.sync="dialogVisible"
+      :row-data="currentRow"
+      :installer-options="personnelOptions"
+      :project-options="projectOptions"
+      :check-button-permission="() => false"
+      :is-current-user-in-service-staff="() => false"
+    />
   </el-card>
 </template>
 
 <script>
+import * as XLSX from "xlsx";
 // import { getInstallationList, getUnassignedCount } from '@/api/productManagement/installation' // 后续需要添加此API
+import { GetDataByName, GetDataByNames } from "@/api/common";
+import ViewDialog from "@/views/productManagement/installationOrder/components/ViewDialog.vue";
 
 export default {
   name: "InstallationTable",
+  components: {
+    ViewDialog,
+  },
   props: {
     tableData: {
       type: Array,
@@ -236,6 +280,10 @@ export default {
       },
       // 示例数据
       defaultData: [],
+      dialogVisible: false,
+      currentRow: null,
+      personnelOptions: [],
+      projectOptions: [],
     };
   },
   computed: {
@@ -301,6 +349,163 @@ export default {
     handleSortChange({ prop, order }) {
       this.sortConfig = { prop, order };
     },
+    // 获取格式化的日期时间
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
+    },
+
+    // 导出功能
+    async handleExport() {
+      try {
+        if (this.tableData.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        // 定义表头
+        const headers = [
+          "客户名称",
+          "项目名称",
+          "货品名称",
+          "服务人员",
+          "单据状态",
+          "进度",
+          "计划量",
+          "已完成量",
+          "未完成量",
+          "昨日完成量",
+          "今日完成量",
+          "完成率",
+          "距离完成时间还剩",
+        ];
+
+        // 格式化数据
+        const rows = this.tableData.map((item) => [
+          item.customerName || "",
+          item.projectName || "",
+          item.goodsName || "",
+          item.serviceStaffNames || "",
+          item.statusName || "",
+          item.rate ? `${parseInt(item.rate)}%` : "0%",
+          item.orderQuantity || 0,
+          item.shippedQuantity || 0,
+          item.unshippedQuantity || 0,
+          item.yesterdayFinished || 0,
+          item.todayFinished || 0,
+          `${parseInt(item.rate)}%`,
+          this.formatRemainingTime(item),
+        ]);
+
+        // 创建工作簿
+        const wb = XLSX.utils.book_new();
+
+        // 组合表头和数据
+        const wsData = [headers, ...rows];
+
+        // 创建工作表
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        // 设置列宽
+        const colWidths = [
+          { wch: 20 }, // 客户名称
+          { wch: 15 }, // 项目名称
+          { wch: 30 }, // 货品名称
+          { wch: 15 }, // 服务人员
+          { wch: 12 }, // 单据状态
+          { wch: 10 }, // 进度
+          { wch: 10 }, // 计划量
+          { wch: 10 }, // 已完成量
+          { wch: 10 }, // 未完成量
+          { wch: 12 }, // 昨日完成量
+          { wch: 12 }, // 今日完成量
+          { wch: 10 }, // 完成率
+          { wch: 20 }, // 距离完成时间还剩
+        ];
+        ws["!cols"] = colWidths;
+
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, "服务概况");
+
+        // 生成文件名
+        const fileName = `服务概况_${this.getFormattedDateTime()}.xlsx`;
+
+        // 导出文件
+        XLSX.writeFile(wb, fileName);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
+
+    // 格式化剩余时间
+    formatRemainingTime(row) {
+      if (row.remainingTime === null || row.remainingTime === undefined) {
+        return "";
+      }
+
+      if (row.earlyDays !== null && row.earlyDays !== undefined) {
+        if (row.earlyDays > 0) {
+          return `提前 ${row.earlyDays} 天完成`;
+        } else if (row.earlyDays < 0) {
+          return `延期 ${Math.abs(row.earlyDays)} 天完成`;
+        } else {
+          return "按时完成";
+        }
+      } else {
+        if (row.remainingTime < 0) {
+          return `已逾期 ${Math.abs(row.remainingTime)} 天`;
+        } else {
+          return `${row.remainingTime} 天`;
+        }
+      }
+    },
+    async getUpdateTime() {
+      const now = new Date();
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const seconds = now.getSeconds().toString().padStart(2, "0");
+      return `${month}/${day} ${hours}:${minutes}:${seconds}更新`;
+    },
+    async handleRefresh() {
+      try {
+        this.loading = true;
+        // 调用获取数据的接口
+        const send_select_list = {
+          name: "getInstallOrderOverview",
+          parammaps: {},
+        };
+
+        const response = await GetDataByName(send_select_list);
+        // 使用 emit 更新父组件的数据
+        this.$emit("update:tableData", response.data.list || []);
+
+        // 更新时间
+        const newUpdateTime = await this.getUpdateTime();
+        this.$emit("update:updateTime", newUpdateTime);
+
+        this.$message.success("刷新成功");
+      } catch (error) {
+        console.error("刷新失败:", error);
+        this.$message.error("刷新失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+    async handleView(row) {
+      this.currentRow = row;
+      this.dialogVisible = true;
+    },
   },
 };
 </script>
@@ -483,4 +688,25 @@ export default {
 :deep(.el-table__body-wrapper) {
   transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+.el-button [class*="el-icon-"] + span {
+  margin-left: 0;
+}
+
+.el-button--text {
+  &:hover {
+    color: #409eff !important;
+  }
+  &:focus {
+    color: #909399;
+  }
+}
+
+.order-no-text {
+  color: #409eff;
+  cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
+}
 </style>

src/views/productManagement/installationSummary/components/StatisticsPanel.vue

@@ -29,11 +29,12 @@ export default {
   data() {
     return {
       statisticsData: [
-        { icon: "order-produced", text: "已完成", value: 0 },
-        { icon: "order-producing", text: "已完成未验收", value: 0 },
-        { icon: "order-total-count", text: "进行中", value: 0 },
         { icon: "order-completed", text: "未接单", value: 0 },
         { icon: "order-unproduced", text: "未开始", value: 0 },
+        { icon: "order-total-count", text: "进行中", value: 0 },
+        { icon: "order-producing", text: "已完成未验收", value: 0 },
+
+        { icon: "order-produced", text: "已完成", value: 0 },
         { icon: "order-uncompleted", text: "已超期", value: 0 },
       ],
     };

src/views/productManagement/installationSummary/index.vue

@@ -11,8 +11,8 @@
 
     <!-- 服务概况表格 -->
     <installation-table
-      :table-data="tableData"
-      :update-time="updateTime"
+      :table-data.sync="tableData"
+      :update-time.sync="updateTime"
       @unassigned-click="handleUnassignedOrders"
       @progress-click="handleProgressClick"
     />

src/views/productManagement/productionCompletedSummary/components/productionStatistics.vue

@@ -0,0 +1,1049 @@
+<template>
+  <el-card class="box-card">
+    <div slot="header" class="clearfix">
+      <div class="header-title">
+        <span class="title">已完成统计</span>
+        <span class="update-time">{{ updateTime }}</span>
+      </div>
+      <div class="filter-container">
+        <el-form :inline="true" class="filter-section" size="mini">
+          <el-form-item>
+            <el-input
+              v-model="queryParams.orderNo"
+              placeholder="生产单号"
+              clearable
+              style="width: 140px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-select
+              v-model="queryParams.goodsId"
+              filterable
+              placeholder="货品名称"
+              style="width: 140px !important"
+              :filter-method="filterProduct"
+            >
+              <el-option
+                v-for="item in filteredProductOptions"
+                :key="item.id"
+                :label="item.goodsName"
+                :value="item.id"
+              >
+                <template>
+                  <div class="product-option">
+                    <div class="option-item">
+                      <span class="label">名称</span>
+                      <el-tooltip
+                        :content="item.goodsName"
+                        placement="top"
+                        effect="light"
+                      >
+                        <span class="value">{{ item.goodsName }}</span>
+                      </el-tooltip>
+                    </div>
+                    <div class="option-item">
+                      <span class="label">编号</span>
+                      <span class="value">{{ item.goodsCode }}</span>
+                    </div>
+
+                    <div class="option-item">
+                      <span class="label">规格</span>
+                      <el-tooltip
+                        :content="item.goodsSpecification"
+                        placement="top"
+                        :disabled="
+                          !item.goodsSpecification ||
+                          item.goodsSpecification.length <= 5
+                        "
+                        effect="light"
+                      >
+                        <span class="value">{{
+                          item.goodsSpecification || "-"
+                        }}</span>
+                      </el-tooltip>
+                    </div>
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <!-- <el-form-item>
+            <el-select
+              v-model="queryParams.installUserId"
+              filterable
+              remote
+              reserve-keyword
+              placeholder="服务人员"
+              :loading="loading"
+              style="width: 100px !important"
+            >
+              <el-option
+                v-for="item in personnelOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item> -->
+
+          <el-form-item>
+            <el-date-picker
+              title="实际完成时间"
+              v-model="dateRange"
+              class="input-datetime"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width: 220px"
+            />
+          </el-form-item>
+          <el-form-item>
+            <div class="button-group">
+              <el-button
+                type="primary"
+                size="mini"
+                icon="el-icon-search"
+                @click="handleQuery"
+                >查询</el-button
+              >
+              <el-button
+                type="info"
+                size="mini"
+                icon="el-icon-refresh"
+                @click="handleReset"
+                >重置</el-button
+              >
+              <el-button
+                type="success"
+                size="mini"
+                icon="el-icon-download"
+                @click="handleExport"
+                >导出</el-button
+              >
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <el-table
+      :data="displayData"
+      style="width: 100%"
+      border
+      size="small"
+      :span-method="objectSpanMethod"
+    >
+      <el-table-column
+        prop="orderCode"
+        label="生产单号"
+        min-width="80"
+        align="center"
+      />
+      <el-table-column
+        prop="goodsName"
+        label="货品名称"
+        min-width="80"
+        align="center"
+      />
+      <el-table-column
+        prop="totalQuantity"
+        label="计划量"
+        min-width="70"
+        align="center"
+      />
+      <el-table-column
+        prop="installedQuantity"
+        label="已完成量"
+        min-width="70"
+        align="center"
+      />
+      <el-table-column
+        prop="acceptTime"
+        label="接单时间"
+        min-width="70"
+        align="center"
+      />
+      <el-table-column
+        prop="estimatedCompletionTime"
+        label="预计完成时间"
+        min-width="70"
+        align="center"
+      />
+      <el-table-column
+        prop="actualCompletionTime"
+        label="实际完成时间"
+        min-width="70"
+        align="center"
+      />
+      <el-table-column
+        prop="plannedTimes"
+        label="预计工时/天"
+        min-width="50"
+        align="center"
+      />
+      <el-table-column
+        prop="actualWorkedTimes"
+        label="实际工时/天"
+        min-width="50"
+        align="center"
+      />
+      <el-table-column
+        prop="completionRate"
+        label="完成效率"
+        min-width="50"
+        align="center"
+      >
+        <template slot-scope="scope">
+          {{ formatCompletionRate(scope.row) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        prop="contractNo"
+        label="合同编号"
+        min-width="50"
+        align="center"
+      />
+      <el-table-column
+        prop="customerName"
+        label="客户名称"
+        min-width="60"
+        align="center"
+      /> -->
+    </el-table>
+  </el-card>
+</template>
+
+<script>
+import { GetDataByName, GetDataByNames } from "@/api/common";
+import ViewDialog from "@/views/productManagement/installationOrder/components/ViewDialog.vue";
+import XLSX from "xlsx";
+
+export default {
+  name: "InstallationStatistics",
+  components: {
+    ViewDialog,
+  },
+  props: {
+    updateTime: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      isExpanded: false,
+      productOptions: [],
+      filteredProductOptions: [],
+      productSearchKeyword: "",
+      personnelOptions: [],
+      customerOptions: [],
+      loading: false,
+      tableData: [],
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        goodsId: "",
+        installUserId: "",
+        customerId: "",
+        beginDate: "",
+        endDate: "",
+        orderNo: "",
+      },
+      spanArr: [], // 第一级合并：服务工单级别
+      subSpanArr: [], // 第二级合并：货品级别
+      thirdSpanArr: [], // 第三级合并：项目级别
+      pos: 0,
+      subPos: 0,
+      thirdPos: 0,
+      dialogVisible: false,
+      currentRow: null,
+    };
+  },
+  computed: {
+    displayData() {
+      return this.tableData;
+    },
+  },
+  watch: {
+    productOptions: {
+      immediate: true,
+      handler(val) {
+        this.filteredProductOptions = val;
+      },
+    },
+  },
+  created() {
+    this.initFilterOptions();
+    this.getTableData();
+  },
+  methods: {
+    // 添加刷新处理方法
+    async handleRefresh() {
+      try {
+        this.loading = true;
+        await this.getTableData();
+        this.$message.success("刷新成功");
+      } catch (error) {
+        console.error("刷新失败:", error);
+        this.$message.error("刷新失败");
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // 更新时间处理方法
+    async getUpdateTime() {
+      const now = new Date();
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const seconds = now.getSeconds().toString().padStart(2, "0");
+      return `${month}/${day} ${hours}:${minutes}:${seconds}更新`;
+    },
+
+    // 修改更新时间的方法
+    async updateTimeHandler() {
+      const newUpdateTime = await this.getUpdateTime();
+      this.$emit("update:updateTime", newUpdateTime);
+    },
+
+    getTableData() {
+      console.log("queryParams", this.queryParams);
+      const send_select_list = {
+        name: "getProductionSummaryList",
+        returntype: "Map",
+        parammaps: this.queryParams,
+      };
+
+      return GetDataByName(send_select_list)
+        .then((response) => {
+          this.tableData = response.data.list || [];
+          this.handleSpanData(); // 处理合并信息
+          this.updateTimeHandler(); // 更新时间
+        })
+        .catch((error) => {
+          console.error("获取数据失败:", error);
+          this.$message.error("获取数据失败");
+          throw error;
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    initFilterOptions() {
+      const send_select_list = [
+        {
+          name: "getGoodsListByCode",
+          returntype: "Map",
+          parammaps: {
+            goodsCode: "",
+          },
+        },
+        {
+          name: "getEmployeesSelect",
+          returntype: "Map",
+          parammaps: {},
+        },
+      ];
+
+      GetDataByNames(send_select_list)
+        .then((response) => {
+          this.productOptions = response.data.getGoodsListByCode.list || [];
+          this.filteredProductOptions = this.productOptions;
+          this.personnelOptions = response.data.getEmployeesSelect.list || [];
+        })
+        .catch((error) => {
+          console.error("获取货品和人员选项失败:", error);
+          this.$message.error("获取货品和人员选项失败");
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    /**
+     * 格式化日期为yyyy-MM-dd
+     * @param {Date} date - 日期对象
+     * @returns {string} 格式化后的日期字符串
+     */
+    formatDate(date) {
+      if (!date) return "";
+      const d = new Date(date);
+      const year = d.getFullYear();
+      const month = String(d.getMonth() + 1).padStart(2, "0");
+      const day = String(d.getDate()).padStart(2, "0");
+      return `${year}-${month}-${day}`;
+    },
+
+    getCompletionRateColor(row) {
+      if (row.completionRate < 100) {
+        return "#F56C6C"; // 红色
+      } else if (row.completionRate > 100) {
+        return "#67C23A"; // 绿色
+      }
+      return "#409EFF"; // 蓝色
+    },
+    handleCustomerInput(value) {
+      if (!value) {
+        this.customerOptions = [];
+        return;
+      }
+      this.loading = true;
+      const send_select_list = {
+        name: "getCustomerNameFuzzy",
+        returntype: "Map",
+        parammaps: {
+          inputvalue: value || "",
+        },
+      };
+
+      GetDataByName(send_select_list)
+        .then((response) => {
+          this.customerOptions = response.data.list || [];
+        })
+        .catch((error) => {
+          console.error("搜索客户失败:", error);
+          this.$message.error("搜索客户失败");
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    filterProduct(query) {
+      if (query !== "") {
+        this.filteredProductOptions = this.productOptions.filter((item) => {
+          return item.goodsName.toLowerCase().includes(query.toLowerCase());
+        });
+      } else {
+        this.filteredProductOptions = this.productOptions;
+      }
+    },
+    // 查询按钮点击事件
+    handleQuery() {
+      this.queryParams.beginDate = this.dateRange?.[0]
+        ? this.formatDate(this.dateRange[0])
+        : "";
+      this.queryParams.endDate = this.dateRange[1]
+        ? this.formatDate(this.dateRange[1])
+        : "";
+      this.getTableData();
+    },
+    // 重置按钮点击事件
+    handleReset() {
+      this.queryParams = {
+        goodsId: "",
+        installUserId: "",
+        customerId: "",
+        beginDate: "",
+        endDate: "",
+        orderNo: "",
+      };
+      this.dateRange = [];
+      this.getTableData();
+    },
+    // 导出功能
+    async handleExport() {
+      try {
+        let excelData = [];
+        const params = {
+          name: "getProductionSummaryList",
+          returntype: "Map",
+          parammaps: this.queryParams,
+        };
+
+        const response = await GetDataByName(params);
+        if (response && response.data) {
+          excelData = response.data.list || [];
+        }
+
+        if (excelData.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        // 定义表头
+        const headers = [
+          "生产单号",
+          "货品名称",
+          "计划量",
+          "已完成量",
+
+          "接单时间",
+          "预计完成时间",
+          "实际完成时间",
+          "预计工时/天",
+          "实际工时/天",
+          "完成率",
+        ];
+
+        // 格式化数据
+        const rows = excelData.map((item) => {
+          // 计算完成率
+          const completionRate = item.totalQuantity
+            ? ((item.installedQuantity / item.totalQuantity) * 100).toFixed(2)
+            : "0";
+
+          return [
+            item.orderCode || "",
+            item.goodsName || "",
+            item.totalQuantity || 0,
+
+            item.acceptTime || "",
+            item.estimatedCompletionTime || "",
+            item.actualCompletionTime || "",
+            item.plannedTimes || 0,
+            item.actualWorkedTimes || 0,
+            item.installedQuantity || 0,
+            `${completionRate}%`,
+          ];
+        });
+
+        // 创建工作簿
+        const wb = XLSX.utils.book_new();
+
+        // 组合表头和数据
+        const wsData = [headers, ...rows];
+
+        // 创建工作表
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        // 设置列宽
+        const colWidths = [
+          { wch: 15 }, // 生产单号
+          { wch: 20 }, // 货品名称
+          { wch: 10 }, // 计划量
+          { wch: 10 }, // 已完成量
+          { wch: 10 }, // 完成率
+          { wch: 20 }, // 接单时间
+          { wch: 20 }, // 预计完成时间
+          { wch: 20 }, // 实际完成时间
+          { wch: 12 }, // 预计工时/天
+          { wch: 12 }, // 实际工时/天
+        ];
+        ws["!cols"] = colWidths;
+
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, "生产完成统计");
+
+        // 生成文件名
+        const fileName = `生产完成统计_${this.getFormattedDateTime()}.xlsx`;
+
+        // 导出文件
+        XLSX.writeFile(wb, fileName);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
+    // 获取格式化的日期时间
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
+    },
+    // 处理合并信息
+    handleSpanData() {
+      this.spanArr = []; // 第一级合并：服务工单级别
+      this.subSpanArr = []; // 第二级合并：货品级别
+      this.thirdSpanArr = []; // 第三级合并：项目级别
+      this.pos = 0;
+      this.subPos = 0;
+      this.thirdPos = 0;
+
+      const data = this.tableData;
+
+      // 第一级合并计算（服务工单级别）
+      for (let i = 0; i < data.length; i++) {
+        if (i === 0) {
+          this.spanArr.push(1);
+          this.pos = 0;
+        } else {
+          // 判断当前行与上一行是否相同
+          if (
+            data[i].orderNo === data[i - 1].orderNo &&
+            data[i].customerName === data[i - 1].customerName
+          ) {
+            this.spanArr[this.pos] += 1;
+            this.spanArr.push(0);
+          } else {
+            this.spanArr.push(1);
+            this.pos = i;
+          }
+        }
+      }
+
+      // 第二级合并计算（货品级别）
+      let lastOrderNo = ""; // 记录上一个工单号
+      let lastGoodsName = ""; // 记录上一个货品名称
+
+      for (let i = 0; i < data.length; i++) {
+        if (i === 0) {
+          this.subSpanArr.push(1);
+          lastOrderNo = data[i].orderNo;
+          lastGoodsName = data[i].goodsName;
+          this.subPos = 0;
+        } else {
+          // 如果是同一个工单内
+          if (data[i].orderNo === lastOrderNo) {
+            // 判断当前行与上一行的货品信息是否相同
+            if (data[i].goodsName === lastGoodsName) {
+              this.subSpanArr[this.subPos] += 1;
+              this.subSpanArr.push(0);
+            } else {
+              this.subSpanArr.push(1);
+              this.subPos = i;
+              lastGoodsName = data[i].goodsName;
+            }
+          } else {
+            // 新的工单开始
+            this.subSpanArr.push(1);
+            this.subPos = i;
+            lastOrderNo = data[i].orderNo;
+            lastGoodsName = data[i].goodsName;
+          }
+        }
+      }
+
+      // 第三级合并计算（项目级别）
+      lastOrderNo = "";
+      lastGoodsName = "";
+      let lastProjectName = "";
+
+      for (let i = 0; i < data.length; i++) {
+        if (i === 0) {
+          this.thirdSpanArr.push(1);
+          lastOrderNo = data[i].orderNo;
+          lastGoodsName = data[i].goodsName;
+          lastProjectName = data[i].projectName;
+          this.thirdPos = 0;
+        } else {
+          // 如果是同一个工单和货品内
+          if (
+            data[i].orderNo === lastOrderNo &&
+            data[i].goodsName === lastGoodsName
+          ) {
+            // 判断当前行与上一行的项目信息是否相同
+            if (
+              data[i].projectName === lastProjectName &&
+              data[i].goodQuantity === data[i - 1].goodQuantity &&
+              data[i].goodInstallQuantity === data[i - 1].goodInstallQuantity
+            ) {
+              this.thirdSpanArr[this.thirdPos] += 1;
+              this.thirdSpanArr.push(0);
+            } else {
+              this.thirdSpanArr.push(1);
+              this.thirdPos = i;
+              lastProjectName = data[i].projectName;
+            }
+          } else {
+            // 新的工单或货品开始
+            this.thirdSpanArr.push(1);
+            this.thirdPos = i;
+            lastOrderNo = data[i].orderNo;
+            lastGoodsName = data[i].goodsName;
+            lastProjectName = data[i].projectName;
+          }
+        }
+      }
+    },
+
+    // 合并单元格方法
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      //   // 第一级合并：服务工单、客户名称、接单时间等
+      //   if (columnIndex <= 7) {
+      //     const _row = this.spanArr[rowIndex];
+      //     const _col = _row > 0 ? 1 : 0;
+      //     return {
+      //       rowspan: _row,
+      //       colspan: _col,
+      //     };
+      //   }
+      //   // 第二级合并：货品名称
+      //   else if (columnIndex === 8) {
+      //     const _row = this.subSpanArr[rowIndex];
+      //     const _col = _row > 0 ? 1 : 0;
+      //     return {
+      //       rowspan: _row,
+      //       colspan: _col,
+      //     };
+      //   }
+      //   // 第三级合并：项目名称、计划数量、完成数量
+      //   else if (columnIndex === 9 || columnIndex === 10 || columnIndex === 11) {
+      //     const _row = this.thirdSpanArr[rowIndex];
+      //     const _col = _row > 0 ? 1 : 0;
+      //     return {
+      //       rowspan: _row,
+      //       colspan: _col,
+      //     };
+      //   }
+    },
+    // 修改查看详情方法
+    async handleView(row) {
+      // 直接使用当前行数据
+      this.currentRow = {
+        id: row.id,
+        orderNo: row.orderNo,
+        customerName: row.customerName,
+        projectName: row.projectName,
+        acceptTime: row.acceptTime,
+        actualCompleteTime: row.actualCompleteTime,
+        totalQuantity: row.totalQuantity,
+        installedQuantity: row.installedQuantity,
+        uninstalledQuantity: row.uninstalledQuantity,
+        progress: row.progress,
+        serviceStaffNames: row.installUserName,
+        // 其他需要的字段...
+      };
+      this.dialogVisible = true;
+
+      // 获取完整工单信息
+      const send_select_list = [
+        {
+          name: "getInstallationOrderById",
+          returntype: "Map",
+          parammaps: {
+            orderNo: row.orderNo,
+          },
+        },
+        {
+          name: "getInstallationOrderDetail",
+          returntype: "Map",
+          parammaps: {
+            orderNo: row.orderNo,
+          },
+        },
+        {
+          name: "getInstallationOrderProcessLogByOrderNo",
+          returntype: "Map",
+          parammaps: {
+            orderNo: row.orderNo,
+          },
+        },
+      ];
+
+      try {
+        const response = await GetDataByNames(send_select_list);
+        if (response.data) {
+          // 获取主表数据
+          const mainData =
+            response.data.getInstallationOrderById.list?.[0] || {};
+          // 获取明细表数据
+          const detailData =
+            response.data.getInstallationOrderDetail.list || [];
+          // 获取流程数据
+          const processData =
+            response.data.getInstallationOrderProcessLogByOrderNo.list || [];
+
+          // 更新当前行数据
+          this.currentRow = {
+            ...this.currentRow,
+            ...mainData,
+            products: detailData,
+            processData: processData,
+          };
+        }
+      } catch (error) {
+        console.error("获取工单详情失败:", error);
+        this.$message.error("获取工单详情失败");
+      }
+    },
+    // 添加格式化完成效率的方法
+    formatCompletionRate(row) {
+      const rate = row.totalQuantity
+        ? ((row.installedQuantity / row.totalQuantity) * 100).toFixed(2)
+        : "0";
+      return `${rate}%`;
+    },
+    // 初始化项目选项
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box-card {
+  margin-bottom: 20px;
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .update-time {
+      font-size: 12px;
+      color: #999;
+      margin-right: 8px;
+    }
+  }
+
+  .filter-container {
+    width: 100%;
+
+    .filter-section {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      margin: 0;
+      gap: 8px;
+
+      .el-form-item {
+        margin: 0;
+
+        .button-group {
+          display: flex;
+          gap: 8px;
+
+          .el-button {
+            height: 28px;
+            line-height: 26px;
+            padding: 0 15px;
+
+            [class^="el-icon-"] {
+              margin-right: 5px;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+
+      .el-select {
+        width: 120px;
+
+        &.el-select--medium {
+          width: 200px;
+        }
+      }
+    }
+
+    .input-datetime {
+      width: 220px;
+    }
+  }
+}
+
+.expand-button {
+  text-align: center;
+  border-top: 1px solid #ebeef5;
+  margin-top: -1px;
+
+  .el-button {
+    font-size: 13px;
+    color: #909399;
+    padding: 8px;
+
+    .button-content {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+
+      i {
+        font-size: 12px;
+        color: #c0c4cc;
+        transition: all 0.3s;
+      }
+
+      .expand-text {
+        max-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        transition: all 0.3s ease-in-out;
+        opacity: 0;
+      }
+    }
+
+    &:hover {
+      color: #409eff;
+
+      .button-content {
+        i {
+          color: #409eff;
+          margin-right: 4px;
+        }
+
+        .expand-text {
+          max-width: 100px;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+
+:deep(.el-table) {
+  font-size: 12px;
+
+  .el-table__header th {
+    padding: 8px 0;
+    background-color: #f5f7fa;
+  }
+
+  .el-table__body td {
+    padding: 8px 0;
+    background-color: #fff;
+  }
+
+  // 添加表格行的hover效果
+  .el-table__body tr:hover > td {
+    background-color: #f5f7fa !important;
+  }
+}
+
+// 添加表格内容的过渡效果
+:deep(.el-table__body-wrapper) {
+  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.product-option {
+  display: flex;
+  align-items: center;
+  padding: 6px 12px;
+  transition: all 0.25s ease;
+  border-radius: 4px;
+  margin: 1px;
+  position: relative;
+  border: 1px solid transparent;
+  min-height: 32px;
+  box-sizing: border-box;
+  z-index: 1;
+
+  &:hover {
+    background-color: #f9fafc;
+    border-color: #e4e7ed;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+    z-index: 2;
+  }
+
+  .option-item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 0 4px;
+    box-sizing: border-box;
+
+    &:not(:last-child) {
+      padding-right: 16px;
+      margin-right: 4px;
+
+      &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        top: 50%;
+        height: 14px;
+        width: 1px;
+        background-color: #dcdfe6;
+        transform: translateY(-50%);
+      }
+    }
+    &:nth-child(1) {
+      width: 250px;
+    } // 名称
+    &:nth-child(2) {
+      width: 120px;
+    } // 编号
+
+    &:nth-child(3) {
+      width: 120px;
+    } // 规格
+    &:nth-child(4) {
+      width: 120px;
+    } // 型号
+    &:nth-child(5) {
+      width: 80px;
+    } // 单位
+    &:nth-child(6) {
+      width: 80px;
+    } // 库存
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 500;
+      color: #409eff;
+      background: rgba(64, 158, 255, 0.08);
+      padding: 1px 6px;
+      border-radius: 3px;
+      margin-right: 6px;
+      font-size: 12px;
+      min-width: 32px;
+      height: 18px;
+      border: 1px solid rgba(64, 158, 255, 0.2);
+      user-select: none;
+      white-space: nowrap;
+    }
+
+    .value {
+      color: #606266;
+      font-size: 12px;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.2;
+      padding: 0 2px;
+      min-width: 0;
+    }
+  }
+}
+
+.order-no-text {
+  color: #409eff;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: #66b1ff;
+  }
+}
+
+.order-detail {
+  padding: 20px;
+
+  .detail-section {
+    margin-bottom: 24px;
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+      margin-bottom: 16px;
+      padding-left: 8px;
+      border-left: 4px solid #409eff;
+    }
+  }
+}
+
+:deep(.el-dialog__body) {
+  padding: 10px 20px;
+}
+
+:deep(.el-descriptions) {
+  padding: 16px;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+
+  .el-descriptions-item__label {
+    background-color: #fafafa;
+    padding: 12px 16px;
+    margin-right: -1px;
+    font-weight: 500;
+  }
+
+  .el-descriptions-item__content {
+    padding: 12px 16px;
+  }
+}
+</style>

src/views/productManagement/productionCompletedSummary/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="app-container">
+    <!-- 顶部标题栏 -->
+    <div class="page-header">
+      <div class="page-title">生产汇总</div>
+      <div class="page-time">时间：{{ currentTime }}</div>
+    </div>
+
+    <!-- 已安装统计表格 -->
+    <production-statistics :update-time.sync="updateTime" />
+  </div>
+</template>
+
+<script>
+import productionStatistics from "./components/productionStatistics.vue";
+import { GetDataByName, GetDataByNames } from "@/api/common";
+
+export default {
+  name: "ProductionSummary",
+  components: {
+    productionStatistics,
+  },
+  data() {
+    return {
+      currentTime: "",
+      updateTime: "",
+      dialogVisible: false,
+      tableData: [],
+      unassignedOrders: [],
+      chartData: {
+        labels: [
+          "智能膜环",
+          "智能喷淋",
+          "精准阉割",
+          "奶牛称重",
+          "车载控制器",
+          "大屏",
+        ],
+        datasets: [
+          {
+            label: "计划量",
+            data: [900, 850, 900, 700, 500, 30],
+            backgroundColor: "#409EFF",
+            order: 2,
+          },
+          {
+            label: "完成量",
+            data: [800, 820, 850, 680, 200, 20],
+            backgroundColor: "#FF9F43",
+            order: 2,
+          },
+          {
+            label: "完成率",
+            data: [88.9, 96.5, 94.4, 97.1, 40.0, 66.7],
+            type: "line",
+            borderColor: "#67C23A",
+            borderWidth: 2,
+            fill: false,
+            yAxisID: "percentage",
+            order: 1,
+          },
+        ],
+      },
+    };
+  },
+  created() {
+    this.updateCurrentTime();
+    setInterval(this.updateCurrentTime, 1000);
+    this.getUpdateTime();
+  },
+  methods: {
+    updateCurrentTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = (now.getMonth() + 1).toString().padStart(2, "0");
+      const day = now.getDate().toString().padStart(2, "0");
+      const hours = now.getHours().toString().padStart(2, "0");
+      const minutes = now.getMinutes().toString().padStart(2, "0");
+      const seconds = now.getSeconds().toString().padStart(2, "0");
+      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    },
+    async getUpdateTime() {
+      try {
+        const now = new Date();
+        const month = (now.getMonth() + 1).toString().padStart(2, "0");
+        const day = now.getDate().toString().padStart(2, "0");
+        const hours = now.getHours().toString().padStart(2, "0");
+        const minutes = now.getMinutes().toString().padStart(2, "0");
+        const seconds = now.getSeconds().toString().padStart(2, "0");
+
+        this.updateTime = `${month}/${day} ${hours}:${minutes}:${seconds}更新`;
+      } catch (error) {
+        console.error("获取更新时间失败:", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  background: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  margin-bottom: 24px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+
+  .page-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #1f2d3d;
+    position: relative;
+    padding-left: 16px;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 22px;
+      background: #409eff;
+      border-radius: 4px;
+    }
+  }
+
+  .page-time {
+    color: #606266;
+    font-size: 14px;
+  }
+}
+</style>

src/views/productManagement/productionSummary/components/DeliveryStatusTable.vue

@@ -38,6 +38,18 @@
             style="height: 32px; padding: 0 30px; line-height: 30px"
             >查询</el-button
           >
+
+          <el-button
+            type="text"
+            icon="el-icon-download"
+            @click="handleExport"
+            style="
+              padding: 0;
+              font-size: 16px;
+              color: #909399;
+              margin-left: 8px;
+            "
+          />
         </div>
       </div>
     </div>
@@ -142,6 +154,7 @@
 <script>
 import { GetDataByName, GetDataByNames } from "@/api/common";
 import Pagination from "@/components/Pagination";
+import * as XLSX from "xlsx";
 
 export default {
   name: "DeliveryStatusTable",
@@ -249,6 +262,101 @@ export default {
         this.loading = false;
       }
     },
+    // 获取格式化的日期时间
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
+    },
+    // 导出功能
+    async handleExport() {
+      try {
+        let excelData = [];
+        const params = {
+          name: "getContractDeliveryStatus",
+          returntype: "Map",
+          parammaps: {},
+        };
+
+        const response = await GetDataByName(params);
+        if (response && response.data) {
+          excelData = response.data.list || [];
+        }
+
+        if (excelData.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        // 定义表头
+        const headers = [
+          "序号",
+          "发货状态",
+          "客户名称",
+          "合同编号",
+          "货品名称",
+          "订单量",
+          "发货量",
+          "发货单号",
+          "发货时间",
+        ];
+
+        // 格式化数据
+        const rows = excelData.map((item, index) => [
+          index + 1,
+          item.deliveryStatusName || "",
+          item.customerName || "",
+          item.contractNo || "",
+          item.productName || "",
+          item.orderQuantity || 0,
+          item.shippedQuantity || 0,
+          item.deliveryNo || "",
+          item.deliveryTime || "-",
+        ]);
+
+        // 创建工作簿
+        const wb = XLSX.utils.book_new();
+
+        // 组合表头和数据
+        const wsData = [headers, ...rows];
+
+        // 创建工作表
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        // 设置列宽
+        const colWidths = [
+          { wch: 8 }, // 序号
+          { wch: 12 }, // 发货状态
+          { wch: 20 }, // 客户名称
+          { wch: 15 }, // 合同编号
+          { wch: 30 }, // 货品名称
+          { wch: 10 }, // 订单量
+          { wch: 10 }, // 发货量
+          { wch: 15 }, // 发货单号
+          { wch: 20 }, // 发货时间
+        ];
+        ws["!cols"] = colWidths;
+
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, "发货状态");
+
+        // 生成文件名
+        const fileName = `发货状态_${this.getFormattedDateTime()}.xlsx`;
+
+        // 导出文件
+        XLSX.writeFile(wb, fileName);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
   },
 };
 </script>

src/views/productManagement/productionSummary/components/OrderProductionTable.vue

@@ -8,6 +8,17 @@
       <div class="right">
         <div class="filter-group">
           <slot name="query-buttons"></slot>
+          <el-button
+            type="text"
+            icon="el-icon-download"
+            @click="handleExport"
+            style="
+              padding: 0;
+              font-size: 16px;
+              color: #909399;
+              margin-left: 8px;
+            "
+          />
         </div>
       </div>
     </div>
@@ -74,7 +85,7 @@
                   (
                     (scope.row.installedQuantity / scope.row.totalQuantity) *
                     100
-                  ).toFixed(2)
+                  ).toFixed(0)
                 )
               "
               @mouseleave="hideTooltip"
@@ -86,10 +97,13 @@
                       class="progress-inner"
                       :style="{
                         width:
-                          Math.round(
-                            (scope.row.installedQuantity /
-                              scope.row.totalQuantity) *
-                              100
+                          Math.min(
+                            Math.round(
+                              (scope.row.installedQuantity /
+                                scope.row.totalQuantity) *
+                                100
+                            ),
+                            100
                           ) + '%',
                         backgroundColor: getProgressColor(
                           scope.row.orderStatus
@@ -194,6 +208,7 @@
 
 <script>
 import { GetDataByName, GetDataByNames } from "@/api/common";
+import * as XLSX from "xlsx";
 
 export default {
   name: "OrderProductionTable",
@@ -330,6 +345,115 @@ export default {
         this.tooltip = null;
       }
     },
+    // 获取格式化的日期时间
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
+    },
+    // 导出功能
+    async handleExport() {
+      try {
+        if (this.localTableData.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        // 定义表头
+        const headers = [
+          "序号",
+          "订单编号",
+          "货品名称",
+          "工序",
+          "单据状态",
+          "进度",
+          "计划量",
+          "已安装数量",
+          "未安装数量",
+          "昨日完成量",
+          "今日完成量",
+          "完成率",
+          "生产人员",
+          "距离完成时间还剩",
+        ];
+
+        // 格式化数据
+        const rows = this.localTableData.map((item, index) => [
+          index + 1,
+          item.orderCode || "",
+          item.goodsName || "",
+          item.process || "",
+          item.orderStatus || "",
+          `${((item.installedQuantity / item.totalQuantity) * 100).toFixed(
+            2
+          )}%`,
+          item.totalQuantity || 0,
+          item.installedQuantity || 0,
+          item.uninstalledQuantity || 0,
+          item.yesterdayQuantity || 0,
+          item.todayQuantity || 0,
+          `${((item.installedQuantity / item.totalQuantity) * 100).toFixed(
+            2
+          )}%`,
+          item.producer || "",
+          this.formatRemainingTime(item),
+        ]);
+
+        // 创建工作簿
+        const wb = XLSX.utils.book_new();
+
+        // 组合表头和数据
+        const wsData = [headers, ...rows];
+
+        // 创建工作表
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        // 设置列宽
+        const colWidths = [
+          { wch: 8 }, // 序号
+          { wch: 15 }, // 订单编号
+          { wch: 30 }, // 货品名称
+          { wch: 15 }, // 工序
+          { wch: 12 }, // 单据状态
+          { wch: 10 }, // 进度
+          { wch: 10 }, // 计划量
+          { wch: 12 }, // 已安装数量
+          { wch: 12 }, // 未安装数量
+          { wch: 12 }, // 昨日完成量
+          { wch: 12 }, // 今日完成量
+          { wch: 10 }, // 完成率
+          { wch: 15 }, // 生产人员
+          { wch: 20 }, // 距离完成时间还剩
+        ];
+        ws["!cols"] = colWidths;
+
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, "生产概况(按订单)");
+
+        // 生成文件名
+        const fileName = `生产概况(按订单)_${this.getFormattedDateTime()}.xlsx`;
+
+        // 导出文件
+        XLSX.writeFile(wb, fileName);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
+    // 格式化剩余时间
+    formatRemainingTime(row) {
+      if (!row.remainingTime) return "";
+      return row.remainingTime >= 0
+        ? `${row.remainingTime}天`
+        : `超期${Math.abs(row.remainingTime)}天`;
+    },
   },
   beforeDestroy() {
     // 组件销毁时清理所有相关资源

src/views/productManagement/productionSummary/components/ProductProductionTable.vue

@@ -8,6 +8,17 @@
       <div class="right">
         <div class="filter-group">
           <slot name="query-buttons"></slot>
+          <el-button
+            type="text"
+            icon="el-icon-download"
+            @click="handleExport"
+            style="
+              padding: 0;
+              font-size: 16px;
+              color: #909399;
+              margin-left: 8px;
+            "
+          />
         </div>
       </div>
     </div>
@@ -69,7 +80,7 @@
                   (
                     (scope.row.installedQuantity / scope.row.totalQuantity) *
                     100
-                  ).toFixed(2)
+                  ).toFixed(0)
                 )
               "
               @mouseleave="hideTooltip"
@@ -81,10 +92,13 @@
                       class="progress-inner"
                       :style="{
                         width:
-                          Math.round(
-                            (scope.row.installedQuantity /
-                              scope.row.totalQuantity) *
-                              100
+                          Math.min(
+                            Math.round(
+                              (scope.row.installedQuantity /
+                                scope.row.totalQuantity) *
+                                100
+                            ),
+                            100
                           ) + '%',
                         backgroundColor: getProgressColor(
                           scope.row.orderStatus
@@ -145,6 +159,7 @@
 
 <script>
 import { GetDataByName, GetDataByNames } from "@/api/common";
+import * as XLSX from "xlsx";
 
 export default {
   name: "ProductProductionTable",
@@ -281,6 +296,99 @@ export default {
         this.tooltip = null;
       }
     },
+    // 获取格式化的日期时间
+    getFormattedDateTime() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}${hours}${minutes}${seconds}`;
+    },
+    // 导出功能
+    async handleExport() {
+      try {
+        if (this.localTableData.length === 0) {
+          this.$message.warning("暂无数据可导出");
+          return;
+        }
+
+        // 定义表头
+        const headers = [
+          "序号",
+          "货品名称",
+          "货品型号",
+          "货品状态",
+          "进度",
+          "计划量",
+          "已完成量",
+          "未完成量",
+          "昨日完成量",
+          "今日完成量",
+          "完成率",
+        ];
+
+        // 格式化数据
+        const rows = this.localTableData.map((item, index) => [
+          index + 1,
+          item.goodsName || "",
+          item.model || "",
+          item.orderStatus || "",
+          `${((item.installedQuantity / item.totalQuantity) * 100).toFixed(
+            2
+          )}%`,
+          item.totalQuantity || 0,
+          item.installedQuantity || 0,
+          item.uninstalledQuantity || 0,
+          item.yesterdayQuantity || 0,
+          item.todayQuantity || 0,
+          `${((item.installedQuantity / item.totalQuantity) * 100).toFixed(
+            1
+          )}%`,
+        ]);
+
+        // 创建工作簿
+        const wb = XLSX.utils.book_new();
+
+        // 组合表头和数据
+        const wsData = [headers, ...rows];
+
+        // 创建工作表
+        const ws = XLSX.utils.aoa_to_sheet(wsData);
+
+        // 设置列宽
+        const colWidths = [
+          { wch: 8 }, // 序号
+          { wch: 30 }, // 货品名称
+          { wch: 15 }, // 货品型号
+          { wch: 12 }, // 货品状态
+          { wch: 10 }, // 进度
+          { wch: 10 }, // 计划量
+          { wch: 12 }, // 已完成量
+          { wch: 12 }, // 未完成量
+          { wch: 12 }, // 昨日完成量
+          { wch: 12 }, // 今日完成量
+          { wch: 10 }, // 完成率
+        ];
+        ws["!cols"] = colWidths;
+
+        // 添加工作表到工作簿
+        XLSX.utils.book_append_sheet(wb, ws, "生产概况(按货品)");
+
+        // 生成文件名
+        const fileName = `生产概况(按货品)_${this.getFormattedDateTime()}.xlsx`;
+
+        // 导出文件
+        XLSX.writeFile(wb, fileName);
+
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败");
+      }
+    },
   },
   beforeDestroy() {
     // 组件销毁时清理所有相关资源

src/views/productManagement/productionSummary/components/StatisticsPanel.vue

@@ -19,32 +19,67 @@
 
 <script>
 import CountTo from "vue-count-to";
+import { GetDataByNames } from "@/api/common";
 
 export default {
   name: "StatisticsPanel",
   components: {
     CountTo,
   },
-  props: {
-    statisticsData: {
-      type: Array,
-      default: () => [],
-    },
-  },
   data() {
     return {
-      // 示例数据作为默认值
-      defaultData: [],
+      statisticsData: [
+        { icon: "order-total-count", text: "未开始", value: 0 },
+        { icon: "order-produced", text: "进行中", value: 0 },
+
+        { icon: "order-total", text: "已完成", value: 0 },
+        { icon: "order-uncompleted", text: "已超期", value: 0 },
+        { icon: "order-producing", text: "未发货", value: 0 },
+        { icon: "order-completed", text: "部分发货", value: 0 },
+        { icon: "order-unproduced", text: "已发货待服务", value: 0 },
+      ],
     };
   },
-  created() {},
+  created() {
+    // 初始化时获取数据
+    this.initData();
+  },
   beforeDestroy() {
     // 组件销毁前清除定时器
     if (this.refreshTimer) {
       clearInterval(this.refreshTimer);
     }
   },
-  methods: {},
+  methods: {
+    async initData() {
+      const send_select_list = [
+        {
+          name: "getStatisticsPanelNumsOfProduction", // 注意：这里需要根据实际的后端接口名称调整
+          offset: 0,
+          pagecount: 0,
+          parammaps: {},
+        },
+      ];
+      try {
+        const response = await GetDataByNames(send_select_list);
+        const backendData =
+          response.data.getStatisticsPanelNumsOfProduction.list || [];
+
+        // 更新固定面板的数值
+        backendData.forEach((item) => {
+          const target = this.statisticsData.find(
+            (stat) => stat.icon === item.icon
+          );
+          if (target) {
+            target.value = item.value;
+          }
+        });
+      } catch (error) {
+        console.error("获取数据失败:", error);
+        throw error;
+      }
+    },
+  },
 };
 </script>
 

src/views/systemManagement/role/index.vue

@@ -285,20 +285,34 @@
         style="width: 600px; margin-left: 50px"
       >
         <el-form-item label="菜单" prop="menuname">
-          <tree-select
-            :disabled="disabled"
-            :height="280"
-            :width="200"
-            size="small"
-            multiple
+          <div class="menu-header">
+            <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand"
+              >展开/折叠</el-checkbox
+            >
+            <el-checkbox
+              v-model="menuNodeAll"
+              @change="handleCheckedTreeNodeAll"
+              >全选/全不选</el-checkbox
+            >
+            <el-checkbox
+              v-model="menuCheckStrictly"
+              @change="handleCheckedTreeConnect"
+              >父子联动</el-checkbox
+            >
+          </div>
+          <el-tree
+            class="tree-border"
             :data="parentMenu"
-            :default-props="defaultProps"
-            collapse-tags
-            check-strictly
-            :node-key="nodeKey"
-            :checked-keys="defaultCheckedKeys"
-            @popoverHide="popoverHide"
-          />
+            show-checkbox
+            ref="menuTree"
+            node-key="id"
+            :check-strictly="!menuCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="defaultProps"
+            :default-checked-keys="defaultCheckedKeys"
+            :expand-on-click-node="false"
+            @check="handleTreeCheck"
+          ></el-tree>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -308,7 +322,7 @@
         <el-button
           @click="
             dialogMenuVisible = false;
-            get_table_data();
+            close_update_menu_dialog();
           "
         >
           关闭
@@ -697,6 +711,13 @@ export default {
       },
       rowStyle: { maxHeight: 50 + "px", height: 45 + "px" },
       cellStyle: { padding: 0 + "px" },
+      expandAll: false,
+      checkAll: false,
+      parentChild: true,
+      selectedMenuIds: [],
+      menuExpand: false,
+      menuNodeAll: false,
+      menuCheckStrictly: true,
     };
   },
 
@@ -948,57 +969,58 @@ export default {
       });
     },
     popoverHide(checkedIds, checkedData) {
-      this.dataform.selectMenus = checkedIds;
-      this.selectedMenu = checkedIds;
+      this.selectedMenuIds = checkedIds;
+      this.defaultCheckedKeys = checkedIds;
       this.UpdateDataRelationParam.values = checkedIds;
     },
 
     handleMenu(row) {
-      console.log(row);
+      // 重置复选框状态
+      this.menuExpand = false; // 展开/折叠默认不选中
+      this.menuNodeAll = false; // 全选/全不选默认不选中
+      this.menuCheckStrictly = true; // 父子联动默认选中
+
+      // 重新获取菜单数据，强制重置树状态
+      this.getMenuList();
+
+      // 等待 DOM 更新后重置树的状态
+      this.$nextTick(() => {
+        if (this.$refs.menuTree) {
+          // 重置树的展开状态
+          const nodes = this.$refs.menuTree.store.nodesMap;
+          for (const key in nodes) {
+            nodes[key].expanded = false;
+          }
+          // 重置选中状态和父子联动
+          this.$refs.menuTree.store.defaultExpandAll = false;
+          this.$refs.menuTree.store.checkStrictly = !this.menuCheckStrictly;
+        }
+      });
 
-      // this.requestParam.name = 'getMenuByRole'
-      // this.requestParam.params = []
-      // this.requestParam.params[0] = row.id
-      // this.requestParam.pagecount = 0
-      // this.requestParam.returntype = 'list'
       this.dataform.id = row.id;
       if (row.menuIds && row.menuIds !== "") {
-        var menuArr = row.menuIds.split(",");
-
-        menuArr.forEach(function (i) {
-          i = Number(i);
-        });
-        this.selectedMenu = menuArr;
-        this.defaultCheckedKeys = menuArr;
-        this.UpdateDataRelationParam.values = menuArr;
-      } else {
-        var menuArr = [];
-        this.selectedMenu = menuArr;
+        const menuArr = row.menuIds.split(",").map((id) => Number(id));
+        this.selectedMenuIds = menuArr;
         this.defaultCheckedKeys = menuArr;
         this.UpdateDataRelationParam.values = menuArr;
       }
-      console.log(menuArr);
 
-      // this.dialogMenuVisible = true
-      // GetDataByName(this.requestParam).then(response => {
-      //   this.selectedMenu = response.data.lists.menu_id
-      //   this.defaultCheckedKeys = this.selectedMenu
-      //   this.UpdateDataRelationParam.values = this.defaultCheckedKeys
-      // })
       this.dialogMenuVisible = true;
     },
+    close_update_menu_dialog() {
+      this.get_table_data();
+      this.dialogMenuVisible = false;
+      // 清空选中数据
+      this.selectedMenuIds = [];
+      this.defaultCheckedKeys = [];
+      this.UpdateDataRelationParam.values = [];
+    },
     updateMenu() {
-      // this.isokDisable = true
-      // setTimeout(() => {
-      //   this.isokDisable = false
-      // }, 1000)
       this.UpdateDataRelationParam.name = "role_menu";
       this.UpdateDataRelationParam.dataname = "role_id";
       this.UpdateDataRelationParam.datavalue = this.dataform.id;
       this.UpdateDataRelationParam.valuename = "menu_id";
-      this.UpdateDataRelationParam.values = this.selectedMenu;
-
-      console.log("this.UpdateDataRelationParam", this.UpdateDataRelationParam);
+      this.UpdateDataRelationParam.values = this.selectedMenuIds;
 
       UpdateDataRelation(this.UpdateDataRelationParam).then(() => {
         this.dialogMenuVisible = false;
@@ -1008,10 +1030,8 @@ export default {
           type: "success",
           duration: 2000,
         });
-        this.get_table_data();
+        this.close_update_menu_dialog();
       });
-
-      this.dialogMenuVisible = false;
     },
 
     get_auto_buttons() {
@@ -1890,6 +1910,71 @@ export default {
         }
       });
     },
+    handleCheckedTreeExpand(value) {
+      // 处理展开/折叠
+      if (this.$refs.menuTree) {
+        this.$nextTick(() => {
+          const nodes = this.$refs.menuTree.store.nodesMap;
+          for (const key in nodes) {
+            const node = nodes[key];
+            if (value) {
+              // 展开时，仅展开一级（level=1）和二级（level=2）的父节点
+              if (node.level <= 1) {
+                this.$refs.menuTree.store.nodesMap[key].expanded = true;
+              }
+            } else {
+              // 折叠所有节点
+              this.$refs.menuTree.store.nodesMap[key].expanded = false;
+            }
+          }
+        });
+      }
+    },
+    handleCheckedTreeNodeAll(value) {
+      // 处理全选/全不选
+      if (this.$refs.menuTree) {
+        const allMenuIds = this.getAllMenuIds(this.parentMenu);
+        if (value) {
+          // 全选
+          this.$refs.menuTree.setCheckedKeys(allMenuIds);
+          this.selectedMenuIds = allMenuIds;
+        } else {
+          // 取消全选
+          this.$refs.menuTree.setCheckedKeys([]);
+          this.selectedMenuIds = [];
+        }
+        this.defaultCheckedKeys = this.selectedMenuIds;
+        this.UpdateDataRelationParam.values = this.selectedMenuIds;
+      }
+    },
+    handleCheckedTreeConnect(value) {
+      // 处理父子联动
+      if (this.$refs.menuTree) {
+        this.$refs.menuTree.checkStrictly = !value;
+      }
+    },
+    getAllMenuIds(menus) {
+      // 获取所有菜单ID
+      let ids = [];
+      menus.forEach((menu) => {
+        ids.push(menu.id);
+        if (menu.children && menu.children.length > 0) {
+          ids = ids.concat(this.getAllMenuIds(menu.children));
+        }
+      });
+      return ids;
+    },
+    handleTreeCheck(data, checked) {
+      // 获取当前选中的节点和半选中的节点
+      const checkedNodes = this.$refs.menuTree.getCheckedNodes();
+      const halfCheckedNodes = this.$refs.menuTree.getHalfCheckedNodes();
+
+      // 合并所有选中的节点ID
+      this.selectedMenuIds = [...checkedNodes, ...halfCheckedNodes].map(
+        (node) => node.id
+      );
+      this.UpdateDataRelationParam.values = this.selectedMenuIds;
+    },
   },
 };
 </script>
@@ -1954,4 +2039,60 @@ export default {
     color: #333333;
   }
 }
+.menu-control {
+  margin-bottom: 10px;
+}
+
+.menu-header {
+  padding: 10px;
+  border-bottom: 1px solid #ebeef5;
+  background-color: #f5f7fa;
+  .el-checkbox {
+    margin-right: 20px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.menu-tree-container {
+  height: 400px;
+  overflow-y: auto;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+
+  .el-tree {
+    background: transparent;
+  }
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #ffffff none;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.menu-header {
+  border-bottom: 1px solid #dfe4ed;
+  padding: 8px;
+  background-color: #f5f7fa;
+
+  .el-checkbox {
+    margin-right: 15px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
 </style>

src/views/systemManagement/role/muban/muban.txt

@@ -0,0 +1,605 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="角色名称" prop="roleName">
+        <el-input
+          v-model="queryParams.roleName"
+          placeholder="请输入角色名称"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="权限字符" prop="roleKey">
+        <el-input
+          v-model="queryParams.roleKey"
+          placeholder="请输入权限字符"
+          clearable
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="角色状态"
+          clearable
+          style="width: 240px"
+        >
+          <el-option
+            v-for="dict in dict.type.sys_normal_disable"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间">
+        <el-date-picker
+          v-model="dateRange"
+          style="width: 240px"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['system:role:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:role:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:role:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:role:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="角色编号" prop="roleId" width="120" />
+      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
+      <el-table-column label="显示顺序" prop="roleSort" width="100" />
+      <el-table-column label="状态" align="center" width="100">
+        <template slot-scope="scope">
+          <el-switch
+            v-model="scope.row.status"
+            active-value="0"
+            inactive-value="1"
+            @change="handleStatusChange(scope.row)"
+          ></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        <template slot-scope="scope">
+          <span>{{ parseTime(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:role:edit']"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:role:remove']"
+          >删除</el-button>
+          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
+                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
+              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
+                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改角色配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item prop="roleKey">
+          <span slot="label">
+            <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+            权限字符
+          </span>
+          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+        </el-form-item>
+        <el-form-item label="角色顺序" prop="roleSort">
+          <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in dict.type.sys_normal_disable"
+              :key="dict.value"
+              :label="dict.value"
+            >{{dict.label}}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            ref="menu"
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 分配角色数据权限对话框 -->
+    <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
+      <el-form :model="form" label-width="80px">
+        <el-form-item label="角色名称">
+          <el-input v-model="form.roleName" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限字符">
+          <el-input v-model="form.roleKey" :disabled="true" />
+        </el-form-item>
+        <el-form-item label="权限范围">
+          <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
+            <el-option
+              v-for="item in dataScopeOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据权限" v-show="form.dataScope == 2">
+          <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="deptOptions"
+            show-checkbox
+            default-expand-all
+            ref="dept"
+            node-key="id"
+            :check-strictly="!form.deptCheckStrictly"
+            empty-text="加载中，请稍候"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDataScope">确 定</el-button>
+        <el-button @click="cancelDataScope">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role";
+import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu";
+
+export default {
+  name: "Role",
+  dicts: ['sys_normal_disable'],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 日期范围
+      dateRange: [],
+      // 数据范围选项
+      dataScopeOptions: [
+        {
+          value: "1",
+          label: "全部数据权限"
+        },
+        {
+          value: "2",
+          label: "自定数据权限"
+        },
+        {
+          value: "3",
+          label: "本部门数据权限"
+        },
+        {
+          value: "4",
+          label: "本部门及以下数据权限"
+        },
+        {
+          value: "5",
+          label: "仅本人数据权限"
+        }
+      ],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      deptOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        status: undefined
+      },
+      // 表单参数
+      form: {},
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: "角色名称不能为空", trigger: "blur" }
+        ],
+        roleKey: [
+          { required: true, message: "权限字符不能为空", trigger: "blur" }
+        ],
+        roleSort: [
+          { required: true, message: "角色顺序不能为空", trigger: "blur" }
+        ]
+      }
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true;
+      listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+          this.roleList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      );
+    },
+    /** 查询菜单树结构 */
+    getMenuTreeselect() {
+      menuTreeselect().then(response => {
+        this.menuOptions = response.data;
+      });
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      let checkedKeys = this.$refs.menu.getCheckedKeys();
+      // 半选中的菜单节点
+      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    // 所有部门节点数据
+    getDeptAllCheckedKeys() {
+      // 目前被选中的部门节点
+      let checkedKeys = this.$refs.dept.getCheckedKeys();
+      // 半选中的部门节点
+      let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+      return checkedKeys;
+    },
+    /** 根据角色ID查询菜单树结构 */
+    getRoleMenuTreeselect(roleId) {
+      return roleMenuTreeselect(roleId).then(response => {
+        this.menuOptions = response.menus;
+        return response;
+      });
+    },
+    /** 根据角色ID查询部门树结构 */
+    getDeptTree(roleId) {
+      return deptTreeSelect(roleId).then(response => {
+        this.deptOptions = response.depts;
+        return response;
+      });
+    },
+    // 角色状态修改
+    handleStatusChange(row) {
+      let text = row.status === "0" ? "启用" : "停用";
+      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
+        return changeRoleStatus(row.roleId, row.status);
+      }).then(() => {
+        this.$modal.msgSuccess(text + "成功");
+      }).catch(function() {
+        row.status = row.status === "0" ? "1" : "0";
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 取消按钮（数据权限）
+    cancelDataScope() {
+      this.openDataScope = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu != undefined) {
+        this.$refs.menu.setCheckedKeys([]);
+      }
+      this.menuExpand = false,
+      this.menuNodeAll = false,
+      this.deptExpand = true,
+      this.deptNodeAll = false,
+      this.form = {
+        roleId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        status: "0",
+        menuIds: [],
+        deptIds: [],
+        menuCheckStrictly: true,
+        deptCheckStrictly: true,
+        remark: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.roleId)
+      this.single = selection.length!=1
+      this.multiple = !selection.length
+    },
+    // 更多操作触发
+    handleCommand(command, row) {
+      switch (command) {
+        case "handleDataScope":
+          this.handleDataScope(row);
+          break;
+        case "handleAuthUser":
+          this.handleAuthUser(row);
+          break;
+        default:
+          break;
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type == 'menu') {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type == 'dept') {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type == 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+      } else if (type == 'dept') {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type == 'menu') {
+        this.form.menuCheckStrictly = value ? true: false;
+      } else if (type == 'dept') {
+        this.form.deptCheckStrictly = value ? true: false;
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.getMenuTreeselect();
+      this.open = true;
+      this.title = "添加角色";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const roleId = row.roleId || this.ids
+      const roleMenu = this.getRoleMenuTreeselect(roleId);
+      getRole(roleId).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.$nextTick(() => {
+          roleMenu.then(res => {
+            let checkedKeys = res.checkedKeys
+            checkedKeys.forEach((v) => {
+                this.$nextTick(()=>{
+                    this.$refs.menu.setChecked(v, true ,false);
+                })
+            })
+          });
+        });
+      });
+      this.title = "修改角色";
+    },
+    /** 选择角色权限范围触发 */
+    dataScopeSelectChange(value) {
+      if(value !== '2') {
+        this.$refs.dept.setCheckedKeys([]);
+      }
+    },
+    /** 分配数据权限操作 */
+    handleDataScope(row) {
+      this.reset();
+      const deptTreeSelect = this.getDeptTree(row.roleId);
+      getRole(row.roleId).then(response => {
+        this.form = response.data;
+        this.openDataScope = true;
+        this.$nextTick(() => {
+          deptTreeSelect.then(res => {
+            this.$refs.dept.setCheckedKeys(res.checkedKeys);
+          });
+        });
+      });
+      this.title = "分配数据权限";
+    },
+    /** 分配用户操作 */
+    handleAuthUser: function(row) {
+      const roleId = row.roleId;
+      this.$router.push("/system/role-auth/user/" + roleId);
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          if (this.form.roleId != undefined) {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            updateRole(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            this.form.menuIds = this.getMenuAllCheckedKeys();
+            addRole(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function() {
+      if (this.form.roleId != undefined) {
+        this.form.deptIds = this.getDeptAllCheckedKeys();
+        dataScope(this.form).then(response => {
+          this.$modal.msgSuccess("修改成功");
+          this.openDataScope = false;
+          this.getList();
+        });
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const roleIds = row.roleId || this.ids;
+      this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
+        return delRole(roleIds);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download('system/role/export', {
+        ...this.queryParams
+      }, `role_${new Date().getTime()}.xlsx`)
+    }
+  }
+};
+</script>