Web/admin-govern
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

修改测试bug，优化页面

Browse Source
This commit is contained in:
guanj
2026-01-07 13:14:26 +08:00
parent 7a81c008c3
commit 02a95c1dcd
11 changed files with 378 additions and 293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/cockpit/monitoringPointList/index.vue
View File

@@ -18,7 +18,13 @@
<OverLimitDetails ref="OverLimitDetailsRef" />
<!-- 上传对话框 -->
<el-dialog v-model="uploadDialogVisible" title="上传报告" append-to-body width="500px" @closed="handleDialogClosed">
<el-dialog
v-model="uploadDialogVisible"
title="上传报告"
append-to-body
width="500px"
@closed="handleDialogClosed"
>
<el-upload
ref="uploadRef"
class="upload-demo"
@@ -163,6 +169,15 @@ const tableStore: any = new TableStore({
}
}
},
{
title: '报告',
field: 'lineId',
minWidth: '120',
render: 'customTemplate',
customTemplate: (row: any) => {
return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineId}</span>`
}
},
{
title: '操作',
minWidth: 80,
@@ -183,19 +198,19 @@ const tableStore: any = new TableStore({
}
},
{
name: 'productSetting',
title: '下载报告',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
downloadTheReport(row.lineId)
},
disabled: row => {
return row.reportFilePath == null || row.reportFilePath.length == 0
}
},
// {
// name: 'productSetting',
// title: '下载报告',
// type: 'primary',
// icon: 'el-icon-EditPen',
// render: 'basicButton',
// click: row => {
// downloadTheReport(row.lineId)
// },
// disabled: row => {
// return row.reportFilePath == null || row.reportFilePath.length == 0
// }
// },
{
name: 'productSetting',
title: '重新上传',
@@ -252,6 +267,8 @@ const cellClickEvent = ({ row, column }: any) => {
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
tableStore.table.params.searchEndTime || prop.timeValue?.[1]
)
}else if (column.field == 'lineId') {
downloadTheReport(row.lineId)
}
}

15
src/components/tree/device.vue
View File

@@ -300,7 +300,6 @@ const chooseNode = (value: string, data: any, node: any) => {
}
const changeDevice = (val: any) => {
console.log('changeDevice', val)
let arr1: any = []
//zlDeviceData
@@ -331,22 +330,30 @@ const changeDevice = (val: any) => {
arr2.map((item: any) => {
item.checked = false
})
treeRef1.value && treeRef1.value.setCurrentKey(arr1[0]?.id)
emit('changeDeviceType', activeName.value, arr1[0])
setTimeout(() => {
treeRef1.value?.setCurrentKey(arr1[0]?.id)
}, 100)
}
if (val == '1') {
arr1.map((item: any) => {
item.checked = false
})
treeRef2.value && treeRef2.value.setCurrentKey(arr2[0]?.id)
emit('changeDeviceType', activeName.value, arr2[0])
setTimeout(() => {
treeRef2.value?.setCurrentKey(arr2[0]?.id)
}, 100)
}
if (val == '2') {
arr3.map((item: any) => {
item.checked = false
})
treeRef3.value && treeRef3.value.setCurrentKey(arr3[0]?.id)
emit('changeDeviceType', activeName.value, arr3[0])
setTimeout(() => {
treeRef3.value?.setCurrentKey(arr3[0]?.id)
}, 100)
}
}
//治理

29
src/components/tree/govern/deviceTree.vue
View File

@@ -11,10 +11,11 @@
</template>
<script lang="ts" setup>
import { ref, nextTick, defineEmits } from 'vue'
import { ref, nextTick } from 'vue'
import Tree from '../device.vue'
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
import { useConfig } from '@/stores/config'
import { throttle } from 'lodash'
defineOptions({
name: 'govern/deviceTree'
})
@@ -27,7 +28,7 @@ const props = withDefaults(
{
showCheckbox: false,
defaultCheckedKeys: [],
height:0
height: 0
}
)
const emit = defineEmits(['init', 'checkChange', 'deviceTypeChange'])
@@ -67,14 +68,15 @@ getDeviceTree().then(res => {
item.color = config.getColorVal('elementUiPrimary')
item.color = '#e26257 !important'
item.color = item.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
// item.disabled =true
item.pName = '便携式设备'
if (item.type == 'device') {
arr2.push(item)
}
item.children.forEach((item2: any) => {
item2.icon = 'el-icon-Platform'
item2.color = item2.comFlag === 2 ? config.getColorVal('elementUiPrimary') : '#e26257 !important'
item2.pName = '便携式设备'
// item2.children.forEach((item3: any) => {
// item3.icon = 'el-icon-Platform'
// item3.color = config.getColorVal('elementUiPrimary')
@@ -141,6 +143,22 @@ getDeviceTree().then(res => {
}, 500)
})
})
throttle(
(data: any, checked: any, indeterminate: any) => {
emit('checkChange', {
data,
checked,
indeterminate
})
},
300,
{
leading: true, // 首次触发立即执行（可选，默认 true）
trailing: false // 节流结束后是否执行最后一次（可选，默认 true，根据需求调整）
}
)
const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
emit('checkChange', {
data,
@@ -148,4 +166,7 @@ const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
indeterminate
})
}
defineExpose({
treRef
})
</script>

14
src/components/tree/point.vue
View File

@@ -205,7 +205,7 @@ watch(filterText, val => {
}
})
watch(process, val => {
if (val == '' || val == undefined) {
if (val == '' || val == undefined) {
zlDevList.value = JSON.parse(JSON.stringify(zlDeviceData.value))
} else {
zlDevList.value = filterProcess(JSON.parse(JSON.stringify(zlDeviceData.value)))
@@ -251,22 +251,28 @@ const changeDevice = (val: any) => {
arr2.map((item: any) => {
item.checked = false
})
treeRef1?.value && treeRef1.value.setCurrentKey(arr1[0]?.id)
emit('changePointType', activeName.value, arr1[0])
setTimeout(() => {
treeRef1.value?.setCurrentKey(arr1[0]?.id)
}, 100)
}
if (val == '1') {
arr1.map((item: any) => {
item.checked = false
})
treeRef2?.value && treeRef2.value.setCurrentKey(arr2[0]?.id)
emit('changePointType', activeName.value, arr2[0])
setTimeout(() => {
treeRef2.value?.setCurrentKey(arr2[0]?.id)
}, 100)
}
if (val == '2') {
arr3.map((item: any) => {
item.checked = false
})
treeRef3?.value && treeRef3.value.setCurrentKey(arr3[0]?.id)
emit('changePointType', activeName.value, arr3[0])
setTimeout(() => {
treeRef3.value?.setCurrentKey(arr3[0]?.id)
}, 100)
}
// if(activeName.value){
// emit('changePointType', activeName.value)

14
src/views/govern/device/control/tabs/components/realtrend.vue
View File

@@ -2,7 +2,7 @@
<template>
<div class="realtrend" v-loading="loading">
<div class="select" v-if="!loading">
<div class="mr10">谐波次数</div>
<div class="mr10">次数</div>
<el-select v-model.trim="selectValue" style="width: 100px" @change="selectChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
@@ -292,7 +292,7 @@ const setRealTrendData = (val: any) => {
if (selectValue.value != '3') {
if (selectValue.value == '2') {
if (activeName.value == 2) {
if (numberPart % 2 !== 0) {
if (numberPart % 2 !== 0 && numberPart < 17) {
tableData.value[key] = val[key]
}
} else {
@@ -302,7 +302,7 @@ const setRealTrendData = (val: any) => {
}
} else {
if (activeName.value == 2) {
if (numberPart % 2 === 0) {
if (numberPart % 2 === 0 && numberPart < 17) {
tableData.value[key] = val[key]
}
} else {
@@ -312,7 +312,13 @@ const setRealTrendData = (val: any) => {
}
}
} else {
tableData.value[key] = val[key]
if (activeName.value == 2) {
if (numberPart < 17) {
tableData.value[key] = val[key]
}
} else {
tableData.value[key] = val[key]
}
}
}
}

427
src/views/govern/device/fileService/popup.vue
View File

@@ -1,212 +1,215 @@
<!-- 设备文件下载 -->
<template>
<div :class="downLoading ? 'all_disabled' : ''">
<el-dialog v-model.trim="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
<div v-loading="loading">
<div class="download_progress"
v-if="mqttFileName.includes(fileNameInfoMation) && status != 0 && status != 100">
<div class="progress_left">
正在下载：
{{
// fileData?.prjDataPath
// ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
// : '/'
mqttFileName
}}
</div>
<div class="progress_right">
<el-progress :percentage="status" />
</div>
</div>
<el-descriptions title="" style="margin: 10px 0" :column="2" :border="true">
<el-descriptions-item label="文件名称">
{{
fileData?.prjDataPath
? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
: '/'
}}
</el-descriptions-item>
<el-descriptions-item label="文件大小">
{{ fileData?.size ? fileData?.size + '字节' : '/' }}
</el-descriptions-item>
<el-descriptions-item label="文件时间">
{{ fileData?.startTime ? fileData?.startTime : '/' }}
</el-descriptions-item>
<el-descriptions-item label="文件校验码">
{{ fileData?.fileCheck ? fileData?.fileCheck : '/' }}
</el-descriptions-item>
</el-descriptions>
</div>
<template #footer>
<div class="dialog-footer download_status">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleDownLoad" :disabled="loading" :loading="downLoading">
{{ downLoading ? '下载中...' : '下载' }}
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, onUnmounted, defineEmits } from 'vue'
import {
getFileServiceFileOrDir,
downLoadDeviceFile,
downLoadDeviceFilePath
} from '@/api/cs-device-boot/fileService.ts'
import { ElMessage } from 'element-plus'
import { useAdminInfo } from '@/stores/adminInfo'
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
const dialogVisible = ref(false)
const loading = ref(false)
const adminInfo = useAdminInfo()
const downLoading = ref(false)
const emit = defineEmits(['downLoadFile'])
const handleClose = () => {
status.value = 0
mqttFileName.value = ''
downLoading.value = false
dialogVisible.value = false
}
//文件信息
const fileData: any = ref({})
//文件名称信息
const fileNameInfoMation = ref<any>('')
const open = async (row: any, id: any) => {
status.value = 0
fileData.value = {}
dialogVisible.value = true
loading.value = true
const obj = {
nDid: id,
name: row.prjDataPath,
type: row.type
}
await getFileServiceFileOrDir(obj).then((res: any) => {
if (res.code == 'A0000') {
if (res.data && res.data.length != 0) {
fileData.value = res.data[0]
fileData.value.nDid = id
if (fileData.value && fileData.value.prjDataPath) {
fileNameInfoMation.value =
fileData.value.prjDataPath.split('/')[fileData.value.prjDataPath.split('/').length - 1]
} else {
fileNameInfoMation.value = '/'
}
}
loading.value = false
}
})
}
const handleDownLoad = () => {
const obj = {
nDid: fileData.value.nDid,
name: fileData.value.prjDataPath,
size: fileData.value.size,
fileCheck: fileData.value.fileCheck
}
downLoading.value = true
downLoadDeviceFile(obj)
.then((res: any) => {
if (res.code == 'A0000') {
// downLoadFile(res.data).then((resp: any) => {
// if (resp.type != 'application/json') {
// // 'application/vnd.ms-excel'
// let blob = new Blob([resp], { type: resp.type })
// const url = window.URL.createObjectURL(blob)
// const link = document.createElement('a')
// link.href = url
// link.download = fileData.value?.prjDataPath
// ? fileData.value?.prjDataPath.split('/')[fileData.value?.prjDataPath.split('/').length - 1]
// : '/'
// document.body.appendChild(link)
// downLoading.value = false
// link.click()
// status.value = 100
// ElMessage.success('文件下载成功')
// link.remove()
// handleClose()
// } else {
// if (resp.code == 'A0000') {
// window.open(res.data, '_blank')
// downLoading.value = false
// ElMessage.success(resp.message)
// handleClose()
// }
// }
// })
}
})
.catch(e => {
console.log(e, '0000000')
if (e) {
downLoading.value = false
}
})
}
onMounted(() => { })
onUnmounted(() => { })
const status = ref(0)
const mqttFileName = ref('')
const setStatus = (val: any) => {
status.value = parseInt(Number((val.nowStep / val.allStep) * 100)) || 0
mqttFileName.value = val.fileName
if (adminInfo.userIndex != val.userId) return
downLoading.value = true
if (status.value == 100) {
downLoadDeviceFilePath({ nDid: fileData.value.nDid, name: fileData.value.prjDataPath }).then((ress: any) => {
if (ress.code == 'A0000') {
downLoadFile(ress.data).then((resp: any) => {
if (resp.type != 'application/json') {
// 'application/vnd.ms-excel'
let blob = new Blob([resp], { type: resp.type })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileData.value?.prjDataPath
? fileData.value?.prjDataPath.split('/')[fileData.value?.prjDataPath.split('/').length - 1]
: '/'
document.body.appendChild(link)
downLoading.value = false
link.click()
status.value = 100
ElMessage.success('文件下载成功')
link.remove()
handleClose()
} else {
if (resp.code == 'A0000') {
window.open(ress.data, '_blank')
downLoading.value = false
ElMessage.success(resp.message)
handleClose()
}
}
})
}
})
}
}
defineExpose({ open, setStatus })
</script>
<style lang="scss" scoped>
.download_progress {
display: flex;
width: 100%;
margin: 10px 0;
align-items: center;
justify-content: space-between;
.progress_left {
width: auto;
}
.progress_right {
flex: 1;
padding-left: 10px;
box-sizing: border-box;
}
}
</style>
<!-- 设备文件下载 -->
<template>
<div :class="downLoading ? 'all_disabled' : ''">
<el-dialog v-model.trim="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
<div v-loading="loading">
<div
class="download_progress"
v-if="mqttFileName.includes(fileNameInfoMation) && status != 0 && status != 100"
>
<div class="progress_left">
正在下载：
{{
// fileData?.prjDataPath
// ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
// : '/'
mqttFileName
}}
</div>
<div class="progress_right">
<el-progress :percentage="status" />
</div>
</div>
<el-descriptions title="" style="margin: 10px 0" :column="2" :border="true">
<el-descriptions-item label="文件名称">
{{
fileData?.prjDataPath
? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
: '/'
}}
</el-descriptions-item>
<el-descriptions-item label="文件大小">
{{ fileData?.size ? fileData?.size + '字节' : '/' }}
</el-descriptions-item>
<el-descriptions-item label="文件时间">
{{ fileData?.startTime ? fileData?.startTime : '/' }}
</el-descriptions-item>
<el-descriptions-item label="文件校验码">
{{ fileData?.fileCheck ? fileData?.fileCheck : '/' }}
</el-descriptions-item>
</el-descriptions>
</div>
<template #footer>
<div class="dialog-footer download_status">
<el-button @click="handleClose">取消</el-button>
<el-button type="primary" @click="handleDownLoad" :disabled="loading" :loading="downLoading">
{{ downLoading ? '下载中...' : '下载' }}
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, onUnmounted, defineEmits } from 'vue'
import {
getFileServiceFileOrDir,
downLoadDeviceFile,
downLoadDeviceFilePath
} from '@/api/cs-device-boot/fileService.ts'
import { ElMessage } from 'element-plus'
import { useAdminInfo } from '@/stores/adminInfo'
import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
import { log } from 'console'
const dialogVisible = ref(false)
const loading = ref(false)
const adminInfo = useAdminInfo()
const downLoading = ref(false)
const emit = defineEmits(['downLoadFile'])
const handleClose = () => {
status.value = 0
mqttFileName.value = ''
downLoading.value = false
dialogVisible.value = false
}
//文件信息
const fileData: any = ref({})
//文件名称信息
const fileNameInfoMation = ref<any>('')
const open = async (row: any, id: any) => {
status.value = 0
fileData.value = {}
dialogVisible.value = true
loading.value = true
const obj = {
nDid: id,
name: row.prjDataPath,
type: row.type
}
await getFileServiceFileOrDir(obj).then((res: any) => {
if (res.code == 'A0000') {
if (res.data && res.data.length != 0) {
fileData.value = res.data[0]
fileData.value.nDid = id
if (fileData.value && fileData.value.prjDataPath) {
fileNameInfoMation.value =
fileData.value.prjDataPath.split('/')[fileData.value.prjDataPath.split('/').length - 1]
} else {
fileNameInfoMation.value = '/'
}
}
loading.value = false
}
})
}
const handleDownLoad = () => {
const obj = {
nDid: fileData.value.nDid,
name: fileData.value.prjDataPath,
size: fileData.value.size,
fileCheck: fileData.value.fileCheck
}
downLoading.value = true
downLoadDeviceFile(obj)
.then((res: any) => {
if (res.code == 'A0000') {
// downLoadFile(res.data).then((resp: any) => {
// if (resp.type != 'application/json') {
// // 'application/vnd.ms-excel'
// let blob = new Blob([resp], { type: resp.type })
// const url = window.URL.createObjectURL(blob)
// const link = document.createElement('a')
// link.href = url
// link.download = fileData.value?.prjDataPath
// ? fileData.value?.prjDataPath.split('/')[fileData.value?.prjDataPath.split('/').length - 1]
// : '/'
// document.body.appendChild(link)
// downLoading.value = false
// link.click()
// status.value = 100
// ElMessage.success('文件下载成功')
// link.remove()
// handleClose()
// } else {
// if (resp.code == 'A0000') {
// window.open(res.data, '_blank')
// downLoading.value = false
// ElMessage.success(resp.message)
// handleClose()
// }
// }
// })
}
})
.catch(e => {
console.log(e, '0000000')
if (e) {
downLoading.value = false
}
})
}
onMounted(() => {})
onUnmounted(() => {})
const status = ref(0)
const mqttFileName = ref('')
const setStatus = (val: any) => {
status.value = parseInt(Number((val.nowStep / val.allStep) * 100)) || 0
mqttFileName.value = val.fileName
if (adminInfo.userIndex != val.userId) return
downLoading.value = true
if (status.value == 100) {
downLoadDeviceFilePath({ nDid: fileData.value.nDid, name: fileData.value.prjDataPath }).then((ress: any) => {
if (ress.code == 'A0000') {
downLoadFile(ress.data).then((resp: any) => {
if (resp.type != 'application/json') {
// 'application/vnd.ms-excel'
let blob = new Blob([resp], { type: resp.type })
const url = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = url
link.download = fileData.value?.prjDataPath
? fileData.value?.prjDataPath.split('/')[fileData.value?.prjDataPath.split('/').length - 1]
: '/'
document.body.appendChild(link)
downLoading.value = false
link.click()
status.value = 100
ElMessage.success('文件下载成功')
link.remove()
handleClose()
} else {
if (resp.code == 'A0000') {
window.open(ress.data, '_blank')
downLoading.value = false
ElMessage.success(resp.message)
handleClose()
}
}
})
}
})
}
}
defineExpose({ open, setStatus })
</script>
<style lang="scss" scoped>
.download_progress {
display: flex;
width: 100%;
margin: 10px 0;
align-items: center;
justify-content: space-between;
.progress_left {
width: auto;
}
.progress_right {
flex: 1;
padding-left: 10px;
box-sizing: border-box;
}
}
</style>

1
src/views/govern/device/officialUser/index.vue
View File

@@ -40,6 +40,7 @@
<!-- 对话框为左右布局 -->
<el-dialog
v-model.trim="dialogVisible"
draggable
title="添加工程 / 设备"
class="cn-operate-dialog"
:close-on-click-modal="false"

3
src/views/govern/device/permission/index.vue
View File

@@ -14,6 +14,9 @@ import Disposition from '@/views/govern/device/disposition/index.vue'
import OfficialUser from '@/views/govern/device/officialUser/index.vue'
import Tourist from '@/views/govern/device/tourist/index.vue'
const activeName = ref('1')
defineOptions({
name: 'permission'
})
</script>
<style lang="scss" scoped>
:deep(.el-tabs--border-card > .el-tabs__content) {

22
src/views/govern/device/tourist/index.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class=" device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<div class="device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree
ref="treeRef"
:showCheckbox="true"
:default-checked-keys="defaultCheckedKeys"
@checkChange="checkChange"
@@ -25,13 +26,24 @@ import DeviceTree from '@/components/tree/govern/deviceTree.vue'
import { mainHeight } from '@/utils/layout'
import { getVisitorConfig, updateVisitorConfig } from '@/api/cs-device-boot/user'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const pageHeight = mainHeight(60)
const loading = ref(true)
const defaultCheckedKeys: any = ref([])
const tableData = ref([])
const treeRef = ref(null)
const ignoreCheckChange = ref(false)
const checkChange = (data: any) => {
if (data.data.pName == '便携式设备') {
if (ignoreCheckChange.value) {
ignoreCheckChange.value = false // 清除标记，不影响后续正常触发
return
}
ignoreCheckChange.value = true
ElMessage.warning('便携式设备暂时无法分配给游客！')
return treeRef.value?.treRef?.treeRef2?.setCheckedKeys([])
}
if (data.data.level === 2) {
if (data.checked) {
defaultCheckedKeys.value.push(data.data.id)
@@ -57,13 +69,13 @@ const updateVisitorConfigs = () => {
})
}
const getVisitorConfigs = () => {
getVisitorConfig().then((res:any) => {
getVisitorConfig().then((res: any) => {
if (res.code === 'A0000') {
tableData.value = res.data
loading.value = false
if (defaultCheckedKeys.value.length > 0) return
defaultCheckedKeys.value = [] // 清空
res.data.forEach((item:any) => {
res.data.forEach((item: any) => {
defaultCheckedKeys.value.push(item.deviceId)
})
}

64
src/views/setting/dictionary/component/add.vue
View File

@@ -13,32 +13,16 @@
<el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
</el-form-item>
<el-form-item class="top" label="父组件节点" prop="system">
<!-- <el-cascader
<el-cascader
v-model="form.system"
:options="customDeptOption"
:props="props"
placeholder="请选择父组件节点"
style="width: 100%"
/> -->
<el-select v-model="form.systemType" placeholder="请选择父组件节点">
<el-option
v-for="item in customDeptOption"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item class="top" label="组件绑定系统" prop="systemIds">
<el-select
v-model="form.systemIds"
multiple
collapse-tags
collapse-tags-tooltip
placeholder="请选择组件绑定系统"
>
<el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
clearable
placeholder="请选择父组件节点"
style="width: 100%"
/>
</el-form-item>
<el-form-item label="组件图标" prop="icon">
<IconSelector v-model="form.icon" placeholder="请选择图标" />
@@ -58,7 +42,17 @@
<el-checkbox-button value="5">日</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item class="top" label="组件绑定系统" prop="systemIds">
<el-select
v-model="form.systemIds"
multiple
collapse-tags
collapse-tags-tooltip
placeholder="请选择组件绑定系统"
>
<el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item class="top" label="组件排序" prop="sort">
<el-input v-model.number="form.sort" placeholder="请输入组件排序"></el-input>
</el-form-item>
@@ -112,7 +106,7 @@ const form = ref<anyObj>({
systemIds: [],
path: ''
})
const props = { label: 'name', value: 'id' }
const props = { label: 'name', value: 'id', multiple: true }
const rules = {
code: [{ required: true, message: '请输入组件标识', trigger: 'blur' }],
name: [{ required: true, message: '请输输入组件名称', trigger: 'blur' }],
@@ -128,11 +122,11 @@ const systemList = dictData.getBasicData('System_Type')
onMounted(() => {
customDeptOption.value = dictData.getBasicData('Component_Type')
// customDeptOption.value.forEach((item: any) => {
// getFatherComponent({ systemType: item.id }).then(res => {
// item.children = res.data.filter(item => item.name != '无')
// })
// })
customDeptOption.value.forEach((item: any) => {
getFatherComponent({ systemType: item.id }).then(res => {
item.children = res.data.filter(item => item.name != '无')
})
})
})
const open = (text: string, data?: anyObj) => {
@@ -142,12 +136,14 @@ const open = (text: string, data?: anyObj) => {
if (data) {
let Data = JSON.parse(JSON.stringify(data))
form.value = Data
form.value.system = [Data.systemType]
form.value.system = [Data.systemType, Data.pid]
// form.value.timeKeys = Data.timeKeys.split(',').map(Number)
form.value.timeKeys = Data.timeKeys || []
}
}
const submit = () => {
console.log('🚀 ~ submit ~ form.value:', form.value)
formRef.value.validate(async (valid: boolean) => {
if (valid) {
let url = ''
@@ -172,8 +168,11 @@ const submit = () => {
if (title.value == '新增组件') {
await componentAdd({
...form.value,
systemType: form.value.system
.map(subArr => (subArr.length > 1 ? subArr.at(-1) : null))
.filter(item => item !== null),
// systemType: form.value.system[0],
pid: '',
pid: form.value.system[1],
image: url
}).then(res => {
ElMessage.success('新增成功!')
@@ -184,7 +183,10 @@ const submit = () => {
await componentEdit({
...form.value,
// systemType: form.value.system[0],
pid: '',
systemType: form.value.system
.map(subArr => (subArr.length > 1 ? subArr.at(-1) : null))
.filter(item => item !== null),
pid: form.value.system[1],
image: url
}).then(res => {
ElMessage.success('修改成功!')

37
src/views/setting/dictionary/component/index.vue
View File

@@ -1,11 +1,12 @@
<template>
<div class="default-main">
<TableHeader :showSearch="false">
<template v-slot:operation>
<!-- <el-button type="primary" @click="addTree" icon="el-icon-Plus">新增树</el-button> -->
<el-button type="primary" @click="add" icon="el-icon-Plus">新增组件</el-button>
</template>
</TableHeader>
<div class="default-main pd10">
<div class="elButton">
<el-button type="primary" @click="addTree" icon="el-icon-Plus">新增树</el-button>
<el-button type="primary" @click="add" icon="el-icon-Plus">新增组件</el-button>
</div>
<!-- <TableHeader :showSearch="false">
</TableHeader> -->
<!-- <Table
ref="tableRef"
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
@@ -13,14 +14,14 @@
/> -->
<el-tabs v-model="tableName" type="border-card" @tab-change="changeTab">
<el-tab-pane v-for="item in tableStore.table.data" :key="item.name" :label="item.name" :name="item.name">
<el-tabs v-model="tableName1" tab-position="left" class="componentList">
<el-tabs v-model="tableName1" tab-position="left" class="componentList">
<el-tab-pane v-for="k in item?.children" :key="k.name" :label="k.name" :name="k.name">
<template #label>
<span class="custom-tabs-label">
<p>{{ k.name }}</p>
<!-- <el-icon><Edit /></el-icon> -->
<!-- <el-button
<el-button
type="primary"
icon="el-icon-Edit"
link
@@ -33,13 +34,13 @@
link
class="ml0"
@click.stop="del(k)"
></el-button> -->
></el-button>
</span>
</template>
<div :style="height" style="overflow-y: auto; overflow-x: hidden">
<el-row :gutter="10" class="pl5 pr5 pt5">
<el-col :span="6" v-for="component in k.children" :key="component.id" class="mb10">
<el-card class="box-card" shadow="hover">
<el-card class="box-card" shadow="hover">
<div slot="header" class="clearfix">
<span style="display: flex; align-items: center">
{{ component.name }}
@@ -104,7 +105,7 @@ defineOptions({
const addRef = ref()
const addFlag = ref(false)
const tableRef = ref()
const height = ref(mainHeight(140))
const height = ref(mainHeight(100))
const treeRef = ref()
const tableName = ref('')
const tableName1 = ref('')
@@ -356,9 +357,15 @@ span {
min-width: 128px;
}
}
:deep(.componentList){
.el-tabs__header{
height: calc(100vh - 250px)!important;
:deep(.componentList) {
.el-tabs__header {
height: calc(100vh - 210px) !important;
}
}
.elButton{
position: absolute;
top: 13px;
right: 10px;
z-index: 1;
}
</style>