ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

已修改角色、新增用户、检测源列表、被检设备列表、检测脚本列表

Browse Source
This commit is contained in:
GYYM
2024-10-23 20:53:58 +08:00
parent e62f033e07
commit 8e9cda8c78
24 changed files with 997 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/views/authority/role/components/permissionUnit.vue
View File

@@ -1,8 +1,8 @@
<template>
<!-- 权限信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="title" @close="handleCancel" width="800" draggable>
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
<div>
<el-transfer v-model="value" :data="data" :titles="['未具备的权限', '已具备的权限']"/>
<el-transfer v-model="value" :data="data.permissionList" :titles="['未具备的权限', '已具备的权限']"/>
</div>
<template #footer>
<div class="dialog-footer">
@@ -18,7 +18,53 @@
<script lang="ts" setup>
import { ref } from 'vue'
const {dialogVisible,data} = defineProps(['dialogVisible','title','data'])
import { Role } from '@/api/role/interface'
import { dialogBig } from '@/utils/elementBind'
const {dialogVisible,data} = defineProps<{
dialogVisible: boolean;
title: string;
data: Role.ResRoleList;
}>()
// const leftvalue = ref<Role.Permission[]>([])
// const rightvalue = ref<Role.Permission[]>([])
// const rightvalue = computed<Role.Permission[]>({
// get(){
// return data.permissionList?.filter(item => item.disabled) || []
// },
// set: (value: Role.Permission[]) => {
// if (data.permissionList) {
// for(let i = 0;i<value.length;i++){
// for(let j = 0;j<(data.permissionList?.length);j++){
// if(value[i].key === data.permissionList[j].key)
// {
// data.permissionList[j].disabled = value[i].disabled
// }
// }
// }
// }
// }
// })
// const leftvalue = computed<Role.Permission[]>({
// get(){
// return data.permissionList?.filter(item => item.disabled === false) || []
// },
// set: (value: Role.Permission[]) => {
// if (data.permissionList) {
// for(let i = 0;i<value.length;i++){
// for(let j = 0;j<(data.permissionList?.length);j++){
// if(value[i].key === data.permissionList[j].key)
// {
// data.permissionList[j].disabled = value[i].disabled
// }
// }
// }
// }
// }
// })
const value = ref()
const emit = defineEmits<{

14
frontend/src/views/authority/role/components/roleUnit.vue
View File

@@ -1,6 +1,6 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="title" @close="handleCancel" width="800" draggable>
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
<div>
<el-form :model="data">
<el-form-item label="角色类型名称" :label-width="100">
@@ -36,9 +36,9 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(true)
import { ref,computed } from 'vue'
import {dialogSmall} from '@/utils/elementBind'
const {dialogVisible,title,data} = defineProps<{
dialogVisible:boolean;
title:string;
@@ -49,6 +49,12 @@
describe:string;
}
}>();
const value = computed({
get: () => data.status === 1,
set: (value: boolean) => data.status = value ? 1 : 0
})
const emit = defineEmits<{
(e:'update:visible',value:boolean):void;
}>();

57
frontend/src/views/authority/role/index.vue
View File

@@ -4,10 +4,11 @@
ref='proTable'
:columns='columns'
:data='roleData'
>
>
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增')">新增角色</el-button>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增角色')">新增角色</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出角色数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
@@ -16,10 +17,8 @@
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑角色', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
<el-button type='primary' link :icon='Share' @click="openDrawer('设置权限', scope.row)">设置权限</el-button>
</template>
@@ -73,13 +72,27 @@
const roleUnitTitle = ref()
const permissionUnitTitle = ref()
const roleUnitData = ref<Role.ResRoleList>({} as Role.ResRoleList)
const permissionUnitData = ref<Role.Permission[]>([])
const permissionUnitData = ref<Role.ResRoleList>({} as Role.ResRoleList)
// const permissionUnitData = ref<Role.Permission[]>([])
return {roleUnitVisible,permissionUnitVisible,roleUnitTitle,permissionUnitTitle,roleUnitData,permissionUnitData};
}
const dictStore = useDictStore()
const roleData = roleDataList
//const roleData = roleDataList
const roleData = ref<Role.ResRoleList[]>([])
getRoleList({
id: '',
rolename: '',
status: 0,
describe: '',
pageNum: 1,
pageSize: 10
}).then(res => {
if(res.code == '200') {
roleData.value = res.data.list
}
})
// ProTable 实例
const proTable = ref<ProTableInstance>()
@@ -126,6 +139,11 @@
search: { el: 'input' },
minWidth: 180,
},
{
prop: 'describe',
label: '描述',
minWidth: 380,
},
{
prop: 'status',
@@ -141,11 +159,6 @@
)
},
},
{
prop: 'describe',
label: '描述',
minWidth: 380,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
@@ -192,7 +205,7 @@
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<Role.ResRoleList> = {}) => {
if(title === "新增" || title === '编辑' )
if(title === "新增角色" || title === '编辑角色' )
{
roleUnitVisible.value = true
roleUnitTitle.value = title
@@ -212,10 +225,20 @@
permissionUnitVisible.value = true
permissionUnitTitle.value = title
if (row.permissionList)
{
permissionUnitData.value = row.permissionList;
}
const safeRow: Role.ResRoleList = {
id: row.id || '',
rolename: row.rolename || '',
status: row.status || 0,
describe: row.describe || '',
permissionList: row.permissionList || []
};
permissionUnitData.value = safeRow;
console.log(111,permissionUnitData);
// if (row.permissionList)
// {
// permissionUnitData.value = row.permissionList;
// }
}
}
</script>

70
frontend/src/views/authority/user/components/userUnit.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<!-- 基础信息弹出框 -->
<el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogSmall" @close="handleCancel" width="500" draggable>
<div>
<el-form :model="data">
<el-form-item label="用户名" :label-width="100">
<el-input v-model="data.username" placeholder="请输入用户名" autocomplete="off" />
</el-form-item>
<el-form-item label="真实姓名" :label-width="100">
<el-input v-model="data.realname" placeholder="请输入真实姓名" autocomplete="off" />
</el-form-item>
<el-form-item label="密码" :label-width="100">
<el-input type="password" v-model="data.password" placeholder="请输入密码" autocomplete="off" />
</el-form-item>
<el-form-item label="用户角色" :label-width="100">
<el-input v-model="data.rolename" placeholder="请输入用户角色" autocomplete="off" />
</el-form-item>
<el-form-item label="用户状态" :label-width="100">
<el-switch
v-model=value
inline-prompt
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
active-text="启用"
inactive-text="禁用"
/>
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleCancel">
保存
</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref,computed } from 'vue'
import {dialogSmall} from '@/utils/elementBind'
const {dialogVisible,title,data} = defineProps<{
dialogVisible:boolean;
title:string;
data:{
username:string;
password:string;
realname:string;
status:number;
rolename:string;
}
}>();
const value = computed({
get: () => data.status === 1,
set: (value: boolean) => data.status = value ? 1 : 0
})
const emit = defineEmits<{
(e:'update:visible',value:boolean):void;
}>();
const handleCancel = () => {
emit('update:visible',false)
}
</script>

200
frontend/src/views/authority/user/index.vue Normal file
View File

@@ -0,0 +1,200 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='userData'
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDrawer('新增用户')">新增用户</el-button>
<el-button type='primary' :icon='Download' plain @click='downloadFile'>导出用户数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
批量删除角色
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' @click="openDrawer('查看用户', scope.row)">查看</el-button>
<el-button type='primary' link :icon='EditPen' @click="openDrawer('编辑用户', scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' @click='deleteAccount(scope.row)'>删除</el-button>
</template>
</ProTable>
</div>
<userUnit
:dialogVisible = userUnitVisible
:title = userUnitTitle
:data = userUnitData
@update:visible="userUnitVisible = $event"
/>
</template>
<script setup lang='tsx' name='useRole'>
import { User } from '@/api/user/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import ProTable from '@/components/ProTable/index.vue'
import userUnit from './components/userUnit.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import userDataList from '@/api/user/userData'
import { useDictStore } from '@/stores/modules/dict'
import {
getUserList,
addUser,
BatchAddUser,
editUser,
deleteUser,
changeUserStatus,
exportUserInfo,
getUserStatus,
} from '@/api/user/user'
const {userUnitVisible,userUnitTitle,userUnitData} = useCount();
function useCount() {
const userUnitVisible = ref(false)
const userUnitTitle = ref()
const userUnitData = ref<User.ResUserList>({} as User.ResUserList)
return {userUnitVisible,userUnitTitle,userUnitData};
}
const dictStore = useDictStore()
const userData = userDataList
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
return {
list: data.list,
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
newParams.createTime && (newParams.startTime = newParams.createTime[0])
newParams.createTime && (newParams.endTime = newParams.createTime[1])
delete newParams.createTime
return getUserList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'username',
label: '用户名',
search: { el: 'input' },
minWidth: 150,
},
{
prop: 'realname',
label: '真实姓名',
minWidth: 180,
},
{
prop: 'rolename',
label: '角色类型',
minWidth: 180,
},
{
prop: 'status',
label: '状态',
enum: dictStore.getDictData('status'),
search: { el: 'tree-select', props: { filterable: true } },
minWidth: 100,
fieldNames: { label: 'label', value: 'code' },
render: scope => {
return (
<el-tag type={scope.row.status ? 'success' : 'danger'}>{scope.row.status ? '启用' : '禁用'}</el-tag>
)
},
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
// 删除角色信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.rolename}】角色`)
proTable.value?.getTableList()
}
// 批量删除角色信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteUser, { id }, '删除所选角色信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 切换角色状态
const changeStatus = async (row: User.ResUserList) => {
await useHandleData(changeUserStatus, {
id: row.id,
status: row.status == 1 ? 0 : 1,
}, `切换【${row.rolename}】角色状态`)
proTable.value?.getTableList()
}
// 导出角色列表
const downloadFile = async () => {
ElMessageBox.confirm('确认导出角色数据?', '温馨提示', { type: 'warning' }).then(() =>
useDownload(exportUserInfo, '角色列表', proTable.value?.searchParam),
)
}
// 批量添加角色
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
const batchAdd = () => {
const params = {
title: '角色',
tempApi: exportUserInfo,
importApi: BatchAddUser,
getTableList: proTable.value?.getTableList,
}
dialogRef.value?.acceptParams(params)
}
// 打开 drawer(新增、查看、编辑)
const openDrawer = (title: string, row: Partial<User.ResUserList> = {}) => {
if(title === "查看用户" ||title === "新增用户" || title === '编辑用户' )
{
userUnitVisible.value = true
userUnitTitle.value = title
if (row) {
// 确保 row 的所有属性都符合 User.ResUserList 的要求
const safeRow: User.ResUserList = {
id: row.id || '',
username: row.username || '',
password: row.password || '',
realname: row.realname || '',
status: row.status || 0,
rolename: row.rolename || '',
};
userUnitData.value = safeRow;
}
}
}
</script>

123
frontend/src/views/machine/device/index.vue Normal file
View File

@@ -0,0 +1,123 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='deviceData'
>
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' >新增设备</el-button>
<el-button type='primary' :icon='Download' plain >导出设备数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
批量删除设备
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' >查看</el-button>
<el-button type='primary' link :icon='EditPen' >编辑</el-button>
<el-button type='primary' link :icon='Delete' >删除</el-button>
</template>
</ProTable>
</div>
</template>
<script setup lang='tsx' name='useRole'>
import { Device } from '@/api/device/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import deviceDataList from '@/api/device/deviceData'
import { useDictStore } from '@/stores/modules/dict'
import {
getDeviceList,
} from '@/api/device/device'
const dictStore = useDictStore()
const deviceData = deviceDataList
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
return {
list: data.list,
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
newParams.createTime && (newParams.startTime = newParams.createTime[0])
newParams.createTime && (newParams.endTime = newParams.createTime[1])
delete newParams.createTime
return getDeviceList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<Device.ResDeviceList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'deviceName',
label: '名称',
search: { el: 'input' },
minWidth: 120,
},
{
prop: 'deviceType',
label: '类型',
search: { el: 'input' },
minWidth: 280,
},
{
prop: 'deviceChannels',
label: '设备通道数',
minWidth: 120,
},
{
prop: 'PlanName',
label: '所属计划',
search: { el: 'input' },
minWidth: 280,
},
{
prop: 'deviceUn',
label: '额定电压（V）',
minWidth: 130,
},
{
prop: 'deviceIn',
label: '额定电流（A）',
minWidth: 130,
},
{
prop: 'deviceCompany',
label: '制作厂商',
minWidth: 280,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
</script>

107
frontend/src/views/machine/testScript/index.vue
View File

@@ -1,10 +1,103 @@
<template>
<div>检测脚本</div>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='testScriptData'
>
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' >新增检测脚本</el-button>
<el-button type='primary' :icon='Download' plain >导出脚本数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
批量删除脚本
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' >查看</el-button>
<el-button type='primary' link :icon='EditPen' >编辑</el-button>
<el-button type='primary' link :icon='Delete' >删除</el-button>
<el-button type='primary' link :icon='Upload' >升级为模板</el-button>
</template>
</ProTable>
</div>
</template>
<script lang='ts' setup>
onMounted(()=>{
console.log()
})
<script setup lang='tsx' name='useRole'>
import { TestScript } from '@/api/testScript/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import testScriptDataList from '@/api/testScript/testScriptData'
import { useDictStore } from '@/stores/modules/dict'
import {
getTestScriptList,
} from '@/api/testScript/testScript'
const dictStore = useDictStore()
const testScriptData = testScriptDataList
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
return {
list: data.list,
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
newParams.createTime && (newParams.startTime = newParams.createTime[0])
newParams.createTime && (newParams.endTime = newParams.createTime[1])
delete newParams.createTime
return getTestScriptList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<TestScript.ResTestScriptList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'testScriptName',
label: '名称',
search: { el: 'input' },
minWidth: 350,
},
{
prop: 'testScriptValueType',
label: '值类型',
search: { el: 'input' },
minWidth: 150,
},
{
prop: 'testScriptType',
label: '模板类型',
search: { el: 'input' },
minWidth: 150,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
</script>
<style lang='scss' scoped>
</style>

103
frontend/src/views/machine/testSource/index.vue Normal file
View File

@@ -0,0 +1,103 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='testSourceData'
>
<!-- :requestApi="getRoleList" -->
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' >新增检测源</el-button>
<el-button type='primary' :icon='Download' plain >导出检测源数据</el-button>
<el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'>
批量删除脚本
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' >查看</el-button>
<el-button type='primary' link :icon='EditPen' >编辑</el-button>
<el-button type='primary' link :icon='Delete' >删除</el-button>
</template>
</ProTable>
</div>
</template>
<script setup lang='tsx' name='useRole'>
import { TestSource } from '@/api/testSource/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import ProTable from '@/components/ProTable/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import testSourceDataList from '@/api/testSource/testSourceData'
import { useDictStore } from '@/stores/modules/dict'
import {
getTestSourceList,
} from '@/api/testSource/testSource'
const dictStore = useDictStore()
const testSourceData = testSourceDataList
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
return {
list: data.list,
total: data.total,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
newParams.createTime && (newParams.startTime = newParams.createTime[0])
newParams.createTime && (newParams.endTime = newParams.createTime[1])
delete newParams.createTime
return getTestSourceList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
// 表格配置项
const columns = reactive<ColumnProps<TestSource.ResTestSourceList>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'testSourceName',
label: '名称',
search: { el: 'input' },
minWidth: 180,
},
{
prop: 'testSourceType',
label: '类型',
search: { el: 'input' },
minWidth: 220,
},
{
prop: 'testSourceModel',
label: '源类型',
search: { el: 'input' },
minWidth: 150,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
])
</script>