|
|
|
@ -4,8 +4,8 @@ |
|
|
|
<el-tabs |
|
|
|
<el-tabs |
|
|
|
v-if="Object.keys(modelValue).length > 0" |
|
|
|
v-if="Object.keys(modelValue).length > 0" |
|
|
|
v-model="activeTab" |
|
|
|
v-model="activeTab" |
|
|
|
type="card" |
|
|
|
|
|
|
|
class="h-full flex flex-col" |
|
|
|
class="h-full flex flex-col" |
|
|
|
|
|
|
|
type="card" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-tab-pane |
|
|
|
<el-tab-pane |
|
|
|
v-for="(categoriesMap, channelType) in modelValue" |
|
|
|
v-for="(categoriesMap, channelType) in modelValue" |
|
|
|
@ -16,14 +16,14 @@ |
|
|
|
:name="channelType" |
|
|
|
:name="channelType" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-scrollbar> |
|
|
|
<el-scrollbar> |
|
|
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4 p-4"> |
|
|
|
<div class="grid grid-cols-[repeat(auto-fill,minmax(310px,1fr))] gap-4 p-4"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
class="bg-white rounded-xl shadow-sm p-12 border-2 border-dashed border-gray-200 hover:border-blue-400 transition-all duration-300 cursor-pointer flex items-center justify-center min-h-[200px]" |
|
|
|
class="bg-white rounded-xl shadow-sm p-12 border-2 border-dashed border-gray-200 hover:border-blue-400 transition-all duration-300 cursor-pointer flex items-center justify-center min-h-[200px]" |
|
|
|
@click="handleAdd" |
|
|
|
@click="handleAdd" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex flex-col items-center gap-3"> |
|
|
|
<div class="flex flex-col items-center gap-3"> |
|
|
|
<el-icon :size="48" class="text-gray-400"> |
|
|
|
<el-icon :size="48" class="text-gray-400"> |
|
|
|
<Plus /> |
|
|
|
<Plus/> |
|
|
|
</el-icon> |
|
|
|
</el-icon> |
|
|
|
<span class="text-base font-medium text-gray-600">新增设备类别</span> |
|
|
|
<span class="text-base font-medium text-gray-600">新增设备类别</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -36,32 +36,43 @@ |
|
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
|
<div class="flex justify-between items-start mb-3"> |
|
|
|
<div class="flex-1 min-w-0 flex items-center justify-between"> |
|
|
|
<div class="flex-1 min-w-0 flex items-center justify-between"> |
|
|
|
<h3 |
|
|
|
<h3 |
|
|
|
class="font-bold text-lg text-gray-900 truncate" |
|
|
|
|
|
|
|
:title="categoryName as string" |
|
|
|
:title="categoryName as string" |
|
|
|
|
|
|
|
class="font-bold text-lg text-gray-900 truncate" |
|
|
|
> |
|
|
|
> |
|
|
|
类别名称：{{ categoryName }} |
|
|
|
类别名称：{{ categoryName }} |
|
|
|
</h3> |
|
|
|
</h3> |
|
|
|
<el-button @click.stop="handleOpenPointDrawer(fileName)"> |
|
|
|
<div class="flex items-center gap-8"> |
|
|
|
点位详情 |
|
|
|
<el-tooltip |
|
|
|
</el-button> |
|
|
|
content="下载点表文件" |
|
|
|
<el-tag |
|
|
|
effect="dark" |
|
|
|
v-if="!!status" |
|
|
|
placement="top" |
|
|
|
size="small" |
|
|
|
> |
|
|
|
type="success" |
|
|
|
<div |
|
|
|
effect="light" |
|
|
|
v-if="!!status" |
|
|
|
class="rounded-md" |
|
|
|
@click.stop="handleDownload(categoryName as string)" |
|
|
|
> |
|
|
|
> |
|
|
|
已上传 |
|
|
|
<el-button :icon="Download" link type="primary">下载</el-button> |
|
|
|
</el-tag> |
|
|
|
</div> |
|
|
|
<el-tag |
|
|
|
</el-tooltip> |
|
|
|
v-else |
|
|
|
<el-tag |
|
|
|
size="small" |
|
|
|
v-if="!!status" |
|
|
|
type="info" |
|
|
|
class="rounded-md" |
|
|
|
effect="light" |
|
|
|
effect="light" |
|
|
|
class="rounded-md" |
|
|
|
size="small" |
|
|
|
> |
|
|
|
type="success" |
|
|
|
未上传 |
|
|
|
> |
|
|
|
</el-tag> |
|
|
|
已上传 |
|
|
|
|
|
|
|
</el-tag> |
|
|
|
|
|
|
|
<el-tag |
|
|
|
|
|
|
|
v-else |
|
|
|
|
|
|
|
class="rounded-md" |
|
|
|
|
|
|
|
effect="light" |
|
|
|
|
|
|
|
size="small" |
|
|
|
|
|
|
|
type="info" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
未上传 |
|
|
|
|
|
|
|
</el-tag> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
@ -70,23 +81,31 @@ |
|
|
|
<div class="flex items-center justify-between"> |
|
|
|
<div class="flex items-center justify-between"> |
|
|
|
<span class="text-gray-500 whitespace-nowrap">点表文件：</span> |
|
|
|
<span class="text-gray-500 whitespace-nowrap">点表文件：</span> |
|
|
|
<el-tooltip |
|
|
|
<el-tooltip |
|
|
|
effect="dark" |
|
|
|
|
|
|
|
:content="fileName" |
|
|
|
:content="fileName" |
|
|
|
placement="top" |
|
|
|
|
|
|
|
:disabled="!fileName" |
|
|
|
:disabled="!fileName" |
|
|
|
|
|
|
|
effect="dark" |
|
|
|
|
|
|
|
placement="bottom" |
|
|
|
> |
|
|
|
> |
|
|
|
<span class="text-gray-900 font-medium truncate max-w-[170px]"> |
|
|
|
<span class="text-gray-900 font-medium truncate "> |
|
|
|
{{ fileName || '-' }} |
|
|
|
{{ fileName || '-' }} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</el-tooltip> |
|
|
|
</el-tooltip> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
<el-tooltip |
|
|
|
class="ml-2" |
|
|
|
:disabled="!fileName" |
|
|
|
v-if="!!status" |
|
|
|
content="点表文件详情" |
|
|
|
@click.stop="handleDownload(categoryName as string)" |
|
|
|
effect="dark" |
|
|
|
|
|
|
|
placement="top" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-button type="primary" :icon="Download" link>下载</el-button> |
|
|
|
<el-button |
|
|
|
</div> |
|
|
|
v-if="!!status" |
|
|
|
|
|
|
|
:icon="InfoFilled" |
|
|
|
|
|
|
|
link |
|
|
|
|
|
|
|
type="warning" |
|
|
|
|
|
|
|
@click.stop="handleOpenPointDrawer(fileName)"> |
|
|
|
|
|
|
|
详情 |
|
|
|
|
|
|
|
</el-button> |
|
|
|
|
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -96,8 +115,8 @@ |
|
|
|
class="absolute inset-0 z-10 bg-white/90 flex items-center justify-center rounded-lg" |
|
|
|
class="absolute inset-0 z-10 bg-white/90 flex items-center justify-center rounded-lg" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-button |
|
|
|
<el-button |
|
|
|
type="danger" |
|
|
|
|
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
|
|
|
|
type="danger" |
|
|
|
@click="handleCancelUpload(fileName as string)" |
|
|
|
@click="handleCancelUpload(fileName as string)" |
|
|
|
> |
|
|
|
> |
|
|
|
取消上传 |
|
|
|
取消上传 |
|
|
|
@ -105,23 +124,24 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-upload |
|
|
|
<el-upload |
|
|
|
:ref="(el) => setUploadRef(el, fileName as string)" |
|
|
|
:ref="(el) => setUploadRef(el, fileName as string)" |
|
|
|
class="upload-demo" |
|
|
|
|
|
|
|
drag |
|
|
|
|
|
|
|
:auto-upload="false" |
|
|
|
:auto-upload="false" |
|
|
|
:limit="1" |
|
|
|
|
|
|
|
:show-file-list="false" |
|
|
|
|
|
|
|
:disabled="uploadingStates[fileName]" |
|
|
|
:disabled="uploadingStates[fileName]" |
|
|
|
|
|
|
|
:limit="1" |
|
|
|
:on-change=" |
|
|
|
:on-change=" |
|
|
|
(file: any) => handleFileChange(file, fileName as string, categoryName) |
|
|
|
(file: any) => handleFileChange(file, fileName as string, categoryName) |
|
|
|
" |
|
|
|
" |
|
|
|
|
|
|
|
:show-file-list="false" |
|
|
|
|
|
|
|
class="upload-demo" |
|
|
|
|
|
|
|
drag |
|
|
|
> |
|
|
|
> |
|
|
|
<el-icon class="el-icon--upload !text-3xl !mb-2 !text-gray-400" |
|
|
|
<el-icon class="el-icon--upload !text-3xl !mb-2 !text-gray-400" |
|
|
|
><upload-filled |
|
|
|
> |
|
|
|
/></el-icon> |
|
|
|
<upload-filled/> |
|
|
|
|
|
|
|
</el-icon> |
|
|
|
<div class="el-upload__text text-xs text-gray-500"> |
|
|
|
<div class="el-upload__text text-xs text-gray-500"> |
|
|
|
拖拽文件或<em class="text-blue-500 not-italic cursor-pointer" |
|
|
|
拖拽文件或<em class="text-blue-500 not-italic cursor-pointer" |
|
|
|
>点击/{{ !!status ? '重新' : '' }}上传</em |
|
|
|
>点击/{{ !!status ? '重新' : '' }}上传</em |
|
|
|
> |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
</el-upload> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -138,25 +158,25 @@ |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex flex-col items-center gap-3"> |
|
|
|
<div class="flex flex-col items-center gap-3"> |
|
|
|
<el-icon :size="48" class="text-gray-400"> |
|
|
|
<el-icon :size="48" class="text-gray-400"> |
|
|
|
<Plus /> |
|
|
|
<Plus/> |
|
|
|
</el-icon> |
|
|
|
</el-icon> |
|
|
|
<span class="text-base font-medium text-gray-600">新增设备类别</span> |
|
|
|
<span class="text-base font-medium text-gray-600">新增设备类别</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-empty description="暂无设备类别，请点击上方按钮添加" /> |
|
|
|
<el-empty description="暂无设备类别，请点击上方按钮添加"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
<el-dialog |
|
|
|
v-model="dialogVisible" |
|
|
|
v-model="dialogVisible" |
|
|
|
:title="'新增设备类别'" |
|
|
|
:title="'新增设备类别'" |
|
|
|
width="500px" |
|
|
|
|
|
|
|
append-to-body |
|
|
|
append-to-body |
|
|
|
destroy-on-close |
|
|
|
destroy-on-close |
|
|
|
|
|
|
|
width="500px" |
|
|
|
> |
|
|
|
> |
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> |
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> |
|
|
|
<el-form-item label="类别名称：" prop="pointName"> |
|
|
|
<el-form-item label="类别名称：" prop="pointName"> |
|
|
|
<el-input v-model="form.pointName" placeholder="请输入类别名称" /> |
|
|
|
<el-input v-model="form.pointName" placeholder="请输入类别名称"/> |
|
|
|
</el-form-item> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</el-form> |
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> |
|
|
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px"> |
|
|
|
@ -178,21 +198,21 @@ |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</el-dialog> |
|
|
|
</el-dialog> |
|
|
|
<CategoryPointDrawer ref="categoryPointDrawerRef" /> |
|
|
|
<CategoryPointDrawer ref="categoryPointDrawerRef"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
<script lang="ts" setup> |
|
|
|
import { ref, reactive, computed, watch } from 'vue' |
|
|
|
import { computed, reactive, ref, watch } from 'vue' |
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
import { UploadFilled, Plus, Download } from '@element-plus/icons-vue' |
|
|
|
import { Download, InfoFilled, Plus, UploadFilled } from '@element-plus/icons-vue' |
|
|
|
import type { IDeviceCategoryList, IDeviceCategoryOV } from '@/api/module/device/index.d' |
|
|
|
import type { IDeviceCategoryList, IDeviceCategoryOV } from '@/api/module/device/index.d' |
|
|
|
import type { FormInstance, FormRules, UploadFile } from 'element-plus' |
|
|
|
import type { FormInstance, FormRules, UploadFile } from 'element-plus' |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus' |
|
|
|
import { |
|
|
|
import { |
|
|
|
createDeviceType, |
|
|
|
createDeviceType, |
|
|
|
uploadDeviceTypeFile, |
|
|
|
|
|
|
|
downloadDeviceTypeFile, |
|
|
|
downloadDeviceTypeFile, |
|
|
|
|
|
|
|
uploadDeviceTypeFile, |
|
|
|
} from '@/api/module/device/category' |
|
|
|
} from '@/api/module/device/category' |
|
|
|
import { ChannelEnum } from '@/api/module/channel/index' |
|
|
|
import { ChannelEnum } from '@/api/module/channel/index' |
|
|
|
import type { IChannelOV } from '@/api/module/channel/index.d' |
|
|
|
import type { IChannelOV } from '@/api/module/channel/index.d' |
|
|
|
|
