From 343f31dd8ea9598fecc93144ba922ed3e59a6607 Mon Sep 17 00:00:00 2001
From: xyc <3422692813@qq.com>
Date: Wed, 10 Sep 2025 11:00:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=B8=A0=E9=81=93=E6=9D=A5?=
 =?UTF-8?q?=E6=BA=90=E3=80=81=E6=89=93=E5=8D=B0=E5=B7=A5=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../company/businessChannel/api/index.js      |  52 ++
 src/views/company/businessChannel/index.vue   | 296 ++++++++
 .../tickets/Components/TicketManagerItem.vue  |   9 +-
 .../repair/tickets/Components/TicketsShow.vue | 691 ++++++++++++++----
 4 files changed, 900 insertions(+), 148 deletions(-)
 create mode 100644 src/views/company/businessChannel/api/index.js
 create mode 100644 src/views/company/businessChannel/index.vue

diff --git a/src/views/company/businessChannel/api/index.js b/src/views/company/businessChannel/api/index.js
new file mode 100644
index 0000000..ec96ea4
--- /dev/null
+++ b/src/views/company/businessChannel/api/index.js
@@ -0,0 +1,52 @@
+import request from '@/utils/request'
+
+// 查询菜单列表
+export function listBusiness(query) {
+  return request({
+    url: '/business/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询菜单（精简)列表
+export function listSimpleMenus() {
+  return request({
+    url: '/system/menu/list-all-simple',
+    method: 'get'
+  })
+}
+
+// 查询菜单详细
+export function getBusiness(id) {
+  return request({
+    url: '/business/' + id,
+    method: 'get'
+  })
+}
+
+// 新增菜单
+export function addBusiness(data) {
+  return request({
+    url: '/business/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改菜单
+export function updateBusiness(data) {
+  return request({
+    url: '/business/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除菜单
+export function delBusiness(id) {
+  return request({
+    url: '/business/delete/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/views/company/businessChannel/index.vue b/src/views/company/businessChannel/index.vue
new file mode 100644
index 0000000..c5b220a
--- /dev/null
+++ b/src/views/company/businessChannel/index.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="app-container">
+    <doc-alert title="功能权限" url="https://doc.iocoder.cn/resource-permission"/>
+    <doc-alert title="菜单路由" url="https://doc.iocoder.cn/vue2/route/"/>
+    <!-- 搜索工作栏 -->
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="菜单名称" prop="name">
+        <el-input v-model="queryParams.name" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" @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">新增
+        </el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="id" :default-expand-all="isExpandAll"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+      <el-table-column prop="name" label="名称" :show-overflow-tooltip="true" width="250"></el-table-column>
+      <el-table-column prop="type" label="类型" width="100">
+        <template v-slot="scope">
+          <span>
+            {{ scope.row.type === 0 ? '业务渠道' : scope.row.type === 1 ? '客户来源' : '未知类型' }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="100">
+        <template v-slot="scope">
+          <el-input v-model="scope.row.sort" @change="updateSort(scope.row)"></el-input>
+        </template>
+      </el-table-column>
+
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template v-slot="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
+          </el-button>
+          <el-button size="mini" v-if="scope.row.pid == 0" type="text" icon="el-icon-plus"
+                     @click="handleAdd(scope.row)">新增
+          </el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 添加或修改菜单对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="名称" prop="name">
+              <el-input v-model="form.name" placeholder="请输入名称"/>
+            </el-form-item>
+          </el-col>
+<!--          <el-col :span="12" v-if="form.pid !=  0">-->
+<!--            <el-form-item label="人员" prop="postId">-->
+<!--              <el-select multiple filterable v-model="form.userIdList" placeholder="请选择人员">-->
+<!--                <el-option v-for="item in staffList" :key="item.id" :label="item.nickname" :value="item.id"/>-->
+<!--              </el-select>-->
+<!--            </el-form-item>-->
+<!--          </el-col>-->
+        </el-row>
+      </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>
+  </div>
+</template>
+
+<script>
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import IconSelect from "@/components/IconSelect";
+
+import {getDictDatas, DICT_TYPE} from '@/utils/dict'
+import {
+  addBusiness,
+  delBusiness,
+  getBusiness,
+  listBusiness,
+  updateBusiness
+} from "@/views/company/businessChannel/api";
+import {listUser} from "@/views/inspection/staff/api/staff";
+import {getLastPathSegment} from "@/utils/ruoyi";
+
+export default {
+  name: "BusinessChannel",
+  components: {Treeselect, IconSelect},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 菜单表格树数据
+      menuList: [],
+      staffList: [],
+      // 菜单树选项
+      menuOptions: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 是否展开，默认全部折叠
+      isExpandAll: false,
+      // 重新渲染表格状态
+      refreshTable: true,
+      // 查询参数
+      queryParams: {
+        name: undefined,
+        visible: undefined,
+        systemCode: undefined
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      // 数据字典
+      menuTypeDictDatas: getDictDatas(DICT_TYPE.SYSTEM_MENU_TYPE),
+      statusDictDatas: getDictDatas("ins_business")
+    };
+  },
+  created() {
+    const servicePackageId = getLastPathSegment(this.$route.path); // 默认为最后一段
+    console.log('服务套餐', servicePackageId)
+    this.queryParams.systemCode = servicePackageId;
+    this.getList();
+    this.getStaff();
+  },
+  methods: {
+    // 选择图标
+    selected(name) {
+      this.form.icon = name;
+    },
+    /** 查询菜单列表 */
+    getList() {
+      this.loading = true;
+      listBusiness(this.queryParams).then(response => {
+        this.menuList = this.handleTree(response.data, "id", "pid");
+        this.loading = false;
+      });
+    },
+    getStaff() {
+      const params = {
+        pageNo: 1,
+        pageSize: 99999
+      }
+      listUser(params).then(response => {
+        this.staffList = response.data.records;
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children
+      };
+    },
+    /** 查询菜单下拉树结构 */
+    getTreeselect() {
+      listBusiness().then(response => {
+        this.menuOptions = [];
+        const menu = {id: 0, name: '主类目', children: []};
+        if (!Array.isArray(response.data)) {
+          console.warn("handleTree error: data 不是数组", response.data);
+          return;
+        }
+
+        if (response.data.length === 0) {
+          console.warn("handleTree warning: data 是空数组");
+          return;
+        }
+
+// data 合法，继续处理
+        debugger
+        menu.children = this.handleTree(response.data, "id", 'pid');
+        this.menuOptions.push(menu);
+
+      });
+    },
+    // 修改排序
+    updateSort(data) {
+      updateBusiness(data).then(response => {
+        this.$modal.msgSuccess("修改成功");
+        this.getList();
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        pid: 0,
+        name: undefined,
+        type: undefined,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    /** 展开/折叠操作 */
+    toggleExpandAll() {
+      this.refreshTable = false;
+      this.isExpandAll = !this.isExpandAll;
+      this.$nextTick(() => {
+        this.refreshTable = true;
+      });
+    },
+    /** 新增按钮操作 */
+    handleAdd(row) {
+      this.reset();
+      this.getTreeselect();
+      if (row != null && row.id) {
+        this.form.pid = row.id;
+        this.form.type = 1;
+        this.title = "添加客户来源";
+      } else {
+        this.form.pid = 0;
+        this.form.type = 0;
+        this.title = "添加业务渠道";
+      }
+      this.open = true;
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      this.getTreeselect();
+      getBusiness(row.id).then(response => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改";
+      });
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate(valid => {
+        this.form.systemCode = this.queryParams.systemCode;
+        if (valid) {
+          // 提交
+          if (this.form.id !== undefined) {
+            updateBusiness(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addBusiness(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$modal.confirm('是否确认删除名称为"' + row.name + '"的数据项?').then(function () {
+        return delBusiness(row.id);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      });
+    }
+  }
+};
+</script>
diff --git a/src/views/repair/tickets/Components/TicketManagerItem.vue b/src/views/repair/tickets/Components/TicketManagerItem.vue
index 27d4564..a4610b3 100644
--- a/src/views/repair/tickets/Components/TicketManagerItem.vue
+++ b/src/views/repair/tickets/Components/TicketManagerItem.vue
@@ -72,6 +72,11 @@
       <el-table-column label="手机号" align="center" prop="userMobile" width="180"/>
       <el-table-column label="经办人姓名" align="center" prop="handleName" width="180" />
       <el-table-column label="经办人电话" align="center" prop="handleMobile" width="180" />
+      <el-table-column label="工单状态" align="center" prop="ticketsStatus" width="180" >
+        <template slot-scope="scope">
+          <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="scope.row.ticketsStatus"/>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" fixed="right" align="center" width="200" v-if="userRole !== 'repair_warehouse'">
         <template slot-scope="scope">
           <!-- 都有 -->
@@ -98,9 +103,9 @@
             <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
             <el-dropdown-menu slot="dropdown">
               <!-- 权限控制 -->
-              <el-dropdown-item command="handleRemove" size="mini" type="text" icon="el-icon-remove" v-hasPermi="['repair:tkm:remove']">
+              <!-- <el-dropdown-item command="handleRemove" size="mini" type="text" icon="el-icon-remove" v-hasPermi="['repair:tkm:remove']">
                 删除
-              </el-dropdown-item>
+              </el-dropdown-item> -->
               <!-- 权限控制 -->
               <el-dropdown-item command="handleVoid" v-hasPermi="['repair:tkm:void']" size="mini" type="text" icon="el-icon-delete">
                 作废
diff --git a/src/views/repair/tickets/Components/TicketsShow.vue b/src/views/repair/tickets/Components/TicketsShow.vue
index 3cad41e..5853f3d 100644
--- a/src/views/repair/tickets/Components/TicketsShow.vue
+++ b/src/views/repair/tickets/Components/TicketsShow.vue
@@ -1,139 +1,115 @@
 <template>
   <div class="app-container">
-    <el-dialog title="单据详情" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
+    <el-dialog
+      title="单据详情"
+      :visible.sync="dialogVisible"
+      width="80%"
+      v-dialogDrag
+      append-to-body
+    >
       <el-card class="box-card">
         <!-- 卡片头 -->
         <div slot="header" class="clearfix">
-          <i class="el-icon-plus"/>
+          <i class="el-icon-plus" />
           <span>工单信息</span>
         </div>
         <!-- 卡片内容 -->
         <div>
-          <el-descriptions class="margin-top" :column="4" :size="'medium'" border style="margin-bottom: 1rem">
+          <el-descriptions
+            class="margin-top"
+            :column="4"
+            :size="'medium'"
+            border
+            style="margin-bottom: 1rem"
+          >
             <el-descriptions-item>
-              <template slot="label">
-                订单编号
-              </template>
+              <template slot="label"> 订单编号 </template>
               {{ info.ticketNo }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                维修类别
-              </template>
-              <dict-tag :type="DICT_TYPE.REPAIR_TYPE" v-model="info.repairType"/>
+              <template slot="label"> 维修类别 </template>
+              <dict-tag
+                :type="DICT_TYPE.REPAIR_TYPE"
+                v-model="info.repairType"
+              />
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                状态
-              </template>
-              <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS" v-model="info.ticketsWorkStatus"/>
+              <template slot="label"> 状态 </template>
+              <dict-tag
+                :type="DICT_TYPE.REPAIR_TICKETS_WORK_STATUS"
+                v-model="info.ticketsWorkStatus"
+              />
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                客户名称
-              </template>
+              <template slot="label"> 客户名称 </template>
               {{ info.userName }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                车牌号
-              </template>
+              <template slot="label"> 车牌号 </template>
               {{ info.carNo }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                车系
-              </template>
+              <template slot="label"> 车系 </template>
               {{ info.carBrandName }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                手机号
-              </template>
+              <template slot="label"> 手机号 </template>
               {{ info.userMobile }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                经办人姓名
-              </template>
+              <template slot="label"> 经办人姓名 </template>
               {{ info.handleName }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                经办人电话
-              </template>
+              <template slot="label"> 经办人电话 </template>
               {{ info.handleMobile }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                创建时间
-              </template>
-              {{ parseTime(info.createTime, '{y}-{m}-{d}') }}
+              <template slot="label"> 创建时间 </template>
+              {{ parseTime(info.createTime, "{y}-{m}-{d}") }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                表显里程
-              </template>
+              <template slot="label"> 表显里程 </template>
               {{ info.mileageTraveled }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                三包单位
-              </template>
+              <template slot="label"> 三包单位 </template>
               {{ info.threePackUnits }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                保险名称
-              </template>
+              <template slot="label"> 保险名称 </template>
               {{ info.insuranceName }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                管理费
-              </template>
+              <template slot="label"> 管理费 </template>
               {{ info.managerMoney }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                救援费
-              </template>
+              <template slot="label"> 救援费 </template>
               {{ info.rescueMoney }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                三包费
-              </template>
+              <template slot="label"> 三包费 </template>
               {{ info.threePackMoney }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                定损费
-              </template>
+              <template slot="label"> 定损费 </template>
               {{ info.confirmFaultMoney }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                预计完工
-              </template>
-              {{ parseTime(info.outTime, '{y}-{m}-{d}') }}
+              <template slot="label"> 预计完工 </template>
+              {{ parseTime(info.outTime, "{y}-{m}-{d}") }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                合计金额
-              </template>
+              <template slot="label"> 合计金额 </template>
               {{ info.totalPrice }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                最近保养日期
-              </template>
-              {{ parseTime(info.maintenanceDate, '{y}-{m}-{d}') }}
+              <template slot="label"> 最近保养日期 </template>
+              {{ parseTime(info.maintenanceDate, "{y}-{m}-{d}") }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                最近保养里程
-              </template>
+              <template slot="label"> 最近保养里程 </template>
               {{ info.maintenanceMileage }}
             </el-descriptions-item>
             <!--            <el-descriptions-item>-->
@@ -155,9 +131,7 @@
             <!--              <dict-tag :type="DICT_TYPE.REPAIR_PART_STATUS" v-model="info.partStatus"/>-->
             <!--            </el-descriptions-item>-->
             <el-descriptions-item>
-              <template slot="label">
-                服务顾问
-              </template>
+              <template slot="label"> 服务顾问 </template>
               {{ info.adviserName }}
             </el-descriptions-item>
             <!--            <el-descriptions-item>-->
@@ -167,15 +141,14 @@
             <!--              {{ info.corpId }}-->
             <!--            </el-descriptions-item>-->
             <el-descriptions-item>
-              <template slot="label">
-                工单状态
-              </template>
-              <dict-tag :type="DICT_TYPE.REPAIR_TICKETS_STATUS" v-model="info.ticketsStatus"/>
+              <template slot="label"> 工单状态 </template>
+              <dict-tag
+                :type="DICT_TYPE.REPAIR_TICKETS_STATUS"
+                v-model="info.ticketsStatus"
+              />
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                备注
-              </template>
+              <template slot="label"> 备注 </template>
               {{ info.remark }}
             </el-descriptions-item>
           </el-descriptions>
@@ -184,85 +157,89 @@
       <el-card class="box-card" v-if="projects && projects.length > 0">
         <!-- 卡片头 -->
         <div slot="header" class="clearfix">
-          <i class="el-icon-plus"/>
+          <i class="el-icon-plus" />
           <span>项目信息</span>
         </div>
         <!-- 卡片内容 -->
         <div>
-          <TicketItemShow :list="projects" list-type="project"/>
+          <TicketItemShow :list="projects" list-type="project" />
         </div>
       </el-card>
       <el-card class="box-card" v-if="wares && wares.length > 0">
         <!-- 卡片头 -->
         <div slot="header" class="clearfix">
-          <i class="el-icon-plus"/>
+          <i class="el-icon-plus" />
           <span>材料信息</span>
-          <el-switch v-if="userRole === 'service_advisor'" style="float: right; padding: 3px 0"
-                     v-model="info.partShow"
-                     active-text="客户可见"
-                     inactive-text="客户不可见"
-                     active-value="1"
-                     inactive-value="0"
-                     @change="changeShow"
+          <el-switch
+            v-if="userRole === 'service_advisor'"
+            style="float: right; padding: 3px 0"
+            v-model="info.partShow"
+            active-text="客户可见"
+            inactive-text="客户不可见"
+            active-value="1"
+            inactive-value="0"
+            @change="changeShow"
           >
           </el-switch>
         </div>
         <!-- 卡片内容 -->
         <div>
-          <TicketItemShow :list="wares" list-type="ware"/>
+          <TicketItemShow :list="wares" list-type="ware" />
         </div>
       </el-card>
       <el-card class="box-card" v-if="others && others.length > 0">
         <!-- 卡片头 -->
         <div slot="header" class="clearfix">
-          <i class="el-icon-plus"/>
+          <i class="el-icon-plus" />
           <span>附加信息</span>
         </div>
         <!-- 卡片内容 -->
         <div>
-          <TicketItemShow :list="others" list-type="other"/>
+          <TicketItemShow :list="others" list-type="other" />
         </div>
       </el-card>
 
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <i class="el-icon-plus"/>
+          <i class="el-icon-plus" />
           <span>合计</span>
         </div>
         <div>
-          <el-descriptions class="margin-top" :column="3" :size="'medium'" border style="margin-bottom: 1rem">
+          <el-descriptions
+            class="margin-top"
+            :column="3"
+            :size="'medium'"
+            border
+            style="margin-bottom: 1rem"
+          >
             <el-descriptions-item>
-              <template slot="label">
-                总数量
-              </template>
+              <template slot="label"> 总数量 </template>
               {{ totalCount }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                成本
-              </template>
+              <template slot="label"> 成本 </template>
               {{ otherInfo.cost }}
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                总金额
-              </template>
+              <template slot="label"> 总金额 </template>
               {{ totalMoney }}
             </el-descriptions-item>
           </el-descriptions>
         </div>
         <div v-hasPermi="['repair:tick:profit']">
-          <el-descriptions class="margin-top" :column="2" :size="'medium'" border style="margin-bottom: 1rem">
+          <el-descriptions
+            class="margin-top"
+            :column="2"
+            :size="'medium'"
+            border
+            style="margin-bottom: 1rem"
+          >
             <el-descriptions-item>
-              <template slot="label">
-                含工时项目毛利率
-              </template>
+              <template slot="label"> 含工时项目毛利率 </template>
               {{ otherInfo.profitRate * 100 }}%
             </el-descriptions-item>
             <el-descriptions-item>
-              <template slot="label">
-                不含工时项目的毛利率
-              </template>
+              <template slot="label"> 不含工时项目的毛利率 </template>
               {{ otherInfo.profitRateNo * 100 }}%
             </el-descriptions-item>
           </el-descriptions>
@@ -272,15 +249,412 @@
       <el-card class="box-card" v-hasPermi="['repair:tick:profit']">
         <!-- 卡片头 -->
         <div slot="header" class="clearfix">
-          <i class="el-icon-plus"/>
+          <i class="el-icon-plus" />
           <span>工种</span>
         </div>
         <!-- 卡片内容 -->
         <div>
-          <TicketsJobType :list="otherInfo.groupByJobType" list-type="other"/>
+          <TicketsJobType :list="otherInfo.groupByJobType" list-type="other" />
         </div>
       </el-card>
       <div slot="footer" class="dialog-footer">
+        <PrintButton
+          ref="printButton"
+          print-title="工单详情"
+          @click="handlePrint"
+          style="float: left"
+        >
+          <template #printContent>
+            <div class="print-content">
+              <h1 style="text-align: center">工单详情</h1>
+              <h2>工单信息</h2>
+              <table
+                class="print-table"
+                border="1"
+                cellspacing="0"
+                cellpadding="8"
+                style="
+                  width: 100%;
+                  border-collapse: collapse;
+                  margin-bottom: 20px;
+                "
+              >
+                <tbody>
+                  <tr>
+                    <td><strong>订单编号</strong></td>
+                    <td>{{ info.ticketNo }}</td>
+                    <td><strong>维修类别</strong></td>
+                    <td>
+                      {{ getDictDataLabel(DICT_TYPE.REPAIR_TYPE, info.repairType) }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td><strong>状态</strong></td>
+                    <td>
+                      {{
+                        getDictDataLabel(
+                          DICT_TYPE.REPAIR_TICKETS_WORK_STATUS,
+                          info.ticketsWorkStatus
+                        )
+                      }}
+                    </td>
+                    <td><strong>客户名称</strong></td>
+                    <td>{{ info.userName }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>车牌号</strong></td>
+                    <td>{{ info.carNo }}</td>
+                    <td><strong>车系</strong></td>
+                    <td>{{ info.carBrandName }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>手机号</strong></td>
+                    <td>{{ info.userMobile }}</td>
+                    <td><strong>经办人姓名</strong></td>
+                    <td>{{ info.handleName }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>经办人电话</strong></td>
+                    <td>{{ info.handleMobile }}</td>
+                    <td><strong>创建时间</strong></td>
+                    <td>{{ parseTime(info.createTime, "{y}-{m}-{d}") }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>表显里程</strong></td>
+                    <td>{{ info.mileageTraveled }}</td>
+                    <td><strong>三包单位</strong></td>
+                    <td>{{ info.threePackUnits }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>保险名称</strong></td>
+                    <td>{{ info.insuranceName }}</td>
+                    <td><strong>管理费</strong></td>
+                    <td>{{ info.managerMoney }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>救援费</strong></td>
+                    <td>{{ info.rescueMoney }}</td>
+                    <td><strong>三包费</strong></td>
+                    <td>{{ info.threePackMoney }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>定损费</strong></td>
+                    <td>{{ info.confirmFaultMoney }}</td>
+                    <td><strong>预计完工</strong></td>
+                    <td>{{ parseTime(info.outTime, "{y}-{m}-{d}") }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>合计金额</strong></td>
+                    <td>{{ info.totalPrice }}</td>
+                    <td><strong>最近保养日期</strong></td>
+                    <td>
+                      {{ parseTime(info.maintenanceDate, "{y}-{m}-{d}") }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td><strong>最近保养里程</strong></td>
+                    <td>{{ info.maintenanceMileage }}</td>
+                    <td><strong>服务顾问</strong></td>
+                    <td>{{ info.adviserName }}</td>
+                  </tr>
+                  <tr>
+                    <td><strong>工单状态</strong></td>
+                    <td>
+                      {{
+                        getDictDataLabel(
+                          DICT_TYPE.REPAIR_TICKETS_STATUS,
+                          info.ticketsStatus
+                        )
+                      }}
+                    </td>
+                    <td><strong>备注</strong></td>
+                    <td>{{ info.remark }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div v-if="projects && projects.length > 0">
+                <h2>项目信息</h2>
+                <table
+                  class="print-table"
+                  border="1"
+                  cellspacing="0"
+                  cellpadding="8"
+                  style="
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin-bottom: 20px;
+                  "
+                >
+                  <thead>
+                    <tr>
+                      <th>序号</th>
+                      <th>名称</th>
+                      <th>规格</th>
+                      <th>编码</th>
+                      <th>单位</th>
+                      <th>数量</th>
+                      <th>单价</th>
+                      <th>折扣</th>
+                      <th v-if="checkPermi(['repair:tick:profit'])">毛利</th>
+                      <th v-if="checkPermi(['repair:tick:profit'])">毛利率</th>
+                      <th>金额</th>
+                      <th>施工人员</th>
+                      <th>服务顾问</th>
+                      <th>备注</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(item, index) in projects" :key="item.id">
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ item.project?.name }}</td>
+                      <td>{{ item.project?.model }}</td>
+                      <td>{{ item.project?.code }}</td>
+                      <td>
+                        {{
+                          getDictDataLabel(
+                            DICT_TYPE.REPAIR_UNIT,
+                            item.project?.unit
+                          )
+                        }}
+                      </td>
+                      <td>{{ item.itemCount }}</td>
+                      <td>{{ item.itemPrice }}</td>
+                      <td>{{ item.itemDiscount }}</td>
+                      <td v-if="checkPermi(['repair:tick:profit'])">
+                        {{ item.itemProfit }}
+                      </td>
+                      <td v-if="checkPermi(['repair:tick:profit'])">
+                        {{
+                          item.itemProfitRate
+                            ? (item.itemProfitRate * 100).toFixed(2) + "%"
+                            : ""
+                        }}
+                      </td>
+                      <td>{{ item.itemMoney }}</td>
+                      <td>{{ item.repairNames }}</td>
+                      <td>{{ item.saleName }}</td>
+                      <td>{{ item.remark }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div v-if="wares && wares.length > 0">
+                <h2>材料信息</h2>
+                <table
+                  class="print-table"
+                  border="1"
+                  cellspacing="0"
+                  cellpadding="8"
+                  style="
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin-bottom: 20px;
+                  "
+                >
+                  <thead>
+                    <tr>
+                      <th>序号</th>
+                      <th>名称</th>
+                      <th>规格</th>
+                      <th>编码</th>
+                      <th>单位</th>
+                      <th>数量</th>
+                      <th>单价</th>
+                      <th>折扣</th>
+                      <th v-if="checkPermi(['repair:tick:profit'])">毛利</th>
+                      <th v-if="checkPermi(['repair:tick:profit'])">毛利率</th>
+                      <th>金额</th>
+                      <th>施工人员</th>
+                      <th>服务顾问</th>
+                      <th>备注</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(item, index) in wares" :key="item.id">
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ item.ware?.name }}</td>
+                      <td>{{ item.ware?.model }}</td>
+                      <td>{{ item.ware?.code }}</td>
+                      <td>
+                        {{
+                          getDictDataLabel(DICT_TYPE.REPAIR_UNIT, item.ware?.unit)
+                        }}
+                      </td>
+                      <td>{{ item.itemCount }}</td>
+                      <td>{{ item.itemPrice }}</td>
+                      <td>{{ item.itemDiscount }}</td>
+                      <td v-if="checkPermi(['repair:tick:profit'])">
+                        {{ item.itemProfit }}
+                      </td>
+                      <td v-if="checkPermi(['repair:tick:profit'])">
+                        {{
+                          item.itemProfitRate
+                            ? (item.itemProfitRate * 100).toFixed(2) + "%"
+                            : ""
+                        }}
+                      </td>
+                      <td>{{ item.itemMoney }}</td>
+                      <td>{{ item.repairNames }}</td>
+                      <td>{{ item.saleName }}</td>
+                      <td>{{ item.remark }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div v-if="others && others.length > 0">
+                <h2>附加信息</h2>
+                <table
+                  class="print-table"
+                  border="1"
+                  cellspacing="0"
+                  cellpadding="8"
+                  style="
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin-bottom: 20px;
+                  "
+                >
+                  <thead>
+                    <tr>
+                      <th>序号</th>
+                      <th>名称</th>
+                      <th>规格</th>
+                      <th>编码</th>
+                      <th>单位</th>
+                      <th>数量</th>
+                      <th>单价</th>
+                      <th>折扣</th>
+                      <th v-if="checkPermi(['repair:tick:profit'])">毛利</th>
+                      <th v-if="checkPermi(['repair:tick:profit'])">毛利率</th>
+                      <th>金额</th>
+                      <th>施工人员</th>
+                      <th>服务顾问</th>
+                      <th>备注</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(item, index) in others" :key="item.id">
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ item.other?.name }}</td>
+                      <td>{{ item.other?.model }}</td>
+                      <td>{{ item.other?.code }}</td>
+                      <td>
+                        {{
+                          getDictDataLabel(DICT_TYPE.REPAIR_UNIT, item.other?.unit)
+                        }}
+                      </td>
+                      <td>{{ item.itemCount }}</td>
+                      <td>{{ item.itemPrice }}</td>
+                      <td>{{ item.itemDiscount }}</td>
+                      <td v-if="checkPermi(['repair:tick:profit'])">
+                        {{ item.itemProfit }}
+                      </td>
+                      <td v-if="checkPermi(['repair:tick:profit'])">
+                        {{
+                          item.itemProfitRate
+                            ? (item.itemProfitRate * 100).toFixed(2) + "%"
+                            : ""
+                        }}
+                      </td>
+                      <td>{{ item.itemMoney }}</td>
+                      <td>{{ item.repairNames }}</td>
+                      <td>{{ item.saleName }}</td>
+                      <td>{{ item.remark }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <h2>合计</h2>
+              <table
+                class="print-table"
+                border="1"
+                cellspacing="0"
+                cellpadding="8"
+                style="
+                  width: 100%;
+                  border-collapse: collapse;
+                  margin-bottom: 20px;
+                "
+              >
+                <tbody>
+                  <tr>
+                    <td><strong>总数量</strong></td>
+                    <td>{{ totalCount }}</td>
+                    <td><strong>成本</strong></td>
+                    <td>{{ otherInfo.cost }}</td>
+                    <td><strong>总金额</strong></td>
+                    <td>{{ totalMoney }}</td>
+                  </tr>
+                </tbody>
+              </table>
+              <div v-if="checkPermi(['repair:tick:profit'])">
+                <table
+                  class="print-table"
+                  border="1"
+                  cellspacing="0"
+                  cellpadding="8"
+                  style="
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin-bottom: 20px;
+                  "
+                >
+                  <tbody>
+                    <tr>
+                      <td><strong>含工时项目毛利率</strong></td>
+                      <td>{{ otherInfo.profitRate * 100 }}%</td>
+                      <td><strong>不含工时项目的毛利率</strong></td>
+                      <td>{{ otherInfo.profitRateNo * 100 }}%</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <h2>工种</h2>
+                <table
+                  class="print-table"
+                  border="1"
+                  cellspacing="0"
+                  cellpadding="8"
+                  style="
+                    width: 100%;
+                    border-collapse: collapse;
+                    margin-bottom: 20px;
+                  "
+                  v-if="
+                    otherInfo.groupByJobType &&
+                    otherInfo.groupByJobType.length > 0
+                  "
+                >
+                  <thead>
+                    <tr>
+                      <th>工种</th>
+                      <th>成本</th>
+                      <th>售价</th>
+                      <th>毛利</th>
+                      <th>含工时毛利率</th>
+                      <th>不含工时毛利率</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr
+                      v-for="(item, index) in otherInfo.groupByJobType"
+                      :key="index"
+                    >
+                      <td>{{ item.jobTypeName }}</td>
+                      <td>{{ item.cost }}</td>
+                      <td>{{ item.money }}</td>
+                      <td>{{ item.profit }}</td>
+                      <td>{{ (item.profitRateWithWork * 100).toFixed(2) }}%</td>
+                      <td>
+                        {{ (item.profitRateWithoutWork * 100).toFixed(2) }}%
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </template>
+        </PrintButton>
+
         <el-button @click="dialogVisible = false">关闭</el-button>
       </div>
     </el-dialog>
@@ -289,15 +663,18 @@
 
 <script>
 import TicketItemShow from "@/views/repair/tickets/Components/TicketItemShow.vue";
-import {getTicketsById, updateShow} from "@/api/repair/tickets/Tickets";
+import { getTicketsById, updateShow } from "@/api/repair/tickets/Tickets";
 import TicketsJobType from "@/views/repair/tickets/Components/TicketsJobType.vue";
+import PrintButton from "@/components/PrintButton";
+import { getDictDataLabel } from "@/utils/dict";
+import { checkPermi } from "@/utils/permission";
 
 export default {
   name: "TicketsShow",
   props: {
-    userRole: String
+    userRole: String,
   },
-  components: {TicketsJobType, TicketItemShow},
+  components: { TicketsJobType, TicketItemShow, PrintButton },
   data() {
     return {
       dialogVisible: false,
@@ -308,53 +685,75 @@ export default {
       allList: [],
       totalCount: 0,
       totalMoney: 0,
-      otherInfo: {}
-    }
+      otherInfo: {},
+    };
   },
   methods: {
+    checkPermi,
     async open(row) {
-      this.reset()
-      const res = await getTicketsById(row.id)
-      this.allList = res.data.items
-      this.computed()
-      this.projects = this.allList.filter(item => item.project)
-      this.wares = this.allList.filter(item => item.ware)
-      this.others = this.allList.filter(item => item.other)
-      this.info = row
-      this.otherInfo = res.data
-      this.dialogVisible = true
+      this.reset();
+      const res = await getTicketsById(row.id);
+      this.allList = res.data.items;
+      this.computed();
+      this.projects = this.allList.filter((item) => item.project);
+      this.wares = this.allList.filter((item) => item.ware);
+      this.others = this.allList.filter((item) => item.other);
+      this.info = row;
+      this.otherInfo = res.data;
+      this.dialogVisible = true;
     },
     async changeShow() {
       try {
-        await updateShow(this.info.id, this.info.partShow)
-      } catch {
-      }
+        await updateShow(this.info.id, this.info.partShow);
+      } catch {}
     },
     reset() {
-      this.info = {}
-      this.projects = []
-      this.wares = []
-      this.others = []
-      this.allList = []
+      this.info = {};
+      this.projects = [];
+      this.wares = [];
+      this.others = [];
+      this.allList = [];
     },
     computed() {
-      this.totalCount = 0
-      this.totalMoney = 0
+      this.totalCount = 0;
+      this.totalMoney = 0;
       if (this.allList && this.allList.length > 0) {
         this.totalCount = this.allList.reduce((acc, cur) => {
-          return acc + cur.itemCount
-        }, 0)
+          return acc + cur.itemCount;
+        }, 0);
         this.totalMoney = this.allList.reduce((acc, cur) => {
-          return acc + cur.itemMoney
-        }, 0)
+          return acc + cur.itemMoney;
+        }, 0);
       }
-    }
-  }
-}
+    },
+    handlePrint() {
+      this.$refs.printButton.handlePrint();
+    },
+    getDictDataLabel,
+  },
+};
 </script>
 
 <style scoped lang="scss">
 .box-card {
   margin-bottom: 10px;
 }
+
+.print-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 15px;
+}
+
+.print-table th,
+.print-table td {
+  border: 1px solid #000;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.print-table th {
+  background-color: #f5f5f5;
+  font-weight: bold;
+}
 </style>