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

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,42 +68,43 @@
                        :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 v-if="row.status == 1">
                                <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 class="menu-custom-box">
                                <div v-if="row.status == 1">
                                    <el-button type="text" icon="el-icon-warning-outline"
                                    <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()) && row.status == 1">
                                    <!--待审核状态-->
                                    <el-button type="text" icon="el-icon-warning"
                                        @click="orderLogRecall(row.id)">撤回</el-button>
                                </div>
                                <!--已驳回-->
                                <div v-if="row.status == 2">
                                    <el-button type="text" icon="el-icon-warning"
                                        @click="rejectDetail(row.id)">驳回原因</el-button>
                                </div>
                                <!--草稿-->
                                <div v-if="row.status == 0 && userInfo.user_id == row.create_user">
                                    <el-button type="text" icon="el-icon-edit-outline"
                                        @click="handleViewDetail(row)">编辑</el-button>
                                    <el-button type="text" icon="el-icon-position"
                                        @click="userPublishPush(row.id)">发布</el-button>
                                    <el-button type="text" icon="el-icon-delete"
                                        @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>
                                </div>
                            </div>
                            <!--已驳回-->
                            <div v-if="row.status == 2">
                                <el-button type="text" icon="el-icon-warning-outline"
                                    @click="rejectDetail(row.id)">驳回原因</el-button>
                            </div>
                            <!--草稿-->
                            <div v-if="row.status == 0 && userInfo.user_id == row.create_user">
                                <el-button type="text" icon="el-icon-edit-outline"
                                    @click="handleViewDetail(row)">编辑</el-button>
                                <el-button type="text" icon="el-icon-position"
                                    @click="userPublishPush(row.id)">发布</el-button>
                                <el-button type="text" icon="el-icon-delete"
                                    @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>
                            </div>

                        </template>
                        <template #status="{ row }">
                            <el-tag :type="getStatusTagType(row.status)">{{ mapStatus(row.status) }}</el-tag>
@@ -118,14 +120,15 @@
        </el-tabs>

        <!-- 新建工单对话框 -->
        <el-dialog  v-model="dialogVisible" title="新建工单" width="70%" :close-on-click-modal="false" @close="resetForm">
           
       
        <el-dialog v-model="dialogVisible" title="新建工单" width="70%" :close-on-click-modal="false" @close="resetForm">


            <el-form :model="form" :rules="rules" ref="testform" label-width="100px">
                <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">
@@ -140,14 +143,10 @@
                <el-row :gutter="20">
                    <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>
@@ -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,12 +196,20 @@
                    </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" >
              <div class="event-title-center">{{ form.name}}</div>
        <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>

@@ -371,7 +360,7 @@

export default {
    name: 'TicketPage',
    data() {
    data () {
        return {
            activeTab: 'all',

@@ -397,7 +386,7 @@
            device_sns: [],
            ai_types: [],
            wayLineList: [],
            detailTitle:"编辑工单",
            detailTitle: "编辑工单",

            statuses: [
                { label: '草稿', value: '0' },
@@ -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 },
                ],
            },

@@ -463,7 +455,7 @@
            form: {},
            rules: {
                name: [{ required: true, message: '请输入工单名称', trigger: 'blur' },
                          { max: 100, message: '工单名称不能超过100个字', trigger: 'blur' },
                { max: 100, message: '工单名称不能超过100个字', trigger: 'blur' },
                ],
                file_id: [{ required: true, message: '需要选择航线', trigger: 'change' }],
                device_sns: [{ required: true, message: '请选择机巢', trigger: 'change' }],
@@ -481,11 +473,11 @@
            mapLoaded: false,
        }
    },
    async created() {
    async created () {
        var response = await getDictionaryByCode('SF')
        var word_order_typeResponse = await getDictionaryByCode('WORK_ORDER_TYPE' )
        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()
@@ -495,28 +487,28 @@
            value: item.id,
        }))
    },
    mounted() {
    mounted () {
        this.fetchTableData()
    },
    computed: {
        ...mapGetters(['userInfo', 'permission']),
        filteredTabs() {
        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)
        },
    },

    methods: {
        searchChange(params, done) {
        searchChange (params, done) {
            console.log('searchChange')
            this.query = params
            this.parentId = ''
@@ -524,7 +516,7 @@
            this.onLoad(this.page, params)
            done()
        },
        async onLoad(page, params = {}) {
        async onLoad (page, params = {}) {
            this.loading = true
            getList(
                null,
@@ -539,11 +531,11 @@


        },
        selectionClear() {
        selectionClear () {
            this.selectionList = []
            this.$refs.crud.toggleSelection()
        },
        async loadAMapScripts() {
        async loadAMapScripts () {
            try {
                // await loadAMap();
                // await loadAMapUI();
@@ -553,12 +545,12 @@
                this.$message.error('地图加载失败，请检查网络或API Key配置')
            }
        },
        formatCycleTime(row) {
            return row.begin_time + '-' + row.end_time + '<br/>'
                 + row.rep_rule_val
        formatCycleTime (row) {
            return `${row.begin_time} ~ <br/>
            ${row.end_time} ${row.rep_rule_val}`
        },

        async fetchTableData() {
        async fetchTableData () {
            this.loading = true
            try {
                let params = this.getQueryParam()
@@ -574,7 +566,7 @@
                })


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

        getQueryParam() {
        getQueryParam () {
            const currentTab = this.tabs.find(tab => tab.name === this.activeTab)
            if (this.filters.dateRange) {
                console.log(
@@ -626,11 +618,11 @@
            }
            return params
        },
        sizeChange(pageSize) {
        sizeChange (pageSize) {
            this.page.pageSize = pageSize
        },
        async submitForm(status) {
           
        async submitForm (status) {

            this.$refs.testform.validate(async valid => {

                if (valid) {
@@ -659,7 +651,7 @@
            })
        },
        //驳回原因显示
        async rejectDetail(id) {
        async rejectDetail (id) {
            const response = await orderLogDetails(id)
            let data = response.data.data
            this.$confirm(data.remark, '驳回原因', {
@@ -673,7 +665,7 @@
                this.detailVisible = true
            })
        },
        formatDate(date) {
        formatDate (date) {
            if (!date) return undefined
            const d = new Date(date)
            return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(
@@ -681,7 +673,7 @@
            ).padStart(2, '0')} 00:00:00`
        },

        mapStatus(status) {
        mapStatus (status) {
            const statusTextMap = {
                0: '草稿',
                1: '待审核',
@@ -691,7 +683,7 @@
            return statusTextMap[status] || '未知状态'
        },

        getStatusTagType(status) {
        getStatusTagType (status) {
            const statusMap = {
                1: 'warning',
                2: 'info',
@@ -702,19 +694,19 @@
            return statusMap[status] || 'info'
        },

        handleTabChange(tab) {
        handleTabChange (tab) {
            this.activeTab = tab.props?.name || tab.name
            this.filters.status = ''
            this.page.currentPage = 1
            this.fetchTableData()
        },

        handleSearch() {
        handleSearch () {
            this.page.currentPage = 1
            this.fetchTableData()
        },

        handleReset() {
        handleReset () {
            this.filters = {
                keyword: '',
                department: '',
@@ -726,11 +718,11 @@
            this.fetchTableData()
        },

        currentChange(currentPage) {
        currentChange (currentPage) {
            this.page.currentPage = currentPage
        },

        async updateGlobalCounts() {
        async updateGlobalCounts () {
            const counts = {
                all: 0,
                DRAFT: 0,
@@ -739,26 +731,26 @@
                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
                }
            });
            })

        },


        handleAdd() {
        handleAdd () {
            this.form = {}
            this.dialogVisible = true
            //航线列表
            this.asyncgetWaylineFileListByArea()
        },

        resetForm() {
        resetForm () {
            this.form = {
                name: '',
                type: '',
@@ -774,31 +766,31 @@
            }
        },

        formatLocation(location) {
        formatLocation (location) {
            if (!Array.isArray(location)) {
                return '未知位置'
            }
            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;
        async handleViewDetail (row) {
            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() {
        async exportData () {
            this.$confirm('是否智飞工单数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
@@ -812,66 +804,66 @@
                })
            })
        },
        hasAddBtnPermission() {
        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() {
        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() {
        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() {
        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) {
        userPublishPush (id) {
            this.$confirm('确定发布吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                let response = userPublish(id);
                this.$message.success('发布成功');
                this.fetchTableData();
                let response = userPublish(id)
                this.$message.success('发布成功')
                this.fetchTableData()

            })
        },

        //删除
        deleteOrderLog(id) {
        deleteOrderLog (id) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                let response = deleteOrderLog(id);
                this.$message.success('删除');
                this.fetchTableData();
                let response = deleteOrderLog(id)
                this.$message.success('删除')
                this.fetchTableData()

            })
        },
        refreshChange() {
        refreshChange () {
            this.fetchTableData()
        },
        //获取航线列表
        async asyncgetWaylineFileListByArea(name) {
        async asyncgetWaylineFileListByArea (name) {
            var wayLineListResponse = await getWaylineFileListByArea(this.userInfo.detail.areaCode)
            this.wayLineList = wayLineListResponse.data.data

            this.initMapLine()
        },

        initMapLine() {
        initMapLine () {
            let currentLine = this.wayLineList.find(item => item.wayline_id == this.form.file_id)

            if (!currentLine) return
@@ -913,7 +905,7 @@


        //可飞行机巢列表
        async getFlyingNestBy(waylineId) {
        async getFlyingNestBy (waylineId) {
            this.initMapLine()

            //按照航线来
@@ -926,7 +918,7 @@
        },

        //撤回
        async orderLogRecall(id) {
        async orderLogRecall (id) {
            this.$confirm('确定撤回则到草稿箱。', '是否撤回？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
@@ -936,13 +928,13 @@
                this.handleSearch()
            })
        },
        onLoad() {
        onLoad () {
            this.fetchTableData()
        },
        /**
         * 通过
         */
        async orderLogPass(id) {
        async orderLogPass (id) {
            let response = await orderLogPass(id)
            let data = response.data.data
            this.$message.success('审核通过')
@@ -951,7 +943,7 @@
        /**
         * 驳回
         */
        async orderLogReject(id) {
        async orderLogReject (id) {
            this.$prompt('', '驳回原因', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
@@ -966,7 +958,7 @@

    watch: {
        tableData: {
            handler() {
            handler () {
                // this.updateTabCounts()
            },
            deep: true,
@@ -1097,13 +1089,30 @@
    color: #666;
    line-height: 1.5;
}

.event-title-center {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    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>
`