智飞工单列表页显示样式调整 新建工单显示样式调整

shuishen

2025-04-28 e3a8c1496c624f8cb28b68f04d36009d64c82d5e

智飞工单列表页显示样式调整
新建工单显示样式调整

 src/views/tickets/orderLog.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2025-04-15 20:02:29
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2025-04-15 21:56:14
 * @LastEditTime: 2025-04-28 11:38:16
 * @FilePath: \drone-web-manage\src\views\tickets\orderLog.vue
 * @Description: 
 * 
@@ -11,7 +11,8 @@
<template>
    <basic-container>
        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
            <el-tab-pane v-for="tab in filteredTabs" :key="tab.name" :label="`${tab.label} (${tab.count})`" :name="tab.name">
            <el-tab-pane v-for="tab in filteredTabs" :key="tab.name" :label="`${tab.label} (${tab.count})`"
                :name="tab.name">
                <div class="tab-content">
                    <!-- 查询条件筛选栏 -->
                    <div class="filter-bar">
@@ -67,26 +68,27 @@
                        :table-loading="loading" @current-change="currentChange" @refresh-change="refreshChange"
                        @on-load="onLoad" @search-change="searchChange" @size-change="sizeChange">
                        <template #menu-left>
                            <el-button v-if="hasAddBtnPermission()&&activeTab!='WAIT_AUDIT'" type="primary" icon="el-icon-plus" @click="handleAdd" >新建工单</el-button>
                            <el-button v-if="hasAddBtnPermission() && activeTab != 'WAIT_AUDIT'" type="primary"
                                icon="el-icon-plus" @click="handleAdd">新建工单</el-button>
                            <el-button type="success" plain icon="el-icon-download" @click="exportData">导出</el-button>
                        </template>

                        <template #menu="{ row }">
                            <div class="menu-custom-box">
                            <div v-if="row.status == 1">
                                <el-button v-if="hasPaddingBtnPermission()" type="text" icon="el-icon-view" @click="handleViewDetail(row)">审核</el-button>
                             
                                    <el-button v-if="hasPaddingBtnPermission()" type="text" icon="el-icon-view"
                                        @click="handleViewDetail(row)">审核</el-button>
                            </div>

                            <div v-if="userInfo.user_id == row.create_user || hasRecallPaddingBtnPermission()">
                                <div
                                    v-if="(userInfo.user_id == row.create_user || hasRecallPaddingBtnPermission()) && row.status == 1">
                                <!--待审核状态-->
                                <div v-if="row.status == 1">
                                    <el-button type="text" icon="el-icon-warning-outline"
                                    <el-button type="text" icon="el-icon-warning"
                                        @click="orderLogRecall(row.id)">撤回</el-button>
                                </div>
                            </div>
                            <!--已驳回-->
                            <div v-if="row.status == 2">
                                <el-button type="text" icon="el-icon-warning-outline"
                                    <el-button type="text" icon="el-icon-warning"
                                    @click="rejectDetail(row.id)">驳回原因</el-button>
                            </div>
                            <!--草稿-->
@@ -99,10 +101,10 @@
                                    @click="deleteOrderLog(row.id)">删除</el-button>
                            </div>
                        <div v-if="row.status == 3 || row.status == 1 || row.status == 2">
                            
                              <el-button type="text" icon="el-icon-view" @click="handleViewDetail(row)">详情</el-button>
                                    <el-button type="text" icon="el-icon-view"
                                        @click="handleViewDetail(row)">详情</el-button>
                            </div>

                            </div>
                        </template>
                        <template #status="{ row }">
                            <el-tag :type="getStatusTagType(row.status)">{{ mapStatus(row.status) }}</el-tag>
@@ -125,7 +127,8 @@
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="工单名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入工单名称"  maxlength="100" show-word-limit></el-input>
                            <el-input v-model="form.name" placeholder="请输入工单名称" maxlength="100"
                                show-word-limit></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
@@ -142,12 +145,8 @@
                        <el-form-item label="关联机巢" prop="device_sns">
                           
                            <el-select v-model="form.device_sns" placeholder="请选择机巢" multiple>
                                <el-option
                                    v-for="item in device_sns"
                                    :key="item.device_sn"
                                    :label="item.nickname" 
                                    :value="item.device_sn" 
                                />
                                <el-option v-for="item in device_sns" :key="item.device_sn" :label="item.nickname"
                                    :value="item.device_sn" />
                            </el-select>
                        </el-form-item>
                    </el-col>
@@ -164,14 +163,8 @@
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="工单内容" prop="content">
                            <el-input
                                type="textarea"
                                v-model="form.content"
                                rows="4"
                                placeholder="请输入工单内容"
                                maxlength="255"
                                show-word-limit
                            ></el-input>
                            <el-input type="textarea" v-model="form.content" rows="4" placeholder="请输入工单内容"
                                maxlength="255" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>

@@ -181,8 +174,6 @@
                                start-placeholder="开始日期" end-placeholder="结束日期" class="date-picker" />
                        </el-form-item>

                        <el-button type="danger" @click="submitForm(1)">发布</el-button>
                        <el-button type="primary" @click="submitForm(0)">存草稿</el-button>
                    </el-col>
                    <el-col :span="3">
                        <el-select v-model="form.rep_fre_type" placeholder="请选择频次">
@@ -205,11 +196,19 @@
                    </el-col>

                </el-row>

                <el-row>
                    <div class="add-box-btns">
                        <el-button type="danger" @click="submitForm(1)">发布</el-button>
                        <el-button type="primary" @click="submitForm(0)">存草稿</el-button>
                    </div>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 工单详情对话框 -->
        <el-dialog v-model="detailVisible" :title="detailTitle" width="70%" :close-on-click-modal="false" @close="resetForm" >
        <el-dialog v-model="detailVisible" :title="detailTitle" width="70%" :close-on-click-modal="false"
            @close="resetForm">
              <div class="event-title-center">{{ form.name}}</div>
            <el-form :model="form" ref="testform" label-width="100px">
                <div class="custom-steps-container">
@@ -268,12 +267,8 @@
                    <el-col :span="12">
                        <el-form-item label="关联机巢" prop="device_sns">
                            <el-select v-model="form.device_sns" placeholder="请选择机巢" multiple>
                                <el-option
                                    v-for="item in device_sns"
                                    :key="item.device_sn"
                                    :label="item.nickname" 
                                    :value="item.device_sn" 
                                />
                                <el-option v-for="item in device_sns" :key="item.device_sn" :label="item.nickname"
                                    :value="item.device_sn" />
                            </el-select>
                        </el-form-item>
                    </el-col>
@@ -290,14 +285,8 @@
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="工单内容" prop="content">
                            <el-input
                                type="textarea"
                                v-model="form.content"
                                rows="4"
                                placeholder="请输入工单内容"
                                maxlength="255"
                                show-word-limit
                            ></el-input>
                            <el-input type="textarea" v-model="form.content" rows="4" placeholder="请输入工单内容"
                                maxlength="255" show-word-limit></el-input>
                        </el-form-item>
                    </el-col>

@@ -410,9 +399,11 @@

            tableData: [],
            option: {
                indexFixed: true,

                align: 'center',
                border: true,
                stripe: true,
                menuWidth: 150,
                searchShow: true,
                searchBtnText: '搜索',
                searchMenuSpan: 6,
@@ -421,34 +412,35 @@
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                menu: true,
                cancelBtn: true,
                cancelBtnText: '取消',

                menu: true,
                menuWidth: 210,
                menuClassName: 'cur-menu',
                column: [
                    { label: '序号', prop: 'id', width: 50, ellipsis: true },
                    { label: '序号', prop: 'id', width: 72, ellipsis: true },
                    { label: '工单编号', prop: 'job_info_num', width: 100, ellipsis: true, overHidden: true },
                    { label: '工单名称', prop: 'name', width: 100, ellipsis: true, overHidden: true },
                    { label: '所属单位', prop: 'dept_name', width: 100, ellipsis: true },
                    { label: '发起时间', prop: 'create_time', width: 100, ellipsis: true },
                    { label: '发起时间', prop: 'create_time', width: 144, ellipsis: true },
                    { label: '工单内容', prop: 'content', width: 160, ellipsis: true, overHidden: true },
                    { label: '关联航线', prop: 'wayline_name', width: 100, ellipsis: true, overHidden: true },
                    { label: '关联算法', prop: 'ai_type_str', width: 100, ellipsis: true, overHidden: true },
                    { label: '关联机巢', prop: 'device_names', width: 100, ellipsis: true, overHidden: true },

                    { label: '创建人', prop: 'creator_name', width: 50, ellipsis: true, overHidden: true },
                    { label: '关联机巢', prop: 'device_names', width: 80, ellipsis: true, overHidden: true },
                    { label: '创建人', prop: 'creator_name', width: 96, ellipsis: true, overHidden: true },
                    { label: '关联机巢', prop: 'device_names', width: 112, ellipsis: true, overHidden: true },
                    {
                        label: '工单周期频次',
                        prop: '',
                        width: 108,
                        width: 140,
                        formatter: row => this.formatCycleTime(row),
                        html: true,
                        ellipsis: true, overHidden: true



                        ellipsis: true,
                        // overHidden: true
                    },
                    { label: '工单状态', prop: 'status', width: 60 },
                    { label: '工单状态', prop: 'status', width: 96 },
                ],
            },

@@ -485,7 +477,7 @@
        var response = await getDictionaryByCode('SF')
        var word_order_typeResponse = await getDictionaryByCode('WORK_ORDER_TYPE' )
        this.ai_types = response.data.data['SF']
        this.types = word_order_typeResponse.data.data['WORK_ORDER_TYPE'];
        this.types = word_order_typeResponse.data.data['WORK_ORDER_TYPE']
        //获取航线
        this.asyncgetWaylineFileListByArea()
        const response2 = await getTicketInfo()
@@ -502,16 +494,16 @@
        ...mapGetters(['userInfo', 'permission']),
        filteredTabs() {
            // rejection_and_draft 权限控制“已驳回”和“草稿”tab
            const canShowRejectAndDraft = this.permission?.rejection_and_draft === true;
            const canShowRejectAndDraft = this.permission?.rejection_and_draft === true
            return this.tabs.map(tab => {
                if (tab.name === 'DRAFT') {
                    return { ...tab, isShow: canShowRejectAndDraft };
                    return { ...tab, isShow: canShowRejectAndDraft }
                }
                if (tab.name === 'REJECTED') {
                    return { ...tab, isShow: canShowRejectAndDraft };
                    return { ...tab, isShow: canShowRejectAndDraft }
                }
                return { ...tab, isShow: true };
            }).filter(tab => tab.isShow);
                return { ...tab, isShow: true }
            }).filter(tab => tab.isShow)
        },
    },

@@ -554,8 +546,8 @@
            }
        },
        formatCycleTime(row) {
            return row.begin_time + '-' + row.end_time + '<br/>'
                 + row.rep_rule_val
            return `${row.begin_time} ~ <br/>
            ${row.end_time} ${row.rep_rule_val}`
        },

        async fetchTableData() {
@@ -574,7 +566,7 @@
                })


                console.log('权限检查:', this.permission);
                console.log('权限检查:', this.permission)
                this.page.total = total || 0
                this.updateGlobalCounts()
            } catch (error) {
@@ -739,14 +731,14 @@
                PASS: 0,

            }
            var reponse = await jobStatusNum();
            console.log("统计" + reponse.data.data);
            var reponse = await jobStatusNum()
            console.log("统计" + reponse.data.data)
            reponse.data.data.forEach(item => {
                const tab = this.tabs.find(t => t.name === item.dict_key);
                const tab = this.tabs.find(t => t.name === item.dict_key)
                if (tab) {
                    tab.count = item.num;
                    tab.count = item.num
                }
            });
            })

        },

@@ -781,21 +773,21 @@
            return `${location[0].toFixed(6)}, ${location[1].toFixed(6)}`
        },
        async handleViewDetail(row) {
             console.log("工单名称1111:");
            const response = await orderLogDetails(row.id);
            const data = response.data.data;
            console.log("工单名称1111:")
            const response = await orderLogDetails(row.id)
            const data = response.data.data

            this.form = {
                ...data,
            };
            }


            this.detailVisible = true;
            this.detailVisible = true

            // 更新机巢列表
            this.device_sns = data.device_list;
          (this.permission && (this.permission.order_log_review  || this.permission.order_log_recall))&& (data.status==1||data.status==3||data.status==2) ? this.detailTitle="工单详情":this.detailTitle="编辑工单";
          console.log("工单名称:"+this.detailTitle);
            (this.permission && (this.permission.order_log_review || this.permission.order_log_recall)) && (data.status == 1 || data.status == 3 || data.status == 2) ? this.detailTitle = "工单详情" : this.detailTitle = "编辑工单"
            console.log("工单名称:" + this.detailTitle)
        },
        //导出
        async exportData() {
@@ -814,24 +806,24 @@
        },
        hasAddBtnPermission() {
            // undefined 或 false 都返回 false，只有 true 返回 true
            console.log('this.permission.order_log_add :', this.permission.order_log_add );
            return this.permission && this.permission.order_log_add === true;
            console.log('this.permission.order_log_add :', this.permission.order_log_add)
            return this.permission && this.permission.order_log_add === true
        },
        hasPaddingBtnPermission() {
            // undefined 或 false 都返回 false，只有 true 返回 true
            console.log('权限检查:', this.permission);
            return this.permission && this.permission.order_log_review === true;
            console.log('权限检查:', this.permission)
            return this.permission && this.permission.order_log_review === true
        },
            hasRecallPaddingBtnPermission() {
            // undefined 或 false 都返回 false，只有 true 返回 true
            console.log('权限检查:', this.permission);
            return this.permission && this.permission.order_log_recall === true;
            console.log('权限检查:', this.permission)
            return this.permission && this.permission.order_log_recall === true
        },
        //驳回按钮权限
          hasRejectionBtnPermission() {
            // undefined 或 false 都返回 false，只有 true 返回 true
            console.log('权限检查:', this.permission);
            return this.permission && this.permission.rejection_btn === true;
            console.log('权限检查:', this.permission)
            return this.permission && this.permission.rejection_btn === true
        },
        //自己点发布
        userPublishPush(id) {
@@ -840,9 +832,9 @@
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                let response = userPublish(id);
                this.$message.success('发布成功');
                this.fetchTableData();
                let response = userPublish(id)
                this.$message.success('发布成功')
                this.fetchTableData()

            })
        },
@@ -854,9 +846,9 @@
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                let response = deleteOrderLog(id);
                this.$message.success('删除');
                this.fetchTableData();
                let response = deleteOrderLog(id)
                this.$message.success('删除')
                this.fetchTableData()

            })
        },
@@ -1097,6 +1089,7 @@
    color: #666;
    line-height: 1.5;
}

.event-title-center {
  text-align: center;
  font-size: 20px;
@@ -1104,6 +1097,22 @@
  margin-bottom: 12px;
  color: #333;
}

.cur-menu {
    .menu-custom-box {
        display: flex;
        justify-content: center;

        &>div {
            flex: 1;
        }
    }
}

.add-box-btns {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>
`