# title | # title | ||||
VITE_APP_TITLE = '河湖长眼' | |||||
VITE_APP_TITLE = '智飞' | |||||
# 端口号 | # 端口号 | ||||
VITE_PORT = 3000 | |||||
VITE_PORT = 3050 | |||||
VITE_SERVER = "/pilot/admin" | VITE_SERVER = "/pilot/admin" |
import { defAxios as request } from '@/utils/http' | |||||
/** | |||||
* 获取云盒列表(分页) | |||||
* @param {Object} | |||||
* @returns | |||||
*/ | |||||
export function boxPage(params) { | |||||
return request({ | |||||
url: '/cloudBox/index', | |||||
method: 'get', | |||||
params | |||||
}) | |||||
} | |||||
/** | |||||
* 获取云盒列表 | |||||
* params | |||||
* @returns | |||||
*/ | |||||
export function boxAll() { | |||||
return request({ | |||||
url: '/cloudBox/getList', | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* 创建盒子 | |||||
* @returns | |||||
*/ | |||||
export function boxCreate(data) { | |||||
return request({ | |||||
url: '/cloudBox/add', | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 编辑盒子 | |||||
* @returns | |||||
*/ | |||||
export function boxUpdate(data) { | |||||
return request({ | |||||
url: '/cloudBox/edit', | |||||
method: 'put', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 删除盒子 | |||||
* @returns | |||||
*/ | |||||
export function boxDelete(ids) { | |||||
return request({ | |||||
url: `/cloudBox/delete/${ids}`, | |||||
method: 'delete' | |||||
}) | |||||
} |
import { defAxios as request } from '@/utils/http' | |||||
/** | |||||
* 获取挂载设备列表(分页) | |||||
* @param {Object} | |||||
* @returns | |||||
*/ | |||||
export function mountPage(params) { | |||||
return request({ | |||||
url: '/equipmentMount/index', | |||||
method: 'get', | |||||
params | |||||
}) | |||||
} | |||||
/** | |||||
* 获取挂载设备 | |||||
* params | |||||
* @returns | |||||
*/ | |||||
export function mountAll() { | |||||
return request({ | |||||
url: '/equipmentMount/getList', | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* 创建挂载设备 | |||||
* @returns | |||||
*/ | |||||
export function mountCreate(data) { | |||||
return request({ | |||||
url: '/equipmentMount/add', | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 编辑挂载设备 | |||||
* @returns | |||||
*/ | |||||
export function mountUpdate(data) { | |||||
return request({ | |||||
url: '/equipmentMount/edit', | |||||
method: 'put', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 删除挂载设备 | |||||
* @returns | |||||
*/ | |||||
export function mountDelete(ids) { | |||||
return request({ | |||||
url: `/equipmentMount/delete/${ids}`, | |||||
method: 'delete' | |||||
}) | |||||
} |
import { defAxios as request } from '@/utils/http' | |||||
/** | |||||
* 获取挂载设备列表(分页) | |||||
* @param {Object} | |||||
* @returns | |||||
*/ | |||||
export function uvaPage(params) { | |||||
return request({ | |||||
url: '/equipment/index', | |||||
method: 'get', | |||||
params | |||||
}) | |||||
} | |||||
/** | |||||
* 获取挂载设备 | |||||
* params | |||||
* @returns | |||||
*/ | |||||
export function uvaAll() { | |||||
return request({ | |||||
url: '/equipment/getList', | |||||
method: 'get' | |||||
}) | |||||
} | |||||
/** | |||||
* 创建挂载设备 | |||||
* @returns | |||||
*/ | |||||
export function uvaCreate(data) { | |||||
return request({ | |||||
url: '/equipment/add', | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 编辑挂载设备 | |||||
* @returns | |||||
*/ | |||||
export function uvaUpdate(data) { | |||||
return request({ | |||||
url: '/equipment/edit', | |||||
method: 'put', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 删除挂载设备 | |||||
* @returns | |||||
*/ | |||||
export function uvaDelete(ids) { | |||||
return request({ | |||||
url: `/equipment/delete/${ids}`, | |||||
method: 'delete' | |||||
}) | |||||
} |
import { defAxios as request } from '@/utils/http' | |||||
/** | |||||
* 获取用户列表(分页) | |||||
* @param {Object} | |||||
* @returns | |||||
*/ | |||||
export function userPage(params) { | |||||
return request({ | |||||
url: '/user/index', | |||||
method: 'get', | |||||
params | |||||
}) | |||||
} | |||||
/** | |||||
* 创建用户 | |||||
* @returns | |||||
*/ | |||||
export function userCreate(data) { | |||||
return request({ | |||||
url: '/user/add', | |||||
method: 'post', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 编辑用户 | |||||
* @returns | |||||
*/ | |||||
export function userUpdate(data) { | |||||
return request({ | |||||
url: '/user/edit', | |||||
method: 'put', | |||||
data | |||||
}) | |||||
} | |||||
/** | |||||
* 删除用户 | |||||
* @returns | |||||
*/ | |||||
export function userDelete(ids) { | |||||
return request({ | |||||
url: `/delete/${ids}`, | |||||
method: 'delete' | |||||
}) | |||||
} |
} | } | ||||
}, | }, | ||||
{ | { | ||||
path: 'equipment-manage', | |||||
component: () => import('@/views/equipment-library/equipment-manage/index.vue'), | |||||
path: 'mount-manage', | |||||
component: () => import('@/views/equipment-library/mount-manage/index.vue'), | |||||
name: 'EquipmentMount', | name: 'EquipmentMount', | ||||
title: '挂载设备', | title: '挂载设备', | ||||
meta: { | meta: { | ||||
title: '盒子管理', | |||||
title: '挂载设备', | |||||
role: ['admin'] | role: ['admin'] | ||||
} | } | ||||
}, | }, |
{ label: '在用', value: 1 }, | { label: '在用', value: 1 }, | ||||
{ label: '停用', value: 2 } | { label: '停用', value: 2 } | ||||
] | ] | ||||
export const ROLE_TYPE = [ | |||||
{ label: '管理员', value: 1 }, | |||||
{ label: '飞手', value: 2 } | |||||
] | |||||
export const EQUIPMENT_TYPE = [ | |||||
{ label: '高清相机', value: 1 }, | |||||
{ label: '多光谱相机', value: 2 }, | |||||
{ label: '空中喊话', value: 3 }, | |||||
{ label: '大功率照明', value: 4 }, | |||||
{ label: '双光热成像相机', value: 5 }, | |||||
{ label: '抛投钩', value: 6 }, | |||||
{ label: '抛投绳', value: 7 }, | |||||
{ label: '无人机喷火枪', value: 8 }, | |||||
{ label: '灭火弹抛投器', value: 9 }, | |||||
{ label: '气体采集盒', value: 10 }, | |||||
{ label: '无人机取水器', value: 11 }, | |||||
{ label: '其他', value: 12 } | |||||
] | |||||
export const POWER_TYPE = [ | |||||
{ label: '电动', value: 1 }, | |||||
{ label: '油动', value: 2 }, | |||||
{ label: '混合', value: 3 } | |||||
] |
if (isWithoutToken(config)) { | if (isWithoutToken(config)) { | ||||
return config | return config | ||||
} | } | ||||
const token = getToken() | |||||
// const token = getToken() | |||||
const token = 'token' | |||||
if (token) { | if (token) { | ||||
config.headers.Authorization = token | config.headers.Authorization = token | ||||
return config | return config |
return /^(https?:|mailto:|tel:)/.test(path) | return /^(https?:|mailto:|tel:)/.test(path) | ||||
} | } | ||||
export function isPhone(phone) { | |||||
const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/ | |||||
return reg.test(phone) | |||||
} | |||||
export const isServer = typeof window === 'undefined' | export const isServer = typeof window === 'undefined' | ||||
export const isClient = !isServer | export const isClient = !isServer |
<template> | |||||
<Modal | |||||
:options="getModalOptions" | |||||
:on-positive-click="handleConfirm" | |||||
:on-negative-click="handleClose" | |||||
:on-close="handleClose" | |||||
> | |||||
<template #Context> | |||||
<n-form | |||||
ref="formRef" | |||||
:model="BoxForm" | |||||
:rules="BoxRules" | |||||
:label-width="80" | |||||
label-placement="left" | |||||
require-mark-placement="left" | |||||
:disabled="disabled" | |||||
> | |||||
<template v-for="(item,index) in getFormOptions" :key="index"> | |||||
<n-form-item :label="item.label" :path="item.key"> | |||||
<n-input v-if="item.type === 'input'" v-model:value="BoxForm[item.key]" v-bind="item.props" /> | |||||
</n-form-item> | |||||
</template> | |||||
</n-form> | |||||
</template> | |||||
</Modal> | |||||
</template> | |||||
<script> | |||||
import { form } from '../tools/form.js' | |||||
import { defineComponent, ref, reactive, computed, toRefs } from 'vue' | |||||
import { boxCreate, boxUpdate } from '@/api/equipment/box.js' | |||||
import Modal from '@/components/Modal/index.vue' | |||||
export default defineComponent({ | |||||
name: 'BoxModal', | |||||
components: { Modal }, | |||||
props: { | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
type: { | |||||
type: String, | |||||
default: 'create' | |||||
}, | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null, | |||||
'reload': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const MODAL_TYPE = { | |||||
'create': '新建盒子信息', | |||||
'preview': '盒子详情', | |||||
'update': '编辑盒子信息' | |||||
} | |||||
const { BoxForm, BoxRules } = form | |||||
const formRef = ref() | |||||
const data = reactive({ | |||||
BoxForm: { | |||||
...BoxForm, | |||||
...props.data | |||||
}, | |||||
BoxRules: { | |||||
...BoxRules | |||||
}, | |||||
disabled: props.type === 'preview' | |||||
}) | |||||
const getModalOptions = computed(() => { | |||||
return { | |||||
title: MODAL_TYPE[props.type], | |||||
show: props.visible, | |||||
negativeText: '取消', | |||||
positiveText: '确认' | |||||
} | |||||
}) | |||||
const getFormOptions = computed(() => { | |||||
return { | |||||
...form.formItem | |||||
} | |||||
}) | |||||
function handleConfirm() { | |||||
formRef.value?.validate((errors) => { | |||||
if (!errors) { | |||||
const params = { ...data.BoxForm } | |||||
if (params.id) { | |||||
/* 编辑 */ | |||||
boxUpdate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} else { | |||||
/* 新增 */ | |||||
boxCreate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} | |||||
} else { | |||||
$message.error('请完善必填信息') | |||||
} | |||||
}) | |||||
} | |||||
/* 关闭弹窗 */ | |||||
const handleClose = () => { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
formRef, | |||||
getModalOptions, | |||||
getFormOptions, | |||||
handleConfirm, | |||||
handleClose | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
</style> |
<template> | <template> | ||||
<div> | <div> | ||||
盒子管理 | |||||
<n-card> | |||||
<headSearch :info="search" @search="handleSearch" @reset="handleSearch" /> | |||||
<data-table | |||||
ref="tableRef" | |||||
:columns="columns" | |||||
:request="loadDataTable" | |||||
:row-key="(row) => row.id" | |||||
size="large" | |||||
@update:checked-row-keys="handleCheck" | |||||
> | |||||
<template #tableTitle> | |||||
<n-button type="primary" @click="handleModal"> 新建 </n-button> | |||||
<n-popconfirm | |||||
negative-text="取消" | |||||
positive-text="确认" | |||||
@positive-click="handleDelete" | |||||
> | |||||
<template #trigger> | |||||
<n-button type="primary"> 删除 </n-button> | |||||
</template> | |||||
确认要删除选中数据吗? | |||||
</n-popconfirm> | |||||
</template> | |||||
</data-table> | |||||
</n-card> | |||||
</div> | </div> | ||||
<!-- 新增、编辑弹窗 --> | |||||
<BoxModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" :type="modalType" @reload="handleSearch" /> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import search from './tools/search.js' | |||||
import table from './tools/table.js' | |||||
import headSearch from '@/components/Search/index.vue' | |||||
import dataTable from '@/components/DataTable/index.vue' | |||||
import BoxModal from './components/BoxModal.vue' | |||||
import { ref, unref, toRefs, reactive, onUnmounted } from 'vue' | |||||
import { boxPage } from '@/api/equipment/box.js' | |||||
export default { | export default { | ||||
name: 'BoxManage', | name: 'BoxManage', | ||||
components: { dataTable, BoxModal, headSearch }, | |||||
setup() { | setup() { | ||||
const data = reactive({ | |||||
...toRefs(table), | |||||
search | |||||
}) | |||||
const loadDataTable = async(res) => { | |||||
const _params = { | |||||
...unref(data.searchParams), | |||||
...res | |||||
} | |||||
return await boxPage(_params) | |||||
} | |||||
// 新增 | |||||
function handleModal() { | |||||
data.rowData = null | |||||
data.modalType = 'create' | |||||
data.modalShow = true | |||||
} | |||||
const selectedIds = ref([]) | |||||
function handleCheck(rowKeys) { | |||||
selectedIds.value = rowKeys | |||||
} | |||||
function handleDelete() { | |||||
if (selectedIds.value.length) { | |||||
data.deleteData(selectedIds.value) | |||||
} else { | |||||
$message.warning('请至少选中一条数据') | |||||
} | |||||
} | |||||
onUnmounted(() => { | |||||
data.searchParams = null | |||||
}) | |||||
return { | |||||
...toRefs(data), | |||||
loadDataTable, | |||||
handleModal, | |||||
handleDelete, | |||||
handleCheck | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped lang='scss'> | <style scoped lang='scss'> | ||||
.n-button + .n-button { | |||||
margin-left: 10px; | |||||
} | |||||
</style> | </style> |
import { reactive } from 'vue' | |||||
export const form = reactive({ | |||||
BoxForm: { | |||||
boxSn: null, | |||||
boxName: null, | |||||
streamCode: null | |||||
}, | |||||
BoxRules: { | |||||
boxSn: [{ required: true, message: '请输入设备编号', trigger: 'blur' }], | |||||
boxName: [{ required: true, message: '请输入盒子名称', type: 'string', trigger: 'blur' }], | |||||
streamCode: [{ required: true, type: 'number', message: '请输入通道编码', trigger: 'blur' }] | |||||
}, | |||||
formItem: [ | |||||
{ type: 'input', key: 'boxSn', label: '设备编号', props: { maxlength: '20', placeholder: '请输入设备编号', clearable: true }}, | |||||
{ type: 'input', key: 'boxName', label: '盒子名称', props: { maxlength: '20', placeholder: '请输入盒子名称', clearable: true }}, | |||||
{ type: 'input', key: 'streamCode', label: '通道编码', props: { maxlength: '20', placeholder: '请输入通道编码', clearable: true }} | |||||
] | |||||
}) |
import { reactive } from 'vue' | |||||
const data = reactive([ | |||||
{ | |||||
label: '盒子名称', | |||||
key: 'boxName', | |||||
props: { | |||||
placeholder: '请输入盒子名称' | |||||
} | |||||
} | |||||
]) | |||||
export default data | |||||
import { h, ref, reactive } from 'vue' | |||||
import TableAction from '@/components/DataTable/tools/Action.vue' | |||||
import { boxDelete } from '@/api/equipment/box.js' | |||||
/* 注册table */ | |||||
const tableRef = ref() | |||||
const searchParams = ref() | |||||
function handleSearch(params) { | |||||
searchParams.value = { ...params } | |||||
tableRef.value.reFetch({ searchParams }) | |||||
} | |||||
/** | |||||
* @description: 获取数据及操作 | |||||
* @param {*} row 单行数据 | |||||
* @param {*} type 操作类型 create:创建,preview:预览,edit:编辑 | |||||
* @return {*} | |||||
*/ | |||||
function getRowData(row, type) { | |||||
data.rowData = row | |||||
data.modalType = type | |||||
data.modalShow = true | |||||
} | |||||
// 删除接口 | |||||
function deleteData(data) { | |||||
boxDelete(data) | |||||
.then((res) => { | |||||
if (res.code === 0) { | |||||
handleSearch() | |||||
} | |||||
}) | |||||
.catch((e) => { | |||||
console.log(e) | |||||
}) | |||||
} | |||||
const data = reactive({ | |||||
tableRef, | |||||
searchParams, | |||||
rowData: {}, | |||||
modalType: 'create', | |||||
modalShow: false, | |||||
configModalShow: false, | |||||
handleSearch, | |||||
deleteData, | |||||
columns: [ | |||||
{ type: 'selection' }, | |||||
{ | |||||
title: '设备编号', | |||||
key: 'boxSn', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '盒子名称', | |||||
key: 'boxName', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '通道编码', | |||||
key: 'streamCode', | |||||
align: 'center', | |||||
Minwidth: 160 | |||||
}, | |||||
{ | |||||
title: '创建时间', | |||||
key: 'createTime', | |||||
align: 'center', | |||||
Minwidth: 160 | |||||
}, | |||||
{ | |||||
title: '创建人', | |||||
key: 'createUser', | |||||
align: 'center', | |||||
width: 100 | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
width: 150, | |||||
fixed: 'right', | |||||
render(row) { | |||||
return h(TableAction, { | |||||
actions: [ | |||||
{ | |||||
label: '编辑', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: getRowData.bind(null, row, 'update') | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '删除', | |||||
type: 'popconfirm', | |||||
auth: 'basic_list', | |||||
tip: '确定删除这条数据吗?', | |||||
props: { | |||||
onPositiveClick: deleteData.bind(null, [row.id]) | |||||
}, | |||||
ButtonProps: { | |||||
text: true, | |||||
type: 'primary' | |||||
} | |||||
} | |||||
], | |||||
align: 'center' | |||||
}) | |||||
} | |||||
} | |||||
] | |||||
}) | |||||
export default data |
<template> | |||||
<div> | |||||
挂载设备 | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'EquipmentManage', | |||||
setup() { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
</style> |
<template> | |||||
<Modal | |||||
:options="getModalOptions" | |||||
:on-positive-click="handleConfirm" | |||||
:on-negative-click="handleClose" | |||||
:on-close="handleClose" | |||||
> | |||||
<template #Context> | |||||
<n-form | |||||
ref="formRef" | |||||
:model="mountForm" | |||||
:rules="mountRules" | |||||
:label-width="80" | |||||
label-placement="left" | |||||
require-mark-placement="left" | |||||
:disabled="disabled" | |||||
> | |||||
<template v-for="(item,index) in getFormOptions" :key="index"> | |||||
<n-form-item :label="item.label" :path="item.key"> | |||||
<n-input v-if="item.type === 'input'" v-model:value="mountForm[item.key]" v-bind="item.props" /> | |||||
<n-select v-if="item.type === 'select'" v-model:value="mountForm[item.key]" v-bind="item.props" /> | |||||
</n-form-item> | |||||
</template> | |||||
</n-form> | |||||
</template> | |||||
</Modal> | |||||
</template> | |||||
<script> | |||||
import { form } from '../tools/form.js' | |||||
import { defineComponent, ref, reactive, computed, toRefs } from 'vue' | |||||
import { mountCreate, mountUpdate } from '@/api/equipment/mount.js' | |||||
import Modal from '@/components/Modal/index.vue' | |||||
export default defineComponent({ | |||||
name: 'MountModal', | |||||
components: { Modal }, | |||||
props: { | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
type: { | |||||
type: String, | |||||
default: 'create' | |||||
}, | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null, | |||||
'reload': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const MODAL_TYPE = { | |||||
'create': '新建盒子信息', | |||||
'preview': '盒子详情', | |||||
'update': '编辑盒子信息' | |||||
} | |||||
const { mountForm, mountRules } = form | |||||
const formRef = ref() | |||||
const data = reactive({ | |||||
mountForm: { | |||||
...mountForm, | |||||
...props.data | |||||
}, | |||||
mountRules: { | |||||
...mountRules | |||||
}, | |||||
disabled: props.type === 'preview' | |||||
}) | |||||
const getModalOptions = computed(() => { | |||||
return { | |||||
title: MODAL_TYPE[props.type], | |||||
show: props.visible, | |||||
negativeText: '取消', | |||||
positiveText: '确认' | |||||
} | |||||
}) | |||||
const getFormOptions = computed(() => { | |||||
return { | |||||
...form.formItem | |||||
} | |||||
}) | |||||
function handleConfirm() { | |||||
formRef.value?.validate((errors) => { | |||||
if (!errors) { | |||||
const params = { ...data.mountForm } | |||||
if (params.id) { | |||||
/* 编辑 */ | |||||
mountUpdate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} else { | |||||
/* 新增 */ | |||||
mountCreate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} | |||||
} else { | |||||
$message.error('请完善必填信息') | |||||
} | |||||
}) | |||||
} | |||||
/* 关闭弹窗 */ | |||||
const handleClose = () => { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
formRef, | |||||
getModalOptions, | |||||
getFormOptions, | |||||
handleConfirm, | |||||
handleClose | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
</style> |
<template> | |||||
<div> | |||||
<n-card> | |||||
<headSearch :info="search" @search="handleSearch" @reset="handleSearch" /> | |||||
<data-table | |||||
ref="tableRef" | |||||
:columns="columns" | |||||
:request="loadDataTable" | |||||
:row-key="(row) => row.id" | |||||
size="large" | |||||
@update:checked-row-keys="handleCheck" | |||||
> | |||||
<template #tableTitle> | |||||
<n-button type="primary" @click="handleModal"> 新建 </n-button> | |||||
<n-popconfirm | |||||
negative-text="取消" | |||||
positive-text="确认" | |||||
@positive-click="handleDelete" | |||||
> | |||||
<template #trigger> | |||||
<n-button type="primary"> 删除 </n-button> | |||||
</template> | |||||
确认要删除选中数据吗? | |||||
</n-popconfirm> | |||||
</template> | |||||
</data-table> | |||||
</n-card> | |||||
</div> | |||||
<!-- 新增、编辑弹窗 --> | |||||
<MountModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" :type="modalType" @reload="handleSearch" /> | |||||
</template> | |||||
<script> | |||||
import search from './tools/search.js' | |||||
import table from './tools/table.js' | |||||
import headSearch from '@/components/Search/index.vue' | |||||
import dataTable from '@/components/DataTable/index.vue' | |||||
import MountModal from './components/MountModal.vue' | |||||
import { ref, unref, toRefs, reactive, onUnmounted } from 'vue' | |||||
import { mountPage } from '@/api/equipment/mount.js' | |||||
export default { | |||||
name: 'BoxManage', | |||||
components: { dataTable, MountModal, headSearch }, | |||||
setup() { | |||||
const data = reactive({ | |||||
...toRefs(table), | |||||
search | |||||
}) | |||||
const loadDataTable = async(res) => { | |||||
const _params = { | |||||
...unref(data.searchParams), | |||||
...res | |||||
} | |||||
return await mountPage(_params) | |||||
} | |||||
// 新增 | |||||
function handleModal() { | |||||
data.rowData = null | |||||
data.modalType = 'create' | |||||
data.modalShow = true | |||||
} | |||||
const selectedIds = ref([]) | |||||
function handleCheck(rowKeys) { | |||||
selectedIds.value = rowKeys | |||||
} | |||||
function handleDelete() { | |||||
if (selectedIds.value.length) { | |||||
data.deleteData(selectedIds.value) | |||||
} else { | |||||
$message.warning('请至少选中一条数据') | |||||
} | |||||
} | |||||
onUnmounted(() => { | |||||
data.searchParams = null | |||||
}) | |||||
return { | |||||
...toRefs(data), | |||||
loadDataTable, | |||||
handleModal, | |||||
handleDelete, | |||||
handleCheck | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
.n-button + .n-button { | |||||
margin-left: 10px; | |||||
} | |||||
</style> |
import { reactive } from 'vue' | |||||
import { EQUIPMENT_TYPE } from '@/utils/dictionary.js' | |||||
export const form = reactive({ | |||||
mountForm: { | |||||
code: null, | |||||
name: null, | |||||
type: null | |||||
}, | |||||
mountRules: { | |||||
boxSn: [{ required: true, message: '请输入设备编号', trigger: 'blur' }], | |||||
name: [{ required: true, message: '请输入盒子名称', type: 'string', trigger: 'blur' }], | |||||
type: [{ required: true, type: 'number', message: '请输入通道编码', trigger: 'blur' }] | |||||
}, | |||||
formItem: [ | |||||
{ type: 'input', key: 'code', label: '设备编号', props: { maxlength: '20', placeholder: '请输入设备编号', clearable: true }}, | |||||
{ type: 'input', key: 'name', label: '盒子名称', props: { maxlength: '20', placeholder: '请输入盒子名称', clearable: true }}, | |||||
{ type: 'select', key: 'type', label: '设备类型', props: { options: EQUIPMENT_TYPE, clearable: true }}, | |||||
{ type: 'input', key: 'note', label: '备注', props: { type: 'textarea', autosize: { maxlength: '200', minRows: 3, maxRows: 3 }}} | |||||
] | |||||
}) |
import { reactive } from 'vue' | |||||
const data = reactive([ | |||||
{ | |||||
label: '设备名称', | |||||
key: 'name', | |||||
props: { | |||||
placeholder: '请输入设备名称' | |||||
} | |||||
} | |||||
]) | |||||
export default data | |||||
import { h, ref, reactive } from 'vue' | |||||
import TableTags from '@/components/DataTable/tools/Tags.vue' | |||||
import TableAction from '@/components/DataTable/tools/Action.vue' | |||||
import { mountDelete } from '@/api/equipment/mount.js' | |||||
import { EQUIPMENT_TYPE } from '@/utils/dictionary.js' | |||||
/* 注册table */ | |||||
const tableRef = ref() | |||||
const searchParams = ref() | |||||
function handleSearch(params) { | |||||
searchParams.value = { ...params } | |||||
tableRef.value.reFetch({ searchParams }) | |||||
} | |||||
/** | |||||
* @description: 获取数据及操作 | |||||
* @param {*} row 单行数据 | |||||
* @param {*} type 操作类型 create:创建,preview:预览,edit:编辑 | |||||
* @return {*} | |||||
*/ | |||||
function getRowData(row, type) { | |||||
data.rowData = row | |||||
data.modalType = type | |||||
data.modalShow = true | |||||
} | |||||
// 删除接口 | |||||
function deleteData(data) { | |||||
mountDelete(data) | |||||
.then((res) => { | |||||
if (res.code === 0) { | |||||
handleSearch() | |||||
} | |||||
}) | |||||
.catch((e) => { | |||||
console.log(e) | |||||
}) | |||||
} | |||||
const data = reactive({ | |||||
tableRef, | |||||
searchParams, | |||||
rowData: {}, | |||||
modalType: 'create', | |||||
modalShow: false, | |||||
configModalShow: false, | |||||
handleSearch, | |||||
deleteData, | |||||
columns: [ | |||||
{ type: 'selection' }, | |||||
{ | |||||
title: '设备编号', | |||||
key: 'code', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '设备名称', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '设备类型', | |||||
key: 'type', | |||||
align: 'center', | |||||
render(row) { | |||||
return h(TableTags, { | |||||
data: row.type, | |||||
filters: EQUIPMENT_TYPE | |||||
}) | |||||
} | |||||
}, | |||||
{ | |||||
title: '创建时间', | |||||
key: 'createTime', | |||||
align: 'center', | |||||
Minwidth: 160 | |||||
}, | |||||
{ | |||||
title: '创建人', | |||||
key: 'createUser', | |||||
align: 'center', | |||||
width: 100 | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
width: 150, | |||||
fixed: 'right', | |||||
render(row) { | |||||
return h(TableAction, { | |||||
actions: [ | |||||
{ | |||||
label: '编辑', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: getRowData.bind(null, row, 'update') | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '删除', | |||||
type: 'popconfirm', | |||||
auth: 'basic_list', | |||||
tip: '确定删除这条数据吗?', | |||||
props: { | |||||
onPositiveClick: deleteData.bind(null, [row.id]) | |||||
}, | |||||
ButtonProps: { | |||||
text: true, | |||||
type: 'primary' | |||||
} | |||||
} | |||||
], | |||||
align: 'center' | |||||
}) | |||||
} | |||||
} | |||||
] | |||||
}) | |||||
export default data |
<template> | |||||
<Modal | |||||
:options="getModalOptions" | |||||
:on-positive-click="handleConfirm" | |||||
:on-negative-click="handleClose" | |||||
:on-close="handleClose" | |||||
> | |||||
<template #Context> | |||||
<n-form | |||||
ref="formRef" | |||||
:model="uvaForm" | |||||
:rules="uvaRules" | |||||
:label-width="80" | |||||
label-placement="left" | |||||
require-mark-placement="left" | |||||
:disabled="disabled" | |||||
> | |||||
<template v-for="(item,index) in getFormOptions" :key="index"> | |||||
<n-form-item :label="item.label" :path="item.key"> | |||||
<n-input v-if="item.type === 'input'" v-model:value="uvaForm[item.key]" v-bind="item.props" /> | |||||
<n-select v-if="item.type === 'select'" v-model:value="uvaForm[item.key]" v-bind="item.props" /> | |||||
<n-input-number v-if="item.type === 'number'" v-model:value="uvaForm[item.key]" v-bind="item.props"> | |||||
<template v-if="item.suffix" #suffix> | |||||
{{ item.suffix }} | |||||
</template> | |||||
</n-input-number> | |||||
</n-form-item> | |||||
</template> | |||||
</n-form> | |||||
</template> | |||||
</Modal> | |||||
</template> | |||||
<script> | |||||
import { form } from '../tools/form.js' | |||||
import { defineComponent, ref, reactive, computed, toRefs } from 'vue' | |||||
import { uvaCreate, uvaUpdate } from '@/api/equipment/uva.js' | |||||
import Modal from '@/components/Modal/index.vue' | |||||
export default defineComponent({ | |||||
name: 'UvaModal', | |||||
components: { Modal }, | |||||
props: { | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
type: { | |||||
type: String, | |||||
default: 'create' | |||||
}, | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null, | |||||
'reload': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const MODAL_TYPE = { | |||||
'create': '新建盒子信息', | |||||
'preview': '盒子详情', | |||||
'update': '编辑盒子信息' | |||||
} | |||||
const { uvaForm, uvaRules } = form | |||||
const formRef = ref() | |||||
const data = reactive({ | |||||
uvaForm: { | |||||
...uvaForm, | |||||
...props.data | |||||
}, | |||||
uvaRules: { | |||||
...uvaRules | |||||
}, | |||||
disabled: props.type === 'preview' | |||||
}) | |||||
const getModalOptions = computed(() => { | |||||
return { | |||||
title: MODAL_TYPE[props.type], | |||||
show: props.visible, | |||||
negativeText: '取消', | |||||
positiveText: '确认' | |||||
} | |||||
}) | |||||
const getFormOptions = computed(() => { | |||||
return { | |||||
...form.formItem | |||||
} | |||||
}) | |||||
function handleConfirm() { | |||||
formRef.value?.validate((errors) => { | |||||
if (!errors) { | |||||
const params = { ...data.uvaForm } | |||||
if (params.id) { | |||||
/* 编辑 */ | |||||
uvaUpdate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} else { | |||||
/* 新增 */ | |||||
uvaCreate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} | |||||
} else { | |||||
$message.error('请完善必填信息') | |||||
} | |||||
}) | |||||
} | |||||
/* 关闭弹窗 */ | |||||
const handleClose = () => { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
formRef, | |||||
getModalOptions, | |||||
getFormOptions, | |||||
handleConfirm, | |||||
handleClose | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
.n-input-number{ | |||||
width: 100%; | |||||
} | |||||
</style> |
<template> | <template> | ||||
<div> | <div> | ||||
无人机管理 | |||||
<n-card> | |||||
<headSearch :info="search" @search="handleSearch" @reset="handleSearch" /> | |||||
<data-table | |||||
ref="tableRef" | |||||
:columns="columns" | |||||
:request="loadDataTable" | |||||
:row-key="(row) => row.id" | |||||
size="large" | |||||
@update:checked-row-keys="handleCheck" | |||||
> | |||||
<template #tableTitle> | |||||
<n-button type="primary" @click="handleModal"> 新建 </n-button> | |||||
<n-popconfirm | |||||
negative-text="取消" | |||||
positive-text="确认" | |||||
@positive-click="handleDelete" | |||||
> | |||||
<template #trigger> | |||||
<n-button type="primary"> 删除 </n-button> | |||||
</template> | |||||
确认要删除选中数据吗? | |||||
</n-popconfirm> | |||||
</template> | |||||
</data-table> | |||||
</n-card> | |||||
</div> | </div> | ||||
<!-- 新增、编辑弹窗 --> | |||||
<UVAModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" :type="modalType" @reload="handleSearch" /> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import search from './tools/search.js' | |||||
import table from './tools/table.js' | |||||
import headSearch from '@/components/Search/index.vue' | |||||
import dataTable from '@/components/DataTable/index.vue' | |||||
import UVAModal from './components/UVAModal.vue' | |||||
import { ref, unref, toRefs, reactive, onUnmounted } from 'vue' | |||||
import { uvaPage } from '@/api/equipment/uva.js' | |||||
export default { | export default { | ||||
name: 'UVAManage', | |||||
name: 'BoxManage', | |||||
components: { dataTable, UVAModal, headSearch }, | |||||
setup() { | setup() { | ||||
const data = reactive({ | |||||
...toRefs(table), | |||||
search | |||||
}) | |||||
const loadDataTable = async(res) => { | |||||
const _params = { | |||||
...unref(data.searchParams), | |||||
...res | |||||
} | |||||
return await uvaPage(_params) | |||||
} | |||||
// 新增 | |||||
function handleModal() { | |||||
data.rowData = null | |||||
data.modalType = 'create' | |||||
data.modalShow = true | |||||
} | |||||
const selectedIds = ref([]) | |||||
function handleCheck(rowKeys) { | |||||
selectedIds.value = rowKeys | |||||
} | |||||
function handleDelete() { | |||||
if (selectedIds.value.length) { | |||||
data.deleteData(selectedIds.value) | |||||
} else { | |||||
$message.warning('请至少选中一条数据') | |||||
} | |||||
} | |||||
onUnmounted(() => { | |||||
data.searchParams = null | |||||
}) | |||||
return { | |||||
...toRefs(data), | |||||
loadDataTable, | |||||
handleModal, | |||||
handleDelete, | |||||
handleCheck | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped lang='scss'> | <style scoped lang='scss'> | ||||
.n-button + .n-button { | |||||
margin-left: 10px; | |||||
} | |||||
</style> | </style> |
import { reactive } from 'vue' | |||||
import { POWER_TYPE } from '@/utils/dictionary.js' | |||||
export const form = reactive({ | |||||
uvaForm: { | |||||
code: null, | |||||
name: null, | |||||
powerType: null, | |||||
accuracy: null, | |||||
manufacturer: null | |||||
}, | |||||
uvaRules: { | |||||
code: [{ required: true, message: '请输入设备编号', trigger: 'blur' }], | |||||
name: [{ required: true, message: '请输入盒子名称', type: 'string', trigger: 'blur' }], | |||||
powerType: [{ required: true, type: 'number', message: '请选择动力类型', trigger: 'blur' }], | |||||
accuracy: [{ required: true, type: 'number', message: '请输入定位精度', trigger: 'blur' }], | |||||
manufacturer: [{ required: true, message: '请输入生产厂家', trigger: 'blur' }] | |||||
}, | |||||
formItem: [ | |||||
{ type: 'input', key: 'code', label: '设备编号', props: { maxlength: '20', placeholder: '请输入设备编号', clearable: true }}, | |||||
{ type: 'input', key: 'name', label: '设备名称', props: { maxlength: '20', placeholder: '请输入盒子名称', clearable: true }}, | |||||
{ type: 'select', key: 'powerType', label: '动力类型', props: { options: POWER_TYPE, clearable: true }}, | |||||
{ type: 'number', key: 'accuracy', label: '定位精度', props: { min: 0, placeholder: '请输入通道编码', showButton: false, clearable: true }, suffix: '米' }, | |||||
{ type: 'input', key: 'manufacturer', label: '生产厂家', props: { maxlength: '20', placeholder: '请输入生产厂家', clearable: true }} | |||||
] | |||||
}) |
import { reactive } from 'vue' | |||||
const data = reactive([ | |||||
{ | |||||
label: '设备名称', | |||||
key: 'name', | |||||
props: { | |||||
placeholder: '请输入设备名称' | |||||
} | |||||
} | |||||
]) | |||||
export default data | |||||
import { h, ref, reactive } from 'vue' | |||||
import TableTags from '@/components/DataTable/tools/Tags.vue' | |||||
import TableAction from '@/components/DataTable/tools/Action.vue' | |||||
import { uvaDelete } from '@/api/equipment/uva.js' | |||||
import { POWER_TYPE } from '@/utils/dictionary.js' | |||||
/* 注册table */ | |||||
const tableRef = ref() | |||||
const searchParams = ref() | |||||
function handleSearch(params) { | |||||
searchParams.value = { ...params } | |||||
tableRef.value.reFetch({ searchParams }) | |||||
} | |||||
/** | |||||
* @description: 获取数据及操作 | |||||
* @param {*} row 单行数据 | |||||
* @param {*} type 操作类型 create:创建,preview:预览,edit:编辑 | |||||
* @return {*} | |||||
*/ | |||||
function getRowData(row, type) { | |||||
data.rowData = row | |||||
data.modalType = type | |||||
data.modalShow = true | |||||
} | |||||
// 删除接口 | |||||
function deleteData(data) { | |||||
uvaDelete(data) | |||||
.then((res) => { | |||||
if (res.code === 0) { | |||||
handleSearch() | |||||
} | |||||
}) | |||||
.catch((e) => { | |||||
console.log(e) | |||||
}) | |||||
} | |||||
const data = reactive({ | |||||
tableRef, | |||||
searchParams, | |||||
rowData: {}, | |||||
modalType: 'create', | |||||
modalShow: false, | |||||
configModalShow: false, | |||||
handleSearch, | |||||
deleteData, | |||||
columns: [ | |||||
{ type: 'selection' }, | |||||
{ | |||||
title: '设备编号', | |||||
key: 'code', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '设备名称', | |||||
key: 'name', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '动力类型', | |||||
key: 'powerType', | |||||
align: 'center', | |||||
render(row) { | |||||
return h(TableTags, { | |||||
data: row.powerType, | |||||
filters: POWER_TYPE | |||||
}) | |||||
} | |||||
}, | |||||
{ | |||||
title: '定位精度', | |||||
key: 'accuracy', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '生产厂家', | |||||
key: 'manufacturer', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
width: 150, | |||||
fixed: 'right', | |||||
render(row) { | |||||
return h(TableAction, { | |||||
actions: [ | |||||
{ | |||||
label: '编辑', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: getRowData.bind(null, row, 'update') | |||||
}, | |||||
auth: 'basic_list' | |||||
}, | |||||
{ | |||||
label: '删除', | |||||
type: 'popconfirm', | |||||
auth: 'basic_list', | |||||
tip: '确定删除这条数据吗?', | |||||
props: { | |||||
onPositiveClick: deleteData.bind(null, [row.id]) | |||||
}, | |||||
ButtonProps: { | |||||
text: true, | |||||
type: 'primary' | |||||
} | |||||
} | |||||
], | |||||
align: 'center' | |||||
}) | |||||
} | |||||
} | |||||
] | |||||
}) | |||||
export default data |
<template> | |||||
<Modal | |||||
:options="getModalOptions" | |||||
:on-positive-click="handleConfirm" | |||||
:on-negative-click="handleClose" | |||||
:on-close="handleClose" | |||||
> | |||||
<template #Context> | |||||
<n-form | |||||
ref="formRef" | |||||
:model="userForm" | |||||
:rules="userRules" | |||||
:label-width="80" | |||||
label-placement="left" | |||||
require-mark-placement="left" | |||||
:disabled="disabled" | |||||
> | |||||
<template v-for="(item,index) in getFormOptions" :key="index"> | |||||
<n-form-item :label="item.label" :path="item.key"> | |||||
<n-input v-if="item.type === 'input'" v-model:value="userForm[item.key]" v-bind="item.props" /> | |||||
<n-select v-if="item.type === 'select'" v-model:value="userForm[item.key]" v-bind="item.props" /> | |||||
</n-form-item> | |||||
</template> | |||||
</n-form> | |||||
</template> | |||||
</Modal> | |||||
</template> | |||||
<script> | |||||
import { form } from '../tools/form.js' | |||||
import { defineComponent, ref, reactive, computed, toRefs } from 'vue' | |||||
import { userCreate, userUpdate } from '@/api/system/user.js' | |||||
import Modal from '@/components/Modal/index.vue' | |||||
export default defineComponent({ | |||||
name: 'UserModal', | |||||
components: { Modal }, | |||||
props: { | |||||
visible: { | |||||
type: Boolean, | |||||
default: false | |||||
}, | |||||
type: { | |||||
type: String, | |||||
default: 'create' | |||||
}, | |||||
data: { | |||||
type: Object, | |||||
default: () => {} | |||||
} | |||||
}, | |||||
emits: { | |||||
'update:visible': null, | |||||
'reload': null | |||||
}, | |||||
setup(props, { emit }) { | |||||
const MODAL_TYPE = { | |||||
'create': '新建盒子信息', | |||||
'preview': '盒子详情', | |||||
'update': '编辑盒子信息' | |||||
} | |||||
const { userForm, userRules } = form | |||||
const formRef = ref() | |||||
const data = reactive({ | |||||
userForm: { | |||||
...userForm, | |||||
...props.data | |||||
}, | |||||
userRules: { | |||||
...userRules | |||||
}, | |||||
disabled: props.type === 'preview' | |||||
}) | |||||
const getModalOptions = computed(() => { | |||||
return { | |||||
title: MODAL_TYPE[props.type], | |||||
show: props.visible, | |||||
negativeText: '取消', | |||||
positiveText: '确认' | |||||
} | |||||
}) | |||||
const getFormOptions = computed(() => { | |||||
const formOptions = [ | |||||
...form.formItem | |||||
] | |||||
if (props.type !== 'create') { | |||||
formOptions.splice(4, 1) | |||||
} | |||||
return formOptions | |||||
}) | |||||
function handleConfirm() { | |||||
formRef.value?.validate((errors) => { | |||||
if (!errors) { | |||||
const params = { ...data.userForm } | |||||
if (params.id) { | |||||
/* 编辑 */ | |||||
delete params['password'] | |||||
userUpdate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} else { | |||||
/* 新增 */ | |||||
userCreate(params) | |||||
.then(res => { | |||||
if (res.code === 0) { | |||||
emit('reload') | |||||
handleClose() | |||||
} | |||||
}) | |||||
} | |||||
} else { | |||||
$message.error('请完善必填信息') | |||||
} | |||||
}) | |||||
} | |||||
/* 关闭弹窗 */ | |||||
const handleClose = () => { | |||||
emit('update:visible', false) | |||||
} | |||||
return { | |||||
...toRefs(data), | |||||
formRef, | |||||
getModalOptions, | |||||
getFormOptions, | |||||
handleConfirm, | |||||
handleClose | |||||
} | |||||
} | |||||
}) | |||||
</script> | |||||
<style scoped lang='scss'> | |||||
</style> |
<template> | <template> | ||||
<div> | <div> | ||||
人员管理 | |||||
<n-card> | |||||
<headSearch :info="search" @search="handleSearch" @reset="handleSearch" /> | |||||
<data-table | |||||
ref="tableRef" | |||||
:columns="columns" | |||||
:request="loadDataTable" | |||||
:row-key="(row) => row.id" | |||||
size="large" | |||||
> | |||||
<template #tableTitle> | |||||
<n-button type="primary" @click="handleModal"> 新建 </n-button> | |||||
</template> | |||||
</data-table> | |||||
</n-card> | |||||
</div> | </div> | ||||
<!-- 新增、编辑弹窗 --> | |||||
<UserModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" :type="modalType" @reload="handleSearch" /> | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import search from './tools/search.js' | |||||
import table from './tools/table.js' | |||||
import headSearch from '@/components/Search/index.vue' | |||||
import dataTable from '@/components/DataTable/index.vue' | |||||
import UserModal from './components/UserModal.vue' | |||||
import { unref, toRefs, reactive, onUnmounted } from 'vue' | |||||
import { userPage } from '@/api/system/user.js' | |||||
export default { | export default { | ||||
name: 'UserManage', | name: 'UserManage', | ||||
components: { dataTable, UserModal, headSearch }, | |||||
setup() { | setup() { | ||||
const data = reactive({ | |||||
...toRefs(table), | |||||
search | |||||
}) | |||||
const loadDataTable = async(res) => { | |||||
const _params = { | |||||
...unref(data.searchParams), | |||||
...res | |||||
} | |||||
return await userPage(_params) | |||||
} | |||||
// 新增 | |||||
function handleModal() { | |||||
data.rowData = null | |||||
data.modalType = 'create' | |||||
data.modalShow = true | |||||
} | |||||
onUnmounted(() => { | |||||
data.searchParams = null | |||||
}) | |||||
return { | |||||
...toRefs(data), | |||||
loadDataTable, | |||||
handleModal | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> | ||||
<style scoped lang='scss'> | <style scoped lang='scss'> | ||||
.n-button + .n-button { | |||||
margin-left: 10px; | |||||
} | |||||
</style> | </style> |
import { reactive } from 'vue' | |||||
import { ROLE_TYPE } from '@/utils/dictionary.js' | |||||
import { isPhone } from '@/utils/is.js' | |||||
export const form = reactive({ | |||||
userForm: { | |||||
realname: null, | |||||
mobile: null, | |||||
type: null, | |||||
username: null, | |||||
password: null | |||||
}, | |||||
userRules: { | |||||
realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }], | |||||
mobile: [ | |||||
// { required: true, message: '请输入联系电话', type: 'string', trigger: 'blur' }, | |||||
{ required: true, message: '请输入正确的联系电话', pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, trigger: 'blur' } | |||||
], | |||||
type: [{ required: true, type: 'number', message: '请选择身份', trigger: 'blur' }], | |||||
username: [{ required: true, message: '请输入帐号', trigger: 'blur' }], | |||||
password: [{ required: true, message: '请输入初始密码', trigger: 'blur' }] | |||||
}, | |||||
formItem: [ | |||||
{ type: 'input', key: 'realname', label: '姓名', props: { maxlength: '20', placeholder: '请输入姓名', clearable: true }}, | |||||
{ type: 'input', key: 'mobile', label: '联系电话', props: { maxlength: '20', placeholder: '请输入联系电话', clearable: true }}, | |||||
{ type: 'select', key: 'type', label: '身份选择', props: { options: ROLE_TYPE, clearable: true }}, | |||||
{ type: 'input', key: 'username', label: '帐号', props: { maxlength: '20', placeholder: '请输入帐号', clearable: true }}, | |||||
{ type: 'input', key: 'password', label: '初始密码', props: { maxlength: '20', placeholder: '请输入初始密码', clearable: true }} | |||||
] | |||||
}) |
import { reactive } from 'vue' | |||||
const data = reactive([ | |||||
{ | |||||
label: '设备名称', | |||||
key: 'name', | |||||
props: { | |||||
placeholder: '请输入设备名称' | |||||
} | |||||
} | |||||
]) | |||||
export default data | |||||
import { h, ref, reactive } from 'vue' | |||||
import TableTags from '@/components/DataTable/tools/Tags.vue' | |||||
import TableSwitch from '@/components/DataTable/tools/Switch.vue' | |||||
import TableAction from '@/components/DataTable/tools/Action.vue' | |||||
import { ROLE_TYPE } from '@/utils/dictionary.js' | |||||
import { userUpdate } from '@/api/system/user.js' | |||||
/* 注册table */ | |||||
const tableRef = ref() | |||||
const searchParams = ref() | |||||
function handleSearch(params) { | |||||
searchParams.value = { ...params } | |||||
tableRef.value.reFetch({ searchParams }) | |||||
} | |||||
/** | |||||
* @description: 获取数据及操作 | |||||
* @param {*} row 单行数据 | |||||
* @param {*} type 操作类型 create:创建,preview:预览,edit:编辑 | |||||
* @return {*} | |||||
*/ | |||||
function getRowData(row, type) { | |||||
data.rowData = row | |||||
data.modalType = type | |||||
data.modalShow = true | |||||
} | |||||
// 设置状态 | |||||
function changeStatus(row) { | |||||
userUpdate({ id: row.data.id, status: row.value }).then(res => { | |||||
if (res.code === 0) { | |||||
handleSearch() | |||||
} | |||||
}).catch(e => { | |||||
console.log(e) | |||||
}) | |||||
} | |||||
const data = reactive({ | |||||
tableRef, | |||||
searchParams, | |||||
rowData: {}, | |||||
modalType: 'create', | |||||
modalShow: false, | |||||
configModalShow: false, | |||||
handleSearch, | |||||
columns: [ | |||||
{ | |||||
title: '序号', | |||||
key: 'key', | |||||
render: (_, index) => { | |||||
return `${index + 1}` | |||||
}, | |||||
align: 'center', | |||||
width: 100 | |||||
}, | |||||
{ | |||||
title: '角色', | |||||
key: 'type', | |||||
align: 'center', | |||||
render(row) { | |||||
return h(TableTags, { | |||||
data: row.type, | |||||
filters: ROLE_TYPE | |||||
}) | |||||
} | |||||
}, | |||||
{ | |||||
title: '姓名', | |||||
key: 'realname', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '手机号', | |||||
key: 'mobile', | |||||
align: 'center', | |||||
Minwidth: 160 | |||||
}, | |||||
{ | |||||
title: '任务次数', | |||||
key: 'taskCount', | |||||
align: 'center', | |||||
Minwidth: 160 | |||||
}, | |||||
{ | |||||
title: '上次登录时间', | |||||
key: 'loginTime', | |||||
align: 'center' | |||||
}, | |||||
{ | |||||
title: '状态', | |||||
key: 'status', | |||||
align: 'center', | |||||
width: 100, | |||||
render(row) { | |||||
return h(TableSwitch, { | |||||
data: { id: row.id, status: row.status }, | |||||
rowKey: 'status', | |||||
checkedValue: 1, | |||||
uncheckedValue: 2, | |||||
onChange: changeStatus.bind(row) | |||||
}) | |||||
} | |||||
}, | |||||
{ | |||||
title: '操作', | |||||
align: 'center', | |||||
width: 150, | |||||
fixed: 'right', | |||||
render(row) { | |||||
return h(TableAction, { | |||||
actions: [ | |||||
{ | |||||
label: '编辑', | |||||
type: 'button', | |||||
props: { | |||||
type: 'primary', | |||||
text: true, | |||||
onClick: getRowData.bind(null, row, 'update') | |||||
}, | |||||
auth: 'basic_list' | |||||
} | |||||
], | |||||
align: 'center' | |||||
}) | |||||
} | |||||
} | |||||
] | |||||
}) | |||||
export default data |