设备维护
This commit is contained in:
parent
bf4f19122f
commit
c581bcc6f0
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<BasicDrawer
|
||||
v-bind="$attrs"
|
||||
@register="registerDrawer"
|
||||
:title="getTitle"
|
||||
:width="adaptiveWidth"
|
||||
@ok="handleSubmit"
|
||||
:showFooter="showFooter"
|
||||
destroyOnClose
|
||||
>
|
||||
<BasicForm @register="registerForm" ></BasicForm>
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
|
||||
import { BasicForm, useForm } from '/@/components/Form/index';
|
||||
import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
|
||||
import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
|
||||
import { formSchema } from '../weihu.data';
|
||||
import { saveSendOrg } from '../weihu.api';
|
||||
import { useMessage } from "@/hooks/web/useMessage";
|
||||
const { createMessage } = useMessage();
|
||||
// 声明Emits
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
const attrs = useAttrs();
|
||||
const isUpdate = ref(true);
|
||||
const rowId = ref('');
|
||||
//表单配置
|
||||
const [registerForm, { setProps, resetFields, validateFields, getFieldsValue, setFieldsValue, validate, updateSchema }] = useForm({
|
||||
labelWidth: 90,
|
||||
schemas: formSchema,
|
||||
showActionButtonGroup: false,
|
||||
});
|
||||
const showFooter = ref(true);
|
||||
const records = ref<any[]>([]);
|
||||
//表单赋值
|
||||
const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
|
||||
await resetFields();
|
||||
showFooter.value = data?.showFooter ?? true;
|
||||
setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
|
||||
isUpdate.value = !!data?.isUpdate;
|
||||
|
||||
if(data.records){
|
||||
records.value = data.records;
|
||||
let record = data.records[0];
|
||||
console.log(record);
|
||||
await setFieldsValue({
|
||||
...record,
|
||||
});
|
||||
}
|
||||
// 隐藏底部时禁用整个表单
|
||||
setProps({ disabled: !showFooter.value });
|
||||
});
|
||||
//获取标题
|
||||
const getTitle = computed(() => {
|
||||
if (!unref(isUpdate)) {
|
||||
return '新增维护设备';
|
||||
} else {
|
||||
return unref(showFooter) ? '指定派往机构' : '维护设备详情';
|
||||
}
|
||||
});
|
||||
const { adaptiveWidth } = useDrawerAdaptiveWidth();
|
||||
|
||||
//提交事件
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
let values = await validate();
|
||||
values.deviceMaintainList = records.value;
|
||||
setDrawerProps({ confirmLoading: true });
|
||||
await saveSendOrg(values);
|
||||
//关闭弹窗
|
||||
closeDrawer();
|
||||
//刷新列表
|
||||
emit('success');
|
||||
} finally {
|
||||
setDrawerProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<div>
|
||||
<!--引用表格-->
|
||||
<BasicTable @register="registerTable" :rowSelection="rowSelection" @selection-change="handleSelectionChange" size="small">
|
||||
<!--插槽:table标题-->
|
||||
<template #tableTitle>
|
||||
<a-button v-if="selectedRowKeys.length > 0" preIcon="ant-design:flag-outlined" @click="handleSendOrg" >选择发往机构</a-button>
|
||||
</template>
|
||||
<!--操作栏-->
|
||||
<template #action="{ record }">
|
||||
<TableAction :actions="getTableAction(record)"/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<SendOrgDrawer @register="registerDrawer" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" name="iot-weihu" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { BasicTable, TableAction } from '/@/components/Table';
|
||||
import { useListPage } from '/@/hooks/system/useListPage';
|
||||
import { list } from './weihu.api';
|
||||
import { columns, searchFormSchema } from './weihu.data';
|
||||
import { useDrawer } from "@/components/Drawer";
|
||||
import SendOrgDrawer from './components/SendOrgDrawer.vue';
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
const queryParam = reactive<any>({});
|
||||
const selectedRows = ref<any[]>([]);
|
||||
|
||||
//注册table数据
|
||||
const { prefixCls,tableContext } = useListPage({
|
||||
tableProps:{
|
||||
title: '设备维修',
|
||||
api: list,
|
||||
columns,
|
||||
canResize:false,
|
||||
showIndexColumn: true,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
schemas: searchFormSchema,
|
||||
},
|
||||
actionColumn: {
|
||||
width: 120,
|
||||
fixed:'right'
|
||||
},
|
||||
beforeFetch: (params) => {
|
||||
return Object.assign(params, queryParam);
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext
|
||||
|
||||
function handleSelectionChange(selectedRowSet) {
|
||||
selectedRows.value = selectedRowSet.rows;
|
||||
console.log('当前选中数据:', selectedRows.value);
|
||||
}
|
||||
|
||||
function handleSendOrg(){
|
||||
openDrawer(true, {
|
||||
records : selectedRows.value,
|
||||
isUpdate: true,
|
||||
showFooter: true,
|
||||
tenantSaas: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 成功回调
|
||||
*/
|
||||
function handleSuccess() {
|
||||
(selectedRowKeys.value = []) && reload();
|
||||
}
|
||||
|
||||
function handleDetail(record){
|
||||
let records = [];
|
||||
records.push(record);
|
||||
openDrawer(true, {
|
||||
records : records,
|
||||
isUpdate: true,
|
||||
showFooter: false,
|
||||
tenantSaas: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 操作栏
|
||||
*/
|
||||
function getTableAction(record){
|
||||
const actions = [];
|
||||
if(record.reserveDepartId){
|
||||
actions.push({
|
||||
label: '详情',
|
||||
onClick: () => {
|
||||
handleDetail(record);
|
||||
}
|
||||
});
|
||||
}
|
||||
return actions;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.selected-row) {
|
||||
background-color: #e6f7ff !important;
|
||||
|
||||
&:hover td {
|
||||
background-color: #e6f7ff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { defHttp } from '/@/utils/http/axios';
|
||||
|
||||
enum Api {
|
||||
list = '/iot/weihu/deviceMaintain/list',
|
||||
saveSendOrg = '/iot/weihu/deviceMaintain/saveSendOrg',
|
||||
}
|
||||
|
||||
/**
|
||||
* 接口
|
||||
* @param params
|
||||
*/
|
||||
export const list = (params) => defHttp.get({ url: Api.list, params });
|
||||
|
||||
/**
|
||||
* 保存
|
||||
* @param params
|
||||
*/
|
||||
export const saveSendOrg = (params) => {
|
||||
return defHttp.post({ url: Api.saveSendOrg, params });
|
||||
};
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
import {BasicColumn} from '/@/components/Table';
|
||||
import {FormSchema} from '/@/components/Table';
|
||||
|
||||
//列表数据
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '设备类型',
|
||||
align: "center",
|
||||
dataIndex: 'type'
|
||||
},
|
||||
{
|
||||
title: '设备编码',
|
||||
align: "center",
|
||||
dataIndex: 'deviceId'
|
||||
},
|
||||
{
|
||||
title: 'SN',
|
||||
align: "center",
|
||||
dataIndex: 'sn'
|
||||
},
|
||||
{
|
||||
title: '维修状态',
|
||||
align: "center",
|
||||
dataIndex: 'maintainStatus',
|
||||
customRender:({record})=>{
|
||||
if(record.maintainStatus==0){
|
||||
return "正常";
|
||||
}
|
||||
if(record.maintainStatus==1){
|
||||
return "报修";
|
||||
}
|
||||
if(record.maintainStatus==2){
|
||||
return "报废";
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '绑定区域',
|
||||
align: "center",
|
||||
dataIndex: 'nuId',
|
||||
},
|
||||
{
|
||||
title: '绑定机构',
|
||||
align: "center",
|
||||
dataIndex: 'orgCode',
|
||||
},
|
||||
{
|
||||
title: '绑定机构名',
|
||||
align: "center",
|
||||
dataIndex: 'departName',
|
||||
},
|
||||
{
|
||||
title: '发往机构名',
|
||||
align: "center",
|
||||
dataIndex: 'reserveDepartName'
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
align: "center",
|
||||
dataIndex: 'updateDate'
|
||||
},
|
||||
];
|
||||
|
||||
export const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
label: '设备类型',
|
||||
field: 'type',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
placeholder: '请选择类型',
|
||||
options: [
|
||||
{ label: '摄像头', value: '摄像头' },
|
||||
{ label: '电表', value: '电表' },
|
||||
{ label: '水表', value: '水表' },
|
||||
{ label: '温湿度计', value: '温湿度计' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
label: 'SN',
|
||||
field: 'sn',
|
||||
component: 'Input',
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
label: '维修状态',
|
||||
field: 'maintainStatus',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
placeholder: '请选择类型',
|
||||
options: [
|
||||
{ label: '正常', value: '0' },
|
||||
{ label: '报修', value: '1' },
|
||||
{ label: '报废', value: '2' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
label: '在线状态',
|
||||
field: 'online',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
placeholder: '请选择状态',
|
||||
options: [
|
||||
{ label: '在线', value: 'true' },
|
||||
{ label: '离线', value: 'false' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
label: '信号强度',
|
||||
field: 'csq',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
placeholder: '请选择强度',
|
||||
options: [
|
||||
{ label: '高', value: '1' },
|
||||
{ label: '中', value: '2' },
|
||||
{ label: '低', value: '3' },
|
||||
],
|
||||
},
|
||||
colProps: { span: 4 },
|
||||
},
|
||||
{
|
||||
label: '机构',
|
||||
field: 'departId',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
placeholder: '请选择机构',
|
||||
dictCode: 'sys_depart,depart_name,id,org_category = 1 order by depart_name asc',
|
||||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
label: '区域',
|
||||
field: 'nuId',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
placeholder: '请选择区域',
|
||||
dictCode: 'nu_base_info,nu_name,id,del_flag = 0 order by nu_name asc',
|
||||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
{
|
||||
label: '发往机构',
|
||||
field: 'reserveDepartId',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
placeholder: '请选择区域',
|
||||
dictCode: 'nu_base_info,nu_name,id,del_flag = 0 order by nu_name asc',
|
||||
},
|
||||
colProps: { span: 6 },
|
||||
},
|
||||
];
|
||||
|
||||
export const formSchema: FormSchema[] = [
|
||||
{
|
||||
label: '',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
{
|
||||
label: '选择机构',
|
||||
field: 'reserveDepartId',
|
||||
component: 'JSelectDept',
|
||||
componentProps: {
|
||||
//是否开启异步加载
|
||||
sync: false,
|
||||
//是否显示复选框
|
||||
checkable: true,
|
||||
//是否显示选择按钮
|
||||
showButton: false,
|
||||
//父子节点选中状态不再关联
|
||||
checkStrictly: false,
|
||||
//选择框标题
|
||||
modalTitle: '请选择机构',
|
||||
},
|
||||
required: true
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
field: 'remark',
|
||||
component: 'InputTextArea',
|
||||
componentProps: {
|
||||
showCount: true,
|
||||
maxlength: 1000,
|
||||
autosize:{
|
||||
minRows: 5
|
||||
},
|
||||
}
|
||||
},
|
||||
];
|
||||
Loading…
Reference in New Issue