| | |
| | | import noDataImg from '@/assets/element-img/no-data.png' |
| | | import type { DataTableColumns } from 'naive-ui' |
| | | import { computed, h, onMounted, reactive, ref, watch } from 'vue' |
| | | import { NButton, NTag, NTooltip, useMessage } from 'naive-ui' |
| | | import { NButton, NTag, NSwitch, NTooltip, useMessage } from 'naive-ui' |
| | | import dayjs from 'dayjs' |
| | | import dragIcon from '@/assets/point/union.png' |
| | | import tooltipIcon from '@/assets/element-img/tooltip.png' |
| | |
| | | const modalTitle = ref('新增评价标签') |
| | | const draggingTagId = ref<string | null>(null) |
| | | const dragOverTagId = ref<string | null>(null) |
| | | const statusUpdatingId = ref<string | null>(null) |
| | | |
| | | type TagFormRowData = Partial<TagFormValue> |
| | | |
| | |
| | | return |
| | | } |
| | | |
| | | statusUpdatingId.value = row.id |
| | | try { |
| | | const res = await updateEvaluationTagStatus({ |
| | | id: row.id, |
| | |
| | | } |
| | | catch (error) { |
| | | console.error('更新评价标签状态失败:', error) |
| | | } |
| | | finally { |
| | | statusUpdatingId.value = null |
| | | } |
| | | } |
| | | |
| | |
| | | title: () => ( |
| | | <div class="status-header flex items-center"> |
| | | <span>状态</span> |
| | | <NTooltip trigger="hover" placement="top-start" class="flex items-center"> |
| | | <NTooltip trigger="hover" placement="top-center" class="flex items-center"> |
| | | {{ |
| | | trigger: () => ( |
| | | <span |
| | |
| | | marginLeft: '8px', |
| | | }} |
| | | > |
| | | <img src={tooltipIcon} alt="提示" style={{ width: '18px', height: '18px', display: 'block' }} /> |
| | | <img src={tooltipIcon} alt="提示" style={{ width: '10px', height: '10px', display: 'block' }} /> |
| | | </span> |
| | | ), |
| | | default: () => `最多可同时启用 ${maxEnabledCount} 个标签`, |
| | |
| | | { |
| | | title: '操作', |
| | | key: 'actions', |
| | | width: 120, |
| | | width: 180, |
| | | render: row => ( |
| | | <div class="flex items-center"> |
| | | <div> |
| | |
| | | 编辑 |
| | | </NButton> |
| | | </div> |
| | | <div class="ml-12px"> |
| | | <NButton |
| | | text |
| | | <div class="ml-12px flex items-center"> |
| | | <NSwitch |
| | | v-permission="2026061534" |
| | | type="primary" |
| | | onClick={() => handleToggleStatus(row)} |
| | | value={row.status} |
| | | checkedValue={1} |
| | | uncheckedValue={0} |
| | | loading={statusUpdatingId.value === row.id} |
| | | onUpdateValue={() => handleToggleStatus(row)} |
| | | > |
| | | {Number(row.status) === 1 ? '停用' : '启用'} |
| | | </NButton> |
| | | {{ |
| | | checked: () => '启用', |
| | | unchecked: () => '停用', |
| | | }} |
| | | </NSwitch> |
| | | </div> |
| | | </div> |
| | | ), |
| | |
| | | <n-spin :show="loading"> |
| | | <div class="box"> |
| | | <div v-if="configData" class="switch-card mb-24px px-12px"> |
| | | <n-form label-placement="left" inline :show-feedback="false" require-mark-placement="left"> |
| | | <n-form |
| | | label-placement="left" |
| | | inline |
| | | :show-feedback="false" |
| | | require-mark-placement="left" |
| | | > |
| | | <div class="form-row"> |
| | | <n-form-item label="是否开启评价弹窗" required class="row-item"> |
| | | <n-radio-group v-model:value="configData.popupEnabled" name="popupEnabled" @update:value="markDirty"> |
| | | <n-radio-group |
| | | v-model:value="configData.popupEnabled" |
| | | name="popupEnabled" |
| | | @update:value="markDirty" |
| | | > |
| | | <n-space> |
| | | <n-radio :value="1"> |
| | | 是 |
| | | </n-radio> |
| | | <n-radio :value="0"> |
| | | 否 |
| | | </n-radio> |
| | | <n-radio :value="1"> 是 </n-radio> |
| | | <n-radio :value="0"> 否 </n-radio> |
| | | </n-space> |
| | | </n-radio-group> |
| | | </n-form-item> |
| | |
| | | </div> |
| | | |
| | | <div v-if="configData" class="box-inner"> |
| | | <n-tabs v-model:value="activeTab" type="line" animated class="dimension-tabs px-12px"> |
| | | <n-tab-pane v-for="item in tabOptions" :key="item.value" :name="item.value" :tab="item.label" /> |
| | | <n-tabs |
| | | v-model:value="activeTab" |
| | | type="line" |
| | | animated |
| | | class="dimension-tabs px-12px" |
| | | > |
| | | <n-tab-pane |
| | | v-for="item in tabOptions" |
| | | :key="item.value" |
| | | :name="item.value" |
| | | :tab="item.label" |
| | | /> |
| | | </n-tabs> |
| | | |
| | | <div class="mb-12px"> |
| | |
| | | <SearchPanel> |
| | | <n-gi class="n-grid-item"> |
| | | <n-form-item label="标签内容"> |
| | | <n-input v-model:value="currentInputFilter.labelContent" placeholder="请输入" clearable /> |
| | | <n-input |
| | | v-model:value="currentInputFilter.labelContent" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </n-form-item> |
| | | </n-gi> |
| | | <n-gi class="n-grid-item"> |
| | | <n-form-item label="创建人"> |
| | | <n-input v-model:value="currentInputFilter.createBy" placeholder="请输入" clearable /> |
| | | <n-input |
| | | v-model:value="currentInputFilter.createBy" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </n-form-item> |
| | | </n-gi> |
| | | <n-gi class="n-grid-item"> |
| | |
| | | <template #arrow> |
| | | <img |
| | | src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/e120f81c-9f15-4e1a-9938-22252898edf9.png" |
| | | :class="`arrow-icon ${isStatusSelectOpen ? 'arrow-icon--open' : ''}`" |
| | | style="width: 16px; height: 16px;" |
| | | :class="`arrow-icon ${ |
| | | isStatusSelectOpen ? 'arrow-icon--open' : '' |
| | | }`" |
| | | style="width: 16px; height: 16px" |
| | | alt="arrow" |
| | | > |
| | | /> |
| | | </template> |
| | | <template #empty> |
| | | <div class="flex-center"> |
| | | <img |
| | | :src="noDataImg" |
| | | style="width: 50%;" |
| | | > |
| | | <img :src="noDataImg" style="width: 50%" /> |
| | | </div> |
| | | </template> |
| | | </n-select> |
| | |
| | | </n-form-item> |
| | | </n-gi> |
| | | <template #action> |
| | | <NButton @click="handleResetSearch"> |
| | | 重置 |
| | | </NButton> |
| | | <NButton @click="handleResetSearch"> 重置 </NButton> |
| | | <NButton type="primary" @click="handleSearch"> |
| | | 查询 |
| | | </NButton> |
| | |
| | | <n-card class="robotaxi-table-card" :bordered="false"> |
| | | <template #header> |
| | | <n-flex justify="space-between"> |
| | | <NButton @click="handleOpenOperationLog"> |
| | | 操作日志 |
| | | </NButton> |
| | | <NButton @click="handleOpenOperationLog"> 操作日志 </NButton> |
| | | <div class="flex items-center justify-end"> |
| | | <NButton type="primary" secondary @click="handleAddTag"> |
| | | 新增 |
| | |
| | | > |
| | | <template #empty> |
| | | <div class="flex-center"> |
| | | <img :src="noDataImg" style="width:123px;height:125px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"> |
| | | <img |
| | | :src="noDataImg" |
| | | style="width: 123px; height: 125px" |
| | | @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }" |
| | | /> |
| | | </div> |
| | | </template> |
| | | </n-data-table> |
| | |
| | | |
| | | <div class="footer"> |
| | | <n-space justify="end"> |
| | | <NButton class="w-84px" @click="handleCancelChanges"> |
| | | 取消 |
| | | </NButton> |
| | | <NButton v-permission="2026061535" type="primary" class="w-84px" :loading="saving" @click="handleSave"> |
| | | <NButton class="w-84px" @click="handleCancelChanges"> 取消 </NButton> |
| | | <NButton |
| | | v-permission="2026061535" |
| | | type="primary" |
| | | class="w-84px" |
| | | :loading="saving" |
| | | @click="handleSave" |
| | | > |
| | | 保存 |
| | | </NButton> |
| | | </n-space> |
| | |
| | | :saving="tagModalSaving" |
| | | @save="handleSaveTagForm" |
| | | /> |
| | | <OperationLogModal v-model:show="showOperationLogModal" :business-type="59" /> |
| | | <OperationLogModal |
| | | v-model:show="showOperationLogModal" |
| | | :business-type="59" |
| | | /> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | height: calc(100vh - 76px); |
| | | width: 100%; |
| | | background: #f5f7fa; |
| | | :deep(.n-card-header) { |
| | | padding: 12px 0px !important; |
| | | } |
| | | } |
| | | |
| | | .page-body { |
| | |
| | | transform: translateX(-50%); |
| | | |
| | | &::after { |
| | | content: ''; |
| | | content: ""; |
| | | position: absolute; |
| | | top: 100%; |
| | | left: 50%; |