200 changed files with 17233 additions and 6001 deletions
@ -1,8 +1,8 @@ |
|||
<!-- |
|||
报警等级设置 |
|||
|
|||
功能划分 |
|||
报警管理 -> 报警等级设置 |
|||
目录位置：报警管理 -> 报警等级设置 |
|||
功能概述：设置不同区域下的不同类型设备的不同级别的警报声音 |
|||
--> |
|||
<template> |
|||
<div> |
|||
@ -1,8 +1,8 @@ |
|||
<!-- |
|||
警示事件查询 |
|||
|
|||
功能划分 |
|||
报警管理 -> 警示事件查询 |
|||
目录位置：报警管理 -> 警示事件查询 |
|||
功能概述：历史记录,包含报警、预警 |
|||
--> |
|||
<template> |
|||
<div> |
|||
@ -1,8 +1,8 @@ |
|||
<!-- |
|||
警示管理 |
|||
|
|||
功能划分 |
|||
报警管理 -> 警示管理 |
|||
目录位置：报警管理 -> 警示管理 |
|||
功能概述：查看设备报警的级别、内容，可使用语音驱散的方式处置 |
|||
--> |
|||
<template> |
|||
<div> |
|||
@ -1,8 +1,8 @@ |
|||
<!-- |
|||
警示相关信息 |
|||
|
|||
功能划分 |
|||
报警管理 -> 警示相关信息 |
|||
目录位置：报警管理 -> 警示相关信息 |
|||
功能概述：未知使用方法 |
|||
--> |
|||
<template> |
|||
<div> |
|||
@ -0,0 +1,82 @@ |
|||
import {BasicColumn} from '/@/components/Table'; |
|||
import {FormSchema} from '/@/components/Table'; |
|||
import { rules} from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '相机名称', |
|||
align: "center", |
|||
dataIndex: 'cameraName' |
|||
}, |
|||
{ |
|||
title: '创建者', |
|||
align: "center", |
|||
dataIndex: 'createBy' |
|||
}, |
|||
{ |
|||
title: '创建时间', |
|||
align: "center", |
|||
dataIndex: 'createTime' |
|||
}, |
|||
|
|||
{ |
|||
title: '图片', |
|||
align: "center", |
|||
dataIndex: 'imgUrl', |
|||
customRender: render.renderImage, |
|||
}, |
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "创建人", |
|||
field: 'createBy', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "创建日期", |
|||
field: "createTime", |
|||
component: 'RangePicker', |
|||
componentProps: { |
|||
showTime: true, |
|||
}, |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "相机名称", |
|||
field: 'cameraName', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '创建时间', |
|||
field: 'createTime', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '相机名称', |
|||
field: 'cameraName', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '图片路径', |
|||
field: 'imgUrl', |
|||
component: 'JImageUpload', |
|||
componentProps:{ |
|||
}, |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,250 @@ |
|||
<!-- |
|||
抓拍图片列表 |
|||
|
|||
目录位置：报警管理 -> 抓拍图片列表 |
|||
功能概述：设备抓拍 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="8"> |
|||
<!-- <a-form-item label="创建日期"> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" v-model:value="queryParam.createTime_begin" class="query-group-cust" /> |
|||
<span class="query-group-split-cust">~</span> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.createTime_end" class="query-group-cust" /> |
|||
</a-form-item> --> |
|||
<a-form-item label="创建日期" name="createTime_begin"> |
|||
<a-date-picker |
|||
showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
placeholder="请选择开始时间" |
|||
v-model:value="queryParam.createTime_begin" |
|||
style="margin-bottom: 24px" |
|||
/> |
|||
<span class="query-group-split-cust">~</span> |
|||
<a-form-item name="createTime_end"> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.createTime_end" /> |
|||
</a-form-item> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="创建人" name="createBy"> |
|||
<JInput placeholder="请输入创建人" v-model:value="queryParam.createBy"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="相机名称" name="cameraName"> |
|||
<JInput placeholder="请输入相机名称" v-model:value="queryParam.cameraName"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined" style="margin-left: 8px"> 新增</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<ScreenshotsModal ref="registerModal" @success="handleSuccess"></ScreenshotsModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="camera-screenshots" setup> |
|||
import { ref, reactive } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './Screenshots.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './Screenshots.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import ScreenshotsModal from './components/ScreenshotsModal.vue'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
// const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '抓拍图片列表', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
showIndexColumn: true, |
|||
useSearchForm: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '抓拍图片列表', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
margin-left: 90px; |
|||
} |
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
:deep(.ant-form-item-control-input-content) { |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<ScreenshotsForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ScreenshotsForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import ScreenshotsForm from './ScreenshotsForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(800); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,291 @@ |
|||
<!-- |
|||
今日值班人员 |
|||
|
|||
目录位置：执勤管理 -> 今日值班人员 |
|||
功能概述：查看当日值班人员信息 |
|||
--> |
|||
<template> |
|||
<div class="dutyBox" id="dutyBox"> |
|||
<div class="title"> |
|||
当日值班人员 |
|||
<div class="fullscreenBox" @click="screen"> |
|||
<a-icon :type="isFullScren ? 'fullscreen-exit' : 'fullscreen'" /> |
|||
</div> |
|||
</div> |
|||
<div style="height: 380px; margin-top: 230px" v-show="!dataList.length"> |
|||
<a-empty /> |
|||
</div> |
|||
<a-carousel arrows> |
|||
<div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px; zindex: 1"> |
|||
<a-icon type="left-circle" /> |
|||
</div> |
|||
<div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"> |
|||
<a-icon type="right-circle" /> |
|||
</div> |
|||
<div class="listBox" v-for="item in dataList"> |
|||
<div class="time"> |
|||
{{ item.beginTime }}~{{ item.endTime.split(' ')[1] }} |
|||
<div class="theLine">【{{ item.lineName }}】</div> |
|||
</div> |
|||
<div class="picBox"> |
|||
<div class="picTitle"> |
|||
<strong>带班领导</strong> |
|||
</div> |
|||
<div class="picList"> |
|||
<div class="picItem" v-for="leader in getLeaderList(item.msDutyUserInfoList)"> |
|||
<!-- <img :src="getImgView(item.img)">--> |
|||
<img :src="getImg(leader.avatar)" /> |
|||
<div class="name">{{ leader.dutyStaffName }}</div> |
|||
<div class="name">联系方式:{{ leader.phone }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="picBox"> |
|||
<div class="picTitle"> |
|||
<strong>执勤人员</strong> |
|||
</div> |
|||
<div class="picList"> |
|||
<div class="picItem" v-for="staff in getStaffList(item.msDutyUserInfoList)"> |
|||
<!-- <img :src="getImgView(item.img)">--> |
|||
<img :src="getImg(staff.avatar)" /> |
|||
<div class="name">{{ staff.dutyStaffName }}</div> |
|||
<div class="name">联系方式:{{ staff.phone }}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</a-carousel> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { computed, defineComponent, onMounted, ref } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
export default defineComponent({ |
|||
name: 'Duty', |
|||
props: {}, |
|||
setup(props, ctx) { |
|||
const dataList: any = ref([]); |
|||
const url = ref('/military/msDutyTask/qryPersonOnDutyByDate'); |
|||
const isFullScren = ref(false); |
|||
const getTime = computed(() => { |
|||
var timeData = new Date(); |
|||
let year = timeData.getFullYear(); |
|||
let month = timeData.getMonth() + 1; |
|||
let date = timeData.getDate(); |
|||
var time = year + '年' + month + '月' + date + '日'; |
|||
return time; |
|||
}); |
|||
onMounted(() => { |
|||
getPersonList(); |
|||
{ |
|||
//由于vue全屏时监听不到esc事件，所以页面初始化渲染完成后，绑定fullscreenchange的全屏改变监听事件，这样按esc退出全屏时也会触发 |
|||
document.addEventListener('fullscreenchange', () => { |
|||
isFullScren.value = !isFullScren.value; |
|||
}); |
|||
document.addEventListener('mozfullscreenchange', () => { |
|||
isFullScren.value = !isFullScren.value; |
|||
}); |
|||
document.addEventListener('webkitfullscreenchange', () => { |
|||
isFullScren.value = !isFullScren.value; |
|||
}); |
|||
document.addEventListener('msfullscreenchange', () => { |
|||
isFullScren.value = !isFullScren.value; |
|||
}); |
|||
} |
|||
}); |
|||
|
|||
function screen() { |
|||
let element: any = document.getElementById('dutyBox'); |
|||
if (this.isFullScren) { |
|||
if (document.exitFullscreen) { |
|||
document.exitFullscreen(); |
|||
} else if (document.webkitCancelFullScreen) { |
|||
document.webkitCancelFullScreen(); |
|||
} else if (document.mozCancelFullScreen) { |
|||
document.mozCancelFullScreen(); |
|||
} else if (document.msExitFullscreen) { |
|||
document.msExitFullscreen(); |
|||
} |
|||
} else { |
|||
if (element.requestFullscreen) { |
|||
element.requestFullscreen(); |
|||
} else if (element.webkitRequestFullScreen) { |
|||
element.webkitRequestFullScreen(); |
|||
} else if (element.mozRequestFullScreen) { |
|||
element.mozRequestFullScreen(); |
|||
} else if (element.msRequestFullscreen) { |
|||
// IE11 |
|||
element.msRequestFullscreen(); |
|||
} |
|||
} |
|||
} |
|||
function getPersonList() { |
|||
// let Gurl = url.value |
|||
let time = new Date(); |
|||
let year = time.getFullYear(); |
|||
let month: any = time.getMonth() + 1; |
|||
let date: any = time.getDate(); |
|||
if (month < 10) { |
|||
month = '0' + month; |
|||
} |
|||
if (date < 10) { |
|||
date = '0' + date; |
|||
} |
|||
let today = year + '-' + month + '-' + date; |
|||
defHttp |
|||
.get( |
|||
{ |
|||
url: url.value, |
|||
params: { date: today }, |
|||
}, |
|||
{ isTransformResponse: false } |
|||
) |
|||
// getAction(Gurl, { |
|||
// 'date': today |
|||
// }) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
dataList.value = res.result; |
|||
} |
|||
}); |
|||
} |
|||
function getStaffList(arr) { |
|||
let list: any = []; |
|||
for (const item of arr) { |
|||
if (item.dutyStaffType == 2) { |
|||
list.push(item); |
|||
} |
|||
} |
|||
return list; |
|||
} |
|||
function getLeaderList(arr) { |
|||
let list: any = []; |
|||
for (const item of arr) { |
|||
if (item.dutyStaffType == 1) { |
|||
list.push(item); |
|||
} |
|||
} |
|||
return list; |
|||
} |
|||
function getImg(a) { |
|||
let adivce; |
|||
adivce = window._CONFIG['staticDomainURL'] + '/' + a; |
|||
return adivce; |
|||
} |
|||
|
|||
return { |
|||
dataList, |
|||
url, |
|||
isFullScren, |
|||
getTime, |
|||
screen, |
|||
getPersonList, |
|||
getStaffList, |
|||
getLeaderList, |
|||
getImg, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.dutyBox { |
|||
background: #fff; |
|||
} |
|||
|
|||
.title { |
|||
position: relative; |
|||
height: 105px; |
|||
line-height: 105px; |
|||
font-size: 46px; |
|||
color: #fff; |
|||
background: #22f; |
|||
text-align: center; |
|||
} |
|||
|
|||
.fullscreenBox { |
|||
height: 30px; |
|||
width: 30px; |
|||
line-height: 27px; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 2%; |
|||
transform: translate(-50%, -50%); |
|||
font-size: 24px; |
|||
color: rgb(255, 255, 255); |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.fullscreenBox:hover { |
|||
border: 1px rgb(255, 255, 255) solid; |
|||
} |
|||
|
|||
.time { |
|||
position: relative; |
|||
font-size: 35px; |
|||
text-align: center; |
|||
color: #00db00; |
|||
} |
|||
|
|||
.theLine { |
|||
position: absolute; |
|||
left: 15px; |
|||
top: 0; |
|||
} |
|||
|
|||
.picTitle { |
|||
text-align: center; |
|||
} |
|||
|
|||
.picTitle strong { |
|||
font-size: 45px; |
|||
color: #000; |
|||
} |
|||
|
|||
.picList { |
|||
text-align: center; |
|||
} |
|||
|
|||
.picItem { |
|||
display: inline-block; |
|||
padding: 0 35px 15px; |
|||
} |
|||
|
|||
.picItem img { |
|||
margin: 0 auto; |
|||
width: 100px; |
|||
height: 140px; |
|||
} |
|||
|
|||
.name { |
|||
padding: 3px 0; |
|||
font-size: 25px; |
|||
} |
|||
|
|||
.ant-carousel >>> .slick-slide { |
|||
text-align: center; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.ant-carousel >>> .custom-slick-arrow { |
|||
width: 25px; |
|||
height: 25px; |
|||
font-size: 25px; |
|||
color: #999; |
|||
opacity: 0.3; |
|||
} |
|||
|
|||
.ant-carousel >>> .custom-slick-arrow:before { |
|||
display: none; |
|||
} |
|||
|
|||
.ant-carousel >>> .custom-slick-arrow:hover { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.ant-carousel >>> .slick-slide h3 { |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,293 @@ |
|||
<!-- |
|||
执勤排班管理 |
|||
|
|||
目录位置：执勤管理 -> 执勤排班管理 |
|||
功能概述： |
|||
--> |
|||
<template> |
|||
<div class="dutySetBox"> |
|||
<a-switch v-model:checked="showflag" checked-children="表格" un-checked-children="日历" default-checked /> |
|||
<div v-show="!showflag"> |
|||
<a-calendar @panelChange="onPanelChange"> |
|||
<template #dateCellRender="{ current }"> |
|||
<ul class="events"> |
|||
<li v-for="item in getListData(current)" :key="item.id"> |
|||
<a-badge |
|||
status="default" |
|||
:text="item.dutyStaffType == 1 ? '带班领导' + '-' + item.dutyStaffName : '执勤人员' + '-' + item.dutyStaffName" |
|||
/> |
|||
</li> |
|||
</ul> |
|||
</template> |
|||
<template #monthCellRender="{ current }"> |
|||
<div v-if="getMonthData(current)" class="notes-month"> |
|||
<section>{{ getMonthData(current) }}</section> |
|||
<span>Backlog number</span> |
|||
</div> |
|||
</template> |
|||
</a-calendar> |
|||
</div> |
|||
<div v-show="showflag"> |
|||
<dutyTaskList></dutyTaskList> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { computed, defineComponent, onMounted, ref } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import dutyTaskList from './MsDutyTaskList.vue'; |
|||
export default defineComponent({ |
|||
name: 'DutySet', |
|||
props: {}, |
|||
components: { dutyTaskList }, |
|||
setup(props, ctx) { |
|||
const $message = useMessage(); |
|||
const showflag = ref(true); |
|||
const visible = ref(false); |
|||
const addData = ref({ |
|||
dutyStaffId: '', |
|||
dutyStaffType: '', |
|||
dutyDate: '', |
|||
}); |
|||
const listData = ref([]); |
|||
const userIds = ref(''); |
|||
const title = ref(''); |
|||
const tagId = ref(''); |
|||
const post = ref(''); |
|||
const personName = ref(''); |
|||
const tagMonth = ref(''); |
|||
const tagDate = ref(''); |
|||
const addUrl: any = ref('/military/msDutySchedule/add'); |
|||
const getPlantListUrl = ref('/military/msDutyTask/queryDutyTaskByMonth'); |
|||
|
|||
const time = ref({ |
|||
year: new Date().getFullYear(), |
|||
month: new Date().getMonth() + 1, |
|||
}); |
|||
const planMonth = ref(''); |
|||
const personList = ref([]); |
|||
const watchkeeperList = ref([]); |
|||
const planList = ref([]); |
|||
|
|||
onMounted(() => { |
|||
getPlanList(); |
|||
}); |
|||
|
|||
function onPanelChange(value) { |
|||
time.value.year = value.year(); |
|||
time.value.month = value.month() + 1; |
|||
getPlanList(); |
|||
} |
|||
|
|||
function getPlanList() { |
|||
let month: any = time.value.month; |
|||
if (month < 10) { |
|||
month = '0' + month; |
|||
} |
|||
let timeData = { |
|||
date: time.value.year + '-' + month, |
|||
}; |
|||
defHttp |
|||
.get( |
|||
{ |
|||
url: getPlantListUrl.value, |
|||
params: timeData, |
|||
}, |
|||
{ isTransformResponse: false } |
|||
) |
|||
// getAction(getPlantListUrl.value, timeData) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
// this.$message.success(res.message) |
|||
planList.value = res.result; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
function addPerson() { |
|||
console.log(userIds.value + '-' + post.value); |
|||
// let addUrl = addUrl.value |
|||
defHttp |
|||
.post( |
|||
{ |
|||
urll: addUrl.value, |
|||
params: addData.value, |
|||
}, |
|||
{ isTransformResponse: false } |
|||
) |
|||
// httpAction(this.addUrl, this.addData, 'post') |
|||
.then((res) => { |
|||
if (res.success) { |
|||
$message.success(res.message); |
|||
} else { |
|||
// that.$message.warning(res.message); |
|||
} |
|||
}); |
|||
} |
|||
function getListData(value) { |
|||
let month = value.month() + 1; |
|||
let date = value.date(); |
|||
let GplanList = planList.value; |
|||
let monthPlan = []; |
|||
let list: any = []; |
|||
GplanList.some((item: any) => { |
|||
if (item.taskTime.split('-')[1] == month && item.taskTime.split('-')[2] == date) { |
|||
list = list.concat(item.msDutyUserList); |
|||
// return true |
|||
} |
|||
}); |
|||
return list || []; |
|||
} |
|||
|
|||
function getTag(a, b) { |
|||
console.log(a, b); |
|||
if (tagId.value == a) { |
|||
tagId.value = ''; |
|||
} else { |
|||
tagId.value = a; |
|||
} |
|||
} |
|||
|
|||
function handleFocus() { |
|||
console.log('focus'); |
|||
} |
|||
function filterOption(input, option) { |
|||
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0; |
|||
} |
|||
|
|||
function typeChange(value) { |
|||
console.log(value); |
|||
} |
|||
function changeData() { |
|||
visible.value = true; |
|||
title.value = '排班管理'; |
|||
} |
|||
function handleOk() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
function deletePlan() { |
|||
// this.$confirm({ |
|||
// title: '删除', |
|||
// content: '确定删除' + this.tagMonth + '月' + this.tagDate + '日数据吗？', |
|||
// okText: '确认', |
|||
// okType: 'danger', |
|||
// cancelText: '否', |
|||
// onOk() { |
|||
// console.log('OK') |
|||
// }, |
|||
// onCancel() { |
|||
// console.log('Cancel') |
|||
// } |
|||
// }) |
|||
$message.createConfirm({ |
|||
iconType: 'warning', |
|||
title: '删除', |
|||
okType: 'danger', |
|||
okText: '确认', |
|||
cancelText: '否', |
|||
content: '确定删除' + tagMonth.value + '月' + tagDate.value + '日数据吗？', |
|||
onOk: () => console.log('OK'), |
|||
onCancel: () => console.log('Cancel'), |
|||
}); |
|||
} |
|||
|
|||
function getMonthData(value) { |
|||
if (value.month() === 8) { |
|||
return 1394; |
|||
} |
|||
} |
|||
return { |
|||
showflag, |
|||
visible, |
|||
addData, |
|||
listData, |
|||
userIds, |
|||
title, |
|||
tagId, |
|||
post, |
|||
personName, |
|||
tagMonth, |
|||
tagDate, |
|||
addUrl, |
|||
getPlantListUrl, |
|||
time, |
|||
planMonth, |
|||
personList, |
|||
watchkeeperList, |
|||
planList, |
|||
onPanelChange, |
|||
getPlanList, |
|||
addPerson, |
|||
getListData, |
|||
getTag, |
|||
handleFocus, |
|||
filterOption, |
|||
typeChange, |
|||
changeData, |
|||
handleOk, |
|||
deletePlan, |
|||
getMonthData, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.compileBox { |
|||
display: flex; |
|||
width: 420px; |
|||
} |
|||
|
|||
.dutySetBox { |
|||
padding: 15px 20px; |
|||
background: #fff; |
|||
} |
|||
|
|||
.events { |
|||
list-style: none; |
|||
height: 100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.events .ant-badge-status { |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
text-overflow: ellipsis; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.notes-month { |
|||
text-align: center; |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.notes-month section { |
|||
font-size: 28px; |
|||
} |
|||
|
|||
.list { |
|||
height: 240px; |
|||
list-style: none; |
|||
/*border: 1px #666 solid;*/ |
|||
overflow-y: scroll; |
|||
padding: 0; |
|||
} |
|||
|
|||
.list li { |
|||
padding-left: 8px; |
|||
color: #333; |
|||
font-size: 18px; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
} |
|||
|
|||
.list .active { |
|||
background: #36cfc9; |
|||
color: #fff; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,84 @@ |
|||
/* |
|||
* @Author: Fuyuu 1805498209@qq.com |
|||
* @Date: 2023-11-24 10:15:23 |
|||
* @LastEditors: Fuyuu 1805498209@qq.com |
|||
* @LastEditTime: 2023-11-27 09:02:27 |
|||
* @FilePath: \dt-admin-pc\src\views\military\modules\duty\MsDutyTask.api.ts |
|||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|||
*/ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/msDutyTask/list', |
|||
save = '/military/msDutyTask/add', |
|||
edit = '/military/msDutyTask/edit', |
|||
deleteOne = '/military/msDutyTask/delete', |
|||
deleteBatch = '/military/msDutyTask/deleteBatch', |
|||
importExcel = '/military/msDutyTask/importExcel', |
|||
exportXls = '/military/msDutyTask/exportXls', |
|||
} |
|||
|
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params, handleSuccess) => { |
|||
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
// let url = isUpdate ? Api.edit : Api.save;
|
|||
// return defHttp.post({ url: url, params }, { isTransformResponse: false });
|
|||
let http = isUpdate |
|||
? defHttp.put({ url: Api.edit, params }, { isTransformResponse: false }) |
|||
: defHttp.post({ url: Api.save, params }, { isTransformResponse: false }); |
|||
return http; |
|||
}; |
|||
@ -0,0 +1,100 @@ |
|||
import {BasicColumn} from '/@/components/Table'; |
|||
import {FormSchema} from '/@/components/Table'; |
|||
import { rules} from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '任务创建日期', |
|||
align: "center", |
|||
dataIndex: 'createTime', |
|||
customRender:({text}) =>{ |
|||
return !text?"":(text.length>10?text.substr(0,10):text); |
|||
}, |
|||
}, |
|||
{ |
|||
title: '线路名称', |
|||
align: "center", |
|||
dataIndex: 'lineName' |
|||
}, |
|||
{ |
|||
title: '计划开始时间', |
|||
align: "center", |
|||
dataIndex: 'beginTime', |
|||
// customRender:({text}) =>{
|
|||
// return !text?"":(text.length>10?text.substr(0,10):text);
|
|||
// },
|
|||
}, |
|||
{ |
|||
title: '计划结束时间', |
|||
align: "center", |
|||
dataIndex: 'endTime', |
|||
// customRender:({text}) =>{
|
|||
// return !text?"":(text.length>10?text.substr(0,10):text);
|
|||
// },
|
|||
}, |
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "创建日期", |
|||
field: "createTime", |
|||
component: 'RangePicker', |
|||
componentProps: { |
|||
showTime: true, |
|||
}, |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "线路id", |
|||
field: 'lineId', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '线路id', |
|||
field: 'lineId', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '任务日期', |
|||
field: 'taskTime', |
|||
component: 'DatePicker', |
|||
}, |
|||
|
|||
{ |
|||
label: '计划开始时间', |
|||
field: 'beginTime', |
|||
component: 'DatePicker', |
|||
componentProps: { |
|||
showTime:true, |
|||
valueFormat: 'YYYY-MM-DD HH:mm:ss' |
|||
}, |
|||
}, |
|||
{ |
|||
label: '计划结束时间', |
|||
field: 'endTime', |
|||
component: 'DatePicker', |
|||
componentProps: { |
|||
showTime:true, |
|||
valueFormat: 'YYYY-MM-DD HH:mm:ss' |
|||
}, |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,282 @@ |
|||
<!-- |
|||
执勤任务 |
|||
|
|||
功能划分 |
|||
xxx -> 执勤任务 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="任务创建日期" name="createTime_begin"> |
|||
<a-date-picker |
|||
showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
placeholder="请选择开始时间" |
|||
v-model:value="queryParam.createTime_begin" |
|||
style="margin-bottom: 24px" |
|||
/> |
|||
<span class="query-group-split-cust">~</span> |
|||
<a-form-item name="createTime_end"> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.createTime_end" /> |
|||
</a-form-item> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="线路名称" name="lineName"> |
|||
<!-- <JInput placeholder="请选择线路" v-model:value="queryParam.lineId"></JInput> --> |
|||
<JInput placeholder="请选择线路" v-model:value="queryParam.lineName"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<MsDutyTaskModal ref="registerModal" @success="handleSuccess"></MsDutyTaskModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="duty-msDutyTask" setup> |
|||
import { ref, reactive, onMounted } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './MsDutyTask.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './MsDutyTask.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import MsDutyTaskModal from './components/MsDutyTaskModal.vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
const formRef = ref(); |
|||
const lineSelect: any = ref([]); |
|||
const queryParam = reactive<any>({}); |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '执勤任务表', |
|||
api: list, |
|||
columns, |
|||
showIndexColumn: true, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '执勤任务表', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
initSelectLine(); |
|||
}); |
|||
|
|||
function initSelectLine() { |
|||
defHttp |
|||
.get( |
|||
{ |
|||
url: '/military/msPatrolLine/getLineSelectList', |
|||
}, |
|||
{ isTransformResponse: false } |
|||
) |
|||
// getAction(this.url.getSelectLineUrl) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
lineSelect.value = res.result; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(lineSelect.value); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record, lineSelect.value); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record, lineSelect.value); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
:deep(.ant-form-item-control-input-content) { |
|||
display: flex; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,544 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="线路名称" v-bind="validateInfos.lineId"> |
|||
<!-- <a-input v-model:value="formData.lineId" placeholder="请输入线路id" :disabled="disabled"></a-input> --> |
|||
<a-select v-model:value="formData.lineId" @change="changeLineValue" placeholder="请选择线路名称" :disabled="disabled"> |
|||
<a-select-option v-for="(item, index) in lineSelect" :value="item.id" :key="item.id"> |
|||
{{ item.lineName }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="任务日期" v-bind="validateInfos.taskTime"> |
|||
<a-date-picker |
|||
placeholder="请选择任务日期" |
|||
v-model:value="formData.taskTime" |
|||
value-format="YYYY-MM-DD" |
|||
style="width: 100%" |
|||
:disabled="disabled" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="开始时间" v-bind="validateInfos.getbeginTime"> |
|||
<a-time-picker |
|||
placeholder="请选择计划开始时间" |
|||
v-model:value="formData.getbeginTime" |
|||
value-format="HH:mm:ss" |
|||
style="width: 100%" |
|||
:disabled="disabled" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="结束时间" v-bind="validateInfos.getendTime"> |
|||
<a-time-picker |
|||
placeholder="请选择计划结束时间" |
|||
v-model:value="formData.getendTime" |
|||
value-format="HH:mm:ss" |
|||
style="width: 100%" |
|||
:disabled="disabled" |
|||
/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" v-bind="validateInfos.remark" :labelCol="labelCol2" :wrapperCol="wrapperCol2"> |
|||
<a-textarea v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled" :rows="4"></a-textarea> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
<!-- 子表单区域 --> |
|||
<a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs" style="padding: 30px"> |
|||
<a-tab-pane tab="出勤人员表" key="msDutyUser" :forceRender="true"> |
|||
<JVxeTable |
|||
ref="Jtable" |
|||
v-if="msDutyUserTable.show" |
|||
keep-source |
|||
resizable |
|||
:loading="msDutyUserTable.loading" |
|||
:columns="msDutyUserTable.columns" |
|||
:dataSource="msDutyUserTable.dataSource" |
|||
:height="200" |
|||
:disabled="formDisabled" |
|||
:rowNumber="true" |
|||
:rowSelection="true" |
|||
:toolbar="true" |
|||
@added="addDutyUser" |
|||
:bordered="false" |
|||
:addSetActive="false" |
|||
/> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
<div style="width: 100%; text-align: center; margin-top: 10px" v-if="showFlowSubmitButton"> |
|||
<a-button preIcon="ant-design:check-outlined" style="width: 126px" type="primary" @click="handleSubmit">提 交</a-button> |
|||
</div> |
|||
|
|||
<UserSelectByDepModal |
|||
:rowKey="rowKey" |
|||
ref="selectModal" |
|||
@register="regModal" |
|||
@getSelectResult="setValue" |
|||
v-bind="getBindValue" |
|||
@getSelectRows="getSelectRows" |
|||
> |
|||
</UserSelectByDepModal> |
|||
<!-- <JSelectUserByDept v-model:value="selectValues" :placeholder="'请选择'"></JSelectUserByDept> --> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted, unref, watchEffect, watch, toRaw } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useAttrs } from '/@/hooks/core/useAttrs'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../MsDutyTask.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
import { JVxeTable } from '/@/components/jeecg/JVxeTable'; |
|||
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts'; |
|||
import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types'; |
|||
import UserSelectByDepModal from '/@/components/Form/src/jeecg/components/modal/UserSelectByDepModal.vue'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { useModal } from '/@/components/Modal'; |
|||
import { |
|||
JDictSelectTag, |
|||
JTreeSelect, |
|||
JCategorySelect, |
|||
JSelectUserByDept, |
|||
JSelectDept, |
|||
JPopup, |
|||
JAreaLinkage, |
|||
JInput, |
|||
JSearchSelect, |
|||
} from '/@/components/Form'; |
|||
import { SelectValue } from 'ant-design-vue/es/select'; |
|||
import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => {} }, |
|||
formBpm: { type: Boolean, default: true }, |
|||
rowKey: { |
|||
type: String, |
|||
default: 'username', |
|||
}, |
|||
labelKey: { |
|||
type: String, |
|||
default: 'realname', |
|||
}, |
|||
}); |
|||
// const formRef = ref(); |
|||
const refKeys = ref(['msDutyUser']); |
|||
const msDutyUser = ref(); |
|||
const Jtable = ref(); |
|||
const tableRefs = { msDutyUser }; |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok', 'handleOk']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
taskTime: '', |
|||
lineId: undefined, |
|||
beginTime: '', |
|||
endTime: '', |
|||
remark: '', |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 6 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const labelCol2 = ref({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 3 }, |
|||
}); |
|||
const wrapperCol2 = ref({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 20 }, |
|||
}); |
|||
|
|||
//出勤人员 |
|||
//注册model |
|||
const [regModal, { openModal }] = useModal(); |
|||
const attrs = useAttrs(); |
|||
const activeKey = ref('msDutyUser'); |
|||
const msDutyUserJVxeColumns: JVxeColumn[] = [ |
|||
{ |
|||
title: '执勤人员', |
|||
key: 'dutyStaffName', |
|||
width: '200px', |
|||
type: JVxeTypes.inputNumber, |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
key: 'dutyStaffId', |
|||
width: '0px', |
|||
defaultValue: '', |
|||
visible: false, |
|||
}, |
|||
{ |
|||
key: 'sysOrgCode', |
|||
width: '0px', |
|||
defaultValue: '', |
|||
visible: false, |
|||
}, |
|||
{ |
|||
title: '所属部门', |
|||
key: 'sysOrgName', |
|||
type: JVxeTypes.inputNumber, |
|||
width: '200px', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '人员编号', |
|||
key: 'dutyStaffNo', |
|||
type: JVxeTypes.inputNumber, |
|||
width: '200px', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '是否为带班领导', |
|||
key: 'dutyStaffType', |
|||
type: JVxeTypes.checkbox, |
|||
width: '200px', |
|||
defaultChecked: false, |
|||
customValue: ['1', '2'], |
|||
}, |
|||
]; |
|||
|
|||
const msDutyUserTable: any = reactive({ |
|||
loading: false, |
|||
dataSource: [], |
|||
columns: msDutyUserJVxeColumns, |
|||
show: true, |
|||
}); |
|||
// 是否显示提交按钮 |
|||
const showFlowSubmitButton = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}); |
|||
const selectModal = ref(); |
|||
const lineSelect: any = ref([]); |
|||
const userIdList: any = ref([]); |
|||
|
|||
watch( |
|||
() => formData.taskTime, |
|||
(val) => { |
|||
formData.beginTime = val + ' ' + formData.getbeginTime; |
|||
formData.endTime = val + ' ' + formData.getendTime; |
|||
} |
|||
); |
|||
watch( |
|||
() => formData.getbeginTime, |
|||
(val) => { |
|||
formData.beginTime = formData.taskTime + ' ' + val; |
|||
} |
|||
); |
|||
watch( |
|||
() => formData.getendTime, |
|||
(val) => { |
|||
formData.endTime = formData.taskTime + ' ' + val; |
|||
} |
|||
); |
|||
|
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
taskTime: [{ required: true, message: '请输入任务日期!' }], |
|||
lineId: [{ required: true, message: '请选择路线!' }], |
|||
getbeginTime: [{ required: true, message: '请输入计划开始时间!' }], |
|||
getendTime: [{ required: true, message: '请输入计划结束时间!' }], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
const dbData = {}; |
|||
const [handleChangeTabs, handleSubmit, requestSubTableData, formRef] = useJvxeMethod( |
|||
requestAddOrEdit, |
|||
classifyIntoFormData, |
|||
tableRefs, |
|||
activeKey, |
|||
refKeys |
|||
); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
//线路id |
|||
function changeLineValue(lineId) { |
|||
let len = lineSelect.value.length; |
|||
for (let i = 0; i < len; i++) { |
|||
let lineInfo = lineSelect.value[i]; |
|||
if (lineInfo.id === lineId) { |
|||
formData.lineName = lineInfo.lineName; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function addCustomer(data) { |
|||
// 清空开始和结束时间 |
|||
formData.getbeginTime = ''; |
|||
formData.getendTime = ''; |
|||
// 清空其余字段 |
|||
resetFields(); |
|||
add(); |
|||
lineSelect.value = data; |
|||
msDutyUserTable.dataSource = []; |
|||
} |
|||
function add() { |
|||
edit({}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function editCustomer(record, data) { |
|||
console.log(formData); |
|||
console.log(data); |
|||
console.log(record); |
|||
formData.getbeginTime = record.beginTime.split(' ')[1]; |
|||
formData.getendTime = record.endTime.split(' ')[1]; |
|||
edit(record); |
|||
lineSelect.value = data; |
|||
} |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
editAfter(); |
|||
}); |
|||
} |
|||
/** 调用完edit()方法之后会调用此方法 */ |
|||
function editAfter() { |
|||
nextTick(() => {}); |
|||
// 加载子表数据 |
|||
if (formData.id) { |
|||
let params = { id: formData.id }; |
|||
msDutyUserTable.loading = true; |
|||
defHttp |
|||
.get( |
|||
{ |
|||
url: '/military/msDutyTask/queryMsDutyUserByMainId', |
|||
params: params, |
|||
}, |
|||
{ isTransformResponse: false } |
|||
) |
|||
// getAction(this.url.msDutyUser.list, params) |
|||
.then((res) => { |
|||
let { result } = res; |
|||
let dataSource: any = []; |
|||
if (result) { |
|||
if (Array.isArray(result)) { |
|||
dataSource = result; |
|||
} else if (Array.isArray(result.records)) { |
|||
dataSource = result.records; |
|||
} |
|||
} |
|||
msDutyUserTable.dataSource = dataSource; |
|||
}) |
|||
.finally(() => { |
|||
msDutyUserTable.loading = false; |
|||
// console.log(msDutyUserTable) |
|||
// console.log(msDutyUserTable.dataSource) |
|||
for (let item of msDutyUserTable.dataSource) { |
|||
userIdList.value.push(item.dutyStaffId); |
|||
} |
|||
// console.log(userIdList.value) |
|||
}); |
|||
} |
|||
} |
|||
|
|||
const { getSubFormAndTableData, transformData } = useValidateAntFormAndTable(activeKey, { |
|||
msDutyUser: Jtable, |
|||
}); |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function getFormData() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
return transformData(toRaw(formData)); |
|||
} |
|||
|
|||
async function submitForm() { |
|||
const mainData = await getFormData(); |
|||
const subData: any = await getSubFormAndTableData(); |
|||
const values = Object.assign({}, dbData, mainData, subData); |
|||
console.log(values); |
|||
|
|||
// 若存在子表数据，则可以正常提交 |
|||
if (values.hasOwnProperty('msDutyUserList')) { |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(values, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} else { |
|||
console.log('请添加出勤人员后提交'); |
|||
createMessage.warning('请添加出勤人员后提交！'); |
|||
return; |
|||
} |
|||
} |
|||
|
|||
//子表方法 |
|||
function addDutyUser() { |
|||
// 禁用added方法默认添加空行操作 |
|||
|
|||
openSelect(); |
|||
} |
|||
function openSelect() { |
|||
// console.log("open"); |
|||
|
|||
// selectModal.value.visibleChange(); |
|||
openModal(true, { |
|||
isUpdate: false, |
|||
}); |
|||
} |
|||
function requestAddOrEdit() {} |
|||
function classifyIntoFormData() {} |
|||
|
|||
//下拉框选项值 |
|||
const selectOptions = ref<SelectValue>([]); |
|||
//下拉框选中值 |
|||
let selectValues: any = reactive<object>({ |
|||
value: [], |
|||
change: false, |
|||
}); |
|||
let state = ref(); |
|||
/** |
|||
* 监听组件值 |
|||
*/ |
|||
watchEffect(() => { |
|||
initValue(); |
|||
}); |
|||
/** |
|||
* 监听selectValues变化 |
|||
*/ |
|||
watch(selectValues, () => { |
|||
if (selectValues) { |
|||
state.value = selectValues.value; |
|||
// console.log("state", state.value); |
|||
} |
|||
}); |
|||
/** |
|||
* 将字符串值转化为数组 |
|||
*/ |
|||
function initValue() { |
|||
let value: any = props.formData ? props.formData : []; |
|||
if (value && typeof value === 'string' && value != 'null' && value != 'undefined') { |
|||
state.value = value.split(','); |
|||
selectValues.value = value.split(','); |
|||
} else { |
|||
selectValues.value = value; |
|||
// console.log(selectValues.value); |
|||
} |
|||
} |
|||
/** |
|||
* 设置下拉框的值 |
|||
*/ |
|||
function setValue(options, values) { |
|||
selectOptions.value = options; |
|||
//emitData.value = values.join(","); |
|||
state.value = values; |
|||
selectValues.value = values; |
|||
// console.log("options", options); |
|||
// console.log("values", values); |
|||
} |
|||
|
|||
//获取选择行 |
|||
function getSelectRows(rows) { |
|||
if (rows) { |
|||
let oldValues = Jtable.value.getNewDataWithId(); |
|||
let oldId = oldValues[oldValues.length - 1].id; |
|||
let userIdList: any = []; |
|||
for (let item of oldValues) { |
|||
if (item.dutyStaffId) { |
|||
userIdList.push(item.dutyStaffId); |
|||
} |
|||
} |
|||
Jtable.value.removeRowsById(oldId); |
|||
// console.log(rows); |
|||
// console.log("new", oldValues); |
|||
|
|||
for (let item of rows) { |
|||
let findtag = userIdList.indexOf(item.id); |
|||
if (findtag != -1) { |
|||
continue; |
|||
} |
|||
Jtable.value.pushRows([ |
|||
{ |
|||
dutyStaffName: item.realname, |
|||
sysOrgCode: item.orgCode, |
|||
sysOrgName: item.orgCodeTxt, |
|||
dutyStaffId: item.id, |
|||
dutyStaffNo: item.workNo, |
|||
}, |
|||
]); |
|||
} |
|||
} |
|||
//添加 |
|||
} |
|||
|
|||
const getBindValue = Object.assign({}, unref(props), unref(attrs)); |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
Jtable, |
|||
addCustomer, |
|||
editCustomer, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
// min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,79 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<MsDutyTaskForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></MsDutyTaskForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick } from 'vue'; |
|||
import MsDutyTaskForm from './MsDutyTaskForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(1200); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add(lineSelect= null) { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
// registerForm.value.add(); |
|||
registerForm.value.addCustomer(lineSelect); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record, lineSelect=null) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
// registerForm.value.edit(record); |
|||
registerForm.value.editCustomer(record, lineSelect); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
|
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
emit('success'); |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,133 @@ |
|||
import {BasicColumn} from '/@/components/Table'; |
|||
import {FormSchema} from '/@/components/Table'; |
|||
import { rules} from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
import {JVxeTypes,JVxeColumn} from '/@/components/jeecg/JVxeTable/types' |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '创建日期', |
|||
align:"center", |
|||
dataIndex: 'createTime' |
|||
}, |
|||
{ |
|||
title: '路线名称', |
|||
align:"center", |
|||
dataIndex: 'lineName' |
|||
}, |
|||
{ |
|||
title: '路线编号', |
|||
align:"center", |
|||
dataIndex: 'lineCode' |
|||
}, |
|||
]; |
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "路线名称", |
|||
field: "lineName", |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "路线编号", |
|||
field: "lineCode", |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
]; |
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '路线名称', |
|||
field: 'lineName', |
|||
component: 'Input', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入路线名称!'}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '路线编号', |
|||
field: 'lineCode', |
|||
component: 'Input', |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false |
|||
}, |
|||
]; |
|||
//子表单数据
|
|||
//子表表格配置
|
|||
export const msPatrolPointColumns: JVxeColumn[] = [ |
|||
{ |
|||
title: '巡逻点', |
|||
key: 'pointName', |
|||
type: JVxeTypes.input, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
{ |
|||
title: '巡逻点编码', |
|||
key: 'pointCode', |
|||
type: JVxeTypes.input, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
{ |
|||
title: '经度', |
|||
key: 'lon', |
|||
type: JVxeTypes.inputNumber, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
{ |
|||
title: '纬度', |
|||
key: 'lat', |
|||
type: JVxeTypes.inputNumber, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
{ |
|||
title: '高度', |
|||
key: 'height', |
|||
type: JVxeTypes.inputNumber, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
] |
|||
export const msLineConstColumns: JVxeColumn[] = [ |
|||
{ |
|||
title: '经度', |
|||
key: 'lon', |
|||
type: JVxeTypes.inputNumber, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
{ |
|||
title: '纬度', |
|||
key: 'lat', |
|||
type: JVxeTypes.inputNumber, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
{ |
|||
title: '高度', |
|||
key: 'height', |
|||
type: JVxeTypes.inputNumber, |
|||
width:"200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue:'', |
|||
}, |
|||
] |
|||
@ -0,0 +1,240 @@ |
|||
<!-- |
|||
巡逻路线管理 |
|||
|
|||
目录位置：执勤管理 -> 巡逻路线管理 |
|||
功能概述：巡逻点、线路点 未明白定义 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="路线名称" name="lineName"> |
|||
<a-input placeholder="请输入路线名称" v-model:value="queryParam.lineName"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="路线编号" name="lineCode"> |
|||
<a-input placeholder="请输入路线编号" v-model:value="queryParam.lineCode"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button> |
|||
<a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<MsPatrolLineModal @register="registerModal" @success="handleSuccess"></MsPatrolLineModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="mspatrolline-msPatrolLine" setup> |
|||
import { ref, reactive, computed, unref } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { useModal } from '/@/components/Modal'; |
|||
import MsPatrolLineModal from './components/MsPatrolLineModal.vue'; |
|||
import { columns, searchFormSchema } from './MsPatrolLine.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './MsPatrolLine.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
|
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
const checkedKeys = ref<Array<string | number>>([]); |
|||
//注册model |
|||
const [registerModal, { openModal }] = useModal(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '巡逻路线管理', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '巡逻路线管理', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
|
|||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
openModal(true, { |
|||
isUpdate: false, |
|||
showFooter: true, |
|||
}); |
|||
} |
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
openModal(true, { |
|||
record, |
|||
isUpdate: true, |
|||
showFooter: true, |
|||
}); |
|||
} |
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
openModal(true, { |
|||
record, |
|||
isUpdate: true, |
|||
showFooter: false, |
|||
}); |
|||
} |
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/* ----------------------以下为原生查询需要添加的-------------------------- */ |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
} |
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<a-spin :spinning="loading"> |
|||
<a-form v-bind="formItemLayout"> |
|||
<a-row> |
|||
<a-col :span="24"> |
|||
<a-form-item label="路线名称" v-bind="validateInfos.lineName"> |
|||
<a-input v-model:value="formData.lineName" placeholder="请输入路线名称" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="路线编号" v-bind="validateInfos.lineCode"> |
|||
<a-input v-model:value="formData.lineCode" placeholder="请输入路线编号" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
|
|||
<!-- 子表单区域 --> |
|||
<a-tabs v-model:activeKey="activeKey" animated> |
|||
<a-tab-pane tab="巡逻点管理" key="msPatrolPoint" :forceRender="true"> |
|||
<j-vxe-table |
|||
:keep-source="true" |
|||
resizable |
|||
ref="msPatrolPointTableRef" |
|||
:loading="msPatrolPointTable.loading" |
|||
:columns="msPatrolPointTable.columns" |
|||
:dataSource="msPatrolPointTable.dataSource" |
|||
:height="340" |
|||
:disabled="disabled" |
|||
:rowNumber="true" |
|||
:rowSelection="true" |
|||
:toolbar="true"/> |
|||
</a-tab-pane> |
|||
<a-tab-pane tab="线路点管理" key="msLineConst" :forceRender="true"> |
|||
<j-vxe-table |
|||
:keep-source="true" |
|||
resizable |
|||
ref="msLineConstTableRef" |
|||
:loading="msLineConstTable.loading" |
|||
:columns="msLineConstTable.columns" |
|||
:dataSource="msLineConstTable.dataSource" |
|||
:height="340" |
|||
:disabled="disabled" |
|||
:rowNumber="true" |
|||
:rowSelection="true" |
|||
:toolbar="true"/> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, ref, reactive, computed, toRaw, onMounted } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods'; |
|||
import { queryMsPatrolPointListByMainId, queryMsLineConstListByMainId, queryDataById, saveOrUpdate } from '../MsPatrolLine.api'; |
|||
import { JVxeTable } from '/@/components/jeecg/JVxeTable'; |
|||
import {msPatrolPointColumns, msLineConstColumns} from '../MsPatrolLine.data'; |
|||
import { Form } from 'ant-design-vue'; |
|||
const useForm = Form.useForm; |
|||
|
|||
export default defineComponent({ |
|||
name: "MsPatrolLineForm", |
|||
components:{ |
|||
JVxeTable, |
|||
}, |
|||
props:{ |
|||
formDisabled:{ |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
formData: { type: Object, default: ()=>{} }, |
|||
formBpm: { type: Boolean, default: true } |
|||
}, |
|||
emits:['success'], |
|||
setup(props, {emit}) { |
|||
const loading = ref(false); |
|||
const msPatrolPointTableRef = ref(); |
|||
const msPatrolPointTable = reactive<Record<string, any>>({ |
|||
loading: false, |
|||
columns: msPatrolPointColumns, |
|||
dataSource: [] |
|||
}); |
|||
const msLineConstTableRef = ref(); |
|||
const msLineConstTable = reactive<Record<string, any>>({ |
|||
loading: false, |
|||
columns: msLineConstColumns, |
|||
dataSource: [] |
|||
}); |
|||
const activeKey = ref('msPatrolPoint'); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
lineName: '', |
|||
lineCode: '', |
|||
}); |
|||
|
|||
//表单验证 |
|||
const validatorRules = reactive({ |
|||
lineName: [{ required: true, message: '请输入路线名称!'},], |
|||
}); |
|||
const {resetFields, validate, validateInfos} = useForm(formData, validatorRules, {immediate: true}); |
|||
const dbData = {}; |
|||
const formItemLayout = { |
|||
labelCol: {xs: {span: 24}, sm: {span: 5}}, |
|||
wrapperCol: {xs: {span: 24}, sm: {span: 16}}, |
|||
}; |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(()=>{ |
|||
if(props.formBpm === true){ |
|||
if(props.formData.disabled === false){ |
|||
return false; |
|||
}else{ |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
|
|||
|
|||
function add() { |
|||
resetFields(); |
|||
msPatrolPointTable.dataSource = []; |
|||
msLineConstTable.dataSource = []; |
|||
} |
|||
|
|||
async function edit(row) { |
|||
//主表数据 |
|||
await queryMainData(row.id); |
|||
//子表数据 |
|||
const msPatrolPointDataList = await queryMsPatrolPointListByMainId(row['id']); |
|||
msPatrolPointTable.dataSource = [...msPatrolPointDataList]; |
|||
const msLineConstDataList = await queryMsLineConstListByMainId(row['id']); |
|||
msLineConstTable.dataSource = [...msLineConstDataList]; |
|||
} |
|||
|
|||
async function queryMainData(id) { |
|||
const row = await queryDataById(id); |
|||
Object.keys(row).map(k => { |
|||
formData[k] = row[k]; |
|||
}); |
|||
} |
|||
|
|||
const {getSubFormAndTableData, transformData} = useValidateAntFormAndTable(activeKey, { |
|||
'msPatrolPoint': msPatrolPointTableRef, |
|||
'msLineConst': msLineConstTableRef, |
|||
}); |
|||
|
|||
async function getFormData() { |
|||
await validate(); |
|||
return transformData(toRaw(formData)) |
|||
} |
|||
|
|||
async function submitForm() { |
|||
const mainData = await getFormData(); |
|||
const subData = await getSubFormAndTableData(); |
|||
const values = Object.assign({}, dbData, mainData, subData); |
|||
console.log('表单提交数据', values) |
|||
const isUpdate = values.id ? true : false |
|||
await saveOrUpdate(values, isUpdate); |
|||
//关闭弹窗 |
|||
emit('success'); |
|||
} |
|||
|
|||
function setFieldsValue(values) { |
|||
if(values){ |
|||
Object.keys(values).map(k=>{ |
|||
formData[k] = values[k]; |
|||
}); |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 值改变事件触发-树控件回调 |
|||
* @param key |
|||
* @param value |
|||
*/ |
|||
function handleFormChange(key, value) { |
|||
formData[key] = value; |
|||
} |
|||
|
|||
|
|||
return { |
|||
msPatrolPointTableRef, |
|||
msPatrolPointTable, |
|||
msLineConstTableRef, |
|||
msLineConstTable, |
|||
validatorRules, |
|||
validateInfos, |
|||
activeKey, |
|||
loading, |
|||
formData, |
|||
setFieldsValue, |
|||
handleFormChange, |
|||
formItemLayout, |
|||
disabled, |
|||
getFormData, |
|||
submitForm, |
|||
add, |
|||
edit |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,68 @@ |
|||
<template> |
|||
<BasicModal v-bind="$attrs" @register="registerModal" :title="title" :width="800" @ok="handleSubmit"> |
|||
<ms-patrol-line-form ref="formComponent" :formDisabled="formDisabled" :formBpm="false" @success="submitSuccess"></ms-patrol-line-form> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { ref, unref } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import MsPatrolLineForm from './MsPatrolLineForm.vue'; |
|||
|
|||
export default { |
|||
name: "TestCgMainVxeModal", |
|||
components:{ |
|||
BasicModal, |
|||
MsPatrolLineForm |
|||
}, |
|||
emits:['register','success'], |
|||
setup(_p, {emit}){ |
|||
const formComponent = ref() |
|||
const isUpdate = ref(true); |
|||
const formDisabled = ref(false); |
|||
const title = ref('') |
|||
|
|||
//表单赋值 |
|||
const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => { |
|||
setModalProps({confirmLoading: false,showCancelBtn:data?.showFooter,showOkBtn:data?.showFooter}); |
|||
isUpdate.value = !!data?.isUpdate; |
|||
title.value = data?.isUpdate?'编辑':'新增' |
|||
formDisabled.value = !data?.showFooter; |
|||
if (unref(isUpdate)) { |
|||
console.log('data', data) |
|||
formComponent.value.edit(data.record) |
|||
}else{ |
|||
formComponent.value.add() |
|||
} |
|||
}); |
|||
|
|||
function handleSubmit() { |
|||
formComponent.value.submitForm(); |
|||
} |
|||
|
|||
function submitSuccess(){ |
|||
emit('success'); |
|||
closeModal(); |
|||
} |
|||
|
|||
return { |
|||
registerModal, |
|||
title, |
|||
formComponent, |
|||
formDisabled, |
|||
handleSubmit, |
|||
submitSuccess |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less" scoped> |
|||
/** 时间和数字输入框样式 */ |
|||
:deep(.ant-input-number){ |
|||
width: 100% |
|||
} |
|||
|
|||
:deep(.ant-calendar-picker){ |
|||
width: 100% |
|||
} |
|||
</style> |
|||
@ -0,0 +1,153 @@ |
|||
import {BasicColumn} from '/@/components/Table'; |
|||
import {FormSchema} from '/@/components/Table'; |
|||
import { rules} from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
|
|||
{ |
|||
title: '区域', |
|||
align: "center", |
|||
// dataIndex: 'lineId_dictText',
|
|||
dataIndex: 'lineName', |
|||
width: 250, |
|||
}, |
|||
{ |
|||
title: '序号', |
|||
align: "center", |
|||
dataIndex: 'sitecode', |
|||
}, |
|||
{ |
|||
title: '站点名称', |
|||
align: "center", |
|||
dataIndex: 'sitename' |
|||
}, |
|||
{ |
|||
title: '经度', |
|||
align: "center", |
|||
dataIndex: 'longitude' |
|||
}, |
|||
{ |
|||
title: '纬度', |
|||
align: "center", |
|||
dataIndex: 'latitude' |
|||
}, |
|||
{ |
|||
title: '高度', |
|||
align: "center", |
|||
dataIndex: 'height' |
|||
}, |
|||
{ |
|||
title: '偏航角', |
|||
align: "center", |
|||
dataIndex: 'yaw' |
|||
}, |
|||
{ |
|||
title: '俯仰角', |
|||
align: "center", |
|||
dataIndex: 'pitch' |
|||
}, |
|||
{ |
|||
title: '翻转角', |
|||
align: "center", |
|||
dataIndex: 'roll' |
|||
}, |
|||
|
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "站点序号", |
|||
field: 'sitecode', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "线路id", |
|||
field: 'lineId', |
|||
component: 'JDictSelectTag', |
|||
componentProps:{ |
|||
}, |
|||
colProps: {span: 6}, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '站点序号', |
|||
field: 'sitecode', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '站点名称', |
|||
field: 'sitename', |
|||
component: 'Input', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入站点名称!'}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '经度', |
|||
field: 'longitude', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入经度!'}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '纬度', |
|||
field: 'latitude', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入纬度!'}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '高度', |
|||
field: 'height', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '偏航角', |
|||
field: 'yaw', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '俯仰角', |
|||
field: 'pitch', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '翻转角', |
|||
field: 'roll', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '线路id', |
|||
field: 'lineId', |
|||
component: 'JDictSelectTag', |
|||
componentProps:{ |
|||
dictCode: "" |
|||
}, |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入线路id!'}, |
|||
]; |
|||
}, |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,273 @@ |
|||
<!-- |
|||
视频监控点位管理 |
|||
|
|||
目录位置：三维地图管理 -> 视频监控点位管理 |
|||
功能概述：所在场景下的区域的监控杆，位置名称 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="区域名称" name="lineId"> |
|||
<!-- <JInput placeholder="请输入序号" v-model:value="queryParam.sitecode"></JInput> --> |
|||
<a-select v-model:value="queryParam.lineId" style="width: 300px" placeholder="请选择区域名称" @select="searchQuery" allowClear> |
|||
<a-select-option v-for="(item, index) in lineSelect" :value="item.id" :key="item.id"> |
|||
{{ item.name }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="站点名称" name="sitename"> |
|||
<a-input placeholder="请输入站点名称" v-model:value="queryParam.sitename" @blur="searchQuery" allowClear></a-input> |
|||
<!-- <JInput laceholder="请输入站点名称" v-model:value="queryParam.sitename" ></JInput> --> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<!-- <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> --> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined" style="margin-left: 8px"> 新增</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<MsCameraSiteModal ref="registerModal" @success="handleSuccess"></MsCameraSiteModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="camera-msCameraSite" setup> |
|||
import { ref, reactive, onMounted } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './MsCameraSite.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './MsCameraSite.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import MsCameraSiteModal from './components/MsCameraSiteModal.vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
|
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: 'ms_camera_site', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
showIndexColumn: true, |
|||
useSearchForm: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: 'ms_camera_site', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
const lineSelect = ref([]); |
|||
//线路选择框 |
|||
function setSelectList() { |
|||
defHttp |
|||
.get( |
|||
{ |
|||
url: '/military/msMapLine/mapLineSelect', |
|||
}, |
|||
{ isTransformResponse: false } |
|||
) |
|||
// getAction(this.url.querySelectList, {}) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
lineSelect.value = res.result; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
onMounted(() => { |
|||
setSelectList(); |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,297 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="24"> |
|||
<a-form-item label="区域" v-bind="validateInfos.lineId"> |
|||
<!-- <j-dict-select-tag v-model:value="formData.lineId" dictCode="" placeholder="" :disabled="disabled"/> --> |
|||
<a-select |
|||
v-model:value="formData.lineId" |
|||
style="width: 300px" |
|||
@change="changeLineValue" |
|||
:disabled="disabled" |
|||
placeholder="请选择所属区域" |
|||
> |
|||
<a-select-option v-for="(item, index) in lineSelect" :value="item.id" :key="item.id"> |
|||
{{ item.name }} |
|||
</a-select-option> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="站点序号" v-bind="validateInfos.sitecode"> |
|||
<a-input v-model:value="formData.sitecode" placeholder="请输入站点序号" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="站点名称" v-bind="validateInfos.sitename"> |
|||
<a-input v-model:value="formData.sitename" placeholder="请输入站点名称" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<template v-if="disabled == false"> |
|||
<a-col :span="24"> |
|||
<a-form-item label="位置"> |
|||
<a><img :src="locationPng" class="dwImg" @click="mapShow" /></a> |
|||
</a-form-item> |
|||
</a-col> |
|||
|
|||
<EarthMapModal |
|||
ref="earthMapModal" |
|||
:enableTile="false" |
|||
:visible="mapVisible" |
|||
@closeWin=" |
|||
() => { |
|||
mapVisible = false; |
|||
} |
|||
" |
|||
@checkPosition="checkPosition" |
|||
:hasMoveMethod="true" |
|||
@moveChinaPosition="moveChinaPosition" |
|||
:editTileModel="mapModel" |
|||
initModeType="3D" |
|||
:enable-pointer="false" |
|||
> |
|||
</EarthMapModal> |
|||
</template> |
|||
<a-col :span="24"> |
|||
<a-form-item label="经度" v-bind="validateInfos.longitude"> |
|||
<a-input-number v-model:value="formData.longitude" placeholder="请输入经度" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="纬度" v-bind="validateInfos.latitude"> |
|||
<a-input-number v-model:value="formData.latitude" placeholder="请输入纬度" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="高度" v-bind="validateInfos.height"> |
|||
<a-input-number v-model:value="formData.height" placeholder="请输入高度" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="偏航角" v-bind="validateInfos.yaw"> |
|||
<a-input-number v-model:value="formData.yaw" placeholder="请输入偏航角" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="俯仰角" v-bind="validateInfos.pitch"> |
|||
<a-input-number v-model:value="formData.pitch" placeholder="请输入俯仰角" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="翻转角" v-bind="validateInfos.roll"> |
|||
<a-input-number v-model:value="formData.roll" placeholder="请输入翻转角" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
// import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../MsCameraSite.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
import EarthMapModal from '@/views/military/modules/earthMap/scene/model/mapModel/EarthMapModal.vue'; |
|||
import locationPng from '@/assets/images/getLocation.png'; |
|||
|
|||
const lineSelect: any = ref([]); |
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => {} }, |
|||
formBpm: { type: Boolean, default: true }, |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: undefined, |
|||
lineId: undefined, |
|||
sitecode: '', |
|||
sitename: '', |
|||
longitude: undefined, |
|||
latitude: undefined, |
|||
height: undefined, |
|||
yaw: undefined, |
|||
pitch: undefined, |
|||
roll: undefined, |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
sitecode: [{ required: true, message: '请输入站点序号!' }], |
|||
sitename: [{ required: true, message: '请输入站点名称!' }], |
|||
longitude: [{ required: true, message: '请输入经度!' }], |
|||
latitude: [{ required: true, message: '请输入纬度!' }], |
|||
lineId: [{ required: true, message: '请选择所属区域!' }], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
setSelectList(); |
|||
}); |
|||
//线路选择框 |
|||
function setSelectList() { |
|||
defHttp |
|||
.get( |
|||
{ |
|||
url: '/military/msMapLine/mapLineSelect', |
|||
}, |
|||
{ isTransformResponse: false } |
|||
) |
|||
// getAction(this.url.querySelectList, {}) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
lineSelect.value = res.result; |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
edit({}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
function changeLineValue(item, option) { |
|||
formData.lineId = option.key; |
|||
} |
|||
|
|||
// 弹窗地图框属性 |
|||
const mapVisible = ref(false); |
|||
const mapModel = ref(); |
|||
const mapShow = function () { |
|||
mapModel.value = { |
|||
custom: { |
|||
id: formData.id, |
|||
}, |
|||
czmObject: { |
|||
name: formData.sitename, |
|||
xbsjType: 'Model', |
|||
url: '/dt/sys/common/static/' + formData.modelUrl, |
|||
// "color": [0.52, 0.6, 0.58, 1], |
|||
minimumPixelSize: formData.minimumPixelSize, |
|||
// maximumScale: 0.02, |
|||
scale: formData.scale, |
|||
xbsjScale: formData.xyzScale ? formData.xyzScale.split(',') : [1, 1, 1], |
|||
xbsjPosition: [window.Cesium.Math.toRadians(formData.longitude), window.Cesium.Math.toRadians(formData.latitude), formData.height], |
|||
xbsjRotation: [ |
|||
window.Cesium.Math.toRadians(formData.yaw), |
|||
window.Cesium.Math.toRadians(formData.pitch), |
|||
window.Cesium.Math.toRadians(formData.roll), |
|||
], |
|||
viewDistance: 150, |
|||
distanceDisplayCondition: [1.0, 30000.0], |
|||
}, |
|||
}; |
|||
|
|||
mapVisible.value = true; |
|||
}; |
|||
|
|||
const checkPosition = function (position, rotation, fov) { |
|||
const CMath = window.Cesium.Math; |
|||
formData.longitude = CMath.toDegrees(position[0]); |
|||
formData.latitude = CMath.toDegrees(position[1]); |
|||
formData.height = CMath.toDegrees(position[2]); |
|||
|
|||
formData.yaw = CMath.toDegrees(rotation[0]); |
|||
formData.pitch = CMath.toDegrees(rotation[1]); |
|||
formData.roll = CMath.toDegrees(rotation[2]); |
|||
|
|||
// subObject.value.viewDistance = fov; |
|||
}; |
|||
const earthMapModal: any = ref(null); |
|||
// 打开地图时飞入到指定位置 |
|||
const moveChinaPosition = function () { |
|||
earthMapModal.value.CModel.czmObject.flyTo(); |
|||
// const CMath = window.Cesium.Math; |
|||
// window.earth.camera.position = [CMath.toRadians(formData.longitude) - 0.000001, CMath.toRadians(formData.latitude) - 0.000001, CMath.toRadians(formData.height) - 0.000001]; |
|||
// window.earth.camera.rotation = [CMath.toRadians(formData.yaw), CMath.toRadians(formData.pitch), CMath.toRadians(formData.roll)] |
|||
}; |
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
|
|||
.dwImg { |
|||
width: 32px; |
|||
height: 32px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<MsCameraSiteForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></MsCameraSiteForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import MsCameraSiteForm from './MsCameraSiteForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(800); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,89 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from "/@/hooks/web/useMessage"; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/dtDeviceInfo/list', |
|||
save = '/military/dtDeviceInfo/add', |
|||
edit = '/military/dtDeviceInfo/edit', |
|||
deleteOne = '/military/dtDeviceInfo/delete', |
|||
deleteBatch = '/military/dtDeviceInfo/deleteBatch', |
|||
importExcel = '/military/dtDeviceInfo/importExcel', |
|||
exportXls = '/military/dtDeviceInfo/exportXls', |
|||
dtDeviceSensorInfoList = '/military/dtDeviceInfo/queryDtDeviceSensorInfoByMainId', |
|||
dtDeviceStatusList = '/military/dtDeviceInfo/queryDtDeviceStatusByMainId', |
|||
} |
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
/** |
|||
* 子表单查询接口 |
|||
* @param params |
|||
*/ |
|||
export const queryDtDeviceSensorInfo = Api.dtDeviceSensorInfoList |
|||
/** |
|||
* 子表单查询接口 |
|||
* @param params |
|||
*/ |
|||
export const queryDtDeviceStatus = Api.dtDeviceStatusList |
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => |
|||
defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
*/ |
|||
export const deleteOne = (params, handleSuccess) => { |
|||
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
/** |
|||
* 子表列表接口 |
|||
* @param params |
|||
*/ |
|||
export const dtDeviceSensorInfoList = (params) => |
|||
defHttp.get({ url: Api.dtDeviceSensorInfoList, params }, { isTransformResponse: false }); |
|||
/** |
|||
* 子表列表接口 |
|||
* @param params |
|||
*/ |
|||
export const dtDeviceStatusList = (params) => |
|||
defHttp.get({ url: Api.dtDeviceStatusList, params }, { isTransformResponse: false }); |
|||
@ -0,0 +1,706 @@ |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { rules } from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
import { JVxeTypes, JVxeColumn } from '/@/components/jeecg/JVxeTable/types' |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '所属站点', |
|||
align: "center", |
|||
dataIndex: 'deviceOwnerId_dictText' |
|||
}, |
|||
{ |
|||
title: '类型', |
|||
align: "center", |
|||
dataIndex: 'deviceType_dictText', |
|||
width: 120 |
|||
}, |
|||
{ |
|||
title: '设备编码', |
|||
align: "center", |
|||
dataIndex: 'deviceCode', |
|||
width: 120 |
|||
}, |
|||
{ |
|||
title: '名称', |
|||
align: "center", |
|||
dataIndex: 'deviceName' |
|||
}, |
|||
{ |
|||
title: '位置', |
|||
align: "center", |
|||
dataIndex: 'devicePosition' |
|||
}, |
|||
{ |
|||
title: '经度', |
|||
align: "center", |
|||
dataIndex: 'deviceLon' |
|||
}, |
|||
{ |
|||
title: '纬度', |
|||
align: "center", |
|||
dataIndex: 'deviceLat' |
|||
}, |
|||
{ |
|||
title: '海拔', |
|||
align: "center", |
|||
dataIndex: 'deviceAlt' |
|||
}, |
|||
{ |
|||
title: '设备状态', |
|||
align: "center", |
|||
dataIndex: 'deviceStatus_dictText', |
|||
width: 90 |
|||
}, |
|||
{ |
|||
title: '访问路径', |
|||
align: "center", |
|||
dataIndex: 'deviceUrl' |
|||
}, |
|||
{ |
|||
title: '协议类型', |
|||
align: "center", |
|||
dataIndex: 'protocol_dictText' |
|||
}, |
|||
{ |
|||
title: 'ip地址', |
|||
align: "center", |
|||
dataIndex: 'deviceIp' |
|||
}, |
|||
{ |
|||
title: '端口', |
|||
align: "center", |
|||
dataIndex: 'ipPort' |
|||
}, |
|||
{ |
|||
title: '端口2', |
|||
align: "center", |
|||
dataIndex: 'ipPort2' |
|||
}, |
|||
{ |
|||
title: '入网许可证', |
|||
align: "center", |
|||
dataIndex: 'isAudit_dictText', |
|||
width: 120 |
|||
}, |
|||
{ |
|||
title: '用户名', |
|||
align: "center", |
|||
dataIndex: 'username' |
|||
}, |
|||
{ |
|||
title: '密码', |
|||
align: "center", |
|||
dataIndex: 'password' |
|||
}, |
|||
{ |
|||
title: '设备子类型', |
|||
align: "center", |
|||
dataIndex: 'subtype' |
|||
}, |
|||
{ |
|||
title: '安装高度', |
|||
align: "center", |
|||
dataIndex: 'deviceHeight' |
|||
}, |
|||
{ |
|||
title: '初始方位角', |
|||
align: "center", |
|||
dataIndex: 'initAzimuth' |
|||
}, |
|||
{ |
|||
title: '初始俯仰角', |
|||
align: "center", |
|||
dataIndex: 'initPitch' |
|||
}, |
|||
{ |
|||
title: '工作半径', |
|||
align: "center", |
|||
dataIndex: 'workingRadius' |
|||
}, |
|||
{ |
|||
title: '水平视场角度', |
|||
align: "center", |
|||
dataIndex: 'horizontalAngle' |
|||
}, |
|||
{ |
|||
title: '垂直视场角度', |
|||
align: "center", |
|||
dataIndex: 'verticalAngle' |
|||
}, |
|||
{ |
|||
title: '识别刻度', |
|||
align: "center", |
|||
dataIndex: 'identificationScale' |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
|
|||
// {
|
|||
// title: '所属区域',
|
|||
// align:"center",
|
|||
// dataIndex: 'sysAreaCode'
|
|||
// },
|
|||
]; |
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "所属站点", |
|||
field: 'deviceOwnerId', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "ms_map_scene,scene_name,scene_code" |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "设备类型", |
|||
field: 'deviceType', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "dt_deveice_type,type_name,type_no" |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "设备编码", |
|||
field: 'deviceCode', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "设备名称", |
|||
field: 'deviceName', |
|||
component: 'JInput', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
// {
|
|||
// label: "位置描述置",
|
|||
// field: 'devicePosition',
|
|||
// component: 'Input',
|
|||
// colProps: {span: 6},
|
|||
// },
|
|||
{ |
|||
label: "设备状态", |
|||
field: 'deviceStatus', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "dt_sensor_status" |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
// {
|
|||
// label: "设备访问路径",
|
|||
// field: 'deviceUrl',
|
|||
// component: 'Input',
|
|||
// colProps: {span: 6},
|
|||
// },
|
|||
// {
|
|||
// label: "设备ip地址",
|
|||
// field: 'deviceIp',
|
|||
// component: 'Input',
|
|||
// colProps: {span: 6},
|
|||
// },
|
|||
{ |
|||
label: "协议类型", |
|||
field: 'protocol', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "dt_deveice_protocol_type,protocol_name,protocol_type" |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
]; |
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '所属站点', |
|||
field: 'deviceOwnerId', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "ms_map_scene,scene_name,scene_code" |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '所属站点不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '类型', |
|||
field: 'deviceType', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "dt_deveice_type,type_name,type_no", |
|||
stringToNumber: true |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '类型不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '编码', |
|||
field: 'deviceCode', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '编码不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '名称', |
|||
field: 'deviceName', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '名称不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '位置', |
|||
field: 'devicePosition', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '位置不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '经度', |
|||
field: 'deviceLon', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '经度不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '纬度', |
|||
field: 'deviceLat', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '纬度不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '海拔', |
|||
field: 'deviceAlt', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '海拔不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '设备状态', |
|||
field: 'deviceStatus', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "dt_sensor_status", |
|||
stringToNumber: true |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '设备状态不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '协议类型', |
|||
field: 'protocol', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "dt_deveice_protocol_type,protocol_name,protocol_type", |
|||
stringToNumber: true |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '协议类型不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '访问路径', |
|||
field: 'deviceUrl', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '访问路径不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: 'ip地址', |
|||
field: 'deviceIp', |
|||
component: 'Input', |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: 'ip地址不能为空！', |
|||
}, |
|||
{ |
|||
pattern: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/, |
|||
message: 'ip地址格式不正确！', |
|||
} |
|||
], |
|||
}, |
|||
{ |
|||
label: '端口', |
|||
field: 'ipPort', |
|||
component: 'InputNumber', |
|||
rules: [ |
|||
{ |
|||
required: true, |
|||
message: '端口不能为空！', |
|||
}, |
|||
{ |
|||
pattern: /^([1-9]\d{0,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, |
|||
message: '端口格式不正确！', |
|||
} |
|||
], |
|||
}, |
|||
{ |
|||
label: '端口2', |
|||
field: 'ipPort2', |
|||
component: 'InputNumber', |
|||
rules: [ |
|||
{ |
|||
pattern: /^([1-9]\d{0,3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/, |
|||
message: '端口2格式不正确！', |
|||
} |
|||
], |
|||
}, |
|||
{ |
|||
label: '入网许可证', |
|||
field: 'isAudit', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "dt_is_audit", |
|||
stringToNumber: true |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '入网许可证不能为空!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '用户名', |
|||
field: 'username', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '密码', |
|||
field: 'password', |
|||
component: 'InputPassword', |
|||
}, |
|||
{ |
|||
label: '设备子类型', |
|||
field: 'subtype', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '安装高度', |
|||
field: 'deviceHeight', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '初始方位角', |
|||
field: 'initAzimuth', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '初始俯仰角', |
|||
field: 'initPitch', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '工作半径', |
|||
field: 'workingRadius', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '水平角度', |
|||
field: 'horizontalAngle', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '垂直角度', |
|||
field: 'verticalAngle', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '识别刻度', |
|||
field: 'identificationScale', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
|
|||
// {
|
|||
// label: '所属区域',
|
|||
// field: 'sysAreaCode',
|
|||
// component: 'Input',
|
|||
// },
|
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false |
|||
}, |
|||
]; |
|||
//子表单数据
|
|||
//子表列表数据
|
|||
export const dtDeviceSensorInfoColumns: BasicColumn[] = [ |
|||
// {
|
|||
// title: '设备id',
|
|||
// align:"center",
|
|||
// dataIndex: 'deveiceId'
|
|||
// },
|
|||
{ |
|||
title: '传感器名称', |
|||
align: "center", |
|||
dataIndex: 'sensorName' |
|||
}, |
|||
{ |
|||
title: '传感器编号', |
|||
align: "center", |
|||
dataIndex: 'sensorCode' |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
align: "center", |
|||
dataIndex: 'sensorStatus' |
|||
}, |
|||
{ |
|||
title: '经度', |
|||
align: "center", |
|||
dataIndex: 'sensorLon' |
|||
}, |
|||
{ |
|||
title: '维度', |
|||
align: "center", |
|||
dataIndex: 'sensorLat' |
|||
}, |
|||
{ |
|||
title: '地址编号例如01', |
|||
align: "center", |
|||
dataIndex: 'sensorAddress' |
|||
}, |
|||
{ |
|||
title: '寄存器地址编号', |
|||
align: "center", |
|||
dataIndex: 'portId' |
|||
}, |
|||
{ |
|||
title: '值', |
|||
align: "center", |
|||
dataIndex: 'sdata' |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
align: "center", |
|||
dataIndex: 'sysAreaCode' |
|||
}, |
|||
]; |
|||
//子表列表数据
|
|||
export const dtDeviceStatusColumns: BasicColumn[] = [ |
|||
// {
|
|||
// title: '设备唯一标识',
|
|||
// align:"center",
|
|||
// dataIndex: 'deviceId'
|
|||
// },
|
|||
// {
|
|||
// title: '设备所属站点ID',
|
|||
// align:"center",
|
|||
// dataIndex: 'deviceOwnerId'
|
|||
// },
|
|||
{ |
|||
title: '设备初始状态', |
|||
align: "center", |
|||
dataIndex: 'status' |
|||
}, |
|||
{ |
|||
title: '状态补充说明', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
align: "center", |
|||
dataIndex: 'sysAreaCode' |
|||
}, |
|||
]; |
|||
//子表表格配置
|
|||
export const dtDeviceSensorInfoJVxeColumns: JVxeColumn[] = [ |
|||
// {
|
|||
// title: '设备id',
|
|||
// key: 'deveiceId',
|
|||
// type: JVxeTypes.input,
|
|||
// width:"200px",
|
|||
// placeholder: '请输入${title}',
|
|||
// defaultValue:'',
|
|||
// },
|
|||
{ |
|||
title: '传感器名称', |
|||
key: 'sensorName', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
validateRules: [ |
|||
{ required: true, message: '${title}不能为空' }, |
|||
], |
|||
}, |
|||
{ |
|||
title: '传感器编号', |
|||
key: 'sensorCode', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
key: 'sensorStatus', |
|||
type: JVxeTypes.inputNumber, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '经度', |
|||
key: 'sensorLon', |
|||
type: JVxeTypes.inputNumber, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '维度', |
|||
key: 'sensorLat', |
|||
type: JVxeTypes.inputNumber, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '地址编号例如01', |
|||
key: 'sensorAddress', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '寄存器地址编号', |
|||
key: 'portId', |
|||
type: JVxeTypes.inputNumber, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '值', |
|||
key: 'sdata', |
|||
type: JVxeTypes.inputNumber, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
key: 'remark', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
key: 'sysAreaCode', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
] |
|||
export const dtDeviceStatusJVxeColumns: JVxeColumn[] = [ |
|||
{ |
|||
title: '设备唯一标识', |
|||
key: 'deviceId', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '所属站点ID', |
|||
key: 'deviceOwnerId', |
|||
type: JVxeTypes.inputNumber, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
validateRules: [ |
|||
{ required: true, message: '${title}不能为空' }, |
|||
], |
|||
}, |
|||
{ |
|||
title: '设备初始状态', |
|||
key: 'status', |
|||
type: JVxeTypes.inputNumber, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
validateRules: [ |
|||
{ required: true, message: '${title}不能为空' }, |
|||
], |
|||
}, |
|||
{ |
|||
title: '状态补充说明', |
|||
key: 'remark', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
{ |
|||
title: '所属区域', |
|||
key: 'sysAreaCode', |
|||
type: JVxeTypes.input, |
|||
width: "200px", |
|||
placeholder: '请输入${title}', |
|||
defaultValue: '', |
|||
}, |
|||
] |
|||
|
|||
/** |
|||
* 流程表单调用这个方法获取formSchema |
|||
* @param param |
|||
*/ |
|||
export function getBpmFormSchema(_formData): FormSchema[] { |
|||
// 默认和原始表单保持一致 如果流程中配置了权限数据，这里需要单独处理formSchema
|
|||
return formSchema; |
|||
} |
|||
@ -0,0 +1,250 @@ |
|||
<!-- |
|||
综合设备信息 |
|||
|
|||
目录位置：设备管理 -> 综合设备信息 |
|||
功能概述：管理所在区域下所有不同类型的设备的静态信息，编号、IP端口、安装高度（设备状态） |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection" :expandedRowKeys="expandedRowKeys" @expand="handleExpand"> |
|||
<!-- 内嵌table区域 begin --> |
|||
<!-- <template #expandedRowRender="{ record }"> |
|||
<a-tabs tabPosition="top"> |
|||
<a-tab-pane tab="设备传感器表" key="dtDeviceSensorInfo" forceRender> |
|||
<dtDeviceSensorInfoSubTable :id="expandedRowKeys[0]" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane tab="设备状态信息" key="dtDeviceStatus" forceRender> |
|||
<dtDeviceStatusSubTable :id="expandedRowKeys[0]" /> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</template> --> |
|||
<!-- 内嵌table区域 end --> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<DtDeviceInfoModal @register="registerModal" @success="handleSuccess"></DtDeviceInfoModal> |
|||
<!-- <DtDeviceSensorInfoModal ref="sensorInfoModal" @success="handleSuccess"></DtDeviceSensorInfoModal> --> |
|||
<a-modal v-model:visible="sensorInfoListShow" destroyOnClose title="设备传感器表" width="1080px" @success="handleSuccess"> |
|||
<template #footer=""> |
|||
<a-button @click="sensorInfoListShow = false">关闭</a-button> |
|||
</template> |
|||
<DtDeviceSensorInfoList :deviceInfo="deviceInfo"></DtDeviceSensorInfoList> |
|||
</a-modal> |
|||
<a-modal v-model:visible="statusListShow" destroyOnClose title="历史状态表" width="1080px" @success="handleSuccess"> |
|||
<template #footer=""> |
|||
<a-button @click="sensorInfoListShow = false">关闭</a-button> |
|||
</template> |
|||
<DtDeviceStatusList :deviceInfo="deviceInfo"></DtDeviceStatusList> |
|||
</a-modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="military-dtDeviceInfo" setup> |
|||
import { ref, computed, unref } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { useModal } from '/@/components/Modal'; |
|||
import DtDeviceInfoModal from './components/DtDeviceInfoModal.vue'; |
|||
import DtDeviceSensorInfoSubTable from './subTables/DtDeviceSensorInfoSubTable.vue'; |
|||
import DtDeviceStatusSubTable from './subTables/DtDeviceStatusSubTable.vue'; |
|||
import { columns, searchFormSchema } from './DtDeviceInfo.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DtDeviceInfo.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import DtDeviceSensorInfoModal from './sensor/components/DtDeviceSensorInfoModal.vue'; |
|||
import DtDeviceSensorInfoList from './sensor/DtDeviceSensorInfoList.vue'; |
|||
import DtDeviceStatusList from './status/DtDeviceStatusList.vue'; |
|||
|
|||
// 展开key |
|||
const expandedRowKeys = ref<any[]>([]); |
|||
//注册model |
|||
const [registerModal, { openModal }] = useModal(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '设备信息表', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
formConfig: { |
|||
//labelWidth: 120, |
|||
schemas: searchFormSchema, |
|||
autoSubmitOnEnter: true, |
|||
showAdvancedButton: false, |
|||
fieldMapToNumber: [], |
|||
fieldMapToTime: [], |
|||
}, |
|||
actionColumn: { |
|||
width: 160, |
|||
fixed: 'right', |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '设备信息表', |
|||
url: getExportUrl, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const sensorInfoModal = ref(); //添加传感器 |
|||
const sensorInfoListShow = ref(false); //传感器列表 |
|||
const statusListShow = ref(false); //设备状态列表 |
|||
const deviceInfo = ref(); //设备信息 |
|||
const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext; |
|||
|
|||
/** |
|||
* 展开事件 |
|||
* */ |
|||
function handleExpand(expanded, record) { |
|||
expandedRowKeys.value = []; |
|||
if (expanded === true) { |
|||
expandedRowKeys.value.push(record.id); |
|||
} |
|||
} |
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
openModal(true, { |
|||
isUpdate: false, |
|||
showFooter: true, |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 传感器列表 |
|||
*/ |
|||
function handleSensorList(record) { |
|||
// sensorInfoModal.value.disableSubmit = false; |
|||
// sensorInfoModal.value.add(record); |
|||
sensorInfoListShow.value = true; |
|||
deviceInfo.value = record; |
|||
} |
|||
/** |
|||
* 设备状态列表 |
|||
*/ |
|||
function handleStatusList(record) { |
|||
statusListShow.value = true; |
|||
deviceInfo.value = record; |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
openModal(true, { |
|||
record, |
|||
isUpdate: true, |
|||
showFooter: true, |
|||
}); |
|||
} |
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
openModal(true, { |
|||
record, |
|||
isUpdate: true, |
|||
showFooter: false, |
|||
}); |
|||
} |
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '查看传感器', |
|||
onClick: handleSensorList.bind(null, record), |
|||
}, |
|||
// { |
|||
// label: '编辑', |
|||
// onClick: handleEdit.bind(null, record), |
|||
// } |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '历史状态', |
|||
onClick: handleStatusList.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
</script> |
|||
|
|||
<style scoped></style> |
|||
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<div> |
|||
<BasicForm @register="registerForm" ref="formRef"/> |
|||
<!-- 子表单区域 --> |
|||
<a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs" v-show="false"> |
|||
<a-tab-pane tab="设备传感器表" key="dtDeviceSensorInfo" :forceRender="true"> |
|||
<JVxeTable |
|||
v-if="dtDeviceSensorInfoTable.show" |
|||
keep-source |
|||
resizable |
|||
ref="dtDeviceSensorInfo" |
|||
:loading="dtDeviceSensorInfoTable.loading" |
|||
:columns="dtDeviceSensorInfoTable.columns" |
|||
:dataSource="dtDeviceSensorInfoTable.dataSource" |
|||
:height="340" |
|||
:disabled="formDisabled" |
|||
:rowNumber="true" |
|||
:rowSelection="true" |
|||
:toolbar="true" |
|||
/> |
|||
</a-tab-pane> |
|||
<a-tab-pane tab="设备状态信息" key="dtDeviceStatus" :forceRender="true"> |
|||
<JVxeTable |
|||
v-if="dtDeviceStatusTable.show" |
|||
keep-source |
|||
resizable |
|||
ref="dtDeviceStatus" |
|||
:loading="dtDeviceStatusTable.loading" |
|||
:columns="dtDeviceStatusTable.columns" |
|||
:dataSource="dtDeviceStatusTable.dataSource" |
|||
:height="340" |
|||
:disabled="formDisabled" |
|||
:rowNumber="true" |
|||
:rowSelection="true" |
|||
:toolbar="true" |
|||
/> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
<div style="width: 100%;text-align: center;margin-top: 10px;" v-if="showFlowSubmitButton"> |
|||
<a-button preIcon="ant-design:check-outlined" style="width: 126px" type="primary" @click="handleSubmit">提 交</a-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import {ref, computed, unref,reactive, onMounted } from 'vue'; |
|||
import {BasicForm, useForm} from '/@/components/Form/index'; |
|||
import { JVxeTable } from '/@/components/jeecg/JVxeTable' |
|||
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts' |
|||
import {formSchema,dtDeviceSensorInfoJVxeColumns,dtDeviceStatusJVxeColumns} from '../DtDeviceInfo.data'; |
|||
import {saveOrUpdate,queryDtDeviceSensorInfo,queryDtDeviceStatus} from '../DtDeviceInfo.api'; |
|||
import { VALIDATE_FAILED } from '/@/utils/common/vxeUtils' |
|||
const isUpdate = ref(true); |
|||
|
|||
const refKeys = ref(['dtDeviceSensorInfo', 'dtDeviceStatus', ]); |
|||
const activeKey = ref('dtDeviceSensorInfo'); |
|||
const dtDeviceSensorInfo = ref(); |
|||
const dtDeviceStatus = ref(); |
|||
const tableRefs = {dtDeviceSensorInfo, dtDeviceStatus, }; |
|||
const dtDeviceSensorInfoTable = reactive({ |
|||
loading: false, |
|||
dataSource: [], |
|||
columns:dtDeviceSensorInfoJVxeColumns, |
|||
show: false |
|||
}) |
|||
const dtDeviceStatusTable = reactive({ |
|||
loading: false, |
|||
dataSource: [], |
|||
columns:dtDeviceStatusJVxeColumns, |
|||
show: false |
|||
}) |
|||
|
|||
const props = defineProps({ |
|||
formData: { type: Object, default: ()=>{} }, |
|||
formBpm: { type: Boolean, default: true } |
|||
}); |
|||
const formDisabled = computed(()=>{ |
|||
if(props.formBpm === true){ |
|||
if(props.formData.disabled === false){ |
|||
return false; |
|||
} |
|||
} |
|||
return true; |
|||
}); |
|||
// 是否显示提交按钮 |
|||
const showFlowSubmitButton = computed(()=>{ |
|||
if(props.formBpm === true){ |
|||
if(props.formData.disabled === false){ |
|||
return true |
|||
} |
|||
} |
|||
return false |
|||
}); |
|||
|
|||
//表单配置 |
|||
const [registerForm, {setProps,resetFields, setFieldsValue, validate}] = useForm({ |
|||
labelWidth: 150, |
|||
schemas: formSchema, |
|||
showActionButtonGroup: false, |
|||
baseColProps: {span: 8} |
|||
}); |
|||
|
|||
onMounted(()=>{ |
|||
initFormData(); |
|||
}); |
|||
//渲染流程表单数据 |
|||
const queryByIdUrl = '/military/dtDeviceInfo/queryById'; |
|||
async function initFormData(){ |
|||
if(props.formBpm === true){ |
|||
await reset(); |
|||
let params = {id: props.formData.dataId}; |
|||
const data = await defHttp.get({url: queryByIdUrl, params}); |
|||
//表单赋值 |
|||
await setFieldsValue({ |
|||
...data |
|||
}); |
|||
requestSubTableData(queryDtDeviceSensorInfo, {id: data.id}, dtDeviceSensorInfoTable, ()=>{ |
|||
dtDeviceSensorInfoTable.show = true; |
|||
}); |
|||
requestSubTableData(queryDtDeviceStatus, {id: data.id}, dtDeviceStatusTable, ()=>{ |
|||
dtDeviceStatusTable.show = true; |
|||
}); |
|||
// 隐藏底部时禁用整个表单 |
|||
setProps({ disabled: formDisabled.value }) |
|||
} |
|||
} |
|||
|
|||
//方法配置 |
|||
const [handleChangeTabs,handleSubmit,requestSubTableData,formRef] = useJvxeMethod(requestAddOrEdit,classifyIntoFormData,tableRefs,activeKey,refKeys); |
|||
|
|||
async function reset(){ |
|||
await resetFields(); |
|||
activeKey.value = 'dtDeviceSensorInfo'; |
|||
dtDeviceSensorInfoTable.dataSource = []; |
|||
dtDeviceStatusTable.dataSource = []; |
|||
} |
|||
function classifyIntoFormData(allValues) { |
|||
let main = Object.assign({}, allValues.formValue) |
|||
return { |
|||
...main, // 展开 |
|||
dtDeviceSensorInfoList: allValues.tablesValue[0].tableData, |
|||
dtDeviceStatusList: allValues.tablesValue[1].tableData, |
|||
} |
|||
} |
|||
//表单提交事件 |
|||
async function requestAddOrEdit(values) { |
|||
//提交表单 |
|||
await saveOrUpdate(values, true); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
/** 时间和数字输入框样式 */ |
|||
:deep(.ant-input-number){ |
|||
width: 100% |
|||
} |
|||
|
|||
:deep(.ant-calendar-picker){ |
|||
width: 100% |
|||
} |
|||
</style> |
|||
@ -0,0 +1,119 @@ |
|||
<template> |
|||
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="1440" @ok="handleSubmit"> |
|||
<BasicForm @register="registerForm" ref="formRef" /> |
|||
<!-- 子表单区域 --> |
|||
<a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs" v-show="false"> |
|||
<a-tab-pane tab="设备传感器表" key="dtDeviceSensorInfo" :forceRender="true"> |
|||
<JVxeTable keep-source resizable ref="dtDeviceSensorInfo" :loading="dtDeviceSensorInfoTable.loading" |
|||
:columns="dtDeviceSensorInfoTable.columns" :dataSource="dtDeviceSensorInfoTable.dataSource" :height="340" |
|||
:disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" /> |
|||
</a-tab-pane> |
|||
<a-tab-pane tab="设备状态信息" key="dtDeviceStatus" :forceRender="true"> |
|||
<JVxeTable keep-source resizable ref="dtDeviceStatus" :loading="dtDeviceStatusTable.loading" |
|||
:columns="dtDeviceStatusTable.columns" :dataSource="dtDeviceStatusTable.dataSource" :height="340" |
|||
:disabled="formDisabled" :rowNumber="true" :rowSelection="true" :toolbar="true" /> |
|||
</a-tab-pane> |
|||
</a-tabs> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, computed, unref, reactive } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { JVxeTable } from '/@/components/jeecg/JVxeTable' |
|||
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts' |
|||
import { formSchema, dtDeviceSensorInfoJVxeColumns, dtDeviceStatusJVxeColumns } from '../DtDeviceInfo.data'; |
|||
import { saveOrUpdate, queryDtDeviceSensorInfo, queryDtDeviceStatus } from '../DtDeviceInfo.api'; |
|||
import { VALIDATE_FAILED } from '/@/utils/common/vxeUtils' |
|||
// Emits声明 |
|||
const emit = defineEmits(['register', 'success']); |
|||
const isUpdate = ref(true); |
|||
const formDisabled = ref(false); |
|||
const refKeys = ref(['dtDeviceSensorInfo', 'dtDeviceStatus',]); |
|||
const activeKey = ref('dtDeviceSensorInfo'); |
|||
const dtDeviceSensorInfo = ref(); |
|||
const dtDeviceStatus = ref(); |
|||
const tableRefs = { dtDeviceSensorInfo, dtDeviceStatus, }; |
|||
const dtDeviceSensorInfoTable = reactive({ |
|||
loading: false, |
|||
dataSource: [], |
|||
columns: dtDeviceSensorInfoJVxeColumns |
|||
}) |
|||
const dtDeviceStatusTable = reactive({ |
|||
loading: false, |
|||
dataSource: [], |
|||
columns: dtDeviceStatusJVxeColumns |
|||
}) |
|||
//表单配置 |
|||
const [registerForm, { setProps, resetFields, setFieldsValue, validate }] = useForm({ |
|||
//labelWidth: 150, |
|||
schemas: formSchema, |
|||
showActionButtonGroup: false, |
|||
baseColProps: { span: 8 } |
|||
}); |
|||
//表单赋值 |
|||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => { |
|||
//重置表单 |
|||
await reset(); |
|||
setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter }); |
|||
isUpdate.value = !!data?.isUpdate; |
|||
formDisabled.value = !data?.showFooter; |
|||
if (unref(isUpdate)) { |
|||
//表单赋值 |
|||
await setFieldsValue({ |
|||
...data.record, |
|||
}); |
|||
requestSubTableData(queryDtDeviceSensorInfo, { id: data?.record?.id }, dtDeviceSensorInfoTable) |
|||
requestSubTableData(queryDtDeviceStatus, { id: data?.record?.id }, dtDeviceStatusTable) |
|||
} |
|||
// 隐藏底部时禁用整个表单 |
|||
setProps({ disabled: !data?.showFooter }) |
|||
}); |
|||
//方法配置 |
|||
const [handleChangeTabs, handleSubmit, requestSubTableData, formRef] = useJvxeMethod(requestAddOrEdit, classifyIntoFormData, tableRefs, activeKey, refKeys); |
|||
|
|||
//设置标题 |
|||
const title = computed(() => (!unref(isUpdate) ? '新增' : '编辑')); |
|||
|
|||
async function reset() { |
|||
await resetFields(); |
|||
activeKey.value = 'dtDeviceSensorInfo'; |
|||
dtDeviceSensorInfoTable.dataSource = []; |
|||
dtDeviceStatusTable.dataSource = []; |
|||
} |
|||
function classifyIntoFormData(allValues) { |
|||
let main = Object.assign({}, allValues.formValue) |
|||
return { |
|||
...main, // 展开 |
|||
dtDeviceSensorInfoList: allValues.tablesValue[0].tableData, |
|||
dtDeviceStatusList: allValues.tablesValue[1].tableData, |
|||
} |
|||
} |
|||
//表单提交事件 |
|||
async function requestAddOrEdit(values) { |
|||
try { |
|||
setModalProps({ confirmLoading: true }); |
|||
console.log(values) |
|||
//提交表单 |
|||
await saveOrUpdate(values, isUpdate.value); |
|||
//关闭弹窗 |
|||
closeModal(); |
|||
//刷新列表 |
|||
emit('success'); |
|||
} finally { |
|||
setModalProps({ confirmLoading: false }); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
/** 时间和数字输入框样式 */ |
|||
:deep(.ant-input-number) { |
|||
width: 100% |
|||
} |
|||
|
|||
:deep(.ant-calendar-picker) { |
|||
width: 100% |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from "/@/hooks/web/useMessage"; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/dtDeviceSensorInfo/list', |
|||
save='/military/dtDeviceSensorInfo/add', |
|||
edit='/military/dtDeviceSensorInfo/edit', |
|||
deleteOne = '/military/dtDeviceSensorInfo/delete', |
|||
deleteBatch = '/military/dtDeviceSensorInfo/deleteBatch', |
|||
importExcel = '/military/dtDeviceSensorInfo/importExcel', |
|||
exportXls = '/military/dtDeviceSensorInfo/exportXls', |
|||
} |
|||
|
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params,handleSuccess) => { |
|||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
@ -0,0 +1,185 @@ |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { rules } from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
// {
|
|||
// title: '设备id',
|
|||
// align: "center",
|
|||
// dataIndex: 'deveiceId'
|
|||
// },
|
|||
{ |
|||
title: '传感器名称', |
|||
align: "center", |
|||
dataIndex: 'sensorName' |
|||
}, |
|||
{ |
|||
title: '传感器编号', |
|||
align: "center", |
|||
dataIndex: 'sensorCode' |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
align: "center", |
|||
dataIndex: 'sensorStatus_dictText' |
|||
}, |
|||
{ |
|||
title: '经度', |
|||
align: "center", |
|||
dataIndex: 'sensorLon' |
|||
}, |
|||
{ |
|||
title: '纬度', |
|||
align: "center", |
|||
dataIndex: 'sensorLat' |
|||
}, |
|||
{ |
|||
title: '地址编号', |
|||
align: "center", |
|||
dataIndex: 'sensorAddress' |
|||
}, |
|||
{ |
|||
title: '寄存器地址编号', |
|||
align: "center", |
|||
dataIndex: 'portId' |
|||
}, |
|||
{ |
|||
title: '值', |
|||
align: "center", |
|||
dataIndex: 'sdata' |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
// {
|
|||
// title: '所属区域',
|
|||
// align: "center",
|
|||
// dataIndex: 'sysAreaCode'
|
|||
// },
|
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "设备id", |
|||
field: 'deveiceId', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "传感器名称", |
|||
field: 'sensorName', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "传感器编号", |
|||
field: 'sensorCode', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "状态", |
|||
field: 'sensorStatus', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "经度", |
|||
field: 'sensorLon', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "维度", |
|||
field: 'sensorLat', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "地址编号例如01", |
|||
field: 'sensorAddress', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "寄存器地址编号", |
|||
field: 'portId', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '设备id', |
|||
field: 'deveiceId', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '传感器名称', |
|||
field: 'sensorName', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入传感器名称!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '传感器编号', |
|||
field: 'sensorCode', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '状态', |
|||
field: 'sensorStatus', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '经度', |
|||
field: 'sensorLon', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '纬度', |
|||
field: 'sensorLat', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '地址编号例如01', |
|||
field: 'sensorAddress', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '寄存器地址编号', |
|||
field: 'portId', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '值', |
|||
field: 'sdata', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '所属区域', |
|||
field: 'sysAreaCode', |
|||
component: 'Input', |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,288 @@ |
|||
<!-- |
|||
设备传感器 |
|||
|
|||
功能划分 |
|||
xxx -> 设备传感器 |
|||
--> |
|||
<template> |
|||
<div style="padding: 10px"> |
|||
<!--查询区域--> |
|||
<!-- <div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="设备id" name="deveiceId"> |
|||
<JInput placeholder="请输入设备id" v-model:value="queryParam.deveiceId"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="传感器名称" name="sensorName"> |
|||
<JInput placeholder="请输入传感器名称" v-model:value="queryParam.sensorName"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<template v-if="toggleSearchStatus"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="传感器编号" name="sensorCode"> |
|||
<JInput placeholder="请输入传感器编号" v-model:value="queryParam.sensorCode"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="状态" name="sensorStatus"> |
|||
<JInput placeholder="请输入状态" v-model:value="queryParam.sensorStatus"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="经度" name="sensorLon"> |
|||
<JInput placeholder="请输入经度" v-model:value="queryParam.sensorLon"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="维度" name="sensorLat"> |
|||
<JInput placeholder="请输入维度" v-model:value="queryParam.sensorLat"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="地址编号" name="sensorAddress"> |
|||
<JInput placeholder="请输入地址编号例如01" v-model:value="queryParam.sensorAddress"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="寄存器地址编号" name="portId"> |
|||
<JInput placeholder="请输入寄存器地址编号" v-model:value="queryParam.portId"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
</template> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> --> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> --> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<DtDeviceSensorInfoModal ref="registerModal" @success="handleSuccess"></DtDeviceSensorInfoModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="military-dtDeviceSensorInfo" setup> |
|||
import { ref, reactive, onMounted } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './DtDeviceSensorInfo.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DtDeviceSensorInfo.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import DtDeviceSensorInfoModal from './components/DtDeviceSensorInfoModal.vue'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
const props: any = defineProps({ |
|||
deviceInfo: { type: Object }, //设备信息 |
|||
}); |
|||
|
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '设备传感器表', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
showTableSetting: true, |
|||
showIndexColumn: true, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
params.deveiceId = props.deviceInfo.id; //主表id |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '设备传感器表', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
// console.log(16416,props.deviceInfo); |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(props.deviceInfo); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,203 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="12" v-show="false"> |
|||
<a-form-item label="设备id" v-bind="validateInfos.deveiceId"> |
|||
<a-input v-model:value="formData.deveiceId" placeholder="请输入设备id" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="传感器名称" v-bind="validateInfos.sensorName"> |
|||
<a-input v-model:value="formData.sensorName" placeholder="请输入传感器名称" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="传感器编号" v-bind="validateInfos.sensorCode"> |
|||
<a-input v-model:value="formData.sensorCode" placeholder="请输入传感器编号" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="状态" v-bind="validateInfos.sensorStatus"> |
|||
<!-- <a-input-number v-model:value="formData.sensorStatus" placeholder="请输入状态" style="width: 100%" :disabled="disabled"/> --> |
|||
<j-dict-select-tag v-model:value="formData.sensorStatus" dictCode="dt_sensor_status" :stringToNumber='true' |
|||
placeholder="请选择状态" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="经度" v-bind="validateInfos.sensorLon"> |
|||
<a-input-number v-model:value="formData.sensorLon" placeholder="请输入经度" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="纬度" v-bind="validateInfos.sensorLat"> |
|||
<a-input-number v-model:value="formData.sensorLat" placeholder="请输入纬度" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="地址编号" v-bind="validateInfos.sensorAddress"> |
|||
<a-input v-model:value="formData.sensorAddress" placeholder="请输入地址编号例如01" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="寄存器地址编号" v-bind="validateInfos.portId"> |
|||
<a-input-number v-model:value="formData.portId" placeholder="请输入寄存器地址编号" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="值" v-bind="validateInfos.sdata"> |
|||
<a-input-number v-model:value="formData.sdata" placeholder="请输入值" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="备注" v-bind="validateInfos.remark"> |
|||
<a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <a-col :span="12"> |
|||
<a-form-item label="所属区域" v-bind="validateInfos.sysAreaCode"> |
|||
<a-input v-model:value="formData.sysAreaCode" placeholder="请输入所属区域" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; |
|||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../DtDeviceSensorInfo.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => { } }, |
|||
formBpm: { type: Boolean, default: true } |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
deveiceId: '', |
|||
sensorName: '', |
|||
sensorCode: '', |
|||
sensorStatus: undefined, |
|||
sensorLon: undefined, |
|||
sensorLat: undefined, |
|||
sensorAddress: '', |
|||
portId: undefined, |
|||
sdata: undefined, |
|||
remark: '', |
|||
sysAreaCode: '', |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
sensorName: [{ required: true, message: '请输入传感器名称!' },], |
|||
sensorCode: [{ required: true, message: '请输入传感器编号!' },], |
|||
sensorStatus: [{ required: true, message: '请选择状态!' },], |
|||
sensorLon: [{ required: true, message: '请输入经度!' },], |
|||
sensorLat: [{ required: true, message: '请输入纬度!' },], |
|||
sensorAddress: [{ required: true, message: '请输入地址编号!' },], |
|||
portId: [{ required: true, message: '请输入寄存器地址编号!' }], |
|||
sdata: [{ required: true, message: '请输入值!' }] |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add(record) { |
|||
edit({ |
|||
deveiceId: record.id |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
|
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" |
|||
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<DtDeviceSensorInfoForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"> |
|||
</DtDeviceSensorInfoForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import DtDeviceSensorInfoForm from './DtDeviceSensorInfoForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(1180); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add(record) { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from "/@/hooks/web/useMessage"; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/dtDeviceStatus/list', |
|||
save='/military/dtDeviceStatus/add', |
|||
edit='/military/dtDeviceStatus/edit', |
|||
deleteOne = '/military/dtDeviceStatus/delete', |
|||
deleteBatch = '/military/dtDeviceStatus/deleteBatch', |
|||
importExcel = '/military/dtDeviceStatus/importExcel', |
|||
exportXls = '/military/dtDeviceStatus/exportXls', |
|||
} |
|||
|
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params,handleSuccess) => { |
|||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
@ -0,0 +1,111 @@ |
|||
import {BasicColumn} from '/@/components/Table'; |
|||
import {FormSchema} from '/@/components/Table'; |
|||
import { rules} from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '设备唯一标识', |
|||
align: "center", |
|||
dataIndex: 'deviceId' |
|||
}, |
|||
{ |
|||
title: '所属站点', |
|||
align: "center", |
|||
dataIndex: 'deviceOwnerId' |
|||
}, |
|||
{ |
|||
title: '设备状态', |
|||
align: "center", |
|||
dataIndex: 'status_dictText' |
|||
}, |
|||
{ |
|||
title: '补充说明', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
{ |
|||
title: '创建时间', |
|||
align: "center", |
|||
dataIndex: 'createTime' |
|||
}, |
|||
// {
|
|||
// title: '所属区域',
|
|||
// align: "center",
|
|||
// dataIndex: 'sysAreaCode'
|
|||
// },
|
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "设备唯一标识", |
|||
field: 'deviceId', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "所属站点ID", |
|||
field: 'deviceOwnerId', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "设备初始状态", |
|||
field: 'status', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
{ |
|||
label: "所属区域", |
|||
field: 'sysAreaCode', |
|||
component: 'Input', |
|||
colProps: {span: 6}, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '设备唯一标识', |
|||
field: 'deviceId', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '所属站点ID', |
|||
field: 'deviceOwnerId', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备所属站点ID!'}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '设备初始状态', |
|||
field: 'status', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({model,schema}) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备初始状态!'}, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '状态补充说明', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '所属区域', |
|||
field: 'sysAreaCode', |
|||
component: 'Input', |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,269 @@ |
|||
<!-- |
|||
历史状态 |
|||
|
|||
功能划分 |
|||
xxx -> 历史状态 |
|||
--> |
|||
<template> |
|||
<div style="padding: 10px"> |
|||
<!--查询区域--> |
|||
<!-- <div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="设备唯一标识" name="deviceId"> |
|||
<JInput placeholder="请输入设备唯一标识" v-model:value="queryParam.deviceId"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="设备所属站点ID" name="deviceOwnerId"> |
|||
<JInput placeholder="请输入设备所属站点ID" v-model:value="queryParam.deviceOwnerId"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<template v-if="toggleSearchStatus"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="设备初始状态" name="status"> |
|||
<JInput placeholder="请输入设备初始状态" v-model:value="queryParam.status"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="所属区域" name="sysAreaCode"> |
|||
<JInput placeholder="请输入所属区域" v-model:value="queryParam.sysAreaCode"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
</template> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> --> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<!-- <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> --> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<DtDeviceStatusModal ref="registerModal" @success="handleSuccess"></DtDeviceStatusModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="military-dtDeviceStatus" setup> |
|||
import { ref, reactive, onMounted } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './DtDeviceStatus.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DtDeviceStatus.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import DtDeviceStatusModal from './components/DtDeviceStatusModal.vue'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
|
|||
const props: any = defineProps({ |
|||
deviceInfo: { type: Object }, //设备信息 |
|||
}); |
|||
|
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '设备状态信息', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
showActionColumn: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
params.deviceId = props.deviceInfo.id; //主表id |
|||
params.deviceOwnerId = props.deviceInfo.deviceOwnerIdDictText; //站点id |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '设备状态信息', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
console.log(16416, props.deviceInfo); |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(props.deviceInfo); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备唯一标识" v-bind="validateInfos.deviceId"> |
|||
<a-input v-model:value="formData.deviceId" placeholder="请输入设备唯一标识" disabled="true"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属站点ID" v-bind="validateInfos.deviceOwnerId"> |
|||
<a-input-number v-model:value="formData.deviceOwnerId" placeholder="请输入设备所属站点ID" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备初始状态" v-bind="validateInfos.status"> |
|||
<j-dict-select-tag v-model:value="formData.status" dictCode="dt_sensor_status" placeholder="请输入设备初始状态" |
|||
:stringToNumber='true' :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="状态补充说明" v-bind="validateInfos.remark"> |
|||
<a-input v-model:value="formData.remark" placeholder="请输入状态补充说明" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="所属区域" v-bind="validateInfos.sysAreaCode"> |
|||
<a-input v-model:value="formData.sysAreaCode" placeholder="请输入所属区域" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../DtDeviceStatus.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => { } }, |
|||
formBpm: { type: Boolean, default: true } |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
deviceId: '', |
|||
deviceOwnerId: undefined, |
|||
status: undefined, |
|||
remark: '', |
|||
sysAreaCode: '', |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
// id: [{ required: true, message: '请输入设备唯一标识!' },], |
|||
deviceOwnerId: [{ required: true, message: '请输入设备所属站点ID!' },], |
|||
status: [{ required: true, message: '请选择设备初始状态!' },], |
|||
sysAreaCode: [{ required: true, message: '请输入所属区域!' },], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add(record) { |
|||
edit({ |
|||
deviceId: record.id |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
|
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
|
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" |
|||
:okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<DtDeviceStatusForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"> |
|||
</DtDeviceStatusForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import DtDeviceStatusForm from './DtDeviceStatusForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(1080); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add(record) { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,48 @@ |
|||
<template> |
|||
<div> |
|||
<!--引用表格--> |
|||
<BasicTable bordered size="middle" :loading="loading" rowKey="id" :canResize="false" :columns="dtDeviceSensorInfoColumns" :dataSource="dataSource" :pagination="false"> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{text}"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<template #fileSlot="{text}"> |
|||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {ref,watchEffect} from 'vue'; |
|||
import {BasicTable} from '/@/components/Table'; |
|||
import {dtDeviceSensorInfoColumns} from '../DtDeviceInfo.data'; |
|||
import {dtDeviceSensorInfoList} from '../DtDeviceInfo.api'; |
|||
|
|||
const props = defineProps({ |
|||
id: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
}) |
|||
|
|||
const loading = ref(false); |
|||
const dataSource = ref([]); |
|||
|
|||
watchEffect(() => { |
|||
props.id && loadData(props.id); |
|||
}); |
|||
|
|||
function loadData(id) { |
|||
dataSource.value = [] |
|||
loading.value = true |
|||
dtDeviceSensorInfoList({id}).then((res) => { |
|||
if (res.success) { |
|||
dataSource.value = res.result.records |
|||
} |
|||
}).finally(() => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
</script> |
|||
@ -0,0 +1,48 @@ |
|||
<template> |
|||
<div> |
|||
<!--引用表格--> |
|||
<BasicTable bordered size="middle" :loading="loading" rowKey="id" :canResize="false" :columns="dtDeviceStatusColumns" :dataSource="dataSource" :pagination="false"> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{text}"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<template #fileSlot="{text}"> |
|||
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import {ref,watchEffect} from 'vue'; |
|||
import {BasicTable} from '/@/components/Table'; |
|||
import {dtDeviceStatusColumns} from '../DtDeviceInfo.data'; |
|||
import {dtDeviceStatusList} from '../DtDeviceInfo.api'; |
|||
|
|||
const props = defineProps({ |
|||
id: { |
|||
type: String, |
|||
default: '', |
|||
}, |
|||
}) |
|||
|
|||
const loading = ref(false); |
|||
const dataSource = ref([]); |
|||
|
|||
watchEffect(() => { |
|||
props.id && loadData(props.id); |
|||
}); |
|||
|
|||
function loadData(id) { |
|||
dataSource.value = [] |
|||
loading.value = true |
|||
dtDeviceStatusList({id}).then((res) => { |
|||
if (res.success) { |
|||
dataSource.value = res.result.records |
|||
} |
|||
}).finally(() => { |
|||
loading.value = false |
|||
}) |
|||
} |
|||
</script> |
|||
@ -0,0 +1,72 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from "/@/hooks/web/useMessage"; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/msIotImportLicense/list', |
|||
save='/military/msIotImportLicense/add', |
|||
edit='/military/msIotImportLicense/edit', |
|||
deleteOne = '/military/msIotImportLicense/delete', |
|||
deleteBatch = '/military/msIotImportLicense/deleteBatch', |
|||
importExcel = '/military/msIotImportLicense/importExcel', |
|||
exportXls = '/military/msIotImportLicense/exportXls', |
|||
} |
|||
|
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params,handleSuccess) => { |
|||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
@ -0,0 +1,274 @@ |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { rules } from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '状态', |
|||
align: "center", |
|||
dataIndex: 'status_dictText', |
|||
sorter: true, |
|||
width: 120 |
|||
}, |
|||
{ |
|||
title: '设备Id', |
|||
align: "center", |
|||
dataIndex: 'deviceId', |
|||
width: 200 |
|||
}, |
|||
{ |
|||
title: '设备名称', |
|||
align: "center", |
|||
dataIndex: 'deviceName' |
|||
}, |
|||
{ |
|||
title: '设备类型', |
|||
align: "center", |
|||
dataIndex: 'deviceType_dictText', |
|||
sorter: true, |
|||
}, |
|||
{ |
|||
title: '入网时间', |
|||
align: "center", |
|||
dataIndex: 'importDate', |
|||
sorter: true, |
|||
}, |
|||
{ |
|||
title: '申请人', |
|||
align: 'center', |
|||
dataIndex: 'createBy', |
|||
}, |
|||
{ |
|||
title: '申请时间', |
|||
align: 'center', |
|||
dataIndex: 'createTime', |
|||
sorter: true, |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
{ |
|||
title: '许可证编号', |
|||
align: "center", |
|||
dataIndex: 'licenseNo', |
|||
}, |
|||
{ |
|||
title: '审批人', |
|||
align: "center", |
|||
dataIndex: 'auditManid' |
|||
}, |
|||
{ |
|||
title: '审批时间', |
|||
align: "center", |
|||
dataIndex: 'auditDate', |
|||
sorter: true, |
|||
}, |
|||
|
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "设备名称", |
|||
field: 'deviceName', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "入网时间", |
|||
field: "importDate", |
|||
component: 'RangePicker', |
|||
componentProps: { |
|||
showTime: true, |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "审批时间", |
|||
field: "auditDate", |
|||
component: 'RangePicker', |
|||
componentProps: { |
|||
showTime: true, |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '设备Id', |
|||
field: 'deviceId', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备Id!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '设备名称', |
|||
field: 'deviceName', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备名称!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '设备类型', |
|||
field: 'deviceType', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备类型!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '许可证编号', |
|||
field: 'licenseNo', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入许可证编号!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '入网时间', |
|||
field: 'importDate', |
|||
component: 'DatePicker', |
|||
componentProps: { |
|||
showTime: true, |
|||
valueFormat: 'YYYY-MM-DD HH:mm:ss' |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入入网时间!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '状态', |
|||
field: 'status', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '审批人', |
|||
field: 'auditManid', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入审批人!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '审批时间', |
|||
field: 'auditDate', |
|||
component: 'DatePicker', |
|||
componentProps: { |
|||
showTime: true, |
|||
valueFormat: 'YYYY-MM-DD HH:mm:ss' |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入审批时间!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
|
|||
|
|||
|
|||
//申请列表数据
|
|||
export const applyColumns: BasicColumn[] = [ |
|||
|
|||
{ |
|||
title: '设备Id', |
|||
align: "center", |
|||
dataIndex: 'deviceId' |
|||
}, |
|||
{ |
|||
title: '设备名称', |
|||
align: "center", |
|||
dataIndex: 'deviceName' |
|||
}, |
|||
{ |
|||
title: '设备类型', |
|||
align: "center", |
|||
dataIndex: 'deviceType_dictText', |
|||
sorter: true, |
|||
width: 120 |
|||
}, |
|||
{ |
|||
title: '许可证编号', |
|||
align: "center", |
|||
dataIndex: 'licenseNo' |
|||
}, |
|||
{ |
|||
title: '入网时间', |
|||
align: "center", |
|||
dataIndex: 'importDate', |
|||
sorter: true, |
|||
}, |
|||
{ |
|||
title: '状态', |
|||
align: "center", |
|||
dataIndex: 'status_dictText', |
|||
sorter: true, |
|||
width: 90 |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
// {
|
|||
// title: '申请人',
|
|||
// align: 'center',
|
|||
// dataIndex: 'createBy',
|
|||
// },
|
|||
{ |
|||
title: '申请时间', |
|||
align: 'center', |
|||
dataIndex: 'createTime', |
|||
sorter: true, |
|||
}, |
|||
|
|||
{ |
|||
title: '更新时间', |
|||
align: 'center', |
|||
dataIndex: 'updateTime', |
|||
sorter: true, |
|||
}, |
|||
// {
|
|||
// title: '审批人',
|
|||
// align: "center",
|
|||
// dataIndex: 'auditManid'
|
|||
// },
|
|||
// {
|
|||
// title: '审批时间',
|
|||
// align: "center",
|
|||
// dataIndex: 'auditDate',
|
|||
// sorter: true,
|
|||
// },
|
|||
|
|||
]; |
|||
@ -0,0 +1,277 @@ |
|||
<!-- |
|||
准入许可证管理 |
|||
|
|||
功能划分 |
|||
设备管理 -> 准入许可证管理 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="设备名称" name="deviceName"> |
|||
<JInput placeholder="请输入设备名称" v-model:value="queryParam.deviceName"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="入网时间" name="importDate_begin"> |
|||
<a-date-picker |
|||
style="margin-bottom: 24px" |
|||
showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
placeholder="请选择开始时间" |
|||
v-model:value="queryParam.importDate_begin" |
|||
/> |
|||
<span class="query-group-split-cust">~</span> |
|||
<a-form-item name="importDate_end"> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.importDate_end" /> |
|||
</a-form-item> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <template v-if="toggleSearchStatus"> --> |
|||
<!-- <a-col :lg="6"> |
|||
<a-form-item label="审批时间"> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" v-model:value="queryParam.auditDate_begin" class="query-group-cust" /> |
|||
<span class="query-group-split-cust">~</span> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.auditDate_end" class="query-group-cust" /> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<!-- </template> --> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left; overflow: hidden" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<ApplyModal ref="registerModal" @success="handleSuccess"></ApplyModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="military-msIotImportLicense" setup> |
|||
import { ref, reactive } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { applyColumns } from './MsIotImportLicense.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './MsIotImportLicense.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import ApplyModal from './components/ApplyModal.vue'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
|
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: 'ms_iot_import_license', |
|||
api: list, |
|||
columns: applyColumns, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
showIndexColumn: true, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: 'ms_iot_import_license', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.supplement = false; |
|||
registerModal.value.add(); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.supplement = true; |
|||
console.log(registerModal.value); |
|||
|
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '补充', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
// { |
|||
// label: '详情', |
|||
// onClick: handleDetail.bind(null, record), |
|||
// }, |
|||
// { |
|||
// label: '删除', |
|||
// popConfirm: { |
|||
// title: '是否确认删除', |
|||
// confirm: handleDelete.bind(null, record), |
|||
// } |
|||
// } |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
:deep(.ant-form-item-control-input-content) { |
|||
display: flex; |
|||
} |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,278 @@ |
|||
<!-- |
|||
设备接入申请 |
|||
|
|||
功能划分 |
|||
设备管理 -> 设备接入申请 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="设备名称" name="deviceName"> |
|||
<JInput placeholder="请输入设备名称" v-model:value="queryParam.deviceName"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="入网时间" name="importDate_begin"> |
|||
<a-date-picker |
|||
showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
placeholder="请选择开始时间" |
|||
v-model:value="queryParam.importDate_begin" |
|||
style="margin-bottom: 24px" |
|||
/> |
|||
<span class="query-group-split-cust">~</span> |
|||
<a-form-item name="importDate_end"> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.importDate_end" /> |
|||
</a-form-item> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <template v-if="toggleSearchStatus"> --> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="审批时间" name="auditDate_begin"> |
|||
<a-date-picker |
|||
showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" |
|||
placeholder="请选择开始时间" |
|||
v-model:value="queryParam.auditDate_begin" |
|||
style="margin-bottom: 24px" |
|||
/> |
|||
<span class="query-group-split-cust">~</span> |
|||
<a-form-item name="auditDate_end"> |
|||
<a-date-picker showTime value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" v-model:value="queryParam.auditDate_end" /> |
|||
</a-form-item> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- </template> --> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<MsIotImportLicenseModal ref="registerModal" @success="handleSuccess"></MsIotImportLicenseModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="military-msIotImportLicense" setup> |
|||
import { ref, reactive } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './MsIotImportLicense.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './MsIotImportLicense.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import MsIotImportLicenseModal from './components/MsIotImportLicenseModal.vue'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: 'ms_iot_import_license', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
showIndexColumn: true, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: 'ms_iot_import_license', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '审批', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
:deep(.ant-form-item-control-input-content) { |
|||
display: flex; |
|||
} |
|||
|
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,232 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="24"> |
|||
<a-form-item label="设备类型" v-bind="validateInfos.deviceType"> |
|||
<j-dict-select-tag v-model:value="formData.deviceType" dictCode="ms_device_type" placeholder="请选择设备类型" |
|||
:disabled="disabled || supplementDisable" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" |
|||
:string-to-number="true" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="设备名称" v-bind="validateInfos.deviceName"> |
|||
<!-- <a-input v-model:value="formData.deviceName" placeholder="请输入设备名称" :disabled="disabled"></a-input> --> |
|||
<a-select v-model:value="formData.deviceName" show-search placeholder="请输入设备名称" :options="options" |
|||
@focus="handleFocus" @select="handleselect" :disabled="disabled || supplementDisable"> |
|||
</a-select> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="24"> |
|||
<a-form-item label="设备Id" v-bind="validateInfos.deviceId"> |
|||
<a-input v-model:value="formData.deviceId" placeholder="请输入设备Id" |
|||
:disabled="true"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
|
|||
|
|||
<a-col :span="24"> |
|||
<a-form-item label="入网时间" v-bind="validateInfos.importDate"> |
|||
<a-date-picker placeholder="请选择入网时间" v-model:value="formData.importDate" showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled || supplementDisable" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <a-col :span="12"> |
|||
<a-form-item label="状态" v-bind="validateInfos.status"> |
|||
<a-input-number v-model:value="formData.status" placeholder="请输入状态" style="width: 100%" :disabled="disabled"/> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<!-- <a-col :span="12"> |
|||
<a-form-item label="许可证编号" v-bind="validateInfos.licenseNo"> |
|||
<a-input v-model:value="formData.licenseNo" placeholder="请输入许可证编号" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<!-- <a-col :span="12"> |
|||
<a-form-item label="审批人" v-bind="validateInfos.auditManid"> |
|||
<a-input v-model:value="formData.auditManid" placeholder="请输入审批人" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<!-- <a-col :span="12"> |
|||
<a-form-item label="审批时间" v-bind="validateInfos.auditDate"> |
|||
<a-date-picker placeholder="请选择审批时间" v-model:value="formData.auditDate" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled"/> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<a-col :span="24"> |
|||
<a-form-item label="备注" v-bind="validateInfos.remark"> |
|||
<a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; |
|||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../MsIotImportLicense.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => { } }, |
|||
formBpm: { type: Boolean, default: true }, |
|||
//补充信息 部分字段禁用 |
|||
supplement: { |
|||
type: Boolean, |
|||
default: false, |
|||
required: false, |
|||
}, |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
deviceId: '', |
|||
deviceName: '', |
|||
deviceType: undefined, |
|||
licenseNo: '', |
|||
importDate: '', |
|||
status: undefined, |
|||
auditManid: '', |
|||
auditDate: '', |
|||
remark: '', |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
const options: any = ref([]); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
deviceId: [{ required: true, message: '请输入设备Id!' },], |
|||
deviceName: [{ required: true, message: '请输入设备名称!' },], |
|||
deviceType: [{ required: true, message: '请输入设备类型!' },], |
|||
// licenseNo: [{ required: true, message: '请输入许可证编号!'},], |
|||
importDate: [{ required: true, message: '请输入入网时间!' },], |
|||
// auditManid: [{ required: true, message: '请输入审批人!'},], |
|||
// auditDate: [{ required: true, message: '请输入审批时间!'},], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
//补充信息 部分字段禁用 |
|||
const supplementDisable = computed(() => { |
|||
return props.supplement; |
|||
}); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
edit({ |
|||
importDate: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'), //自动注入入网时间 |
|||
status: 0 //自动注入待审批 |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
|
|||
function handleFocus() { |
|||
defHttp.get({ |
|||
url: "/military/msDeviceInfo/list", |
|||
params: { deviceType: formData.deviceType } |
|||
}, { isTransformResponse: false }) |
|||
// getAction("/military/msDeviceInfo/list",{deviceType:this.model.deviceType}) |
|||
.then(res => { |
|||
if (res.success) { |
|||
options.value = [] //清空 |
|||
let records = res.result.records; |
|||
for (let i of records) { |
|||
let item = { value: i.deviceName, label: i.deviceName, id: i.id, type: i.deviceType }; |
|||
options.value.push(item) |
|||
} |
|||
} else { |
|||
console.error(res.message) |
|||
} |
|||
}) |
|||
|
|||
} |
|||
function handleselect(e, option) { |
|||
console.log(e, option); |
|||
formData.deviceId = option.id |
|||
formData.deviceType = option.type |
|||
|
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,211 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备Id" v-bind="validateInfos.deviceId"> |
|||
<a-input v-model:value="formData.deviceId" placeholder="请输入设备Id" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备名称" v-bind="validateInfos.deviceName"> |
|||
<a-input v-model:value="formData.deviceName" placeholder="请输入设备名称" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备类型" v-bind="validateInfos.deviceType"> |
|||
<j-dict-select-tag v-model:value="formData.deviceType" dictCode="ms_device_type" placeholder="请选择设备类型" |
|||
:disabled="disabled" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode" |
|||
:string-to-number="true" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="入网时间" v-bind="validateInfos.importDate"> |
|||
<a-date-picker placeholder="请选择入网时间" v-model:value="formData.importDate" showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="状态" v-bind="validateInfos.status"> |
|||
<j-dict-select-tag type="list" v-model:value="formData.status" dictCode="ms_approval_status" |
|||
:string-to-number="true" placeholder="请选择状态" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="许可证编号" v-bind="validateInfos.licenseNo"> |
|||
<a-input v-model:value="formData.licenseNo" placeholder="请输入许可证编号" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="审批人" v-bind="validateInfos.auditManid"> |
|||
<a-input v-model:value="formData.auditManid" placeholder="请输入审批人" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="审批时间" v-bind="validateInfos.auditDate"> |
|||
<a-date-picker placeholder="请选择审批时间" v-model:value="formData.auditDate" showTime |
|||
value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" :disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="备注" v-bind="validateInfos.remark"> |
|||
<a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted, watch } from 'vue'; |
|||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../MsIotImportLicense.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
import dayjs from 'dayjs'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => { } }, |
|||
formBpm: { type: Boolean, default: true }, |
|||
//补充信息 部分字段禁用 |
|||
supplement: { |
|||
type: Boolean, |
|||
default: false, |
|||
required: false, |
|||
}, |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
deviceId: '', |
|||
deviceName: '', |
|||
deviceType: undefined, |
|||
licenseNo: '', |
|||
importDate: '', |
|||
status: undefined, |
|||
auditManid: '', |
|||
auditDate: '', |
|||
remark: '', |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
deviceId: [{ required: true, message: '请输入设备Id!' },], |
|||
deviceName: [{ required: true, message: '请输入设备名称!' },], |
|||
deviceType: [{ required: true, message: '请选择设备类型!' },], |
|||
licenseNo: [{ required: true, message: '请输入许可证编号!' },], |
|||
importDate: [{ required: true, message: '请输入入网时间!' },], |
|||
status: [{ required: true, message: '请选择状态！' }], |
|||
auditManid: [{ required: true, message: '请输入审批人!' },], |
|||
auditDate: [{ required: true, message: '请输入审批时间!' },], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
//补充信息 部分字段禁用 |
|||
const supplementDisable = computed(() => { |
|||
return props.supplement; |
|||
}); |
|||
|
|||
watch(() => formData.status, (val) => { |
|||
if (val == 2) { |
|||
formData.licenseNo = null |
|||
} |
|||
else if (val == 1) { |
|||
formData.licenseNo = new Date().getTime() + Math.floor(Math.random() * 100) //自动注入许可证编号 |
|||
} |
|||
}) |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
edit({}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
// formData.licenseNo = new Date().getTime() + Math.floor(Math.random() * 100) //自动注入许可证编号 |
|||
formData.auditDate = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss') //自动注入审批时间 |
|||
// formData.status = 1 //自动注入审批状态 |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
|
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<MsIotImportLicenseForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></MsIotImportLicenseForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import MsIotImportLicenseForm from './MsIotImportLicenseForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(1080); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from "/@/hooks/web/useMessage"; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/dtDeveiceProtocolType/list', |
|||
save='/military/dtDeveiceProtocolType/add', |
|||
edit='/military/dtDeveiceProtocolType/edit', |
|||
deleteOne = '/military/dtDeveiceProtocolType/delete', |
|||
deleteBatch = '/military/dtDeveiceProtocolType/deleteBatch', |
|||
importExcel = '/military/dtDeveiceProtocolType/importExcel', |
|||
exportXls = '/military/dtDeveiceProtocolType/exportXls', |
|||
} |
|||
|
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params,handleSuccess) => { |
|||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { rules } from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '协议类型编号', |
|||
align: "center", |
|||
dataIndex: 'protocolType' |
|||
}, |
|||
{ |
|||
title: '协议名称', |
|||
align: "center", |
|||
dataIndex: 'protocolName' |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
align: "center", |
|||
dataIndex: 'remark' |
|||
}, |
|||
// {
|
|||
// title: '所属区域',
|
|||
// align: "center",
|
|||
// dataIndex: 'sysAreaCode'
|
|||
// },
|
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "协议类型编号", |
|||
field: 'protocolType', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "协议名称", |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "所属区域", |
|||
field: 'sysAreaCode', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '协议类型编号', |
|||
field: 'protocolType', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入协议类型编号!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '协议名称', |
|||
field: 'protocolName', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入协议名称!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '备注', |
|||
field: 'remark', |
|||
component: 'Input', |
|||
}, |
|||
{ |
|||
label: '所属区域', |
|||
field: 'sysAreaCode', |
|||
component: 'Input', |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,252 @@ |
|||
<!-- |
|||
设备通讯协议 |
|||
|
|||
目录位置：设备管理 -> 设备通讯协议 |
|||
功能概述：管理设备协议，编号名称 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="协议类型编号" name="protocolType"> |
|||
<a-input placeholder="请输入协议类型编号" v-model:value="queryParam.protocolType"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="协议名称" name="protocolName"> |
|||
<JInput placeholder="请输入协议名称" v-model:value="queryParam.protocolName"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <a-col :lg="6"> |
|||
<a-form-item label="所属区域" name="sysAreaCode"> |
|||
<JInput placeholder="请输入所属区域" v-model:value="queryParam.sysAreaCode"></JInput> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<DtDeveiceProtocolTypeModal ref="registerModal" @success="handleSuccess"></DtDeveiceProtocolTypeModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="military-dtDeveiceProtocolType" setup> |
|||
import { ref, reactive } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './DtDeveiceProtocolType.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DtDeveiceProtocolType.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import DtDeveiceProtocolTypeModal from './components/DtDeveiceProtocolTypeModal.vue'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
|
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '设备通讯协议表', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '设备通讯协议表', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
margin-left: 20px; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="协议类型编号" v-bind="validateInfos.protocolType"> |
|||
<a-input-number v-model:value="formData.protocolType" placeholder="请输入协议类型编号" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="协议名称" v-bind="validateInfos.protocolName"> |
|||
<a-input v-model:value="formData.protocolName" placeholder="请输入协议名称" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="备注" v-bind="validateInfos.remark"> |
|||
<a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <a-col :span="12"> |
|||
<a-form-item label="所属区域" v-bind="validateInfos.sysAreaCode"> |
|||
<a-input v-model:value="formData.sysAreaCode" placeholder="请输入所属区域" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../DtDeveiceProtocolType.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => { } }, |
|||
formBpm: { type: Boolean, default: true } |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
protocolType: undefined, |
|||
protocolName: '', |
|||
remark: '', |
|||
sysAreaCode: '', |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
protocolType: [{ required: true, message: '请输入协议类型编号!' },], |
|||
protocolName: [{ required: true, message: '请输入协议名称!' },], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
edit({}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
|
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<DtDeveiceProtocolTypeForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></DtDeveiceProtocolTypeForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import DtDeveiceProtocolTypeForm from './DtDeveiceProtocolTypeForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(1080); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,72 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from "/@/hooks/web/useMessage"; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/dtDeveiceType/list', |
|||
save='/military/dtDeveiceType/add', |
|||
edit='/military/dtDeveiceType/edit', |
|||
deleteOne = '/military/dtDeveiceType/delete', |
|||
deleteBatch = '/military/dtDeveiceType/deleteBatch', |
|||
importExcel = '/military/dtDeveiceType/importExcel', |
|||
exportXls = '/military/dtDeveiceType/exportXls', |
|||
} |
|||
|
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params,handleSuccess) => { |
|||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
@ -0,0 +1,205 @@ |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { rules } from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '类型编号', |
|||
align: "center", |
|||
dataIndex: 'typeNo' |
|||
}, |
|||
{ |
|||
title: '类型名称', |
|||
align: "center", |
|||
dataIndex: 'typeName' |
|||
}, |
|||
{ |
|||
title: '是否有传感器', |
|||
align: "center", |
|||
dataIndex: 'havesensor', |
|||
width: 120, |
|||
customRender: ({ text }) => { |
|||
// console.log("text222", text);
|
|||
let show = '' |
|||
switch (text) { |
|||
case 1: |
|||
show = "是" |
|||
break; |
|||
case 0: |
|||
show = "否" |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
return show |
|||
}, |
|||
}, |
|||
{ |
|||
title: '地图显示图片模型', |
|||
align: "center", |
|||
dataIndex: 'mapIco', |
|||
slots: { customRender: 'fileSlot' }, |
|||
}, |
|||
{ |
|||
title: '是否3D', |
|||
align: "center", |
|||
dataIndex: 'is3d', |
|||
customRender: ({ text }) => { |
|||
// console.log("text", text);
|
|||
let show = '' |
|||
switch (text) { |
|||
case 1: |
|||
show = "是" |
|||
break; |
|||
case 0: |
|||
show = "否" |
|||
break; |
|||
default: |
|||
break; |
|||
} |
|||
return show |
|||
}, |
|||
}, |
|||
{ |
|||
title: '默认宽度', |
|||
align: "center", |
|||
dataIndex: 'width' |
|||
}, |
|||
{ |
|||
title: '默认长度', |
|||
align: "center", |
|||
dataIndex: 'length' |
|||
}, |
|||
{ |
|||
title: '默认高度', |
|||
align: "center", |
|||
dataIndex: 'height' |
|||
}, |
|||
// {
|
|||
// title: '所属区域',
|
|||
// align: "center",
|
|||
// dataIndex: 'sysAreaCode'
|
|||
// },
|
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "类型编号", |
|||
field: 'typeNo', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "类型名称", |
|||
field: 'typeName', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "是否有传感器", |
|||
field: 'havesensor', |
|||
component: 'JSwitch', |
|||
componentProps: { |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "地图显示图片模型", |
|||
field: 'mapIco', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "是否3D", |
|||
field: 'is3d', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
// {
|
|||
// label: "所属区域",
|
|||
// field: 'sysAreaCode',
|
|||
// component: 'Input',
|
|||
// colProps: { span: 6 },
|
|||
// },
|
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '类型编号', |
|||
field: 'typeNo', |
|||
component: 'InputNumber', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入类型编号!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '类型名称', |
|||
field: 'typeName', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入类型名称!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '是否有传感器', |
|||
field: 'havesensor', |
|||
component: 'JSwitch', |
|||
componentProps: { |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入是否有传感器!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '地图显示图片模型', |
|||
field: 'mapIco', |
|||
component: 'JUpload', |
|||
componentProps: { |
|||
}, |
|||
}, |
|||
{ |
|||
label: '是否3D', |
|||
field: 'is3d', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请选择是否3D!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '默认宽度', |
|||
field: 'width', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '默认长度', |
|||
field: 'length', |
|||
component: 'InputNumber', |
|||
}, |
|||
{ |
|||
label: '默认高度', |
|||
field: 'height', |
|||
component: 'InputNumber', |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,290 @@ |
|||
<!-- |
|||
设备类型 |
|||
|
|||
目录位置：设备管理 -> 设备类型 |
|||
功能概述：设置设备有什么分类，雷达、光伏等，设置模型图片，是否有传感器 |
|||
--> |
|||
<template> |
|||
<div> |
|||
<!--查询区域--> |
|||
<div class="jeecg-basic-table-form-container"> |
|||
<a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol"> |
|||
<a-row :gutter="24"> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="类型编号" name="typeNo"> |
|||
<a-input placeholder="请输入类型编号" v-model:value="queryParam.typeNo"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="类型名称" name="typeName"> |
|||
<JInput placeholder="请输入类型名称" v-model:value="queryParam.typeName"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="是否有传感器" name="havesensor"> |
|||
<j-switch placeholder="请选择是否有传感器" v-model:value="queryParam.havesensor" query :options="['1', '0']" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <a-col :lg="6"> |
|||
<a-form-item label="图片模型" name="mapIco"> |
|||
<JInput placeholder="请输入地图显示图片模型" v-model:value="queryParam.mapIco"></JInput> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<a-col :lg="6"> |
|||
<a-form-item label="是否3D" name="is3d"> |
|||
<j-switch placeholder="请选择是否3D" v-model:value="queryParam.is3d" query :options="['1', '0']" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<!-- <a-col :lg="6"> |
|||
<a-form-item label="所属区域" name="sysAreaCode"> |
|||
<JInput placeholder="请输入所属区域" v-model:value="queryParam.sysAreaCode"></JInput> |
|||
</a-form-item> |
|||
</a-col> --> |
|||
<!-- <template v-if="toggleSearchStatus"> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="是否有传感器" name="havesensor"> |
|||
<j-switch placeholder="请选择是否有传感器" v-model:value="queryParam.havesensor" query /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="地图显示图片模型" name="mapIco"> |
|||
<JInput placeholder="请输入地图显示图片模型" v-model:value="queryParam.mapIco"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="是否3D" name="is3d"> |
|||
<JInput placeholder="请输入是否3D" v-model:value="queryParam.is3d"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :lg="8"> |
|||
<a-form-item label="所属区域" name="sysAreaCode"> |
|||
<JInput placeholder="请输入所属区域" v-model:value="queryParam.sysAreaCode"></JInput> |
|||
</a-form-item> |
|||
</a-col> |
|||
</template> --> |
|||
<a-col :xl="6" :lg="7" :md="8" :sm="24"> |
|||
<span style="float: left" class="table-page-search-submitButtons"> |
|||
<a-col :lg="6"> |
|||
<a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button> |
|||
<a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button> |
|||
<!-- <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px"> |
|||
{{ toggleSearchStatus ? '收起' : '展开' }} |
|||
<Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" /> |
|||
</a> --> |
|||
</a-col> |
|||
</span> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</div> |
|||
<!--引用表格--> |
|||
<BasicTable @register="registerTable" :rowSelection="rowSelection"> |
|||
<!--插槽:table标题--> |
|||
<template #tableTitle> |
|||
<a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button> |
|||
<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button> |
|||
<j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button> |
|||
<a-dropdown v-if="selectedRowKeys.length > 0"> |
|||
<template #overlay> |
|||
<a-menu> |
|||
<a-menu-item key="1" @click="batchHandleDelete"> |
|||
<Icon icon="ant-design:delete-outlined"></Icon> |
|||
删除 |
|||
</a-menu-item> |
|||
</a-menu> |
|||
</template> |
|||
<a-button |
|||
>批量操作 |
|||
<Icon icon="mdi:chevron-down"></Icon> |
|||
</a-button> |
|||
</a-dropdown> |
|||
</template> |
|||
<!--操作栏--> |
|||
<template #action="{ record }"> |
|||
<TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> |
|||
</template> |
|||
<!--字段回显插槽--> |
|||
<template #htmlSlot="{ text }"> |
|||
<div v-html="text"></div> |
|||
</template> |
|||
<!--省市区字段回显插槽--> |
|||
<template #pcaSlot="{ text }"> |
|||
{{ getAreaTextByCode(text) }} |
|||
</template> |
|||
<template #fileSlot="{ text }"> |
|||
<span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span> |
|||
<a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">下载</a-button> |
|||
</template> |
|||
</BasicTable> |
|||
<!-- 表单区域 --> |
|||
<DtDeveiceTypeModal ref="registerModal" @success="handleSuccess"></DtDeveiceTypeModal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts" name="military-dtDeveiceType" setup> |
|||
import { ref, reactive } from 'vue'; |
|||
import { BasicTable, useTable, TableAction } from '/@/components/Table'; |
|||
import { useListPage } from '/@/hooks/system/useListPage'; |
|||
import { columns } from './DtDeveiceType.data'; |
|||
import { list, deleteOne, batchDelete, getImportUrl, getExportUrl } from './DtDeveiceType.api'; |
|||
import { downloadFile } from '/@/utils/common/renderUtils'; |
|||
import DtDeveiceTypeModal from './components/DtDeveiceTypeModal.vue'; |
|||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue'; |
|||
import { BasicForm, ApiSelect, JAreaLinkage, JPopup, JAreaSelect, FormActionType, JCheckbox, JInput, JEllipsis } from '/@/components/Form'; |
|||
const formRef = ref(); |
|||
const queryParam = reactive<any>({}); |
|||
// const toggleSearchStatus = ref<boolean>(false); |
|||
const registerModal = ref(); |
|||
//注册table数据 |
|||
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({ |
|||
tableProps: { |
|||
title: '设备类型表', |
|||
api: list, |
|||
columns, |
|||
canResize: false, |
|||
useSearchForm: false, |
|||
actionColumn: { |
|||
width: 120, |
|||
fixed: 'right', |
|||
}, |
|||
beforeFetch: (params) => { |
|||
return Object.assign(params, queryParam); |
|||
}, |
|||
}, |
|||
exportConfig: { |
|||
name: '设备类型表', |
|||
url: getExportUrl, |
|||
params: queryParam, |
|||
}, |
|||
importConfig: { |
|||
url: getImportUrl, |
|||
success: handleSuccess, |
|||
}, |
|||
}); |
|||
const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = |
|||
tableContext; |
|||
const labelCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 7 }, |
|||
}); |
|||
const wrapperCol = reactive({ |
|||
xs: { span: 24 }, |
|||
sm: { span: 16 }, |
|||
}); |
|||
|
|||
/** |
|||
* 新增事件 |
|||
*/ |
|||
function handleAdd() { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.add(); |
|||
} |
|||
|
|||
/** |
|||
* 编辑事件 |
|||
*/ |
|||
function handleEdit(record: Recordable) { |
|||
registerModal.value.disableSubmit = false; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 详情 |
|||
*/ |
|||
function handleDetail(record: Recordable) { |
|||
registerModal.value.disableSubmit = true; |
|||
registerModal.value.edit(record); |
|||
} |
|||
|
|||
/** |
|||
* 删除事件 |
|||
*/ |
|||
async function handleDelete(record) { |
|||
await deleteOne({ id: record.id }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除事件 |
|||
*/ |
|||
async function batchHandleDelete() { |
|||
await batchDelete({ ids: selectedRowKeys.value }, handleSuccess); |
|||
} |
|||
|
|||
/** |
|||
* 成功回调 |
|||
*/ |
|||
function handleSuccess() { |
|||
(selectedRowKeys.value = []) && reload(); |
|||
} |
|||
|
|||
/** |
|||
* 操作栏 |
|||
*/ |
|||
function getTableAction(record) { |
|||
return [ |
|||
{ |
|||
label: '编辑', |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 下拉操作栏 |
|||
*/ |
|||
function getDropDownAction(record) { |
|||
return [ |
|||
{ |
|||
label: '详情', |
|||
onClick: handleDetail.bind(null, record), |
|||
}, |
|||
{ |
|||
label: '删除', |
|||
popConfirm: { |
|||
title: '是否确认删除', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]; |
|||
} |
|||
|
|||
/** |
|||
* 查询 |
|||
*/ |
|||
function searchQuery() { |
|||
reload(); |
|||
} |
|||
|
|||
/** |
|||
* 重置 |
|||
*/ |
|||
function searchReset() { |
|||
formRef.value.resetFields(); |
|||
selectedRowKeys.value = []; |
|||
//刷新数据 |
|||
reload(); |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.jeecg-basic-table-form-container { |
|||
.table-page-search-submitButtons { |
|||
display: block; |
|||
margin-bottom: 24px; |
|||
white-space: nowrap; |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.query-group-cust { |
|||
width: calc(50% - 15px); |
|||
min-width: 100px !important; |
|||
} |
|||
|
|||
.query-group-split-cust { |
|||
width: 30px; |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,183 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="类型编号" v-bind="validateInfos.typeNo"> |
|||
<a-input-number v-model:value="formData.typeNo" placeholder="请输入类型编号" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="类型名称" v-bind="validateInfos.typeName"> |
|||
<a-input v-model:value="formData.typeName" placeholder="请输入类型名称" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="是否有传感器" v-bind="validateInfos.havesensor"> |
|||
<j-switch v-model:value="formData.havesensor" :disabled="disabled" :options="['1', '0']"></j-switch> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="图片模型" v-bind="validateInfos.mapIco"> |
|||
<j-upload v-model:value="formData.mapIco" :disabled="disabled"></j-upload> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="是否3D" v-bind="validateInfos.is3d"> |
|||
<j-switch v-model:value="formData.is3d" :disabled="disabled" :options="['1', '0']"></j-switch> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="默认宽度" v-bind="validateInfos.width"> |
|||
<a-input-number v-model:value="formData.width" placeholder="请输入默认宽度" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="默认长度" v-bind="validateInfos.length"> |
|||
<a-input-number v-model:value="formData.length" placeholder="请输入默认长度" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="默认高度" v-bind="validateInfos.height"> |
|||
<a-input-number v-model:value="formData.height" placeholder="请输入默认高度" style="width: 100%" |
|||
:disabled="disabled" /> |
|||
</a-form-item> |
|||
</a-col> |
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue'; |
|||
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../DtDeveiceType.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: () => { } }, |
|||
formBpm: { type: Boolean, default: true } |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
typeNo: undefined, |
|||
typeName: '', |
|||
havesensor: undefined, |
|||
mapIco: '', |
|||
is3d: undefined, |
|||
width: 0, |
|||
length: 0, |
|||
height: 0, |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
typeNo: [{ required: true, message: '请输入类型编号!' },], |
|||
typeName: [{ required: true, message: '请输入类型名称!' },], |
|||
havesensor: [{ required: true, message: '请输入是否有传感器!' },], |
|||
is3d: [{ required: true, message: '请输入是否3D!' },], |
|||
width: [{ required: true, message: '请输入默认宽度!' },], |
|||
length: [{ required: true, message: '请输入默认长度!' },], |
|||
height: [{ required: true, message: '请输入默认高度!' },], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(() => { |
|||
if (props.formBpm === true) { |
|||
if (props.formData.disabled === false) { |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
edit({}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
|
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<DtDeveiceTypeForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></DtDeveiceTypeForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import DtDeveiceTypeForm from './DtDeveiceTypeForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(1080); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,83 @@ |
|||
/* |
|||
* @Author: Fuyuu 1805498209@qq.com |
|||
* @Date: 2023-11-24 10:15:24 |
|||
* @LastEditors: Fuyuu 1805498209@qq.com |
|||
* @LastEditTime: 2023-11-27 09:28:52 |
|||
* @FilePath: \dt-admin-pc\src\views\military\modules\equipment\video\MsVideoRecorder.api.ts |
|||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|||
*/ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/videoRecorder/list', |
|||
save = '/military/videoRecorder/add', |
|||
edit = '/military/videoRecorder/edit', |
|||
deleteOne = '/military/videoRecorder/delete', |
|||
deleteBatch = '/military/videoRecorder/deleteBatch', |
|||
importExcel = '/military/videoRecorder/importExcel', |
|||
exportXls = '/military/videoRecorder/exportXls', |
|||
} |
|||
|
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params, handleSuccess) => { |
|||
return defHttp.delete({ url: Api.deleteOne, params }, { joinParamsToUrl: true }).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({ url: Api.deleteBatch, data: params }, { joinParamsToUrl: true }).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
if (url == Api.edit) { |
|||
return defHttp.put({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
}; |
|||
@ -0,0 +1,172 @@ |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { rules } from '/@/utils/helper/validator'; |
|||
import { render } from '/@/utils/common/renderUtils'; |
|||
//列表数据
|
|||
export const columns: BasicColumn[] = [ |
|||
{ |
|||
title: '设备编号', |
|||
align: "center", |
|||
dataIndex: 'deviceNum', |
|||
width:120 |
|||
}, |
|||
{ |
|||
title: '设备名称', |
|||
align: "center", |
|||
dataIndex: 'deviceName' |
|||
}, |
|||
{ |
|||
title: '设备类型', |
|||
align: "center", |
|||
dataIndex: 'deviceType_dictText', |
|||
width:150 |
|||
}, |
|||
{ |
|||
title: '设备地址', |
|||
align: "center", |
|||
dataIndex: 'deviceAddress' |
|||
}, |
|||
{ |
|||
title: '用户姓名', |
|||
align: "center", |
|||
dataIndex: 'userName', |
|||
width:150 |
|||
}, |
|||
{ |
|||
title: '用户密码', |
|||
align: "center", |
|||
dataIndex: 'userPassword' |
|||
}, |
|||
{ |
|||
title: '是否启用', |
|||
align: "center", |
|||
dataIndex: 'isEnable', |
|||
customRender: ({ text }) => { |
|||
console.log(text); |
|||
return text == 0 ? "否" : "是" |
|||
// return render.renderSwitch(text, [{text:'是',value:1},{text: '否',value:0}]);
|
|||
}, |
|||
width:100 |
|||
}, |
|||
{ |
|||
title: '安装位置', |
|||
align: "center", |
|||
dataIndex: 'fixedPosition' |
|||
}, |
|||
|
|||
]; |
|||
|
|||
//查询数据
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
label: "设备名称", |
|||
field: 'deviceName', |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
{ |
|||
label: "设备类型", |
|||
field: 'deviceType', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "device_type" |
|||
}, |
|||
colProps: { span: 6 }, |
|||
}, |
|||
]; |
|||
|
|||
//表单数据
|
|||
export const formSchema: FormSchema[] = [ |
|||
{ |
|||
label: '设备名称', |
|||
field: 'deviceName', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备名称!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '设备类型', |
|||
field: 'deviceType', |
|||
component: 'JDictSelectTag', |
|||
componentProps: { |
|||
dictCode: "device_type" |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备类型!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '设备地址', |
|||
field: 'deviceAddress', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备地址!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '用户姓名', |
|||
field: 'userName', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入用户姓名!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '用户密码', |
|||
field: 'userPassword', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入用户密码!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '是否启用', |
|||
field: 'isEnable', |
|||
component: 'JSwitch', |
|||
componentProps: { |
|||
}, |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入是否启用!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '安装位置', |
|||
field: 'fixedPosition', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入安装位置!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
{ |
|||
label: '设备编号', |
|||
field: 'deviceNum', |
|||
component: 'Input', |
|||
dynamicRules: ({ model, schema }) => { |
|||
return [ |
|||
{ required: true, message: '请输入设备编号!' }, |
|||
]; |
|||
}, |
|||
}, |
|||
// TODO 主键隐藏字段，目前写死为ID
|
|||
{ |
|||
label: '', |
|||
field: 'id', |
|||
component: 'Input', |
|||
show: false, |
|||
}, |
|||
]; |
|||
@ -0,0 +1,180 @@ |
|||
<template> |
|||
<a-spin :spinning="confirmLoading"> |
|||
<a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol"> |
|||
<a-row> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备编号" v-bind="validateInfos.deviceNum"> |
|||
<a-input v-model:value="formData.deviceNum" placeholder="请输入设备编号" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备名称" v-bind="validateInfos.deviceName"> |
|||
<a-input v-model:value="formData.deviceName" placeholder="请输入设备名称" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备类型" v-bind="validateInfos.deviceType"> |
|||
<j-dict-select-tag v-model:value="formData.deviceType" dictCode="device_type" :string-to-number="true" placeholder="请选择设备类型" :disabled="disabled"/> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="设备地址" v-bind="validateInfos.deviceAddress"> |
|||
<a-input v-model:value="formData.deviceAddress" placeholder="请输入设备地址" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="用户姓名" v-bind="validateInfos.userName"> |
|||
<a-input v-model:value="formData.userName" placeholder="请输入用户姓名" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="用户密码" v-bind="validateInfos.userPassword"> |
|||
<a-input v-model:value="formData.userPassword" placeholder="请输入用户密码" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="是否启用" v-bind="validateInfos.isEnable"> |
|||
<j-switch v-model:value="formData.isEnable" :options="['1','0']" :disabled="disabled"></j-switch> |
|||
</a-form-item> |
|||
</a-col> |
|||
<a-col :span="12"> |
|||
<a-form-item label="安装位置" v-bind="validateInfos.fixedPosition"> |
|||
<a-input v-model:value="formData.fixedPosition" placeholder="请输入安装位置" :disabled="disabled"></a-input> |
|||
</a-form-item> |
|||
</a-col> |
|||
|
|||
</a-row> |
|||
</a-form> |
|||
</a-spin> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, reactive, nextTick, computed, onMounted } from 'vue'; |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from '/@/hooks/web/useMessage'; |
|||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue'; |
|||
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue'; |
|||
import { getValueType } from '/@/utils'; |
|||
import { saveOrUpdate } from '../MsVideoRecorder.api'; |
|||
import { Form } from 'ant-design-vue'; |
|||
|
|||
const props = defineProps({ |
|||
formDisabled: { type: Boolean, default: false }, |
|||
formData: { type: Object, default: ()=>{} }, |
|||
formBpm: { type: Boolean, default: true } |
|||
}); |
|||
const formRef = ref(); |
|||
const useForm = Form.useForm; |
|||
const emit = defineEmits(['register', 'ok']); |
|||
const formData = reactive<Record<string, any>>({ |
|||
id: '', |
|||
deviceName: '', |
|||
deviceType: undefined, |
|||
deviceAddress: '', |
|||
userName: '', |
|||
userPassword: '', |
|||
isEnable: undefined, |
|||
fixedPosition: '', |
|||
deviceNum: '', |
|||
}); |
|||
const { createMessage } = useMessage(); |
|||
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } }); |
|||
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } }); |
|||
const confirmLoading = ref<boolean>(false); |
|||
//表单验证 |
|||
const validatorRules = { |
|||
deviceName: [{ required: true, message: '请输入设备名称!'},], |
|||
deviceType: [{ required: true, message: '请输入设备类型!'},], |
|||
deviceAddress: [{ required: true, message: '请输入设备地址!'},], |
|||
userName: [{ required: true, message: '请输入用户姓名!'},], |
|||
userPassword: [{ required: true, message: '请输入用户密码!'},], |
|||
isEnable: [{ required: true, message: '请输入是否启用!'},], |
|||
fixedPosition: [{ required: true, message: '请输入安装位置!'},], |
|||
deviceNum: [{ required: true, message: '请输入设备编号!'},], |
|||
}; |
|||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true }); |
|||
|
|||
// 表单禁用 |
|||
const disabled = computed(()=>{ |
|||
if(props.formBpm === true){ |
|||
if(props.formData.disabled === false){ |
|||
return false; |
|||
}else{ |
|||
return true; |
|||
} |
|||
} |
|||
return props.formDisabled; |
|||
}); |
|||
|
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
edit({}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
*/ |
|||
function edit(record) { |
|||
nextTick(() => { |
|||
resetFields(); |
|||
//赋值 |
|||
Object.assign(formData, record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 提交数据 |
|||
*/ |
|||
async function submitForm() { |
|||
// 触发表单验证 |
|||
await validate(); |
|||
confirmLoading.value = true; |
|||
const isUpdate = ref<boolean>(false); |
|||
//时间格式化 |
|||
let model = formData; |
|||
if (model.id) { |
|||
isUpdate.value = true; |
|||
} |
|||
//循环数据 |
|||
for (let data in model) { |
|||
//如果该数据是数组并且是字符串类型 |
|||
if (model[data] instanceof Array) { |
|||
let valueType = getValueType(formRef.value.getProps, data); |
|||
//如果是字符串类型的需要变成以逗号分割的字符串 |
|||
if (valueType === 'string') { |
|||
model[data] = model[data].join(','); |
|||
} |
|||
} |
|||
} |
|||
await saveOrUpdate(model, isUpdate.value) |
|||
.then((res) => { |
|||
if (res.success) { |
|||
createMessage.success(res.message); |
|||
emit('ok'); |
|||
} else { |
|||
createMessage.warning(res.message); |
|||
} |
|||
}) |
|||
.finally(() => { |
|||
confirmLoading.value = false; |
|||
}); |
|||
} |
|||
|
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
submitForm, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.antd-modal-form { |
|||
min-height: 500px !important; |
|||
overflow-y: auto; |
|||
padding: 24px 24px 24px 24px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭"> |
|||
<MsVideoRecorderForm ref="registerForm" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></MsVideoRecorderForm> |
|||
</a-modal> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref, nextTick} from 'vue'; |
|||
import MsVideoRecorderForm from './MsVideoRecorderForm.vue' |
|||
|
|||
const title = ref<string>(''); |
|||
const width = ref<number>(1080); |
|||
const visible = ref<boolean>(false); |
|||
const disableSubmit = ref<boolean>(false); |
|||
const registerForm = ref(); |
|||
const emit = defineEmits(['register', 'success']); |
|||
|
|||
/** |
|||
* 新增 |
|||
*/ |
|||
function add() { |
|||
title.value = '新增'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.add(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 编辑 |
|||
* @param record |
|||
*/ |
|||
function edit(record) { |
|||
title.value = disableSubmit.value ? '详情' : '编辑'; |
|||
visible.value = true; |
|||
nextTick(() => { |
|||
registerForm.value.edit(record); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 确定按钮点击事件 |
|||
*/ |
|||
function handleOk() { |
|||
registerForm.value.submitForm(); |
|||
} |
|||
|
|||
/** |
|||
* form保存回调事件 |
|||
*/ |
|||
function submitCallback() { |
|||
handleCancel(); |
|||
emit('success'); |
|||
} |
|||
|
|||
/** |
|||
* 取消按钮回调事件 |
|||
*/ |
|||
function handleCancel() { |
|||
visible.value = false; |
|||
} |
|||
|
|||
defineExpose({ |
|||
add, |
|||
edit, |
|||
disableSubmit, |
|||
}); |
|||
</script> |
|||
|
|||
<style> |
|||
/**隐藏样式-modal确定按钮 */ |
|||
.jee-hidden { |
|||
display: none !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,75 @@ |
|||
import { defHttp } from '/@/utils/http/axios'; |
|||
import { useMessage } from "/@/hooks/web/useMessage"; |
|||
|
|||
const { createConfirm } = useMessage(); |
|||
|
|||
enum Api { |
|||
list = '/military/msDeviceInfo/list', |
|||
save='/military/msDeviceInfo/add', |
|||
edit='/military/msDeviceInfo/edit', |
|||
deleteOne = '/military/msDeviceInfo/delete', |
|||
deleteBatch = '/military/msDeviceInfo/deleteBatch', |
|||
importExcel = '/military/msDeviceInfo/importExcel', |
|||
exportXls = '/military/msDeviceInfo/exportXls', |
|||
|
|||
relayCorxSwitch= '/alarm/recv/relayCorx/switch', |
|||
} |
|||
|
|||
export const relayCorxSwitch = Api.relayCorxSwitch; |
|||
/** |
|||
* 导出api |
|||
* @param params |
|||
*/ |
|||
export const getExportUrl = Api.exportXls; |
|||
|
|||
/** |
|||
* 导入api |
|||
*/ |
|||
export const getImportUrl = Api.importExcel; |
|||
|
|||
/** |
|||
* 列表接口 |
|||
* @param params |
|||
*/ |
|||
export const list = (params) => defHttp.get({ url: Api.list, params }); |
|||
|
|||
/** |
|||
* 删除单个 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const deleteOne = (params,handleSuccess) => { |
|||
return defHttp.delete({url: Api.deleteOne, params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 批量删除 |
|||
* @param params |
|||
* @param handleSuccess |
|||
*/ |
|||
export const batchDelete = (params, handleSuccess) => { |
|||
createConfirm({ |
|||
iconType: 'warning', |
|||
title: '确认删除', |
|||
content: '是否删除选中数据', |
|||
okText: '确认', |
|||
cancelText: '取消', |
|||
onOk: () => { |
|||
return defHttp.delete({url: Api.deleteBatch, data: params}, {joinParamsToUrl: true}).then(() => { |
|||
handleSuccess(); |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
|
|||
/** |
|||
* 保存或者更新 |
|||
* @param params |
|||
* @param isUpdate |
|||
*/ |
|||
export const saveOrUpdate = (params, isUpdate) => { |
|||
let url = isUpdate ? Api.edit : Api.save; |
|||
return defHttp.post({ url: url, params }, { isTransformResponse: false }); |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue