设备维护
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