feat:工单列表增加搜索字段，和工单类型序列排序

chenyao

2026-07-07 868cf1b8fdc72de5795b524f9ed76a42836a640f

feat:工单列表增加搜索字段，和工单类型序列排序

 applications/task-work-order/src/views/orderView/orderManage/orderManage/FormDiaLog.vue

@@ -299,6 +299,7 @@
    remark: '',
    geom: '',
    recommendDeviceIds: '',
    typePinyinFirst: '',
})

const mapRef = ref(null)
@@ -686,6 +687,36 @@
    }
)

// 取汉字（或英文）首字的拼音首字母，大写。如「占」→ Z
function getFirstPinyinLetter(text) {
    const char = String(text ?? '').trim().charAt(0)
    if (!char) return ''
    // 英文/数字直接取大写
    if (/[a-zA-Z]/.test(char)) return char.toUpperCase()
    // 按拼音排序的各首字母边界字，用 zh-CN 本地化比较定位所属字母
    const boundaries = [
        ['A', '啊'], ['B', '芭'], ['C', '擦'], ['D', '搭'], ['E', '蛾'],
        ['F', '发'], ['G', '噶'], ['H', '哈'], ['J', '击'], ['K', '喀'],
        ['L', '垃'], ['M', '妈'], ['N', '拿'], ['O', '哦'], ['P', '啪'],
        ['Q', '期'], ['R', '然'], ['S', '撒'], ['T', '塌'], ['W', '挖'],
        ['X', '昔'], ['Y', '压'], ['Z', '匝'],
    ]
    for (let i = boundaries.length - 1; i >= 0; i--) {
        if (char.localeCompare(boundaries[i][1], 'zh-CN') >= 0) return boundaries[i][0]
    }
    return ''
}

// 工单类型变化时，用类型名称第一个字的拼音首字母（大写）赋值给 typePinyinFirst
watch(
    () => formData.value.workOrderType,
    value => {
        const label = getTaskTypeLabel(value, workOrderTypeXT.value)
        formData.value.typePinyinFirst = getFirstPinyinLetter(label)
    },
    { deep: true }
)

// 地图加载完毕
function mapReady() {
    dialogMode.value === 'add' && mapRef.value.flyBoundary()

 applications/task-work-order/src/views/orderView/orderManage/orderManage/index.vue

@@ -15,6 +15,16 @@
                />
            </el-form-item>

            <el-form-item label="工单编号" prop="workOrderCode">
                <el-input
                    class="gd-input gray"
                    v-model="searchParams.workOrderCode"
                    placeholder="请输入"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>

            <el-form-item label="工单类型" prop="workOrderType">
                <el-cascader
                    class="gd-cascader gray"
@@ -60,6 +70,25 @@
                />
            </el-form-item>

            <el-form-item label="需求方名称" prop="createUserName">
                <el-input
                    class="gd-input gray"
                    v-model="searchParams.createUserName"
                    placeholder="请输入"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>
            <el-form-item label="服务方名称" prop="serviceParty">
                <el-input
                    class="gd-input gray"
                    v-model="searchParams.serviceParty"
                    placeholder="请输入"
                    clearable
                    @clear="handleSearch"
                />
            </el-form-item>

            <el-form-item class="gd-search-actions">
                <el-button :icon="RefreshRight" @click="resetForm"></el-button>
                <el-button class="search-btn" :icon="Search" @click="handleSearch"></el-button>
@@ -74,11 +103,11 @@
            </div>

            <div class="gd-table-content gd-table-content-bg">
                <el-table class="gd-table" :data="list" @selection-change="handleSelectionChange">
                <el-table class="gd-table" :data="list" @selection-change="handleSelectionChange" @sort-change="handleSortChange">
                    <el-table-column type="index" width="64" label="序号" />
                    <el-table-column prop="workOrderName" show-overflow-tooltip label="工单名称" />
                    <el-table-column prop="workOrderCode" show-overflow-tooltip label="工单编号" />
                    <el-table-column prop="workOrderType" show-overflow-tooltip label="工单类型">
                    <el-table-column prop="workOrderType" show-overflow-tooltip label="工单类型" sortable="custom">
                        <template v-slot="{ row }">
                            {{ getTaskTypeLabel(row.workOrderType, workOrderTypeXT) }}
                        </template>
@@ -157,10 +186,14 @@
// 初始化查询参数
const initSearchParams = () => ({
    workOrderName: '', // 工单名称
    workOrderCode: '', // 工单编号
    workOrderType: '', // 工单类型
    workOrderStatus: '', // 工单状态
    executeStartTime: '', // 执行开始时间
    executeEndTime: '', // 执行结束时间
    createUserName: '', // 需求方名称
    serviceParty: '', // 服务方名称
    typePinyinFirst: '', // 工单类型拼音首字母（大写）
    current: 1, // 当前页
    size: 10, // 每页大小
})
@@ -196,6 +229,7 @@
            endTime: range[1],
            createUser: activeName.value === 'my' ? store.state.user.userInfo.user_id : '',
            workOrderType: searchParams?.value?.workOrderType?.join?.(','),
            typePinyinFirst: typePinyinFirst.value,
        })
        list.value = res?.data?.data?.records ?? []
        total.value = res?.data?.data?.total ?? 0
@@ -311,10 +345,47 @@
    myTotal.value = myRes?.data?.data?.total ?? 0
}

// 工单类型排序方向：asc（升序）/ desc（降序）/ ''（不排序）
const typePinyinFirst = ref('')

// 点击工单类型排序三角：上三角传 asc，下三角传 desc
function handleSortChange({ prop, order }) {
    if (prop !== 'workOrderType') return
    typePinyinFirst.value = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : ''
    searchParams.value.current = 1
    getList()
}

onMounted(() => {
    getTabTotals()
    getList()
    getDictList()
})
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.gd-search-form {
    // 搜索项较多，用栅格分两排整齐排列（4 列 × 2 行）
    display: grid;
    grid-template-columns: repeat(5, max-content);
    gap: 16px 40px;
    align-items: center;

    // 清除公共样式里的行内间距，交给 grid 的 gap 统一控制
    :deep(.el-form-item) {
        margin: 0 !important;
    }

    // 固定 label 宽度，让每一列的输入框起点对齐
    :deep(.el-form-item__label) {
        width: 84px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    // 操作按钮紧跟最后一个搜索项
    :deep(.gd-search-actions) {
        justify-self: start;
        margin-left: 30px !important;
    }
}
</style>